/* ================================================================
   武塔迷宮イルドラージュ  —  game-yrdraziw.css  v3
   ================================================================ */

/* ── §1 Variables ─────────────────────────────────────────────── */
.ylg-game{
  --ylg-bg:       rgba(13, 15, 23, 0.35);
  --ylg-panel:    rgba(20, 23, 32, 0.65);
  --ylg-card:     rgba(26, 30, 43, 0.75);
  --ylg-card-hi:  rgba(34, 39, 56, 0.85);
  --ylg-border:   rgba(42, 47, 64, 0.4);
  --ylg-border-l: rgba(58, 63, 85, 0.6);
  --ylg-fg:       #e0dfe8;
  --ylg-fg-dim:   #9a98b0;
  --ylg-fg-faint: #5d5b72;
  --ylg-accent:   #6e8efb;
  --ylg-accent2:  #a777e3;
  --ylg-gold:     #f5a623;
  --ylg-red:      #ff5c5c;
  --ylg-green:    #38d67a;
  --ylg-blue:     #4fc3f7;
  --ylg-hp:       #38d67a;
  --ylg-mp:       #6e8efb;
  --ylg-sp:       #f5a623;
  --ylg-exp:      #a777e3;
  --ylg-radius:   10px;
  --ylg-font:     'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  font-family:    var(--ylg-font);
  color:          var(--ylg-fg);
}

/* ── §2 Game Container ────────────────────────────────────────── */
.ylg-game{
  max-width: 440px;
  margin: 20px auto;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

/* ── §3 Panel System (fixed frame) ────────────────────────────── */
.ylg-panels{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  height: clamp(560px, calc(100svh - 60px), 840px);
  margin: 0 auto;
  background: var(--ylg-panel);
  border: 1px solid var(--ylg-border);
  border-radius: var(--ylg-radius);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── スマホ全画面モード（ゲーム開始後にJSが付与） ────────────── */
/* body に position:fixed を付けると width 再計算の副作用で右はみ出しが起きるため */
/* 単純な overflow:hidden のみで封鎖する方式に切り替える。               */
body.ylg-fullscreen{
  overflow: hidden;
}
/* JS側で document.documentElement.style.overflow='hidden' も設定する */
body.ylg-fullscreen .ylg-game{
  max-width: none;
  margin: 0;
  position: fixed;
  /* inset:0 ≡ top/right/bottom/left:0 でビューポート全面を確実に覆う */
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100dvh;                      /* モダンブラウザ向け: 動的VH */
  height: calc(var(--vh, 1vh) * 100);  /* iOS Safari フォールバック */
  z-index: 9000;
  overflow: hidden;
}
body.ylg-fullscreen .ylg-panels{
  max-width: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── §4 Header ────────────────────────────────────────────────── */
.ylg-hdr{
  display: flex;
  align-items: center;
  height: 42px;
  min-height: 42px;
  padding: 0 6px;
  background: var(--ylg-card);
  border-bottom: 1px solid var(--ylg-border);
  gap: 4px;
}
.ylg-hdr-side{
  display: flex;
  align-items: center;
  flex: 1;
  gap: 2px;
}
.ylg-hdr-side--left{ justify-content: flex-start; }
.ylg-hdr-side--right{ justify-content: flex-end; }
.ylg-hdr-title{
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.ylg-hdr-btn{
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--ylg-fg); font-size: 18px;
  cursor: pointer; border-radius: 6px; flex-shrink: 0;
}
.ylg-hdr-btn:hover{ background: var(--ylg-card-hi); }
.ylg-hdr-btn.hide{ visibility: hidden; pointer-events: none; }

/* Sound toggle button */
.ylg-sound-toggle{
  font-size: 15px;
  opacity: .7;
  transition: opacity .2s, transform .15s;
}
.ylg-sound-toggle:hover{ opacity: 1; }
.ylg-sound-toggle:active{ transform: scale(.9); }

/* ── §4b Subheader (panel-level sticky summary) ──────────────── */
.ylg-subhdr{
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  background: var(--ylg-card);
  border-bottom: 1px solid var(--ylg-border);
  font-size: 12px;
  color: var(--ylg-fg-dim);
  text-align: center;
  flex-shrink: 0;
}
.ylg-subhdr.visible{ display: flex; }

/* ── §5 Body ──────────────────────────────────────────────────── */
.ylg-body{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--ylg-border) transparent;
}
.ylg-body::-webkit-scrollbar{ width: 5px; }
.ylg-body::-webkit-scrollbar-thumb{ background: var(--ylg-border); border-radius: 3px; }

/* ── §6 Footer ────────────────────────────────────────────────── */
.ylg-foot{
  display: flex;
  min-height: 48px;
  border-top: 1px solid var(--ylg-border);
  background: var(--ylg-card);
  position: relative;
  z-index: 76;
}
.ylg-foot-btn{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  border: none; background: none; color: var(--ylg-fg-dim);
  font-size: 10px; cursor: pointer; padding: 4px 0;
  transition: color .15s, transform .15s;
  position: relative;
}
.ylg-foot-btn .fi{ font-size: 17px; }
.ylg-foot-btn.active{
  color: var(--ylg-accent);
  transform: translateY(-5px);
}
.ylg-foot-btn.active::after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%; right: 20%;
  height: 2px;
  background: var(--ylg-accent);
  border-radius: 2px 2px 0 0;
}
.ylg-foot-btn:hover{ color: var(--ylg-fg); }

/* ── §6b Tab Overlay (toggle panels) ─────────────────────────── */
@keyframes ylg-tab-open{
  from{ opacity:0; transform:scale(.05); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes ylg-tab-close{
  from{ opacity:1; transform:scale(1); }
  to  { opacity:0; transform:scale(.05); }
}
.ylg-tab-overlay{
  position: absolute;
  inset: 8px 8px 56px;
  z-index: 75;
  display: flex;
  flex-direction: column;
  background: var(--ylg-panel);
  border-radius: 14px;
  border: 1px solid var(--ylg-border-l);
  box-shadow: 0 8px 36px rgba(0,0,0,.72);
  overflow: hidden;
  animation: ylg-tab-open .2s ease-out forwards;
}
.ylg-tab-overlay.closing{
  animation: ylg-tab-close .15s ease-in forwards;
}
.ylg-tab-panel{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ylg-tab-hdr{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ylg-border);
  background: var(--ylg-panel);
  flex-shrink: 0;
}
.ylg-tab-hdr-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--ylg-fg);
  text-align: center;
}
.ylg-tab-close{
  position: absolute;
  right: 4px;
  border: none;
  background: none;
  color: var(--ylg-fg-dim);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}
.ylg-tab-close:hover{ color: var(--ylg-fg); }
.ylg-ov-back{ position: absolute; left: 4px; }
.ylg-tab-subhdr{
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  background: var(--ylg-card);
  border-bottom: 1px solid var(--ylg-border);
  font-size: 12px;
  color: var(--ylg-fg-dim);
  text-align: center;
  flex-shrink: 0;
}
.ylg-tab-subhdr.visible{ display: flex; }
.ylg-tab-body{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--ylg-border) transparent;
}
.ylg-tab-body::-webkit-scrollbar{ width: 5px; }
.ylg-tab-body::-webkit-scrollbar-thumb{ background: var(--ylg-border); border-radius: 3px; }

