/* ============================================================
   DUNGEON TOGETHER — main stylesheet
   Dark-fantasy UI: parchment cards on obsidian, biome-tinted.
   ============================================================ */

:root {
  /* 8-bit type: Press Start 2P for display/labels, VT323 for body/flavor */
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'VT323', monospace;
  --font-mono: 'Press Start 2P', monospace;

  --ink: #ece0c4;
  --ink-dim: #b3a683;
  --ink-faint: rgba(160,143,102,.55);
  --bg-0: #0a0618;
  --bg-1: #140d26;
  --bg-2: #1a1236;
  --panel: linear-gradient(160deg, rgba(34,24,58,.92), rgba(16,10,30,.94));
  --panel-edge: #4a3c2a;

  --gold: #e8b64a;
  --gold-bright: #ffe6a8;
  --blood: #e0564e;
  --hp: #ff3b52;
  --mp: #2e6bff;
  --xp: #9b6cff;
  --sanity: #4fd6c0;
  --luck: #2fd66f;
  --crit: #ffcf4d;

  /* 8-bit accents */
  --teal: #4fd6c0;
  --teal-hi: #8fe6d8;
  --purple: #9b6cff;
  --focus: #ffcf4d;
  --on-gold: #2a1c0b;
  --on-teal: #04121e;

  /* rank ladder (Appraisal + Character Sheet) */
  --rk-F: #9aa0ad; --rk-E: #7fd07f; --rk-D: #5fd6c0; --rk-C: #5ba7ff;
  --rk-B: #a678ff; --rk-A: #ff6bbf; --rk-S: #ffd257; --rk-EX: #ff8a3c; --rk-WRLD: #fff3d6;

  --biome-glow: #3f7d4a; /* overridden per biome */

  --radius: 0px;
  --shadow-card: 0 6px 0 rgba(0,0,0,.5), 0 0 0 2px #4a3c2a;
}

* { margin: 0; padding: 0; box-sizing: border-box; image-rendering: pixelated; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  overflow: hidden;
}

button { font-family: inherit; color: inherit; }

/* ---------- Fixed 1280x720 scale-to-fit stage ---------- */
#viewport {
  position: fixed; inset: 0; z-index: 2; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, var(--bg-2), var(--bg-0) 78%);
}
/* Outside the scaled #frame — overflow+transform clips children that paint past it. */
#title-bleed {
  display: none;
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
  /* Veil stops track the 1280×720 stage so the wings stay forest, not a hard cut. */
  background-image:
    linear-gradient(90deg,
      rgba(8,5,16,.38) 0%,
      rgba(8,5,16,.82) calc(50% - 640px * var(--frame-scale, 1)),
      rgba(8,5,16,.45) calc(50% - 102.4px * var(--frame-scale, 1)),
      rgba(8,5,16,.15) calc(50% + 256px * var(--frame-scale, 1)),
      rgba(8,5,16,.35) calc(50% + 640px * var(--frame-scale, 1)),
      rgba(8,5,16,.28) 100%),
    linear-gradient(180deg, rgba(8,5,16,.2) 0%, transparent 28%, rgba(8,5,16,.55) 72%, rgba(8,5,16,.88) 100%),
    url('../assets/img/bg/title.png');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center 40%;
  background-repeat: no-repeat;
}
#viewport:has(.title-screen) #title-bleed { display: block; }
#viewport:has(.title-screen) #frame {
  background: transparent;
  box-shadow: none;
}
#viewport:has(.title-screen) #vignette { opacity: 0; }
#viewport:has(.title-screen) .title-veil { opacity: 0; }
/* Combat biome art lives outside #frame so it can fill the letterbox
   wings. HUD stays in the scaled 1280×720 stage and does not move. */
#combat-bleed {
  display: none;
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
  background-color: var(--bg-0);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  /* Zoom past the art's black tree pillars so the lit grove reaches
     the monitor edges. Clipped by #viewport overflow. */
  transform: scale(1.32);
  transform-origin: center 42%;
}
#viewport:has(.combat-screen) #combat-bleed.has-bg { display: block; }
#combat-bleed.has-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(10,8,14,.52);
}
#viewport:has(.combat-screen) #frame {
  background: transparent;
  box-shadow: none;
}
#viewport:has(.combat-screen) #vignette { opacity: 0; }
#viewport:has(.combat-screen) .battlefield.cx-bg,
#viewport:has(.combat-screen) .battlefield.has-bg {
  background-image: none !important;
  background-color: transparent;
}
#viewport:has(.combat-screen) .battlefield.has-bg::before { display: none; }
#frame {
  position: relative; width: 1280px; height: 720px; flex: 0 0 auto; z-index: 1;
  overflow: hidden; background: var(--bg-0);
  transform: scale(var(--frame-scale, 1)); transform-origin: center center;
  box-shadow: 0 0 80px rgba(0,0,0,.85);
}

/* ---------- Layers (relative to #frame) ---------- */
#fx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
#vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 45%, rgba(4,3,8,.55) 78%, rgba(2,2,5,.92) 100%);
}
#app {
  position: absolute; inset: 0; z-index: 3; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: #3a3450 transparent;
}
#app:has(.title-screen) { overflow: hidden; }
/* Let summary hover cards poke past the page edges */
#app:has(.climb-summary) { overflow: visible; }
#frame:has(.climb-summary) { overflow: visible; }
body::before { /* biome atmosphere */
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, color-mix(in srgb, var(--biome-glow) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 70%);
  transition: background 1.2s ease;
}

/* ---------- Shared bits ---------- */
.screen {
  width: min(1060px, 96vw);
  padding: 28px 18px 60px;
  animation: screen-in .45s cubic-bezier(.2,.9,.3,1);
}
@keyframes screen-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* floor chrome is persistent-feeling — don't replay the entry fade each floor,
   it reads as a loading delay. The stage content brings its own quick transition. */
.screen.chrome { animation: none; padding-top: 0; }
.tm-root { animation: tm-in .22s ease both; }
@keyframes tm-in { from { opacity: 0; } to { opacity: 1; } }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: .04em; }

.btn {
  cursor: pointer; border: 2px solid var(--panel-edge);
  background: rgba(28,20,48,.72);
  color: var(--ink); border-radius: 0;
  font-family: var(--font-display); font-weight: 400; font-size: 11px;
  padding: 13px 20px; letter-spacing: .04em; line-height: 1.4;
  transition: filter .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s;
  text-transform: uppercase;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.2);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(232,182,74,.35);
}
.btn:active:not(:disabled) { filter: brightness(.95); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: #6a5528; color: var(--on-gold);
  text-shadow: none;
}
.btn.primary:hover:not(:disabled) { box-shadow: 0 0 20px rgba(232,182,74,.55); }
.btn.danger { background: linear-gradient(180deg, #ff8a7a, var(--blood)); border-color: #7c3530; color: #2a0c0a; }
.btn.teal { background: linear-gradient(180deg, var(--teal-hi), var(--teal)); border-color: #2a6a60; color: var(--on-teal); }
.btn.ghost { background: transparent; }
.btn.danger {
  background: transparent;
  border-color: #c44a4a;
  color: #ff8a8a;
}
.btn.danger:hover:not(:disabled) {
  background: rgba(196, 74, 74, .18);
  box-shadow: 0 0 16px rgba(196, 74, 74, .35);
}
.btn.small { padding: 8px 13px; font-size: 9px; }

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-radius: 0;
  box-shadow: var(--shadow-card);
}

.divider {
  height: 1px; margin: 14px 0;
  background: linear-gradient(90deg, transparent, var(--panel-edge) 20%, var(--panel-edge) 80%, transparent);
}

.tag {
  display: inline-block; padding: 4px 9px; border-radius: 0;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--panel-edge); color: var(--ink-dim);
}

/* ---------- Toasts ---------- */
#toast-layer { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  padding: 11px 18px; border-radius: 0; font-family: var(--font-display); font-size: 10px; line-height: 1.5;
  background: rgba(18,15,26,.95); border: 2px solid var(--gold); color: var(--gold-bright);
  box-shadow: 0 4px 0 rgba(0,0,0,.5); animation: toast-in .3s ease, toast-out .4s ease 2.6s forwards;
}
.toast.bad { border-color: var(--blood); color: #f0a8a0; }
.toast.info { border-color: var(--mp); color: #a8ccf0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }

/* ============================================================
   TITLE SCREEN — locked to the 1280×720 frame (no scroll)
   ============================================================ */
.title-screen {
  position: absolute; inset: 0; width: 100% !important; max-width: none;
  height: 100%; min-height: 0 !important; margin: 0; padding: 0 !important;
  overflow: hidden; text-align: left;
  display: grid;
  grid-template-columns: 1fr minmax(250px, 310px);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "hero stack"
    "meta meta";
  align-items: end;
  gap: 0;
  animation: title-in .45s cubic-bezier(.2,.9,.3,1);
}
@keyframes title-in { from { opacity: 0; } to { opacity: 1; } }
.title-vista {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  image-rendering: pixelated; border: none; border-radius: 0;
  box-shadow: none; margin: 0; z-index: 0; pointer-events: none;
}
/* Full-window bleed is the visible forest; keep this img for fallback only. */
#viewport:has(.title-screen) .title-vista:not(.title-vista-fallback) { opacity: 0; }
.title-vista-fallback {
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 35%, #2a2040, var(--bg-0) 70%);
}
.title-tower {
  font-size: 96px; filter: drop-shadow(0 0 30px rgba(217,165,63,.35));
  animation: tower-float 5s ease-in-out infinite;
}
@keyframes tower-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.title-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,5,16,.82) 0%, rgba(8,5,16,.45) 42%, rgba(8,5,16,.15) 70%, rgba(8,5,16,.35) 100%),
    linear-gradient(180deg, rgba(8,5,16,.2) 0%, transparent 28%, rgba(8,5,16,.55) 72%, rgba(8,5,16,.92) 100%);
}
.title-hero {
  grid-area: hero; position: relative; z-index: 2;
  padding: 0 28px 28px 48px; max-width: 720px;
  align-self: end;
}
.game-title {
  font-size: 52px; font-weight: 900; line-height: 1.12; letter-spacing: 4px;
  background: linear-gradient(180deg, #ffe9b0 15%, var(--gold) 55%, #8a5f1c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.55));
  margin: 0 0 10px;
}
.game-subtitle {
  color: var(--ink-dim); font-style: italic; font-size: 18px;
  margin: 0; max-width: 420px; line-height: 1.35;
}
.title-corner-tools {
  position: absolute; top: 14px; right: 18px; z-index: 3;
  display: flex; gap: 8px; justify-content: flex-end;
}
.title-corner-tools .btn { text-decoration: none; }
.title-stack {
  grid-area: stack; position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 40px 22px 12px; align-self: end; width: 100%; box-sizing: border-box;
}
.title-actions { display: flex; flex-direction: column; gap: 10px; }
.title-actions .btn { width: 100%; font-size: 13px; padding: 14px 16px; text-align: center; }
.title-rail { display: flex; flex-direction: column; gap: 6px; }
.title-rail .btn { width: 100%; justify-content: center; }
.title-audio {
  display: flex; flex-direction: column; gap: 6px; margin-top: 2px;
  padding: 8px 10px; border: 1px solid var(--panel-edge);
  background: rgba(10,6,18,.55);
}
.title-vol { margin: 0; justify-content: space-between; gap: 8px; }
.title-vol .vol-slider { width: 100%; flex: 1; min-width: 0; }
.title-meta {
  grid-area: meta; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 40px 16px 48px;
  border-top: 1px solid rgba(232,182,74,.22);
  background: rgba(6,4,12,.72);
}
.title-footer {
  margin: 0; color: var(--ink-faint); font-family: var(--font-mono);
  font-size: 8px; letter-spacing: .08em; text-align: right;
}
.title-stats {
  display: flex; gap: 18px; margin: 0; color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 10px;
}
.title-stats b { color: var(--gold); }

/* ============================================================
   CLASS SELECT
   ============================================================ */
.select-header { text-align: center; margin-bottom: 24px; }
.select-header h2 { font-size: 34px; color: var(--gold-bright); }
.select-header p { color: var(--ink-dim); font-style: italic; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.class-card {
  padding: 22px 18px; text-align: center; cursor: pointer; position: relative;
  transition: transform .18s ease, border-color .2s, box-shadow .25s;
}
.class-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent, var(--gold)) 65%, transparent); }
.class-card.selected {
  border-color: var(--accent, var(--gold));
  box-shadow: 0 0 0 1px var(--accent, var(--gold)), 0 14px 44px color-mix(in srgb, var(--accent, var(--gold)) 22%, transparent);
  transform: translateY(-5px);
}
.class-icon { width: 74px; height: 74px; margin: 0 auto 10px; color: var(--accent, var(--gold)); filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--accent, var(--gold)) 45%, transparent)); }
.class-icon svg { width: 100%; height: 100%; }
.class-card h3 { font-size: 21px; margin-bottom: 4px; color: var(--ink); }
.class-card .class-epithet { color: var(--ink-dim); font-style: italic; font-size: 14px; min-height: 38px; }
.class-card .class-evo { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 10px; letter-spacing: .04em; }

.roll-panel { padding: 22px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
.roll-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.roll-stat { text-align: center; min-width: 76px; padding: 10px 8px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); }
.roll-stat .rs-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-faint); }
.roll-stat .rs-value { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); }
.roll-stat.high .rs-value { color: var(--gold-bright); text-shadow: 0 0 14px rgba(255,216,115,.5); }
.roll-stat.rolling .rs-value { animation: stat-roll .08s linear infinite; }
@keyframes stat-roll { 50% { opacity: .3; } }
.roll-actions { display: flex; gap: 10px; align-items: center; }
.name-input {
  background: rgba(0,0,0,.35); border: 1px solid var(--panel-edge); border-radius: 10px;
  color: var(--ink); font-family: var(--font-display); font-size: 16px; padding: 12px 16px; width: 240px; letter-spacing: .04em;
}
.name-input:focus { outline: none; border-color: var(--gold); }

/* ============================================================
   RUN HUD
   ============================================================ */
