/* ============================================================================
   Design tokens - dark-fantasy RPG chrome: a near-black void, muted brass and
   blood-red accents instead of bright candy colors, aged-parchment (not
   bright-cream) panels, and a literary serif pairing (EB Garamond for
   half-width alphanumerics, Shippori Mincho for Japanese - the browser picks
   per character automatically via font-family fallback, so one stack covers
   both scripts in the same mood).
   ============================================================================ */
:root {
  --night: #0a0810;
  --royal: #241a38;
  --royal-light: #3a2a54;
  --parchment: #ddc9a0;
  --parchment-deep: #b89a68;
  --ink: #241a12;
  --ink-soft: #6b5a44;

  --ember: #a8562c;
  --ember-light: #c97a4a;
  --ember-dark: #6e3417;

  --secondary: #3d5a78;
  --secondary-light: #5c7a9a;
  --secondary-dark: #24374a;

  --gold: #b8934f;
  --gold-light: #d4b578;
  --gold-dark: #7a5f2e;

  --accent: #5c7a4a;
  --accent-light: #7a9a68;
  --accent-dark: #3a4f2e;

  --danger: #8f2f2f;
  --danger-light: #b04c4c;
  --danger-dark: #5c1c1c;

  --hp: #5c8a4a;
  --hp-low: #8f2f2f;
  --mp: #3d6a94;

  /* Muted "aged parchment inset" tones - replaces the pastel-lavender
     card/shadow tints a brighter theme would use, so sub-panels read as
     worn paper rather than candy. */
  --inset-bg: #efe4c8;
  --inset-ring: #c7b384;

  --font-display: 'EB Garamond', 'Shippori Mincho', serif;
  --font-body: 'EB Garamond', 'Shippori Mincho', serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* <button>/<input> reset their font (UA `font:` shorthand), which drops the
   body's lining-nums and brings back old-style figures - the small, dropped
   digits in slot labels, chapter buttons, etc. */
button, input, select, textarea { font-variant-numeric: inherit; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  /* Garamond faces default to old-style figures (varying heights) -
     elegant in prose, but hard to scan as UI stat numbers. Force lining
     (uniform-height) figures everywhere instead. */
  font-variant-numeric: lining-nums;
  color: var(--ink);
  user-select: none;
  background:
    radial-gradient(ellipse 900px 520px at 50% -8%, rgba(184,147,79,0.09), transparent 60%),
    radial-gradient(ellipse 640px 640px at 92% 102%, rgba(58,42,84,0.45), transparent 60%),
    linear-gradient(180deg, var(--royal) 0%, var(--night) 65%);
}

#app { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
/* A faint starfield behind every screen - cheap (no images), dimmed to a
   quiet ember-ash glow rather than a bright sparkle. */
#app::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(216,196,160,0.5) 1px, transparent 1.4px);
  background-size: 46px 46px;
  opacity: 0.16;
}

.hidden { display: none !important; }

.screen {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.24s ease;
}

/* ---------------- buttons: glossy 3D press ---------------- */
.btn {
  border: none; border-radius: 18px; padding: 14px 26px;
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; cursor: pointer;
  color: #fff; letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--ember-light), var(--ember) 65%);
  box-shadow: 0 5px 0 var(--ember-dark), 0 10px 20px rgba(0,0,0,0.45), inset 0 2px 1px rgba(255,255,255,0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ember-dark), inset 0 2px 1px rgba(255,255,255,0.2); }
.btn-big { font-size: 1.18rem; padding: 18px 40px; }
.btn-secondary {
  background: linear-gradient(180deg, #f4ecd8, var(--inset-bg) 65%); color: var(--secondary-dark);
  box-shadow: 0 5px 0 var(--inset-ring), 0 8px 16px rgba(0,0,0,0.28), inset 0 2px 1px rgba(255,255,255,0.6);
}
.btn-secondary:active { box-shadow: 0 1px 0 var(--inset-ring); }
.btn-danger { background: linear-gradient(180deg, var(--danger-light), var(--danger) 65%); box-shadow: 0 5px 0 var(--danger-dark), 0 10px 20px rgba(0,0,0,0.4), inset 0 2px 1px rgba(255,255,255,0.25); }
.btn-danger:active { box-shadow: 0 1px 0 var(--danger-dark); }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------------- ornate panel frame (the signature treatment) ----------------
   Floating "card" screens (share, hero-create) get an aged parchment face
   inside a dull-brass ring + dark hairline via .equip-card's own rules;
   .title-card is kept only as a base for any future centered-card screen. */
.title-card {
  background: var(--parchment);
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 5px 5px;
  border-radius: 28px; padding: 40px 32px;
  text-align: center; max-width: 440px; width: 100%;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(0,0,0,0.35), 0 22px 48px rgba(0,0,0,0.6);
}
.gold-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 70%);
  color: #3c2e12; font-weight: 700; font-size: 0.98rem; border: 2px solid #f4ecd8;
  border-radius: 999px; padding: 6px 16px; margin: 4px 0 18px;
  box-shadow: 0 3px 0 var(--gold-dark), inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Buttons are inline-level by default, so a stack of short-labeled ones
   (酒場/商店/ギルド...) would otherwise wrap two-per-row like text instead
   of forming a proper vertical menu - force every direct-child button in a
   title-card menu onto its own row. */
.title-card > .btn { display: block; width: 100%; margin: 10px 0 0; }
.difficulty-row { display: flex; gap: 6px; justify-content: center; margin: 6px 0 16px; flex-wrap: wrap; }
.difficulty-chip {
  border: 2px solid var(--parchment-deep); background: #f4ecd8; border-radius: 12px; padding: 8px 10px;
  font-size: 0.78rem; font-weight: 700; color: #8a7a5c; cursor: pointer; font-family: var(--font-body);
}
.difficulty-chip.is-selected { border-color: var(--ember); color: var(--ember-dark); background: #f0ddc8; }

/* ---------------- title screen: rotating illustrated backdrop ---------------- */
.title-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0;
  /* Safety net: on a short/wide (desktop-ish) viewport, a fixed top margin
     could push the menu text below the fold with nothing to scroll it back
     into view (overflow:hidden on html/body clips it invisibly) - center
     everything via flex instead of a margin, and allow scrolling as a
     last resort if it's still too tall to fit. */
  overflow-y: auto;
}
/* Two stacked layers (not one) so swapping the random background is a real
   crossfade: the incoming layer gets the new image and fades to opacity 1
   at the same time the outgoing one fades to 0, instead of a hard cut. */
.title-bg-wrap {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; /* purely decorative - never steal clicks meant for the menu above it */
}
.title-bg-layer {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.6s ease;
}
.title-bg-layer.is-active { opacity: 1; }
.title-bg-layer.is-panning { animation: title-bg-pan 10s linear; }
@keyframes title-bg-pan {
  0% { transform: translateX(-2.5%) scale(1.06); }
  100% { transform: translateX(2.5%) scale(1.06); }
}
.title-bg-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,16,0.65) 0%, rgba(10,8,16,0.32) 38%, rgba(10,8,16,0.5) 62%, rgba(10,8,16,0.9) 100%);
}
.title-content {
  /* Explicit stacking context, strictly above .title-bg-wrap's z-index:0 -
     letting this stay implicitly-ordered (relying on paint order alone)
     was leaving the menu's own backdrop looking translucent on top of the
     animated bg layers instead of reliably opaque. */
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 5vh;
  padding: 32px 24px; text-align: center; margin: auto 0;
}
/* max-width/max-height together (with width/height:auto) let the browser
   scale the logo up on a tall phone and down on a short/wide desktop
   window, preserving its aspect ratio either way - a fixed width alone
   could grow tall enough to push the menu off-screen on short viewports. */
.title-logo {
  max-width: min(90vw, 560px); max-height: 38vh;
  width: auto; height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.6));
}
.title-menu {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 44px;
}
.title-menu-btn {
  /* 横パディングを付けて、見た目はそのままタップ領域だけ広げる(UXレビュー: 以前は「設定」の
     文字幅ぶん=36pxしかタップできなかった) */
  background: none; border: none; cursor: pointer; padding: 10px 18px; margin: 0 -18px;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  color: #f4ecd8; font-size: 1.35rem; letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.95), 0 0 20px rgba(0,0,0,0.9);
}
.title-menu-btn:active { transform: scale(0.96); }
.title-menu-btn-sub { font-size: 1.05rem; color: #e8dcc4; margin-top: 2px; }
.title-credit {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2;
  text-align: center; color: rgba(240,230,204,0.55); font-size: 0.78rem; letter-spacing: 0.04em;
}

/* An explicit "tap to begin" gate, shown once per page load - browsers
   block audio autoplay until a real user gesture happens, so this
   guarantees the very first tap both unlocks the SFX context AND starts
   the title BGM, rather than hoping some incidental early click does it. */
.title-tap-gate {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,4,9,0.5);
  cursor: pointer;
  transition: opacity 0.4s ease;
}
.title-tap-gate.is-dismissed { opacity: 0; pointer-events: none; }
.title-tap-gate-text {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  color: #f4ecd8; font-size: 1.25rem; letter-spacing: 0.08em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.5);
  padding: 16px 36px; border-radius: 999px;
  animation: tap-gate-pulse 1.6s ease-in-out infinite;
}
@keyframes tap-gate-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* ---------------- town hub: full-bleed illustrated backdrop ---------------- */
.town-screen { display: block; padding: 0; overflow: hidden; }
.town-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('../images/bg/town.webp') center center / cover no-repeat;
  transition: opacity 0.45s ease;
}
/* グランベル城内部クリア後: リエンデラの街に平和が戻った様子の背景に切り替わる */
.town-bg.is-cleared {
  background-image: url('../images/bg/town_clear.webp');
}
/* 章切替: JSがinlineでbackground-imageを差し替える間、いったん透明にしてクロスフェードする */
.town-bg.is-swapping { opacity: 0; }
.town-bg::after {
  /* vignette so UI stays legible over a busy illustration, darkest at the
     edges where the banners/tiles sit */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,16,0.6) 0%, rgba(10,8,16,0.05) 28%, rgba(10,8,16,0.1) 55%, rgba(10,8,16,0.85) 100%);
}
.town-name-banner {
  position: absolute; top: 20px; left: 0; z-index: 2;
  background: linear-gradient(135deg, var(--royal-light), var(--royal));
  color: #f0e6cc; font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 1.15rem; letter-spacing: 0.02em;
  padding: 12px 50px 12px 20px;
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
}
.town-topright {
  position: absolute; top: 18px; right: 16px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.town-topright > * { pointer-events: auto; }
.town-gold-chip { margin: 0; }
.town-icon-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold);
  background: rgba(10,8,16,0.65); color: var(--gold-light); font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
.town-icon-btn:active { transform: translateY(2px); }

/* まだダンジョンの無い章(開発中)で、ボタン群の代わりに画面中央へ出す案内 */
.town-coming-soon {
  position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  background: rgba(10,8,16,0.72); border: 2px solid var(--gold); border-radius: 999px;
  color: #f4ecd8; font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 1.15rem; letter-spacing: 0.04em; white-space: nowrap;
  padding: 14px 32px; box-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

.town-tile-row {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex;
}
.town-tile {
  flex: 1; border: none; border-top: 3px solid var(--gold);
  background: linear-gradient(180deg, rgba(36,26,56,0.75), rgba(10,8,16,0.92));
  color: #f0e6cc; font-family: var(--font-body); font-weight: 700; font-size: 0.82rem;
  padding: 14px 6px calc(14px + var(--safe-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; line-height: 1.3;
}
.town-tile:active { background: linear-gradient(180deg, rgba(58,42,84,0.85), rgba(10,8,16,0.95)); }
.town-tile-icon { font-size: 1.5rem; }
.town-tile + .town-tile { border-left: 1px solid rgba(184,147,79,0.3); }

.town-dungeon-btn {
  position: absolute; right: 12px; bottom: 96px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.town-dungeon-img {
  display: block; width: auto; height: min(30vh, 230px); max-width: 44vw; object-fit: contain;
  /* 常時ごく弱い金色の光を明滅させ、これがボタンだと分かるようにする(UXレビュー: 以前は
     hoverでしか光らず、タッチ端末では押すまで押せるボタンだと気づきにくかった) */
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 10px rgba(255,170,60,0.35));
  transition: filter 0.2s ease;
  animation: town-dungeon-glow 2.6s ease-in-out infinite;
}
.town-dungeon-btn:hover .town-dungeon-img { filter: drop-shadow(0 10px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 14px rgba(255,170,60,0.7)); }
@keyframes town-dungeon-glow {
  0%, 100% { filter: drop-shadow(0 10px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 10px rgba(255,170,60,0.35)); }
  50% { filter: drop-shadow(0 10px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 18px rgba(255,170,60,0.65)); }
}
@media (prefers-reduced-motion: reduce) { .town-dungeon-img { animation: none; } }
.town-dungeon-label {
  font-family: var(--font-body);
  color: #fff2d6; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.7);
}
.town-dungeon-btn:active { transform: translateY(3px); }

/* ---------------- battle screen ---------------- */
#screen-battle {
  justify-content: flex-start; padding: 10px; gap: 8px;
  /* Safety net: a 2-enemy fight (wrapping to a second row) plus a long
     battle-log line can occasionally add up to more than the viewport
     height - scroll rather than clip the command panel off-screen. */
  overflow-y: auto;
}

.battle-log {
  width: 100%; max-width: 100%; height: 4.6em;
  background: rgba(0,0,0,0.55); color: #f0e6cc; border: 1px solid rgba(184,147,79,0.25); border-radius: 12px;
  padding: 6px 14px; font-size: 0.82rem; font-weight: 700;
  overflow-y: auto; flex: 0 0 auto;
}
.battle-log .log-line { padding: 2px 0; border-bottom: 1px solid rgba(184,147,79,0.12); }
.battle-log .log-line:last-child { border-bottom: none; }

.battle-main {
  width: 100%; max-width: 100%; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch; gap: 8px;
}

/* A vertical brass line with the next several actors strung along it -
   the one at the very bottom (largest, glowing) acts next, matching the
   brief's "reaches the bottom = its turn" reading direction. */
.turn-order-rail {
  flex: 0 0 auto; width: 56px; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 8px; position: relative; padding: 4px 0 2px;
}
.turn-order-rail::before {
  content: ''; position: absolute; top: 0; bottom: 4px; left: 50%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(184,147,79,0.12) 15%, rgba(184,147,79,0.55));
  transform: translateX(-50%);
}
.turn-token {
  position: relative; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c2418, #100c08 75%);
  box-shadow: 0 3px 8px rgba(0,0,0,0.6), 0 0 0 2px rgba(184,147,79,0.4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 1.1rem;
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.turn-token img { width: 100%; height: 100%; object-fit: cover; }
.turn-token.is-enemy { box-shadow: 0 3px 8px rgba(0,0,0,0.6), 0 0 0 2px rgba(143,47,47,0.45); }
.turn-token.is-current {
  width: 50px; height: 50px; font-size: 1.4rem;
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px 3px rgba(184,147,79,0.7), 0 4px 10px rgba(0,0,0,0.6);
}

.enemy-area {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; padding: 6px;
  position: relative;
}
.enemy-slot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 10px; min-width: 96px;
  transition: transform 0.15s ease;
}
.enemy-slot .name {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #f4ecd8;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.7); white-space: nowrap;
}
.enemy-slot .sprite-wrap { position: relative; }
.enemy-slot .sprite-wrap::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 60%; height: 14px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
}
.enemy-slot .sprite {
  width: 136px; height: 136px; object-fit: contain; display: block;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,0.6));
  transition: filter 0.15s ease;
}
/* Placeholder monster art ships on a flat (sometimes white, sometimes
   black) square - a soft radial mask fades that flat backdrop to
   transparent at the edges so it blends into the dark battle scene
   regardless of which color square the current placeholder happens to
   use, without needing per-image logic. */