/* ── §7 Sidebar ───────────────────────────────────────────────── */
.ylg-sidebar{
  position: absolute; inset: 0; z-index: 90;
  pointer-events: none; opacity: 0;
  transition: opacity .2s;
}
.ylg-sidebar.open{ pointer-events: auto; opacity: 1; }
.ylg-sidebar-overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
}
.ylg-sidebar-inner{
  position: absolute; top: 0; right: 0;
  width: 180px; height: 100%;
  background: var(--ylg-card);
  border-left: 1px solid var(--ylg-border);
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  transform: translateX(100%);
  transition: transform .2s ease;
}
.ylg-sidebar.open .ylg-sidebar-inner{ transform: translateX(0); }
.ylg-sidebar-inner button{
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: none;
  color: var(--ylg-fg); font-size: 14px; cursor: pointer;
  border-radius: 6px;
}
.ylg-sidebar-inner button:hover{ background: var(--ylg-card-hi); }
.ylg-sb-danger{ color: var(--ylg-red) !important; }

/* ── §8 Common Components ─────────────────────────────────────── */

/* -- Buttons -- */
.ylg-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border: 1px solid var(--ylg-border-l);
  border-radius: 6px; background: var(--ylg-card); color: var(--ylg-fg);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.ylg-btn:hover:not(:disabled){ background: var(--ylg-card-hi); border-color: var(--ylg-fg-dim); }