.hud {
  position: sticky; top: 0; z-index: 10; width: 100%;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 20px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.hud-identity { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.hud-portrait {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--accent, var(--gold)); background: radial-gradient(circle at 35% 30%, #2c2740, #16131f);
  color: var(--accent, var(--gold));
}
.hud-portrait svg { width: 30px; height: 30px; }
.hud-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.1; }
.hud-class { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); letter-spacing: .06em; }
.hud-bars { flex: 1; min-width: 260px; display: grid; gap: 5px; }
.bar { position: relative; height: 14px; border-radius: 0; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.bar-fill { position: absolute; inset: 0; border-radius: 0; transition: width .4s steps(12); }
.bar-fill.hp { background: linear-gradient(90deg, #ff3b52, #ff7a5a); }
.bar-fill.mp { background: linear-gradient(90deg, #2e6bff, #7fbfff); }
.bar-fill.sanity { background: linear-gradient(90deg, #2a9e8e, var(--sanity)); }
.bar-fill.xp { background: linear-gradient(90deg, #5b3a8c, var(--xp)); }
.bar-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; font-family: var(--font-mono); font-size: 8px; font-weight: 400; letter-spacing: .02em;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.8); z-index: 1;
}
.hud-meta { display: flex; gap: 16px; align-items: center; font-family: var(--font-mono); font-size: 13px; }
.hud-chip { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); }
.hud-chip b { color: var(--gold-bright); font-size: 15px; }
.hud-buttons { display: flex; gap: 8px; align-items: flex-start; }

/* Partner strip (co-op) */
.partner-strip {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 9px 16px; margin-bottom: 12px;
}
.partner-chip { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.partner-chip .pc-name { font-family: var(--font-display); font-weight: 600; }
.partner-chip .pc-act { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.partner-chip.downed { opacity: .5; }
.partner-chip.downed .pc-act { color: var(--blood); }

/* Floor progress strip */
.floor-strip { display: flex; align-items: center; gap: 4px; margin: 0 0 18px; padding: 10px 16px; overflow-x: auto; }
.floor-node {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: #2c2838; border: 1px solid #443e58; position: relative;
}
.floor-node.done { background: var(--biome-glow); border-color: color-mix(in srgb, var(--biome-glow) 70%, white); }
.floor-node.current { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 12px var(--gold); animation: pulse-node 1.6s ease-in-out infinite; }
.floor-node.boss { width: 17px; height: 17px; border-radius: 4px; transform: rotate(45deg); }
@keyframes pulse-node { 50% { box-shadow: 0 0 20px var(--gold-bright); } }
.floor-strip .biome-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 0 10px 0 4px; white-space: nowrap; }

/* ============================================================
   EVENT CARD
   ============================================================ */
.card-stage { display: flex; justify-content: center; perspective: 1400px; }
.event-card {
  width: min(680px, 94vw);
  border-radius: 18px; overflow: hidden;
  animation: card-deal .65s cubic-bezier(.2,.9,.25,1.05);
  transform-style: preserve-3d;
}
@keyframes card-deal {
  0% { opacity: 0; transform: translateY(60px) rotateX(28deg) scale(.92); }
  100% { opacity: 1; transform: none; }
}
.card-art {
  height: 190px; position: relative; display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--biome-glow) 45%, transparent), transparent 70%),
    linear-gradient(180deg, #221e30, #141120);
  border-bottom: 1px solid var(--panel-edge);
}
.card-art .card-glyph {
  font-size: 84px; display: grid; place-items: center; position: relative;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.7)) drop-shadow(0 0 30px color-mix(in srgb, var(--biome-glow) 55%, transparent));
  animation: glyph-idle 4s ease-in-out infinite;
}
@keyframes glyph-idle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.card-type-tag { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; }
.card-floor-tag {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(12,8,22,.72); padding: 2px 14px;
  border-top: 1px solid rgba(232,182,74,.25); border-bottom: 1px solid rgba(232,182,74,.25);
}
.card-body { padding: 22px 26px 26px; }
.card-body h3 { font-size: 26px; color: var(--gold-bright); margin-bottom: 8px; }
.card-body .card-text { color: var(--ink); font-size: 17.5px; line-height: 1.55; margin-bottom: 20px; white-space: pre-line; }
.card-choices { display: grid; gap: 10px; }
.choice-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left;
  padding: 13px 18px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--panel-edge);
  font-family: var(--font-body); font-size: 16.5px; color: var(--ink);
  transition: border-color .15s, background .15s, transform .12s;
}
.choice-btn:hover:not(:disabled) { border-color: var(--gold); background: rgba(217,165,63,.08); transform: translateX(4px); }
.choice-btn:disabled { opacity: .42; cursor: not-allowed; }
.choice-btn .choice-label { font-weight: 600; }
.choice-btn .choice-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; }
.choice-btn .choice-req { color: var(--crit); }
.choice-btn.locked .choice-req { color: var(--blood); }
html.hide-choice-hints .choice-hint:not(.choice-hint-keep) { display: none; }

.card-outcome { margin-top: 6px; animation: screen-in .35s ease; }
.outcome-lines { margin: 12px 0 18px; display: grid; gap: 6px; }
.outcome-line { font-family: var(--font-mono); font-size: 13.5px; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.04); border-left: 3px solid var(--ink-faint); }
.outcome-line.good { border-left-color: var(--luck); color: #c9f0b8; }
.outcome-line.bad { border-left-color: var(--blood); color: #f0b8b0; }
.outcome-line.gold { border-left-color: var(--gold); color: var(--gold-bright); }
.outcome-line.item { border-left-color: var(--xp); color: #d8c4f0; }

/* ============================================================
   COMBAT
   ============================================================ */
.combat-screen { display: flex; flex-direction: column; gap: 16px; }
.battlefield {
  min-height: 300px; padding: 26px 22px 18px; position: relative;
  display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 24px;
  background:
    radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--biome-glow) 18%, transparent), transparent 60%),
    var(--panel);
  border-radius: var(--radius); border: 1px solid var(--panel-edge); box-shadow: var(--shadow-card);
}
.enemy-row { flex: 1; display: flex; justify-content: center; align-items: center; gap: 26px; flex-wrap: wrap; }
.combatant { text-align: center; position: relative; transition: opacity .5s, filter .5s, transform .5s; }
.combatant.dead { opacity: .18; filter: grayscale(1); pointer-events: none; }
.combatant.dying {
  pointer-events: none; animation: combatant-die .58s ease forwards;
}
@keyframes combatant-die {
  0% { opacity: 1; transform: none; filter: none; }
  35% { opacity: 1; transform: translateY(4px) scale(1.04); filter: brightness(1.8) saturate(0.2); }
  100% { opacity: 0; transform: translateY(28px) scale(0.55); filter: grayscale(1) brightness(0.6); }
}
.combatant.summon-in {
  animation: combatant-summon .55s ease both;
}
@keyframes combatant-summon {
  0% { opacity: 0; transform: translateY(22px) scale(0.55); filter: brightness(1.6); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.06); filter: brightness(1.2); }
  100% { opacity: 1; transform: none; filter: none; }
}
.combatant.targetable { cursor: pointer; }
.combatant.targetable:hover .fighter-sprite, .combatant.target .fighter-sprite { outline: 2px solid var(--crit); outline-offset: 4px; }
.fighter-sprite {
  width: 96px; height: 96px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 8px;
  background: radial-gradient(circle at 40% 30%, #2e2942, #171322);
  border: 1px solid var(--panel-edge); font-size: 52px; position: relative;
  transition: transform .12s;
}
.combatant.elite .fighter-sprite { border-color: var(--xp); box-shadow: 0 0 22px rgba(155,109,214,.35); }
.combatant.boss .fighter-sprite {
  width: 200px; height: 200px; font-size: 96px;
  border-color: var(--blood); box-shadow: 0 0 34px rgba(184,53,47,.4);
  overflow: hidden; place-items: end center;
}
.fighter-sprite.hit { animation: sprite-hit .35s ease; }
@keyframes sprite-hit { 20% { transform: translateX(-7px); filter: brightness(2) saturate(0); } 50% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
.fighter-sprite.attack { animation: sprite-attack .4s ease; }
@keyframes sprite-attack { 30% { transform: translateY(14px) scale(1.08); } }
.fighter-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.fighter-hp { width: 110px; margin: 5px auto 0; }
.fighter-hp .bar { height: 9px; }
.fighter-statuses { display: flex; gap: 3px; justify-content: center; margin-top: 4px; min-height: 18px; font-size: 12px; }
.status-pip { padding: 0 5px; border-radius: 4px; background: rgba(0,0,0,.4); border: 1px solid var(--panel-edge); font-family: var(--font-mono); font-size: 10px; }

.player-row {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center;
  padding-left: 20px; border-left: 1px solid var(--panel-edge);
}
.player-row .fighter-sprite { background: radial-gradient(circle at 40% 30%, #33304a, #1a1726); border-color: var(--accent, var(--gold)); color: var(--accent, var(--gold)); }
.player-row .fighter-sprite svg { width: 54px; height: 54px; }
.combatant.acting .fighter-sprite { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(217,165,63,.35); }
.combatant.downed { opacity: .35; filter: grayscale(.8); }
.ally-hp { width: 100px; margin: 5px auto 0; }
.ally-hp .bar { height: 8px; }

.float-text {
  position: absolute; left: 0; top: 0; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 900; font-size: 28px; pointer-events: none; z-index: 5;
  animation: float-up 1.15s ease-out forwards; text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.55); white-space: nowrap;
}
.float-text.dmg { color: #ff8a7a; }
.float-text.incoming {
  color: #ffb0a4; font-size: 32px; z-index: 6;
  text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 12px rgba(184,53,47,.55);
}
.float-text.crit {
  color: var(--crit); font-size: 40px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  animation: float-crit 1.55s cubic-bezier(.2,1.4,.3,1) forwards;
  text-shadow:
    0 0 6px rgba(255,207,77,.95),
    0 0 18px rgba(255,160,40,.7),
    0 3px 0 #6a3a00,
    0 2px 8px rgba(0,0,0,.95);
  filter: drop-shadow(0 0 10px rgba(255,207,77,.55));
}
.float-text.crit .float-crit-tag {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .18em;
  color: #fff6c8; line-height: 1;
  text-shadow: 0 1px 0 #6a3a00, 0 0 8px rgba(255,207,77,.9);
  animation: crit-tag-pop .55s ease-out both;
}
.float-text.crit .float-crit-num { line-height: 1; }
.float-text.heal { color: var(--luck); }
.float-text.miss { color: var(--ink-dim); font-size: 20px; }
.float-text.mana { color: #8ab8f0; }
@keyframes float-up { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -52px) scale(1); } }
@keyframes float-crit {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.35) rotate(-8deg); }
  14% { opacity: 1; transform: translate(-50%, -2px) scale(1.45) rotate(3deg); }
  28% { transform: translate(-50%, -6px) scale(1.15) rotate(-2deg); }
  42% { transform: translate(-50%, -10px) scale(1.28) rotate(1deg); }
  70% { opacity: 1; transform: translate(-50%, -36px) scale(1.1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(1) rotate(0deg); }
}
@keyframes crit-tag-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.6); }
  40% { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.combat-log {
  height: 92px; overflow-y: auto; padding: 10px 16px; font-family: var(--font-mono); font-size: 12.5px;
  display: flex; flex-direction: column; gap: 3px; color: var(--ink-dim);
  scrollbar-width: none;
}
.combat-log::-webkit-scrollbar { width: 0; height: 0; display: none; }
.combat-log .log-hit { color: #f0c0b8; }
.combat-log .log-good { color: #b8e8a8; } /* legacy — prefer log-ally */
.combat-log .log-ally { color: #9fd4ff; } /* you / companions: attacks, buffs, debuffs */
.combat-log .log-foe { color: #f0a090; }  /* enemies: attacks, specials, their buffs */
.combat-log .log-sys { color: var(--gold); } /* voicelines / lore / flavor */

.accessory-compare .accessory-worn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.accessory-compare .accessory-worn .gear-card {
  padding: 8px 10px;
  border: 1px solid rgba(232, 182, 74, 0.25);
  pointer-events: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.accessory-slot-pick {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid rgba(232, 182, 74, 0.35);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.accessory-slot-pick:hover,
.accessory-slot-pick:focus-visible {
  border-color: var(--gold-bright);
  outline: none;
  background: rgba(232, 182, 74, 0.10);
  box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(232, 182, 74, 0.35);
}
.accessory-slot-pick:hover .gear-card,
.accessory-slot-pick:focus-visible .gear-card {
  border-color: var(--gold-bright);
}
.accessory-compare .accessory-worn .gc-label { font-size: 10px; }
.accessory-compare .accessory-worn .gc-name { font-size: 13px; }
.inv-item.empty-skill-slot { opacity: 0.75; border-style: dashed; }

.modal.sheet-modal { position: relative; padding-top: 20px; }
.sheet-close-x {
  position: sticky;
  top: 8px;
  float: right;
  z-index: 6;
  width: 36px;
  height: 36px;
  margin: 0 0 8px 12px;
  border: 1px solid var(--gold);
  background: rgba(20, 13, 38, 0.95);
  color: var(--gold-bright);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sheet-close-x:hover { filter: brightness(1.15); }

.summary-rank-badge {
  display: inline-block;
  margin: 4px auto 12px;
  padding: 10px 22px;
  border: 2px solid var(--gold);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.08em;
  background: rgba(20, 13, 38, 0.65);
}
.summary-rank-badge span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* Climb summary — 2-page fixed chrome (header / body / footer) */
.climb-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1180px, 96%);
  height: min(720px, 92vh);
  max-height: 92vh;
  padding: 0;
  text-align: left;
  overflow: visible;
}
.cs-back {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 5;
}
.climb-summary.from-history { padding-top: 36px; }
.cs-log-blurb {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
}
.cs-log-count {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.cs-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(480px, 58vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
}
.cs-log-entry {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--panel-edge);
  background: rgba(255, 255, 255, 0.02);
}
.cs-log-f {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-bright);
  padding-top: 2px;
}
.cs-log-kind {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #9fd4ff;
  margin-bottom: 3px;
}
.cs-log-title { font-size: 14px; color: var(--ink); line-height: 1.35; }
.cs-log-title.good { color: #8fd97a; }
.cs-log-title.bad { color: var(--blood); }
.cs-log-meta { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.cs-log-power { font-size: 12px; color: var(--ink-dim); margin-top: 4px; font-variant-numeric: tabular-nums; }
.cs-log-power.good { color: #8fd97a; }
.cs-log-power.bad { color: #f0a090; }
.cs-log-lines { margin-top: 6px; display: grid; gap: 3px; }
.cs-log-line { font-size: 13px; color: var(--ink-dim); line-height: 1.35; }
.cs-log-line.good { color: #8fd97a; }
.cs-log-line.bad { color: #f0a090; }
.cs-log-line.gold { color: var(--gold-bright); }
.cs-log-line.item { color: #c08af0; }
.cs-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--panel-edge);
  flex-shrink: 0;
}
.cs-h-left { justify-self: start; min-width: 0; }
.cs-h-right { display: flex; justify-content: flex-end; justify-self: end; min-width: 0; }
.cs-h-right .summary-rank-badge {
  margin: 0;
  font-size: 22px;
  padding: 8px 16px;
}
.cs-class {
  font-family: var(--font-display);
  font-size: 13px;
  color: #9fd4ff;
  letter-spacing: 0.06em;
}
.cs-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
.cs-h-center { text-align: center; justify-self: center; }
.cs-banner {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--gold-bright);
}
.cs-banner.victory {
  background: linear-gradient(180deg, #ffe9b0, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs-banner.defeat { color: var(--blood); }
.cs-hero {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
  font-style: italic;
}
.cs-hero .climber-name {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}
.cs-hero-race { color: var(--ink-dim); font-style: italic; }
.cs-sub { font-size: 12px; color: var(--ink-dim); margin-top: 5px; letter-spacing: 0.04em; }

.cs-body {
  flex: 1;
  min-height: 0;
  overflow: visible;
  padding: 16px 28px 8px;
}
.cs-page { height: 100%; overflow: visible; display: flex; flex-direction: column; }
.cs-page[hidden] { display: none !important; }
#cs-page-2,
#cs-page-3 { overflow: visible; }
.cs-overview {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 28px;
  height: 100%;
  min-height: 0;
  overflow: visible;
}
.cs-col-left, .cs-col-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: visible;
}
.cs-col-right { overflow-y: auto; overflow-x: visible; scrollbar-width: thin; }
.cs-h4 {
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin: 4px 0 2px;
}
.cs-stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}
.cs-stat-row b {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-bright);
  margin-bottom: 2px;
}
.cs-tech-row { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 6; }
.cs-tech-chip {
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--ink);
  background: rgba(255,255,255,.03);
}
/* Mini hover card (map-node expander vibe) for techniques / relics */
.cs-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  outline: none;
}
.cs-tip:hover,
.cs-tip:focus-visible {
  border-color: var(--gold);
  z-index: 8;
}
.cs-tip-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 260px;
  padding: 10px 12px 12px;
  text-align: left;
  border: 2px solid var(--gold);
  background: linear-gradient(165deg, rgba(34, 24, 58, .98), rgba(16, 10, 30, .99));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6), 0 0 22px rgba(232, 182, 74, .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px) scale(.96);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .2, 1), visibility .16s;
  z-index: 30;
}
.cs-tip:hover .cs-tip-card,
.cs-tip:focus-visible .cs-tip-card,
.cs-tip:focus-within .cs-tip-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
.cs-tip-name {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  line-height: 1.3;
}
.cs-tip-desc {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-dim);
}
.climb-summary .relic-chip.cs-tip { cursor: help; }
.climb-summary .relic-row { position: relative; z-index: 6; overflow: visible; }
.cs-combat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
}
.cs-combat-row b {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 2px;
  color: var(--ink);
}
.cs-stat.dealt b { color: var(--gold-bright); }
.cs-stat.taken b { color: var(--blood); }
.cs-stat.healed b { color: #8fd97a; }
.cs-stat.slain b { color: #c08af0; }
.cs-meta-line { font-size: 13px; color: var(--ink-dim); line-height: 1.55; }
.cs-boss-list { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink); }
.cs-boss { display: flex; gap: 8px; align-items: baseline; }
.cs-boss-f { color: var(--gold-bright); font-family: var(--font-mono); font-size: 12px; min-width: 28px; }
.cs-boss-dot { color: var(--ink-faint); }
.cs-power-wrap {
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  background: rgba(159,212,255,.03);
  padding: 4px 6px 2px;
  flex: 1;
  min-height: 100px;
}
.cs-muted { color: var(--ink-faint); font-size: 13px; }

.cs-gear-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
  max-height: min(420px, 48vh);
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: thin;
}
.cs-gear-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid var(--panel-edge);
  background: rgba(255,255,255,.03);
}
.cs-gear-card .item-name { font-family: var(--font-display); font-size: 11px; line-height: 1.35; }
.cs-gear-card .item-desc { font-size: 12px; color: var(--ink-dim); margin-top: 4px; line-height: 1.4; }
.cs-slot-tag {
  align-self: flex-start;
  border: 1px solid var(--panel-edge);
  border-radius: 2px;
  padding: 3px 7px;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.cs-shard-note {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--xp);
}
.cs-shard-note b { color: #d8c4f0; }

.cs-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 28px 18px;
  border-top: 1px solid var(--panel-edge);
  flex-shrink: 0;
}
.cs-f-left { justify-self: start; }
.cs-f-right { justify-self: end; }
.cs-pager { display: flex; gap: 8px; align-items: center; }
.cs-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(159,212,255,.25);
  cursor: pointer;
}
.cs-dot.active { background: var(--gold); box-shadow: 0 0 8px rgba(232,182,74,.45); }

