/* Refine — vintage illustrated-fantasy presentation.
 * The world remains code-built; this layer should feel like an old adventure
 * volume opened over it: ink-blue binding, aged paper, restrained lapis and
 * tarnished gold. Tokens mirror js/theme.js where the 3D scene uses them. */

@font-face { font-family: "Compass"; src: url("../fonts/compass.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "New Work Times"; src: url("../fonts/new-work-times.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Gauntlet"; src: url("../fonts/gauntlet.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #0b121a;
  --surface: #151f2b;
  --surface-2: #1b2937;
  --surface-3: #243442;
  --edge: #796747;
  --edge-bright: #b8914f;
  --ink: #eee7d7;
  --muted: #b4ad9d;
  --accent: #3f78aa;
  --accent-bright: #72acd5;
  --reward: #c9a35e;
  --danger: #a84d40;
  --parch: #dfcfaa;
  --parch-light: #eadcbb;
  --parch-dark: #bda471;
  --parch-ink: #342d25;
  --ink-rule: rgba(54, 42, 28, .5);
  --gold-leaf: #c7a15b;
  --lapis: #386f9e;
  --heal: #81b779;
  --block: #80b4e6;
  --font-ui: "Compass", "Avenir Next", system-ui, sans-serif;
  --font-title: "New Work Times", Georgia, serif;
  --font-display: "Gauntlet", "New Work Times", Georgia, serif;
  --text-s: .88rem;
  --text-m: 1rem;
  --text-l: 1.5rem;
  --text-xl: 2.45rem;
  --radius: 5px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --cw: clamp(72px, calc((100vw - var(--sal) - var(--sar) - 34px) / 5.5), 142px);
  --ch: calc(var(--cw) * 1.43);
  --hudh: 58px;
  --handh: calc(var(--ch) + 18px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 51% 42%, #162330 0, #0e1822 48%, #090f16 100%);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-m);
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#app { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
#app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(221,202,161,.16), transparent 21%),
    radial-gradient(ellipse at 78% 68%, rgba(100,126,110,.1), transparent 24%),
    repeating-linear-gradient(92deg, transparent 0 17px, rgba(236,218,177,.035) 18px, transparent 19px);
}
#app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(14deg, transparent 0 5px, rgba(255,255,255,.07) 6px, transparent 7px),
    repeating-linear-gradient(103deg, transparent 0 9px, rgba(4,8,12,.18) 10px, transparent 11px);
}
#app > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(.84) sepia(.055) contrast(1.035);
  touch-action: none;
}
#flash { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0; }
#vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 44%, transparent 50%, rgba(4, 9, 15, .2) 80%, rgba(3, 7, 11, .4) 100%),
    linear-gradient(90deg, rgba(3,8,12,.08), transparent 10% 90%, rgba(3,8,12,.08));
  transition: background .6s;
}
#vignette.forge { background: radial-gradient(ellipse at 50% 43%, rgba(118,58,20,.05) 12%, rgba(5,8,12,.88) 91%); }
#vignette.hold { background: radial-gradient(ellipse at 50% 43%, transparent 10%, rgba(2,5,8,.94) 78%); }
body.in-fight #vignette {
  background:
    radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(3,8,12,.12) 84%, rgba(3,8,12,.3) 100%),
    linear-gradient(90deg,rgba(3,8,12,.06),transparent 9% 91%,rgba(3,8,12,.06));
}

svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
button { color: inherit; font: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible {
  outline: 2px solid #9dc9e7;
  outline-offset: 3px;
}
[hidden] { display: none !important; }

a.back {
  position: absolute;
  z-index: 40;
  left: calc(12px + var(--sal));
  bottom: calc(8px + var(--sab));
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: .8;
}
body.in-fight a.back, body.in-forge a.back { display: none; }

/* ------------------------------------------------------------ shared chrome */
#hud {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--hudh);
  padding: calc(7px + var(--sat)) calc(11px + var(--sar)) 7px calc(11px + var(--sal));
  display: flex;
  align-items: center;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(9,15,22,.97), rgba(12,20,29,.88) 73%, transparent),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(205,180,126,.025) 32px);
  pointer-events: none;
}
#hud > * { pointer-events: auto; }
.hud-left { flex: 1; min-width: 0; }
.where {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-title);
  font-size: var(--text-s);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px #000;
  text-transform: uppercase;
  white-space: nowrap;
}
.hud-econ, .hud-right { display: flex; gap: 6px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 9px;
  color: var(--ink);
  background: rgba(18,29,41,.94);
  border: 1px solid rgba(159,130,78,.72);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(4,9,14,.42), 0 2px 5px rgba(0,0,0,.18);
  font-size: var(--text-s);
}
.pill svg { color: var(--accent-bright); }
.pill b { color: var(--reward); }
.pill.heat svg { color: #d98345; }
.pill.big { min-height: 38px; padding: 6px 12px; font-size: var(--text-m); }
.pill.pulse { animation: pulse .6s ease-out; }
@keyframes pulse { 0% { transform: scale(1.22); } 100% { transform: scale(1); } }

.iconbtn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: #172635;
  border: 1px solid var(--edge);
  border-radius: 2px;
  clip-path: polygon(13% 0,87% 0,100% 13%,100% 87%,87% 100%,13% 100%,0 87%,0 13%);
  box-shadow: inset 0 0 0 2px rgba(4,10,16,.5), 0 2px 5px rgba(0,0,0,.25);
  cursor: pointer;
  font-size: 21px;
}
.iconbtn:hover, .iconbtn:focus-visible { color: var(--ink); border-color: var(--edge-bright); outline: none; }
.iconbtn:active { transform: scale(.95); }
.iconbtn .badge.dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  color: #24201a;
  background: var(--reward);
  border: 0;
  border-radius: 9px;
  font: 700 11px/18px var(--font-ui);
}

#hintBubble {
  top: calc(var(--hudh) + var(--sat) + 5px);
  z-index: 38;
  max-width: min(580px, 90vw);
  color: #3c3328;
  border-color: rgba(119,91,49,.88);
  background:
    linear-gradient(rgba(230,215,177,.96),rgba(204,184,139,.96)),
    repeating-linear-gradient(8deg,transparent 0 8px,rgba(84,59,30,.05) 9px);
  box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,246,216,.26);
  font-family: var(--font-title);
  letter-spacing: .015em;
  line-height: 1.35;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--hudh) + var(--sat)) calc(14px + var(--sar)) calc(16px + var(--sab)) calc(14px + var(--sal));
}
.panel-screen { z-index: 15; background: rgba(5,11,18,.68); backdrop-filter: blur(3px); }
.sheet-screen { z-index: 16; align-items: flex-end; padding-bottom: 0; background: rgba(5,11,18,.62); backdrop-filter: blur(3px); }
#scrPause { z-index: 25; background: rgba(4,8,13,.82); }