.ylg-btn:disabled{ opacity: .35; cursor: not-allowed; }
.ylg-btn-primary{ background: var(--ylg-accent); border-color: var(--ylg-accent); color: #fff; }
.ylg-btn-primary:hover:not(:disabled){ background: #5a7ae0; border-color: #5a7ae0; }
.ylg-btn-success{ background: #2b8a3e; border-color: #2b8a3e; color: #fff; }
.ylg-btn-success:hover:not(:disabled){ background: #237632; }
.ylg-btn-danger{ background: var(--ylg-red); border-color: var(--ylg-red); color: #fff; }
.ylg-btn-gold{ background: var(--ylg-gold); border-color: var(--ylg-gold); color: #1a1a2e; font-weight: 700; }
.ylg-btn-outline{ background: transparent; }
.ylg-btn-secondary{ background: var(--ylg-card); border-color: var(--ylg-fg-dim); color: var(--ylg-fg-dim); }
.ylg-btn-secondary:hover:not(:disabled){ background: var(--ylg-card-hi); color: var(--ylg-fg); border-color: var(--ylg-fg); }
.ylg-btn-sm{ padding: 5px 10px; font-size: 12px; }

/* -- Cards -- */
.ylg-card{
  background: var(--ylg-card);
  border: 1px solid var(--ylg-border);
  border-radius: var(--ylg-radius);
  padding: 12px;
}

/* -- Tags -- */
.ylg-tag{
  display: inline-block;
  padding: 1px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 700;
  background: var(--ylg-card-hi);
  color: var(--ylg-fg-dim);
  line-height: 1.5;
}
.ylg-tag-race{ background: #1e2740; color: var(--ylg-accent); }
.ylg-tag-common{ color: var(--ylg-fg-dim); }
.ylg-tag-uncommon{ background: #1a2b38; color: #4fc3f7; }
.ylg-tag-rare{ background: #2e2800; color: #ffd740; }
.ylg-tag-legendary{ background: #27143a; color: #c084fc; }
.ylg-tag-unique{ background: #28163a; color: #a855f7; }
/* .ylg-tag-set (未実装) : background: #1e3028; color: #38d67a; */

/* -- Progress Bars -- */
.ylg-bar-row{
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; margin-bottom: 3px;
}
.ylg-bar-row .lbl{ width: 24px; text-align: right; color: var(--ylg-fg-dim); font-weight: 600; flex-shrink: 0; }
.ylg-bar-track{
  flex: 1; height: 10px;
  background: var(--ylg-bg);
  border-radius: 5px; overflow: hidden;
}
.ylg-bar-fill{
  height: 100%; border-radius: 5px;
  transition: width .3s ease;
}
.ylg-bar-hp{ background: var(--ylg-hp); }
.ylg-bar-mp{ background: var(--ylg-mp); }
.ylg-bar-sp{ background: var(--ylg-sp); }
.ylg-bar-exp{ background: var(--ylg-exp); }
.ylg-bar-row .val{ width: 50px; text-align: right; color: var(--ylg-fg-dim); font-size: 10px; flex-shrink: 0; }

/* -- Inputs -- */
.ylg-input{
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid var(--ylg-border-l);
  border-radius: 6px; background: var(--ylg-bg);
  color: var(--ylg-fg); font-size: 14px;
}
.ylg-input:focus{ outline: none; border-color: var(--ylg-accent); }
.ylg-label{ display: block; font-size: 12px; font-weight: 600; color: var(--ylg-fg-dim); margin-bottom: 4px; }
.ylg-hint{ font-size: 11px; color: var(--ylg-fg-faint); margin-top: 2px; }

/* -- Utilities -- */
.ylg-muted{ color: var(--ylg-fg-faint); font-size: 12px; }
.ylg-mt8{ margin-top: 8px; }
.ylg-mb8{ margin-bottom: 8px; }
.ylg-center{ text-align: center; }
.ylg-section-title{
  font-size: 14px; font-weight: 700;
  margin-bottom: 8px;
  color: var(--ylg-fg);
}

/* -- Rarity Colors (for inline text) -- */
.common   { color: var(--ylg-fg-dim); }
.uncommon { color: #4fc3f7; }
.rare     { color: #ffd740; }
.legendary{ color: #c084fc; }
.unique   { color: #a855f7; }
/* .set (未実装) { color: #38d67a; } */

/* -- Rarity Borders (for item rows) -- */
.rarity-common{ border-color: var(--ylg-border); }
.rarity-uncommon{ border-color: #4fc3f7 !important; }
.rarity-rare{ border-color: #ffd740 !important; }
.rarity-legendary{ border-color: #c084fc !important; box-shadow: 0 0 8px rgba(192,132,252,.25); }
.rarity-unique{ border-color: #a855f7 !important; box-shadow: 0 0 8px rgba(168,85,247,.25); }
/* .rarity-set (未実装) { border-color: #38d67a !important; } */

/* -- Stat color coding (enchantment display) -- */
.st-boost{ color: #4fc3f7; font-weight: 700; }
.st-ench{ color: #ce93d8; font-weight: 700; }
.st-atk{ color: var(--ylg-red); font-weight: 700; }
.st-def{ color: var(--ylg-blue); font-weight: 700; }

/* -- Stat diff indicators (equip comparison) -- */
.st-up{ color: #4caf50; font-size: 11px; font-weight: 700; }
.st-down{ color: #ff5c5c; font-size: 11px; font-weight: 700; }
.st-neutral{ color: var(--ylg-fg-faint,#5d5b72); font-size: 11px; }
.ylg-eslot-diff{ margin-top: 2px; font-size: 11px; line-height: 1.3; }
.pi-diff{ margin-top: 2px; font-size: 11px; line-height: 1.3; }

/* ── §8.5 Title Screen ──────────────────────────────────────── */
.ylg-title-screen{
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 20px 32px; text-align: center; gap: 6px;
  min-height: 100%;
}
.ylg-title-logo{
  font-size: 56px; line-height: 1;
  filter: drop-shadow(0 0 16px rgba(110,142,251,.6));
  margin-bottom: 4px;
}
.ylg-title-name{
  font-size: 22px; font-weight: 900; letter-spacing: .08em;
  color: var(--ylg-fg,#e0dfe8); margin-bottom: 2px;
}
.ylg-title-ruby{
  font-size: 11px; letter-spacing: .25em; color: var(--ylg-accent,#6e8efb);
  text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
}
.ylg-title-intro{
  background: var(--ylg-card,#1a1e2b); border: 1px solid var(--ylg-border,#2a2f40);
  border-radius: 10px; padding: 14px 18px; max-width: 360px; width: 100%;
  text-align: left; font-size: 13px; color: var(--ylg-fg-dim,#9a98b0);
  line-height: 1.7;
}
.ylg-title-intro p{ margin: 0 0 8px; }
.ylg-title-intro p:last-of-type{ margin-bottom: 8px; }
.ylg-title-features{
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ylg-title-features li{
  font-size: 12px; color: var(--ylg-fg,#e0dfe8);
  background: rgba(110,142,251,.07); border-radius: 5px; padding: 4px 10px;
}
.ylg-title-btns{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 10px; width: 100%; max-width: 260px;
}
.ylg-btn-lg{
  font-size: 16px; padding: 12px 36px; border-radius: 10px; font-weight: 800;
  letter-spacing: .04em; width: 100%;
}
.ylg-title-saveinfo{
  font-size: 11px; color: var(--ylg-fg-faint,#5d5b72); margin-top: -4px;
}
.ylg-title-sound{
  margin-top: 10px; width: 100%; max-width: 260px; text-align: center;
}
.ylg-title-sound-btn{
  background: var(--ylg-card,#1a1e2b); border: 1px solid var(--ylg-border,#2a2f40);
  color: var(--ylg-fg-dim,#9a98b0); font-size: 13px; padding: 7px 22px;
  border-radius: 7px; cursor: pointer; transition: background .18s, color .18s, border-color .18s;
  width: 100%;
}
.ylg-title-sound-btn.is-on{
  background: rgba(110,142,251,.15); border-color: var(--ylg-accent,#6e8efb);
  color: var(--ylg-accent,#6e8efb); font-weight: 700;
}
.ylg-title-back-link{
  margin-top: 12px; width: 100%;
  display: flex; justify-content: center;
}
.ylg-title-community{
  width: 100%;
  border-color: rgba(110,142,251,.55);
  color: var(--ylg-fg,#e0dfe8);
}
.ylg-btn-text{
  background: none; border: none; color: var(--ylg-fg-dim,#9a98b0);
  font-size: 13px; padding: 8px 16px; cursor: pointer;
  transition: color .2s;
}
.ylg-btn-text:hover{
  color: var(--ylg-accent,#6e8efb);
}

/* ── §9 Toast ─────────────────────────────────────────────────── */
.ylg-toast{
  position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--ylg-card); border: 1px solid var(--ylg-border-l);
  border-radius: 8px; padding: 8px 18px;
  font-size: 13px; font-weight: 600;
  color: var(--ylg-fg); z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
.ylg-toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── §9b 右下スライドインポップアップ (汎用フレームワークAPI) ────── */
/* JS: game.popupBR(html, {width, duration}) で呼び出し可能        */
.ylg-popup-br{
  position: absolute;
  bottom: 72px;
  right: calc(-1 * (var(--popup-w, 250px) + 60px));
  width: var(--popup-w, 250px);
  background: rgba(14,17,28,0.92);
  border: 1px solid var(--ylg-border-l,#3a3f55);
  border-radius: 8px;
  padding: 8px 14px;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: right 0.45s cubic-bezier(0.22,0.61,0.36,1), opacity 0.4s;
}
.ylg-popup-br.show{
  right: 10px;
  opacity: 1;
}
/* Now Playing コンテンツ用スタイル (popupBR 内で使用) */
.ylg-np-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--ylg-fg,#e0dfe8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ylg-np-credit{
  font-size: 11px;
  color: var(--ylg-gold,#f5a623);
  margin-top: 2px;
  text-align: right;
}

/* ── §10 Home Screen ──────────────────────────────────────────── */
.ylg-char-card{ margin-bottom: 10px; }
.ylg-char-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ylg-char-icon{ font-size: 28px; margin-right: 8px; vertical-align: middle; }
.ylg-char-name{ font-size: 16px; font-weight: 700; }
.ylg-char-lv{ font-size: 14px; color: var(--ylg-gold); margin-left: 6px; }
.ylg-stat-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px 12px; font-size: 12px; color: var(--ylg-fg-dim);
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--ylg-border);
}
.ylg-stat-grid .v{ color: var(--ylg-fg); font-weight: 700; }
.ylg-fame-row{
  font-size: 12px; color: var(--ylg-fg-dim);
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--ylg-border);
}
.ylg-home-actions{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.ylg-home-actions .ylg-btn{ flex: 1 1 45%; min-width: 120px; }
/* Hub */
.ylg-hub{ padding-top: 4px; }
.ylg-hub-title{
  font-size: 18px; font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  color: var(--ylg-fg);
}
.ylg-hub-char{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--ylg-card);
  border: 1px solid var(--ylg-border);
  border-radius: var(--ylg-radius);
}
.ylg-hub-gold{
  margin-left: auto;
  color: var(--ylg-gold);
  font-weight: 700;
  font-size: 13px;
}
.ylg-hub-actions{
  display: flex; flex-direction: column; gap: 8px;
}
.ylg-hub-btn{
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
}

/* ── §11 Create Screen ────────────────────────────────────────── */.ylg-avatar-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-bottom: 10px;
}
.ylg-avatar-opt{
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  border: 2px solid var(--ylg-border); border-radius: var(--ylg-radius);
  background: var(--ylg-card); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ylg-avatar-opt:hover{ border-color: var(--ylg-fg-dim); }
.ylg-avatar-opt.selected{ border-color: var(--ylg-accent); background: #1a2240; }
.ylg-avatar-opt .av-icon{ font-size: 28px; margin-bottom: 2px; }
.ylg-avatar-opt .av-name{ font-size: 10px; color: var(--ylg-fg-dim); }.ylg-race-options{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ylg-race-opt{
  padding: 10px; border: 1px solid var(--ylg-border);
  border-radius: var(--ylg-radius); background: var(--ylg-card);
  cursor: pointer; transition: border-color .15s;
}
.ylg-race-opt:hover{ border-color: var(--ylg-fg-dim); }
.ylg-race-opt.selected{ border-color: var(--ylg-accent); background: #1a2240; }
.ylg-race-opt .rname{ font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.ylg-race-opt .rsub{ font-size: 12px; color: var(--ylg-fg-dim); margin-bottom: 4px; }
.ylg-race-opt .rstats{ font-size: 11px; color: var(--ylg-fg-faint); font-family: monospace; }

/* ── §11b Job Selection ───────────────────────────────────────── */
.ylg-job-options{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ylg-job-opt{
  padding: 10px; border: 1px solid var(--ylg-border);
  border-radius: var(--ylg-radius); background: var(--ylg-card);
  cursor: pointer; transition: border-color .15s;
}
.ylg-job-opt:hover{ border-color: var(--ylg-fg-dim); }
.ylg-job-opt.selected{ border-color: var(--ylg-accent); background: #1a2240; }
.ylg-job-opt .jname{ font-size: 15px; font-weight: 700; margin-bottom: 2px; display:flex; align-items:center; gap:6px; }
.ylg-job-opt .jcost{ font-size: 11px; font-weight: 600; color: var(--ylg-fg-dim); margin-left: auto; }
.ylg-job-opt .jdesc{ font-size: 12px; color: var(--ylg-fg-dim); margin-bottom: 4px; }
.ylg-job-opt .jintrinsic{ font-size: 11px; color: var(--ylg-accent); }

/* キャラ作成ナビゲーション行 */
.ylg-create-nav{ display: flex; gap: 8px; }
.ylg-create-nav .ylg-btn-secondary{ flex: 0 0 auto; }
.ylg-create-nav .ylg-btn-success{ flex: 1; }

/* ── §11c Message UI (full-screen) ────────────────────────────── */
.ylg-msg-overlay{
  position: absolute; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85);
  opacity: 0; transition: opacity .25s;
  cursor: pointer;
}
.ylg-msg-overlay.ylg-msg-dark{ background: rgba(0,0,0,.92); }
.ylg-msg-overlay.show{ opacity: 1; }
.ylg-msg-box{
  width: 85%; max-width: 380px;
  padding: 28px 20px 18px;
  color: var(--ylg-fg);
  position: relative;
}
.ylg-msg-text{
  font-size: 15px; line-height: 1.8;
  min-height: 60px;
  white-space: pre-wrap;
}
.ylg-msg-cursor{
  display: block; text-align: center;
  margin-top: 12px; font-size: 12px;
  color: var(--ylg-fg-faint); opacity: 0;
  transition: opacity .2s;
}
.ylg-msg-cursor.blink{
  opacity: 1;
  animation: ylg-cursor-blink .8s step-end infinite;
}
@keyframes ylg-cursor-blink{
  50%{ opacity: 0; }
}

/* ── §11d Dialog Window (bottom 1/3) ──────────────────────────── */
.ylg-dlg-overlay{
  position: absolute; inset: 0;
  z-index: 190;
  display: flex; align-items: flex-end;
  padding-bottom: 52px; /* footer height clearance */
  cursor: pointer;
  opacity: 0; transition: opacity .2s;
}
.ylg-dlg-overlay.show{ opacity: 1; }
.ylg-dlg-window{
  width: 100%;
  min-height: 33%; max-height: 40%;
  padding: 12px 14px 10px;
  background: rgba(10,12,22,.92);
  border-top: 2px solid var(--ylg-accent);
  position: relative;
  display: flex; flex-direction: column;
}
.ylg-dlg-name{
  position: absolute;
  top: -26px; left: 10px;
  background: var(--ylg-accent);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px 6px 0 0;
  line-height: 1.3;
}
.ylg-dlg-text{
  flex: 1;
  font-size: 14px; line-height: 1.8;
  color: var(--ylg-fg);
  white-space: pre-wrap;
  overflow-y: auto;
}
.ylg-dlg-window .ylg-msg-cursor{
  text-align: right; margin-top: 4px;
  font-size: 11px;
}

/* ── §12 Quest Screen ─────────────────────────────────────────── */
.ylg-quest-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; gap: 8px;
  border: 1px solid var(--ylg-border); border-radius: var(--ylg-radius);
  margin-bottom: 8px; cursor: pointer;
  background: var(--ylg-card); transition: border-color .15s;
}
.ylg-quest-row:hover:not(.locked){ border-color: var(--ylg-accent); }
.ylg-quest-row.locked{ opacity: .45; cursor: default; }
.ylg-quest-name{ font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.ylg-quest-clear{
  font-size: 11px; font-weight: 700; color: #f5a623;
  margin-left: 6px; letter-spacing: .5px;
}
.ylg-quest-info{ font-size: 11px; color: var(--ylg-fg-dim); }
/* checkpoint floor select grid */
.ylg-checkpoint-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 8px;
}
.ylg-checkpoint-grid .ylg-btn{
  font-size: 13px; padding: 10px 4px;
  text-align: center;
}
.ylg-prog-tier{
  font-size: 12px; font-weight: 600;
  margin: 0 4px;
}

/* ── §13 Dungeon Screen ───────────────────────────────────────── */
.ylg-floor-hdr{
  text-align: center; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--ylg-border);
}
.ylg-floor-hdr .fname{ font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.ylg-prog-block{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.ylg-prog-row{ display: flex; align-items: center; gap: 6px; justify-content: center; }
.ylg-prog-lbl{ font-size: 11px; color: var(--ylg-fg-dim); width: 38px; text-align: right; flex-shrink: 0; }
.ylg-prog-dots{ font-size: 12px; color: var(--ylg-fg-dim); letter-spacing: 1px; }
.ylg-prog-num{ font-size: 11px; color: var(--ylg-fg-dim); min-width: 28px; text-align: left; }
.ylg-node-grid{
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px;
}
.ylg-node{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ylg-border); border-radius: var(--ylg-radius);
  background: var(--ylg-card); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ylg-node:hover{ background: var(--ylg-card-hi); border-color: var(--ylg-fg-dim); }
.ylg-node.boss{ border-color: var(--ylg-red); background: #2a1420; }
.ylg-node.boss:hover{ border-color: #ff8888; }
.ylg-node.merchant{ border-color: var(--ylg-accent2); background: #241430; }
.ylg-node.merchant:hover{ border-color: #c09af5; }
/* Unidentified items box */
.ylg-unid-box{
  background: var(--ylg-card); border: 1px dashed var(--ylg-border-l);
  border-radius: var(--ylg-radius);
  padding: 8px 12px; margin-bottom: 8px;
  text-align: center;
}
.ylg-unid-title{
  font-size: 12px; font-weight: 700; color: var(--ylg-fg-dim);
  margin-bottom: 4px;
}
.ylg-unid-item{
  display: inline-block;
  font-size: 14px; font-weight: 700;
  margin: 2px 4px;
  text-shadow: 0 0 6px currentColor;
}
.ylg-node .nicon{ font-size: 26px; flex-shrink: 0; }
.ylg-node .ntype{ font-size: 13px; font-weight: 700; }
.ylg-node .ndesc{ font-size: 11px; color: var(--ylg-fg-dim); }
.ylg-mini-gauge{
  text-align: center; margin: 8px 0 4px;
  font-size: 12px;
}
.ylg-mini-status{ margin-bottom: 4px; }

/* ── §14 Event Screens ────────────────────────────────────────── */
.ylg-event-card{
  text-align: center;
  padding: 18px 14px;
}
.ylg-event-icon{ font-size: 42px; margin-bottom: 6px; }
.ylg-event-title{ font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.ylg-event-text{ font-size: 13px; color: var(--ylg-fg-dim); margin-bottom: 8px; line-height: 1.6; }
.ylg-event-result{ font-size: 13px; font-weight: 600; color: var(--ylg-green); margin-bottom: 4px; }
.ylg-event-loot{
  font-size: 13px; margin-bottom: 3px;
}

/* ── §15 Battle UI (in-frame) ─────────────────────────────────── */
.ylg-bt{
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  gap: 4px;
}
/* enemy info */
.ylg-bt-einfo{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 6px 8px;
  background: var(--ylg-card); border-radius: var(--ylg-radius);
  border: 1px solid var(--ylg-border);
}
.ylg-bt-ename{
  font-size: 14px; font-weight: 700;
  white-space: nowrap;
}
.ylg-bt-ebar-w{
  flex: 1; min-width: 80px;
  height: 10px; background: var(--ylg-bg);
  border-radius: 5px; overflow: hidden;
}
.ylg-bt-ebar{
  height: 100%; border-radius: 5px;
  background: var(--ylg-red);
  transition: width .3s ease;
}
.ylg-bt-eval{
  font-size: 11px; color: var(--ylg-fg-dim);
  white-space: nowrap;
}
/* battle field — horizontal Slay the Spire style */
.ylg-bt-field{
  display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 10px 0 6px;
  position: relative;
  min-height: 100px;
  flex-shrink: 0;
}
.ylg-bt-side{
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  flex: 1; min-width: 0;
}
.ylg-bt-sname{
  font-size: 11px; font-weight: 600;
  color: var(--ylg-fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.ylg-bt-sprite{
  font-size: 48px;
  position: relative;
  transition: transform .12s ease;
  line-height: 1;
}
.ylg-bt-vs{
  font-size: 14px; font-weight: 700;
  color: var(--ylg-fg-faint);
  letter-spacing: 3px;
  flex-shrink: 0;
}
/* player status */
.ylg-bt-pstatus{
  padding: 6px 8px;
  background: var(--ylg-card); border-radius: var(--ylg-radius);
  border: 1px solid var(--ylg-border);
}
.ylg-bt-gauge{
  font-size: 12px; color: var(--ylg-gold);
  text-align: center; margin-top: 2px;
}
/* battle log */
.ylg-bt-log{
  flex: 1; min-height: 60px; max-height: 100px;
  overflow-y: auto; padding: 4px 6px;
  background: var(--ylg-bg); border-radius: 6px;
  scrollbar-width: thin; scrollbar-color: var(--ylg-border) transparent;
}
.ylg-bt-log::-webkit-scrollbar{ width: 4px; }
.ylg-bt-log::-webkit-scrollbar-thumb{ background: var(--ylg-border); border-radius: 2px; }
.ylg-bt-msg{
  font-size: 12px; color: var(--ylg-fg-dim);
  padding: 2px 0; line-height: 1.4;
  animation: ylg-msg-in .2s ease-out;
}
/* commands */
.ylg-bt-cmds{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 4px 0 0;
  flex-shrink: 0;
  min-width: 0;     /* flex child として親幅以内に縮めるようにする */
  overflow: hidden; /* グリッドコンテナのはみ出し防止 */
}
.ylg-bt-cmd{
  display: flex; align-items: center; justify-content: center;
  padding: 8px 4px; width: 100%;
  min-width: 0;          /* グリッドセルが最小コンテンツ幅で膨らむのを防ぐ */
  overflow: hidden;      /* はみ出たテキストをクリップ */
  border: 1px solid var(--ylg-border-l); border-radius: 6px;
  background: var(--ylg-card); color: var(--ylg-fg);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.ylg-bt-cmd:hover:not(:disabled):not(.dis){
  background: var(--ylg-card-hi);
  border-color: var(--ylg-accent);
}
.ylg-bt-cmd:disabled, .ylg-bt-cmd.dis{
  opacity: .3; cursor: not-allowed;
}
.ylg-bt-cmd.ult{
  border-color: var(--ylg-gold);
  color: var(--ylg-gold);
}
.ylg-bt-cmd.ult:hover:not(:disabled){
  background: #2a2010;
  border-color: #f5c042;
}
.ylg-bt-cmd.active{
  border-color: #a78bfa;
  color: #a78bfa;
  background: #1a1030;
}

/* ── §16 Equipment Screen ─────────────────────────────────────── */
.ylg-equip-summary{
  font-size: 13px; margin-bottom: 8px;
  text-align: center;
  color: var(--ylg-fg);
  background: var(--ylg-card);
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--ylg-border);
}
.ylg-equip-slots{
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.ylg-eslot{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--ylg-border); border-radius: var(--ylg-radius);
  background: var(--ylg-card); cursor: pointer;
  transition: border-color .15s;
}
.ylg-eslot:hover{ border-color: var(--ylg-fg-dim); }
.ylg-eslot.empty{ opacity: .65; }
.ylg-eslot-icon{ font-size: 24px; flex-shrink: 0; width: 30px; text-align: center; }
.ylg-eslot-info{ flex: 1; min-width: 0; }
.ylg-eslot-slot{ font-size: 10px; color: var(--ylg-fg-faint); text-transform: uppercase; }
.ylg-eslot-name{ font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ylg-eslot-stat{ font-size: 11px; color: var(--ylg-fg-dim); }

/* ── §16b Pinned Slot (inline picker mode) ────────────────────── */
.ylg-pinned-slot{
  margin-bottom: 4px;
}
.ylg-pinned-label{
  font-size: 11px; font-weight: 700;
  color: var(--ylg-accent); text-transform: uppercase;
  margin-bottom: 4px; padding-left: 2px;
  letter-spacing: .04em;
}
.ylg-eslot.ylg-eslot-pinned{
  border-color: var(--ylg-accent);
  box-shadow: 0 0 0 1px var(--ylg-accent), 0 2px 8px rgba(0,0,0,.15);
  cursor: default;
}
.ylg-eslot.ylg-eslot-pinned:hover{ border-color: var(--ylg-accent); }

/* ── §17 Info Button ──────────────────────────────────────────── */
.ylg-info-btn{
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--ylg-border-l); border-radius: 50%;
  background: var(--ylg-bg); color: var(--ylg-fg-dim);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ylg-info-btn:hover{
  border-color: var(--ylg-accent);
  color: var(--ylg-accent);
}

/* ── §18 Picker ───────────────────────────────────────────────── */
.ylg-picker-overlay{
  position: absolute; inset: 0; z-index: 80;
  background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end;
  padding: 0;
}
.ylg-picker{
  width: 100%;
  max-height: 65%;
  background: var(--ylg-panel);
  border-top: 1px solid var(--ylg-border-l);
  border-radius: var(--ylg-radius) var(--ylg-radius) 0 0;
  overflow-y: auto;
}
.ylg-picker-hdr{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ylg-border);
  position: sticky; top: 0;
  background: var(--ylg-panel); z-index: 1;
}
.ylg-picker-hdr h3{ margin: 0; font-size: 14px; font-weight: 700; }
.ylg-picker-close{
  border: none; background: none; color: var(--ylg-fg-dim);
  font-size: 18px; cursor: pointer;
}
.ylg-picker-list{ padding: 4px 8px 8px; }
.ylg-picker-item{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid var(--ylg-border); border-radius: 8px;
  cursor: pointer; transition: border-color .15s;
}
.ylg-picker-item:hover{ border-color: var(--ylg-accent); }
.ylg-picker-item.pi-unequip{ border-style: dashed; opacity: .7; }
.ylg-picker-item .pi-icon{ font-size: 22px; flex-shrink: 0; }
.ylg-picker-item .pi-name{ font-size: 13px; font-weight: 700; }
.ylg-picker-item .pi-stat{ font-size: 11px; color: var(--ylg-fg-dim); }

/* ── §19 Skill Screen ─────────────────────────────────────────── */
.ylg-skill-pts{
  font-size: 13px; margin-bottom: 4px;
  background: var(--ylg-card); padding: 8px 12px;
  border-radius: var(--ylg-radius);
  border: 1px solid var(--ylg-border);
}
.ylg-skill-cat{
  font-size: 13px; font-weight: 700;
  color: var(--ylg-accent);
  margin: 10px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ylg-border);
}
.ylg-skill-row{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid var(--ylg-border); border-radius: var(--ylg-radius);
  background: var(--ylg-card);
  transition: border-color .15s;
}
.ylg-skill-row.learned{ border-color: var(--ylg-accent); background: #161c30; }
.ylg-sk-info{ flex: 1; min-width: 0; }
.ylg-sk-name{ font-size: 13px; font-weight: 700; margin-bottom: 1px; }
.ylg-sk-desc{ font-size: 11px; color: var(--ylg-fg-dim); line-height: 1.3; }
.ylg-sk-cost{ font-size: 11px; color: var(--ylg-fg-dim); margin-top: 2px; }

/* ── §20 Shop ─────────────────────────────────────────────────── */
.ylg-shop-gold{
  font-size: 14px; font-weight: 700;
  color: var(--ylg-gold);
  text-align: center;
  margin-bottom: 8px;
}
.ylg-shop-tabs{
  display: flex; gap: 4px; margin-bottom: 10px;
}
.ylg-shop-tab{
  flex: 1;
  padding: 7px 0; text-align: center;
  border: 1px solid var(--ylg-border-l); border-radius: 6px;
  background: none; color: var(--ylg-fg-dim);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.ylg-shop-tab.active{
  background: var(--ylg-accent); border-color: var(--ylg-accent);
  color: #fff;
}
.ylg-shop-tab:hover:not(.active){ background: var(--ylg-card-hi); color: var(--ylg-fg); }
.ylg-shop-item{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 5px;
  border: 1px solid var(--ylg-border); border-radius: var(--ylg-radius);
  background: var(--ylg-card); cursor: pointer;
  transition: border-color .15s;
}
.ylg-shop-item:hover:not(.dis){ border-color: var(--ylg-accent); }
.ylg-shop-item.dis{ opacity: .4; cursor: not-allowed; }
.ylg-shop-bulk-sell{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 8px;
}
.ylg-shop-bulk-sell .ylg-select{
  padding: 6px 8px; border-radius: var(--ylg-radius);
  border: 1px solid var(--ylg-border); background: var(--ylg-card);
  color: var(--ylg-fg); font-size: 13px;
}
.si-icon{ font-size: 22px; flex-shrink: 0; }
.si-info{ flex: 1; min-width: 0; }
.si-name{ font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-stat{ font-size: 11px; color: var(--ylg-fg-dim); }
.si-price{
  font-size: 13px; font-weight: 700;
  color: var(--ylg-gold); white-space: nowrap;
  flex-shrink: 0;
}
.si-price.sell{ color: var(--ylg-green); }

/* merchant card variant */
.ylg-merchant{
  border-color: var(--ylg-accent2);
  background: #1c1428;
}

/* ── §21 Item Detail Modal ────────────────────────────────────── */
.ylg-detail-overlay{
  position: absolute; inset: 0; z-index: 85;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ylg-detail{
  background: var(--ylg-card);
  border: 1px solid var(--ylg-border-l);
  border-radius: var(--ylg-radius);
  padding: 20px;
  width: 100%; max-width: 300px;
  text-align: center;
}
.ylg-detail-icon{ font-size: 44px; margin-bottom: 6px; }
.ylg-detail-name{
  font-size: 17px; font-weight: 700;
  margin-bottom: 6px;
}
.ylg-detail-tags{
  display: flex; gap: 5px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 10px;
}
.ylg-detail-stats{
  font-size: 13px; font-weight: 600;
  color: var(--ylg-fg);
  margin-bottom: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--ylg-border);
  border-bottom: 1px solid var(--ylg-border);
}
.ylg-detail-desc{
  font-size: 13px; color: var(--ylg-fg-dim);
  line-height: 1.6; margin-bottom: 8px;
  text-align: left;
}
.ylg-detail-flavor{
  font-size: 12px; color: var(--ylg-fg-faint);
  font-style: italic; line-height: 1.5;
  margin-bottom: 8px;
  text-align: left;
}
.ylg-detail-price{
  font-size: 12px; color: var(--ylg-gold);
  margin-bottom: 10px;
}

/* ── §21b Inventory Item Overlay ──────────────────────────────── */
.ylg-inv-overlay{
  position: absolute; inset: 0; z-index: 86;
  background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ylg-inv-ov-content{
  background: var(--ylg-card);
  border: 1px solid var(--ylg-border-l);
  border-radius: var(--ylg-radius);
  padding: 16px;
  width: 100%; max-width: 320px;
  max-height: 85vh;
  overflow-y: auto;
}
/* block separator */
.ylg-inv-ov-sep{
  border: none; border-top: 1px solid var(--ylg-border);
  margin: 12px 0;
}
/* back button full-width at bottom */
.ylg-inv-ov-back{ width: 100%; }

/* ── Part: Item card (reusable) ───────────────────────────────── */
.ylg-item-card{
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left;
}
.ylg-item-card-icon{ font-size: 32px; flex-shrink: 0; }
.ylg-item-card-info{ flex: 1; min-width: 0; }
.ylg-item-card-name{ font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.ylg-item-card-tags{
  font-size: 10px; color: var(--ylg-fg-faint);
  letter-spacing: .04em; margin-bottom: 5px;
}
.ylg-item-card-desc{ font-size: 12px; color: var(--ylg-fg-dim); line-height: 1.6; }
.ylg-item-card-flavor{
  font-size: 11px; color: var(--ylg-fg-faint); font-style: italic;
  line-height: 1.5; margin-top: 3px;
}

/* ── Part: Equip compare block (reusable) ─────────────────────── */
.ylg-equip-compare{
  display: flex; flex-direction: column; align-items: stretch;
}
.ylg-equip-compare .ylg-btn{ width: 100%; }
.ylg-inv-ov-box{
  border: 1px solid var(--ylg-border);
  border-radius: 10px; padding: 10px 12px;
  text-align: left;
}
.ylg-inv-ov-box-before{ opacity: .7; }
.ylg-inv-ov-box-after{
  border-color: var(--ylg-accent);
  box-shadow: 0 0 0 1px var(--ylg-accent);
}
.ylg-inv-ov-box-label{
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ylg-fg-faint);
  margin-bottom: 6px;
}
.ylg-inv-ov-box-after .ylg-inv-ov-box-label{ color: var(--ylg-accent); }
.ylg-inv-ov-box-inner{ display: flex; align-items: center; gap: 10px; }
.ylg-inv-ov-box-icon{ font-size: 26px; flex-shrink: 0; }
.ylg-inv-ov-box-info{ flex: 1; min-width: 0; }
.ylg-inv-ov-box-name{ font-size: 13px; font-weight: 700; }
.ylg-inv-ov-box-stat{ font-size: 11px; color: var(--ylg-fg-dim); margin-top: 2px; }
.ylg-inv-ov-box-empty{
  font-size: 12px; color: var(--ylg-fg-faint);
  padding: 4px 0; text-align: center;
}
.ylg-inv-ov-arrow{
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 5px 0;
}
.ylg-inv-ov-arrow-icon{ font-size: 16px; color: var(--ylg-fg-faint); flex-shrink: 0; }
.ylg-inv-ov-arrow-diff{ font-size: 12px; font-weight: 700; }

/* ── §22 Result Screen ────────────────────────────────────────── */
.ylg-result-title{
  font-size: 20px; font-weight: 700;
  text-align: center;
  margin-bottom: 12px; padding: 12px 0;
}
.ylg-result-title.win{ color: var(--ylg-gold); }
.ylg-result-title.lose{ color: var(--ylg-red); }
.ylg-result-row{
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 13px;
  border-bottom: 1px solid var(--ylg-border);
}
.ylg-result-row .k{ color: var(--ylg-fg-dim); }
.ylg-result-loot{ margin-top: 10px; }
.ylg-result-item{ font-size: 13px; margin-bottom: 3px; padding: 2px 0; }

/* ── §9 Menu / Options / HowTo / Quit Overlay Panels ─────────── */
/* Main menu list */
.ylg-menu-main{ display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.ylg-menu-main-btn{
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px;
  background: var(--ylg-card); border: 1px solid var(--ylg-border);
  border-radius: 10px; color: var(--ylg-fg);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s; text-align: left;
}
.ylg-menu-main-btn:hover{ background: var(--ylg-card-hi); border-color: var(--ylg-border-l); }
.ylg-menu-main-btn .mi{ font-size: 26px; flex-shrink: 0; }
.ylg-menu-main-sub{ font-size: 11px; font-weight: 400; color: var(--ylg-fg-dim); margin-top: 2px; }

/* Options panel */
.ylg-opts-note{
  font-size: 11px; color: var(--ylg-fg-faint);
  text-align: center; padding: 0 0 10px;
  border-bottom: 1px solid var(--ylg-border); margin-bottom: 12px;
}
.ylg-opts-row{ display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ylg-opts-row.ylg-opts-off .ylg-opts-slider{ opacity: .3; pointer-events: none; }
.ylg-opts-label{ flex: 1; font-size: 13px; color: var(--ylg-fg); }
.ylg-opts-toggle{
  border: 1px solid var(--ylg-border-l); border-radius: 20px;
  background: none; color: var(--ylg-fg-dim);
  font-size: 11px; font-weight: 700; padding: 3px 10px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.ylg-opts-toggle.on{ background: var(--ylg-accent); border-color: var(--ylg-accent); color: #fff; }
.ylg-opts-slider{
  -webkit-appearance: none; appearance: none;
  width: 88px; height: 4px; border-radius: 2px;
  background: var(--ylg-border-l); outline: none; cursor: pointer;
}
.ylg-opts-slider::-webkit-slider-thumb{
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--ylg-accent); cursor: pointer;
}

/* How-to panel */
.ylg-howto-sec{ margin-bottom: 14px; }
.ylg-howto-sec h3{
  font-size: 13px; color: var(--ylg-accent); margin: 0 0 7px;
  border-bottom: 1px solid var(--ylg-border); padding-bottom: 4px;
}
.ylg-howto-sec p,.ylg-howto-sec ul{ font-size: 12px; color: var(--ylg-fg-dim); line-height: 1.75; margin: 0; }
.ylg-howto-sec ul{ padding-left: 16px; }
.ylg-howto-sec li{ margin-bottom: 3px; }
.ylg-howto-node{ display: flex; gap: 8px; font-size: 12px; margin-bottom: 6px; color: var(--ylg-fg-dim); }
.ylg-howto-node .ni{ flex-shrink: 0; width: 22px; text-align: center; }

/* Quit dialog */
.ylg-quit-dialog{ text-align: center; padding: 12px 4px; }
.ylg-quit-q{ font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.ylg-quit-note{ font-size: 12px; color: var(--ylg-fg-dim); line-height: 1.75; margin-bottom: 24px; }
.ylg-quit-btns{ display: flex; gap: 10px; }
.ylg-quit-btns .ylg-btn{ flex: 1; padding: 12px 0; font-size: 14px; }

/* ── Confirm Dialog Overlay ───────────────────────────────────── */
.ylg-confirm-overlay{
  position: absolute; inset: 0;
  z-index: 250;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.7);
  opacity: 0; transition: opacity .2s;
}
.ylg-confirm-overlay.show{ opacity: 1; }
.ylg-confirm-box{
  width: 85%; max-width: 340px;
  background: var(--ylg-card); border: 1px solid var(--ylg-border);
  border-radius: var(--ylg-radius);
  padding: 24px 20px 20px;
  text-align: center;
}
.ylg-confirm-q{ font-size: 15px; font-weight: 700; margin-bottom: 8px; white-space: pre-line; }
.ylg-confirm-note{ font-size: 12px; color: var(--ylg-fg-dim); line-height: 1.75; margin-bottom: 20px; }
.ylg-confirm-btns{ display: flex; gap: 10px; }
.ylg-confirm-btns .ylg-btn{ flex: 1; padding: 12px 0; font-size: 14px; }

/* ── Key Item Acquisition Dialog ──────────────────────────────── */
@keyframes ylg-keyitem-in{
  from{ opacity:0; transform: scale(.8) translateY(16px); }
  to  { opacity:1; transform: scale(1) translateY(0); }
}
.ylg-keyitem-box{
  width: 85%; max-width: 340px;
  background: var(--ylg-card);
  border: 2px solid #f5c842;
  border-radius: var(--ylg-radius);
  padding: 20px 20px 20px;
  text-align: center;
  box-shadow: 0 0 28px rgba(245,200,66,.4);
  animation: ylg-keyitem-in .35s cubic-bezier(.22,1.4,.65,1) both;
}
.ylg-keyitem-header{ font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .04em; margin-bottom: 12px; }
.ylg-keyitem-icon{ font-size: 3rem; margin-bottom: 10px; line-height: 1; }
.ylg-keyitem-title{ font-size: 17px; font-weight: 800; color: #f5c842; margin-bottom: 8px; }
.ylg-keyitem-flavor{ font-size: 12px; color: var(--ylg-fg-dim); line-height: 1.75; margin: 0 0 16px; }
.ylg-keyitem-tutorial-heading{
  font-size: 13px; font-weight: 700; color: #f5c842;
  margin-bottom: 10px; text-align: center;
}
.ylg-keyitem-tutorial-box{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(245,200,66,.3);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ylg-fg);
  margin-bottom: 16px;
  white-space: pre-wrap;
}

/* ── §23 Animations ───────────────────────────────────────────── */
@keyframes ylg-shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(5px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(3px); }
}
.ylg-bt-shake{ animation: ylg-shake .3s ease; }

@keyframes ylg-float-up{
  0%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100%{ opacity: 0; transform: translateX(-50%) translateY(-32px); }
}
.ylg-bt-float{
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  font-weight: 800; font-size: 18px;
  pointer-events: none;
  animation: ylg-float-up .85s ease-out forwards;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  z-index: 5;
}
.ylg-bt-float.dmg   { color: #ff5c5c; }
.ylg-bt-float.heal  { color: #38d67a; }
.ylg-bt-float.crit  { color: #ffaa22; font-size: 22px; }
.ylg-bt-float.poison{ color: #c77dff; }
.ylg-bt-float.burn  { color: #ff6b2b; }

@keyframes ylg-msg-in{
  from{ opacity: 0; transform: translateY(4px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ── §24 Responsive ───────────────────────────────────────────── */
@media(max-width:460px){
  .ylg-game{ margin: 0 auto; }
  .ylg-panels{ border-radius: 0; border-left: none; border-right: none; }
}

/* ── §25 Character List & Management ──────────────────────────── */
.ylg-char-card{
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ylg-card); border: 1px solid var(--ylg-border);
  border-radius: var(--ylg-radius); padding: 10px 12px; margin-bottom: 8px;
  transition: border-color .2s;
}
.ylg-char-card.active{
  border-color: var(--ylg-accent);
  box-shadow: 0 0 0 1px var(--ylg-accent) inset;
}
.ylg-char-card-main{
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.ylg-char-card-icon{ font-size: 28px; flex-shrink: 0; }
.ylg-char-card-info{ min-width: 0; }
.ylg-char-card-name{
  font-size: 14px; font-weight: 700; color: var(--ylg-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ylg-char-badge{
  display: inline-block;
  font-size: 10px; font-weight: 600;
  background: var(--ylg-accent); color: #fff;
  padding: 1px 6px; border-radius: 8px; margin-left: 4px;
  vertical-align: middle;
}
.ylg-char-card-sub{
  font-size: 11px; color: var(--ylg-fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ylg-char-card-dun{
  font-size: 11px; color: var(--ylg-accent); margin-top: 2px;
}
.ylg-char-card-actions{
  display: flex; gap: 4px; flex-shrink: 0; align-items: center; margin-left: 8px;
}
.ylg-char-add-area{ text-align: center; margin-top: 4px; }

/* ── §26 Key Items (貴重品) ───────────────────────────────────── */
.ylg-key-item{
  display: flex; align-items: center; gap: 10px;
  background: var(--ylg-card); border: 1px solid var(--ylg-border);
  border-radius: var(--ylg-radius); padding: 10px 12px; margin-bottom: 6px;
}
.ylg-key-item-icon{ font-size: 24px; flex-shrink: 0; }
.ylg-key-item-info{ min-width: 0; }
.ylg-key-item-name{ font-size: 13px; font-weight: 700; color: var(--ylg-fg); }
.ylg-key-item-desc{ font-size: 11px; color: var(--ylg-fg-dim); margin-top: 2px; }
/* ── §27 Scene Transition Overlay ─────────────────────────────── */
.ylg-scene-transition{
  position: absolute; inset: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background: #000;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: all;
}
.ylg-scene-transition.visible{ opacity: 1; }
.ylg-scene-label{
  color: #d4d0c8;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  opacity: 0;
  transition: opacity 0.6s ease;
  text-align: center;
  text-shadow: 0 0 20px rgba(200,180,150,0.3);
}
.ylg-scene-label.visible{ opacity: 1; }
.ylg-scene-sub{
  color: #a09888;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.6s ease;
  text-align: center;
}
.ylg-scene-sub.visible{ opacity: 1; }