.enemy-slot img.sprite {
  mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 80%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 80%, transparent 100%);
}
.enemy-slot.is-boss .sprite { width: 340px; height: 340px; }
.enemy-slot.is-boss .name { font-size: 1.15rem; color: var(--gold-light); }
.enemy-slot .sprite.is-emoji { font-size: 5.8rem; line-height: 1; width: auto; height: auto; }
.enemy-slot.is-boss .sprite.is-emoji { font-size: 13rem; }
.enemy-slot .hp-bar { width: 136px; }
.enemy-slot.is-dead { opacity: 0.32; filter: grayscale(1); }
.enemy-slot.is-hit .sprite { animation: card-hit 0.35s ease; }
.enemy-slot.is-targetable { cursor: pointer; }
.enemy-slot.is-targetable .sprite { animation: sprite-target-pulse 1s ease-in-out infinite; }
.enemy-slot.is-targetable:active { transform: scale(0.95); }
/* 敵の行動予告: 攻撃してくる前に画像を白く点滅させ、スキルならその名前をモンスター名の上に出す
   (何をされるか分からないという指摘への対応。テンポが遅くなるのは織り込み済み)。 */
.enemy-slot.is-telegraphing .sprite { animation: enemy-telegraph-flash 0.6s ease-in-out; }
/* 空でも高さを確保しておく(常にDOMへ出す) - スキル名の有無でモンスター名/画像の位置が
   上下にずれてしまうという指摘への対応。文字の行送り(line-height)に頼ると、文字が無い時/
   ある時でブラウザの計算結果が1px前後ずれることがあるので、px固定の高さ+flex中央寄せで
   フォントの計量に関係なく常に同じ高さにする(はみ出す分はoverflow:hiddenで隠す)。 */