.panel {
  position: relative;
  width: min(480px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 23px 23px 20px;
  color: var(--ink);
  background:
    repeating-linear-gradient(8deg, transparent 0 8px, rgba(229,210,168,.018) 9px, transparent 10px),
    linear-gradient(165deg, #1b2938, #111c29 68%, #0d1722);
  border: 1px solid var(--edge);
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 4px #101923,
    inset 0 0 0 5px rgba(183,145,78,.36),
    0 14px 38px rgba(0,0,0,.48);
  touch-action: pan-y;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198,158,87,.2);
  pointer-events: none;
}
.panel.wide { width: min(940px, 100%); }
.sheet-screen .panel { max-height: 84%; padding-bottom: calc(20px + var(--sab)); border-radius: 1px 1px 0 0; }
.panel h2 {
  margin: 0 0 7px;
  color: var(--reward);
  font: 500 var(--text-l)/1.05 var(--font-display);
  letter-spacing: .06em;
}
.panel h3 { margin: 16px 0 7px; color: var(--reward); font: 600 1.08rem var(--font-title); }
.panel p { margin: 6px 0; color: var(--ink); line-height: 1.48; }
.panel .muted, .muted { color: var(--muted); }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.row.center { justify-content: center; }
.close-x { position: absolute; top: 10px; right: 10px; z-index: 2; }

.bigbtn, .menu-col button {
  position: relative;
  min-height: 48px;
  padding: 10px 20px;
  color: #f9f2df;
  background: #295d88;
  border: 1px solid #82afd0;
  border-radius: 1px;
  box-shadow: inset 0 0 0 2px rgba(8,24,39,.55), 0 2px 0 #102b46, 0 4px 9px rgba(0,0,0,.22);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .035em;
}
.bigbtn:hover, .menu-col button:hover, .bigbtn:focus-visible, .menu-col button:focus-visible {
  border-color: #b6ddff;
  filter: brightness(1.08);
  outline: 2px solid #9dc9e7;
  outline-offset: 2px;
}
.bigbtn:active, .menu-col button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(8,26,44,.62), 0 1px 0 #102b46; }
.bigbtn:disabled { filter: grayscale(.8) brightness(.62); cursor: default; }
.bigbtn.ghostbtn, .ghostbtn {
  color: var(--ink);
  background: #18293a;
  border-color: var(--edge);
  box-shadow: inset 0 0 0 2px rgba(5,12,20,.55);
}
.menu-col { display: flex; flex-direction: column; width: min(320px, 82vw); gap: 7px; }
.menu-col button {
  min-height: 47px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(190,154,86,.07), transparent 42%),
    rgba(13,24,36,.56);
  border: 0;
  border-bottom: 1px solid rgba(190,150,78,.58);
  box-shadow: none;
  font-family: var(--font-title);
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-align: left;
}
.menu-col button::before { content: "›"; position: absolute; left: 14px; opacity: 0; color: var(--reward); font: 700 1.15em/1 var(--font-title); }
.menu-col button:hover::before, .menu-col button:focus-visible::before, .menu-col button[aria-selected="true"]::before { opacity: 1; }
.menu-col button.secondary { color: var(--muted); background: rgba(14,26,40,.84); border-color: #67583d; box-shadow: inset 0 0 0 2px rgba(4,10,16,.5); }

.choice {
  width: 100%;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 11px 14px;
  color: var(--ink);
  background: rgba(10,20,32,.68);
  border: 1px solid #5f5a4e;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
}
.choice b { color: var(--reward); font-size: var(--text-m); }
.choice span { color: var(--muted); font-size: var(--text-s); }
.choice:hover, .choice:focus-visible { border-color: var(--edge-bright); outline: none; }
.kbd { font-size: .73rem; opacity: .8; }

/* ---------------------------------------------------------------- title */
#scrTitle {
  overflow: hidden;
  padding: max(calc(32px + var(--sat)), 4vh) max(calc(30px + var(--sar)), 4vw) max(calc(28px + var(--sab)), 4vh) max(calc(30px + var(--sal)), 4vw);
  justify-content: flex-start;
  background:
    linear-gradient(90deg, rgba(7,14,22,.72) 0%, rgba(9,18,28,.45) 42%, rgba(8,16,25,.08) 72%),
    radial-gradient(ellipse at 74% 33%, rgba(79,110,105,.16), transparent 32%),
    radial-gradient(ellipse at 69% 80%, rgba(113,99,67,.13), transparent 36%),
    linear-gradient(0deg,rgba(50,42,29,.08),transparent 48%);
}
#scrTitle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(ellipse at 71% 38%, transparent 0 12%, rgba(222,211,174,.07) 12.5% 13%, transparent 13.5%),
    repeating-linear-gradient(167deg, transparent 0 18px, rgba(222,211,174,.025) 19px, transparent 20px);
}
#scrTitle::after {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(186,151,86,.44);
  box-shadow: inset 0 0 0 4px rgba(8,15,24,.72), inset 0 0 0 5px rgba(188,154,89,.1);
}
.painted-backdrop { position: absolute; inset: 0; z-index: 0; }
.painted-backdrop picture, .painted-backdrop picture img { display: block; width: 100%; height: 100%; }
.painted-backdrop picture img { object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.04) brightness(.84) sepia(.05); }
.painted-backdrop.has-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,13,22,.88), rgba(9,18,28,.42) 46%, rgba(8,15,24,.12) 73%), linear-gradient(0deg, rgba(5,10,17,.48), transparent 45%);
}
#titleCast { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#titleCast img { position: absolute; bottom: 6%; object-fit: contain; filter: drop-shadow(0 10px 9px rgba(0,0,0,.42)); }
#titleHero { right: 15%; width: min(27vw, 365px); max-height: 53vh; }
#titleJellop { right: 6%; width: min(11vw, 150px); max-height: 22vh; }
.title-wrap {
  position: relative;
  z-index: 3;
  width: min(460px, 35vw);
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: clamp(27px,3.5vw,44px) clamp(28px,3.6vw,48px);
  text-align: left;
  background:
    repeating-linear-gradient(8deg, transparent 0 9px, rgba(229,211,172,.018) 10px, transparent 11px),
    linear-gradient(160deg, rgba(17,29,42,.72), rgba(8,16,25,.46));
  border: 1px solid rgba(178,143,78,.34);
  box-shadow:
    inset 0 0 0 4px rgba(7,14,22,.3),
    inset 0 0 0 5px rgba(185,149,84,.1),
    0 12px 34px rgba(0,0,0,.16);
}
.title-wrap::before,
.title-wrap::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  border-color: rgba(204,168,96,.48);
}
.title-wrap::before { top: 9px; left: 9px; border-top: 1px solid; border-left: 1px solid; }
.title-wrap::after { right: 9px; bottom: 9px; border-right: 1px solid; border-bottom: 1px solid; }
.logo {
  margin: 0;
  color: #f0d8a1;
  font: 600 clamp(3.5rem, 5.4vw, 5.5rem)/.9 var(--font-title);
  letter-spacing: .025em;
  white-space: nowrap;
  text-shadow: 0 2px 0 #4c3a23, 0 5px 15px rgba(0,0,0,.78);
}
.gem-i { position: relative; display: inline-block; color: #ecd598; }
.gem-i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.11em;
  width: .16em;
  height: .25em;
  transform: translate(-44%,-46%) rotate(45deg);
  background: linear-gradient(135deg, #b6d9ed 0 23%, #467eaa 24% 68%, #214865 69%);
  border: 1px solid #d7efff;
  box-shadow: 0 0 4px rgba(76,145,190,.45);
}
.title-rule { width: min(300px,86%); display: flex; align-items: center; gap: 10px; color: var(--gold-leaf); opacity: .8; }
.title-rule i { height: 1px; flex: 1; background: linear-gradient(90deg,transparent, currentColor); }
.title-rule i:last-child { background: linear-gradient(90deg,currentColor,transparent); }
.title-rule svg { width: 15px; height: 15px; filter: drop-shadow(0 1px 2px #000); }
.tag { margin: 0 0 9px; max-width: 36ch; color: #d1c4a8; font: italic 1.05rem/1.35 var(--font-title); letter-spacing: .04em; text-shadow: 0 2px 5px #000; }
.title-wrap .menu-col { width: 100%; }
.hint { margin: 5px 0 0; color: var(--muted); font-size: var(--text-s); }
.title-credit { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(19px + var(--sab)); margin: 0; color: rgba(235,221,190,.67); font: italic .86rem var(--font-title); letter-spacing: .14em; text-align: center; text-transform: uppercase; }
body.touch .hint .kbd { display: none; }

/* ----------------------------------------------------------------- map */
#scrMap {
  background: linear-gradient(rgba(7,14,23,.04), rgba(7,14,23,.18));
}
.map-wrap {
  width: min(880px, 100%);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px 0;
  background:
    repeating-linear-gradient(7deg, transparent 0 11px, rgba(221,202,163,.018) 12px, transparent 13px),
    linear-gradient(180deg, rgba(12,25,36,.13), rgba(6,14,22,.38));
  border-left: 1px solid rgba(188,149,78,.28);
  border-right: 1px solid rgba(188,149,78,.28);
}
.map-heading { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 6px 10px; }
.map-heading h2 { margin: 0; color: var(--reward); font: 500 clamp(1.3rem, 2.35vw, 1.75rem) var(--font-display); letter-spacing: .055em; text-shadow: 0 2px 4px #000; }
.map-heading p { margin: 2px 0 0; color: var(--muted); font: italic .92rem var(--font-title); }
.mini-map {
  position: relative;
  width: 70px;
  height: 54px;
  flex: none;
  overflow: hidden;
  background:
    repeating-linear-gradient(7deg,transparent 0 7px,rgba(74,52,28,.03) 8px,transparent 9px),
    #cdbc95;
  border: 1px solid #7b623c;
  box-shadow: inset 0 0 0 3px #dacaa6, inset 0 0 0 4px rgba(77,56,30,.32);
}
.mini-map::before, .mini-map::after { content: ""; position: absolute; width: 82px; height: 2px; left: -5px; top: 25px; background: rgba(76,58,34,.42); transform: rotate(-31deg); }
.mini-map::after { transform: rotate(31deg); }
.mini-map i { position: absolute; z-index: 1; width: 7px; height: 7px; background: #315f84; border: 1px solid #e3d8bd; border-radius: 50%; box-shadow: 0 0 0 1px #2c4d65; }
.mini-map i:nth-child(1) { left: 9px; bottom: 8px; }
.mini-map i:nth-child(2) { left: 32px; top: 21px; background: #9e7737; box-shadow: 0 0 0 1px #705124; }
.mini-map i:nth-child(3) { right: 9px; top: 8px; background: #8d463d; box-shadow: 0 0 0 1px #63322d; }
#mapBoard {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  background:
    radial-gradient(circle at 21% 28%, rgba(174,170,119,.13), transparent 17%),
    radial-gradient(circle at 75% 68%, rgba(111,145,114,.16), transparent 20%),
    repeating-linear-gradient(8deg,transparent 0 12px,rgba(235,218,177,.022) 13px,transparent 14px),
    linear-gradient(125deg, rgba(91,95,69,.12), rgba(43,61,57,.06));
  border: 1px solid rgba(179,140,73,.24);
  box-shadow: inset 0 0 26px rgba(0,0,0,.12);
}
#mapBoard svg.edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#mapBoard svg.edges path { fill: none; stroke: rgba(224,209,175,.56); stroke-width: 2.25; stroke-dasharray: 2 7; }
#mapBoard svg.edges path.open { stroke: #9ab9c8; stroke-width: 3.2; stroke-dasharray: none; filter: drop-shadow(0 1px 1px rgba(21,31,32,.48)); }
#mapBoard svg.edges path.walked { stroke: rgba(201,170,108,.82); stroke-dasharray: none; }
.node {
  position: absolute;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(var(--node-tilt, 0deg));
  color: #554839;
  background:
    repeating-linear-gradient(8deg,transparent 0 6px,rgba(75,53,28,.03) 7px,transparent 8px),
    #ccb98f;
  border: 2px double #75603f;
  border-radius: 48% 52% 45% 55% / 54% 47% 53% 46%;
  box-shadow: inset 0 0 0 3px rgba(239,223,186,.34), 0 2px 5px rgba(0,0,0,.22);
  cursor: default;
  font-size: 26px;
}
.node:nth-of-type(4n + 1) { --node-tilt: -.7deg; }
.node:nth-of-type(4n + 2) { --node-tilt: .45deg; }
.node:nth-of-type(4n + 3) { --node-tilt: -.25deg; }
.node .lbl { position: absolute; top: 100%; margin-top: 4px; padding: 1px 5px; color: #d9cfbb; background: rgba(10,18,26,.78); border: 1px solid rgba(124,103,66,.38); font: .74rem var(--font-title); letter-spacing: .03em; text-shadow: 0 2px 4px #000; white-space: nowrap; }
.node.open { color: #244c69; background: #e1d2ae; border-color: #527d99; box-shadow: inset 0 0 0 3px rgba(245,232,201,.5), 0 0 0 3px rgba(72,120,151,.13), 0 5px 11px rgba(0,0,0,.38); cursor: pointer; }
.node.open .lbl { color: var(--ink); }
.node.done { opacity: .5; }
.node.here { color: #654b20; border-color: var(--reward); opacity: 1; }
.node.t-elite { color: #7f3d31; }
.node.t-forge { color: #8b5727; }
.node.t-mvp { width: 70px; height: 70px; color: var(--reward); border-color: var(--reward); font-size: 35px; }
.node.stairs { width: 40px; height: 40px; font-size: 18px; }

/* Route sites are small landmarks printed onto the dungeon plate, not a row
 * of identical app buttons. The button keeps a generous hit area while its
 * visible structure changes with the place it represents. */
.node[class*="site-"] {
  width: 72px;
  height: 66px;
  overflow: visible;
  color: #473d31;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.node[class*="site-"].open,
.node[class*="site-"].here {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.node-landmark {
  position: relative;
  width: 58px;
  height: 51px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 2px rgba(24,18,12,.28));
  transition: transform .16s, filter .16s;
}
.node-ground {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 17px;
  background: rgba(53,45,34,.34);
  border: 1px dashed rgba(221,203,165,.2);
  border-radius: 48% 52% 44% 56% / 52% 48% 52% 48%;
}
.node-emblem {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #ded1ae;
  background:
    repeating-linear-gradient(11deg,transparent 0 6px,rgba(239,223,188,.045) 7px,transparent 8px),
    #6e6d5f;
  border: 1px solid #403c32;
  clip-path: polygon(17% 2%,82% 0,96% 19%,92% 87%,71% 100%,18% 94%,2% 73%,6% 17%);
  box-shadow: inset 0 0 0 2px rgba(224,211,178,.12);
  font-size: 21px;
}
.node-accent {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 7px;
  width: 7px;
  height: 7px;
  background: #9fc2d7;
  border: 1px solid #2f4f62;
  transform: rotate(45deg);
}
.node.site-barrow .node-emblem { width: 43px; height: 29px; margin-top: 12px; color: #d3c4a2; background: #615847; border-radius: 48% 52% 10% 12%; clip-path: none; }
.node.site-barrow .node-ground { background: rgba(70,46,36,.45); }
.node.site-smithy .node-emblem { width: 43px; height: 34px; margin-top: 7px; color: #e4bb72; background: #514538; clip-path: polygon(7% 29%,48% 3%,93% 29%,91% 96%,8% 92%); }
.node.site-smithy .node-accent { background: #cc7143; border-color: #6d3728; }
.node.site-camp .node-emblem { width: 47px; height: 38px; margin-top: 6px; color: #ead6a2; background: #766247; clip-path: polygon(50% 0,98% 92%,3% 95%); }
.node.site-camp .node-accent { top: 37px; right: 7px; background: #d6904b; border-color: #6d3f25; }
.node.site-shrine .node-emblem { width: 29px; height: 42px; color: #d9d2c1; background: #73726d; clip-path: polygon(21% 0,79% 3%,100% 20%,86% 100%,12% 96%,0 18%); }
.node.site-shrine .node-accent { background: #8276a0; border-color: #4f4269; }
.node.site-lair { width: 82px; height: 76px; }
.node.site-lair .node-emblem { width: 56px; height: 49px; margin-top: 5px; color: #dfc484; background: #514438; clip-path: polygon(9% 28%,24% 5%,47% 12%,65% 0,92% 22%,100% 72%,74% 100%,27% 94%,0 68%); }
.node.site-lair .node-accent { width: 9px; height: 9px; background: #a9574c; border-color: #602f2a; }
.node[data-node-state="locked"] .node-landmark { filter: grayscale(.6) brightness(.7); opacity: .68; }
.node[data-node-state="visited"] .node-landmark { opacity: .58; }
.node[data-node-state="locked"] .lbl,
.node[data-node-state="visited"] .lbl { opacity: 0; }
.node[data-node-state="locked"]:hover .lbl,
.node[data-node-state="locked"]:focus-visible .lbl,
.node[data-node-state="visited"]:hover .lbl,
.node[data-node-state="visited"]:focus-visible .lbl { opacity: 1; }
.node[data-node-state="reachable"] .node-landmark { filter: drop-shadow(0 2px 2px rgba(24,18,12,.32)) drop-shadow(0 0 3px rgba(132,173,195,.28)); }
.node[data-node-state="current"] .node-ground { border-color: rgba(215,178,103,.68); background: rgba(103,76,40,.38); }
.node[class*="site-"]:hover .node-landmark,
.node[class*="site-"]:focus-visible .node-landmark { transform: translateY(-3px); filter: drop-shadow(0 4px 3px rgba(24,18,12,.38)); }
.node[class*="site-"] .lbl { margin-top: 0; padding: 2px 6px; color: #eee3c8; background: rgba(15,25,32,.88); border-color: rgba(147,122,79,.38); font-size: .8rem; }
.map-party-marker {
  position: absolute;
  z-index: 8;
  width: 72px;
  height: 92px;
  transform: translate(-50%, -88%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  pointer-events: none;
}
.map-party-figure {
  width: 62px;
  height: 72px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 2px rgba(31,23,15,.42));
}
.map-party-pennant {
  position: absolute;
  left: 60px;
  bottom: 37px;
  padding: 2px 6px;
  color: #eadcb9;
  background: rgba(20,29,34,.88);
  border: 1px solid rgba(182,148,84,.52);
  font: italic .67rem var(--font-title);
  white-space: nowrap;
}
.map-party-pennant::before { content: ""; position: absolute; right: 100%; top: 50%; border: 4px solid transparent; border-right-color: rgba(182,148,84,.52); transform: translateY(-50%); }
.world-tabs {
  width: min(520px, 92%);
  min-height: 59px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 10px auto 0;
  background:
    repeating-linear-gradient(7deg,transparent 0 8px,rgba(220,201,158,.02) 9px,transparent 10px),
    rgba(18,31,42,.88);
  border: 1px solid rgba(137,113,73,.72);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(218,195,145,.07), 0 -3px 10px rgba(0,0,0,.22);
}
.world-tabs button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); background: transparent; border: 0; border-right: 1px solid rgba(143,116,72,.32); cursor: pointer; font: .78rem var(--font-title); letter-spacing: .04em; }
.world-tabs button:last-child { border-right: 0; }
.world-tabs button svg { font-size: 1.3rem; }
.world-tabs button:hover, .world-tabs button:focus-visible { color: var(--ink); background: rgba(178,147,88,.08); outline: none; }
.world-tabs button.current { color: #fff0c6; background: rgba(181,143,73,.08); box-shadow: inset 0 2px 0 var(--reward); }

/* ---------------------------------------------------------------- cards */
.card {
  position: relative;
  width: var(--cw);
  height: var(--ch);
  flex: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  color: var(--parch-ink);
  background:
    repeating-linear-gradient(7deg, transparent 0 6px, rgba(87,61,29,.03) 7px, transparent 8px),
    radial-gradient(ellipse at 48% 38%, var(--parch-light), var(--parch) 62%, var(--parch-dark));
  border: 3px double #785d32;
  border-radius: 2px;
  box-shadow: 0 6px 13px rgba(0,0,0,.43), inset 0 0 10px rgba(80,53,26,.2);
  cursor: pointer;
  touch-action: none;
  transition: transform .14s, box-shadow .2s, opacity .2s;
}
.card::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(117,80,32,.32); pointer-events: none; }
.card .cost {
  position: absolute;
  z-index: 3;
  left: -10px;
  top: -10px;
  width: calc(var(--cw) * .27);
  height: calc(var(--cw) * .27);
  min-width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background:
    repeating-linear-gradient(11deg, transparent 0 6px, rgba(232,220,185,.035) 7px, transparent 8px),
    #386b92;
  border: 2px double #b8d2e2;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #193550, 0 2px 4px rgba(0,0,0,.3);
  font: 700 calc(var(--cw) * .16 + 4px) var(--font-title);
}
.card .cost.cheaper { background: #5d7d4f; border-color: #d6e2c9; }
.card .cost.dearer { background: #88483f; border-color: #e5c2ba; }
.card .ref { position: absolute; z-index: 3; right: -8px; top: -8px; padding: 2px 6px; color: var(--reward); background: #132235; border: 1px solid var(--reward); border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.4); font: 700 calc(var(--cw) * .1 + 5px) var(--font-title); }
.card .nm {
  min-height: 2.28em;
  margin: calc(var(--cw) * .12) 6px 2px calc(var(--cw) * .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 calc(var(--cw) * .095 + 4px)/1.04 var(--font-title);
  letter-spacing: .01em;
  text-align: center;
}
.card .nm span { display: inline; }
.card .art {
  position: relative;
  height: 43%;
  flex: none;
  overflow: hidden;
  margin: 0 6px;
  background: radial-gradient(ellipse at 50% 44%, #aeb8aa, #5c604f 72%, #353a34);
  border: 1px solid #745b34;
  box-shadow: inset 0 0 9px rgba(0,0,0,.35);
}
.card .art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 14px rgba(26,18,10,.52); pointer-events: none; }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .effect {
  flex: 1;
  min-height: 0;
  margin: 4px 6px 20px;
  padding: 3px 3px 2px;
  overflow: hidden;
  background: rgba(238,224,188,.35);
  border: 1px solid rgba(88,62,32,.34);
}
.card .big { display: flex; align-items: center; justify-content: center; gap: 3px; margin: 0; font-weight: 700; font-size: calc(var(--cw) * .145 + 3px); line-height: 1.05; }
.card .big svg { font-size: .78em; }
.card .big.dmg { color: #7d3026; } .card .big.block { color: #31567b; } .card .big.heal { color: #3f6b39; } .card .big.other { color: #59442e; } .card .big.up { color: #466c35; }
.card .txt { margin: 2px 1px 0; overflow: hidden; font: calc(var(--cw) * .062 + 3px)/1.18 var(--font-title); text-align: center; }
.card .foot { position: absolute; left: 6px; right: 6px; bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
.card .el { width: 16px; height: 16px; display: grid; place-items: center; color: white; border: 1px solid rgba(0,0,0,.44); border-radius: 50%; font-size: 11px; }
.card .socks { display: flex; gap: 3px; }
.gem { width: calc(var(--cw) * .1 + 3px); height: calc(var(--cw) * .1 + 3px); min-width: 10px; min-height: 10px; background: rgba(70,50,30,.2); border: 2px solid #725a34; border-radius: 50%; }
.gem.full { border-color: #332719; box-shadow: 0 0 6px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.3); }
.card .type { color: #514431; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.card.t-attack { border-color: #8e4d3f; } .card.t-spell { border-color: #4c6399; } .card.t-skill { border-color: #557658; } .card.t-power { border-color: #76628e; }
.card.g-shimmer { box-shadow: 0 7px 16px rgba(0,0,0,.48), 0 0 6px 1px rgba(226,185,102,.5); }
.card.g-soft { border-color: #c59a4d; box-shadow: 0 7px 16px rgba(0,0,0,.48), 0 0 12px 3px rgba(219,172,82,.65); }
.card.g-bright { border-color: var(--reward); box-shadow: 0 7px 16px rgba(0,0,0,.48), 0 0 20px 6px rgba(234,194,106,.8); }
.card.g-aura { border-color: #f8dd9b; box-shadow: 0 0 24px 8px rgba(232,190,94,.86), 0 0 55px 13px rgba(78,137,181,.3); animation: aura 2s ease-in-out infinite; }
.card.g-aura .nm { color: #876119; font-family: var(--font-display); text-shadow: 0 0 6px rgba(225,184,95,.65); }
@keyframes aura { 50% { box-shadow: 0 0 31px 10px rgba(241,205,123,.94), 0 0 62px 19px rgba(70,133,180,.38); } }
html.rm .card.g-aura { animation: none; }
.card.ghost { opacity: .8; background: linear-gradient(150deg, #ddd8ca, #aca9a1); border-style: dashed; }
.card.ghost .art, .card.ghost .big, .card.ghost .nm, .card.ghost .cost, .card.ghost .el { filter: saturate(.18) brightness(1.05); opacity: .78; }
.card.ghost .gem.full { box-shadow: 0 0 8px 2px rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,0,0,.3); }
.card.dispelled .ref { color: var(--muted); border-color: var(--muted); text-decoration: line-through; }
.card.unplayable { filter: brightness(.65) saturate(.58); }
.card.sel { z-index: 5; transform: translateY(-18px) scale(1.045); box-shadow: 0 0 0 2px #78a6c2, 0 13px 24px rgba(0,0,0,.52); }
.card:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.card.big-card { --cw: 180px; }
.card.dragging { opacity: .25; }
.drag-ghost { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg) scale(1.05); }
body.compact .card .txt, body.compact #hand .card .type { display: none; }
body.compact #hand .card .effect { display: flex; align-items: center; justify-content: center; }
body.compact .card .big { font-size: calc(var(--cw) * .22 + 3px); }

/* ---------------------------------------------------------------- fight */
body.in-fight #hud { background: linear-gradient(rgba(7,15,24,.86), rgba(7,15,24,.52) 64%, transparent); }
#fight { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#fight > * { pointer-events: auto; }
#enemyZones, #floaters, #playerZone { position: absolute; inset: 0; pointer-events: none; }
.ezone { position: absolute; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; }
.ezone .hit { width: 120px; border: 1px dashed transparent; border-radius: 48% 52% 45% 55% / 54% 48% 52% 46%; }
.ezone.targetable .hit { background: rgba(218,204,171,.025); border-color: rgba(211,195,159,.48); }
.ezone.aim .hit { background: rgba(73,113,135,.075); border-color: #9ab5c2; box-shadow: 0 2px 4px rgba(23,31,33,.28); }
.ezone.dead { opacity: 0; pointer-events: none; transition: opacity .5s .3s; }
.intent { display: flex; align-items: center; gap: 4px; padding: 3px 8px; color: var(--ink); background: rgba(35,31,25,.92); border: 1px solid #776447; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(224,207,168,.08), 0 2px 3px rgba(0,0,0,.22); font: 700 .94rem var(--font-title); white-space: nowrap; }
.intent svg { font-size: 1.05rem; }
.intent.attack { color: #efae9e; border-color: #9e5745; } .intent.block { color: var(--block); } .intent.buff { color: var(--reward); }
.intent.debuff, .intent.dispel { color: #c6afe4; } .intent.steal, .intent.flee { color: #efd188; }
.intent.escape { color: #fff; background: #6f3029; border-color: #e29a89; animation: pulse 1s infinite; }
.intent.summon { color: #a8d3a2; }
.intent .x { font-size: .77rem; font-weight: 600; opacity: .82; }
.intent-sub { max-width: 178px; padding: 2px 7px; color: #ddd2b9; background: rgba(31,28,24,.8); border-radius: 1px; font: italic .75rem/1.2 var(--font-title); text-align: center; }
.intent-sub:empty { display: none; }
body.condensed-intents .ezone .intent-sub { display: none; }
body.condensed-intents .ezone .intent { padding: 2px 6px; font-size: .82rem; }
body.condensed-intents #nextMovePanel[data-presentation="primary"] { border-color: rgba(169,137,78,.72); }
.ename { display: flex; align-items: center; gap: 4px; color: var(--ink); font: 700 .8rem var(--font-title); letter-spacing: .03em; text-shadow: 0 2px 4px #000; white-space: nowrap; }
.elchip { width: 18px; height: 18px; display: inline-grid; place-items: center; color: #fff; border: 1px solid rgba(0,0,0,.45); border-radius: 50%; font-size: 11px; }
.hpbar { position: relative; width: 114px; height: 14px; overflow: hidden; background: #10151a; border: 1px solid #66533f; border-radius: 1px; box-shadow: inset 0 1px 4px #000; }
.hpbar i { position: absolute; inset: 0 auto 0 0; background: #9a4438; transition: width .3s; }
.hpbar span { position: absolute; inset: 0; font: 700 .7rem/13px var(--font-ui); text-align: center; text-shadow: 0 1px 2px #000; }
.eblock { position: absolute; left: -6px; bottom: -2px; display: flex; align-items: center; gap: 2px; padding: 0 5px; color: white; background: #315b80; border: 1px solid var(--block); border-radius: 3px; font-size: .76rem; font-weight: 700; }
.estatus, .pstatus { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; }
.st { display: inline-flex; align-items: center; gap: 1px; padding: 1px 4px; color: var(--ink); background: rgba(9,19,30,.9); border: 1px solid rgba(143,116,72,.45); border-radius: 2px; font-size: .7rem; font-weight: 700; }
.st.poison { color: #a5d18e; } .st.break { color: #e89985; } .st.chill { color: #a5d6f5; } .st.stun { color: #ead082; } .st.might { color: #eca769; } .st.silence { color: #c3afe0; } .st.loot { color: var(--reward); }

#playerHud { position: absolute; left: calc(11px + var(--sal)); bottom: calc(var(--handh) + var(--sab) + 10px); display: flex; align-items: center; gap: 9px; }
.energy {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  gap: 0;
  color: #f2f4ed;
  background:
    repeating-linear-gradient(12deg, transparent 0 7px, rgba(233,219,179,.04) 8px, transparent 9px),
    radial-gradient(circle at 40% 35%, #668fad, #3c6f95 62%, #253f55 100%);
  border: 3px double #a9bfd0;
  border-radius: 48% 52% 46% 54% / 52% 47% 53% 48%;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 0 0 2px rgba(15,44,64,.36);
  font-family: var(--font-title);
  font-weight: 700;
  text-shadow: 0 1px 2px #0a2540;
}
.energy b { font-size: 1.6rem; line-height: 1; }
.energy small { align-self: end; margin-bottom: 13px; font-size: .76rem; }
.energy.empty { filter: grayscale(.9) brightness(.6); box-shadow: none; }
.vitals { display: flex; flex-direction: column; gap: 4px; }
#pHp { width: 155px; height: 20px; }
#pHp span { font-size: .82rem; line-height: 19px; }
#pHp i { background: #5f9258; }
#pHp.low i { background: #a84d40; }
.pblock { display: flex; align-items: center; gap: 3px; padding: 4px 9px; color: #fff; background: #315b80; border: 1px solid var(--block); border-radius: 3px; font-size: 1.05rem; font-weight: 700; }
#castRow { position: absolute; left: calc(11px + var(--sal)); bottom: calc(var(--handh) + var(--sab) + 84px); display: flex; gap: 6px; }
.castchip { display: flex; align-items: center; gap: 4px; padding: 3px 8px; color: #d7caec; background: rgba(49,42,75,.93); border: 1px solid #8773ac; border-radius: 3px; font-size: .8rem; font-weight: 700; }
#piles { position: absolute; right: calc(11px + var(--sar)); bottom: calc(var(--handh) + var(--sab) + 72px); display: flex; gap: 6px; }
.pile { display: flex; align-items: center; gap: 3px; padding: 3px 8px; color: var(--muted); background: rgba(12,23,35,.9); border: 1px solid #655e50; border-radius: 3px; font-size: .78rem; }
#nextMovePanel {
  position: absolute;
  top: calc(var(--hudh) + var(--sat) + 12px);
  left: 50%;
  width: min(310px, 42vw);
  min-height: 0;
  padding: 8px 13px;
  transform: translateX(-50%);
  color: var(--ink);
  background:
    repeating-linear-gradient(8deg, transparent 0 8px, rgba(221,201,157,.018) 9px, transparent 10px),
    rgba(35,31,25,.94);
  border: 1px solid #7c6849;
  box-shadow: inset 0 0 0 2px rgba(225,205,161,.06), 0 3px 8px rgba(0,0,0,.27);
  font-size: .83rem;
  line-height: 1.25;
  text-align: center;
}
#nextMovePanel:empty { display: none; }
#nextMovePanel::before,
#nextMovePanel::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(196,157,87,.62));
}
#nextMovePanel::before { right: 100%; }
#nextMovePanel::after { left: 100%; transform: scaleX(-1); }
#nextMovePanel:not([hidden]) { display: grid; gap: 2px; }
#nextMovePanel b, #nextMovePanel strong { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--reward); font-family: var(--font-title); letter-spacing: .04em; }
#nextMovePanel small { display: block; color: var(--muted); }
#nextMovePanel > span { display: block; }
#hand { position: absolute; left: 0; right: 0; bottom: calc(12px + var(--sab)); height: var(--ch); display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 0 calc(8px + var(--sar)) 0 calc(8px + var(--sal)); pointer-events: none; }
#hand .card { pointer-events: auto; }
#hand .card:nth-child(5n + 1) { transform: rotate(-.32deg); }
#hand .card:nth-child(5n + 2) { transform: rotate(.2deg); }
#hand .card:nth-child(5n + 4) { transform: rotate(-.18deg); }
#hand .card:nth-child(5n) { transform: rotate(.3deg); }
#hand .card.sel { transform: translateY(-18px) scale(1.045); }
#hand .card.enter { animation: dealIn .28s ease-out both; }
@keyframes dealIn { from { transform: translateY(60px) scale(.84); opacity: 0; } }
html.rm #hand .card.enter { animation: none; }
#btnEnd {
  position: absolute;
  right: calc(11px + var(--sar));
  bottom: calc(var(--handh) + var(--sab) + 12px);
  min-width: 132px;
  color: #f6f1df;
  background:
    repeating-linear-gradient(8deg, transparent 0 7px, rgba(229,211,172,.025) 8px, transparent 9px),
    #356b93;
  border-color: #8eb5ce;
  box-shadow: inset 0 0 0 2px rgba(10,30,46,.48), 0 2px 0 #18364d, 0 4px 9px rgba(0,0,0,.24);
}
#btnEnd.nudge { animation: nudgeGlow 1.2s ease-in-out infinite; }
@keyframes nudgeGlow { 50% { box-shadow: inset 0 0 0 2px rgba(8,26,44,.62), 0 3px 0 #102b46, 0 0 0 6px rgba(72,151,215,.25), 0 0 25px rgba(85,177,236,.7); } }
html.rm #btnEnd.nudge { animation: none; box-shadow: 0 0 0 4px rgba(83,165,224,.45); }
body.touch #btnEnd .kbd { display: none; }
#btnEnd:disabled { filter: grayscale(1) brightness(.58); }

.floater { position: absolute; transform: translate(-50%,-50%); color: white; font-size: 1.65rem; font-weight: 800; text-shadow: 0 2px 0 #000, 0 0 8px #000; white-space: nowrap; pointer-events: none; animation: floatUp .95s ease-out forwards; }
.floater.crit { color: var(--reward); font-size: 2.1rem; } .floater.pdmg { color: #ed9586; } .floater.block { color: var(--block); font-size: 1.15rem; } .floater.heal { color: var(--heal); } .floater.info { color: var(--parch); font-size: 1rem; } .floater.strong { color: #efd28b; } .floater.weak { color: #b8b8b8; }
@keyframes floatUp { 0% { transform: translate(-50%,-30%) scale(.65); opacity: 0; } 15% { transform: translate(-50%,-60%) scale(1.12); opacity: 1; } 100% { transform: translate(-50%,-160%) scale(1); opacity: 0; } }
html.rm .floater { animation: fadeOnly .95s forwards; }
@keyframes fadeOnly { 0%,70% { opacity: 1; } 100% { opacity: 0; } }

/* Landscape phones: cards become a readable side list. */
body.side #hand { top: calc(var(--hudh) + var(--sat)); right: calc(7px + var(--sar)); bottom: calc(60px + var(--sab)); left: auto; width: 214px; height: auto; padding: 0; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 4px; }
body.side #hand .card { width: 100%; height: 50px; }
body.side #hand .card:nth-child(n) { transform: none; }
body.side #hand .card .art, body.side #hand .card .txt, body.side #hand .card .type { display: none; }
body.side #hand .card .effect { position: absolute; inset: 0 5px auto auto; width: 70px; height: 100%; margin: 0; display: grid; place-items: center; border: 0; background: transparent; }
body.side #hand .card .nm { height: 100%; min-height: 0; margin: 0 72px 0 29px; justify-content: flex-start; text-align: left; font-size: .9rem; }
body.side #hand .card .big { margin: 0; font-size: 1.15rem; }
body.side #hand .card .cost { top: 8px; left: -8px; width: 30px; height: 30px; font-size: 1rem; }
body.side #hand .card .foot { right: 70px; bottom: 16px; left: auto; }
body.side #hand .card .foot .el { display: none; }
body.side #hand .card.sel { transform: translateX(-16px); }
body.side #btnEnd { right: calc(10px + var(--sar)); bottom: calc(6px + var(--sab)); min-width: 204px; min-height: 44px; }
body.side #playerHud { bottom: calc(10px + var(--sab)); }
body.side #castRow { bottom: calc(80px + var(--sab)); }
body.side #piles { right: calc(232px + var(--sar)); bottom: calc(10px + var(--sab)); }
body.side #nextMovePanel { right: calc(232px + var(--sar)); left: auto; width: 245px; transform: none; }

/* --------------------------------------------------------- details & sheets */
#detail { position: absolute; z-index: 35; top: 50%; left: 50%; width: min(380px,92vw); display: flex; align-items: flex-start; gap: 14px; padding: 17px; transform: translate(-50%,-55%); color: var(--ink); background: repeating-linear-gradient(8deg,transparent 0 8px,rgba(229,210,168,.018) 9px,transparent 10px),#142434; border: 1px solid var(--edge-bright); border-radius: 1px; box-shadow: inset 0 0 0 3px rgba(5,12,19,.55), 0 20px 60px rgba(0,0,0,.65); }
#detail .card { --cw: 124px; flex: none; }
#detail .dtext { font-size: var(--text-m); line-height: 1.42; }
#detail .dtext h4 { margin: 0 0 4px; color: var(--reward); font: 600 1.2rem var(--font-title); }
#detail .dtext p { margin: 3px 0; }
#detail .sock-line { color: var(--muted); font-size: var(--text-s); }
.cards-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.cards-row .card { --cw: clamp(98px,26vw,152px); }
.cards-row .card:hover { transform: translateY(-6px); }
.gain-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.mc { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; color: var(--ink); background: rgba(9,19,30,.68); border: 1px solid #5f5b50; border-radius: 1px; cursor: pointer; }
.mc img { width: 38px; height: 38px; object-fit: contain; background: radial-gradient(#ded4bb,#877b62); border-radius: 2px; filter: saturate(.82); }
.mc b { font-size: .92rem; }
.mc small { display: block; max-width: 220px; color: var(--muted); font-size: .78rem; }
.mc.sel { border-color: var(--reward); box-shadow: 0 0 0 2px rgba(224,184,98,.45); }
.mc.mvp img { background: radial-gradient(#efe3c1,#ab8a45); }
.mc-row { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 4px; touch-action: pan-x; }
.jobs { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
.job { width: 230px; padding: 14px; color: var(--parch-ink); background: repeating-linear-gradient(8deg,transparent 0 7px,rgba(83,59,28,.025) 8px,transparent 9px),linear-gradient(155deg,var(--parch-light),var(--parch-dark)); border: 2px double #806238; border-radius: 1px; cursor: pointer; text-align: center; box-shadow: 0 5px 12px rgba(0,0,0,.27); }
.job:hover, .job:focus-visible { border-color: #ca9b45; outline: none; transform: translateY(-2px); }
.job img { width: 145px; height: 145px; object-fit: contain; filter: saturate(.78) contrast(1.03); }
.job h3 { margin: 4px 0; color: #5b3d19; }
.job p { color: #54493b; font-size: var(--text-s); }
.stats-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; }
.stats-grid .sname { color: var(--reward); font-weight: 700; }
.stats-grid .sdesc { color: var(--muted); font-size: var(--text-s); }
.plusbtn { width: 44px; height: 44px; color: var(--reward); background: rgba(51,80,105,.65); border: 1px solid var(--edge); border-radius: 3px; cursor: pointer; font-size: 1.35rem; font-weight: 700; }
.plusbtn:disabled { opacity: .3; cursor: default; }
.skill { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(143,116,72,.42); }
.skill b { color: var(--ink); } .skill small { display: block; color: var(--muted); }
.deck-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 11px 4px; }
.deck-grid .card { --cw: clamp(82px,22vw,124px); }
.deck-grid .card.slot-open { box-shadow: 0 0 0 3px var(--accent-bright),0 7px 16px rgba(0,0,0,.48); }
.deck-grid .gem.pickable { border-color: var(--reward); animation: pulse 1s infinite; }
#albumPanel { min-height: min(620px,78vh); }
#albumPanel .deck-grid, #albumPanel .gain-list { align-content: flex-start; }
.album-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 14px; }
.album-head h2 { margin-bottom: 3px; }
.album-tabs { display: flex; flex: none; gap: 4px; }
.album-tabs button { min-height: 38px; padding: 7px 14px; color: var(--muted); background: rgba(11,23,36,.72); border: 1px solid #625b4c; border-radius: 0; cursor: pointer; font: .88rem var(--font-title); }
.album-tabs button:hover, .album-tabs button:focus-visible { color: var(--ink); border-color: var(--edge-bright); outline: none; }
.album-tabs button.active { color: #fff0c9; background: #244d6b; border-color: #80abc6; box-shadow: inset 0 -3px 0 var(--accent-bright); }
body.touch .album-tabs button, body.touch .forge-rail button { min-height: 44px; }
.album-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; padding: 4px 2px 18px; }
.album-card { min-width: 0; overflow: hidden; color: var(--parch-ink); background: repeating-linear-gradient(7deg,transparent 0 7px,rgba(76,55,29,.025) 8px,transparent 9px),linear-gradient(155deg,var(--parch-light),var(--parch-dark)); border: 1px solid #8f6c3e; box-shadow: 0 5px 12px rgba(0,0,0,.26); }
.album-card img { display: block; width: 100%; height: 104px; object-fit: cover; border-bottom: 1px solid #8b6738; filter: saturate(.78) contrast(1.03); }
.album-card > div { display: grid; gap: 2px; padding: 9px 10px 11px; }
.album-card b { color: #4e351d; font: 700 1rem var(--font-title); }
.album-card small { overflow: hidden; color: #71634f; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.album-card span { color: #4f4638; font: italic .82rem/1.25 var(--font-title); }
.album-monster-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 9px; padding-bottom: 18px; }
.album-monster-grid .mc { width: 100%; }
.album-locked { cursor: default; opacity: .58; }
.monster-silhouette { width: 38px; height: 38px; display: grid; place-items: center; color: #8f8776; background: #0d1824; border: 1px solid #554f44; font: 700 1.25rem var(--font-title); }
.album-empty { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; }
.album-empty > span { color: var(--reward); font-size: 2.5rem; }
.album-empty h3, .album-empty p { margin: 0; }
#albumPanel blockquote { max-width: 55ch; margin: 14px auto 2px; color: #d8c9a8; font: italic 1rem/1.4 var(--font-title); text-align: center; }
.album-jellop { display: block; width: 76px; height: 76px; margin: -8px 14px 0 auto; object-fit: contain; filter: saturate(.72) sepia(.08); }
.release-meta { color: var(--reward) !important; font: 700 .95rem var(--font-title); letter-spacing: .04em; }
.release-list { max-width: 74ch; margin: 12px 0 0; padding: 0 0 0 1.45em; color: var(--ink); }
.release-list li { margin: 8px 0; padding-left: .25em; line-height: 1.38; }
.forge-guide-card { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 250px; }
.forge-guide-card .card { --cw: 142px; }
.empty-state { align-self: center; margin: auto; color: var(--muted); font: italic .95rem var(--font-title); text-align: center; }

/* The job tree reads as a hand-drawn parchment spread, not another navy modal. */
#jobPanel { color: var(--parch-ink); background: radial-gradient(circle at 82% 18%,rgba(125,92,46,.13),transparent 20%),repeating-linear-gradient(8deg,transparent 0 8px,rgba(83,59,28,.025) 9px,transparent 10px),linear-gradient(148deg,#e7d7b2,#c8b384); border-color: #806238; box-shadow: inset 0 0 0 3px #d4c199,inset 0 0 0 5px rgba(92,60,26,.42),0 20px 60px rgba(0,0,0,.58); }
#jobPanel::before { border-color: var(--ink-rule); opacity: .56; }
.job-map-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.job-map-head .compass { width: 58px; height: 58px; display: grid; place-items: center; flex: none; color: #6a4b28; border: 1px solid rgba(89,60,31,.45); border-radius: 50%; font-size: 2rem; }
.job-map-head h2 { margin: 0; color: #4d351d; }
.job-map-head p { margin: 3px 0 0; color: #5b4e3d; }
.job-tree { position: relative; display: grid; justify-items: center; gap: 10px; padding: 2px 0 6px; }
.job-root { position: relative; z-index: 1; width: 138px; display: grid; justify-items: center; color: #49351f; font-family: var(--font-title); }
.job-root img { width: 78px; height: 78px; object-fit: contain; filter: sepia(.12) saturate(.75); }
.job-root small { color: #76644b; font-size: .68rem; }
.job-branch { width: 70%; height: 22px; border-top: 1px solid #8c714d; border-left: 1px solid #8c714d; border-right: 1px solid #8c714d; }
.first-jobs { width: 100%; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
.first-jobs .job { width: auto; min-width: 0; padding: 8px 6px 10px; }
.first-jobs .job img { width: 72px; height: 72px; }
.first-jobs .job h3 { margin: 3px 0; font-size: .9rem; }
.first-jobs .job p { min-height: 3.4em; margin: 3px 0; font-size: .67rem; line-height: 1.25; }
.first-jobs .job small { display: block; overflow: hidden; margin-top: 3px; color: #715f47; font-size: .59rem; line-height: 1.25; text-overflow: ellipsis; }
.first-jobs .job.locked { cursor: default; filter: saturate(.3); opacity: .68; }
.job-silhouette { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto; color: #71664f; background: rgba(82,67,46,.15); border: 1px dashed #806a49; font-size: 2rem; }
.second-jobs { width: 100%; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
.second-jobs > span { min-width: 0; padding: 7px 4px; color: #746550; background: rgba(91,72,45,.08); border: 1px dashed rgba(99,75,45,.45); font: .66rem/1.15 var(--font-title); text-align: center; }
.second-jobs small { display: block; margin-top: 3px; font: .58rem var(--font-ui); text-transform: uppercase; }
.rebirth-node { min-width: 150px; padding: 8px 18px; color: #6a573d; border: 1px solid #91754f; text-align: center; }
.rebirth-node svg { margin-right: 5px; }
.rebirth-node small { display: block; font-size: .63rem; }

/* ---------------------------------------------------------------- forge */
body.in-forge #hud { display: none; }
#scrForge {
  z-index: 12;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: calc(13px + var(--sat)) calc(16px + var(--sar)) calc(9px + var(--sab)) calc(16px + var(--sal));
  background:
    radial-gradient(circle at 51% 55%, rgba(157,73,29,.16), transparent 24%),
    linear-gradient(rgba(5,9,13,.18), rgba(5,9,13,.68));
}
#scrForge.painted-forge { background: linear-gradient(rgba(5,9,13,.18),rgba(5,9,13,.63)),var(--forge-backdrop) center/cover no-repeat; }
.forge-top { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; flex: none; gap: 14px; }
.forge-top h2 { margin: 0; color: #ebc178; font: 500 clamp(1.55rem,3vw,2.35rem)/1 var(--font-display); letter-spacing: .08em; text-shadow: 0 2px 7px #000; }
.forge-top p { margin: 3px 0 0; color: #c5b79b; font: italic .9rem var(--font-title); }
.forge-supplies { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.forge-layout { width: 100%; min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(150px,190px) minmax(260px,1fr) minmax(250px,330px); align-items: stretch; gap: 13px; }
.forge-rail { display: flex; flex-direction: column; align-self: center; gap: 6px; padding: 9px; background: repeating-linear-gradient(8deg,transparent 0 8px,rgba(224,201,157,.018) 9px,transparent 10px),rgba(15,27,38,.95); border: 1px solid var(--edge); box-shadow: inset 0 0 0 3px rgba(4,10,16,.55),0 9px 25px rgba(0,0,0,.3); }
.forge-rail button { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 8px 11px; color: var(--muted); background: rgba(20,33,45,.56); border: 1px solid transparent; border-radius: 0; cursor: pointer; font-family: var(--font-title); text-align: left; }
.forge-rail button svg { color: #a58a58; font-size: 1.2rem; }
.forge-rail button:hover, .forge-rail button:focus-visible { color: var(--ink); border-color: #6f6654; outline: none; }
.forge-rail button.active { color: #f1dbad; background: rgba(121,86,39,.22); border-color: var(--reward); box-shadow: inset 3px 0 0 var(--reward); }
.forge-stage { position: relative; min-height: 260px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px 55px; background: radial-gradient(ellipse at 50% 72%,rgba(190,91,31,.18),transparent 32%),linear-gradient(180deg,rgba(14,25,35,.34),rgba(7,14,21,.72)); border: 1px solid rgba(139,110,65,.5); box-shadow: inset 0 0 44px rgba(0,0,0,.4); }
.forge-stage::before { content: ""; position: absolute; left: 50%; bottom: 23px; width: min(230px,72%); height: 55px; transform: translateX(-50%); background: linear-gradient(165deg,#606268 0 38%,#30343b 39% 67%,#1e242b 68%); clip-path: polygon(9% 0,93% 0,84% 36%,61% 46%,63% 100%,35% 100%,39% 47%,16% 34%); filter: drop-shadow(0 10px 8px rgba(0,0,0,.65)); opacity: .85; }
.forge-stage::after { content: ""; position: absolute; left: 50%; bottom: 42px; width: min(170px,52%); height: 18px; transform: translateX(-50%); background: radial-gradient(ellipse,rgba(255,150,50,.68),rgba(216,78,19,.2) 48%,transparent 73%); filter: blur(4px); }
#anvilCard { position: relative; z-index: 2; flex: none; }
#anvilCard .card { --cw: clamp(122px,min(24vw,26vh),184px); cursor: default; transition: transform .2s,opacity .6s,filter .6s; }
#anvilCard .card.shake { animation: shake .35s; }
#anvilCard .card.cracked::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,transparent 44%,rgba(40,20,10,.95) 45%,transparent 47%),linear-gradient(60deg,transparent 58%,rgba(40,20,10,.9) 59%,transparent 60.5%),linear-gradient(170deg,transparent 30%,rgba(40,20,10,.85) 31%,transparent 32.5%); }
#anvilCard .card.rise { animation: rise .6s ease-out; }
@keyframes shake { 20% { transform: translateX(-8px) rotate(-2deg); } 40% { transform: translateX(7px) rotate(2deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes rise { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
html.rm #anvilCard .card.shake, html.rm #anvilCard .card.rise { animation: none; }
#anvilCard .gem.pickable { width: 20px; height: 20px; border-color: var(--reward); cursor: pointer; animation: pulse 1s infinite; }
#forgeResult { position: relative; z-index: 2; min-height: 1.6em; margin-top: 7px; color: var(--ink); font: 500 1.45rem var(--font-display); letter-spacing: .03em; text-align: center; }
#forgeResult.up { color: var(--reward); text-shadow: 0 0 18px rgba(225,180,89,.75); } #forgeResult.slip { color: #dda064; } #forgeResult.break { color: #df7967; }
.forge-side { align-self: center; display: flex; flex-direction: column; gap: 10px; }
#forgeOdds, #forgeHeatPanel { width: 100%; padding: 15px; background: repeating-linear-gradient(8deg,transparent 0 8px,rgba(224,201,157,.018) 9px,transparent 10px),rgba(16,29,41,.96); border: 1px solid var(--edge); box-shadow: inset 0 0 0 3px rgba(5,12,19,.52); text-align: center; }
#forgeOdds .pct { color: var(--reward); font: 700 clamp(2rem,4vw,3rem)/1 var(--font-title); }
#forgeOdds .pct.risk { color: #dfa56c; } #forgeOdds .pct.danger { color: #df7967; }
#forgeOdds .parts { color: var(--muted); font-size: var(--text-s); }
#forgeOdds .fail { margin-top: 5px; font-size: var(--text-m); }
#forgeOdds .fail svg { margin-right: 4px; vertical-align: -2px; }
#forgeOdds .fail.none { color: var(--heal); } #forgeOdds .fail.slip { color: #dda064; } #forgeOdds .fail.break { color: #df7967; font-weight: 700; }
#forgeOdds .gain { color: var(--ink); font-size: var(--text-s); }
#forgeHeatPanel { text-align: left; }
#forgeHeatPanel b { color: var(--reward); font: 600 1rem var(--font-title); letter-spacing: .04em; }
#forgeHeatPanel small { display: block; margin-top: 7px; color: var(--muted); font: italic .78rem/1.3 var(--font-title); }
#forgeHeatLabel { display: block; margin-top: 3px; color: var(--ink); font-size: .78rem; text-align: right; }
.heat-track { position: relative; height: 11px; overflow: hidden; margin-top: 9px; background: #0d151d; border: 1px solid #66533d; box-shadow: inset 0 2px 4px #000; }
.heat-track i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg,#82452f,#b86c3b,#cfaa62); box-shadow: 0 0 6px rgba(199,112,57,.4); transition: width .3s; }
.forge-bottom { width: 100%; flex: none; display: flex; flex-direction: column; gap: 6px; }
.picker { display: flex; gap: 9px; min-height: 78px; overflow-x: auto; padding: 6px 6px 2px; touch-action: pan-x; }
.picker .card { --cw: clamp(62px,min(12vw,10vh),92px); }
.picker .card.onanvil { outline: 3px solid var(--reward); outline-offset: 2px; }
.picker .card .txt, .picker .card .type { display: none; }
.picker .card .effect { display: flex; align-items: center; justify-content: center; }
.forge-actions { display: flex; align-items: center; gap: 9px; }
.forge-actions .mc-row { flex: 1; min-width: 0; }
.forge-actions .mc small { display: none; }
.forge-actions .mc { flex: none; }
.forge-actions .mc b { font-size: .83rem; white-space: nowrap; }
.toggle-btn { min-height: 50px; display: flex; align-items: center; gap: 6px; padding: 8px 13px; color: var(--muted); background: #182a3a; border: 1px solid var(--edge); border-radius: 1px; cursor: pointer; }
.toggle-btn[aria-pressed="true"] { color: #f2d997; background: rgba(121,90,38,.35); border-color: var(--reward); }
.toggle-btn[aria-pressed="true"]::before { content: "✓"; }
.hammer { position: relative; width: clamp(190px,20vw,270px); height: 58px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 9px; color: #2b1c0d; background: #c7984f; border: 2px double #eed49a; border-radius: 1px; box-shadow: inset 0 0 0 3px rgba(92,53,17,.25),0 3px 0 #6c461f,0 0 14px rgba(194,128,52,.2); cursor: pointer; touch-action: none; }
.hammer svg, .hammer span { position: relative; z-index: 1; }
.hammer svg { font-size: 1.65rem; }
.hammer span { font: 700 1rem var(--font-title); letter-spacing: .035em; }
.hammer .charge { position: absolute; inset: auto 0 0; height: 0; background: linear-gradient(0deg,#e96622,#ffe07e); opacity: .68; }
.hammer.armed { border-color: #fff4d2; box-shadow: inset 0 0 0 3px rgba(92,53,17,.28),0 3px 0 #734819,0 0 36px rgba(244,190,79,.8); }
.hammer:disabled { filter: grayscale(.85) brightness(.55); cursor: default; }
.forge-tagline { margin: 0; color: #c8b99b; font: italic .82rem var(--font-title); letter-spacing: .05em; text-align: center; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  :root { --cw: clamp(70px,calc((100vw - var(--sal) - var(--sar) - 24px)/5.25),118px); }
  .forge-layout { grid-template-columns: 132px minmax(220px,1fr) minmax(210px,260px); gap: 8px; }
  .forge-rail { padding: 6px; }
  .forge-rail button { min-height: 45px; padding: 7px 8px; font-size: .88rem; }
  #forgeOdds, #forgeHeatPanel { padding: 11px; }
  .hammer { width: 190px; }
}

@media (max-width: 720px) {
  :root { --hudh: 52px; }
  .dn { display: none; }
  .hud-econ .pill { padding: 3px 7px; }
  .where { font-size: .76rem; }
  .title-wrap { width: min(470px,89vw); min-height: min(68vh,590px); padding: 28px 25px; }
  #scrTitle { justify-content: center; background: linear-gradient(rgba(7,15,25,.18),rgba(7,15,25,.42)),radial-gradient(circle at 50% 28%,rgba(70,101,104,.18),transparent 72%); }
  .painted-backdrop.has-backdrop::after { background: linear-gradient(rgba(6,13,22,.28),rgba(6,13,22,.72)); }
  #titleHero { right: 32%; width: min(52vw,330px); opacity: .72; }
  #titleJellop { right: 17%; width: min(22vw,130px); opacity: .82; }
  .logo { font-size: clamp(4rem,18vw,6.3rem); }
  .tag { font-size: .95rem; }
  .album-head { align-items: stretch; flex-direction: column; gap: 9px; }
  .album-tabs { width: 100%; }
  .album-tabs button { flex: 1; }
  .album-card-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 8px; }
  .first-jobs, .second-jobs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .job-branch { width: 82%; }
  .map-wrap { padding-inline: 6px; }
  .mini-map { width: 61px; height: 46px; }
  .world-tabs { width: 96%; }
  #nextMovePanel { top: calc(var(--hudh) + var(--sat) + 8px); width: min(285px,58vw); padding: 6px 9px; font-size: .77rem; }
  #pHp { width: 126px; }
  .forge-layout { grid-template-columns: 104px minmax(0,1fr); grid-template-rows: minmax(230px,1fr) auto; }
  .forge-rail { grid-column: 1; grid-row: 1; align-self: stretch; justify-content: center; }
  .forge-rail button { min-height: 42px; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 3px; font-size: .72rem; text-align: center; }
  .forge-stage { grid-column: 2; grid-row: 1; min-height: 225px; }
  .forge-side { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  #forgeOdds, #forgeHeatPanel { min-height: 92px; }
  #forgeOdds .pct { font-size: 1.8rem; }
  #forgeHeatPanel small { display: none; }
  .forge-top h2 { font-size: 1.4rem; }
  .forge-top p { display: none; }
  .forge-supplies .pill.big { min-height: 32px; padding: 4px 7px; font-size: .8rem; }
  .picker { min-height: 66px; }
  .forge-actions { gap: 6px; }
  .forge-actions #btnLeave { min-width: 0; padding: 8px 10px; font-size: .85rem; }
  .forge-actions .mc b { display: none; }
  .toggle-btn { min-width: 48px; padding: 7px 8px; font-size: 0; }
  .toggle-btn svg { font-size: 1.25rem; }
  .hammer { width: min(200px,39vw); height: 52px; }
}

@media (max-width: 480px) {
  :root { --cw: clamp(62px,calc((100vw - var(--sal) - var(--sar) - 30px)/5),90px); }
  #hud { gap: 5px; padding-inline: calc(6px + var(--sal)) calc(6px + var(--sar)); }
  .hud-econ { gap: 3px; }
  .hud-econ .pill { min-width: 29px; justify-content: center; }
  .hud-econ .pill svg { display: none; }
  .iconbtn { width: 44px; height: 44px; }
  .logo { font-size: clamp(3rem,15.5vw,4.2rem); }
  .title-wrap { width: 88vw; min-height: 0; padding: 24px 16px 22px; }
  #titleHero { right: 43%; bottom: 4%; width: 34vw; opacity: .82; }
  #titleJellop { right: 18%; bottom: 5%; width: 16vw; opacity: .88; }
  .title-rule { width: 76%; }
  .menu-col { width: min(294px,86vw); }
  .menu-col button { min-height: 44px; font-size: .94rem; }
  .album-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .album-card img { height: 82px; }
  .first-jobs, .second-jobs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-map-head .compass { display: none; }
  .first-jobs .job p { min-height: 0; }
  .map-heading p { display: none; }
  #mapBoard { min-height: 220px; }
  .node { width: 48px; height: 48px; font-size: 22px; }
  .node.t-mvp { width: 61px; height: 61px; }
  .node[class*="site-"] { width: 64px; height: 58px; }
  .node-landmark { transform: scale(.9); }
  .node[class*="site-"]:hover .node-landmark,
  .node[class*="site-"]:focus-visible .node-landmark { transform: translateY(-2px) scale(.9); }
  .map-party-marker { transform: translate(-50%, -82%) scale(.88); }
  .map-party-pennant { display: none; }
  .world-tabs { min-height: 53px; }
  .world-tabs button { font-size: .7rem; }
  .ezone { width: 104px; }
  .ezone .hit { width: 98px; }
  .hpbar { width: 94px; }
  .energy { width: 53px; height: 53px; }
  #playerHud { gap: 6px; }
  #pHp { width: 110px; }
  #btnEnd { min-width: 96px; padding: 9px 10px; }
  #nextMovePanel { width: 62vw; }
  #hand .card .cost { left: -1px; top: -8px; }
  #hand .card .ref { right: -1px; top: -7px; }
  .card .nm { margin-top: calc(var(--cw)*.11); }
  .forge-top { gap: 6px; }
  .forge-top h2 { font-size: 1.2rem; }
  .forge-supplies { gap: 3px; }
  .forge-supplies .pill.big { padding: 3px 5px; }
  .forge-layout { grid-template-columns: 86px minmax(0,1fr); gap: 5px; }
  .forge-rail button { font-size: .65rem; }
  .forge-stage { padding-inline: 4px; }
  #anvilCard .card { --cw: 106px; }
  #forgeOdds, #forgeHeatPanel { padding: 7px; }
  #forgeOdds .gain, #forgeOdds .parts { font-size: .74rem; }
  #forgeOdds .fail { font-size: .82rem; }
  .hammer { width: 43vw; min-width: 144px; }
  .hammer span { font-size: .86rem; }
  .forge-tagline { display: none; }
}

@media (max-height: 700px) {
  .title-wrap { min-height: 0; padding-top: 22px; padding-bottom: 22px; }
  .title-wrap .logo { font-size: clamp(3rem,9vh,5rem); }
  .title-wrap .tag { margin-bottom: 3px; }
  .menu-col { gap: 5px; }
  .menu-col button { min-height: 42px; padding-block: 7px; }
  .forge-layout { min-height: 218px; }
  .forge-stage { min-height: 210px; padding-bottom: 44px; }
  #anvilCard .card { --cw: clamp(100px,22vh,145px); }
  .forge-side { gap: 6px; }
  #forgeOdds, #forgeHeatPanel { padding-block: 8px; }
  .picker { min-height: 58px; padding-top: 2px; }
  .picker .card { --cw: clamp(56px,9vh,76px); }
  .forge-tagline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Later component hover rules never suppress the keyboard focus indicator. */
#app button:focus-visible,
#app [role="button"]:focus-visible,
#app a:focus-visible {
  outline: 2px solid #9dc9e7;
  outline-offset: 3px;
}