.power-graph, .stat-pentagon { display: block; margin: 0 auto; max-width: 100%; }
.stat-pentagon { flex-shrink: 0; }

@media (max-width: 820px) {
  .climb-summary { height: auto; max-height: 94vh; }
  .cs-overview { grid-template-columns: 1fr; overflow-y: auto; }
  .cs-gear-grid { grid-template-columns: 1fr; }
  .cs-header { flex-wrap: wrap; }
  .cs-h-left, .cs-h-right { min-width: 0; }
}

.action-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.skill-btn {
  position: relative; padding: 12px 14px; border-radius: 11px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #262138, #191525); border: 1px solid var(--panel-edge);
  transition: transform .12s, border-color .15s, box-shadow .2s;
}
.skill-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent, var(--gold)); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.skill-btn:disabled { opacity: .4; cursor: not-allowed; }
.skill-btn .sk-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.skill-btn .sk-cost { font-family: var(--font-mono); font-size: 11px; color: var(--mp); }
.skill-btn .sk-desc { font-size: 13px; color: var(--ink-dim); margin-top: 3px; line-height: 1.35; }
.combat-utility { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.modifier-banner {
  text-align: center; padding: 9px 16px; border-radius: 10px; margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--crit) 45%, transparent); background: rgba(255,179,71,.07);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--crit); letter-spacing: .04em;
}

/* ============================================================
   MODALS (level-up, inventory, etc.)
   ============================================================ */
.modal-backdrop {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(4,2,10,.84);
  animation: fade-in .25s ease both; padding: 20px; overflow-y: auto;
}
@keyframes fade-in { from { opacity: 0; } }
.modal { width: min(680px, 94%); padding: 24px 28px; max-height: 90%; overflow-y: auto; scrollbar-width: thin;
  border: 2px solid var(--gold); box-shadow: 0 0 40px rgba(232,182,74,.35); }
.modal h3 { font-size: 15px; line-height: 1.5; color: var(--gold-bright); margin-bottom: 10px; }
.modal .modal-sub { color: var(--ink-dim); font-style: italic; margin-bottom: 16px; font-size: 18px; }

.levelup-burst { text-align: center; font-size: 46px; animation: glyph-idle 2s ease-in-out infinite; }
.statgain-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 12px 0; }
.statgain { font-family: var(--font-mono); font-size: 13px; padding: 5px 12px; border-radius: 8px; background: rgba(127,217,90,.1); border: 1px solid rgba(127,217,90,.3); color: #c9f0b8; }

/* Equipment comparison cards */
.gear-compare { display: flex; gap: 12px; align-items: stretch; margin: 6px 0 18px; }
.gear-card {
  flex: 1; padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid var(--panel-edge);
}
.gear-card.found {
  border-color: rgba(232, 182, 74, .65);
  box-shadow: 0 0 0 1px rgba(232,182,74,.25), 0 0 22px rgba(232,182,74,.28), inset 0 0 18px rgba(232,182,74,.06);
  background: linear-gradient(160deg, rgba(60,42,18,.35), rgba(255,255,255,.035));
}
.gear-card.found .gc-label { color: var(--gold-bright); letter-spacing: .16em; }
.gear-card.empty { display: flex; flex-direction: column; justify-content: center; }
.gear-card .gc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 6px; }
.gear-card .gc-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.gear-card .gc-rarity { margin-bottom: 8px; }
.gear-card .gc-desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.4; }
.gear-card .gc-warn { margin-top: 8px; font-size: 12.5px; color: #f0a8a0; }
.gear-vs { align-self: center; font-family: var(--font-display); color: var(--ink-faint); font-size: 13px; }
@media (max-width: 560px) { .gear-compare { flex-direction: column; } .gear-vs { align-self: center; } }
.pick-grid { display: grid; gap: 10px; }
.pick-option {
  text-align: left; padding: 14px 16px; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.035); border: 1px solid var(--panel-edge);
  transition: border-color .15s, transform .12s;
  display: flex; flex-direction: column; gap: 8px;
}
.pick-option:hover { border-color: var(--gold); transform: translateX(4px); }
.pick-option:disabled,
.pick-option[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  border-color: var(--line);
}
.pick-option:disabled:hover,
.pick-option[aria-disabled="true"]:hover {
  border-color: var(--line);
  transform: none;
  background: rgba(255,255,255,.035);
  box-shadow: none;
}
/* Loot modal action hovers */
.loot-actions .pick-option.loot-equip:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: #6dba7c;
  background: rgba(109, 186, 124, 0.12);
  box-shadow: 0 0 0 1px rgba(109, 186, 124, 0.45);
}
.loot-actions .pick-option.loot-stash:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: #8aa4d8;
  background: rgba(138, 164, 216, 0.12);
  box-shadow: 0 0 0 1px rgba(138, 164, 216, 0.45);
}
.loot-actions .pick-option.loot-sell:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: #d07070;
  background: rgba(208, 112, 112, 0.12);
  box-shadow: 0 0 0 1px rgba(208, 112, 112, 0.45);
}
.pick-option .po-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.pick-option .po-desc { font-size: 14px; color: var(--ink-dim); margin-top: 2px; line-height: 1.4; }
.pick-option .po-tag { float: right; margin-left: 8px; }
.pick-option .po-cost {
  font-family: var(--font-mono); font-size: 12px; color: #8ec8ff; margin-top: 2px;
}
.pick-option .po-skill-grant {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08);
  text-align: left;
}
.pick-option .po-skill-label {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .06em;
  color: var(--gold-bright); margin-bottom: 3px;
}