.enemy-slot .skill-telegraph {
  display: flex; align-items: center; justify-content: center;
  height: 18px; max-width: 100%; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #fff6d8;
  text-shadow: 0 0 10px rgba(255,214,130,0.9), 0 2px 4px rgba(0,0,0,0.9);
  white-space: nowrap; text-overflow: ellipsis;
}
.enemy-slot .skill-telegraph:not(:empty) { animation: skill-telegraph-pop 0.25s ease; }
.enemy-slot.is-boss .skill-telegraph { height: 22px; font-size: 1rem; }
@keyframes enemy-telegraph-flash {
  0%, 18%, 36%, 100% { filter: drop-shadow(0 10px 12px rgba(0,0,0,0.6)) brightness(1) saturate(1); }
  9%, 27%, 45% { filter: drop-shadow(0 10px 12px rgba(0,0,0,0.6)) brightness(6) saturate(0); }
}
@keyframes skill-telegraph-pop {
  0% { opacity: 0; transform: translateY(4px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes card-hit {
  0% { transform: translateX(0); filter: brightness(1); }
  20% { transform: translateX(-6px); filter: brightness(1.7); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  100% { transform: translateX(0); filter: brightness(1); }
}
@keyframes sprite-target-pulse {
  0%, 100% { filter: drop-shadow(0 10px 12px rgba(0,0,0,0.6)) drop-shadow(0 0 0 rgba(200,110,60,0)); }
  50% { filter: drop-shadow(0 10px 12px rgba(0,0,0,0.6)) drop-shadow(0 0 16px rgba(200,110,60,0.95)); }
}

.hp-bar, .mp-bar {
  width: 78px; height: 9px; border-radius: 6px; background: rgba(0,0,0,0.5);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(184,147,79,0.2);
  margin: 0 auto; overflow: hidden;
}
.hp-bar i, .mp-bar i {
  display: block; height: 100%; transition: width 0.35s ease;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 45%);
}
.hp-bar i { background-color: var(--hp); }
.hp-bar.low i { background-color: var(--hp-low); }
.mp-bar i { background-color: var(--mp); }
.hp-text { font-size: 0.68rem; color: #cbb98c; margin-top: 2px; font-weight: 700; }
.status-row { display: flex; gap: 2px; justify-content: center; margin-top: 2px; flex-wrap: wrap; }
.status-icon { font-size: 0.9rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }

.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dmg-num {
  position: absolute; font-weight: 700; font-size: 1.7rem; font-family: var(--font-display); font-style: italic;
  color: #ff5c4d; text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 12px rgba(143,47,47,0.6);
  /* FF-style: pop in with a bounce, hold clearly readable, then vanish
     outright (no long fade-out) - see ui.js's _spawnFxNumber. */
  animation: dmg-bounce 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform: translate(-50%, -50%);
}
.dmg-num.is-crit { font-size: 2.2rem; color: var(--gold-light); text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 14px rgba(184,147,79,0.9); }
.dmg-num.is-heal { color: #7ad46a; text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 10px rgba(92,138,74,0.7); }
.dmg-num.is-miss { color: #d8cdb4; font-size: 1.15rem; font-style: normal; }
.dmg-num.is-status { font-size: 1.7rem; text-shadow: 0 2px 0 rgba(0,0,0,0.7); }
/* Weakness/resistance calls out an elemental hit - takes priority over
   .is-crit's styling when both apply (a critical weakness hit still reads
   as a weakness hit first). */
.dmg-num.is-weak {
  font-size: 2.6rem; color: #ff8a3d;
  text-shadow: 0 2px 0 rgba(0,0,0,0.8), 0 0 16px rgba(255,122,61,0.95), 0 0 32px rgba(255,90,20,0.6);
}
.dmg-num.is-resist { font-size: 1.3rem; font-style: normal; color: #9a9488; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.dmg-num.is-immune { font-size: 1.05rem; font-style: normal; font-weight: 600; color: #c9c0aa; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
@keyframes dmg-bounce {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.4); }
  18% { opacity: 1; transform: translate(-50%, -68%) scale(1.3); }
  32% { transform: translate(-50%, -58%) scale(0.9); }
  45% { transform: translate(-50%, -63%) scale(1.06); }
  55%, 90% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

.party-area {
  width: 100%; max-width: 100%; flex: 0 0 auto;
  display: flex; gap: 10px; justify-content: space-between;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(184,147,79,0.25); border-radius: 14px;
  padding: 10px 12px;
}
.party-slot {
  display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0;
}
/* 顔アイコン: 丸ではなく角丸の四角。大きめに表示する */
.party-slot .portrait {
  flex: 0 0 auto; width: 74px; height: 56px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 0 2px rgba(184,147,79,0.45);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
  background: radial-gradient(circle at 35% 30%, #2c2418, #100c08 75%);
}
.party-slot .portrait img { width: 100%; height: 100%; object-fit: cover; }
.party-slot .info { min-width: 0; flex: 1 1 auto; }
.party-slot .name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.party-slot .name {
  font-size: 0.92rem; font-weight: 700; color: #f0e6cc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.party-slot .hp-num {
  flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.02em;
  color: var(--gold-light); text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.party-slot .hp-num.is-low { color: var(--hp-low); }
.party-slot .hp-bar, .party-slot .mp-bar { width: 100%; max-width: none; margin: 4px 0 0; }
.party-slot .hp-bar { height: 10px; }
.party-slot .status-row { justify-content: flex-start; margin-top: 3px; }
.party-slot.is-dead { opacity: 0.4; filter: grayscale(1); }
.party-slot.is-hit .portrait { animation: card-hit 0.35s ease; }
.party-slot.is-targetable { cursor: pointer; }
.party-slot.is-targetable .portrait { animation: target-pulse 1s ease-in-out infinite; }
@keyframes target-pulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 0 0 rgba(168,86,44,0.7); }
  50% { box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 0 7px rgba(168,86,44,0); }
}

.command-panel {
  position: relative; z-index: 6; /* above the enemy sprites, which can overflow on short screens */
  width: 100%; max-width: 100%; flex: 0 0 auto;
  background: linear-gradient(180deg, #f4ecd8, var(--parchment) 140%);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.5), 0 0 0 2px var(--gold) inset;
  padding: 10px 10px calc(10px + var(--safe-bottom));
}
.command-content:not(:empty) { margin-bottom: 10px; }
.command-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.command-tab {
  border: none; border-radius: 14px; padding: 12px 2px;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, #f4ecd8, var(--inset-bg) 70%); color: var(--secondary-dark);
  box-shadow: 0 4px 0 var(--inset-ring), inset 0 1px 0 rgba(255,255,255,0.6); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.command-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--inset-ring); }
.command-tab.is-active {
  background: linear-gradient(180deg, var(--ember-light), var(--ember) 65%); color: #fff;
  box-shadow: 0 4px 0 var(--ember-dark), inset 0 1px 0 rgba(255,255,255,0.4);
}
.command-tab:disabled { opacity: 0.4; }

.sub-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; font-weight: 700; color: var(--secondary-dark); font-size: 0.95rem;
}
/* padding 10px 14px: 見た目はテキストリンクのままタップ領域だけ40px前後まで広げる(UXレビュー) */
.sub-panel-header button { background: none; border: none; font-size: 0.9rem; color: #8a7a5c; font-weight: 700; cursor: pointer; padding: 10px 14px; margin: -4px -8px; font-family: var(--font-body); }

.skill-list, .item-list { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; }
.skill-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--inset-bg); border-radius: 12px; padding: 10px 14px; cursor: pointer;
  border: none; width: 100%; text-align: left; font-family: var(--font-body);
}
.skill-row:active { background: #e2d2a4; }
.skill-row:disabled { opacity: 0.4; cursor: not-allowed; }
.skill-row .skill-name { font-weight: 700; font-size: 0.95rem; }
.skill-row .skill-desc { font-size: 0.75rem; color: var(--ink-soft); margin-top: 2px; }
.skill-row .skill-cost { font-size: 0.82rem; font-weight: 700; color: var(--mp); white-space: nowrap; }

.prompt-text { text-align: center; font-weight: 700; color: var(--secondary-dark); padding: 8px 0; }

/* ---------------- result rewards ---------------- */
.result-title { font-size: 1.85rem; font-weight: 700; margin: 0 0 10px; font-family: var(--font-display); }
.result-title.is-victory { color: var(--accent-dark); }
.result-title.is-defeat { color: var(--danger); }
.result-desc { color: var(--ink-soft); font-weight: 700; margin-bottom: 20px; white-space: pre-line; text-align: center; }

.result-rewards {
  background: linear-gradient(180deg, #f4ecd8, var(--inset-bg) 140%); border-radius: 16px; padding: 14px; margin-bottom: 20px; text-align: left;
  box-shadow: inset 0 0 0 2px var(--inset-ring);
}
.reward-line { font-weight: 700; font-size: 0.98rem; margin-bottom: 6px; text-align: center; }
.reward-line.is-levelup { color: var(--gold-dark); }
.reward-drops { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; justify-content: center; }

/* ---------------- equipment / inventory screen ---------------- */
#screen-equip, #screen-party, #screen-hero-create, #screen-shop, #screen-guild, #screen-dungeon-select, #screen-floor {
  align-items: stretch; justify-content: flex-start; padding: 0;
}
.equip-card {
  position: relative;
  width: 100%; height: 100%; overflow-y: auto;
  background: var(--parchment);
  background-image:
    linear-gradient(180deg, rgba(184,147,79,0.14), transparent 90px),
    radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 100% 100%, 5px 5px;
  padding: 16px 16px calc(24px + var(--safe-bottom));
}
.equip-card > .equip-header, .equip-card > .equip-layout { position: relative; z-index: 1; }
.equip-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.btn-small { padding: 10px 16px; font-size: 0.9rem; }

.equip-char-summary {
  background: linear-gradient(180deg, #f4ecd8, var(--inset-bg) 140%); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: inset 0 0 0 2px var(--inset-ring);
}
.equip-char-summary .sprite { font-size: 2.6rem; filter: drop-shadow(0 3px 2px rgba(0,0,0,0.3)); }
.equip-char-summary .info { flex: 1; }
.equip-char-summary .char-name { font-weight: 700; font-size: 1.15rem; }
.equip-char-summary .char-sub { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.exp-bar { width: 100%; height: 9px; border-radius: 5px; background: #cbb385; box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); margin-top: 6px; overflow: hidden; }
.exp-bar i { display: block; height: 100%; background: linear-gradient(180deg, var(--secondary-light), var(--secondary)); }

.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px;
  margin: 10px 0 2px; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft);
}
.stat-grid b { color: var(--ink); font-size: 0.98rem; }

.equip-section-title { font-family: var(--font-display); font-size: 0.9rem; color: var(--royal); margin: 18px 0 8px; font-weight: 600; letter-spacing: 0.02em; }

.equip-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.equip-slot-btn {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: #f4ecd8; border: 2px solid var(--parchment-deep); border-radius: 14px; padding: 10px 12px;
  cursor: pointer; font-family: var(--font-body);
}
.equip-slot-btn.is-filled { border-color: var(--rarity-color, #eee); box-shadow: 0 0 12px -4px var(--rarity-color, transparent); }
.equip-slot-btn.is-locked { opacity: 0.55; cursor: default; }
.equip-slot-btn.is-locked:active { transform: none; }
.equip-slot-btn .slot-icon { font-size: 1.6rem; width: 34px; text-align: center; }
.equip-slot-btn .slot-name { font-size: 0.75rem; color: #8a7a5c; font-weight: 700; }
.equip-slot-btn .slot-item-name { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.equip-slot-btn .slot-empty { font-size: 0.88rem; color: #a89878; font-weight: 700; }

.equip-picker { background: var(--inset-bg); border-radius: 16px; padding: 12px; margin-top: 10px; box-shadow: inset 0 0 0 2px var(--inset-ring); }
.equip-inventory, .picker-list { display: flex; flex-direction: column; gap: 8px; }

.item-card {
  display: flex; align-items: center; gap: 10px;
  background: #f4ecd8; border-radius: 14px; padding: 10px 12px;
  border-left: 6px solid var(--rarity-color, #8a7a5c); cursor: pointer; font-family: var(--font-body); text-align: left; width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 16px -6px var(--rarity-color, transparent);
}
.item-card .item-icon { font-size: 1.6rem; }
.item-card .item-info { flex: 1; }
.item-card .item-name { font-weight: 700; font-size: 0.9rem; color: var(--rarity-color, var(--ink)); }
.item-card .item-affixes { font-size: 0.74rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.5; }
.item-card .item-action { font-size: 0.8rem; font-weight: 700; color: var(--secondary-dark); white-space: nowrap; }
.item-card:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.empty-note { color: #8a7a5c; font-weight: 700; font-size: 0.88rem; text-align: center; padding: 12px; }

.member-row { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; }
.member-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #f4ecd8; border: 2px solid var(--parchment-deep); border-radius: 14px; padding: 8px 10px;
  cursor: pointer; font-family: var(--font-body); min-width: 60px;
}
.member-chip.is-selected { border-color: var(--secondary); background: #dde6ee; box-shadow: 0 0 10px -3px var(--secondary); }
.member-chip .sprite { font-size: 1.5rem; }
.member-chip .member-name { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }

/* ---------------- party / tavern screen ---------------- */
.party-screen-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; font-size: 0.95rem;
  color: #f0e6cc; display: inline-block; padding: 9px 20px; border-radius: 999px;
  background: linear-gradient(180deg, var(--royal-light), var(--royal));
  box-shadow: 0 4px 0 var(--night), 0 8px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.party-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.party-slot-card {
  background: linear-gradient(180deg, #f4ecd8, var(--parchment) 160%); border: 2px solid var(--parchment-deep); border-radius: 16px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  min-height: 150px; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.party-slot-card .sprite { font-size: 2.2rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); }
.party-slot-card .member-name { font-weight: 700; font-size: 0.92rem; }
.party-slot-card .member-sub { font-size: 0.76rem; color: var(--ink-soft); font-weight: 700; }
.party-slot-card .you-badge {
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: #3c2e12; font-size: 0.68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 8px; box-shadow: 0 2px 0 var(--gold-dark);
}
.party-slot-card .ai-badge {
  background: #dde6ee; color: var(--secondary-dark); font-size: 0.75rem; font-weight: 700;
  padding: 10px; border-radius: 10px; cursor: pointer; margin-top: 4px; border: none; font-family: var(--font-body);
}
.party-slot-card .ai-badge:disabled { opacity: 0.4; cursor: not-allowed; }
.party-slot-card .remove-btn { background: none; border: none; color: var(--danger); font-size: 0.72rem; font-weight: 700; cursor: pointer; margin-top: 2px; font-family: var(--font-body); }
.party-slot-empty {
  background: rgba(0,0,0,0.15); border: 2px dashed rgba(216,196,160,0.4); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; min-height: 150px;
  color: var(--ink-soft); font-weight: 700; font-size: 0.88rem; text-align: center; padding: 10px;
}

.party-detail { background: linear-gradient(180deg, #f4ecd8, var(--inset-bg) 140%); border-radius: 16px; padding: 14px; margin-top: 14px; box-shadow: inset 0 0 0 2px var(--inset-ring); }
.form-label { font-weight: 700; font-size: 0.88rem; color: var(--secondary-dark); margin: 10px 0 6px; }
.name-input {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--parchment-deep);
  font-size: 1rem; font-family: var(--font-body); margin-bottom: 4px;
  background: #f4ecd8; color: var(--ink);
}
.class-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 酒場「新しい仲間」フォーム専用: equip-narrowの狭い枠だと2カラムはカードが収まらず
   横スクロールの原因になるので1カラム固定にする。 */
.ally-class-grid { grid-template-columns: 1fr; }
.class-card {
  background: #f4ecd8; border: 2px solid var(--parchment-deep); border-radius: 14px; padding: 10px; text-align: left;
  cursor: pointer; font-family: var(--font-body);
}
.class-card.is-selected { border-color: var(--ember); background: #f0ddc8; box-shadow: 0 0 10px -3px var(--ember); }
.class-card .class-icon { font-size: 1.6rem; }
.class-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.weapon-prof-mini {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px;
}
.weapon-prof-mini span { font-size: 0.6rem; display: flex; justify-content: space-between; white-space: nowrap; }
.weapon-prof-mini span b { font-weight: 700; margin-left: 4px; }
.class-card .weapon-prof-mini span { color: var(--ink-soft); }
.equip-dark .weapon-prof-mini span { color: #a89878; }
.class-card .class-name { font-weight: 700; font-size: 0.92rem; margin-top: 2px; }
.class-card-top .class-name { flex: 1 1 0; min-width: 0; margin-top: 0; }
.class-card-top .class-name small { display: block; font-weight: 600; font-size: 0.72rem; }
.class-card .class-desc { font-size: 0.7rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
.form-actions { display: flex; gap: 8px; margin-top: 14px; }
.form-actions .btn { flex: 1; }

.ai-picker { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ai-picker .skill-row .skill-desc { font-size: 0.72rem; }

/* ---------------- sharing / import ---------------- */
.share-card {
  background: linear-gradient(160deg, var(--royal-light), var(--night)); color: #f0e6cc;
  border-radius: 20px; padding: 22px 20px; text-align: center; margin-bottom: 16px;
  box-shadow: 0 0 0 3px var(--gold), 0 12px 28px rgba(0,0,0,0.55);
}
.share-card .sprite { font-size: 3rem; filter: drop-shadow(0 4px 3px rgba(0,0,0,0.5)); }
.share-card .share-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-top: 6px; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); }
.share-card .share-sub { color: #cbb8d4; font-weight: 700; font-size: 0.92rem; margin-top: 2px; }
.share-card .share-tagline { font-style: italic; color: var(--gold-light); font-weight: 700; margin: 10px 0; font-size: 0.92rem; }
.share-card .stat-grid { color: #f0e6cc; margin-top: 10px; }
.share-card .stat-grid b { color: #fff; }
.share-card .share-equip-list { margin-top: 10px; font-size: 0.8rem; color: #cbb8d4; line-height: 1.7; text-align: left; }
.share-qr-box { text-align: center; padding: 16px; background: #f4ecd8; border-radius: 16px; max-width: 240px; margin: 0 auto; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.share-qr-box img { display: block; margin: 0 auto; }

/* ---------------- hero creation: class selection with avatar + radar ---------------- */
.herocreate-screen {
  display: block; padding: 0; overflow-y: auto;
  background: radial-gradient(ellipse 900px 600px at 50% 0%, rgba(58,42,84,0.5), transparent 60%), var(--night);
}
/* UXレビュー: モバイルでは「読んでから決める」順にする(アバター→クラスの中身→名前/開始ボタン)。
   以前はherocreate-left(アバター+名前欄+開始ボタン)がherocreate-right(クラス説明等)より先に
   積まれていたため、クラスの説明を一度も見ないまま「冒険を始める」を押せてしまっていた。
   Gridのnamed areaで、モバイルは縦1列・PC(760px〜)は元の2カラムに組み直す。 */
.herocreate-layout {
  /* minmax(0, 1fr)で明示: gridのfrトラックは既定でauto(=内容物のmin-content)が下限になるため、
     herocreate-jobicons(横スクロール前提の帯)のような内容物があると、トラック自体が
     その幅まで広がり、画面幅を超えて謎の横スクロールが出てしまう(Safariで顕著)。 */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "avatar" "details" "confirm";
  gap: 18px;
  max-width: 520px; margin: 0 auto; padding: 20px 16px calc(28px + var(--safe-bottom));
}
.herocreate-left { grid-area: avatar; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.herocreate-right { grid-area: details; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.herocreate-confirm-row { grid-area: confirm; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.herocreate-avatar-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 46vh;
  border-radius: 20px; overflow: hidden;
  background: #050408;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(0,0,0,0.4), 0 18px 40px rgba(0,0,0,0.6);
}
/* No image assets for the smoke - two overlapping blurred, slowly-drifting
   purple gradients standing in for it, cheap and fully CSS. */
.herocreate-smoke {
  position: absolute; inset: -25%; z-index: 0;
  background:
    radial-gradient(circle at 30% 65%, rgba(91,69,184,0.55), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(58,42,84,0.6), transparent 50%);
  filter: blur(26px);
  animation: herocreate-smoke-drift 13s ease-in-out infinite alternate;
}
.herocreate-smoke-b {
  background:
    radial-gradient(circle at 60% 75%, rgba(122,90,180,0.45), transparent 50%),
    radial-gradient(circle at 25% 20%, rgba(184,147,79,0.18), transparent 45%);
  animation-duration: 17s; animation-direction: alternate-reverse;
}
@keyframes herocreate-smoke-drift {
  0% { transform: translate(-4%, 3%) scale(1); }
  100% { transform: translate(4%, -3%) scale(1.1); }
}
.herocreate-smoke.is-bursting { animation: herocreate-smoke-burst 0.7s ease-out; }
@keyframes herocreate-smoke-burst {
  0% { opacity: 1; filter: blur(26px); transform: scale(1); }
  40% { opacity: 1; filter: blur(10px); transform: scale(1.25); }
  100% { opacity: 1; filter: blur(26px); transform: scale(1); }
}
.herocreate-avatar {
  position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.7));
  opacity: 1; transition: opacity 0.18s ease, transform 0.18s ease;
}
.herocreate-avatar.is-switching { opacity: 0; transform: scale(0.94); }

.herocreate-name-input { text-align: center; }

/* 基本職6つを横スクロール1列で並べていたが、狭い画面だとOS標準のスクロールバーが
   出て見た目が悪い(矢印ボタン付きの昔ながらのバー)ので、折り返して複数行で収める。 */
.herocreate-jobicons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 4px 2px; min-width: 0;
}
.herocreate-jobicon-btn {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid rgba(184,147,79,0.35); background: #050408; padding: 0; cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.herocreate-jobicon-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.herocreate-jobicon-btn:active { transform: scale(0.92); }
.herocreate-jobicon-btn.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,147,79,0.35), 0 0 16px 2px rgba(184,147,79,0.7);
}

.herocreate-classname { text-align: center; }
.herocreate-class-jp {
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.6rem;
  color: #f4ecd8; text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.herocreate-class-en {
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.12em;
  color: var(--gold-light); margin-top: 2px;
}

.herocreate-box {
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.35); border-radius: 14px;
  padding: 12px 16px;
}
.herocreate-box-title {
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em;
  color: var(--gold-light); margin-bottom: 4px;
}
.herocreate-box-body { color: #e4d8c4; font-size: 0.88rem; line-height: 1.6; }
.herocreate-box-body .skill-name { font-weight: 700; color: #f4ecd8; }

.herocreate-radar {
  display: flex; justify-content: center; padding: 4px 0 0;
}
.herocreate-radar svg { width: 100%; max-width: 300px; height: auto; }
.herocreate-radar .radar-grid { fill: none; stroke: rgba(184,147,79,0.25); stroke-width: 1; }
.herocreate-radar .radar-axis { stroke: rgba(184,147,79,0.2); stroke-width: 1; }
.herocreate-radar .radar-shape {
  fill: rgba(122,90,180,0.45); stroke: var(--gold-light); stroke-width: 2;
  stroke-linejoin: round;
}
.herocreate-radar .radar-label { fill: #e4d8c4; font-size: 12px; font-family: var(--font-body); text-anchor: middle; }

@media (min-width: 760px) {
  .herocreate-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "avatar details" "confirm details";
    align-items: start;
    max-width: 1200px; gap: 32px; padding-top: 40px;
  }
  .herocreate-jobicons { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .enemy-slot .sprite { width: 108px; height: 108px; }
  .enemy-slot.is-boss .sprite { width: 250px; height: 250px; }
  .enemy-slot .sprite.is-emoji { font-size: 4.6rem; }
  .enemy-slot.is-boss .sprite.is-emoji { font-size: 9.5rem; }
  .hp-bar, .mp-bar { width: 62px; }
  .enemy-slot .hp-bar { width: 108px; }
  .turn-order-rail { width: 46px; }
  .turn-token { width: 32px; height: 32px; font-size: 1rem; }
  .turn-token.is-current { width: 42px; height: 42px; font-size: 1.2rem; }
}

@media (max-height: 480px) {
  .title-content { gap: 2.5vh; padding: 16px 24px; }
  .title-logo { max-height: 28vh; }
  .command-panel { padding: 8px 10px calc(8px + var(--safe-bottom)); }
  .skill-list, .item-list { max-height: 20vh; }
  .battle-log { height: 3.4em; }
}

/* ---------------- equipment screen: dark-fantasy makeover (mirrors hero creation) ---------------- */
.picker-note { font-size: 0.78rem; color: #777; text-align: center; line-height: 1.7; margin: 8px 0; }

.equip-card.equip-dark {
  background:
    radial-gradient(ellipse 900px 600px at 50% 0%, rgba(58,42,84,0.5), transparent 60%),
    var(--night);
  background-size: 100% 100%;
  color: #e4d8c4;
}
.equip-dark .equip-header, .equip-dark .equip-layout { max-width: 100%; }
.equip-dark .btn-secondary {
  background: linear-gradient(180deg, #1e1830, #100c1c); color: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(184,147,79,0.5), 0 4px 10px rgba(0,0,0,0.5);
}
.equip-dark .btn-secondary:active { transform: translateY(2px); }
.equip-dark .gold-chip { margin: 0; }

.equip-layout { display: flex; flex-direction: column; gap: 16px; }
.equip-left, .equip-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* キャラ画像は「窓」に収めず、画面全体にうっすら透過して敷くだけの背景に
   - こうして空いたスペースを武器習熟の表示に回す（.equip-weapon-prof）。 */
.equip-avatar-wrap {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none; background: #050408;
}
.equip-avatar-wrap .herocreate-avatar {
  width: 100%; height: 100%; object-fit: cover; object-position: center 12%;
  opacity: 0.32; filter: saturate(0.75) contrast(1.05); transform: scale(1.08);
}
.equip-avatar-wrap .herocreate-avatar.is-switching { opacity: 0; }
.equip-avatar-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(5,4,9,0.25) 0%, rgba(5,4,9,0.6) 45%, rgba(5,4,9,0.94) 100%),
    radial-gradient(ellipse at 50% 25%, transparent 15%, rgba(5,4,9,0.55) 85%);
}

.equip-dark .equip-char-summary {
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.35); border-radius: 14px;
  box-shadow: none; padding: 12px 16px; margin: 0; display: block;
}
.equip-dark .equip-char-summary .char-name {
  font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: #f4ecd8;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.equip-dark .equip-char-summary .char-sub { color: var(--gold-light); letter-spacing: 0.06em; }
.equip-dark .equip-char-summary .char-exp { font-size: 0.75rem; color: #a89878; }
.equip-dark .exp-bar { background: rgba(0,0,0,0.55); box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(184,147,79,0.2); }
.equip-dark .summary-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.equip-dark .summary-bars .hp-bar, .equip-dark .summary-bars .mp-bar { width: 100%; height: 7px; margin: 0; }
.equip-dark .stat-grid { color: #a89878; grid-template-columns: repeat(2, 1fr); }
.equip-dark .stat-grid b { color: #f4ecd8; }
.equip-dark .class-change-btn { margin-top: 8px; width: 100%; }

.equip-weapon-prof {
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.35); border-radius: 14px;
  padding: 12px 16px;
}
.equip-weapon-prof .equip-section-title { margin: 0 0 8px; }
.wp-grid { display: flex; flex-direction: column; gap: 9px; }
.wp-row-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: #a89878; font-weight: 700; letter-spacing: 0.04em; }
.wp-type { display: inline-flex; align-items: center; gap: 6px; }
.wp-level { color: #cbb98c; }
.wp-level small { font-size: 0.68rem; color: #8a7d64; font-weight: 600; margin-left: 3px; }
.wp-equipped-tag {
  font-style: normal; font-size: 0.6rem; padding: 1px 7px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #241a38; font-weight: 700; letter-spacing: 0.02em;
}
.wp-row.is-equipped .wp-type, .wp-row.is-equipped .wp-level { color: #f4ecd8; }
.wp-bar { margin-top: 3px; }
.wp-row.is-equipped .wp-bar i { background: linear-gradient(180deg, #f0c987, #b8793a); box-shadow: 0 0 8px -1px rgba(240,201,135,0.7); }

.equip-dark .equip-section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1rem; color: var(--gold-light); letter-spacing: 0.1em; margin: 14px 0 6px;
}
.equip-dark .equip-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(184,147,79,0.5), transparent); }

/* equip-left/転職の仲間選択と同じ幅ぶん、いっぱいに広がるよう均等割り（最大4人なので折り返しなしで収まる）。 */
.equip-dark .member-row { gap: 10px; padding: 4px 2px 6px; margin-bottom: 0; overflow-x: visible; }
.equip-dark .member-chip {
  flex: 1 1 0; background: none; border: none; padding: 0; min-width: 0; gap: 4px;
}
.equip-dark .member-portrait {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; background: #050408;
  border: 3px solid rgba(184,147,79,0.35); box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.equip-dark .member-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equip-dark .member-chip:active .member-portrait { transform: scale(0.92); }
.equip-dark .member-chip.is-selected { background: none; box-shadow: none; }
.equip-dark .member-chip.is-selected .member-portrait {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,147,79,0.35), 0 0 16px 2px rgba(184,147,79,0.7);
}
.equip-dark .member-chip .member-name { color: #cbb98c; font-size: 0.72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.equip-dark .member-chip.is-selected .member-name { color: #f4ecd8; }

.equip-dark .equip-slot-btn {
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.3); border-radius: 14px;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.equip-dark .equip-slot-btn:active { transform: scale(0.97); }
.equip-dark .equip-slot-btn.is-filled {
  border-color: var(--rarity-color, var(--gold));
  box-shadow: 0 0 14px -4px var(--rarity-color, transparent), inset 0 0 18px -10px var(--rarity-color, transparent);
}
.equip-dark .equip-slot-btn .slot-icon { font-size: 1.5rem; }
.equip-dark .equip-slot-btn .slot-name { color: var(--gold); letter-spacing: 0.08em; }
.equip-dark .equip-slot-btn .slot-item-name { color: #f4ecd8; }
.equip-dark .equip-slot-btn .slot-empty { color: #6f6350; }

.equip-dark .equip-picker {
  background: rgba(5,4,9,0.92); border: 1px solid rgba(184,147,79,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.equip-dark .sub-panel-header { color: var(--gold-light); }
.equip-dark .sub-panel-header button { color: #a89878; }
.equip-dark .prompt-text { color: #f4ecd8; }
.equip-dark .picker-note { color: #a89878; }
.equip-dark .empty-note { color: #8a7d64; }

.equip-dark .item-card {
  background: rgba(20,15,32,0.9); border-radius: 12px; border-left-width: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 16px -8px var(--rarity-color, transparent);
}
.equip-dark .item-card .item-affixes { color: #a89878; }
.equip-dark .item-card .item-action { color: var(--gold-light); }

.equip-dark .class-card { background: rgba(20,15,32,0.9); border: 1px solid rgba(184,147,79,0.3); color: #e4d8c4; }
.equip-dark .class-card .class-desc { color: #a89878; }
.equip-dark .class-card:active { border-color: var(--gold); }

@media (min-width: 760px) {
  .equip-layout { flex-direction: row; align-items: flex-start; gap: 32px; }
  .equip-left { flex: 0 0 340px; position: sticky; top: 0; }
  .equip-right { flex: 1 1 0; }
  .equip-dark .equip-slots { grid-template-columns: repeat(2, 1fr); }
}
.equip-dark .member-row { padding: 10px 10px 8px; }
.equip-dark .item-card { border: 1px solid rgba(184,147,79,0.25); border-left: 5px solid var(--rarity-color, #8a7a5c); }

/* ---------------- tavern / shop / guild / settings: same dark treatment ---------------- */
.equip-dark.equip-narrow > * { max-width: 100%; }

.equip-dark .party-slot-card {
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.3); border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); color: #e4d8c4; gap: 5px; min-height: 176px;
}
.equip-dark .party-slot-card .slot-portrait {
  width: 68px; height: 68px; border-radius: 50%; overflow: hidden; background: #050408;
  border: 3px solid rgba(184,147,79,0.45); box-shadow: 0 4px 12px rgba(0,0,0,0.55);
}
.equip-dark .party-slot-card .slot-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equip-dark .party-slot-card .member-name { color: #f4ecd8; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; }
.equip-dark .party-slot-card .member-sub { color: var(--gold-light); }
.equip-dark .ai-badge {
  background: linear-gradient(180deg, #1e1830, #100c1c); color: var(--gold-light);
  border: 1px solid rgba(184,147,79,0.5); border-radius: 999px; padding: 11px 12px;
}
.equip-dark .ai-badge:disabled { opacity: 0.35; }
.equip-dark .remove-btn { color: var(--danger-light); }
.equip-dark .party-slot-empty {
  background: rgba(5,4,9,0.5); border: 1px dashed rgba(184,147,79,0.35); color: #6f6350; min-height: 176px;
}

.equip-dark .party-detail {
  background: rgba(5,4,9,0.92); border: 1px solid rgba(184,147,79,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  color: #e4d8c4;
}
.equip-dark .form-label { color: var(--gold-light); letter-spacing: 0.08em; }
.equip-dark .name-input { background: rgba(20,15,32,0.9); color: #f4ecd8; border: 1px solid rgba(184,147,79,0.45); }
.equip-dark .name-input::placeholder { color: #6f6350; }
.equip-dark .class-card.is-selected { border-color: var(--gold); background: rgba(58,42,84,0.7); box-shadow: 0 0 12px -2px rgba(184,147,79,0.7); }
.equip-dark .class-card .class-name { color: #f4ecd8; }
.equip-dark .skill-row { background: rgba(20,15,32,0.9); border: 1px solid rgba(184,147,79,0.25); color: #e4d8c4; }
.equip-dark .skill-row:active { background: rgba(58,42,84,0.7); }
.equip-dark .skill-row .skill-desc { color: #a89878; }
.equip-dark .skill-row .skill-name { color: #f4ecd8; }

.equip-dark .item-portrait {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #050408;
  border: 2px solid rgba(184,147,79,0.45);
}
.equip-dark .item-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equip-dark .item-card .item-name { color: var(--rarity-color, #f4ecd8); }
.equip-dark .item-card:disabled { opacity: 0.4; }
.equip-dark .item-card:not(:disabled):not(div):active { background: rgba(58,42,84,0.7); }

.equip-dark .quest-active-label { text-align: center; font-weight: 700; margin: 6px 0; color: #f4ecd8; font-family: var(--font-display); font-size: 1.1rem; }
.equip-dark .quest-progress-bar { height: 10px; margin: 6px 0 2px; background: rgba(0,0,0,0.55); }
.equip-dark .quest-progress-bar i { background: linear-gradient(180deg, var(--accent-light), var(--accent)); }
.equip-dark .party-detail .btn + .btn { margin-top: 6px; }

.equip-dark .settings-box {
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.3); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.equip-dark .settings-note { margin: 0; color: #a89878; font-size: 0.85rem; font-weight: 700; text-align: center; }
.equip-dark .settings-box .party-detail { margin-top: 0; }

@media (min-width: 760px) {
  .equip-dark .party-slots { grid-template-columns: repeat(4, 1fr); }
}
#screen-settings { align-items: stretch; justify-content: flex-start; padding: 0; }
.equip-dark .form-actions .btn { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.equip-dark.equip-narrow > .btn { display: block; }

.class-card .class-icon img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 0 2px rgba(184,147,79,0.45); }
.class-card.is-selected .class-icon img { box-shadow: 0 0 0 3px var(--gold), 0 0 14px 2px rgba(184,147,79,0.7); }

/* ---------------- floor / result screen (after each dungeon battle) ---------------- */
#screen-floor { display: flex; flex-direction: column; background-color: var(--night); }
#screen-floor .equip-card.floor-card {
  height: auto; flex: 1 1 0; min-height: 0; background: transparent; padding-bottom: 12px;
}
.floor-card .result-desc { color: #e4d8c4; margin: 0 auto 12px; min-height: 1.4em; text-align: center; }
.floor-card .result-desc:empty { display: none; }
.floor-card .party-screen-title { font-size: 1.05rem; }

.floor-card .result-rewards {
  background: rgba(5,4,9,0.82); border: 1px solid rgba(184,147,79,0.4); border-radius: 14px; padding: 12px 14px;
  margin-bottom: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.reward-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.reward-chip {
  color: var(--gold-light); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em;
  padding: 6px 14px; border-radius: 999px; background: rgba(20,15,32,0.9); border: 1px solid rgba(184,147,79,0.5);
}
.reward-chip b { color: #f4ecd8; font-size: 1.1rem; margin-left: 4px; }
.reward-label { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.1em; text-align: center; margin: 10px 0 2px; }
.floor-card .reward-drops .item-card { width: auto; min-width: 140px; }

.floor-party { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.floor-member {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.3); color: #e4d8c4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.floor-member.is-dead { opacity: 0.55; filter: grayscale(0.8); }
.floor-member.is-dead.is-targetable { opacity: 1; filter: none; }
.fm-portrait {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #050408;
  border: 3px solid rgba(184,147,79,0.45); box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.fm-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fm-name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.05rem; color: #f4ecd8; }
.fm-lv { color: var(--gold-light); font-weight: 700; font-size: 0.85rem; }
.fm-levelup {
  display: none; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; color: #2a1c05;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-radius: 6px; padding: 1px 8px;
  box-shadow: 0 0 14px 2px rgba(212,181,120,0.8);
}
.fm-levelup.is-shown { display: inline-block; animation: fm-levelup-pop 0.9s ease-out; }
@keyframes fm-levelup-pop {
  0% { transform: scale(0.4); opacity: 0; }
  35% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.floor-member.is-leveled { border-color: var(--gold); box-shadow: 0 0 18px -2px rgba(184,147,79,0.8); }
.floor-member .exp-bar { margin-top: 2px; height: 10px; }
.floor-member .exp-bar i { background: linear-gradient(180deg, #7fb4e6, var(--secondary)); }
.floor-member.is-leveled .exp-bar i { background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.fm-exp-text, .fm-hp-text { font-size: 0.72rem; font-weight: 700; color: #a89878; }
.floor-member .hp-bar, .floor-member .mp-bar { width: 100%; height: 7px; margin: 0; }
.floor-member.is-targetable { cursor: pointer; border-color: var(--ember-light); animation: floor-target-pulse 1s ease-in-out infinite; }
.floor-member.is-targetable:active { transform: scale(0.97); }
@keyframes floor-target-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,122,74,0.6); }
  50% { box-shadow: 0 0 0 7px rgba(201,122,74,0); }
}

.floor-target-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px;
  padding: 8px 14px; border-radius: 12px; color: #f4ecd8; font-weight: 700; font-size: 0.92rem;
  background: rgba(110,52,23,0.5); border: 1px solid var(--ember-light);
}
.floor-target-prompt button { background: none; border: none; color: var(--gold-light); font-weight: 700; cursor: pointer; font-family: var(--font-body); }

.floor-actions {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; width: 100%; max-width: 100%; margin: 0 auto;
  padding: 10px 16px calc(12px + var(--safe-bottom));
  background: linear-gradient(0deg, rgba(5,4,9,0.95) 60%, transparent);
}
.floor-actions .btn { padding: 14px 10px; white-space: nowrap; }
#btn-floor-retreat { flex: 1 1 0; order: 1; }
#btn-floor-equip { flex: 0 0 auto; order: 2; padding-left: 16px; padding-right: 16px; }
#btn-floor-advance { flex: 1 1 0; order: 3; font-size: 1.1rem; }
.floor-actions .btn-secondary { background: linear-gradient(180deg, #1e1830, #100c1c); color: var(--gold-light); box-shadow: 0 0 0 1px rgba(184,147,79,0.5), 0 4px 10px rgba(0,0,0,0.5); }
#btn-floor-advance.is-boss-warning { animation: boss-warning-pulse 1.3s ease-in-out infinite; letter-spacing: 0.12em; }
@keyframes boss-warning-pulse {
  0%, 100% { box-shadow: 0 5px 0 var(--danger-dark), 0 0 0 0 rgba(176,76,76,0.7), inset 0 2px 1px rgba(255,255,255,0.25); }
  50% { box-shadow: 0 5px 0 var(--danger-dark), 0 0 22px 6px rgba(176,76,76,0.75), inset 0 2px 1px rgba(255,255,255,0.25); }
}
.floor-member .exp-bar i { background: linear-gradient(180deg, #b79cf0, #6a4fb0); }


/* ---------------- dungeon select: list on the left, big illustration on the right ---------------- */
#screen-dungeon-select { align-items: stretch; justify-content: flex-start; padding: 0; background: var(--night); }
.dsel-layout { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }

.dsel-hero { position: relative; flex: 0 0 40%; min-height: 200px; overflow: hidden; background: #050408; }
.dsel-hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: opacity 0.18s ease, transform 0.4s ease;
}
.dsel-hero-bg.is-empty {
  background: radial-gradient(ellipse at 50% 40%, rgba(58,42,84,0.8), #050408 70%);
  display: flex; align-items: center; justify-content: center;
}
.dsel-hero-bg.is-empty::before { content: attr(data-icon); font-size: 7rem; opacity: 0.55; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.7)); }
.dsel-hero-bg.is-swapping { opacity: 0; transform: scale(1.04); }
.dsel-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,4,9,0.55) 0%, rgba(5,4,9,0) 35%, rgba(5,4,9,0.85) 100%);
}
.dsel-hero-text {
  position: absolute; left: 16px; right: 16px; bottom: 14px; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transition: opacity 0.18s ease;
}
.dsel-hero-text.is-swapping { opacity: 0; }
.dsel-name {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 2rem; color: #f4ecd8;
  text-shadow: 0 3px 12px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.6);
}
.dsel-desc {
  margin: 0; max-width: 34em; padding: 8px 12px; border-radius: 10px; white-space: pre-line;
  background: rgba(5,4,9,0.62); color: #e4d8c4; font-weight: 600; font-size: 0.82rem; line-height: 1.7;
}
.dsel-meta { color: var(--gold-light); font-size: 0.8rem; letter-spacing: 0.12em; text-shadow: 0 2px 6px rgba(0,0,0,0.9); }

.dsel-side { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; }
.dsel-list { display: flex; flex-direction: column; gap: 8px; }
.dsel-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 16px; border-radius: 14px; font-family: var(--font-body); color: #e4d8c4;
  background: rgba(20,15,32,0.92); border: 1px solid rgba(184,147,79,0.3);
  transition: transform 0.12s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dsel-item:active { transform: scale(0.98); }
.dsel-item-icon { font-size: 1.4rem; }
.dsel-item-name { flex: 1; font-weight: 700; font-size: 1.05rem; color: #f4ecd8; }
.dsel-item-floors { font-size: 0.78rem; color: #a89878; font-weight: 700; }
.dsel-item.is-selected {
  border-color: var(--gold); background: linear-gradient(90deg, rgba(58,42,84,0.85), rgba(20,15,32,0.92));
  box-shadow: 0 0 16px -2px rgba(184,147,79,0.6);
}
.dsel-item.is-selected .dsel-item-name { color: var(--gold-light); }

.dsel-screen .equip-section-title {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 8px;
  font-family: var(--font-display); font-size: 1rem; color: var(--gold-light); letter-spacing: 0.1em;
}
.dsel-screen .equip-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(184,147,79,0.5), transparent); }
.dsel-diff { justify-content: flex-start; margin: 0; }
.dsel-screen .difficulty-chip {
  background: rgba(20,15,32,0.92); border: 1px solid rgba(184,147,79,0.35); color: #cbb98c;
  letter-spacing: 0.06em; padding: 8px 12px;
}
.dsel-screen .difficulty-chip.is-selected {
  border-color: var(--ember-light); color: #fff; background: linear-gradient(180deg, var(--ember-light), var(--ember));
  box-shadow: 0 0 12px -2px rgba(201,122,74,0.8);
}

.dsel-back { position: absolute; top: 12px; left: 12px; z-index: 3; }
.dsel-screen .btn-secondary {
  background: linear-gradient(180deg, #1e1830, #100c1c); color: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(184,147,79,0.5), 0 4px 10px rgba(0,0,0,0.5);
}
.dsel-go { flex: 0 0 auto; margin: 0 16px calc(12px + var(--safe-bottom)); letter-spacing: 0.2em; }

@media (min-width: 760px) {
  .dsel-layout { flex-direction: row; }
  .dsel-side { order: 1; flex: 0 0 42%; padding: 72px 28px 24px 28px; }
  .dsel-hero { order: 2; flex: 1 1 0; min-height: 0; }
  .dsel-hero-shade { background: linear-gradient(90deg, rgba(5,4,9,0.9) 0%, rgba(5,4,9,0) 25%), linear-gradient(180deg, rgba(5,4,9,0.35) 0%, rgba(5,4,9,0) 40%, rgba(5,4,9,0.6) 100%); }
  .dsel-hero-text { top: 28px; bottom: auto; left: 28px; right: 28px; }
  .dsel-name { font-size: 3rem; }
  .dsel-desc { font-size: 0.95rem; }
  .dsel-go { position: absolute; right: 8%; bottom: 40px; width: 34%; margin: 0; z-index: 3; }
}


/* ---------------- battle intro caption ---------------- */
.battle-caption {
  position: absolute; left: 0; right: 0; top: 34%; z-index: 25; pointer-events: none;
  text-align: center; padding: 14px 16px;
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.9rem; letter-spacing: 0.08em;
  color: #f4ecd8; text-shadow: 0 3px 12px rgba(0,0,0,0.95), 0 0 26px rgba(143,47,47,0.8);
  background: linear-gradient(90deg, transparent, rgba(5,4,9,0.78) 20%, rgba(5,4,9,0.78) 80%, transparent);
  border-top: 1px solid rgba(184,147,79,0.35); border-bottom: 1px solid rgba(184,147,79,0.35);
}
.battle-caption.is-shown { animation: battle-caption-in 2s ease both; }
@keyframes battle-caption-in {
  0% { opacity: 0; transform: scale(1.12); letter-spacing: 0.3em; }
  18% { opacity: 1; transform: scale(1); letter-spacing: 0.08em; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

.equip-dark .item-card.is-open { box-shadow: 0 0 16px -2px rgba(184,147,79,0.7); border-color: var(--gold); }

.guild-btn-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.guild-close-btn { flex: 1 1 auto; }
.guild-claim-btn { flex: 1 1 auto; }
.guild-completed-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 9px 14px;
  background: rgba(20,15,32,0.7); border: 1px dashed rgba(184,147,79,0.4); border-radius: 12px;
  color: #cbb98c; font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer;
}
.guild-completed-toggle:active { transform: translateY(1px); }
.guild-completed-toggle.is-open { border-style: solid; color: #f4ecd8; }
.guild-completed-caret { color: var(--gold); width: 1em; }
.guild-completed-hint { margin-left: auto; font-size: 0.74rem; color: #8a7d64; }
.equip-dark .btn.guild-abandon-btn {
  flex: 0 0 auto; padding: 8px 12px; font-size: 0.72rem; border-radius: 12px;
  box-shadow: 0 3px 0 var(--danger-dark), inset 0 1px 1px rgba(255,255,255,0.25);
}

/* ---------------- game over banner ---------------- */
.gameover-banner {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(60,0,0,0.55), rgba(0,0,0,0.92) 75%);
}
.gameover-banner.is-shown { animation: gameover-fade 3s ease both; }
.gameover-banner span {
  font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(3rem, 14vw, 7rem);
  letter-spacing: 0.1em; color: #e02b2b;
  text-shadow: 0 4px 0 #400000, 0 0 30px rgba(224,43,43,0.85), 0 0 80px rgba(150,0,0,0.9);
  animation: gameover-text 3s ease both;
}
@keyframes gameover-fade { 0% { opacity: 0; } 15% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gameover-text {
  0% { transform: scale(1.5); letter-spacing: 0.4em; filter: blur(8px); }
  25% { transform: scale(1); letter-spacing: 0.1em; filter: blur(0); }
  100% { transform: scale(1.06); letter-spacing: 0.14em; }
}

/* A boss transforming mid-fight - a bright flash burst naming its new form.
   Fire-and-forget, same show/hide idiom as .gameover-banner. */
.transform-fx {
  position: absolute; inset: 0; z-index: 27; display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.transform-fx.is-shown { animation: transform-flash-bg 2.4s ease both; }
.transform-fx.is-flashy { animation-name: transform-flash-bg-flashy; }
.transform-fx span {
  font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.8rem, 8vw, 3.6rem);
  letter-spacing: 0.12em; color: #fff3d0;
  text-shadow: 0 3px 0 #4a2a00, 0 0 24px rgba(255,214,120,0.9), 0 0 60px rgba(255,180,60,0.85);
  animation: transform-text-in 2.4s ease both;
}
@keyframes transform-flash-bg {
  0% { opacity: 0; background: radial-gradient(ellipse at center, rgba(255,255,255,0.95), rgba(120,70,0,0.6) 55%, rgba(0,0,0,0) 85%); }
  10% { opacity: 1; }
  30% { opacity: 0.55; background: radial-gradient(ellipse at center, rgba(255,214,120,0.3), rgba(20,10,0,0.5) 70%, rgba(0,0,0,0) 100%); }
  100% { opacity: 0; }
}
@keyframes transform-flash-bg-flashy {
  0% { opacity: 0; background: radial-gradient(ellipse at center, #ffffff, rgba(255,120,40,0.85) 45%, rgba(90,0,120,0.6) 75%, rgba(0,0,0,0) 92%); }
  8% { opacity: 1; }
  20% { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,240,200,0.5), rgba(120,20,140,0.55) 60%, rgba(0,0,0,0) 95%); }
  45% { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes transform-text-in {
  0% { opacity: 0; transform: scale(1.6); letter-spacing: 0.5em; filter: blur(10px); }
  20% { opacity: 0; }
  35% { opacity: 1; transform: scale(1); letter-spacing: 0.12em; filter: blur(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}

/* 真・バルバロッソ's 5-turn charge cycle - a persistent ominous vignette,
   explicitly shown/hidden by JS (no fixed duration), pulsing while active. */
.charge-fx {
  position: absolute; inset: 0; z-index: 26; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(80,0,20,0) 45%, rgba(60,0,20,0.55) 100%);
  opacity: 0; transition: opacity 0.6s ease;
}
.charge-fx.is-active { opacity: 1; animation: charge-fx-pulse 1.4s ease-in-out infinite; }
/* ボス戦開始時の背景: 新しい背景が上から降りてくる(_dropBossBg) */
.boss-bg-drop {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center;
  animation: boss-bg-drop 1.2s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}
@keyframes boss-bg-drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
/* 死四天ペルディティオ戦の開始時の背景: 白い光が太陽が昇るように引いていき、新しい背景を現す(_sunriseBg) */
.boss-bg-sunrise {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 160% 90% at 50% 112%, #fffaf0 0%, #ffe9ba 32%, rgba(255,233,176,0) 68%),
    #fffdf6;
  animation: boss-bg-sunrise 2.8s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
@keyframes boss-bg-sunrise {
  0% { opacity: 1; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .boss-bg-sunrise { animation: none; opacity: 0; } }
@keyframes charge-fx-pulse {
  0%, 100% { background: radial-gradient(ellipse at center, rgba(80,0,20,0) 45%, rgba(60,0,20,0.5) 100%); }
  50% { background: radial-gradient(ellipse at center, rgba(120,0,30,0.05) 40%, rgba(90,0,30,0.75) 100%); }
}
.floor-card .equip-header { justify-content: center; }
.floor-card .equip-header > div:empty { display: none; }
.floor-card .result-desc:not(:empty) {
  background: rgba(5,4,9,0.74); border: 1px solid rgba(184,147,79,0.4); border-radius: 14px;
  padding: 14px 18px; font-size: 1rem; line-height: 1.8; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}


/* ---------------- class mastery ---------------- */
.mastery-row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--gold-light); letter-spacing: 0.05em; }
.mastery-bar { height: 7px; border-radius: 4px; margin-top: 3px; overflow: hidden; background: rgba(0,0,0,0.55); box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(184,147,79,0.2); }
.mastery-bar i { display: block; height: 100%; background: linear-gradient(180deg, #f0c987, #b8793a); transition: width 0.6s ease; }
.fm-mastery-text { font-size: 0.72rem; font-weight: 700; color: var(--gold-light); margin-top: 2px; }
.floor-member .mastery-bar { margin-top: 1px; }
.fm-classup { font-size: 0.78rem; font-weight: 700; color: #2a1c05; background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-radius: 8px; padding: 3px 10px; margin-top: 4px; animation: fm-levelup-pop 0.9s ease-out; box-shadow: 0 0 14px 2px rgba(212,181,120,0.6); }
.equip-dark .item-card small { color: #a89878; font-weight: 600; margin-left: 4px; }
.equip-dark .class-card .class-name small { color: var(--gold-light); font-weight: 600; margin-left: 4px; }


/* ---------------- chain (連携) gauge ---------------- */
.chain-gauge {
  position: relative; width: 100%; max-width: 100%; height: 10px; flex: 0 0 auto;
  border-radius: 6px; background: rgba(0,0,0,0.6); box-shadow: inset 0 1px 3px rgba(0,0,0,0.7), 0 0 0 1px rgba(184,147,79,0.3);
  overflow: visible;
}
.chain-gauge i {
  display: block; height: 100%; border-radius: 6px; width: 0;
  background: linear-gradient(90deg, #3d7fc7, #8fd3ff 70%, #fff3c4);
  transition: width 0.4s ease;
}
.chain-gauge.is-full i { background: linear-gradient(90deg, #f0a93a, #ffe08a 60%, #fff); animation: chain-full-pulse 0.9s ease-in-out infinite; }
.chain-gauge.is-chaining i { background: linear-gradient(90deg, #ff6a3d, #ffb86a); }
@keyframes chain-full-pulse {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(255,214,120,0.6); }
  50% { box-shadow: 0 0 18px 4px rgba(255,214,120,0.95); }
}
.chain-label {
  position: absolute; right: 6px; top: -18px; font-weight: 700; font-size: 0.78rem; color: #ffb86a; letter-spacing: 0.08em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}
.command-tabs { grid-template-columns: repeat(var(--tabs, 4), 1fr); }
.command-tab[class*="chain"], .command-tab:nth-child(5) {
  background: linear-gradient(180deg, #ffd98a, #e08a2e); color: #3a1a00;
  box-shadow: 0 4px 0 #8a4a10, 0 0 14px rgba(255,190,90,0.8), inset 0 1px 0 rgba(255,255,255,0.6);
  animation: chain-full-pulse 0.9s ease-in-out infinite;
}
.chain-prompt { color: #b3450f; }

/* ---------------- guild tabs / class change ---------------- */
.guild-class-current { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; margin-top: 4px;
  background: rgba(5,4,9,0.85); border: 1px solid rgba(184,147,79,0.35); color: #f4ecd8; font-weight: 700; }
.guild-class-current span:last-child { color: var(--gold-light); }

/* ---------------- dungeon select: locked entries ---------------- */
.dsel-item.is-locked { opacity: 0.45; cursor: not-allowed; }
.dsel-screen .difficulty-chip.is-locked { opacity: 0.4; cursor: not-allowed; }


/* ---------------- battle stacking + 作戦 (tactics) ---------------- */
.battle-log, .chain-gauge { position: relative; z-index: 2; }
.battle-main { position: relative; z-index: 1; }
.party-area { position: relative; z-index: 6; }

.party-slot .portrait-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tactics-tag {
  font-size: 0.58rem; font-weight: 700; color: var(--gold-light); white-space: nowrap; letter-spacing: 0.02em;
  max-width: 96px; overflow: visible;
  padding: 1px 6px; border-radius: 999px; background: rgba(20,15,32,0.9); border: 1px solid rgba(184,147,79,0.4);
}
.tactics-tag.is-manual { color: #8a7d64; border-color: rgba(184,147,79,0.2); }
.party-slot.has-tactics { cursor: pointer; }
.party-slot.has-tactics:not(.is-targetable):active { transform: scale(0.97); }

.tactics-menu {
  position: fixed; z-index: 80; width: min(300px, calc(100vw - 16px)); padding: 8px;
  background: rgba(8,6,14,0.97); border: 1px solid var(--gold); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; gap: 6px;
}
.tactics-menu.hidden { display: none; }
.tactics-title { color: var(--gold-light); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; padding: 2px 6px 4px; }
.tactics-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 12px; border-radius: 10px; font-family: var(--font-body);
  background: rgba(20,15,32,0.95); border: 1px solid rgba(184,147,79,0.3); color: #e4d8c4;
}
.tactics-option-name { font-weight: 700; font-size: 0.95rem; color: #f4ecd8; }
.tactics-option-desc { font-size: 0.7rem; color: #a89878; }
.tactics-option.is-current { border-color: var(--gold); background: linear-gradient(90deg, rgba(58,42,84,0.85), rgba(20,15,32,0.95)); box-shadow: 0 0 12px -3px rgba(184,147,79,0.7); }
.tactics-option.is-current .tactics-option-name { color: var(--gold-light); }

.fm-tactics {
  margin-left: auto; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; color: var(--gold-light);
  padding: 2px 10px; border-radius: 999px; background: rgba(20,15,32,0.95); border: 1px solid rgba(184,147,79,0.5);
}
.fm-tactics:active { transform: scale(0.95); }


/* ---------------- item type tag / rarity tag / sets ---------------- */
.item-type-tag { font-size: 0.68em; font-weight: 700; margin-left: 6px; letter-spacing: 0.02em; white-space: nowrap; color: var(--ink-soft); }
.equip-dark .item-type-tag { color: #a89878; }
.rarity-tag { font-size: 0.68em; font-weight: 700; margin-left: 6px; letter-spacing: 0.04em; white-space: nowrap; }
/* アイテムレベル表記(Lv.XX)。装備/所持品/ショップ/ポーターの戦利品など、_itemNameHtmlを使うすべての一覧で共通 */
.item-lv-tag { font-size: 0.68em; font-weight: 700; margin-left: 6px; letter-spacing: 0.02em; white-space: nowrap; color: var(--gold-light); opacity: 0.9; }
.item-lv-tag.is-low { color: #e0695f; } /* ポーターの戦利品一覧: ポーターのLv未満のアイテム */
.item-set { margin-top: 2px; font-size: 0.72rem; font-weight: 700; color: #d9b6ff; }
.set-effects { margin-top: 2px; }
.set-block {
  background: rgba(5,4,9,0.85); border: 1px solid rgba(162,89,230,0.55); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
  box-shadow: 0 0 14px -6px rgba(162,89,230,0.8);
}
.set-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #d9b6ff; }
.set-count { font-size: 0.85rem; color: var(--gold-light); }
.set-pieces { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 6px; font-size: 0.72rem; color: #7f7360; font-weight: 700; }
.set-pieces .is-worn { color: #e4d8c4; }
.set-line { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; font-weight: 700; color: #6f6350; padding: 2px 0; }
.set-line.is-active { color: var(--gold-light); }


/* ---------------- status icons / stat stages ---------------- */
.status-icon sub { font-size: 0.6em; font-weight: 700; margin-left: 1px; }
.status-icon.is-ailment { filter: drop-shadow(0 0 3px rgba(255,90,90,0.7)); }
.status-icon.is-debuff { filter: drop-shadow(0 0 3px rgba(150,90,255,0.8)); }
.status-icon.is-buff { filter: drop-shadow(0 0 3px rgba(120,210,120,0.7)); }
.stage-tag {
  font-size: 0.6rem; font-weight: 700; padding: 0 4px; border-radius: 4px; line-height: 1.5; white-space: nowrap;
  background: rgba(0,0,0,0.6); border: 1px solid currentColor;
}
.stage-tag.is-up { color: #7ad46a; }
.stage-tag.is-down { color: #ff7a7a; }
.fm-status:empty { display: none; }
.fm-status { justify-content: flex-start; margin: 1px 0; }

.herocreate-radar svg { max-width: 340px; }
.herocreate-radar .radar-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.herocreate-radar .radar-value { fill: var(--gold-light); font-size: 10px; font-family: var(--font-body); text-anchor: middle; }

/* ============================================================================
   Town story: a pill under the town banner + a full-screen "storybook" overlay
   ============================================================================ */
.town-story-btn {
  position: absolute; top: 82px; left: 14px; z-index: 2;
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 90px);
  padding: 9px 16px 9px 12px; cursor: pointer;
  border: 1px solid rgba(212,181,120,0.7); border-radius: 999px;
  background: linear-gradient(135deg, rgba(36,26,56,0.85), rgba(10,8,16,0.85));
  color: #f0e6cc; font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.06em;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), inset 0 0 12px rgba(212,181,120,0.12);
  position: absolute;
}
.town-story-btn:active { transform: translateY(2px); }
.town-chapter-nav {
  position: absolute; top: 128px; left: 14px; z-index: 2;
  display: flex; gap: 8px; max-width: calc(100% - 28px);
}
.town-chapter-btn {
  padding: 6px 14px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(212,181,120,0.7); border-radius: 999px;
  background: linear-gradient(135deg, rgba(36,26,56,0.85), rgba(10,8,16,0.85));
  color: var(--gold-light); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.06em;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), inset 0 0 12px rgba(212,181,120,0.12);
}
.town-chapter-btn:active { transform: translateY(2px); }
.town-story-icon { font-size: 1.05rem; }
.town-story-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gold-light); }
.town-story-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #d9534f; box-shadow: 0 0 8px #d9534f;
  animation: story-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes story-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }

.story-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(40,26,58,0.82), rgba(4,3,8,0.95) 75%);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.5s ease;
}
.story-overlay.is-open { opacity: 1; }
.story-overlay.hidden { display: none; }
.story-card {
  position: relative; width: min(560px, 100%); max-height: min(88vh, 720px);
  display: flex; flex-direction: column; text-align: center;
  padding: 28px 26px 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(184,147,79,0.16), transparent 60%),
    linear-gradient(180deg, #1d1528, #0d0913);
  border: 1px solid var(--gold-dark);
  box-shadow: 0 0 0 4px rgba(10,8,16,0.9), 0 0 0 5px rgba(184,147,79,0.55), 0 24px 60px rgba(0,0,0,0.7);
  transform: translateY(14px) scale(0.985); transition: transform 0.6s ease;
}
.story-overlay.is-open .story-card { transform: none; }
.story-card::before, .story-card::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 2px solid var(--gold-light);
}
.story-card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.story-card::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.story-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.story-tab {
  border: 1px solid rgba(184,147,79,0.5); background: transparent; color: var(--gold);
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.12em;
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
}
.story-tab.is-active { background: rgba(184,147,79,0.22); color: #f4e6c0; border-color: var(--gold-light); }
.story-orn { color: var(--gold); letter-spacing: 0.5em; font-size: 0.8rem; opacity: 0.85; }
.story-numeral { margin-top: 6px; color: var(--gold); font-size: 0.86rem; letter-spacing: 0.5em; padding-left: 0.5em; }
.story-title {
  margin: 4px 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; letter-spacing: 0.14em;
  color: #f4e6c0; text-shadow: 0 0 18px rgba(212,181,120,0.45), 0 2px 0 rgba(0,0,0,0.6);
}
.story-rule { height: 1px; margin: 0 auto 14px; width: 70%; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.story-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 8px;
  scrollbar-width: thin; scrollbar-color: var(--gold-dark) transparent;
}
.story-stanza {
  margin: 0 0 1.35em; white-space: pre-line; line-height: 2.05; font-size: 1rem; letter-spacing: 0.05em; color: #e6dcc4;
  opacity: 0; transform: translateY(6px);
  animation: story-line-in 0.9s ease forwards;
}
.story-stanza.is-em { color: var(--gold-light); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.12em; text-shadow: 0 0 14px rgba(212,181,120,0.4); margin-top: 1.6em; }
.story-overlay.no-anim .story-stanza { animation: none; opacity: 1; transform: none; }
@keyframes story-line-in { to { opacity: 1; transform: none; } }
.story-close {
  align-self: center; margin-top: 10px; padding: 9px 38px; cursor: pointer;
  border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(122,95,46,0.55), rgba(60,44,20,0.7));
  color: #f4e6c0; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.3em; padding-left: calc(38px + 0.3em);
}
.story-close:active { transform: translateY(2px); }
@media (max-width: 480px) {
  .story-card { padding: 22px 16px 16px; }
  .story-title { font-size: 1.4rem; }
  .story-stanza { font-size: 0.94rem; line-height: 1.95; }
}


/* ---------------- equip screen: tabs (装備 / スキル) + inventory accordion ---------------- */
.equip-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.equip-pane.hidden { display: none; }
.equip-pane .equip-section-title:first-child { margin-top: 4px; }
.equip-acc-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 12px 14px;
  border-radius: 12px; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--gold-light);
  background: rgba(20,15,32,0.92); border: 1px solid rgba(184,147,79,0.35);
}
.equip-acc-toggle .equip-acc-arrow { margin-left: auto; font-style: normal; transition: transform 0.2s; }
.equip-acc-toggle.is-open .equip-acc-arrow { transform: rotate(180deg); }
.equip-acc-toggle.is-open { border-color: var(--gold); }
.equip-inventory.hidden { display: none; }
/* 戻るボタンと画面タイトルの並び（酒場・商店と同じ見た目）。タイトルは中央寄せ気味に */
#screen-equip .equip-header { justify-content: space-between; }
#screen-equip .equip-header::after { content: ''; width: 76px; }
#screen-equip .equip-left .member-row { margin: 0; }
@media (max-width: 480px) {
  /* スマホ: 武器習熟は2列にして縦の長さを詰める */
  .wp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
  .equip-weapon-prof { padding: 10px 14px; }
}

/* ============================================================================
   Enemy layout: always fits the screen width (no horizontal overflow) at any count.
   ui.js sets on #enemy-area:
     --cols   how many slots share one row (1体=1, 2体=2, 3体=3, 4体=2(2段), 5体=3(3+2段))
     --rows   number of rows (sprite height is capped by it, so the stack never outgrows the area)
     .has-boss-group  boss + escorts: one row, the boss gets a wider slot
   ============================================================================ */
#enemy-area {
  --cols: 1; --rows: 1; --gap: 6px;
  flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 4px var(--gap); padding: 6px 2px; overflow: hidden;
  container-type: size; /* 敵エリア自身の高さ(cqh)を基準に、段数ぶんのスプライト高さを決める */
}
#enemy-area .enemy-slot {
  flex: 0 0 auto; min-width: 0; padding: 4px 2px;
  width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols) - 0.5px);
  /* 1段ぶん: エリア高さを段数で割り、名前+HPバーぶん(約66px)を引いた残りがスプライトの最大サイズ */
  --cap: max(28px, calc((100cqh - var(--rows) * 66px - 10px) / var(--rows)));
}
#enemy-area .enemy-slot .sprite-wrap { width: 100%; display: flex; justify-content: center; }
#enemy-area .enemy-slot .sprite {
  width: min(136px, 100%, var(--cap)); height: auto; aspect-ratio: 1 / 1;
}
#enemy-area .enemy-slot.is-boss .sprite { width: min(340px, 100%, var(--cap)); }
#enemy-area .enemy-slot .sprite.is-emoji { width: auto; height: auto; aspect-ratio: auto; font-size: min(5.8rem, 16vw); }
#enemy-area .enemy-slot.is-boss .sprite.is-emoji { font-size: min(13rem, 34vw); }
#enemy-area .enemy-slot .hp-bar { width: min(136px, 100%); }
#enemy-area .enemy-slot .name {
  white-space: normal; text-align: center; line-height: 1.25;
  font-size: clamp(0.66rem, 3.1vw, 1rem);
}
#enemy-area .enemy-slot.is-boss .name { font-size: clamp(0.78rem, 3.6vw, 1.15rem); }
#enemy-area .enemy-slot .hp-text { font-size: clamp(0.6rem, 2.6vw, 0.68rem); }
#enemy-area.has-boss-group { flex-wrap: nowrap; --gap: 2px; }
#enemy-area.has-boss-group .enemy-slot { flex: 1 1 0; width: auto; }
#enemy-area.has-boss-group .enemy-slot.is-boss { flex: 2.3 1 0; }

/* ---------------- phone battle layout ---------------- */
@media (max-width: 600px) {
  /* 味方のステータスは2行×2列。顔は角丸の四角のまま、枠に収まるよう少し小さくする */
  .party-area { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 8px 10px; }
  .party-slot { gap: 7px; }
  .party-slot .portrait { width: 52px; height: 40px; border-radius: 8px; }
  .party-slot .hp-bar, .party-slot .mp-bar { max-width: none; }
  .party-slot .name { font-size: 0.74rem; }
  .party-slot .hp-num { font-size: 0.86rem; }
}

/* スキル/アイテム一覧はコマンド欄の上に半透明で重ねて出す（敵の位置がずれない） */
.command-content:not(:empty) {
  position: absolute; left: 6px; right: 6px; bottom: calc(100% - 4px); margin: 0;
  padding: 8px; border-radius: 16px;
  background: rgba(244,236,216,0.8);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(184,147,79,0.6) inset;
  z-index: 7;
}
.command-content .skill-list, .command-content .item-list { max-height: 34vh; }
.command-content .skill-row { background: rgba(255,251,240,0.72); }
/* 「対象を選んでください」など一言だけのときは枠を目立たせない・タップを邪魔しない */
.command-content:has(> .prompt-text:only-child) {
  left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 12px);
  padding: 2px 16px; border-radius: 999px; pointer-events: none; bottom: calc(100% + 6px);
}
.command-content .prompt-text { padding: 4px 0; }
/* 横向きなど高さが足りない画面: 段を重ねず1行に並べる */
@media (max-height: 480px) {
  #enemy-area:not(.has-boss-group) { flex-wrap: nowrap; --rows: 1 !important; }
  #enemy-area:not(.has-boss-group) .enemy-slot { flex: 1 1 0; width: auto; max-width: 190px; }
}
@media (max-width: 600px) {
  /* 行動順のレール（左端）は隠さない */
  .command-content:not(:empty) { left: 58px; }
}
/* 幅の狭い画面のボス編成(4体以上): ボスを1段目に大きく、護衛を2段目に並べる */
@media (max-width: 600px) {
  #enemy-area.has-boss-group.boss-many { flex-wrap: wrap; --gap: 4px; }
  #enemy-area.has-boss-group.boss-many .enemy-slot.is-boss {
    flex: 0 0 100%; order: -1;
    --cap: max(40px, calc(100cqh - 142px - (25cqw - 8px)));
  }
  #enemy-area.has-boss-group.boss-many .enemy-slot:not(.is-boss) {
    flex: 1 1 0; --cap: 200px;
  }
}

/* ---------------- tabs: 下線タブ（ボタンと見分けがつくように、枠なし・選択中は金の下線） ---------------- */
.equip-tabs, .guild-tabs {
  display: flex; gap: 0; margin: 4px 0 8px;
  border-bottom: 1px solid rgba(184,147,79,0.35);
}
.equip-tab, .guild-tab {
  position: relative; flex: 1 1 0; margin: 0 0 -1px; padding: 11px 6px 10px; cursor: pointer;
  background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.1em;
  color: #8a7d64; box-shadow: none; transition: color 0.15s, background 0.15s;
}
.equip-tab:active, .guild-tab:active { background: rgba(184,147,79,0.08); }
.equip-tab.is-active, .guild-tab.is-active {
  color: var(--gold-light); border-bottom-color: var(--gold);
  background: linear-gradient(180deg, transparent, rgba(184,147,79,0.16));
  text-shadow: 0 0 12px rgba(212,181,120,0.55);
  box-shadow: none;
}

/* ---------------- character name + pencil (rename) ---------------- */
.char-name-row { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.char-name-row .char-name { min-width: 0; overflow-wrap: anywhere; }
.name-edit-btn {
  /* 40px: タップ領域の最低目安に合わせる(UXレビュー、以前は34px) */
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; padding: 0;
  color: var(--gold-light); background: rgba(184,147,79,0.1); border: 1px solid rgba(184,147,79,0.45);
}
.name-edit-btn:active { background: rgba(184,147,79,0.3); transform: scale(0.94); }
.char-name-row.is-editing { gap: 6px; }
.char-name-input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-size: 1.05rem; }
.name-edit-ok, .name-edit-cancel {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1rem; font-weight: 700;
  border: 1px solid rgba(184,147,79,0.55); background: rgba(20,15,32,0.9); color: var(--gold-light);
}
.name-edit-ok { background: linear-gradient(180deg, var(--ember-light), var(--ember)); color: #fff; border-color: var(--ember-light); }

/* ---------------- 装備/スキルのスロット: PCは2列、スマホは1列（文字が折れないように） ---------------- */
@media (max-width: 600px) {
  .equip-dark .equip-slots, .equip-slots { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* 2列表示: 立ち絵+作戦ラベルの幅を全員で固定し、HPバーの左端・幅をそろえる */
  .party-slot .portrait-col { flex: 0 0 72px; width: 72px; }
  .party-slot .tactics-tag { width: 100%; box-sizing: border-box; text-align: center; white-space: nowrap; padding-left: 1px; padding-right: 1px; font-size: 0.62rem; letter-spacing: 0; }
}

/* ---------------- 上級クラス: 絵文字アイコン・転職カード ---------------- */
.job-emoji { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.5rem; line-height: 1; }
.class-icon .job-emoji { font-size: 2.2rem; }
.class-card.is-advanced { border-color: rgba(212,181,120,0.75); box-shadow: 0 0 14px -6px rgba(212,181,120,0.8); }
.class-card.is-locked { opacity: 0.62; }
.class-card:disabled { cursor: not-allowed; }
/* UXレビュー: 転職条件を1項目ずつ✔/🔒で並べて見せる(証の所持・必要な職業Lvなど) */
/* li は space-between の2カラムではなく、1行の文として自然に折り返す(狭いカードでラベルと
   所持数だけが別の行に割れて見えるのを避ける)。 */
.class-req-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.class-req-list li { font-size: 0.74rem; font-weight: 700; color: #d98a7a; line-height: 1.4; }
.class-req-list li.is-ok { color: #4a8a3c; }
.equip-dark .class-req-list li.is-ok { color: #8fd08a; }
.class-req-list .class-req-detail { font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
.equip-dark .class-req-list .class-req-detail { color: #8a7a60; }
.class-card .class-slots { margin-top: 6px; font-size: 0.72rem; color: #a89878; }
.guild-class-legend {
  display: flex; gap: 14px; margin: 6px 0 2px; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft);
}
.guild-class-legend .is-ok { color: #4a8a3c; }
.equip-dark .guild-class-legend { color: #a89878; }
.equip-dark .guild-class-legend .is-ok { color: #8fd08a; }

/* ---------------- 転職の確認画面（立ち絵・ステータス差・覚えるスキル） ---------------- */
.cc-detail { display: flex; flex-direction: column; gap: 12px; }
.cc-figures { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cc-figure { margin: 0; flex: 1 1 0; max-width: 200px; text-align: center; }
.cc-figure img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; display: block;
  border-radius: 14px; border: 1px solid rgba(184,147,79,0.45); background: rgba(0,0,0,0.5);
  filter: saturate(0.75) brightness(0.85);
}
.cc-figure.is-after img { border-color: var(--gold); box-shadow: 0 0 18px -4px rgba(212,181,120,0.8); filter: none; }
.cc-figure figcaption { margin-top: 6px; font-family: var(--font-display); color: #f4ecd8; font-size: 0.95rem; }
.cc-figure figcaption small { display: block; color: var(--gold-light); font-size: 0.75rem; }
.cc-arrow { color: var(--gold-light); font-size: 1.4rem; }
.cc-section { padding: 10px 12px; border-radius: 12px; background: rgba(5,4,9,0.7); border: 1px solid rgba(184,147,79,0.3); }
.cc-h { margin: 0 0 8px; font-family: var(--font-display); font-size: 0.95rem; color: var(--gold-light); letter-spacing: 0.06em; }
.cc-h small { font-size: 0.7rem; color: #a89878; font-weight: 600; letter-spacing: 0; }
.cc-stats { width: 100%; border-collapse: collapse; font-size: 0.85rem; color: #e4d8c4; }
.cc-stats th { text-align: left; color: var(--gold); font-weight: 700; padding: 3px 4px; }
.cc-stats td { padding: 3px 4px; text-align: right; }
.cc-stats thead td, .cc-stats thead th { color: #a89878; font-size: 0.68rem; font-weight: 600; }
.cc-stats .cc-to { color: #7d7160; text-align: center; padding: 3px 0; }
.cc-stats td b { color: #f4ecd8; }
.cc-diff.is-up { color: #8fd08a; } .cc-diff.is-down { color: #e08a7a; }
.cc-growth { color: #a89878; font-size: 0.72rem; }
.cc-wp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; font-size: 0.8rem; color: #cbb98c; }
.cc-wp span { display: flex; justify-content: space-between; }
.cc-wp b { color: #f4ecd8; }
.cc-wp .is-up b { color: #8fd08a; }
.cc-lv { margin-bottom: 8px; }
.cc-lvname { font-size: 0.78rem; font-weight: 700; color: var(--gold); margin-bottom: 3px; }
.cc-lv ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-lv li { display: grid; grid-template-columns: 22px auto 1fr; gap: 6px; align-items: baseline; font-size: 0.82rem; color: #e4d8c4; }
.cc-ic { text-align: center; }
.cc-name { font-weight: 700; color: #f4ecd8; white-space: nowrap; }
.cc-name small { margin-left: 5px; font-size: 0.66rem; color: #a89878; font-weight: 600; }
.cc-desc { color: #a89878; font-size: 0.74rem; }
.cc-have { font-style: normal; font-size: 0.66rem; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(143,208,138,0.16); color: #8fd08a; white-space: nowrap; }
.cc-actions { position: sticky; bottom: 0; padding: 10px 0 4px; background: linear-gradient(180deg, transparent, rgba(8,6,14,0.95) 35%); }
@media (max-width: 600px) {
  .cc-lv li { grid-template-columns: 22px 1fr; }
  .cc-lv li .cc-desc { grid-column: 2; }
  .cc-wp { grid-template-columns: repeat(2, 1fr); }
  .cc-growth { display: none; }
  .cc-stats thead td:last-child { display: none; }
}

/* ---------------- 通知バッジ（受け取れるクエスト報酬など） ---------------- */
.town-tile-icon { position: relative; display: inline-block; }
.notify-badge {
  position: absolute; top: -6px; right: -14px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: linear-gradient(180deg, #ff6b5c, #d63a2c); color: #fff;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; line-height: 1;
  border: 2px solid #1a1226; box-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(255,90,70,0.7);
  animation: badge-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
.notify-badge.hidden { display: none; }
.notify-badge.is-inline { position: static; margin-left: 8px; vertical-align: middle; }
@keyframes badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .notify-badge { animation: none; } }

/* ---------------- 立ち絵の選択（タイプA/B）: キャラクター作成・装備画面 ---------------- */
.avatar-pick { display: flex; flex-direction: column; gap: 6px; }
.avatar-pick-title { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--gold-light); }
.avatar-pick-row { display: flex; gap: 10px; }
.avatar-pick-btn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 5px 6px; cursor: pointer;
  border-radius: 12px; background: rgba(5,4,9,0.8); color: #a89878; border: 1px solid rgba(184,147,79,0.35);
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 700;
}
.avatar-pick-btn img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; border-radius: 8px; display: block; filter: saturate(0.7) brightness(0.8); }
.avatar-pick-btn:active { transform: scale(0.97); }
.avatar-pick-btn.is-selected { border-color: var(--gold); color: #f4ecd8; box-shadow: 0 0 14px -3px rgba(212,181,120,0.8); }
.avatar-pick-btn.is-selected img { filter: none; }
.herocreate-left .avatar-pick { align-items: stretch; }
.herocreate-left .avatar-pick-title { text-align: center; }


/* ---------------- 装備画面: 立ち絵の全体像+選択パネル ---------------- */
.avatar-modal {
  position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: radial-gradient(ellipse at 50% 40%, rgba(40,26,58,0.86), rgba(4,3,8,0.96) 75%);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.18s ease;
}
.avatar-modal.is-open { opacity: 1; }
.avatar-modal-card {
  width: 100%; max-width: 460px; max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px;
  background: rgba(10,8,16,0.92); border: 1px solid rgba(184,147,79,0.55); border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), inset 0 0 24px rgba(184,147,79,0.08);
}
.avatar-modal-title { text-align: center; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--gold-light); }
.avatar-modal-stage {
  flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #2a2038, #08060d 80%); border: 1px solid rgba(184,147,79,0.3);
}
.avatar-modal-img { display: block; height: min(58vh, 560px); max-width: 100%; width: auto; object-fit: contain; transition: opacity 0.16s ease, transform 0.16s ease; }
.avatar-modal-img.is-switching { opacity: 0; transform: scale(0.97); }
.avatar-modal-pick .avatar-pick-row { gap: 10px; }
.avatar-modal-pick .avatar-pick-btn img { aspect-ratio: 16 / 9; }
.avatar-modal-close { width: 100%; }
@media (max-height: 560px) {
  .avatar-modal-img { height: 40vh; }
}

/* ---------------- 顔アイコン: 丸にせず、元の横長(2:1)のまま角丸の四角で全体を見せる ----------------
   幅は以前のクラスアイコン(丸)の直径と同じにして、高さはその半分（縮小して収める）。 */
.face-icon { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: inherit; }
.equip-dark .member-portrait:has(> .face-icon) { width: 58px; height: 29px; border-radius: 7px; border-width: 2px; }
.equip-dark .party-slot-card .slot-portrait:has(> .face-icon) { width: 68px; height: 34px; border-radius: 8px; border-width: 2px; }
.equip-dark .item-portrait:has(> .face-icon) { width: 44px; height: 22px; border-radius: 6px; border-width: 1px; }
.fm-portrait:has(> .face-icon) { width: 58px; height: 29px; border-radius: 7px; border-width: 2px; }
/* 戦闘画面の味方の顔は例外的に大きく表示する（.party-slot .portraitの本来のサイズをそのまま使う） */
.turn-token:has(> .face-icon) { width: 36px; height: 18px; border-radius: 5px; }
.turn-token.is-current:has(> .face-icon) { width: 50px; height: 25px; }
@media (max-width: 480px) {
  .turn-token:has(> .face-icon) { width: 32px; height: 16px; }
  .turn-token.is-current:has(> .face-icon) { width: 42px; height: 21px; }
}

/* ---------------- 商店: コモン・アンコモンの一括売却 ---------------- */
.shop-sell-bulk:empty { display: none; }
.shop-sell-bulk { margin-bottom: 10px; }
.shop-bulk-sell-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; font-size: 0.92rem;
}
.shop-bulk-sell-sub { font-size: 0.82rem; font-weight: 700; opacity: 0.85; white-space: nowrap; }
.shop-sell-bulk .party-detail { margin-top: 0; }

/* ---------------- 酒場: ポーター ---------------- */
.porter-hire-note { font-size: 0.85rem; color: var(--ink-soft, #c9b99a); margin: 2px 0 10px; line-height: 1.6; }
.porter-pick { cursor: pointer; background: none; border: none; padding: 0; }
.porter-pick:hover .cc-figure img, .porter-pick:focus-visible .cc-figure img { border-color: var(--gold); filter: none; }
.porter-pick:disabled { cursor: not-allowed; opacity: 0.45; }
.porter-pick:disabled .cc-figure img { filter: saturate(0.75) brightness(0.85); }
/* 装備画面と同じ2カラム(左に立ち絵を大きく、右に経験値・インベントリ) - 狭い画面では縦積み。
 * ブレークポイントは.equip-layoutと同じ760pxに合わせている。 */
.porter-layout { display: flex; flex-direction: column; gap: 14px; }
.porter-left { flex: 0 0 auto; }
.porter-right { flex: 1 1 0; min-width: 0; }
.porter-avatar-wrap {
  width: 100%; max-width: 220px; margin: 0 auto 10px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(184,147,79,0.45);
}
.porter-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.porter-name-row { justify-content: center; }
.porter-left .char-name {
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: #f4ecd8;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.porter-left .char-sub { text-align: center; color: var(--gold-light); letter-spacing: 0.06em; font-size: 0.85rem; font-weight: 700; }
.porter-exp-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-soft, #c9b99a); margin-top: 6px; }
@media (min-width: 760px) {
  .porter-layout { flex-direction: row; align-items: flex-start; gap: 24px; }
  .porter-left { flex: 0 0 220px; }
  .porter-avatar-wrap { max-width: 100%; margin-bottom: 10px; }
}
.porter-chance { margin-top: 8px; font-size: 0.9rem; color: var(--gold-light); font-weight: 700; }
/* 経験値バー・保護確率はスクロールしても上に固定して表示する(スクロール元は .equip-card) */
.porter-status {
  position: sticky; top: 0; z-index: 20;
  padding: 10px 0 8px; margin-bottom: 4px;
  background: #120e18; /* 不透明: 下にスクロールする戦利品リストを透かさない */
  border-bottom: 1px solid rgba(184,147,79,0.35);
}.porter-feed-note { font-size: 0.82rem; color: var(--ink-soft, #c9b99a); margin: 10px 0 6px; }
.porter-feed-list .item-card { cursor: pointer; }
.porter-feed-list .item-action small { display: block; font-size: 0.7rem; font-weight: 400; opacity: 0.85; }

/* ---------------- 酒場: 記録 ---------------- */
.records-summary { margin-bottom: 14px; }
.bestiary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.bestiary-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 8px 4px; border-radius: 10px; background: rgba(5,4,9,0.7); border: 1px solid rgba(184,147,79,0.25);
  font-family: inherit; cursor: pointer;
}
.bestiary-card:disabled { cursor: not-allowed; }
.bestiary-card:not(:disabled):hover, .bestiary-card:not(:disabled):focus-visible { border-color: var(--gold); background: rgba(20,15,32,0.9); }
.bestiary-card .bestiary-icon { font-size: 1.5rem; }
.bestiary-card .bestiary-name { font-size: 0.65rem; color: #f4ecd8; line-height: 1.2; }
.bestiary-card .bestiary-count { font-size: 0.6rem; color: var(--gold-light); }
.bestiary-card.is-boss { border-color: rgba(224,43,43,0.5); }
.bestiary-card.is-unknown { opacity: 0.45; cursor: default; }
.bestiary-card.is-unknown .bestiary-icon { filter: grayscale(1); }

/* ---------------- モンスター図鑑: 詳細モーダル ---------------- */
.monster-modal-card { max-width: 400px; }
.monster-modal-stage { flex: 0 0 auto; }
.monster-modal-stage .avatar-modal-img { height: min(30vh, 260px); }
.monster-modal-icon-fallback { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 160px; font-size: 4rem; }
.monster-modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.monster-modal-section-title { font-family: var(--font-display); color: var(--gold-light); font-size: 0.82rem; letter-spacing: 0.08em; margin: 10px 0 6px; }
.monster-modal-section-title:first-child { margin-top: 0; }
.monster-modal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.monster-stat {
  display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 8px;
  background: rgba(0,0,0,0.3); font-size: 0.7rem; color: var(--ink-soft, #c9b99a);
}
.monster-stat b { color: #f4ecd8; font-size: 0.9rem; }
.monster-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.monster-tag {
  font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.35);
  border: 1px solid rgba(184,147,79,0.3); color: #e4d8c4;
}
.monster-tag.is-resist { color: #8fd6a0; border-color: rgba(143,214,160,0.4); }
.monster-tag.is-weak { color: #e07a7a; border-color: rgba(224,122,122,0.4); }
.monster-tag.is-immune { color: #9fc8ff; border-color: rgba(159,200,255,0.4); }
.monster-tag.is-reward { color: var(--gold-light); border-color: rgba(212,181,120,0.5); font-weight: 700; }

/* ---------------- ポーターの救出演出(敗北時) ---------------- */
.porter-rescue {
  position: absolute; inset: 0; z-index: 31; display: flex; align-items: center; justify-content: center;
  pointer-events: none; background: rgba(6,4,12,0.88);
}
.porter-rescue.hidden { display: none; }
.porter-rescue-card {
  width: min(92%, 420px); max-height: 80%; overflow: hidden; display: flex; flex-direction: column;
  background: rgba(20,15,32,0.95); border: 1px solid rgba(184,147,79,0.45); border-radius: 16px; padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.porter-rescue-title { font-family: var(--font-display); color: var(--gold-light); text-align: center; margin-bottom: 10px; font-size: 0.95rem; }
.porter-rescue-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.porter-rescue-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: rgba(0,0,0,0.3); font-size: 0.85rem; animation: porter-rescue-pop 0.3s ease both;
}
.porter-rescue-row .porter-rescue-icon { font-size: 1.2rem; }
.porter-rescue-row .porter-rescue-name { flex: 1 1 0; min-width: 0; color: #f4ecd8; }
.porter-rescue-row .porter-rescue-result { font-weight: 700; white-space: nowrap; }
.porter-rescue-row.is-protected .porter-rescue-result { color: #6fd98c; }
.porter-rescue-row.is-lost { opacity: 0.6; }
.porter-rescue-row.is-lost .porter-rescue-result { color: #e07a7a; }
@keyframes porter-rescue-pop { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } }

/* ---------------- 立ち絵プレビュー(👁️): 枠なし・高さ100%・右上の×だけ ---------------- */
.image-preview {
  position: fixed; inset: 0; z-index: 66; display: flex; align-items: center; justify-content: center;
  background: rgba(4,3,8,0.94); opacity: 0; transition: opacity 0.18s ease;
}
.image-preview.is-open { opacity: 1; }
.image-preview-img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.image-preview-close {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,8,16,0.8); border: 1px solid rgba(184,147,79,0.6); color: var(--gold-light);
  font-size: 1.6rem; line-height: 1;
}
.image-preview-close:active { background: rgba(184,147,79,0.3); transform: scale(0.94); }