/* Covenant UI: a pixel-RPG console shell.
   Full-viewport stage, framed "plates" with gold hairlines, tight corners,
   and hard-edged lips under controls for tactile press feedback. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Nunito:wght@500;600;700;800;900&display=swap');
/* self-hosted pixel faces (OFL, see assets/fonts) */
@font-face { font-family: 'Pixelify Sans'; font-weight: 400 700; font-display: swap; src: url('assets/fonts/pixelify-sans-bold.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pixelify Sans'; font-weight: 400 700; font-display: swap; src: url('assets/fonts/pixelify-sans-bold-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Tiny5'; font-weight: 400; font-display: swap; src: url('assets/fonts/tiny5-regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tiny5'; font-weight: 400; font-display: swap; src: url('assets/fonts/tiny5-regular-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;

  /* surfaces, darkest to lightest */
  --bg: #0d0b14;
  --bg-deep: #07060b;
  --panel: #17131f;
  --panel-2: #211b2c;
  --panel-3: #2d2539;
  --line: #433853;
  --plate: #0d0b14ee;

  /* ink */
  --text: #f7f0e1;
  --muted: #b8aec7;
  --faint: #8f859f;

  /* accents */
  --gold: #f4c75a;
  --gold-hi: #ffdf8e;
  --gold-deep: #9a6d1c;
  --gold-line: #f4c75a47;
  --gold-ink: #2a1c05;
  --crimson: #e5584f;
  --crimson-deep: #8f2a2a;
  --leaf: #7fd68f;
  --leaf-deep: #2f7a46;
  --sky: #74c7f2;
  --night: #121830;
  --valley: #1b2a25;
  --valley-line: #3a5a4c;

  /* type */
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --sans: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --pixel: 'Pixelify Sans', 'Nunito', ui-monospace, monospace;
  --t-xs: 11px;
  --t-s: 12px;
  --t-m: 14px;
  --t-l: 18px;
  --t-xl: 24px;
  --t-2xl: 36px;

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* shape: tight corners read as pixel UI, not web cards */
  --r-s: 2px;
  --r-m: 4px;
  --r-l: 6px;
  --r-xl: 8px;
  --lip: 3px;

  --topbar: 60px;
  --ease: cubic-bezier(.2, .9, .3, 1.2);

  /* shared night sky */
  --stars:
    radial-gradient(1.5px 1.5px at 8% 14%, #fff 98%, transparent),
    radial-gradient(1px 1px at 17% 31%, #fffc 98%, transparent),
    radial-gradient(2px 2px at 26% 9%, #ffe9b0 98%, transparent),
    radial-gradient(1px 1px at 38% 22%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 47% 11%, #fffd 98%, transparent),
    radial-gradient(1px 1px at 58% 27%, #fff 98%, transparent),
    radial-gradient(2px 2px at 69% 7%, #fff 98%, transparent),
    radial-gradient(1px 1px at 76% 19%, #fffc 98%, transparent),
    radial-gradient(1.5px 1.5px at 88% 12%, #ffe9b0 98%, transparent),
    radial-gradient(1px 1px at 94% 29%, #fff 98%, transparent),
    radial-gradient(1px 1px at 3% 38%, #fffc 98%, transparent),
    radial-gradient(1.5px 1.5px at 62% 38%, #fff9 98%, transparent);
  --hills:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath fill='%2314201f' d='M0 150 C150 108 260 140 400 118 C560 92 700 150 850 124 C920 111 960 124 1000 118 L1000 200 L0 200Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath fill='%231c2c33' d='M0 110 C120 52 220 88 330 66 C470 36 560 100 700 76 C820 55 920 88 1000 64 L1000 200 L0 200Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 600 var(--t-m)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, a, input { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1, h2, h3 { text-wrap: balance; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
#game-container:focus-visible { outline-offset: -3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border: 2px solid var(--panel); border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }

/* ---------- shell ---------- */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 28px) var(--s-4); }
@media (min-width: 1000px) and (min-height: 760px) and (hover: hover) and (pointer: fine) {
  .app { height: 100dvh; overflow: hidden; }
}

/* ---------- shared pieces ---------- */
.plate { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line), inset 0 2px 0 #ffffff0f, 0 4px 0 #000000a8; }
.eyebrow { display: flex; align-items: center; gap: var(--s-2); font: 700 var(--t-s)/1.2 var(--pixel); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); }
.eyebrow svg { width: 13px; height: 13px; }
.eyebrow-divider { width: 4px; height: 4px; background: var(--gold-deep); transform: rotate(45deg); }
.section-label { font: 700 var(--t-xs)/1.2 var(--pixel); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
kbd { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 26px; padding: 0 6px; font: 600 var(--t-s) var(--pixel); color: var(--text); background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: 0 var(--lip) 0 var(--bg-deep); }
.space-key, .click-key { min-width: 60px; letter-spacing: 1px; }

.gold-button, .secondary-button, .text-button, .icon-button, .arena-icon {
  transition: transform .12s var(--ease), background-color .15s, color .15s, box-shadow .12s, filter .15s;
}
.gold-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; font-weight: 900; font-size: var(--t-m); letter-spacing: .8px; text-transform: uppercase; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 -3px 0 #9a6d1c66, inset 0 2px 0 #fff8, 0 var(--lip) 0 var(--gold-deep), 0 calc(var(--lip) + 2px) 0 var(--bg-deep); }
.gold-button svg { width: 18px; height: 18px; stroke-width: 2.4; }
.gold-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); }
.gold-button:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 -3px 0 #9a6d1c66, inset 0 2px 0 #fff8, 0 0 0 var(--gold-deep), 0 2px 0 var(--bg-deep); }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; font-weight: 800; font-size: var(--t-m); color: var(--text); background: var(--panel-3); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 2px 0 #ffffff12, 0 var(--lip) 0 var(--bg-deep); }
.secondary-button:hover:not(:disabled) { background: var(--line); transform: translateY(-2px); }
.secondary-button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.text-button { min-height: 32px; white-space: nowrap; padding: 0 12px; font: 700 var(--t-xs) var(--pixel); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); border-radius: var(--r-s); }
.text-button:hover { color: var(--gold); background: #ffffff0f; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); background: var(--panel-2); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 2px 0 #ffffff12, 0 var(--lip) 0 var(--bg-deep); }
.icon-button:hover { color: var(--gold); transform: translateY(-2px); }
.icon-button:active { transform: translateY(2px); box-shadow: none; }

.live-dot { display: inline-block; width: 8px; height: 8px; background: var(--leaf); box-shadow: 0 0 8px var(--leaf); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
@keyframes twinkle { 50% { opacity: .55; } }

/* ---------- top bar ---------- */
.topbar { position: relative; z-index: 3; flex: none; height: var(--topbar); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0 clamp(12px, 2vw, 28px); background: linear-gradient(180deg, #1a1524, var(--bg)); border-bottom: 2px solid var(--bg-deep); box-shadow: 0 1px 0 var(--gold-line); }
.brand { display: flex; align-items: center; gap: var(--s-3); padding: 0; font: 900 20px/1 var(--display); letter-spacing: 4px; color: var(--text); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: 0 var(--lip) 0 var(--gold-deep); transition: transform .2s var(--ease); }
.brand-mark svg { width: 20px; height: 20px; stroke-width: 2.8; }
.screen-tabs { display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.nav-link { position: relative; height: 34px; padding: 0 18px; border-radius: var(--r-s); font: 600 var(--t-s) var(--pixel); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); transition: background-color .15s, color .15s; }
.nav-link:hover { color: var(--text); background: var(--panel-2); }
.nav-link.active { color: var(--gold-ink); background: var(--gold); box-shadow: inset 0 -3px 0 #9a6d1c88; }
.nav-dot { display: none; }
.topbar-right { display: flex; align-items: center; gap: var(--s-2); }
.topbar-divider { width: 2px; height: 24px; margin: 0 var(--s-1); background: var(--panel-3); }
.resources { display: flex; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 10px; font: 600 var(--t-m) var(--pixel); color: var(--text); background: var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }
.chip svg { width: 18px; height: 18px; }
.chip b { font-weight: 600; }
.chip-gold svg { color: var(--gold); }
.chip-flask svg { color: var(--crimson); }
.chip-relic svg { color: var(--sky); }
button.chip { transition: background-color .15s, box-shadow .15s; }
button.chip:hover { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--gold-deep); }

/* ---------- stage header ---------- */
.chapter-heading { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-3); }
.chapter-copy { min-width: 0; }
h2#chapter-title { margin: 4px 0 0; font: 900 clamp(20px, 2.4vw, 28px)/1.1 var(--display); letter-spacing: .5px; }
h2#chapter-title > span { color: var(--gold); }
.chapter-heading p { margin: 2px 0 0; font-size: var(--t-s); color: var(--muted); }
.chapter-meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.difficulty { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 12px; font: 700 var(--t-xs) var(--pixel); letter-spacing: 1.4px; color: var(--crimson); background: var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px #e5584f55; }
.difficulty svg { width: 14px; height: 14px; }
.seed-button { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 12px; font: 700 var(--t-xs) var(--pixel); letter-spacing: 1.4px; color: var(--muted); background: var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, color .15s; }
.seed-button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.seed-button > span { color: var(--gold); font-size: var(--t-s); }

/* ---------- journey / map ---------- */
.journey-screen { position: relative; flex: 1; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--bg-deep); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--gold-line), 0 4px 0 #000000a8;
  background: var(--hills), radial-gradient(circle at 86% 16%, #fff2c8 0 16px, #fff2c833 17px 30px, transparent 31px), linear-gradient(180deg, #0d1226 0%, #1a2145 42%, #3a3350 66%, #1b2a25 66.1%);
  background-size: 100% 22%, 100% 34%, auto, auto; background-position: bottom, bottom, 0 0, 0 0; background-repeat: no-repeat; }
.journey-screen::before { content: ''; position: absolute; inset: 0 0 40% 0; background-image: var(--stars); animation: twinkle 4s ease-in-out infinite; pointer-events: none; }
.map-topline { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); background: linear-gradient(180deg, #07060bd9, #07060b80); font: 700 var(--t-xs)/1 var(--pixel); letter-spacing: 1.6px; color: var(--text); border-bottom: 1px solid var(--gold-line); }
.map-topline > div { display: flex; align-items: center; gap: 10px; }
.map-topline-actions { gap: var(--s-1) !important; }
.map-top-separator { color: var(--faint); }
.map-layout { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 272px minmax(0, 1fr) 256px; gap: var(--s-3); padding: var(--s-3); }

.pilgrim-panel, .route-panel { min-height: 0; padding: var(--s-4); overflow-y: auto; background: linear-gradient(180deg, #211b2cf2, #17131ff2); }
.pilgrim-panel > .section-label, .route-panel > .section-label { display: block; text-align: center; color: var(--gold); }
.pilgrim-portrait { position: relative; height: 128px; display: grid; place-items: center; margin-top: var(--s-2); }
.pilgrim-portrait img { position: relative; z-index: 1; width: 170px; height: 128px; object-fit: contain; image-rendering: pixelated; }
.portrait-halo { position: absolute; bottom: 2px; width: 130px; height: 28px; border-radius: 50%; background: radial-gradient(ellipse at center, #f4c75a40, transparent 70%); }
.pilgrim-panel h2 { margin: var(--s-1) 0 0; text-align: center; font: 900 26px/1.1 var(--display); }
.pilgrim-panel > p { margin: 2px 0 var(--s-2); text-align: center; font-size: var(--t-m); color: var(--muted); }
.hero-specialty { width: max-content; max-width: 100%; margin: 0 auto; padding: 3px 12px; font: 700 var(--t-xs) var(--pixel); letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--gold-line); }
.run-vitals { margin-top: var(--s-4); }
.run-vitals > div:first-child { display: flex; justify-content: space-between; align-items: baseline; font: 700 var(--t-xs) var(--pixel); letter-spacing: 1.4px; color: var(--muted); }
.run-vitals b { font: 600 var(--t-m) var(--pixel); color: var(--text); font-variant-numeric: tabular-nums; }
.map-health-track { height: 14px; margin: 6px 0 var(--s-3); padding: 2px; background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); }
.map-health-track i { display: block; height: 100%; min-width: 4px; background: linear-gradient(180deg, #ff7d72, var(--crimson) 50%, var(--crimson-deep)); transition: width .3s; }
.run-resources { display: flex; gap: var(--s-2); }
.run-resources span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; font-size: var(--t-s); color: var(--muted); background: var(--bg-deep); border-radius: var(--r-s); }
.run-resources b { color: var(--text); }
.run-resources svg { width: 15px; height: 15px; color: var(--gold); }
.map-skill-heading { display: flex; align-items: center; justify-content: space-between; margin: var(--s-5) 0 var(--s-2); }
.map-skill-heading .text-button { min-height: 26px; padding: 0 8px; }
.map-skill { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 6px 6px; margin-bottom: 6px; text-align: left; background: var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); transition: transform .12s var(--ease), box-shadow .15s; }
.map-skill:hover { box-shadow: inset 0 0 0 1px var(--skill-color); transform: translateX(2px); }
.map-skill > svg { width: 38px; height: 38px; padding: 8px; color: var(--skill-color); background: var(--panel-2); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-color) 45%, transparent); }
.map-skill > div { flex: 1; min-width: 0; }
.map-skill strong { display: block; font-size: var(--t-m); font-weight: 800; line-height: 1.2; }
.map-skill small { display: block; font-size: var(--t-xs); color: var(--muted); }
.passive-card { display: flex; gap: 10px; margin-top: var(--s-3); padding: 10px 12px; background: #f4c75a14; border-left: 3px solid var(--gold); border-radius: var(--r-s); }
.passive-card svg { width: 16px; height: 16px; margin-top: 3px; color: var(--gold); }
.passive-card strong { font: 700 var(--t-s) var(--pixel); letter-spacing: .6px; color: var(--gold); }
.passive-card p { margin: 2px 0 0; font-size: var(--t-s); line-height: 1.5; color: var(--muted); }
.inventory-link { display: flex; align-items: center; gap: var(--s-2); width: 100%; margin-top: var(--s-3); min-height: 42px; padding: 0 var(--s-3); font-size: var(--t-m); font-weight: 800; background: var(--panel-3); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 2px 0 #ffffff12, 0 var(--lip) 0 var(--bg-deep); transition: transform .12s var(--ease), color .15s; }
.inventory-link:hover { transform: translateY(-2px); color: var(--gold); }
.inventory-link:active { transform: translateY(2px); box-shadow: none; }
.inventory-link svg { width: 18px; height: 18px; color: var(--gold); }
.inventory-link span { margin-left: auto; min-width: 24px; padding: 0 7px; text-align: center; font: 700 var(--t-s)/20px var(--pixel); color: var(--gold-ink); background: var(--gold); border-radius: var(--r-s); }

.map-center { position: relative; min-width: 0; display: flex; flex-direction: column; }
.map-act-label { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; padding: var(--s-2) 0 var(--s-3); font: 800 var(--t-m) var(--display); letter-spacing: 4px; color: var(--text); text-shadow: 0 2px 0 var(--bg-deep); }
.map-act-label > span { width: 36px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.map-act-label > span:last-child { transform: scaleX(-1); }
.map-board { position: relative; flex: 1; min-height: 400px; }
.map-topography { display: none; }
.map-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-paths path { fill: none; stroke: #9fb8a866; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke; }
.map-paths path.available-path { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 10 8; animation: march 1s linear infinite; filter: drop-shadow(0 0 4px #f4c75a99); }
.map-paths path.travelled { stroke: var(--leaf); stroke-width: 4; stroke-dasharray: none; }
@keyframes march { to { stroke-dashoffset: -18; } }
.map-begin-label { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 700 var(--t-xs) var(--pixel); letter-spacing: 2px; color: var(--muted); text-shadow: 0 1px 0 var(--bg-deep); }

.map-node { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 64px; color: var(--faint); }
.node-orb { width: 48px; height: 48px; display: grid; place-items: center; color: var(--faint); background: radial-gradient(circle at 50% 30%, var(--panel-3), var(--bg-deep)); border: 3px solid #4d6a5d; border-radius: 50%; box-shadow: 0 var(--lip) 0 #000000a0; transition: transform .15s var(--ease), background-color .15s, box-shadow .15s; }
.node-orb svg { width: 22px; height: 22px; }
.node-caption { padding: 2px 8px; font: 600 var(--t-xs)/1.3 var(--pixel); letter-spacing: .6px; white-space: nowrap; color: var(--muted); background: var(--plate); border-radius: var(--r-s); }
.map-node.unavailable { cursor: default; opacity: .8; }
.map-node.available .node-orb { color: var(--node-color); border-color: var(--node-color); box-shadow: 0 var(--lip) 0 #000000a0, 0 0 0 5px color-mix(in srgb, var(--node-color) 22%, transparent), 0 0 22px color-mix(in srgb, var(--node-color) 55%, transparent); animation: hop 1.4s ease-in-out infinite; }
.map-node.available .node-caption { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--node-color) 50%, transparent); }
.map-node.available:hover .node-orb, .map-node.available:focus-visible .node-orb { animation: none; transform: translateY(-4px) scale(1.14); background: radial-gradient(circle at 50% 30%, #3d3350, var(--bg-deep)); }
.map-node.available:active .node-orb { transform: translateY(1px) scale(1); }
@keyframes hop { 50% { transform: translateY(-4px); } }
.map-node.completed .node-orb { color: var(--leaf); border-color: var(--leaf-deep); }
.map-node.completed .node-caption { color: var(--leaf); }
.map-node.current .node-orb { color: var(--gold); border-color: var(--gold); outline: 2px dashed var(--gold-deep); outline-offset: 5px; }
.map-node.boss .node-orb { width: 72px; height: 72px; border-color: var(--gold); color: var(--gold); box-shadow: 0 var(--lip) 0 #000000a0, 0 0 30px #f4c75a55; }
.map-node.boss.unavailable .node-orb { border-color: var(--gold-deep); box-shadow: 0 var(--lip) 0 #000000a0; }
.map-node.boss svg { width: 34px; height: 34px; }
.map-node.boss .node-caption { font: 800 var(--t-s) var(--display); letter-spacing: 2px; color: var(--gold); }
.map-bottom-hint { flex: none; margin: var(--s-3) var(--s-2) 0; padding: 10px 16px; text-align: center; font: 800 var(--t-l)/1.3 var(--display); background: var(--plate); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line); }
.map-bottom-hint small { display: block; margin-top: 2px; font: 600 var(--t-s) var(--sans); color: var(--muted); }

.route-preview { margin-top: var(--s-3); padding: var(--s-4); min-height: 236px; background: var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.preview-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--s-3); background: var(--panel-2); border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; color: var(--gold); }
.preview-icon svg { width: 26px; height: 26px; }
.preview-eyebrow { font: 700 var(--t-xs)/1.3 var(--pixel); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.route-preview h3 { margin: 6px 0 var(--s-2); font: 800 21px/1.15 var(--display); }
.route-preview p { margin: 0; font-size: var(--t-s); line-height: 1.6; color: var(--muted); }
.map-legend { margin-top: var(--s-4); display: grid; gap: 2px; }
.legend-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; font-size: var(--t-s); font-weight: 700; color: var(--text); border-bottom: 1px dashed var(--panel-3); }
.legend-row svg { width: 16px; height: 16px; color: var(--node-color); }
.legend-row span:last-child { margin-left: auto; font: 600 10px var(--pixel); letter-spacing: 1px; color: var(--muted); }
.autosave-note { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font: 700 var(--t-xs) var(--pixel); letter-spacing: 1.4px; color: var(--muted); }

/* ---------- arena ---------- */
.arena-shell { position: relative; flex: none; width: 100%; aspect-ratio: 2 / 1; margin-inline: auto; background: var(--valley); border: 4px solid var(--bg-deep); border-radius: var(--r-l); box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 4px var(--bg-deep), 0 8px 0 4px #000000a8; }
@media (min-width: 1000px) and (min-height: 760px) and (hover: hover) and (pointer: fine) {
  .arena-shell { width: min(100%, max(520px, calc((100dvh - 272px) * 2))); }
}
.arena-shell:fullscreen { aspect-ratio: auto; width: 100%; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.arena-shell:fullscreen #game-container { width: 100%; height: 100%; border-radius: 0; }
#game-container { position: relative; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; border-radius: 2px; background: #4e7767; }
#game-container canvas { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; image-rendering: crisp-edges; }
.arena-corner, .game-vignette { display: none; }

.arena-hud { position: absolute; inset: 12px 12px auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); pointer-events: none; }
.player-hud { display: flex; align-items: center; gap: var(--s-3); padding: 6px 14px 6px 6px; background: var(--plate); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line), 0 3px 0 #000000a0; }
.portrait-frame { position: relative; width: 58px; height: 58px; flex-shrink: 0; overflow: hidden; background: var(--valley); border: 2px solid var(--gold); border-radius: var(--r-s); box-shadow: 0 0 0 2px var(--bg-deep); }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform: scale(1.2); image-rendering: pixelated; }
.player-vitals { width: 210px; }
.player-name { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: 5px; font: 700 var(--t-s)/1 var(--pixel); letter-spacing: 1.8px; color: var(--text); }
.level { padding: 2px 7px; font: 700 var(--t-xs) var(--pixel); letter-spacing: .6px; color: var(--gold-ink); background: var(--gold); border-radius: var(--r-s); }
.level b { font-weight: 700; }
.vital { position: relative; overflow: hidden; background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); }
.vital::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #07060b99 calc(10% - 1px) 10%); pointer-events: none; }
.vital div { height: 100%; transition: width .15s; }
.health { height: 20px; padding: 3px; }
.health div { background: linear-gradient(180deg, #ff7d72, var(--crimson) 50%, var(--crimson-deep)); }
.vital span { position: absolute; z-index: 2; inset: 0; padding-right: 8px; font: 600 var(--t-xs)/20px var(--pixel); text-align: right; letter-spacing: .6px; color: var(--text); text-shadow: 0 1px 0 var(--bg-deep), 0 0 3px var(--bg-deep); }
.stamina { height: 10px; width: 82%; margin-top: 5px; padding: 2px; }
.stamina div { background: linear-gradient(180deg, #b6f0c0, var(--leaf) 50%, var(--leaf-deep)); }
.flask-dots { display: flex; align-items: center; gap: 5px; height: 14px; margin-top: 6px; color: var(--gold); }
.flask-dots svg { width: 14px; height: 14px; }
.flask-dots i { width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg) scale(.82); }
.flask-dots i.empty { background: none; border: 2px solid var(--gold-deep); }
.flask-dots span { margin-left: 4px; font: 600 10px var(--pixel); letter-spacing: 1.4px; color: var(--muted); }
.arena-tools { display: flex; align-items: center; gap: var(--s-2); pointer-events: auto; }
.phase-chip { padding: 0 12px; height: 36px; display: inline-flex; align-items: center; font: 700 var(--t-xs) var(--pixel); letter-spacing: 1.4px; color: var(--text); background: var(--plate); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line); }
.arena-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--text); background: var(--plate); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line), 0 3px 0 #000000a0; }
.arena-icon svg { width: 18px; height: 18px; }
.arena-icon:hover { color: var(--gold); transform: translateY(-2px); }
.arena-icon:active { transform: translateY(2px); }

.encounter-intro { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); padding: 22px 28px 18px; text-align: center; background: linear-gradient(180deg, #17131ff5, #0d0b14f5); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line), 0 6px 0 #000000a0; transition: opacity .3s, transform .3s var(--ease); }
.encounter-intro.hidden { display: block !important; opacity: 0; pointer-events: none; transform: translate(-50%, -46%); box-shadow: none; }
.intro-rule { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-bottom: var(--s-2); color: var(--gold); }
.intro-rule span { width: 44px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-deep)); }
.intro-rule span:last-child { transform: scaleX(-1); }
.intro-rule svg { width: 20px; height: 20px; stroke-width: 2.4; }
.intro-eyebrow { font: 700 var(--t-s) var(--pixel); letter-spacing: 2.4px; color: var(--gold); }
.encounter-intro h2 { margin: var(--s-2) 0; font: 900 clamp(26px, 4vw, 38px)/1.05 var(--display); text-shadow: 0 3px 0 var(--bg-deep); }
.encounter-intro p { margin: 0 0 var(--s-4); font-size: var(--t-m); color: var(--muted); }
.encounter-intro small { display: block; margin-top: var(--s-3); font-size: var(--t-s); color: var(--faint); }

.combat-announcement { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); max-width: 90%; padding: 8px 26px; font: 900 clamp(18px, 3vw, 28px)/1.2 var(--display); letter-spacing: 2px; text-align: center; color: var(--gold); background: var(--plate); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line); opacity: 0; pointer-events: none; transition: opacity .25s; }
.combat-announcement:empty { display: none; }
.combat-announcement.visible { opacity: 1; }

.boss-hud { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(60%, 620px); padding: 8px 16px 8px; background: var(--plate); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line), 0 3px 0 #000000a0; pointer-events: none; }
.boss-name { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-bottom: 6px; font: 800 17px/1 var(--display); letter-spacing: 3px; color: var(--gold); text-shadow: 0 2px 0 var(--bg-deep); }
.boss-diamond { width: 8px; height: 8px; overflow: hidden; font-size: 0; background: var(--gold-deep); transform: rotate(45deg); }
.boss-health { position: relative; display: flex; justify-content: space-evenly; height: 18px; background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.boss-health > div { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(100% - 6px); background: linear-gradient(180deg, #ff7d72, var(--crimson) 50%, var(--crimson-deep)); transition: width .15s; }
.boss-health > #boss-damage-trail { background: var(--gold); transition: width 1s .15s; }
.boss-health i { z-index: 1; width: 2px; height: 100%; background: var(--bg-deep); }
.boss-subtitle { display: flex; justify-content: space-between; margin-top: 5px; font: 600 var(--t-xs) var(--pixel); letter-spacing: 1.4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.arena-bottom-note { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: var(--s-2); padding: 6px 12px; font: 600 10px var(--pixel); letter-spacing: 1.2px; color: var(--muted); background: var(--plate); border-radius: var(--r-s); }
@media (max-width: 1400px) { .arena-bottom-note { display: none; } }
.game-loading { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); font: 700 var(--t-s) var(--pixel); letter-spacing: 3px; color: var(--gold); background: var(--panel); border-radius: 2px; transition: opacity .4s; }
.game-loading.done { opacity: 0; pointer-events: none; }
.loading-cross svg { width: 40px; height: 40px; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.shake { animation: shake .2s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.touch-controls { display: none; }

/* ---------- action dock: skills + controls ---------- */
.action-dock { flex: none; display: flex; align-items: stretch; justify-content: center; gap: var(--s-3); width: 100%; margin-inline: auto; }
.action-dock:not(:has(> :not(.hidden))) { display: none; }
@media (min-width: 1000px) and (min-height: 760px) and (hover: hover) and (pointer: fine) {
  .action-dock { width: min(100%, max(520px, calc((100dvh - 272px) * 2))); }
}
.skill-bar { flex: none; display: flex; align-items: stretch; gap: var(--s-2); }
.combat-skill { position: relative; display: flex; align-items: center; gap: 10px; min-width: 210px; min-height: 64px; padding: 8px 12px 8px 8px; overflow: hidden; text-align: left; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-color) 40%, transparent), 0 var(--lip) 0 #000000a8; transition: transform .12s var(--ease); }
.combat-skill:hover { transform: translateY(-2px); }
.combat-skill:active { transform: translateY(2px); }
.combat-skill > svg { z-index: 1; width: 44px; height: 44px; padding: 9px; color: var(--skill-color); background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-color) 50%, transparent); }
.combat-skill kbd { z-index: 1; order: 3; height: 24px; min-width: 24px; }
.skill-label { z-index: 1; flex: 1; }
.combat-skill strong { display: block; font-size: var(--t-m); line-height: 1.2; font-weight: 800; }
.combat-skill small { display: block; font-size: var(--t-xs); color: var(--muted); }
.cooldown-fill { position: absolute; inset: 0; background: #07060bcc; transform-origin: left; pointer-events: none; }
.cooldown-text { position: absolute; right: 50px; top: 50%; z-index: 2; transform: translateY(-50%); font: 700 26px var(--pixel); color: var(--gold); }
.skill-bar-note { display: none; }

.controls-panel { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 8px 16px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line), 0 var(--lip) 0 #000000a8; }
.controls-title { display: flex; align-items: center; gap: var(--s-3); padding-right: var(--s-4); font: 700 10px/1.5 var(--pixel); letter-spacing: 1.6px; color: var(--muted); border-right: 2px solid var(--panel-3); }
.controls-title svg { width: 22px; height: 22px; color: var(--gold); }
.controls-title b { font-weight: 700; color: var(--text); }
.control { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.control > span { display: flex; gap: var(--s-1); }
.control small { font: 600 10px var(--pixel); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.how-button { width: 32px; height: 32px; font: 700 var(--t-m) var(--pixel); color: var(--gold); background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--gold-line), 0 var(--lip) 0 #000000a0; transition: transform .12s var(--ease), background-color .15s, color .15s; }
.how-button:hover { color: var(--gold-ink); background: var(--gold); transform: translateY(-2px); }

/* ---------- title screen ---------- */
.title-screen { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; color: var(--text); background: var(--bg); }
.title-screen:not([open]) { display: none; }
.title-screen::backdrop { background: var(--bg); }
.title-sky { position: fixed; inset: 0; background: var(--stars), radial-gradient(circle at 80% 18%, #fff2c8 0 22px, #fff2c82e 23px 52px, transparent 53px), linear-gradient(180deg, #080a18 0%, #151b3c 45%, #3b3050 78%, #4a3a52 100%); animation: none; }
.title-sky::after { content: ''; position: absolute; inset: 0; background-image: var(--stars); opacity: .8; animation: twinkle 5s ease-in-out infinite; }
.title-hills { position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; background: var(--hills); background-size: 100% 100%; background-repeat: no-repeat; }
.title-hills::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: #101a19; }
.title-inner { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3.4vh, 32px); padding: clamp(20px, 4vh, 48px) 20px; }
.title-logo { text-align: center; animation: rise .7s var(--ease) both; }
.title-cross { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-3); color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: 0 var(--lip) 0 var(--gold-deep), 0 0 36px #f4c75a66; }
.title-cross svg { width: 24px; height: 24px; stroke-width: 2.8; }
.title-logo h1 { margin: 0; font: 900 clamp(44px, 10vw, 104px)/1 var(--display); letter-spacing: .12em; padding-left: .12em; color: var(--gold); text-shadow: 0 4px 0 #6b4510, 0 8px 0 var(--bg-deep), 0 14px 30px #000a; }
.title-logo p { margin: var(--s-3) 0 0; font: 600 var(--t-m) var(--pixel); letter-spacing: .5em; padding-left: .5em; color: var(--muted); }
.champion-stage { width: min(780px, 100%); animation: rise .7s .12s var(--ease) both; }
.champions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); }
.champion { position: relative; display: flex; align-items: stretch; gap: var(--s-3); padding: var(--s-3); text-align: left; background: linear-gradient(180deg, #211b2cf2, #17131ff2); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line), 0 var(--lip) 0 #000000a8; transition: transform .14s var(--ease), box-shadow .15s; }
.champion:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--faint), 0 6px 0 #000000a8; }
.champion:active { transform: translateY(1px); }
.champion.selected { box-shadow: inset 0 0 0 2px var(--gold), 0 var(--lip) 0 #000000a8, 0 0 28px #f4c75a40; }
.champion-art { flex: none; width: 96px; display: grid; place-items: end center; padding-bottom: 4px; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--champion-color) 40%, transparent), transparent 70%), var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.champion-art img { width: 100%; height: auto; image-rendering: pixelated; }
.champion-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.champion-info strong { font: 900 22px/1.1 var(--display); color: var(--text); }
.champion-role { font-size: var(--t-s); color: var(--muted); }
.champion-tags { width: max-content; max-width: 100%; margin: 2px 0; padding: 1px 8px; font: 700 10px/16px var(--pixel); letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--gold-line); }
.champion-passive { font-size: var(--t-s); line-height: 1.45; color: var(--muted); }
.champion-passive b { color: var(--gold); font-weight: 800; }
.champion-stats { display: flex; gap: var(--s-3); margin-top: auto; padding-top: 6px; font: 600 var(--t-xs) var(--pixel); letter-spacing: 1px; color: var(--faint); }
.champion-stats b { color: var(--text); font-weight: 600; }
.champion-check { position: absolute; top: -2px; right: -2px; width: 26px; height: 26px; display: none; place-items: center; color: var(--gold-ink); background: var(--gold); border-radius: 0 var(--r-m) 0 var(--r-m); }
.champion-check svg { width: 16px; height: 16px; stroke-width: 2.6; }
.champion.selected .champion-check { display: grid; }
.title-menu { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); animation: rise .7s .24s var(--ease) both; }
.title-start { min-width: min(340px, 100%); min-height: 60px; font-size: var(--t-l); }
.title-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.title-links .secondary-button { min-height: 40px; padding: 0 16px; font-size: var(--t-s); }
.title-verse { margin: 0; font: italic 600 var(--t-m) var(--display); color: var(--muted); text-align: center; text-shadow: 0 1px 0 var(--bg-deep); animation: rise .7s .36s var(--ease) both; }
.title-verse span { margin-left: var(--s-2); font: 700 var(--t-xs) var(--pixel); font-style: normal; letter-spacing: 1.2px; color: var(--faint); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- dialogs ---------- */
.modal { width: min(560px, calc(100vw - 32px)); max-height: 88dvh; padding: 32px 32px 28px; overflow: auto; color: var(--text); background: linear-gradient(90deg, transparent, var(--gold), transparent) top / 100% 3px no-repeat, linear-gradient(180deg, var(--panel-2), var(--panel) 160px); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line), 0 8px 0 #000000b0, 0 0 80px #000; }
.modal[open] { animation: pop .22s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.modal::backdrop { background: radial-gradient(circle at 50% 40%, #0d0b14b3, #07060bf2); backdrop-filter: blur(2px); }
.modal.wide { width: min(900px, calc(100vw - 28px)); }
.modal-close { position: absolute; top: 14px; right: 14px; }
.modal h2 { margin: var(--s-2) 0 var(--s-3); padding-right: 52px; font: 900 clamp(24px, 4vw, 34px)/1.1 var(--display); color: var(--text); text-shadow: 0 2px 0 var(--bg-deep); }
.modal h3 { margin: var(--s-4) 0 var(--s-1); font: 800 var(--t-xl) var(--display); color: var(--gold); }
.modal p { margin: 0 0 var(--s-3); font-size: var(--t-m); line-height: 1.7; color: var(--muted); max-width: 68ch; }
.modal .gold-button { margin-top: var(--s-3); }
.death-title { color: var(--crimson) !important; }
.modal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.modal-actions .gold-button { margin-top: 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: var(--s-3) 0; border-bottom: 1px dashed var(--panel-3); cursor: pointer; }
.settings-row strong { display: block; font-size: var(--t-m); font-weight: 800; }
.settings-row small { display: block; font-size: var(--t-s); color: var(--muted); }
.settings-row input[type=checkbox] { position: relative; flex-shrink: 0; width: 52px; height: 28px; appearance: none; cursor: pointer; background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 2px var(--line); transition: background-color .15s; }
.settings-row input[type=checkbox]::after { content: ''; position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; background: var(--faint); border-radius: 1px; transition: transform .18s var(--ease), background-color .15s; }
.settings-row input[type=checkbox]:checked { background: var(--leaf-deep); box-shadow: inset 0 0 0 2px var(--leaf); }
.settings-row input[type=checkbox]:checked::after { transform: translateX(24px); background: var(--text); }
.seed-input { width: 100%; padding: 12px 14px; font: 600 var(--t-l) var(--pixel); letter-spacing: 3px; color: var(--gold); background: var(--bg-deep); border: 2px solid var(--line); border-radius: var(--r-m); }
.seed-input:focus { border-color: var(--gold); outline: 0; }
.guide-row { display: flex; align-items: center; gap: var(--s-4); padding: 10px 0; border-bottom: 1px dashed var(--panel-3); }
.guide-row > div { width: 130px; flex-shrink: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.guide-row p { margin: 0; font-size: var(--t-s); line-height: 1.5; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-4); }
.result-stats div { padding: 14px 8px; text-align: center; background: var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.result-stats b { display: block; font: 700 30px/1.1 var(--pixel); color: var(--gold); font-variant-numeric: tabular-nums; }
.result-stats small { font: 700 10px var(--pixel); letter-spacing: 1.4px; color: var(--muted); }
.run-summary { margin: var(--s-4) 0; padding: 14px 16px; font-size: var(--t-m); line-height: 1.7; color: var(--muted); background: var(--bg-deep); border-left: 3px solid var(--gold-deep); border-radius: var(--r-s); }
.run-summary strong { color: var(--text); font-weight: 800; }

.choice-list { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.choice-button { position: relative; display: flex; align-items: center; gap: var(--s-4); width: 100%; padding: 12px 40px 12px 12px; text-align: left; background: var(--panel-2); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line), 0 var(--lip) 0 #000000a0; transition: transform .12s var(--ease), box-shadow .15s, background-color .15s; }
.choice-button::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-52%); font: 700 28px/1 var(--pixel); color: var(--faint); transition: transform .15s var(--ease), color .15s; }
.choice-button:hover:not(:disabled) { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--gold), 0 var(--lip) 0 #000000a0; transform: translateY(-2px); }
.choice-button:hover:not(:disabled)::after { color: var(--gold); transform: translate(4px, -52%); }
.choice-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--gold); }
.choice-button > svg { width: 48px; height: 48px; padding: 11px; color: var(--gold); background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--gold-line); }
.choice-button > div { flex: 1; }
.choice-button strong { display: block; font: 800 var(--t-l)/1.2 var(--display); }
.choice-button small { display: block; margin-top: 3px; font-size: var(--t-s); line-height: 1.5; color: var(--muted); }

.loot-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.loot-gold { padding: 4px 12px; font: 700 var(--t-l) var(--pixel); white-space: nowrap; color: var(--gold-ink); background: var(--gold); border-radius: var(--r-s); box-shadow: 0 var(--lip) 0 var(--gold-deep); font-variant-numeric: tabular-nums; }
.loot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: var(--s-5) 0 var(--s-4); }
.loot-card { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 0 var(--s-4) var(--s-4); overflow: hidden; text-align: left; background: linear-gradient(180deg, color-mix(in srgb, var(--rarity) 20%, var(--panel-2)), var(--panel-2) 140px); border: 2px solid color-mix(in srgb, var(--rarity) 50%, var(--bg-deep)); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity) 28%, transparent), 0 var(--lip) 0 #000000a0; transition: transform .15s var(--ease), box-shadow .15s; }
.loot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--rarity); }
.loot-card:hover:not(:disabled) { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--rarity), 0 8px 0 #000000a0, 0 0 26px color-mix(in srgb, var(--rarity) 40%, transparent); }
.loot-card:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--rarity), 0 2px 0 #000000a0; }
.loot-icon { width: 60px; height: 60px; display: grid; place-items: center; margin: 22px auto 14px; color: var(--rarity); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rarity) 22%, var(--panel-3)), var(--bg-deep)); border: 2px solid var(--rarity); border-radius: 50%; box-shadow: 0 0 24px color-mix(in srgb, var(--rarity) 45%, transparent); }
.loot-icon svg { width: 30px; height: 30px; }
.loot-rarity { width: max-content; margin: 0 auto; padding: 1px 10px; font: 700 10px/16px var(--pixel); letter-spacing: 1.4px; text-transform: uppercase; color: var(--bg); background: var(--rarity); border-radius: var(--r-s); }
.loot-card h3 { margin: 10px 0 6px; text-align: center; font: 800 var(--t-xl)/1.1 var(--display); color: var(--text); }
.loot-card p { flex: 1; margin: 0; text-align: center; font-size: var(--t-s); line-height: 1.6; color: var(--muted); }
.loot-type { margin-top: var(--s-3); padding-top: var(--s-2); text-align: center; font: 600 10px var(--pixel); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); border-top: 1px dashed var(--panel-3); }
.loot-price { margin-top: var(--s-2); text-align: center; font: 700 var(--t-xl) var(--pixel); color: var(--gold); }
.loot-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); }
.loot-footer p { margin: 0; font-size: var(--t-s); }
.loot-footer button { min-height: 44px; padding: 0 var(--s-3); font-size: var(--t-s); font-weight: 800; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.loot-footer button:hover { color: var(--gold); }
.shop-provisions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0; }
.shop-provisions button { flex: 1; }
.skill-library { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.library-card { padding: var(--s-4); background: var(--panel-2); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-color) 35%, var(--line)); }
.library-card > svg { width: 48px; height: 48px; padding: 11px; color: var(--skill-color); background: var(--bg-deep); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-color) 50%, transparent); }
.library-card h3 { margin: 10px 0 6px; color: var(--text); font-size: var(--t-xl); }
.library-card h3 small { font: 700 var(--t-s) var(--pixel); color: var(--gold); }
.library-card p { margin: 0 0 10px; font-size: var(--t-s); line-height: 1.6; }
.library-card .secondary-button { min-height: 38px; margin: 4px 6px 0 0; padding: 0 14px; font-size: var(--t-s); }
.inventory-list { display: grid; gap: var(--s-2); margin: var(--s-4) 0; }
.inventory-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--panel-2); border-left: 4px solid var(--rarity, var(--gold)); border-radius: var(--r-s); }
.inventory-row svg { width: 28px; height: 28px; color: var(--rarity, var(--gold)); }
.inventory-row h3 { margin: 0 0 2px; color: var(--text); font-size: var(--t-l); }
.inventory-row p { margin: 0; font-size: var(--t-s); line-height: 1.5; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 26px; max-width: calc(100vw - 32px); padding: 10px 20px; font: 600 var(--t-m) var(--pixel); letter-spacing: .6px; color: var(--gold); background: var(--panel-3); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--gold-line), 0 4px 0 #000000a0; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 1150px) {
  .map-layout { grid-template-columns: 236px minmax(0, 1fr) 216px; }
  .controls-title { display: none; }
  .brand-text { letter-spacing: 3px; }
}
@media (max-width: 960px) {
  .map-layout { grid-template-columns: 236px minmax(0, 1fr); }
  .route-panel { display: none; }
  .topbar { height: auto; flex-wrap: wrap; padding-block: var(--s-2); row-gap: var(--s-2); }
  .screen-tabs { order: 3; width: 100%; }
  .nav-link { flex: 1; padding: 0 8px; }
  .loot-grid { grid-template-columns: 1fr; }
  .loot-card { display: grid; grid-template-columns: 60px 1fr; column-gap: var(--s-4); min-height: 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); }
  .loot-card > .loot-icon { grid-row: 1 / 6; margin: 0; align-self: center; }
  .loot-card > :not(.loot-icon) { grid-column: 2; text-align: left; margin-inline: 0; }
  .loot-card p { flex: none; }
}
@media (max-width: 680px) {
  .brand { font-size: 17px; letter-spacing: 3px; }
  .chip { padding: 0 8px; height: 34px; }
  .topbar-divider { display: none; }
  .chapter-heading { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .chapter-meta { justify-content: flex-start; }
  .journey-screen { min-height: 0; }
  .map-layout { grid-template-columns: 1fr; padding: var(--s-2); }
  .map-topline { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); letter-spacing: .8px; }
  .map-topline > div { gap: 6px; }
  .map-top-separator { display: none; }
  .pilgrim-panel { display: grid; grid-template-columns: 84px 1fr 1fr; align-items: center; column-gap: var(--s-3); padding: var(--s-3); overflow: visible; }
  .pilgrim-panel > .section-label, .hero-specialty, .passive-card, .map-skill-heading, #map-skills { display: none; }
  .pilgrim-portrait { grid-row: 1 / 4; grid-column: 1; width: 84px; height: 84px; margin: 0; overflow: hidden; }
  .pilgrim-portrait img { width: 112px; height: 84px; }
  .portrait-halo { width: 70px; height: 20px; }
  .pilgrim-panel h2 { grid-column: 2; grid-row: 1; margin: 0; text-align: left; font-size: 22px; }
  .pilgrim-panel > p { grid-column: 2; grid-row: 2; margin: 0; text-align: left; font-size: var(--t-s); }
  .run-vitals { grid-column: 3; grid-row: 1 / 4; margin: 0; }
  .run-resources { flex-wrap: wrap; }
  .run-vitals > div:first-child { white-space: nowrap; }
  .run-vitals b { font-size: var(--t-s); }
  .inventory-link { grid-column: 1 / -1; margin-top: var(--s-2); }
  .map-board { flex: none; height: 600px; min-height: 0; }
  .modal { padding: 28px 18px 20px; }
  .guide-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .skill-library { grid-template-columns: 1fr; }
  .controls-panel { display: none; }
  .champion-art { width: 76px; }
  .title-logo p { letter-spacing: .3em; padding-left: .3em; }
}
@media (max-width: 560px) {
  .arena-shell { aspect-ratio: 1.45; }
  .arena-hud { inset: 8px 8px auto; gap: 6px; }
  .player-hud { gap: var(--s-2); padding: 5px 10px 5px 5px; }
  .portrait-frame { width: 44px; height: 44px; }
  .player-vitals { width: 124px; }
  .player-name { margin-bottom: 3px; }
  .health { height: 16px; padding: 2px; }
  .vital span { font-size: 10px; line-height: 16px; padding-right: 6px; }
  .stamina { height: 8px; }
  .flask-dots { height: 10px; margin-top: 4px; }
  .flask-dots span { display: none; }
  .phase-chip, .arena-bottom-note { display: none; }
  .boss-hud { width: calc(100% - 16px); bottom: 8px; padding: 6px 12px; }
  .boss-name { margin-bottom: 4px; font-size: var(--t-s); letter-spacing: 2px; }
  .boss-health { height: 14px; }
  .boss-health > div { top: 2px; bottom: 2px; left: 2px; width: calc(100% - 4px); }
  .intro-rule, .encounter-intro small, .encounter-intro p { display: none; }
  .encounter-intro { padding: 18px; top: 40%; }
  .combat-announcement { top: 26%; padding: 4px 14px; font-size: 15px; letter-spacing: 1px; }
  .action-dock { flex-direction: column; }
  .skill-bar { gap: var(--s-2); }
  .combat-skill { flex: 1; min-width: 0; padding: 6px 8px; gap: var(--s-2); }
  .combat-skill > svg { width: 36px; height: 36px; padding: 7px; }
  .cooldown-text { right: 42px; font-size: 22px; }
  .toast { bottom: 14px; }
  .brand-text { display: none; }
  .topbar-right { margin-left: auto; }
}

/* touch devices: controls sit under the arena so they never cover the fight */
@media (pointer: coarse) {
  .arena-shell.playing { margin-bottom: 206px; }
  .arena-shell.playing .arena-bottom-note { display: none; }
  .arena-shell.playing .touch-controls { position: absolute; top: calc(100% + 16px); left: 0; right: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); pointer-events: none; }
  .touch-controls > div { display: grid; gap: var(--s-2); }
  .touch-controls > div:first-child { grid-template: repeat(2, 52px) / repeat(2, 52px); }
  .touch-controls > div:last-child { grid-template: repeat(3, 48px) / repeat(3, 52px); }
  .touch-controls button[data-action="attack"] svg { width: 30px; height: 30px; stroke-width: 2.4; }
  .touch-controls button { display: grid; place-items: center; font: 600 var(--t-m) var(--pixel); color: var(--text); background: var(--panel-3); border: 2px solid var(--bg-deep); border-radius: var(--r-m); box-shadow: inset 0 2px 0 #ffffff14, 0 4px 0 #000000a0; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
  .touch-controls button svg { width: 22px; height: 22px; }
  .touch-controls button:active { transform: translateY(3px); box-shadow: none; background: var(--line); }
  [data-action="jump"] { grid-area: 1 / 1 / 2 / 3; }
  [data-hold="left"] { grid-area: 2 / 1; }
  [data-hold="right"] { grid-area: 2 / 2; }
  [data-action="skill0"] { grid-area: 1 / 1; }
  [data-action="skill1"] { grid-area: 1 / 2; }
  [data-action="heal"] { grid-area: 1 / 3; }
  [data-action="parry"] { grid-area: 2 / 1; }
  [data-action="dodge"] { grid-area: 3 / 1; }
  .touch-controls button[data-action="attack"] { grid-area: 2 / 2 / 4 / 4; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: inset 0 2px 0 #fff8, 0 4px 0 var(--gold-deep); }
  .touch-controls button[data-action="attack"]:active { box-shadow: none; }
  .touch-controls button[data-action^="skill"] { color: var(--sky); }
  .controls-panel { display: none; }
}

@media (max-height: 640px) and (min-width: 700px) {
  .title-inner { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Dusk valley: a pixel-RPG shell.
   Stepped-corner frames, bevelled bronze trim, chunky gold buttons with a
   pressed edge, and a painted canvas valley behind the map. Everything here
   supersedes the earlier console rules.
   ===================================================================== */
:root {
  --bg: #0b0e20;
  --bg-deep: #07080f;
  --panel: #171a36;
  --panel-2: #1f2347;
  --panel-3: #2a2f5a;
  --line: #3d3f72;
  --plate: #0b0e20f0;
  --text: #f1e9d6;
  --muted: #b3b6d4;
  --faint: #8a8fb8;
  --gold: #e8b95a;
  --gold-hi: #f7dc92;
  --gold-deep: #a8782c;
  --gold-line: #e8b95a40;
  --gold-ink: #24180a;
  --crimson: #e2574c;
  --leaf: #8fd09f;
  --leaf-deep: #3d7a52;
  --sky: #8cc8f0;
  --lip: 0px;
  --r-s: 0; --r-m: 0; --r-l: 0; --r-xl: 0;
  --trim: #6d5a8c;       /* bronze-violet frame trim */
  --trim-hi: #9a86be;
  --ink: #07080f;
  --step: 4px;
  --step-lg: 8px;
}

/* stepped-corner silhouette, the pixel-art "rounded rect" */
.frame, .plate, .pilgrim-panel, .route-panel, .controls-panel, .combat-skill, .champion, .loot-card,
.choice-button, .encounter-intro, .modal, .player-hud, .boss-hud, .chip, .seed-button, .difficulty,
.secondary-button, .icon-button, .inventory-link, .gold-button, .screen-tabs, .nav-link, .map-skill,
.library-card, .inventory-row, .result-stats div, .toast, .settings-row, .hero-specialty, .run-summary {
  --c: var(--step);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, calc(100% - var(--c)) var(--c), 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, var(--c) calc(100% - var(--c)), 0 calc(100% - var(--c)), 0 var(--c), var(--c) var(--c));
  border: 0; text-shadow: none;
}

/* framed panels: ink outline, bronze trim, lit top edge */
.plate, .pilgrim-panel, .route-panel, .controls-panel, .combat-skill, .champion, .loot-card, .choice-button,
.encounter-intro, .modal, .player-hud, .boss-hud, .library-card, .inventory-row, .settings-row {
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--trim), inset 0 4px 0 4px #ffffff0d, inset 0 0 0 6px var(--ink);
}
.pilgrim-panel, .route-panel { --c: var(--step-lg); background: #171a36f0; }
.modal { --c: var(--step-lg); padding: 36px 34px 30px; }
.modal::backdrop { background: #05060dd9; backdrop-filter: none; }
.topbar { background: var(--bg); border: 0; box-shadow: inset 0 -4px 0 var(--ink), inset 0 -6px 0 var(--trim); height: 68px; padding-bottom: 6px; }

/* inset wells: meters, chips, tags */
.chip, .seed-button, .difficulty, .hero-specialty, .screen-tabs, .run-summary, .result-stats div {
  background: var(--bg-deep); box-shadow: inset 0 0 0 2px var(--line);
}
.chip { height: 38px; padding: 0 14px 0 10px; color: var(--text); }
button.chip:hover, .seed-button:hover { box-shadow: inset 0 0 0 2px var(--gold); }
.difficulty { color: #ff8a7e; box-shadow: inset 0 0 0 2px #8f3a36; }
.screen-tabs { padding: 4px; gap: 4px; }
.nav-link { height: 34px; color: var(--muted); }
.nav-link:hover { background: var(--panel-2); }
.nav-link.active { background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 -3px 0 var(--gold-deep), inset 0 3px 0 var(--gold-hi); }

/* buttons */
.gold-button { background: var(--gold); color: var(--gold-ink); min-height: 52px; padding: 0 26px; letter-spacing: 1.2px;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 -6px 0 2px var(--gold-deep), inset 0 4px 0 2px var(--gold-hi); }
.gold-button:hover:not(:disabled) { background: var(--gold-hi); filter: none; transform: none; box-shadow: inset 0 0 0 2px var(--ink), inset 0 -6px 0 2px var(--gold), inset 0 4px 0 2px #fff4c8; }
.gold-button:active:not(:disabled) { transform: none; padding-top: 4px; box-shadow: inset 0 0 0 2px var(--ink), inset 0 -2px 0 2px var(--gold-deep), inset 0 4px 0 2px var(--gold-deep); background: var(--gold); }
.secondary-button, .icon-button, .inventory-link { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--ink), inset 0 -4px 0 2px #151735, inset 0 3px 0 2px #ffffff14; }
.secondary-button:hover:not(:disabled), .icon-button:hover, .inventory-link:hover { background: var(--panel-3); color: var(--gold-hi); transform: none; }
.secondary-button:active:not(:disabled), .icon-button:active, .inventory-link:active { transform: none; padding-top: 3px; box-shadow: inset 0 0 0 2px var(--ink), inset 0 2px 0 2px #151735; }
.icon-button { width: 44px; height: 44px; }
.brand-mark { background: var(--gold); border: 0; border-radius: 0; width: 38px; height: 38px; clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px); box-shadow: inset 0 0 0 2px var(--ink), inset 0 -4px 0 2px var(--gold-deep), inset 0 3px 0 2px var(--gold-hi); }
.brand { font: 900 21px/1 var(--display); letter-spacing: 4px; text-shadow: 0 3px 0 var(--ink); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* meters */
.vital, .map-health-track, .boss-health { background: var(--bg-deep); border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px var(--line); }
.health div, .map-health-track i, .boss-health > div { background: var(--crimson); box-shadow: inset 0 3px 0 #f6877d, inset 0 -3px 0 #a3322c; }
.stamina div { background: var(--leaf); box-shadow: inset 0 2px 0 #c2eccb, inset 0 -2px 0 var(--leaf-deep); }
.vital::after { display: block; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #07080f calc(10% - 2px) 10%); }
.level, .inventory-link span { background: var(--gold); color: var(--gold-ink); border-radius: 0; }
.passive-card { background: var(--panel-2); border: 0; box-shadow: inset 4px 0 0 var(--gold); }
.arena-shell { border: 0; border-radius: 0; box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px var(--trim), 0 0 0 12px var(--ink); margin-block: 12px; width: calc(100% - 24px); }
.encounter-intro h2, .boss-name, .modal h2, .pilgrim-panel h2, .route-preview h3 { text-shadow: 0 3px 0 var(--ink); }

/* ---------- title and journey backdrops ---------- */
.scenery { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; z-index: 0; }
.title-screen { background: var(--bg-deep); }
.title-sky, .title-hills { display: none; }
.title-inner { z-index: 2; }
.title-screen .scenery { position: fixed; }
.title-cross { background: var(--gold); box-shadow: inset 0 0 0 2px var(--ink), inset 0 -4px 0 2px var(--gold-deep), inset 0 3px 0 2px var(--gold-hi); border-radius: 0; border: 0; }
.title-logo h1 { font: 900 clamp(40px, 11vw, 96px)/1 var(--display); letter-spacing: .1em; color: var(--gold-hi); text-shadow: 0 4px 0 var(--gold-deep), 0 8px 0 var(--ink); }
.title-logo p { color: var(--text); text-shadow: 0 2px 0 var(--ink); }
.title-verse { color: var(--text); text-shadow: 0 2px 0 var(--ink); }
.champion { padding: 14px; gap: 14px; }
.champion.selected { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--gold), inset 0 0 0 6px var(--ink); }
.champion:hover { transform: none; background: var(--panel-2); }
.champion-art { background: #0b0e20; box-shadow: inset 0 0 0 2px var(--ink); border-radius: 0; }
.champion-check { border-radius: 0; }

.journey-screen { border: 0; border-radius: 0; background: var(--bg-deep); box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px var(--trim), 0 0 0 12px var(--ink); margin: 12px; overflow: hidden; }
.journey-screen::before, .journey-screen::after { display: none; }
.map-topline { background: #07080fcc; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--trim); }
.map-layout, .map-topline { position: relative; z-index: 1; }
.portrait-halo { display: block; background: #07080f88; border-radius: 0; height: 10px; width: 90px; bottom: 6px; }
.map-act-label { font: 700 var(--t-m) var(--pixel); letter-spacing: 6px; color: var(--gold-hi); text-shadow: 0 2px 0 var(--ink); }
.map-act-label > span { background: var(--gold-deep); height: 4px; width: 32px; }
.pilgrim-panel > .section-label, .route-panel > .section-label { color: var(--gold); }

/* the road */
.map-paths path { stroke: #4a4378; stroke-width: 6; stroke-dasharray: 8 6; stroke-linecap: butt; shape-rendering: crispEdges; opacity: .9; }
.map-paths path.available-path { stroke: var(--gold-hi); stroke-width: 6; stroke-dasharray: 8 6; filter: none; animation: march .8s steps(7) infinite; }
.map-paths path.travelled { stroke: var(--gold-deep); stroke-width: 6; stroke-dasharray: none; }

/* medallions: octagonal pixel discs */
.map-node { gap: 8px; }
.node-orb { --c: 8px; width: 56px; height: 56px; border: 0; border-radius: 0; position: relative; color: var(--faint); background: var(--panel-2);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--line), inset 0 -8px 0 6px #14173a; transition: transform .12s steps(3); }
.node-orb svg { width: 24px; height: 24px; stroke-width: 2.2; }
.node-caption { background: var(--bg-deep); color: var(--muted); padding: 3px 8px; font: 600 11px/1.2 var(--pixel); letter-spacing: .8px; border-radius: 0; box-shadow: inset 0 0 0 2px var(--ink); text-shadow: none; }
.map-node.unavailable { opacity: 1; filter: brightness(.8) saturate(.8); }
.map-node.available .node-orb { color: var(--node-color); background: var(--panel-3); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--node-color), inset 0 -8px 0 6px #14173a; animation: none; }
.map-node.available .node-caption { background: var(--node-color); color: var(--gold-ink); box-shadow: inset 0 0 0 2px var(--ink); }
.map-node.available::before { content: ''; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; transform: translate(-50%, -62%); background: var(--node-color); opacity: .0; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); animation: pulse 1.2s steps(2) infinite; z-index: -1; }
@keyframes pulse { 50% { opacity: .35; } }
.map-node.available:hover .node-orb, .map-node.available:focus-visible .node-orb, .map-node.selected .node-orb { transform: translateY(-3px); background: #353b72; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px #fff, inset 0 -8px 0 6px #14173a; background: var(--panel-3); }
.map-node.selected .node-caption { background: #fff; color: var(--ink); }
.map-node.completed .node-orb { color: var(--gold-ink); background: var(--gold-deep); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--gold), inset 0 -8px 0 6px #7a561f; }
.map-node.completed .node-caption { color: var(--gold-hi); }
.map-node.current .node-orb { color: var(--gold-ink); background: var(--gold); outline: 0; }
.map-node.boss .node-orb { --c: 12px; width: 84px; height: 84px; background: #3a1f2e; color: var(--gold-hi); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 7px var(--gold), inset 0 0 0 10px var(--ink), inset 0 -10px 0 10px #2a1320; }
.map-node.boss.unavailable .node-orb { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 7px var(--gold-deep), inset 0 0 0 10px var(--ink), inset 0 -10px 0 10px #2a1320; }
.map-node.boss .node-caption { background: var(--gold); color: var(--gold-ink); font: 700 12px var(--pixel); letter-spacing: 2px; position: static; margin: 0; }
.map-node.boss { margin-top: 0; }
.map-bottom-hint { background: var(--bg-deep); color: var(--text); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--trim); }
.map-bottom-hint { font: 700 var(--t-m)/1.3 var(--pixel); }
.map-bottom-hint small { font: 600 var(--t-s) var(--sans); }
.map-begin-label { color: var(--gold-hi); text-shadow: 0 2px 0 var(--ink); }

.route-preview { background: var(--bg-deep); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--line); border: 0; }
.preview-icon { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px currentColor; border-radius: 0; }
.take-road { width: 100%; margin-top: var(--s-4); }
.route-preview h3 { font: 700 20px/1.15 var(--pixel); }
.pilgrim-panel h2 { font: 700 26px/1.1 var(--pixel); }
.chapter-heading { position: relative; z-index: 1; padding: var(--s-4) var(--s-5) var(--s-2); }
h2#chapter-title { font: 700 clamp(22px, 3vw, 32px)/1.1 var(--pixel); text-shadow: 0 3px 0 var(--ink); }

@media (max-width: 960px) { .route-panel { display: block; } }
@media (max-width: 680px) {
  .stage { padding: 0; gap: 0; }
  .topbar { height: auto; }
  .chapter-heading { padding: var(--s-3) var(--s-4); align-items: center; flex-direction: row; justify-content: space-between; gap: var(--s-3); }
  .eyebrow, #chapter-description, .difficulty { display: none; }
  h2#chapter-title { margin: 0; font-size: 18px; }
  .seed-button { white-space: nowrap; }
  .journey-screen { margin: 0; box-shadow: none; overflow: visible; }
  .scenery { height: 100%; }
  .map-layout { padding: 0; gap: 0; display: flex; flex-direction: column; }
  .pilgrim-panel { order: 1; margin: var(--s-3); grid-template-columns: 52px 1fr 150px; row-gap: 0; column-gap: var(--s-3); padding: var(--s-3); overflow: visible; }
  .pilgrim-portrait { grid-row: 1 / 3; width: 52px; height: 52px; }
  .pilgrim-portrait img { width: 70px; height: 52px; }
  .portrait-halo { display: none; }
  .pilgrim-panel h2 { font-size: 18px; grid-column: 2; grid-row: 1; align-self: end; }
  .pilgrim-panel > p { grid-column: 2; grid-row: 2; align-self: start; }
  .run-vitals { grid-column: 3; grid-row: 1 / 3; }
  .run-resources, .inventory-link { display: none; }
  .map-health-track { margin: 4px 0 0; }
  .map-center { order: 2; }
  .map-board { height: 660px; min-height: 0; }
  .map-bottom-hint { display: none; }
  .map-node { min-width: 60px; }
  .node-caption { font-size: 10px; padding: 2px 6px; }
  .route-panel { order: 3; position: sticky; bottom: 0; z-index: 5; margin-top: var(--s-3); padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); overflow: visible; }
  .route-panel > .section-label, .map-legend, .autosave-note { display: none; }
  .route-preview { margin: 0; padding: var(--s-3); min-height: 0; display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-3); align-items: center; }
  .preview-icon { grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; }
  .preview-eyebrow { grid-column: 2; }
  .route-preview h3 { grid-column: 2; margin: 0; font-size: 17px; }
  .route-preview p { grid-column: 1 / -1; margin-top: var(--s-2); font-size: var(--t-s); }
  .take-road { grid-column: 1 / -1; }
  .arena-shell { width: calc(100% - 24px); }
}

/* declutter: only stops you can act on (and the giant) carry a name plate */
.map-node:not(.available):not(.boss):not(.current) .node-caption { display: none; }
.map-node { min-height: 0; }
.map-bottom-hint small, .map-begin-label { display: none; }
.map-bottom-hint { padding: 6px 12px; margin: var(--s-2) 0 0; }
@media (min-width: 961px) {
  #chapter-description, .eyebrow { display: none; }
  .chapter-heading { padding: var(--s-2) var(--s-5) 0; align-items: center; }
  .journey-screen { margin-block: 12px; }
}
@media (max-width: 680px) {
  .route-preview { background: none; box-shadow: none; padding: 0; }
  .map-board { height: 600px; }
}

/* =====================================================================
   Desktop: the game owns the whole window. No page chrome, no scroll.
   The HUD floats over the scene instead of sitting in header bars.
   ===================================================================== */
@media (min-width: 961px) {
  html, body { overflow: hidden; height: 100%; }
  .app { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }
  .stage { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; gap: 0; }
  .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; height: auto; padding: 16px 24px; background: none; box-shadow: none; pointer-events: none; clip-path: none; }
  .topbar > *, .topbar-right > * { pointer-events: auto; }
  body.in-fight .topbar { display: none; }

  .journey-screen { position: absolute; inset: 0; margin: 0; box-shadow: none; display: block; min-height: 0; }
  .chapter-heading { position: absolute; z-index: 6; top: 84px; left: 0; right: 0; padding: 0 28px; pointer-events: none; }
  .chapter-meta > * { pointer-events: auto; }
  .map-layout { position: absolute; inset: 132px 24px 76px; padding: 0; grid-template-columns: 280px minmax(0, 1fr) 270px; gap: 20px; }
  .map-topline { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); width: auto; gap: 24px; padding: 8px 16px; background: var(--bg-deep); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--trim); clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px); }
  .map-bottom-hint { display: none; }

  .arena-shell { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none; }
  .arena-shell:fullscreen { inset: auto; }
  .arena-hud { inset: 18px 20px auto; }
  .boss-hud { bottom: auto; top: 18px; width: min(44%, 560px); }
  .action-dock { position: absolute; z-index: 10; left: 20px; right: 20px; bottom: 18px; width: auto; justify-content: space-between; pointer-events: none; }
  .action-dock > * { pointer-events: auto; }
  .controls-title { display: none; }
  .controls-panel { flex: none; margin-left: auto; padding: 8px 14px; gap: var(--s-4); }
}
@media (min-width: 961px) {
  body.in-fight .chapter-heading, .arena-bottom-note { display: none; }
}

/* ---------- pass 2: critique fixes ---------- */
.take-road, .gold-button { white-space: nowrap; }
/* pixel fonts lose their grid at wide tracking */
.eyebrow, .section-label, .preview-eyebrow, .text-button, .nav-link, .difficulty, .seed-button, .chip, .map-topline, .map-act-label, .boss-subtitle, .champion-stats, .champion-tags { letter-spacing: .06em; }
.map-act-label { letter-spacing: .2em; }
.title-logo p { letter-spacing: .2em; padding-left: .2em; }

/* node silhouettes by type: chamfer size changes the read at a glance */
.map-node[data-type="elite"] .node-orb, .map-node[data-type="event"] .node-orb { --c: 16px; }
.map-node[data-type="treasure"] .node-orb, .map-node[data-type="merchant"] .node-orb { --c: 3px; }
.map-node[data-type="camp"] .node-orb { --c: 12px; }

/* title menu reads like a console menu, not web buttons */
.title-links { flex-direction: column; align-items: center; gap: 0; }
.title-links .secondary-button { background: none; box-shadow: none; clip-path: none; min-height: 36px; padding: 0 24px; color: var(--text); font: 700 var(--t-m) var(--pixel); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 0 var(--ink); }
.title-links .secondary-button::before { content: ''; width: 0; height: 0; margin-right: 0; border: 6px solid transparent; border-left-color: var(--gold); border-right: 0; opacity: 0; transition: none; }
.title-links .secondary-button:hover, .title-links .secondary-button:focus-visible { background: none; color: var(--gold-hi); padding-top: 0; }
.title-links .secondary-button:hover::before, .title-links .secondary-button:focus-visible::before { opacity: 1; margin-right: 10px; }
@media (min-width: 961px) {
  .title-inner { gap: 18px; }
  .champions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the arena gets warm wood-and-iron trim so the HUD belongs to the daylight scene */
.arena-shell, .action-dock {
  --panel: #2b2118; --panel-2: #372a1d; --panel-3: #46351f;
  --bg-deep: #150f09; --line: #5e4930; --trim: #94733f; --ink: #0d0905;
  --plate: #150f09f0;
}
.arena-shell .vital, .arena-shell .boss-health { background: #150f09; }


/* =====================================================================
   Pixel assets: icons, medallions and logos replace vector art.
   Icons are 16px native, shown at whole multiples (16 or 32) only.
   ===================================================================== */
.px-icon { width: 32px; height: 32px; flex-shrink: 0; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
:is(.chip, .legend-row, .eyebrow, .gold-button, .secondary-button, .nav-link, .inventory-link, .run-resources, .passive-card, .flask-dots, .controls-title, .text-button, .brand-mark, .difficulty, .loading-cross) .px-icon { width: 16px; height: 16px; }
.gold-button .px-icon, .nav-link .px-icon { width: 16px; height: 16px; }
.preview-icon .px-icon { width: 32px; height: 32px; }
.touch-controls button .px-icon, .loading-cross .px-icon { width: 32px; height: 32px; }
.touch-controls button[data-action="attack"] .px-icon { width: 32px; height: 32px; }
.map-skill > .px-icon, .combat-skill > .px-icon, .choice-button > .px-icon, .library-card > .px-icon, .inventory-row > .px-icon, .loot-icon .px-icon { box-sizing: border-box; width: 48px; height: 48px; padding: 8px; background: var(--bg-deep); box-shadow: inset 0 0 0 2px var(--line); }
.loot-icon .px-icon { width: 48px; height: 48px; margin: 0; }
.icon-button .px-icon, .arena-icon .px-icon { width: 32px; height: 32px; }
.arena-icon { font: 700 18px var(--pixel); }
.eyebrow .px-icon { margin-right: -2px; }
.title-logo-img, .brand-logo { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.brand-logo { height: 40px; width: auto; }
.brand { padding: 0; }
h1:has(> .title-logo-img) { margin: 0; line-height: 0; padding: 0; letter-spacing: 0; }
.title-logo-img { width: min(576px, 86vw); height: auto; margin: 0 auto; }
.title-logo { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 680px) { .brand-logo { height: 20px; } }

/* medallions carry their own frame */
.node-orb { --c: 0; width: 64px; height: 64px; background: none; clip-path: none; box-shadow: none; display: block; transition: transform .12s steps(3); }
.node-orb img { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.map-node.boss .node-orb { width: 96px; height: 96px; clip-path: none; box-shadow: none; background: none; }
.map-node.available .node-orb, .map-node.boss.unavailable .node-orb, .map-node.completed .node-orb, .map-node.current .node-orb { background: none; box-shadow: none; clip-path: none; }
.map-node.available::before { display: none; }
.map-node.available:hover .node-orb, .map-node.available:focus-visible .node-orb { background: none; box-shadow: none; transform: translateY(-4px); }
.map-node.selected .node-orb { background: none; box-shadow: none; transform: translateY(-4px); filter: brightness(1.3); }
.map-node.unavailable { filter: none; opacity: 1; }
.map-node[data-type] .node-orb { --c: 0; }
@media (max-width: 680px) { .node-orb { width: 56px; height: 56px; } .map-node.boss .node-orb { width: 80px; height: 80px; } }

/* icons on gold surfaces read as dark silhouettes */
.gold-button .px-icon, .level .px-icon, .nav-link.active .px-icon, .inventory-link span .px-icon { filter: brightness(0) opacity(.8); }
.champion-check { background: var(--ink); width: 28px; height: 28px; top: 0; right: 0; border-radius: 0; }
.champion-check .px-icon { width: 16px; height: 16px; }