/* Inventory / character sheet */
.modal.sheet-modal { width: min(960px, 96%); }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .sheet-grid { grid-template-columns: 1fr; } }
.sheet-section h4 { font-family: var(--font-display); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.stat-table { width: 100%; font-family: var(--font-mono); font-size: 13.5px; border-collapse: collapse; }
.stat-table td { padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.stat-table td:last-child { text-align: right; color: var(--gold-bright); font-weight: 600; }
.inv-item { display: flex; justify-content: flex-start; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); margin-bottom: 6px; font-size: 14.5px; text-align: left; }
.inv-item > .px-icon { flex-shrink: 0; }
.inv-item > div:not(.inv-actions) { flex: 1; min-width: 0; text-align: left; }
.inv-item .item-name { font-weight: 600; }
.inv-item .item-desc { font-size: 12.5px; color: var(--ink-dim); }
.inv-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.inv-item > .btn { margin-left: auto; flex-shrink: 0; }
.tag.slot-tag {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 1.5;
  padding: 5px 10px;
  text-align: center;
}
.rarity-common { color: var(--ink); }
.rarity-uncommon { color: #8fd97a; }
.rarity-rare { color: #6fa8f0; }
.rarity-epic { color: #c08af0; }
.rarity-legendary { color: var(--gold-bright); text-shadow: 0 0 10px rgba(255,216,115,.4); }

/* Achievement name cosmetics */
.climber-title {
  font-family: var(--font-display);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: .06em;
  font-style: italic;
  color: var(--ink-dim);
  margin-right: 4px;
}
/* Title auras — color keyed to what the epithet means */
.climber-title.ts-forest {
  color: #7dce6a;
  text-shadow: 0 0 8px rgba(90, 180, 70, .55), 0 0 18px rgba(40, 100, 40, .35);
}
.climber-title.ts-ash {
  color: #d0b090;
  text-shadow: 0 0 8px rgba(180, 90, 40, .45), 0 0 14px rgba(80, 70, 60, .4);
}
.climber-title.ts-royal {
  color: #c9a0ff;
  text-shadow: 0 0 8px rgba(160, 90, 220, .55), 0 0 16px rgba(255, 200, 100, .25);
}
.climber-title.ts-frost {
  color: #b8e4ff;
  text-shadow: 0 0 8px rgba(140, 200, 255, .65), 0 0 18px rgba(80, 160, 255, .35);
}
.climber-title.ts-grief {
  color: #9ad0c8;
  text-shadow: 0 0 8px rgba(80, 160, 150, .5), 0 0 16px rgba(120, 60, 160, .3);
}
.climber-title.ts-hell {
  color: #ff7a4a;
  text-shadow: 0 0 8px rgba(255, 80, 40, .6), 0 0 18px rgba(180, 30, 20, .4);
}
.climber-title.ts-throne {
  color: #ffe08a;
  text-shadow: 0 0 10px rgba(255, 210, 80, .7), 0 0 22px rgba(255, 120, 40, .35);
}
.climber-title.ts-escape {
  color: #7ed8c8;
  text-shadow: 0 0 8px rgba(80, 200, 180, .5), 0 0 16px rgba(60, 100, 160, .3);
}
.climber-title.ts-void {
  background: linear-gradient(90deg, #fff6c8, #ffe08a, #ff9ec8, #a8e0ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wrld-shimmer 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 200, 120, .45));
}
.climber-title.ts-unique {
  background: linear-gradient(90deg, #7ef0e0, #ffe9a8, #c9a8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(126, 240, 224, .45));
}
.climber-title.ts-mimic {
  color: #e8a070;
  text-shadow: 0 0 8px rgba(200, 80, 40, .5), 0 0 14px rgba(120, 40, 20, .35);
}
.climber-title.ts-steel {
  color: #d8e0ea;
  text-shadow: 0 0 6px rgba(180, 200, 220, .55), 0 0 12px rgba(100, 120, 160, .3);
}
.climber-title.ts-banner {
  color: #ff8a7a;
  text-shadow: 0 0 8px rgba(220, 60, 50, .5), 0 0 14px rgba(255, 180, 60, .25);
}
.climber-title.ts-vital {
  color: #8fefa0;
  text-shadow: 0 0 8px rgba(80, 220, 100, .55), 0 0 16px rgba(40, 140, 60, .3);
}
.climber-title.ts-fame {
  color: #ffe08a;
  text-shadow: 0 0 10px rgba(255, 220, 100, .7), 0 0 20px rgba(255, 180, 40, .35);
}
.climber-title.ts-shadow {
  color: #b898e8;
  text-shadow: 0 0 8px rgba(120, 60, 200, .55), 0 0 16px rgba(40, 20, 80, .4);
}
.climber-title.ts-ward {
  color: #9ab8e0;
  text-shadow: 0 0 8px rgba(100, 140, 200, .55), 0 0 14px rgba(180, 200, 220, .25);
}
.climber-title.ts-tongue {
  color: #f0c878;
  text-shadow: 0 0 8px rgba(240, 180, 100, .55), 0 0 14px rgba(200, 100, 140, .25);
}
.climber-title.ts-hoard {
  color: #ffd24a;
  text-shadow: 0 0 10px rgba(255, 200, 40, .65), 0 0 18px rgba(180, 120, 20, .4);
}
.climber-name.ns-uncommon { color: #8fd97a; }
.climber-name.ns-rare { color: #6fa8f0; }
.climber-name.ns-epic { color: #c08af0; }
.climber-name.ns-legendary { color: var(--gold-bright); text-shadow: 0 0 8px rgba(255,216,115,.35); }
.climber-name.ns-unique {
  background: linear-gradient(90deg, #7ef0e0, #ffe9a8, #c9a8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.climber-name.ns-wrld {
  background: linear-gradient(90deg, #fff6c8, #ffe08a, #ff9ec8, #a8e0ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wrld-shimmer 4s linear infinite;
}
.climber-name.ns-frost { color: #a8d8ff; text-shadow: 0 0 6px rgba(120,180,255,.35); }
.climber-name.ns-crimson { color: #ff7a7a; }
.climber-name.ns-gold { color: var(--gold-bright); }
.sanctum-cosmetics { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; margin-bottom: 8px; }
.sanctum-cosmetics .cosmo-preview { font-size: 18px; font-family: var(--font-display); }
.sanctum-cosmetics .cosmo-row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-dim); }
.sanctum-cosmetics select {
  font: inherit; padding: 8px 10px;
  background: var(--panel-deep, #1a1824); color: var(--ink);
  border: 1px solid var(--panel-edge);
}
.achievement .ach-reward { font-size: 12px; color: var(--gold); margin-top: 2px; }
.partner-chip[data-pid] { cursor: pointer; }
.partner-chip[data-pid]:hover { outline: 1px solid rgba(255,216,115,.35); }
.rarity-unique {
  color: #7ef0e0;
  text-shadow: 0 0 8px rgba(126,240,224,.55), 0 0 18px rgba(255,216,115,.25);
  background: linear-gradient(90deg, #7ef0e0, #ffe9a8, #c9a8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(126,240,224,.45));
}
.tag.rarity-unique {
  color: #7ef0e0;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  filter: none;
  border-color: rgba(126,240,224,.55);
}
.rarity-wrld {
  background: linear-gradient(90deg, #fff6c8, #ffe08a, #ff9ec8, #a8e0ff, #fff6c8);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wrld-shimmer 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,224,138,.55));
}
@keyframes wrld-shimmer {
  to { background-position: 200% center; }
}
.tag.rarity-wrld {
  color: #ffe08a;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  filter: none;
  animation: none;
  border-color: rgba(255,224,138,.65);
  text-shadow: 0 0 8px rgba(255,224,138,.45);
}
.relic-row { display: flex; gap: 8px; flex-wrap: wrap; }
.relic-chip { padding: 6px 12px; border-radius: 20px; background: rgba(155,109,214,.1); border: 1px solid rgba(155,109,214,.35); font-size: 13px; cursor: help; }

/* ============================================================
   SHOP
   ============================================================ */
.shop-list { display: grid; gap: 8px; margin: 14px 0; }
.shop-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); }
.shop-item .si-info { flex: 1; }
.shop-item .si-name { font-weight: 600; font-size: 15.5px; }
.shop-item .si-desc { font-size: 13px; color: var(--ink-dim); }
.shop-item .si-price { font-family: var(--font-mono); color: var(--gold-bright); white-space: nowrap; }

/* ============================================================
   GAME OVER / VICTORY
   ============================================================ */
.end-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 88vh; text-align: center; }
.end-glyph { font-size: 88px; margin-bottom: 8px; }
.end-title { font-size: clamp(38px, 6vw, 62px); font-weight: 900; }
.end-title.defeat { color: var(--blood); text-shadow: 0 0 40px rgba(184,53,47,.4); }
.end-title.victory { background: linear-gradient(180deg, #ffe9b0, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.end-epitaph { color: var(--ink-dim); font-style: italic; font-size: 19px; max-width: 560px; margin: 10px 0 24px; line-height: 1.5; }
.end-stats { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-dim); }
.end-stats b { display: block; font-size: 24px; color: var(--ink); font-family: var(--font-display); }
.shard-award { font-family: var(--font-display); font-size: 20px; color: var(--xp); margin-bottom: 26px; }
.shard-award b { color: #d8c4f0; font-size: 26px; }

/* ============================================================
   SANCTUM (meta upgrades)
   ============================================================ */
.sanctum-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.sanctum-header h2 { font-size: 32px; color: var(--gold-bright); }
.shard-count { font-family: var(--font-display); font-size: 20px; color: var(--xp); }
.upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.upgrade-card { padding: 18px; position: relative; }
.upgrade-card h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: 5px; }
.upgrade-card .up-desc { font-size: 14px; color: var(--ink-dim); min-height: 42px; }
.upgrade-card .up-level { font-family: var(--font-mono); font-size: 11.5px; color: var(--sanity); margin: 8px 0; }
.upgrade-card.maxed { border-color: rgba(127,217,90,.4); }
.achievement-list { display: grid; gap: 8px; margin-top: 10px; }
.achievement { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); }
.achievement.locked { opacity: .4; filter: grayscale(1); }
.achievement .ach-icon { font-size: 24px; }
.achievement .ach-name { font-weight: 600; }
.achievement .ach-desc { font-size: 13px; color: var(--ink-dim); }

/* ============================================================
   EXPANSION: creation flow, gate, 3-card draw, charge, turn order
   ============================================================ */
.panel-inset { background: rgba(0,0,0,.28); border: 1px solid var(--panel-edge); border-radius: 10px; }

/* creation steps */
.step-dots { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.fdot { width: 9px; height: 9px; border-radius: 50%; background: #2c2838; border: 1px solid #443e58; }
.fdot.on { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 10px var(--gold); }
.fdot.done { background: var(--biome-glow); }
.start-feel { padding: 18px 22px; text-align: center; }
.start-feel .sf-word { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--gold-bright); letter-spacing: .05em; }
.start-feel .sf-flavor { font-style: italic; color: var(--ink-dim); margin: 8px 0 10px; }
.start-feel .sf-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }

/* gate entry now shares the walk-overlay transition (see .walk-overlay) */
@keyframes fade-out { to { opacity: 0; } }

/* the three-card draw (handoff §4) */
.draw-header { text-align: center; margin-bottom: 18px; }
.draw-header h3 { font-size: 26px; color: var(--gold-bright); margin: 6px 0 4px; }
.draw-header p { color: var(--ink-dim); font-style: italic; font-size: 15px; }
.pick-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; perspective: 1200px; }
.pick-card {
  width: 190px; min-height: 240px; padding: 26px 16px; text-align: center; cursor: pointer;
  background: linear-gradient(160deg, #241f34, #151220 70%);
  border: 1px solid var(--panel-edge); border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, border-color .2s, box-shadow .25s;
  position: relative; overflow: hidden;
  animation: card-deal .6s cubic-bezier(.2,.9,.25,1.05);
}
.pick-card:hover { transform: translateY(-8px) rotateX(4deg); border-color: var(--gold); }
.pick-card.picked { border-color: var(--sanity, #62c9b8); }
.pick-card.chosen { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold), 0 18px 50px rgba(217,165,63,.25); transform: translateY(-8px) scale(1.04); }
.pick-card .pc-glyph { font-size: 52px; margin-bottom: 12px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.pick-card .pc-cat { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; font-size: 15px; text-transform: uppercase; }
.pick-card .pc-blurb { color: var(--ink-dim); font-style: italic; font-size: 13.5px; margin-top: 8px; }
.pick-card .pc-votes { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 14px; min-height: 22px; }
.vote-chip { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 9px; border-radius: 12px; background: rgba(98,201,184,.12); border: 1px solid rgba(98,201,184,.4); color: #a8e8dc; }
/* affinity sparkle — a hint, never an explanation (handoff §4) */
.pick-card.sparkle::after {
  content: '✦'; position: absolute; top: 10px; right: 14px; color: var(--gold-bright);
  animation: sparkle-tw 1.8s ease-in-out infinite; font-size: 15px;
  text-shadow: 0 0 12px var(--gold);
}
.pick-card.sparkle { border-color: color-mix(in srgb, var(--gold) 45%, var(--panel-edge)); }
@keyframes sparkle-tw { 0%,100% { opacity: .35; transform: scale(.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(20deg); } }

/* Battle Charge (handoff §11) */
.charge-tray {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,.25);
  border: 1px solid var(--panel-edge);
}
.charge-label { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; color: var(--ink-dim); text-transform: uppercase; }
.charge-num { font-family: var(--font-mono); font-size: 12px; color: var(--crit); }
.cpips { display: inline-flex; gap: 4px; }
.cpip {
  width: 16px; height: 9px; border-radius: 3px; transform: skewX(-14deg);
  background: #241f30; border: 1px solid #3d3550;
}
.cpip.lit { background: linear-gradient(180deg, #ffd873, #d9a53f); border-color: var(--gold-bright); box-shadow: 0 0 8px rgba(255,216,115,.5); }
.cpip.enemy { width: 10px; height: 6px; }
.cpip.enemy.lit { background: linear-gradient(180deg, #ff7a5a, #b8352f); border-color: #ff8a7a; box-shadow: 0 0 6px rgba(216,74,63,.6); }
.fighter-charge { margin-top: 4px; }

/* enemy telegraph (handoff §12) */
.telegraph {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--crit); background: rgba(20,15,10,.9); padding: 2px 10px;
  border-radius: 10px; border: 1px solid rgba(255,179,71,.4); z-index: 4;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.telegraph.ready { color: #ff9a8a; border-color: var(--blood); animation: pulse-node 1s ease-in-out infinite; font-weight: 700; }
.combatant { position: relative; }
.aim-chips {
  display: flex; flex-wrap: wrap; gap: 3px; justify-content: center;
  margin-top: 4px;
}
.aim-chip {
  font-size: 9px; letter-spacing: 0.03em; line-height: 1.3;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(20, 16, 28, 0.88);
  border: 1px solid var(--panel-edge);
  color: var(--muted, #c9c0d4);
}
.aim-chip.you { border-color: var(--crit); color: var(--crit); }

/* turn order (handoff §14) */
.turn-order {
  flex: 0 0 130px; align-self: stretch; padding: 10px 8px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; max-height: 320px;
  scrollbar-width: thin;
}
.to-title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; color: var(--ink-faint); text-align: center; margin-bottom: 4px; }
.to-entry {
  display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 7px;
  font-size: 12px; color: var(--ink-dim); border: 1px solid transparent;
}
.to-entry .to-glyph { font-size: 15px; }
.to-entry .to-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-entry.to-player { color: var(--gold-bright); }
.to-entry.to-foe { color: var(--ink-dim); }
.to-entry.active { background: rgba(217,165,63,.12); border-color: var(--gold); color: var(--ink); }
.to-entry.to-foe.active { background: rgba(200,70,70,.16); border-color: var(--blood); color: var(--ink); }

/* ---------- pixel art ---------- */
.px-sprite {
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: 0 0;
  animation: px-idle calc(0.4s * var(--frames, 2)) steps(var(--frames, 2)) infinite;
  margin: 0 auto;
}
@keyframes px-idle {
  to { background-position: calc(-1 * var(--fw, 32px) * var(--frames, 2)) 0; }
}
@keyframes px-once {
  from { background-position: 0 0; }
  to { background-position: calc(-1 * var(--fw, 32px) * var(--frames, 2)) 0; }
}
.px-sprite.px-once-anim {
  animation: px-once calc(0.07s * var(--frames, 2)) steps(var(--frames, 2)) forwards;
}
.px-icon { image-rendering: pixelated; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.px-portrait { image-rendering: pixelated; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.pick-tile .pt-art { height: 46px; display: grid; place-items: center; margin-bottom: 2px; }
.pick-tile .pt-art .px-sprite { margin: 0; }
/* event card-art emblem: fixed box so portal + mini-glyph stay optically centered */
.card-art .ev-center {
  position: relative; z-index: 2;
  width: 92px; height: 92px;
  display: grid; place-items: center;
}
.card-art .ev-emblem {
  image-rendering: pixelated; width: 92px; height: 92px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); display: block; margin: 0;
}
/* NPC portraits are detailed busts rather than a flat emblem — give them room. */
.card-art .ev-emblem.ev-npc { width: 124px; height: 124px; }
.card-art .ev-glyph-mini {
  position: absolute; bottom: -4px; right: -10px; font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); z-index: 3;
  pointer-events: none;
}
/* Combat boxes mirror enemy-boxes.html: fixed frame + .sprite-wrap zoom/nudge.
   Sprites sit on a transparent field (no panel fill behind the art). */
.fighter-sprite:has(.px-sprite),
.fighter-sprite:has(.anim-sprite),
.fighter-sprite:has(.sprite-wrap) {
  font-size: 0; overflow: hidden;
  display: grid; place-items: center; align-items: center;
  box-sizing: border-box;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.combatant.elite .fighter-sprite:has(.sprite-wrap) {
  border-color: transparent;
  box-shadow: none;
}
.combatant.boss .fighter-sprite:has(.sprite-wrap) {
  border-color: transparent;
  box-shadow: none;
}
.fighter-sprite .sprite-wrap {
  transform-origin: center center;
  line-height: 0;
}
.fighter-sprite[data-anchor="feet"] {
  place-items: end center !important;
  align-items: end !important;
}
.fighter-sprite[data-anchor="center"] {
  place-items: center !important;
  align-items: center !important;
}
.fighter-sprite:has(.sprite-anchor-center) {
  place-items: center !important;
  align-items: center !important;
}
.combatant.boss .cx-info { margin-top: 4px; position: relative; z-index: 2; }
/* Multi-state sprites (js/anim.js) are drawn as a background strip and stepped by
   background-position. Unlike .px-sprite they can be scaled up (a 30px-tall knight
   renders at x3), so they need the same pixelated snap or they turn to mush. */
.anim-sprite { image-rendering: pixelated; background-repeat: no-repeat; margin: 0 auto; }
.card-art.has-bg { background-size: cover; background-position: center 62%; image-rendering: pixelated; }
.card-art.has-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,12,.15), rgba(8,6,12,.55)); pointer-events: none; }
/* Keep tags absolutely centered — do NOT flip them to relative (that shoved the emblem off-center). */
.card-art.has-bg .card-glyph { z-index: 2; }
.card-art.has-bg .tag { z-index: 3; }
.battlefield.has-bg { background-size: cover; background-position: center 70%; image-rendering: pixelated; position: relative; }
.battlefield.has-bg::before { content: ''; position: absolute; inset: 0; background: rgba(10,8,14,.52); border-radius: var(--radius); }
.battlefield.has-bg > * { position: relative; z-index: 1; }
/* Full-frame combat uses absolute regions — don't let the has-bg reset collapse them */
.battlefield.cx-bg.has-bg > * { position: absolute; }
/* title-vista is full-bleed on the title screen; other screens keep card art */
.shop-item .si-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.shop-item .si-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  padding: 1px 7px; border-radius: 4px; border: 1px solid var(--panel-edge); color: var(--ink-dim);
}
.shop-item .si-tag.incompatible { color: #f0a8a0; border-color: rgba(240,168,160,.45); }
.shop-item .si-tag.useful { color: #9fd48a; border-color: rgba(159,212,138,.4); }
.gear-card .px-icon { display: block; margin: 0 auto 8px; }
.hud-portrait:has(.px-sprite) { background: radial-gradient(circle at 35% 30%, #221d33, #12101a); overflow: hidden; }
.hud-portrait .px-sprite { transform: scale(1.15); }

/* music volume slider (title + pause) */
.audio-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 4px; }
.audio-row.pause-audio { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--panel-edge); border-radius: 10px; background: rgba(0,0,0,.25); }
.audio-row.pause-autoplay,
.audio-row.pause-pref { cursor: pointer; user-select: none; gap: 12px; }
.audio-row.pause-autoplay input,
.audio-row.pause-pref input { width: 18px; height: 18px; accent-color: var(--gold, #c9a227); flex: 0 0 auto; }
.pause-autoplay-hint,
.pause-pref-hint { color: var(--ink-dim); font-size: 0.92em; text-align: left; }
.vol-slider {
  -webkit-appearance: none; appearance: none; height: 6px; width: 150px; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--vp,50%), #2c2838 var(--vp,50%));
  cursor: pointer; outline: none;
}
.vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-bright); border: 1px solid #2a1c0b; box-shadow: 0 0 6px rgba(217,165,63,.5); cursor: pointer; }
.vol-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold-bright); border: 1px solid #2a1c0b; cursor: pointer; }
.vol-val { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); min-width: 24px; text-align: right; }

/* lobby pick tiles + picker modal grid */
.pick-tile { padding: 12px; text-align: center; cursor: pointer; transition: border-color .15s, transform .12s; }
.pick-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.pick-tile .pt-hint { font-size: 12px; color: var(--ink-dim); }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.picker-modal.sheet-modal { padding-top: 16px; }
.picker-modal .sheet-close-x { margin-top: -4px; }
.picker-fate-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--panel-edge);
}
.picker-fate-hint {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.35;
}
.picker-card {
  padding: 14px 10px; text-align: center; cursor: pointer; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid var(--panel-edge);
  transition: border-color .15s, transform .12s; color: var(--ink);
}
.picker-card:hover { border-color: var(--accent, var(--gold)); transform: translateY(-3px); }
.picker-card .pk-glyph { height: 44px; display: grid; place-items: center; margin-bottom: 6px; color: var(--accent, var(--gold)); }
.picker-card .pk-glyph svg { width: 40px; height: 40px; }
.picker-card .pk-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.picker-card .pk-desc { font-size: 11.5px; color: var(--ink-dim); margin-top: 3px; }
.class-card.locked-class { opacity: .6; cursor: default; }
.class-card.secret-class { border-color: color-mix(in srgb, var(--gold) 40%, var(--panel-edge)); position: relative; }

/* your-turn banner */
.turn-banner {
  text-align: center; font-family: var(--font-display); font-weight: 800;
  letter-spacing: .25em; font-size: 15px; color: var(--gold-bright);
  padding: 7px; border-radius: 10px; border: 1px solid var(--gold);
  background: rgba(217,165,63,.08);
  animation: turn-pulse 1.4s ease-in-out infinite;
}
@keyframes turn-pulse { 50% { box-shadow: 0 0 22px rgba(255,216,115,.35); background: rgba(217,165,63,.16); } }

/* heal target picking */
.player-row.heal-pick .combatant { outline: 2px dashed var(--sanity, #62c9b8); outline-offset: 5px; border-radius: 10px; animation: turn-pulse 1.2s ease-in-out infinite; }

/* per-skill-type visual effects */
.skill-fx { position: absolute; inset: -8px; pointer-events: none; border-radius: 14px; z-index: 6; }
@keyframes fx-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-rise { 0% { opacity: 0; transform: translateY(12px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes fx-spin { 0% { opacity: 0; transform: rotate(0deg) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(200deg) scale(1.2); } }
@keyframes fx-shatter { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.3); } }
.skill-fx { animation: fx-flash .7s ease-out forwards; }
.fx-slash { background: linear-gradient(125deg, transparent 42%, rgba(255,255,255,.95) 49%, rgba(200,220,255,.9) 51%, transparent 58%); animation: fx-flash .5s ease-out forwards; }
.fx-pierce { background: linear-gradient(90deg, transparent 46%, rgba(255,255,255,.9) 50%, transparent 54%); animation: fx-flash .4s ease-out forwards; }
.fx-blunt { box-shadow: inset 0 0 30px rgba(255,235,180,.8); animation: fx-shatter .5s ease-out forwards; }
.fx-arcane { box-shadow: inset 0 0 26px rgba(140,120,255,.9); border: 1px solid rgba(180,160,255,.8); animation: fx-spin .7s ease-out forwards; }
.fx-fire { background: radial-gradient(circle at 50% 80%, rgba(255,140,40,.85), rgba(255,60,20,.4) 55%, transparent 75%); animation: fx-rise .7s ease-out forwards; }
.fx-ice { box-shadow: inset 0 0 26px rgba(140,220,255,.95); border: 1px solid rgba(200,240,255,.9); animation: fx-shatter .7s ease-out forwards; }
.fx-poison { background: radial-gradient(circle at 50% 70%, rgba(120,220,80,.75), transparent 70%); animation: fx-rise .8s ease-out forwards; }
.fx-holy { background: radial-gradient(circle at 50% 20%, rgba(255,245,190,.95), transparent 70%); animation: fx-rise .7s ease-out forwards; }
.fx-shadow { background: radial-gradient(circle, rgba(60,20,90,.9), rgba(10,5,20,.5) 60%, transparent 80%); animation: fx-shatter .7s ease-out forwards; }
.fx-wind { background: repeating-linear-gradient(100deg, transparent 0 8px, rgba(200,255,240,.5) 9px 11px); animation: fx-flash .5s ease-out forwards; }
.fx-thunder { background: linear-gradient(170deg, transparent 40%, rgba(255,255,160,.95) 48%, transparent 52%), radial-gradient(circle at 50% 10%, rgba(255,255,200,.6), transparent 60%); animation: fx-flash .4s ease-out forwards; }
.fx-heal { box-shadow: inset 0 0 28px rgba(120,240,160,.9); animation: fx-rise .8s ease-out forwards; }
.fx-buff { border: 2px solid rgba(255,216,115,.8); box-shadow: 0 0 18px rgba(255,216,115,.5); animation: fx-rise .7s ease-out forwards; }
.fx-luck { background: radial-gradient(circle at 30% 30%, rgba(255,230,120,.6), transparent 45%), radial-gradient(circle at 70% 60%, rgba(255,230,120,.6), transparent 45%); animation: fx-spin .6s ease-out forwards; }

/* skill buttons: universal + incompatible states */
.skill-btn.universal { border-color: color-mix(in srgb, var(--sanity, #62c9b8) 35%, var(--panel-edge)); }
.skill-btn.incompatible { opacity: .45; }
.guard-pip { color: #a8e8dc; border-color: rgba(98,201,184,.5) !important; }

/* subclass secret option */
.pick-option.secret-path { border-color: var(--gold); background: rgba(217,165,63,.06); }

/* character sheet extras */
.fame-line { font-size: 17px; }
.gc-warn { margin-top: 8px; font-size: 12px; color: var(--crit); }

@media (max-width: 700px) {
  .turn-order { display: none; } /* order still shown via acting highlights */
  .pick-card { width: 100%; min-height: 0; padding: 16px; }
  .pick-row { flex-direction: column; }
}

/* ---------- Screen shake ---------- */
.shake { animation: shake .4s ease; }
@keyframes shake {
  20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -2px); }
  60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, -1px); }
}

/* ============================================================
   8-BIT RESKIN — frame-relative sizing, flat corners, Press Start type scale
   (appended so it wins by source order; keeps the token swap above intact)
   ============================================================ */

/* frame-relative sizing (vw/vh are viewport units — wrong inside the scaled 1280x720 frame) */
.screen { width: min(1180px, 96%); padding: 24px 20px 48px; }
.end-screen { min-height: 660px; }
.event-card { width: min(680px, 94%); }

/* flatten remaining rounded rectangles (round exceptions keep their literal 50%/arch radii) */
.roll-stat, .name-input, .event-card, .card-art, .choice-btn, .outcome-line, .skill-btn,
.gear-card, .pick-option, .inv-item, .relic-chip, .vote-chip, .shop-item, .achievement,
.upgrade-card, .picker-card, .pick-card, .charge-tray, .telegraph, .to-entry, .turn-banner,
.modifier-banner, .statgain, .hud, .panel-inset, .modal, .tag, .pc-glyph { border-radius: 0 !important; }

/* Press Start 2P type scale (display/mono font is ~2x Cinzel per px) */
.game-title { font-size: 44px; letter-spacing: 4px; line-height: 1.15; }
.game-subtitle { font-size: 16px; letter-spacing: 1px; }
.title-actions .btn { font-size: 11px; }
.title-rail .btn { font-size: 9px; padding: 8px 10px; }
.title-footer { font-size: 7px; }
.title-stats { font-size: 9px; }
.select-header h2 { font-size: 18px; line-height: 1.4; }
.class-card h3 { font-size: 12px; line-height: 1.4; }
.class-card .class-epithet { font-size: 15px; min-height: 44px; }
.class-card .class-evo { font-size: 8px; }
.roll-stat .rs-label { font-size: 8px; }
.roll-stat .rs-value { font-size: 18px; }
.name-input { font-size: 12px; }
.hud-name { font-size: 11px; }
.hud-class { font-size: 8px; }
.hud-meta { font-size: 10px; }
.hud-chip b { font-size: 11px; }
.partner-chip .pc-name { font-size: 15px; }
.partner-chip .pc-act { font-size: 8px; }
.floor-strip .biome-label { font-size: 8px; }
.card-body h3 { font-size: 13px; line-height: 1.5; }
.card-body .card-text { font-size: 18px; line-height: 1.4; }
.choice-btn { font-size: 17px; }
.choice-btn .choice-hint { font-size: 8px; }
.outcome-line { font-size: 15px; }
.fighter-name { font-size: 9px; }
.skill-btn .sk-name { font-size: 10px; }
.skill-btn .sk-cost { font-size: 8px; }
.skill-btn .sk-desc { font-size: 12px; }
.combat-log { font-size: 15px; }
.modifier-banner { font-size: 9px; }
.charge-label { font-size: 9px; }
.charge-num { font-size: 9px; }
.to-title { font-size: 8px; }
.to-entry { font-size: 14px; }
.turn-banner { font-size: 11px; letter-spacing: .14em; }
.telegraph { font-size: 8px; }
.statgain { font-size: 9px; }
.sheet-section h4 { font-size: 10px; }
.stat-table { font-size: 10px; }
.gear-card .gc-label { font-size: 8px; }
.gear-card .gc-name { font-size: 11px; }
.pick-option .po-name { font-size: 11px; }
.picker-card .pk-name { font-size: 10px; }
.pick-tile .pt-hint { font-size: 14px; }
.shop-item .si-price { font-size: 9px; }
.sanctum-header h2 { font-size: 16px; }
.shard-count, .shard-award { font-size: 12px; }
.shard-award b { font-size: 14px; }
.upgrade-card h4 { font-size: 11px; line-height: 1.4; }
.upgrade-card .up-desc { font-size: 15px; }
.upgrade-card .up-level { font-size: 8px; }
.end-title { font-size: 30px; line-height: 1.2; }
.end-stats { font-size: 9px; }
.end-stats b { font-size: 14px; }
.end-epitaph { font-size: 19px; }
.pick-card .pc-cat { font-size: 11px; line-height: 1.4; }
.pick-card .pc-blurb { font-size: 15px; }
.vote-chip { font-size: 8px; }
.select-header p { font-size: 18px; }
.draw-header h3 { font-size: 14px; line-height: 1.5; }
.draw-header p { font-size: 16px; }
.start-feel .sf-word { font-size: 20px; }
.start-feel .sf-note { font-size: 8px; }
.gate-caption { font-size: 12px; }
.gate-skip { font-size: 8px; }

/* Appraisal — The Monolith of Measure (handoff §3) */
.mono-screen .creation-body { overflow: hidden; }
.mono-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.mono-title { font-family: var(--font-display); font-size: 12px; letter-spacing: 3px; color: #f7ecce; text-shadow: 0 0 18px rgba(79,214,192,.5); flex: 0 0 auto; }
.mono-identity {
  display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 0; flex: 0 0 auto;
}
.mono-identity-text { font-family: var(--font-display); font-size: 10px; color: var(--ink-dim); }
.mono-crystal-wrap {
  position: relative; width: 150px; height: 180px; margin: 0 auto;
  flex: 0 0 auto;
}
.mono-crystal-wrap canvas {
  display: block; width: 100%; height: 100%;
  cursor: pointer; touch-action: none; user-select: none;
}
.mono-crystal-wrap.is-done canvas { cursor: default; }
.mono-caption {
  margin-top: 2px; padding: 0 10px;
  min-height: 0;
  flex: 0 0 auto;
  max-width: 420px;
}
.mono-hint {
  font-size: 14px; color: var(--teal-hi); letter-spacing: 1px;
  animation: flick 1.6s ease-in-out infinite;
}
@keyframes flick { 0%,100% { opacity: .9; } 50% { opacity: .55; } }
.mono-reveal { animation: screen-in .5s ease; }
.mono-feel {
  font-family: var(--font-display); font-size: 14px; color: var(--gold-bright); letter-spacing: .05em;
}
.mono-range-label {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 3px; color: var(--ink-faint); margin: 4px 0 2px;
}
.mono-band {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 20px; animation: shimmer 2.4s ease-in-out infinite;
}
.mono-band span { text-shadow: 0 0 14px currentColor; }
.mono-band-sep { color: #6a5d44 !important; }
.mono-earned {
  margin-top: 4px; font-size: 12px; color: var(--ink-dim); line-height: 1.3; max-width: 320px; margin-left: auto; margin-right: auto;
}
.mono-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; flex: 0 0 auto;
}
.mono-actions .name-input { max-width: 220px; padding: 8px 10px; font-size: 14px; }
.mono-reroll-hint {
  font-size: 12px; color: var(--ink-dim); margin-top: 2px; max-width: 340px; line-height: 1.3;
  flex: 0 0 auto;
}
@keyframes shimmer { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }

/* ============================================================
   EVENT TRAVEL MAP (handoff §6)
   ============================================================ */
.tm-root {
  position: fixed; inset: 0; z-index: 20; overflow: hidden;
  background:
    radial-gradient(ellipse 100% 70% at 50% 8%, color-mix(in srgb, var(--biome-glow) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 92% 82% at 50% 46%, rgba(10,6,24,.72), rgba(6,4,14,.98)),
    var(--bg-0);
}
.tm-header { position: absolute; top: 18px; left: 24px; z-index: 25; max-width: 42%; }
.tm-biome { font-family: var(--font-display); font-size: 13px; color: #f7ecce; text-shadow: 0 2px 0 #2a1c0b; }
.tm-sub { font-size: 20px; color: var(--teal-hi); margin-top: 9px; letter-spacing: 1px; }
.tm-legend { font-size: 10px; color: var(--ink-faint); margin-top: 6px; letter-spacing: 0.08em; }
.tm-corner {
  position: absolute; bottom: 16px; right: 18px; z-index: 70;
  width: min(280px, 42vw);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: auto;
}
.tm-status {
  width: 100%; padding: 10px 12px;
  border: 2px solid #6a5528; background: linear-gradient(160deg, rgba(28,20,48,.94), rgba(14,9,28,.96));
  box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tm-corner-tools { display: flex; gap: 6px; justify-content: flex-end; }
.tm-tool-btn {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  border: 1px solid #6a5528;
  background: linear-gradient(160deg, rgba(28,20,48,.94), rgba(14,9,28,.96));
  color: var(--gold-bright);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.tm-tool-btn.ghost { color: var(--ink); }
.tm-tool-btn:hover { border-color: var(--gold); filter: brightness(1.1); }
.tm-party {
  position: absolute; bottom: 16px; left: 18px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(260px, 36vw); pointer-events: auto;
}
.tm-party-chip {
  width: 100%; padding: 8px 10px; text-align: left; cursor: pointer;
  border: 2px solid #3a4a6a; background: linear-gradient(160deg, rgba(20,28,48,.94), rgba(10,14,28,.96));
  box-shadow: 0 6px 18px rgba(0,0,0,.45); color: inherit; font: inherit;
  transition: border-color .15s, transform .12s;
}
.tm-party-chip:hover { border-color: var(--teal-hi); transform: translateY(-1px); }
.tm-party-chip.downed { opacity: .55; filter: grayscale(.4); }
.tm-party-chip .tm-st-open { color: var(--teal-hi); }
.tm-status:hover { border-color: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(232,182,74,.35); transform: translateY(-1px); }
.tm-status:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tm-st-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tm-st-name { font-family: var(--font-display); font-size: 12px; color: #f7ecce; letter-spacing: .04em; }
.tm-st-open {
  flex-shrink: 0; font-family: var(--font-display); font-size: 8px; letter-spacing: .08em;
  color: var(--gold-bright); opacity: .85;
}
.tm-status:hover .tm-st-open { opacity: 1; }
.tm-st-meta { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.tm-st-bars { margin-top: 8px; display: grid; gap: 4px; }
.tm-st-bar { position: relative; height: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); }
.tm-st-bar > i { display: block; height: 100%; }
.tm-st-bar.hp > i { background: linear-gradient(90deg, #8a2f3a, #e0564e); }
.tm-st-bar.mp > i { background: linear-gradient(90deg, #2a4a8a, #5ba7ff); }
.tm-st-bar span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: #fff8e8; text-shadow: 0 1px 2px #000;
}
.tm-st-gear {
  margin-top: 8px; font-size: 11px; color: var(--ink-dim); line-height: 1.35;
  border-top: 1px solid rgba(232,182,74,.2); padding-top: 6px;
}
.tm-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.tm-hint { position: absolute; width: 44px; height: 52px; border: 1px dashed rgba(160,143,102,.4); background: rgba(20,13,38,.4); display: flex; align-items: center; justify-content: center; font-size: 22px; color: rgba(160,143,102,.55); z-index: 6; }
.tm-hcard { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid; background: linear-gradient(160deg, rgba(28,20,48,.9), rgba(14,9,28,.9)); z-index: 8; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.tm-current { position: absolute; width: 212px; transform: translate(-50%,-50%); z-index: 8; }
.tm-here { text-align: center; font-family: var(--font-display); font-size: 8px; letter-spacing: 2px; color: var(--ink-faint); margin-top: 8px; }
.tm-cur-art { height: 120px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--teal); box-shadow: 0 0 30px rgba(79,214,192,.5); background: radial-gradient(circle at 50% 40%, rgba(79,214,192,.4), rgba(10,6,24,.15) 70%), repeating-linear-gradient(45deg, rgba(0,0,0,.2) 0 7px, transparent 7px 14px); }
.tm-cur-art span { font-size: 60px; }
.tm-cur-body { border: 2px solid var(--teal); border-top: none; background: linear-gradient(160deg, rgba(34,24,58,.97), rgba(16,10,30,.98)); padding: 10px 12px 12px; text-align: center; }
.tm-cur-tag { font-family: var(--font-display); font-size: 8px; color: var(--teal); letter-spacing: 1px; }
.tm-cur-name { font-size: 24px; color: #f7ecce; margin-top: 6px; line-height: 1; }
.tm-cur-flavor { font-size: 15px; color: var(--ink-dim); line-height: 1.22; margin-top: 8px; }
.tm-choice-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.tm-choice-layer:hover { z-index: 60; }
.tm-choice-layer .tm-node { z-index: 31; }
.tm-choice-layer .tm-node:hover, .tm-choice-layer .tm-node.tm-has-votes { z-index: 50; }
.tm-node { position: absolute; width: 134px; height: 170px; transform: translate(-50%,-50%); z-index: 12; cursor: pointer; pointer-events: auto; transition: width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1); }
/* Hover fits art + tag + name + risk + CTA — no reserved vote gutter */
.tm-node:hover { width: 232px; height: 268px; z-index: 40; }
/* Co-op: grow only when someone has voted on this path */
.tm-node.tm-has-votes { width: 232px; height: 308px; z-index: 36; }
.tm-node.tm-has-votes:hover { height: 308px; z-index: 40; }
.tm-node.tm-has-votes .tm-expand { display: block; }
.tm-card { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border: 2px solid #4a3c2a; background: linear-gradient(165deg, rgba(34,24,58,.96), rgba(16,10,30,.97)); box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: border-color .3s, box-shadow .3s, filter .12s; }
.tm-node:hover .tm-card { border-color: var(--nc); box-shadow: 0 14px 44px rgba(0,0,0,.6), 0 0 28px var(--ng); }
.tm-art { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(232,182,74,.15); background: radial-gradient(circle at 50% 42%, var(--ng), rgba(10,6,24,.15) 70%), repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 6px, transparent 6px 12px); overflow: hidden; }
.tm-node:hover .tm-art, .tm-node.tm-has-votes .tm-art { flex: 0 0 132px; }
.tm-icon { font-size: 40px; color: var(--nc); text-shadow: 0 0 14px var(--ng); line-height: 1; transition: font-size .3s; }
.tm-node:hover .tm-icon, .tm-node.tm-has-votes .tm-icon { font-size: 56px; }
.tm-emblem { width: 52px; height: 52px; image-rendering: pixelated; filter: drop-shadow(0 0 10px var(--ng)); transition: width .3s, height .3s; }
.tm-node:hover .tm-emblem, .tm-node.tm-has-votes .tm-emblem { width: 68px; height: 68px; }
.tm-art .px-sprite { transform: scale(.9); transform-origin: center bottom; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); transition: transform .3s; }
.tm-node:hover .tm-art .px-sprite, .tm-node.tm-has-votes .tm-art .px-sprite { transform: scale(1.1); }
.tm-node:hover .tm-name, .tm-node.tm-has-votes .tm-name { font-size: 17px; max-height: none; }
.tm-mystery .tm-art { background: radial-gradient(circle at 50% 42%, rgba(166,120,255,.35), rgba(10,6,24,.2) 70%), repeating-linear-gradient(45deg, rgba(0,0,0,.22) 0 6px, transparent 6px 12px); }
.tm-foot { padding: 9px 10px; text-align: center; }
.tm-tag { font-family: var(--font-display); font-size: 8px; letter-spacing: 1px; color: var(--nc); }
.tm-name { font-size: 13px; color: #f7ecce; line-height: 1.15; margin-top: 5px; transition: font-size .3s; max-height: 2.4em; overflow: hidden; }
.tm-expand { display: none; }
.tm-node:hover .tm-expand { display: block; }
.tm-risk { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.tm-risk-label { font-family: var(--font-display); font-size: 7px; letter-spacing: 1px; }
.tm-pips { display: flex; gap: 3px; }
.tm-pips span { display: inline-block; }
.tm-flavor { font-size: 15px; color: var(--ink-dim); line-height: 1.24; margin-top: 10px; padding: 0 4px; }
.tm-cta { margin-top: 12px; font-family: var(--font-display); font-size: 9px; color: var(--on-gold); padding: 9px; background: linear-gradient(180deg, #ffe6a8, #e8b64a); box-shadow: 0 0 14px rgba(232,182,74,.45); }
.tm-votes { display: none; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 8px; min-height: 0; }
.tm-votes:not(:empty) { display: flex; min-height: 22px; }
.tm-sparkle::after { content: '✦'; position: absolute; top: 6px; right: 8px; color: var(--gold-bright); z-index: 2; font-size: 13px; text-shadow: 0 0 12px var(--gold); }
.tm-picked .tm-card { border-color: var(--teal); }
.tm-chosen .tm-card { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold), 0 0 28px var(--ng); }
/* Co-op majority tie-break roulette */
.tm-node.tm-spin .tm-card {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--gold), 0 0 36px var(--ng), 0 0 18px rgba(255,230,160,.45);
  filter: brightness(1.18);
}
.tm-root.tm-rolling { pointer-events: none; }
.tm-root.tm-rolling .tm-node { cursor: default; }

/* travel walk transition — knights crossing the current biome */
.walk-overlay {
  position: absolute; inset: 0; z-index: 70; overflow: hidden;
  opacity: 0; transition: opacity .22s ease;
  pointer-events: none;
}
.walk-overlay.show { opacity: 1; }
.walk-overlay.leaving { opacity: 0; transition: opacity .28s ease; }
.walk-overlay.skippable { pointer-events: auto; cursor: pointer; }
.walk-bg {
  position: absolute; inset: 0;
  background-image: var(--walk-bg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: auto;
  transform: scale(1.04);
  filter: saturate(1.05) brightness(.92);
}
.walk-haze {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,6,12,.35) 0%, transparent 28%, transparent 62%, rgba(8,6,12,.55) 100%),
    radial-gradient(ellipse at 50% 70%, transparent 40%, rgba(6,4,10,.45) 100%);
}
.walk-party {
  position: absolute;
  bottom: 16%;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  will-change: transform;
  animation: walk-across var(--walk-dur, 1.4s) linear forwards;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.35));
}
.walk-knight {
  width: 96px; height: 96px;
  margin-bottom: var(--bob, 0);
  background-image: var(--walk-sheet);
  background-size: 768px 96px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: walk-cycle .64s steps(8) infinite;
  animation-delay: calc(-1 * var(--lag, 0ms));
}
.walk-knight:nth-child(2) { transform: scale(.92); opacity: .95; }
.walk-knight:nth-child(3) { transform: scale(.86); opacity: .9; }
.walk-knight:nth-child(4) { transform: scale(.8); opacity: .85; }
@keyframes walk-cycle {
  to { background-position: -768px 0; }
}
@keyframes walk-across {
  from { transform: translateX(-140px); }
  to { transform: translateX(1320px); }
}
.walk-caption {
  position: absolute; left: 0; right: 0; top: 14%;
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: .28em;
  color: var(--gold-bright);
  font-size: 15px;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}
.walk-skip {
  position: absolute; left: 0; right: 0; bottom: 8%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .1em;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
@media (prefers-reduced-motion: reduce) {
  .walk-party, .walk-knight { animation: none !important; }
}

/* ---------- combat moded action menu (handoff §4) ---------- */
.combat-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.combat-utility { display: flex; gap: 8px; justify-content: center; min-height: 0; }
.action-bar.mode-root { display: flex; gap: 16px; justify-content: center; }
.action-bar.mode-skills, .action-bar.mode-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; max-width: 660px; margin: 0 auto; }
.action-bar.mode-flee { display: block; text-align: center; }
.action-root-btn {
  cursor: pointer; font-family: var(--font-display); font-size: 13px; color: var(--ink);
  padding: 18px 34px; border: 2px solid var(--acc, var(--gold));
  background: linear-gradient(160deg, rgba(40,28,66,.92), rgba(20,13,38,.94));
  box-shadow: 0 4px 0 rgba(0,0,0,.5); letter-spacing: .04em;
  transition: filter .12s, box-shadow .2s;
}
.action-root-btn:hover:not(:disabled) { filter: brightness(1.3); box-shadow: 0 0 18px var(--acc, var(--gold)); }
.action-root-btn:disabled { opacity: .4; cursor: not-allowed; }
.action-back {
  cursor: pointer; font-family: var(--font-display); font-size: 9px; color: var(--gold);
  padding: 8px 16px; border: 2px solid #6a5528; background: rgba(20,13,38,.85);
}
.action-back:hover:not(:disabled) { filter: brightness(1.3); }
.action-back:disabled { opacity: .4; cursor: not-allowed; }
.item-btn {
  cursor: pointer; min-width: 230px; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border: 2px solid #3a6a3a; background: linear-gradient(160deg, rgba(24,40,28,.92), rgba(12,22,16,.94));
}
.item-btn:hover:not(:disabled) { filter: brightness(1.25); border-color: var(--luck); }
.item-btn:disabled { opacity: .4; cursor: not-allowed; }
.item-btn .it-name { font-family: var(--font-body); font-size: 20px; color: #f2e6cc; }
.item-btn .it-qty { font-family: var(--font-mono); font-size: 9px; color: #7fe6a0; }
.combat-empty { grid-column: 1/-1; text-align: center; color: var(--ink-dim); font-size: 18px; padding: 14px; }
.flee-warn { font-size: 22px; color: #ffb46b; margin-bottom: 14px; text-shadow: 0 2px 4px #000; }
.flee-row { display: flex; gap: 14px; justify-content: center; }
.flee-stand, .flee-go { cursor: pointer; font-family: var(--font-display); font-size: 11px; padding: 12px 22px; border: 2px solid var(--gold); }
.flee-stand { color: var(--ink); background: rgba(20,13,38,.85); }
.flee-go { color: var(--on-gold); background: linear-gradient(180deg, #ffcf8a, #ff9a3c); border-color: #7c3530; }
.trade-status {
  display: grid; gap: 4px; margin: 10px 0; padding: 8px 10px;
  border: 1px solid rgba(232,182,74,.25); background: rgba(0,0,0,.25);
  font-size: 13px; color: var(--ink-dim);
}
.pick-option.picked { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,182,74,.45); }
.skill-order { display: flex; flex-direction: column; gap: 4px; }
.flee-stand:disabled, .flee-go:disabled { opacity: .4; cursor: not-allowed; }

/* compact combat to fit the fixed 1280x720 frame */
.combat-screen { gap: 10px; }
.battlefield { min-height: 210px; padding: 16px 18px 12px; }
.combat-log { height: 58px; }
.turn-banner { padding: 5px; }
.charge-tray { padding: 6px 14px; }
.fighter-sprite { width: 84px; height: 84px; }
.combatant.boss .fighter-sprite { width: 156px; height: 156px; }
/* skills grid: name + cost, with a brief description so moves read clearly */
.action-bar.mode-skills .skill-btn { min-width: 250px; padding: 10px 16px; }
.action-bar.mode-skills .sk-name { width: 100%; font-size: 16px; font-family: var(--font-body); }
.action-bar.mode-skills .sk-name span:first-child { font-size: 20px; }
.action-bar.mode-skills .sk-desc { display: block; font-size: 14px; color: var(--ink-dim); margin-top: 2px; line-height: 1.2; max-width: 250px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  html { font-size: 15px; }
  .hud { gap: 8px; }
  .hud-meta { font-size: 11.5px; gap: 10px; }
  .card-art { height: 140px; }
  .card-art .card-glyph { font-size: 64px; }
  .fighter-sprite { width: 74px; height: 74px; font-size: 40px; }
  .combatant.boss .fighter-sprite { width: 130px; height: 130px; font-size: 72px; }
  .battlefield { flex-direction: column; justify-content: space-between; }
  .player-row { flex-direction: row; border-left: none; border-top: 1px solid var(--panel-edge); padding: 14px 0 0; }
}

/* ============================================================
   CHARACTER CREATION — sliding rail + showcase (handoff §2)
   Fits the fixed 1280×720 frame with no vertical scroll.
   ============================================================ */
#app:has(.creation-screen) { overflow: hidden; }

.creation-screen {
  height: 100%;
  max-height: 100%;
  width: min(1180px, 96%);
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
.creation-screen .select-header {
  flex: 0 0 auto;
  margin-bottom: 6px;
}
.creation-screen .select-header h2 {
  font-size: 16px;
  margin: 0;
  line-height: 1.2;
}
.creation-screen .select-header p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.25;
}
.creation-screen .step-dots { margin-top: 6px; }
.creation-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.creation-nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.creation-nav.has-fate {
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.creation-nav-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
}
.fate-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.fate-nav .fate-hint {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.25;
  max-width: 280px;
  text-align: left;
}

.creation-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.creation-hero {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 4px 24px 0;
}
.showcase {
  position: relative;
  top: auto; left: auto; transform: none;
  width: 260px;
  text-align: center;
  z-index: 2;
  flex: 0 0 auto;
}
.showcase-art {
  width: 260px; height: 260px; border: 3px solid var(--gold); box-shadow: 0 0 22px rgba(232,182,74,.35);
  background: rgba(20,13,38,.7); display: grid; place-items: center; overflow: hidden; transition: opacity .15s ease;
}
.showcase-art .px-sprite { image-rendering: pixelated; margin: 0 auto; }
.showcase-art .px-sprite[data-hero="archer"] {
  /* Character sits low in the cell — nudge up for optical center in the gold frame */
  transform: translateY(-10px);
}
.showcase-art .px-sprite,
.showcase-art img {
  max-width: 230px; max-height: 230px; width: auto; height: auto;
}
.showcase-name {
  display: inline-block; position: relative; top: -12px; font-family: var(--font-display); font-size: 13px;
  color: #f7ecce; background: #1a1030; border: 2px solid var(--gold); padding: 7px 14px; transition: opacity .15s ease;
}
.showcase-text {
  position: relative; top: auto; left: auto; width: min(420px, 42%);
  padding: 16px 18px;
  border-left: 3px solid var(--gold); background: rgba(28,20,48,.72); transition: opacity .15s ease; z-index: 2;
  max-height: 280px; overflow: hidden;
}
.showcase-tag { font-family: var(--font-display); font-size: 12px; letter-spacing: 1.5px; }
.showcase-blurb { font-size: 20px; line-height: 1.35; color: #e0d3b4; margin-top: 10px; }
.look-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; font-size: 14px; color: #b8a88a;
}
.look-label { min-width: 10ch; text-align: center; letter-spacing: .03em; }

.creation-rail {
  position: relative; bottom: auto; left: auto; right: auto;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%;
}
.fate-hint { font-size: 13px; color: var(--ink-dim); line-height: 1.3; max-width: 380px; }
.fate-badge {
  display: inline-block; font-family: var(--font-display); font-size: 10px; letter-spacing: .12em;
  color: #1a1030; background: var(--gold-bright); border: 1px solid var(--gold); padding: 2px 6px;
  vertical-align: middle; margin-right: 4px;
}
.fate-mini { margin-top: 8px; width: 100%; font-size: 12px; padding: 6px 8px; }
.rail-arrow {
  cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; color: var(--gold); border: 2px solid #6a5528; background: rgba(28,20,48,.7);
}
.rail-arrow:hover { filter: brightness(1.3); }
.rail-window { width: 664px; max-width: calc(100% - 100px); overflow: hidden; padding: 8px 0; }
.rail-track { display: flex; gap: 16px; transition: transform .5s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.rail-card {
  flex: 0 0 120px; text-align: center; padding: 10px 8px; cursor: pointer; border: 2px solid #3a2f1e;
  background: rgba(20,13,38,.55); opacity: .55; transform: scale(.94); transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.rail-card.active { border-color: var(--sel, var(--gold)); background: rgba(40,28,66,.92); opacity: 1; transform: translateY(-6px) scale(1.04); box-shadow: 0 0 18px var(--sel-glow, rgba(232,182,74,.3)); }
.rail-card.locked { cursor: default; filter: grayscale(.7); }
.rail-emblem {
  width: 44px; height: 44px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; color: #1a1030; border: 2px solid;
}
.rail-emblem .px-icon, .rail-emblem img { width: 36px !important; height: 36px !important; }
.rail-name { font-family: var(--font-display); font-size: 10px; color: #f7ecce; }
.rail-tag { font-size: 12px; letter-spacing: 1px; margin-top: 2px; }

/* ============================================================
   COMBAT — handoff full-frame layout (handoff §4), mechanics kept
   ============================================================ */
.combat-screen.cx-full { position: fixed; inset: 0; z-index: 20; }
.battlefield.cx-bg {
  position: absolute; inset: 0; display: block; padding: 0; min-height: 0;
  border: none; box-shadow: none; border-radius: 0;
  /* set color/size/repeat individually — the `background` shorthand would reset
     the inline biome image's size to auto and repeat it (tiling). */
  background-color: var(--bg-0);
  background-size: cover; background-repeat: no-repeat; background-position: center;
}
/* positioned regions — `.cx-bg >` beats the upstream `.battlefield.has-bg > *` reset */
.cx-bg > .cx-mod { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 9; margin: 0; }
.cx-bg > .cx-topbar {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 7;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.cx-bg > .cx-topbar .cx-top-center {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cx-bg > .cx-topbar .cx-charge {
  position: static; transform: none; margin: 0;
}
/* YOUR TURN sits tight under Battle Charge (inside the top-center stack) */
.cx-bg > .cx-topbar .cx-banner {
  position: static; transform: none; width: auto; margin: 0;
  padding: 5px 14px; font-size: 12px; letter-spacing: .18em;
}
/* Top-left turn order — top synced to Battle Charge via JS (fallback ≈ charge row) */
.cx-bg > .cx-turnorder {
  position: absolute; top: 72px; left: 10px; transform: none; z-index: 6;
  width: 148px; max-height: min(40vh, 320px); overflow-y: auto;
  flex-direction: column !important;
}
/* Enemies sit mid-left of the field; extra gap so telegraphs don't collide */
.cx-bg > .cx-monsters {
  position: absolute; top: 158px; left: 168px; right: 250px; z-index: 5;
  display: flex; gap: 36px; flex-wrap: wrap; justify-content: flex-start;
  row-gap: 40px;
}
/* Party: bottom-right, stack upward — you at bottom, allies above.
   Lane bar is a ::before on the party so it always matches stack height
   and sits one edge-gap to the left (equal to `right` / distance to screen). */
.cx-bg > .cx-party {
  --cx-party-edge: 48px;
  position: absolute; right: var(--cx-party-edge); bottom: 108px; top: auto; z-index: 5;
  display: flex; flex-direction: column-reverse; align-items: flex-end; justify-content: flex-end;
  gap: 12px; max-width: 210px; max-height: calc(100% - 160px); overflow-y: auto;
  border-left: none; padding-left: 0;
}
.cx-bg > .cx-party::before {
  content: '';
  position: absolute;
  top: -10px; bottom: -10px;
  left: calc(-1 * var(--cx-party-edge));
  width: 2px;
  background: rgba(232, 182, 74, .55);
  box-shadow: 0 0 12px rgba(232, 182, 74, .25);
  pointer-events: none;
}
/* Legacy standalone divider (unused; kept hidden if present) */
.cx-bg > .cx-lane-divider { display: none !important; }
/* 3-player: slightly tighter party gaps */
.cx-bg.cx-party-3 > .cx-party { gap: 8px; }
/* 4-player: compact party + nudge field chrome down so the stack fits */
.cx-bg.cx-party-4 > .cx-monsters { top: 188px; }
.cx-bg.cx-party-4 > .cx-party {
  gap: 4px; bottom: 92px; max-height: calc(100% - 130px);
}
.cx-bg.cx-party-4 > .cx-party .combatant { width: 142px; }
.cx-bg.cx-party-4 > .cx-party .fighter-sprite { margin-bottom: 4px; }
.cx-bg.cx-party-4 > .cx-party .cx-bar-row { margin-top: 3px; }
.cx-bg.cx-party-4 > .cx-log { bottom: 84px; height: 130px; max-height: 130px; }
.cx-bg.cx-party-4 > .combat-actions { bottom: 16px; }
.cx-bg > .cx-mod ~ .cx-monsters { top: 198px; }
.cx-bg.cx-party-4 > .cx-mod ~ .cx-monsters { top: 220px; }
.cx-bg > .combat-fx-layer {
  position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: visible;
}
/* Combat log anchored bottom-left — wide strip up to the party lane */
.cx-bg > .cx-log {
  position: absolute; bottom: 96px; left: 16px; z-index: 6;
  width: calc(100% - 260px); max-width: 720px;
  height: 160px; max-height: 160px;
  overflow-x: hidden; overflow-y: auto;
  background: none; border: none; box-shadow: none; display: block;
  transition: opacity .7s ease;
  opacity: 1;
  pointer-events: auto;
  scrollbar-width: none;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.cx-bg > .cx-log::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cx-bg > .cx-log.log-idle {
  opacity: 0.22;
}
.cx-bg > .cx-log.log-awake,
.cx-bg > .cx-log:hover {
  opacity: 1;
}
.cx-bg > .cx-log:hover {
  background: rgba(10, 6, 18, .42);
  border: 1px solid rgba(232,182,74,.28);
  padding: 8px 10px;
}
/* Balance empty side cells so the floor plate stays centred */
.cx-bg > .cx-topbar .cx-side { width: 210px; flex: 0 0 210px; }
/* When a trial/modifier banner is present, nudge the HUD stack down */
.cx-bg > .cx-mod ~ .cx-topbar { top: 44px; }
.cx-bg > .cx-mod ~ .cx-monsters { top: 198px; }
.cx-bg > .combat-actions { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 8; }

/* top bar */
.cx-floor { text-align: center; padding: 8px 24px; border: 2px solid #7a6a94; background: linear-gradient(160deg, rgba(30,22,54,.92), rgba(16,10,30,.92)); }
.cx-floor-biome { font-family: var(--font-display); font-size: 9px; color: #c6b3e6; letter-spacing: 1px; }
.cx-floor-num { font-family: var(--font-display); font-size: 13px; color: #f7ecce; margin-top: 6px; }
.cx-floor-num span { color: #7a6a94; }
.cx-hero { width: 210px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 210px; }
.cx-hero-plate { width: 100%; padding: 10px 12px; border: 2px solid var(--gold); background: linear-gradient(160deg, rgba(40,28,66,.94), rgba(20,13,38,.94)); }
.cx-hero-name { font-family: var(--font-display); font-size: 13px; color: #f7ecce; }
.cx-hero-title { font-size: 18px; color: #d8b06a; margin-top: 4px; }
.cx-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cx-char-btn { cursor: pointer; font-family: var(--font-display); font-size: 10px; color: var(--on-gold); padding: 9px 16px; border: none; background: linear-gradient(180deg, #ffe6a8, #e8b64a); }
.cx-char-btn:hover { filter: brightness(1.15); }
.cx-hero-tools { display: flex; gap: 6px; justify-content: flex-end; }
.cx-tool-btn {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  border: 1px solid #6a5528;
  background: linear-gradient(160deg, rgba(40, 28, 66, .94), rgba(20, 13, 38, .94));
  color: var(--gold-bright);
}
.cx-tool-btn.ghost { color: var(--ink); }
.cx-tool-btn:hover { border-color: var(--gold); filter: brightness(1.12); }

/* vertical turn-order rail (left) + Battle Charge under floor */
.cx-turnorder {
  flex-direction: column !important; padding: 8px 8px; gap: 4px;
  background: rgba(16,10,30,.78); border: 1px solid var(--panel-edge);
}
.cx-turnorder .to-title {
  display: block; font-family: var(--font-display); font-size: 9px;
  letter-spacing: .08em; color: var(--ink-dim); margin-bottom: 4px;
}
.cx-turnorder .to-entry { padding: 4px 6px; }
.cx-turnorder .to-glyph { display: none; }
.cx-turnorder .to-name { font-size: 11px; line-height: 1.2; word-break: break-word; }
.cx-charge { background: rgba(16,10,30,.72); }
.cx-full .cx-party .combatant { width: 160px; }
.cx-full .combatant.boss { width: 210px; }

/* floating log */
.cx-log > div { font-size: 16px; color: #f2e6cc; text-shadow: 0 2px 5px #000, 0 0 8px rgba(0,0,0,.9); margin-bottom: 3px; }
.cx-full .combat-log { height: 160px; max-height: 160px; max-width: 720px; }

/* per-fighter info block: name/Lv + thin HP/MP bars + FOC pips */
.cx-full .combatant { display: flex; flex-direction: column; align-items: center; width: 172px; }
.cx-full .fighter-sprite { margin: 0 auto 8px; }
.cx-info { width: 100%; }
.cx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cx-head .fighter-name { font-family: var(--font-display); font-size: 10px; color: #ffd7dd; text-shadow: 0 2px 4px #000; }
.cx-lv { font-size: 16px; color: #ff8a9c; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.cx-full .cx-party .cx-head .fighter-name { color: #f7ecce; }
.cx-bar-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.cx-blabel { font-family: var(--font-display); font-size: 8px; width: 26px; text-shadow: 0 1px 2px #000; }
.cx-blabel.hp { color: #ff8a9c; }
.cx-blabel.mp { color: #6ab6ff; }
.cx-blabel.foc { color: #ffcf4d; }
.bar.cx-thin { flex: 1; height: 13px; position: relative; overflow: hidden; }
.cx-bar-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; line-height: 1; color: #fff8e8;
  text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; letter-spacing: .2px;
}
.cx-foc-num { position: static; margin-left: 4px; font-size: 9px; color: #ffcf4d; text-shadow: 0 1px 2px #000; }
.foc-pips { flex: 1; display: flex; gap: 3px; }
.fpip { flex: 1; height: 8px; background: rgba(58,50,32,.85); border: 1px solid #3a3320; }
.fpip.lit { background: #ffcf4d; border-color: #8a6a2e; box-shadow: 0 0 6px rgba(255,207,77,.6); }
.cx-full .fighter-statuses { margin-top: 6px; min-height: 0; }

/* ---------- misc 8-bit polish ---------- */
/* race showcase placeholder (no race sprites) */
.showcase-ph { font-family: var(--font-display); font-size: 22px; letter-spacing: 3px; color: var(--gold-bright); text-shadow: 0 0 16px var(--gold); }

/* appraised stat range — VT323 is narrow enough to keep "C · ~15–19" on one line */
.stat-appr { font-family: var(--font-body); font-size: 15px; white-space: nowrap; }

/* 8-bit scrollbars (character sheet, log, app) */
.modal, #app, .noscroll { scrollbar-width: thin; scrollbar-color: var(--gold) rgba(20,13,38,.6); }
.modal::-webkit-scrollbar, #app::-webkit-scrollbar, .noscroll::-webkit-scrollbar { width: 12px; height: 12px; }
.modal::-webkit-scrollbar-track, #app::-webkit-scrollbar-track, .noscroll::-webkit-scrollbar-track { background: rgba(20,13,38,.6); border-left: 1px solid var(--panel-edge); }
.modal::-webkit-scrollbar-thumb, #app::-webkit-scrollbar-thumb, .noscroll::-webkit-scrollbar-thumb { background: var(--gold); border: 2px solid #6a5528; border-radius: 0; }
.modal::-webkit-scrollbar-thumb:hover, #app::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

/* ---------- §3: Monolith press-and-hold — the world contracts, scroll locks ---------- */
body.crystal-holding #app { overflow: hidden !important; }
body.crystal-holding #app > .screen { transform: scale(.93); transform-origin: 50% 40%; filter: saturate(1.15) brightness(1.04); }
#app > .screen { transition: transform .2s ease, filter .2s ease; }

/* ---------- §4: damage-formula hint on skill buttons (quiet, bottom-aligned) ---------- */
.action-bar.mode-skills .skill-btn {
  display: flex; flex-direction: column; align-items: stretch; min-height: 88px;
}
.action-bar.mode-skills .sk-formula {
  font-family: var(--font-body); font-size: 9px; font-weight: 400;
  color: #9a8f78; margin-top: auto; padding-top: 8px;
  letter-spacing: .15px; opacity: .9; line-height: 1.2;
}

/* ---------- §11: hidden-path screen glitch ---------- */
.glitch-overlay { position: absolute; inset: 0; z-index: 60; pointer-events: none; mix-blend-mode: screen; }
.glitch-overlay .glitch-bars {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,0,80,.10) 0 2px, transparent 2px 5px, rgba(0,255,200,.10) 5px 7px, transparent 7px 11px);
  animation: glitch-shift .09s steps(2) infinite;
}
.glitch-overlay .glitch-scan {
  position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(rgba(180,120,255,.28), transparent);
  animation: glitch-scan 1.4s linear;
}
.glitching #app { animation: glitch-jitter .1s steps(2) 12; }
@keyframes glitch-shift { 0% { transform: translateX(-3px); } 100% { transform: translateX(3px); } }
@keyframes glitch-jitter { 0% { transform: translate(0,0); } 25% { transform: translate(-3px,1px); filter: hue-rotate(40deg); } 50% { transform: translate(3px,-2px); } 75% { transform: translate(-2px,-1px); filter: hue-rotate(-30deg); } 100% { transform: translate(0,0); } }
@keyframes glitch-scan { 0% { top: -22%; } 100% { top: 100%; } }

/* ---------- §17: compendium / debug screen ---------- */
.dbg-screen { max-width: 1180px; }
.dbg-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.dbg-panel { animation: fade-in .2s ease both; }
.dbg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.dbg-card { border: 2px solid var(--panel-edge); border-left: 4px solid var(--accent, var(--gold)); background: rgba(20,13,38,.6); padding: 12px 14px; }
.dbg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
/* Thumbnail viewport — must not grow with combat-sized children (min-width:auto). */
.dbg-sprite {
  width: 72px; height: 72px;
  flex: 0 0 72px;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.dbg-enemy .dbg-sprite,
.dbg-head .dbg-sprite {
  width: 72px; height: 72px;
  flex: 0 0 72px;
}
.dbg-sprite .px-sprite,
.dbg-sprite .anim-sprite { margin: 0 !important; }
.dbg-sub { font-size: 15px; margin: 4px 0; padding-left: 6px; border-left: 2px solid rgba(255,255,255,.12); }
.dbg-sub.secret { border-left-color: var(--gold); }
.dbg-sub2 { font-size: 14px; color: var(--ink-dim); padding-left: 14px; }
.dbg-skill { color: var(--teal); font-size: 13px; }
.dbg-dim { color: var(--ink-dim); font-size: 13px; }
.dbg-group { margin-bottom: 18px; }
.dbg-group h4 { border-bottom: 1px solid var(--panel-edge); padding-bottom: 4px; margin-bottom: 8px; text-transform: capitalize; }
.dbg-collapse { border-bottom: none; }
.dbg-collapse-sum {
  cursor: pointer; list-style: none; font-family: var(--font-display, inherit); font-size: 16px; font-weight: 600;
  border-bottom: 1px solid var(--panel-edge); padding: 6px 0; margin-bottom: 8px; text-transform: capitalize;
  color: var(--ink); user-select: none;
}
.dbg-collapse-sum::-webkit-details-marker { display: none; }
.dbg-collapse-sum::before { content: '▸ '; color: var(--ink-dim); font-size: 14px; }
.dbg-collapse[open] > .dbg-collapse-sum::before { content: '▾ '; }
.dbg-collapse-sum:hover { color: var(--gold); }
.dbg-row { padding: 5px 0; border-bottom: 1px dotted rgba(255,255,255,.06); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dbg-row .dbg-dim { flex-basis: 100%; }
.dbg-choice { flex-basis: 100%; font-size: 14px; margin: 2px 0 2px 8px; padding-left: 8px; border-left: 2px solid rgba(255,255,255,.1); }
.dbg-choice .dbg-dim { flex-basis: auto; margin-top: 1px; }
.dbg-enemy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.dbg-enemy { display: flex; align-items: center; gap: 10px; border: 1px solid var(--panel-edge); background: rgba(20,13,38,.5); padding: 6px 8px; }
.dbg-inspect { font-size: 14px; }
.dbg-inspect-row {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px dotted rgba(255,255,255,.06);
}
.dbg-inspect-val { color: var(--ink-dim); text-align: right; }
.dbg-kv {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 8px;
  padding: 2px 0; font-size: 13px;
}
.dbg-kv > span:first-child { color: var(--ink-dim); }
.dbg-kv-stack { align-items: start; }
.dbg-npc, .dbg-secret, .dbg-event {
  padding: 8px 0 10px; border-bottom: 1px dotted rgba(255,255,255,.08);
}
.dbg-mem { margin: 0; padding-left: 1.1rem; }
.dbg-mem li { font-size: 13px; }
.dbg-check { font-size: 13px; color: var(--ink-dim); margin-left: 8px; }
.dbg-check.ok { color: #8fd98a; }
.dbg-check.no { color: #d98a8a; }
.dbg-player-view { margin: 4px 0; color: var(--gold); font-size: 14px; }
.dbg-devview { margin-top: 4px; }
.dbg-devview summary { cursor: pointer; color: var(--ink-dim); font-size: 12px; letter-spacing: .04em; }
.dbg-ok-label { color: #8fd98a; font-size: 13px; margin: 4px 0 2px; }
.dbg-no-label { color: #d98a8a; font-size: 13px; margin: 4px 0 2px; }
.dbg-weight { margin: 4px 0 0; font-size: 12px; color: var(--ink-dim); }
.dbg-weight > div:last-child { color: var(--ink); margin-top: 2px; }
.dbg-poke-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 8px 0;
}
.dbg-poke label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.dbg-input {
  background: rgba(12,8,24,.7); color: var(--ink); border: 1px solid var(--panel-edge);
  padding: 4px 8px; font: inherit; font-size: 13px; min-width: 10rem;
}
.dbg-input-sm { min-width: 4rem; width: 4.5rem; }
.dbg-check-lab { user-select: none; }