/* ═══════════════════════════════════════════════════════════════════════
   THALASSA — "AEGEAN BRONZE" design system
   Deep ink-navy chrome · aged parchment scrolls · engraved bronze controls.
   Fonts: Cinzel (display, vendored) + Alegreya (body, vendored).
   No images, no emoji — texture comes from CSS gradients + one inline SVG
   turbulence grain; icons are inline SVG (Agent E's icon map).
   Z ladder: world 0 < hud 10 < flash 14 < battle 15 < overlays 20 <
             inspector 25 < mute 30 < dragghost 400.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fonts ──────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cinzel';
  src: url('/static/fonts/cinzel-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya';
  src: url('/static/fonts/alegreya-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya';
  src: url('/static/fonts/alegreya-italic.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* ink navy chrome */
  --ink0: #06090d;
  --ink1: #0b141d;
  --ink2: #0f1b28;
  --ink3: #16273a;
  --ink-glass: rgba(11, 20, 29, .86);
  /* parchment */
  --parch: #efe6d0;
  --parch-hi: #f7f0de;
  --parch-lo: #ddcba0;
  --parch-line: #c2ad83;
  --sepia: #2c2212;          /* ink on parchment */
  --sepia-soft: #6b5a38;
  /* bronze / gold structure */
  --bronze: #c9a227;
  --bronze-deep: #8a6c1c;
  --bronze-dark: #52400e;
  --gilt: #f0d060;
  --gleam: #ffefb0;
  /* text on ink */
  --bone: #ede3c8;
  --mist: #9fb2c1;
  /* signals */
  --blood: #cf4432;
  --blood-deep: #8e2c1e;
  --leaf: #3fae6a;
  --wine: #7d5ba6;
  --sea: #2e9e8f;
  --steel: #3c7391;
  /* realm accents (contract REALM_INFO) */
  --c-ice: #7fd4ef;
  --c-desert: #e8c27a;
  --c-jungle: #6fd490;
  --c-autumn: #f0a24f;
  --c-hub: #d9a441;
  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* type */
  --disp: 'Cinzel', 'Times New Roman', serif;
  --body: 'Alegreya', Georgia, serif;
  /* motion */
  --fast: .16s ease-out;
  --med: .22s ease-out;
  /* notched-corner frame (an octagon; --notch set per component) */
  --notch: 10px;
  --cp: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
                var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
  /* grayscale grain (inline SVG turbulence, tiled) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --shadow-card: drop-shadow(0 18px 34px rgba(2, 6, 10, .55)) drop-shadow(0 2px 6px rgba(2, 6, 10, .4));
}

/* ── reset / base ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--bone);
  background: var(--ink1);
}
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 700; line-height: 1.15; }
::selection { background: rgba(201, 162, 39, .4); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
  border-radius: 2px;
}
.hidden { display: none !important; }
svg { display: block; }
button svg, .howto-card svg { width: 100%; height: 100%; }

/* gilt display text */
.gilt {
  background: linear-gradient(180deg, #f7e295 0%, #d9ae37 48%, #9d7a1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(3, 6, 10, .6));
}

/* ── world + scene fade ─────────────────────────────────────────────────── */
#world { position: fixed; inset: 0; z-index: 0; }
#world canvas { display: block; }
.scenefade {
  position: absolute; inset: 0; z-index: 5;
  background: #06090d;
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}

/* ═══ BUTTONS — engraved bronze family ═══════════════════════════════════ */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
button:disabled { cursor: default; }

/* bronze base: .act tray buttons, .battlebtn stances, .big/.small chrome,
   .buy shop buttons, .itembtn question items */
.act, .battlebtn, button.big, button.small, .buy, .buybtn, .itembtn {
  /* tintable ramp */
  --bz1: #ecca62; --bz2: #c9a227; --bz3: #8a6c1c;
  --bzink: #3a2a08;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bzink);
  text-shadow: 0 1px 0 rgba(255, 240, 190, .45);
  background: linear-gradient(180deg, var(--bz1) 0%, var(--bz2) 42%, var(--bz3) 100%);
  border: 1px solid var(--bronze-dark);
  border-radius: 7px;
  padding: 10px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 205, .55),
    inset 0 -2px 0 rgba(45, 32, 6, .38),
    0 2px 7px rgba(3, 8, 13, .5);
  transition: transform var(--fast), box-shadow var(--fast), filter var(--fast);
}
/* hover glint sweep */
.act::after, .battlebtn::after, button.big::after, button.small::after,
.buy::after, .buybtn::after, .itembtn::after {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%; left: 0;
  width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255, 250, 220, .5), transparent);
  transform: translateX(-160%) skewX(-20deg);
  pointer-events: none;
}
@keyframes glint {
  from { transform: translateX(-160%) skewX(-20deg); }
  to   { transform: translateX(440%) skewX(-20deg); }
}
.act:hover:not(:disabled), .battlebtn:hover:not(:disabled),
button.big:hover:not(:disabled), button.small:hover:not(:disabled),
.buy:hover:not(:disabled), .buybtn:hover:not(:disabled), .itembtn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 205, .6),
    inset 0 -2px 0 rgba(45, 32, 6, .38),
    0 5px 14px rgba(3, 8, 13, .55);
}
.act:hover:not(:disabled)::after, .battlebtn:hover:not(:disabled)::after,
button.big:hover:not(:disabled)::after, button.small:hover:not(:disabled)::after,
.buy:hover:not(:disabled)::after, .buybtn:hover:not(:disabled)::after,
.itembtn:hover:not(:disabled)::after {
  animation: glint .55s ease-out;
}
.act:active:not(:disabled), .battlebtn:active:not(:disabled),
button.big:active:not(:disabled), button.small:active:not(:disabled),
.buy:active:not(:disabled), .buybtn:active:not(:disabled), .itembtn:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.96);
  box-shadow:
    inset 0 2px 5px rgba(30, 21, 4, .5),
    0 1px 3px rgba(3, 8, 13, .5);
}
/* disabled = dead stone */
.act:disabled, .battlebtn:disabled, button.big:disabled, button.small:disabled,
.buy:disabled, .buybtn:disabled, .itembtn:disabled {
  background: linear-gradient(180deg, #7e7d74 0%, #64635a 100%);
  border-color: #3c3b33;
  color: #393830;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .22);
  filter: saturate(.2);
}
/* sizes */
button.big, .act.big {
  width: 100%;
  margin-top: var(--s3);
  padding: 14px 26px;
  font-size: 17px;
  letter-spacing: .18em;
}
button.small, .act.small { font-size: 11px; letter-spacing: .1em; padding: 6px 12px; border-radius: 6px; }
/* multi-line tray action: label + subtitle */
.act {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 205, .55),
    inset 0 -2px 0 rgba(45, 32, 6, .38),
    0 4px 12px rgba(3, 8, 13, .55);
}
.act small {
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .82;
}
/* dark-metal variants: light engraving */
.act.tier, .act.hot, .act.oracle, .act.build, .act.ghost, .itembtn,
.battlebtn.strike, .battlebtn.magic, .battlebtn.guard, .battlebtn.ghost {
  --bzink: #f4ecda;
  text-shadow: 0 1px 1px rgba(8, 5, 2, .55);
}
.act.gold { --bz1: #f6dd7e; --bz2: #d9ae37; --bz3: #97741c; --bzink: #3a2a08; text-shadow: 0 1px 0 rgba(255, 244, 200, .55); }
.act.tier   { --bz1: #62a2c0; --bz2: #3c7391; --bz3: #24485d; }
.act.tier.hot, .act.hot { --bz1: #e0704e; --bz2: #bc432c; --bz3: #7c2617; }
.act.oracle { --bz1: #a583cc; --bz2: #7d5ba6; --bz3: #4d3470; }
.act.build  { --bz1: #56bfa9; --bz2: #2e9e8f; --bz3: #1a5f57; }
.act.ghost, .battlebtn.ghost {
  --bz1: #33414f; --bz2: #263341; --bz3: #17222d;
  border-color: rgba(201, 162, 39, .35);
}
.itembtn { --bz1: #a583cc; --bz2: #7d5ba6; --bz3: #4d3470; }

/* battle-action hover tooltip: spells out each stance/item/flee's terms, held
   over the dock the instant you hover (see attachBattleTip in app.js) */
.btip {
  position: fixed; z-index: 40; pointer-events: none;
  max-width: 300px; padding: 9px 13px;
  background: linear-gradient(180deg, rgba(22, 18, 30, .98), rgba(12, 10, 18, .99));
  border: 1px solid rgba(232, 194, 122, .5); border-radius: 11px;
  color: #f2ead9; font-family: var(--disp, serif); font-weight: 600;
  font-size: 13.5px; line-height: 1.42; text-align: center;
  box-shadow: 0 10px 34px rgba(3, 6, 10, .72), 0 0 22px rgba(232, 194, 122, .12);
  opacity: 0; transform: translateY(5px);
  transition: opacity .12s ease, transform .12s ease;
}
.btip.show { opacity: 1; transform: translateY(0); }
.btip::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
  width: 12px; height: 12px; rotate: 45deg;
  background: rgba(12, 10, 18, .99);
  border-right: 1px solid rgba(232, 194, 122, .5);
  border-bottom: 1px solid rgba(232, 194, 122, .5);
}

/* ── inputs ─────────────────────────────────────────────────────────────── */
input, select {
  font-family: var(--body);
  font-size: 17px;
  color: var(--sepia);
  background: linear-gradient(180deg, #fbf5e6, #f1e7cf);
  border: 1px solid var(--parch-line);
  border-radius: 7px;
  padding: 11px var(--s3);
  width: 100%;
  margin: var(--s2) 0;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(90, 70, 30, .18);
  transition: border-color var(--fast), box-shadow var(--fast);
}
input::placeholder { color: #a08e66; font-style: italic; }
input:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--bronze);
  box-shadow: inset 0 2px 4px rgba(90, 70, 30, .18), 0 0 0 3px rgba(201, 162, 39, .35);
}

/* ═══ CARD SURFACES ══════════════════════════════════════════════════════
   .parch / big ids  = parchment scroll in a bronze notched frame
   .plaque / chips   = dark ink plate with a bronze hairline notch frame
   Frame = element bg (bronze) + ::before (fill, z -1) + ::after (inner rule).
   ═══════════════════════════════════════════════════════════════════════ */
.parch, .panel, #qcard, #mgcard, .upcard, #uppanel,
.plaque, .pchip, .ecard, #turnBanner, #objective, #bounties, #shopPanel,
.hint, .toast, .tradeRow {
  position: relative;
  isolation: isolate;
  clip-path: var(--cp);
}
.parch, .panel, #qcard, #mgcard, .upcard, #uppanel {
  --notch: 13px;
  color: var(--sepia);
  background: linear-gradient(160deg, #e9c964 0%, #a8821f 34%, #d3ab34 62%, #77601a 100%);
  filter: var(--shadow-card);
}
.parch::before, .panel::before, #qcard::before, #mgcard::before,
.upcard::before, #uppanel::before {
  content: '';
  position: absolute; inset: 3px; z-index: -1;
  clip-path: var(--cp);
  background:
    var(--grain),
    radial-gradient(130% 100% at 50% 0%, var(--parch-hi) 0%, var(--parch) 52%, var(--parch-lo) 100%);
}
.parch::after, .panel::after, #qcard::after, #mgcard::after,
.upcard::after, #uppanel::after {
  content: '';
  position: absolute; inset: 9px; z-index: -1;
  border: 1px solid rgba(138, 108, 28, .5);
  pointer-events: none;
}
.plaque, .pchip, .ecard, #turnBanner, #objective, #bounties, #shopPanel,
.hint, .toast, .tradeRow {
  --notch: 7px;
  color: var(--bone);
  background: linear-gradient(170deg, rgba(214, 178, 68, .9), rgba(110, 86, 24, .9));
}
.plaque::before, .pchip::before, .ecard::before, #turnBanner::before,
#objective::before, #bounties::before, #shopPanel::before, .hint::before,
.toast::before, .tradeRow::before {
  content: '';
  position: absolute; inset: 1.5px; z-index: -1;
  clip-path: var(--cp);
  background:
    var(--grain),
    linear-gradient(180deg, rgba(22, 39, 58, .96), rgba(11, 20, 29, .96));
}

/* ── overlays (z 20) ────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 30%, rgba(6, 9, 13, .38), rgba(6, 9, 13, .72));
  backdrop-filter: blur(3px);
  padding: var(--s4);
  overflow-y: auto;
}
.overlay.clear { background: rgba(6, 9, 13, .12); backdrop-filter: none; }
@keyframes cardin {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}
.overlay > * { animation: cardin .22s ease-out; }

.panel {
  padding: var(--s5) var(--s6) var(--s5);
  width: min(460px, 94vw);
  text-align: center;
}
.panel h2 { font-size: 24px; letter-spacing: .08em; margin-bottom: var(--s3); color: #4a3811; }
.panel p { margin: var(--s2) 0; }
.tag { color: var(--sepia-soft); font-size: 14px; font-style: italic; }
.err { color: var(--blood); min-height: 1.3em; font-size: 14px; font-style: italic; }

/* ═══ TITLE SCREEN ═══════════════════════════════════════════════════════ */
#lobby {
  background:
    radial-gradient(90% 70% at 50% 15%, rgba(46, 158, 143, .14), transparent 60%),
    radial-gradient(130% 130% at 50% 110%, rgba(6, 9, 13, .9), rgba(6, 9, 13, .55));
}
.title-panel { width: min(620px, 96vw); padding: var(--s6) var(--s6) var(--s5); }
.title-hero {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.title-hero .laurel { width: 52px; height: 96px; flex: none; filter: drop-shadow(0 2px 2px rgba(60, 40, 5, .35)); }
.title-hero .laurel.flip { transform: scaleX(-1); }
.title-hero h1 {
  font-size: clamp(38px, 9vw, 58px);
  font-weight: 900;
  letter-spacing: .22em;
  margin-right: -.22em;   /* optically recenter tracked caps */
  white-space: nowrap;
}
.tagline {
  font-style: italic;
  font-size: 15px;
  color: var(--sepia-soft);
  letter-spacing: .04em;
  margin-top: var(--s1);
}
#joinForm { max-width: 380px; margin: 0 auto; }
#waitRoom { max-width: 420px; margin: 0 auto; }
.waitbtns { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s2); }

#lobbyPlayers { list-style: none; margin: var(--s4) 0 var(--s2); text-align: left; }
#lobbyPlayers li {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s2);
  border-bottom: 1px dashed rgba(138, 108, 28, .4);
  font-size: 16px;
}
#lobbyPlayers li:last-child { border-bottom: 0; }
#lobbyPlayers em { color: var(--sepia-soft); font-size: 13px; margin-left: auto; }
.dot {
  display: inline-block; flex: none;
  width: 14px; height: 14px; border-radius: 50%;
  vertical-align: -2px; margin-right: 6px;
  border: 1px solid rgba(20, 12, 2, .45);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .35);
}
#lobbyPlayers .dot { margin-right: 0; }
.laurel-mark { color: var(--bronze-deep); font-size: 13px; letter-spacing: .05em; }
.kick {
  color: var(--blood);
  font-size: 15px; line-height: 1;
  padding: 2px 6px; border-radius: 5px;
  transition: background var(--fast);
}
.kick:hover { background: rgba(207, 68, 50, .15); }

.title-howto {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid rgba(138, 108, 28, .4);
}
.howto-card { display: flex; flex-direction: column; align-items: center; gap: var(--s1); text-align: center; }
.howto-card svg { width: 30px; height: 30px; margin-bottom: 2px; }
.howto-card strong {
  font-family: var(--disp);
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #4a3811;
}
.howto-card span { font-size: 12.5px; line-height: 1.35; color: var(--sepia-soft); }

/* ═══ HUD (z 10) ═════════════════════════════════════════════════════════ */
#hud > div { position: fixed; z-index: 10; }

/* mute (z 30) */
#muteBtn {
  position: fixed; top: var(--s3); right: var(--s3); z-index: 30;
  width: 42px; height: 42px; padding: 9px;
  color: var(--bronze);
  background: var(--ink-glass);
  border: 1px solid rgba(201, 162, 39, .5);
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(3, 8, 13, .5), inset 0 1px 0 rgba(255, 240, 190, .12);
  transition: color var(--fast), transform var(--fast);
}
#muteBtn:hover { color: var(--gilt); transform: translateY(-1px); }
#muteBtn.off { color: #5c6a76; }
#muteBtn.off .wave { opacity: 0; }

/* ── captain cards (top-left) ── */
#players {
  top: var(--s3); left: var(--s3);
  display: flex; flex-direction: column; gap: 6px;
  max-width: min(320px, 72vw);
}
.pchip {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px;
  font-size: 14px;
  cursor: pointer;
  transition: transform var(--fast);
}
.pchip:hover { transform: translateX(2px); }
.pchip.turn {
  background: linear-gradient(170deg, #f2d977, #96751d);
  box-shadow: 0 0 14px rgba(217, 164, 65, .45);
}
.pchip.turn::before {
  background:
    var(--grain),
    linear-gradient(180deg, rgba(35, 52, 71, .97), rgba(17, 28, 40, .97));
}
.pchip.gone { opacity: .5; filter: saturate(.4); }
.pchip.dead { opacity: .65; filter: saturate(.15); }
.pchip.me::before {
  background:
    var(--grain),
    linear-gradient(180deg, rgba(31, 45, 60, .97), rgba(14, 24, 34, .97));
}
.pname {
  font-family: var(--disp); font-weight: 700; font-size: 13px;
  letter-spacing: .04em;
  max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* hull pips (rhombi) — also legacy .hearts text fallback */
.hullpips { display: inline-flex; gap: 3px; }
.hullpip { display: inline-block; }
.hullpips i, .hullpip {
  width: 9px; height: 9px;
  background: linear-gradient(180deg, #ef6a52, #b3301f);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.hullpips i.dim, .hullpip.dim { background: #33404d; }
.hullpips i.half, .hullpip.half { background: linear-gradient(90deg, #ef6a52 50%, #33404d 50%); }
.hearts { color: #ef6a52; font-size: 13px; letter-spacing: 1px; }
.hearts .dim { color: #3d4a57; }
/* relic pips (four-point stars) */
.relicpips { display: inline-flex; gap: 3px; }
.relicpips .pip, .relicpip, #objective .pip {
  display: inline-block; width: 11px; height: 11px;
  background: #3b4756;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.relicpips .pip.on, .relicpip.on, #objective .pip.on {
  background: linear-gradient(180deg, var(--gleam), var(--bronze));
  filter: drop-shadow(0 0 4px rgba(240, 208, 96, .8));
}
/* stat chips */
.stat {
  font-size: 11.5px; font-weight: 700;
  color: #e7cf7f;
  background: rgba(201, 162, 39, .13);
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: 5px;
  padding: 0 5px;
  display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap;
}
.stat svg { width: 12px; height: 12px; }
.stat.cargo { color: #f0be8a; border-color: rgba(240, 162, 79, .4); background: rgba(240, 162, 79, .12); }
.stat.banked { color: var(--gilt); border-color: rgba(240, 208, 96, .55); background: rgba(240, 208, 96, .16); }
.scrolls { display: flex; gap: 3px; margin-left: auto; }
.scroll {
  min-width: 19px; height: 19px; border-radius: 5px;
  color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 3px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3);
}
.streak {
  font-size: 11.5px; font-weight: 700; color: #ff9d45;
  display: inline-flex; align-items: center; gap: 2px;
  text-shadow: 0 0 6px rgba(255, 130, 40, .55);
}
.streak svg { width: 12px; height: 12px; }
.upicons { font-size: 11px; letter-spacing: 1px; display: inline-flex; gap: 2px; }
.upicons svg { width: 13px; height: 13px; }
/* realm badge */
.realmbadge {
  --rc: var(--c-hub);
  width: 18px; height: 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 800; font-size: 10.5px;
  color: var(--rc);
  /* a clean bordered chip — the old clip-path octagon sliced the corners off
     the border and left it looking broken */
  border: 1px solid var(--rc);
  border-radius: 4px;
  background: rgba(6, 9, 13, .45);
}
[data-realm="ice"]    { --rc: var(--c-ice); }
[data-realm="desert"] { --rc: var(--c-desert); }
[data-realm="jungle"] { --rc: var(--c-jungle); }
[data-realm="autumn"] { --rc: var(--c-autumn); }
[data-realm="hub"]    { --rc: var(--c-hub); }

/* ── turn banner + objective (top-center) ── */
#turnBanner {
  top: var(--s3); left: 50%; transform: translateX(-50%);
  padding: 5px 12px;
  font-family: var(--disp); font-weight: 700; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--gilt);
  max-width: 96vw; overflow: hidden;
}
.turnorder {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; max-width: 100%;
}
.turnorder::-webkit-scrollbar { display: none; }
.tocap {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: .06em;
  color: var(--bone); opacity: .5; flex: none;
  transition: opacity .2s, background .2s;
}
.tocap .dot { width: 8px; height: 8px; }
.tocap .toname { font-weight: 600; }
.tocap svg { opacity: .7; }
.tocap.active {
  opacity: 1; color: var(--gilt);
  background: color-mix(in srgb, var(--gilt) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 40%, transparent);
}
.tocap.active .dot { box-shadow: 0 0 6px 1px currentColor; }
.tocap.me .toname { text-decoration: underline; text-underline-offset: 2px; }
.tocap.gone { opacity: .28; filter: grayscale(1); }
.toarrow { color: var(--gilt); opacity: .4; font-size: 13px; flex: none; }
#objective {
  top: 56px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px 16px;
  font-size: 13.5px;
  white-space: nowrap; max-width: 94vw;
  overflow: hidden; text-overflow: ellipsis;
}
#objective .pip { flex: none; }
.goaltext { color: var(--bone); }
.goaltext strong { color: var(--gilt); font-weight: 700; }

/* ── compass (top-right) ── */
#compass {
  top: 64px; right: var(--s3);
  width: 92px; height: 92px;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 38%, rgba(38, 58, 79, .95), rgba(9, 16, 24, .96) 72%);
  border: 2px solid var(--bronze-deep);
  box-shadow:
    0 0 0 1px rgba(240, 208, 96, .28),
    0 6px 16px rgba(3, 8, 13, .55),
    inset 0 0 18px rgba(3, 8, 13, .8);
  transition: box-shadow var(--fast);
}
#compass:hover {
  box-shadow:
    0 0 0 1px rgba(240, 208, 96, .55),
    0 6px 18px rgba(3, 8, 13, .6),
    inset 0 0 18px rgba(3, 8, 13, .8);
}
/* tick ring */
#compass::before {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(201, 162, 39, .55) 0deg 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 69%);
  mask: radial-gradient(circle, transparent 68%, #000 69%);
  pointer-events: none;
}
/* center pin */
#compass::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gleam), var(--bronze-deep));
  box-shadow: 0 0 5px rgba(240, 208, 96, .6);
}
/* needles: app.js sets --deg + data-realm; children <i> = distance pips */
.compassrose { position: absolute; inset: 0; pointer-events: none; }
#compass .needle, .compassrose .needle {
  --rc: var(--c-hub);
  position: absolute; left: 50%; bottom: 50%;
  width: 3px; height: 36px;
  margin-left: -1.5px;
  transform-origin: 50% 100%;
  transform: rotate(var(--deg, 0deg));
  background: linear-gradient(to top, transparent 0%, var(--rc) 45%);
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  filter: drop-shadow(0 0 3px var(--rc));
  transition: transform .4s ease-out;
  pointer-events: none;
}
#compass .needle i, .compassrose .needle i {
  position: absolute; left: 50%;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%;
  background: var(--ink0);
}
.needle i:nth-child(1) { top: 8px; }
.needle i:nth-child(2) { top: 15px; }
.needle i:nth-child(3) { top: 22px; }

/* ── bounty popover (under compass) ── */
#bounties {
  top: 168px; right: var(--s3);
  padding: var(--s3) var(--s4);
  width: min(260px, 74vw);
  font-size: 13px;
}
.btitle2 {
  font-family: var(--disp); font-weight: 700;
  letter-spacing: .18em; font-size: 12.5px; text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.btitle2 svg { width: 14px; height: 14px; }
.brow {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: 5px 0;
  border-top: 1px solid rgba(201, 162, 39, .18);
}
.brow.done { opacity: .45; text-decoration: line-through; }
.breward { white-space: nowrap; color: var(--gilt); }

/* ── action tray (bottom-center) ── */
#tray {
  bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: center; justify-content: center;
  max-width: 96vw;
}
.hint {
  padding: var(--s2) var(--s4);
  min-height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-style: italic;
  width: 100%; text-align: center;
  color: var(--bone);
}
.hint strong { color: var(--gilt); font-style: normal; }
.tradeRow { display: flex; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); }
.tradeRow select { width: auto; margin: 0; padding: 7px 10px; font-size: 14px; }

/* ── log (bottom-left, last 4 lines fading) ── */
#log {
  bottom: var(--s3); left: var(--s3);
  display: flex; flex-direction: column; gap: 3px;
  max-width: min(360px, 70vw);
  pointer-events: none;
  font-size: 13px;
}
#log > *, .logline {
  color: var(--bone);
  text-shadow: 0 1px 3px rgba(3, 6, 10, .95), 0 0 8px rgba(3, 6, 10, .8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: logline .25s ease-out;
}
@keyframes logline { from { opacity: 0; transform: translateY(5px); } }
#log > *:nth-last-child(2) { opacity: .72; }
#log > *:nth-last-child(3) { opacity: .48; }
#log > *:nth-last-child(4) { opacity: .26; }
#log > *:nth-last-child(n+5) { display: none; }

/* ── toasts ── */
#toasts {
  bottom: 118px; left: var(--s3);
  display: flex; flex-direction: column; gap: 6px;
  max-width: min(340px, 80vw);
  pointer-events: none;
}
.toast {
  padding: var(--s2) var(--s3);
  font-size: 13.5px;
  animation: cardin .2s ease-out;
}
.toast.err::before {
  background:
    var(--grain),
    linear-gradient(180deg, rgba(112, 34, 22, .96), rgba(66, 16, 9, .96));
}
.toast.err { background: linear-gradient(170deg, rgba(224, 112, 78, .9), rgba(124, 38, 23, .9)); }

/* ── item belt (bottom-right) ── */
#itembelt {
  bottom: 14px; right: var(--s3);
  display: flex; gap: var(--s2);
}
.itemslot, .beltslot {
  position: relative;
  width: 48px; height: 48px;
  padding: 9px;
  color: var(--bronze);
  background: var(--ink-glass);
  border: 1px solid rgba(201, 162, 39, .45);
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(3, 8, 13, .5), inset 0 1px 0 rgba(255, 240, 190, .1);
  transition: transform var(--fast), box-shadow var(--fast), color var(--fast);
}
.itemslot svg, .beltslot svg { width: 100%; height: 100%; }
.itemslot .count, .beltslot .count {
  position: absolute; right: -5px; top: -5px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  font-family: var(--disp); font-weight: 800; font-size: 11px; line-height: 18px;
  color: #3a2a08;
  background: linear-gradient(180deg, var(--gilt), var(--bronze));
  border: 1px solid var(--bronze-dark);
  border-radius: 9px;
  text-align: center;
}
.itemslot:not(:disabled):hover, .beltslot.usable:hover { transform: translateY(-2px); color: var(--gilt); }
.itemslot:not(:disabled), .beltslot.usable {
  color: var(--gilt);
  border-color: rgba(240, 208, 96, .75);
  box-shadow: 0 0 12px rgba(240, 208, 96, .35), 0 3px 10px rgba(3, 8, 13, .5);
}
.itemslot:disabled, .beltslot:not(.usable) { color: #4c5a67; border-color: rgba(120, 135, 148, .25); }
.itemslot:disabled .count, .beltslot:not(.usable) .count { background: #5a5a52; color: #21201b; border-color: #33322b; }

/* ═══ D3 DIE — CSS 3D bronze-bound knucklebone ═══════════════════════════ */
#dice {
  bottom: 108px; left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--s4);
  perspective: 620px;
}
.die { --dsz: 62px; --hz: 31px; width: var(--dsz); height: var(--dsz); position: relative; }
/* grounded shadow blob */
.die::after {
  content: '';
  position: absolute; left: 8%; right: 8%; bottom: -16px;
  height: 12px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(3, 6, 10, .55), transparent 70%);
}
.cube {
  /* NO transform/transition here — app.js tumbles via inline style (legacy) */
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.face {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 30% 22%, #f8f1de 0%, #ecdfc0 55%, #d3bd8e 100%);
  border: 2px solid var(--bronze-deep);
  border-radius: 11px;
  box-shadow:
    inset 0 0 0 2px rgba(240, 208, 96, .35),
    inset 0 3px 6px rgba(255, 255, 255, .5),
    inset 0 -4px 7px rgba(107, 82, 22, .3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 15%;
  backface-visibility: hidden;
}
.face i {
  width: 11px; height: 11px;
  border-radius: 50%;
  align-self: center; justify-self: center;
  background: radial-gradient(circle at 35% 30%, #4a3d20, #17130a 70%);
  box-shadow: inset 0 -1px 1px rgba(255, 240, 190, .35), inset 0 1px 2px rgba(0, 0, 0, .7);
}
.face.front  { transform: translateZ(var(--hz)); }
.face.back   { transform: rotateX(180deg) translateZ(var(--hz)); }
.face.top    { transform: rotateX(90deg) translateZ(var(--hz)); }
.face.bottom { transform: rotateX(-90deg) translateZ(var(--hz)); }
.face.right  { transform: rotateY(90deg) translateZ(var(--hz)); }
.face.left   { transform: rotateY(-90deg) translateZ(var(--hz)); }
/* d3 pip layouts (1..3 only — each value appears on two opposed faces) */
.face[data-pips="1"] i:nth-child(1) { grid-area: 2/2; }
.face[data-pips="2"] i:nth-child(1) { grid-area: 1/1; }
.face[data-pips="2"] i:nth-child(2) { grid-area: 3/3; }
.face[data-pips="3"] i:nth-child(1) { grid-area: 1/1; }
.face[data-pips="3"] i:nth-child(2) { grid-area: 2/2; }
.face[data-pips="3"] i:nth-child(3) { grid-area: 3/3; }

/* ═══ BATTLE SCREEN (z 15) ═══════════════════════════════════════════════ */
#battleHud { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.cinebar { position: absolute; left: 0; right: 0; pointer-events: none; }
.cinebar.top {
  top: 0; height: 176px;
  background: linear-gradient(rgba(4, 6, 10, .94) 32%, transparent);
}
.cinebar.bot {
  bottom: 0; height: 150px;
  background: linear-gradient(transparent, rgba(4, 6, 10, .9));
}

/* boss banner */
#bfoe {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(620px, 94vw);
  text-align: center;
  color: var(--bone);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}
.btitle {
  font-family: var(--disp); font-weight: 800;
  font-size: 30px; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, #f7e295, #c9a227 60%, #9d7a1e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .85));
  display: inline-flex; align-items: center; gap: var(--s2);
}
.bsub {
  font-size: 14px; font-style: italic;
  margin: 2px 0 6px;
  letter-spacing: .04em;
}
/* round pips */
.roundpips { display: inline-flex; gap: 5px; vertical-align: middle; margin: 0 var(--s2); }
.roundpips i {
  width: 8px; height: 8px;
  background: #33404d;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.roundpips i.on { background: var(--gilt); filter: drop-shadow(0 0 3px rgba(240, 208, 96, .8)); }
/* a guardian a rival already felled — risen harder for a late challenger */
.escalated {
  display: inline-block;
  font-family: var(--disp); font-weight: 800; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: #e9d4ff;
  background: rgba(58, 22, 92, .82);
  border: 1px solid rgba(163, 108, 255, .8);
  border-radius: 5px;
  padding: 2px 9px;
  vertical-align: middle;
  cursor: help;
  box-shadow: 0 0 10px rgba(140, 82, 255, .45);
}
/* ═══ PHAROS CUTSCENE — seals set, the door grinds open ══════════════════ */
#pharosCine {
  position: fixed; inset: 0; z-index: 24;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 45%, rgba(8, 6, 18, .74), rgba(4, 3, 10, .93));
  backdrop-filter: blur(2px);
  animation: pcinefade .5s ease-out;
}
#pharosCine.done { animation: pcineout .9s ease-in forwards; }
@keyframes pcinefade { from { opacity: 0; } }
@keyframes pcineout { to { opacity: 0; } }
.pcine-in { text-align: center; }
.pcine-kicker {
  font-family: var(--disp); font-weight: 800; font-size: clamp(13px, 2.6vw, 18px);
  letter-spacing: .34em; text-transform: uppercase; color: #b79bff;
  margin-bottom: var(--s4); text-shadow: 0 0 20px rgba(140, 82, 255, .6);
}
.pcine-door {
  position: relative; width: min(300px, 68vw); height: min(360px, 46vh);
  margin: 0 auto; border-radius: 8px 8px 4px 4px; overflow: hidden;
  border: 3px solid #7a6a44;
  background: linear-gradient(180deg, #2a2436, #17131f);
  box-shadow: 0 0 60px rgba(120, 82, 255, .18), inset 0 0 40px rgba(0, 0, 0, .7);
}
.pcine-door .leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(180deg, #5b4a2a, #3a2f1a);
  border-right: 2px solid #6b5730; border-left: 2px solid #6b5730;
  transition: transform 1.5s cubic-bezier(.7, 0, .3, 1);
}
.pcine-door .leaf.l { left: 0; transform-origin: left center;
  box-shadow: inset -8px 0 18px rgba(0, 0, 0, .5); }
.pcine-door .leaf.r { right: 0; transform-origin: right center;
  box-shadow: inset 8px 0 18px rgba(0, 0, 0, .5); }
.pcine-door.open .leaf.l { transform: perspective(600px) rotateY(-88deg); }
.pcine-door.open .leaf.r { transform: perspective(600px) rotateY(88deg); }
.pcine-glow {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(60% 90% at 50% 50%, rgba(180, 140, 255, .9), rgba(120, 82, 255, .25) 55%, transparent 72%);
  transition: opacity 1.2s ease-out;
}
.pcine-door.open .pcine-glow { opacity: 1; }
/* the darkness that pours OUT of the open door: a black well that blooms from
   the threshold and swells past the frame, tendrils of shadow spilling forth */
.pcine-dark {
  position: absolute; left: 50%; top: 54%; z-index: 3;
  width: 10px; height: 10px; transform: translate(-50%, -50%) scale(0);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    #000 0%, #05040a 42%, rgba(20, 8, 40, .82) 66%, rgba(30, 12, 54, 0) 82%);
  box-shadow: 0 0 60px 30px rgba(4, 2, 12, .8);
}
.pcine-door.open .pcine-dark {
  animation: pcdark 1.9s .5s cubic-bezier(.5, .1, .4, 1) forwards;
}
@keyframes pcdark {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(64); opacity: 1; }
}
/* streaming shadow wisps that spill out of the threshold ahead of the well —
   each shoots outward at its own angle, curling and fading */
.pcine-wisps { position: absolute; left: 50%; top: 54%; z-index: 4; pointer-events: none; }
.pcine-wisp {
  position: absolute; left: 0; top: 0; width: 46px; height: 20px;
  margin: -10px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 5, 24, .95), rgba(24, 10, 46, .5) 60%, transparent);
  opacity: 0; transform: rotate(calc(var(--w) * 51deg)) translateX(0) scale(.3);
}
.pcine-door.open .pcine-wisp {
  animation: pcwisp 1.7s calc(.6s + var(--w) * .05s) ease-out forwards;
}
@keyframes pcwisp {
  0%   { opacity: 0; transform: rotate(calc(var(--w) * 51deg)) translateX(0) scale(.3); }
  25%  { opacity: .95; }
  100% { opacity: 0; transform: rotate(calc(var(--w) * 51deg)) translateX(240px) scale(2.6); }
}
.pcine-door.rumble { animation: pcrumble .6s .1s ease-in-out 3; }
@keyframes pcrumble {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -3px); }
  80% { transform: translate(2px, 3px); }
}
.pcine-sigils { display: none; }               /* sigils live on the door lintel */
.pcsig {
  position: absolute; top: 8%; z-index: 2;
  width: clamp(30px, 8vw, 42px); height: clamp(30px, 8vw, 42px);
  border-radius: 50%;
  background: #201b16; border: 2px solid #4a4030;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .8);
  transition: background .4s ease-out, box-shadow .4s ease-out, border-color .4s;
}
.pcsig[style*="--i:0"] { left: 18%; }
.pcsig[style*="--i:1"] { left: 50%; transform: translateX(-50%); }
.pcsig[style*="--i:2"] { right: 18%; }
.pcsig.lit {
  background: radial-gradient(circle at 50% 40%, #ffe9a8, #e0a030 70%);
  border-color: #ffd66a;
  box-shadow: 0 0 22px rgba(240, 190, 90, .9), inset 0 0 8px rgba(255, 240, 190, .8);
  animation: pcsigpop .5s ease-out;
}
@keyframes pcsigpop { 0% { transform: scale(.4) translateX(var(--tx, 0)); } 60% { transform: scale(1.25) translateX(var(--tx, 0)); } }
.pcsig[style*="--i:1"].lit { animation: pcsigpop1 .5s ease-out; }
@keyframes pcsigpop1 { 0% { transform: translateX(-50%) scale(.4); } 60% { transform: translateX(-50%) scale(1.25); } }
.pcine-title {
  margin-top: var(--s4);
  font-family: var(--disp); font-weight: 800; font-size: clamp(24px, 5.4vw, 44px);
  letter-spacing: .16em; text-transform: uppercase; color: #e9d4ff;
  opacity: 0; transform: scale(1.2);
  text-shadow: 0 0 34px rgba(140, 82, 255, .7), 0 3px 16px rgba(4, 3, 10, .9);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.pcine-title.show { opacity: 1; transform: scale(1); }

/* charging warning strip */
.chargewarn, #bfoe .charging {
  margin: 7px auto 0;
  width: min(440px, 88vw);
  font-family: var(--disp); font-weight: 800; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase;
  color: #ffe1d6;
  padding: 5px 10px;
  border: 1px solid rgba(224, 90, 60, .9);
  background:
    repeating-linear-gradient(-45deg, rgba(150, 30, 12, .85) 0 14px, rgba(84, 14, 4, .85) 14px 28px);
  background-size: 200% 100%;
  animation: stripescroll 1.1s linear infinite;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
@keyframes stripescroll { to { background-position: 40px 0; } }

/* enemy cards */
#bmon {
  position: absolute; top: 116px; left: 50%; transform: translateX(-50%);
  width: min(680px, 96vw);
  text-align: center;
  pointer-events: auto;
}
.erow { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.ecard {
  padding: 7px 13px 9px;
  min-width: 128px;
  text-align: center;
  transition: transform var(--fast), opacity var(--med), filter var(--med);
}
.ecard .ename {
  font-family: var(--disp); font-weight: 700; font-size: 13px;
  letter-spacing: .06em;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecard .epow { font-size: 11px; font-style: italic; color: var(--mist); margin-top: 3px; }
.powpips { display: inline-flex; gap: 3px; }
.powpips i {
  width: 7px; height: 7px;
  background: linear-gradient(180deg, #e0704e, #8e2c1e);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ecard.dead { opacity: .3; filter: grayscale(1); }
.ecard.targetable { cursor: pointer; animation: targetpulse 1s ease-in-out infinite; }
.ecard.targetable:hover { transform: translateY(-2px); }
@keyframes targetpulse {
  50% { box-shadow: 0 0 16px rgba(240, 208, 96, .75); }
}
.ecard.targetable {
  background: linear-gradient(170deg, #f2d977, #96751d);
}

/* hp segment bars */
.hpbar { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.hpcell {
  width: 32px; height: 13px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(240, 224, 190, .35);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  transition: background .3s, box-shadow .3s;
}
.hpbar.foe .hpcell.on {
  background: linear-gradient(180deg, #ef6448, #a52c1a);
  box-shadow: 0 0 8px rgba(224, 58, 47, .75);
}
.hpbar.ally .hpcell { width: 26px; height: 11px; }
.hpbar.ally .hpcell.on {
  background: linear-gradient(180deg, #57d98a, #1f8a4c);
  box-shadow: 0 0 8px rgba(53, 196, 99, .75);
}

/* beat line + hero hull */
#bturn {
  position: absolute; bottom: 158px; left: 50%; transform: translateX(-50%);
  width: min(600px, 94vw);
  text-align: center;
  font-size: 17px; font-style: italic;
  letter-spacing: .03em;
  color: var(--bone);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .95);
  min-height: 1.4em;
}
#bship {
  position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%);
  text-align: center;
  color: var(--bone);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}
#bship .bsub { margin-bottom: 4px; }
#bship strong { color: var(--gilt); font-weight: 700; }

/* hero health as hearts (distinct from the enemy HP bar) */
.heartrow { display: flex; gap: 3px; justify-content: center; }
.heart {
  display: inline-flex; color: #e2493a;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  transition: transform .18s ease, opacity .18s ease;
}
.heart svg { fill: currentColor; stroke: #7a1d16; stroke-width: 1.2; }
.heart.lost { color: #2a2f38; opacity: .8; }
.heart.lost svg { fill: #20242c; stroke: #454c57; }
/* a half heart: a spent (dark) base with the LEFT half painted red over it */
.heart.half { color: #2a2f38; opacity: .9; position: relative; }
.heart.half > svg { fill: #20242c; stroke: #454c57; }
.heart.half .heart-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 50%;
  overflow: hidden; display: inline-flex; color: #e2493a;
}
.heart.half .heart-fill svg { fill: currentColor; stroke: #7a1d16; }
@media (prefers-reduced-motion: no-preference) {
  .heart:not(.lost) { animation: heartbeat 2.6s ease-in-out infinite; }
}
@keyframes heartbeat {
  0%, 88%, 100% { transform: scale(1); }
  92% { transform: scale(1.16); }
  96% { transform: scale(1.02); }
}

/* stance dock */
#bactions {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--s3); align-items: center;
  flex-wrap: wrap; justify-content: center; max-width: 96vw;
  pointer-events: auto;
}
.battlebtn {
  font-size: 16px;
  letter-spacing: .16em;
  padding: 15px 24px 13px;
  min-width: 118px;
  border-radius: 9px;
}
.battlebtn.strike { --bz1: #e0704e; --bz2: #bc432c; --bz3: #7c2617; }
.battlebtn.magic  { --bz1: #a583cc; --bz2: #7d5ba6; --bz3: #4d3470; }
.battlebtn.sword  { --bz1: #f0d987; --bz2: #cBa53f; --bz3: #8a6a1c; --bzink: #35270a;
  text-shadow: 0 1px 0 rgba(255, 244, 200, .5); }
.battlebtn.heal   { --bz1: #5ec98a; --bz2: #34a06a; --bz3: #1c6440; }
.battlebtn.guard  { --bz1: #62a2c0; --bz2: #3c7391; --bz3: #24485d; }
.battlebtn.ghost  { font-size: 13px; min-width: 0; padding: 12px 16px; }
/* tier chip riding a stance button */
.tierchip {
  position: absolute; top: 4px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 3px;
  font-family: var(--disp); font-weight: 800; font-size: 10px; line-height: 16px;
  color: var(--gilt);
  background: rgba(6, 9, 13, .72);
  border: 1px solid rgba(240, 208, 96, .55);
  border-radius: 4px;
  text-align: center;
  letter-spacing: .05em;
  text-shadow: none;
}
#bactions .itemslot, #bactions .beltslot { width: 44px; height: 44px; padding: 8px; }

/* body modes */
body.battling #objective, body.battling #turnBanner, body.battling #tray,
body.battling #dice, body.battling #toasts, body.battling #compass,
body.battling #bounties, body.battling #itembelt, body.battling #log,
body.battling #shopPanel { display: none !important; }
body.battling #players { opacity: .32; }

/* damage flash (z 14) + shake */
#flash { position: fixed; inset: 0; z-index: 14; pointer-events: none; opacity: 0; }
#flash.red  { background: radial-gradient(circle, transparent 40%, rgba(214, 42, 28, .55)); opacity: .9; }
#flash.gold { background: radial-gradient(circle, transparent 55%, rgba(255, 214, 96, .4)); opacity: .8; }
#flash.fade { transition: opacity .6s; opacity: 0 !important; }
body.shake #world { animation: shake .45s; }
@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-9px, 4px); }
  40% { transform: translate(8px, -5px); }
  60% { transform: translate(-6px, -3px); }
  80% { transform: translate(5px, 3px); }
}

/* ═══ QUESTION SCROLL ════════════════════════════════════════════════════ */
#qcard, #mgcard {
  width: min(560px, 94vw);
  padding: 3px;               /* children sit inside the bronze frame */
  text-align: left;
}
#mgcard { width: min(620px, 96vw); }
#qhead, #mghead {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  color: #fdf6e4;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .14)), var(--bronze-deep);
  padding: 11px 18px 10px;
  font-family: var(--disp); font-weight: 700;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
#qdomain, #mgisle {
  font-family: var(--body); font-weight: 500; font-size: 13px;
  font-style: italic; letter-spacing: .02em; text-transform: none;
  opacity: .92;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#qtimer, #mgtimer { height: 7px; background: rgba(90, 70, 30, .3); position: relative; }
#qtimerBar, #mgtimerBar {
  height: 100%; width: 100%;
  background: linear-gradient(180deg, var(--gleam), var(--bronze));
  box-shadow: 0 0 8px rgba(240, 208, 96, .5);
  transition: background .3s;
}
/* the shrinking timer LINE is the whole readout on question cards — no numeric
   countdown (minigames keep theirs, their grids need the exact seconds) */
#mgtimer[data-secs]::after {
  content: attr(data-secs) 's';
  position: absolute; right: 6px; top: -19px;
  font-family: var(--disp); font-weight: 700; font-size: 12px;
  color: var(--gilt); text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
#qtext { padding: var(--s4) 22px var(--s1); font-size: 19px; line-height: 1.4; font-weight: 500; }
#qitems { display: flex; gap: var(--s2); justify-content: center; padding: var(--s2) 22px 0; }
#qopts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  padding: var(--s4) 22px;
}
.opt {
  font-family: var(--body); font-size: 15.5px;
  color: var(--sepia);
  text-align: center;
  background: linear-gradient(180deg, #fbf6e9, #f0e6cd);
  border: 1px solid var(--parch-line);
  border-radius: 8px;
  padding: 12px 10px;
  box-shadow: 0 2px 5px rgba(90, 70, 30, .22), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.opt:not(:disabled):hover {
  border-color: var(--bronze);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(90, 70, 30, .3), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.opt.good {
  background: linear-gradient(180deg, #45b873, #257a48);
  border-color: #1c5c36; color: #f2fff6;
  box-shadow: 0 0 12px rgba(63, 174, 106, .55);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.opt.bad {
  background: linear-gradient(180deg, #d8573f, #99301d);
  border-color: #6e2012; color: #fff1ec;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* the verdict must survive without color vision: stamp glyphs, not just hue */
.opt.good::after, .opt.bad::after {
  float: right; margin-left: 8px; font-weight: 800;
}
.opt.good::after { content: '✓'; }
.opt.bad::after { content: '✕'; }
.opt.ruled { opacity: .32; text-decoration: line-through; }
.opt.picked { border-color: var(--bronze); box-shadow: inset 0 0 0 2px var(--bronze), 0 2px 5px rgba(90, 70, 30, .22); }

/* typed JEOPARDY! clue: a full-width answer box + submit */
.typedwrap { grid-column: 1 / -1; display: flex; gap: var(--s2); }
.typedinput {
  flex: 1; min-width: 0;
  font-family: var(--body); font-size: 17px; color: var(--sepia);
  background: linear-gradient(180deg, #fffdf6, #f4ecd6);
  border: 1px solid var(--parch-line); border-radius: 8px;
  padding: 13px 14px;
  box-shadow: inset 0 2px 4px rgba(90, 70, 30, .18);
}
.typedinput:focus { outline: none; border-color: var(--bronze); box-shadow: inset 0 2px 4px rgba(90, 70, 30, .18), 0 0 0 2px rgba(201, 162, 39, .35); }
.opt.typedgo { flex: none; min-width: 120px; font-weight: 700; }
.typedreveal { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 8px; }
.typedreveal .tlabel { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.typedreveal .tans { font-family: var(--disp, serif); font-weight: 800; font-size: 22px; }
.typedreveal.good { background: linear-gradient(180deg, #45b873, #257a48); color: #f2fff6; box-shadow: 0 0 12px rgba(63, 174, 106, .5); }
.typedreveal.bad { background: linear-gradient(180deg, #d8573f, #99301d); color: #fff1ec; }
#qnote, #mgnote {
  min-height: 1.5em;
  padding: 0 22px var(--s4);
  text-align: center; font-style: italic;
  color: var(--sepia-soft);
}
.domBtns { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin: var(--s3) 0; }

/* ═══ MINIGAMES ══════════════════════════════════════════════════════════ */
#mgprompt { padding: var(--s3) 20px var(--s1); font-size: 15px; line-height: 1.4; }
#mgboard {
  padding: var(--s3) 20px;
  display: flex; flex-direction: column; gap: var(--s3); align-items: center;
}

.mggrid { display: grid; gap: 4px; }
.mgcell {
  width: 44px; height: 44px;
  background: linear-gradient(180deg, #f5edd9, #e6d8b6);
  border: 1px solid var(--parch-line);
  border-radius: 7px;
  padding: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(120, 95, 45, .18);
  transition: border-color var(--fast), background var(--fast);
}
.mgcell:not(:disabled):hover { border-color: var(--bronze); }
.mgcell.drop-ok { background: #a9dcb4 !important; border-color: #2f9c5c !important; }
.mgcell.drop-bad { border-color: var(--blood) !important; }

.mgpalette { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; justify-content: center; }
.mgpiece {
  display: grid; gap: 2px; padding: 7px;
  background: linear-gradient(180deg, #fbf6e9, #efe4c8);
  border: 1px solid var(--parch-line);
  border-radius: 7px;
  box-shadow: 0 2px 5px rgba(90, 70, 30, .22);
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.mgpiece:not(.used):hover { transform: translateY(-1px); border-color: var(--bronze); }
.mgpiece i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.mgpiece.sel { border-color: var(--bronze); box-shadow: 0 0 0 2px var(--bronze), 0 2px 6px rgba(90, 70, 30, .3); }
.mgpiece.used { opacity: .25; }

.nonowrap { overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.nonogrid { display: grid; gap: 3px; }
.nclue {
  font-size: 12px; font-weight: 700; color: var(--sepia-soft);
  display: flex; align-items: flex-end; justify-content: center; line-height: 1.15;
}
.nclue.left { justify-content: flex-end; align-items: center; padding-right: 6px; }
.mgcell.nono { width: 40px; height: 40px; border-radius: 5px; }
.mgcell.nono.on {
  background: linear-gradient(180deg, #263a4f, #131f2c);
  border-color: #0d151e;
  box-shadow: inset 0 1px 0 rgba(160, 190, 220, .25);
}
.mgcell.nono.given {
  background: linear-gradient(180deg, #d3ab34, #96751d);
  border-color: #6b5416;
  cursor: default; opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 240, 180, .5);
}

.simonpad { display: grid; grid-template-columns: repeat(3, 64px); gap: var(--s2); }
.simonpad.mem { grid-template-columns: repeat(2, 78px); }   /* memory: a bigger 2×2 */
.simonpad.mem .mgpad { width: 78px; height: 78px; }
.mgpad {
  width: 64px; height: 64px;
  border-radius: 11px;
  border: 1px solid rgba(10, 16, 22, .55);
  background: var(--simoncol, #4a6b8a);
  filter: brightness(.6) saturate(.85);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -4px 6px rgba(0, 0, 0, .3), 0 3px 7px rgba(60, 45, 15, .35);
  transition: filter .12s, transform .12s, box-shadow .12s;
}
.mgpad:not(:disabled) { filter: brightness(.78); }
.mgpad.lit {
  filter: brightness(1.45) saturate(1.25) !important;
  transform: scale(1.06);
  box-shadow: 0 0 18px var(--simoncol, #ffd75e), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.mgpad:not(:disabled):active { transform: scale(.94); }

/* visual memory — the Mnemosyne Board (Human-Benchmark style flash-and-recall) */
.vmgrid {
  display: grid;
  grid-template-columns: repeat(var(--vmn, 7), 1fr);
  gap: 6px;
  width: min(80vw, 360px);
  margin: 0 auto;
}
.vmcell {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid rgba(10, 16, 22, .5);
  background: #38618f;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 5px rgba(0, 0, 0, .28);
  transition: background .12s, transform .1s, box-shadow .15s;
  padding: 0;
}
.vmcell:not(:disabled) { cursor: pointer; }
.vmcell:not(:disabled):hover { background: #43719f; }
.vmcell.lit {
  background: #fbf6e9;
  box-shadow: 0 0 16px rgba(251, 246, 233, .85), inset 0 2px 0 rgba(255, 255, 255, .4);
  transform: scale(1.04);
}
.vmcell.found {
  background: linear-gradient(180deg, #fff4cf, #e9c46a);
  box-shadow: 0 0 14px rgba(233, 196, 106, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.vmcell.miss {
  background: var(--blood, #b23a2e);
  animation: vmshake .22s;
}
@keyframes vmshake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.agletters { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.agtile {
  width: 42px; height: 48px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fbf6e9, #ecdfc0);
  border: 1px solid var(--bronze);
  box-shadow: 0 2px 4px rgba(90, 70, 30, .28), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-family: var(--disp); font-size: 23px; font-weight: 800; color: var(--sepia);
  display: inline-flex; align-items: center; justify-content: center;
}
.agrow { display: flex; gap: var(--s2); width: 100%; max-width: 400px; }
.aginput {
  flex: 1; margin: 0;
  text-transform: uppercase; letter-spacing: .3em;
  font-family: var(--disp); font-weight: 700; font-size: 18px;
}

/* riddle (typed answer) */
.riddlecat {
  font-family: var(--disp); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-deep);
  margin-bottom: var(--s2);
}
.riddletext {
  font-family: var(--body); font-size: 19px; line-height: 1.5; color: var(--sepia);
  text-align: center; white-space: pre-line; max-width: 440px;
  margin: 0 auto var(--s3);
}

/* the Sphinx's spoken terms — a caption held over the diorama between her
   ambush flash and the riddle scroll (see beginSphinxAmbush) */
.sphinxspeak {
  position: fixed; left: 50%; bottom: 20%; transform: translate(-50%, 14px);
  z-index: 20; pointer-events: none; text-align: center;
  max-width: min(560px, 86vw);
  padding: 14px 26px;
  background: linear-gradient(180deg, rgba(14, 12, 20, .82), rgba(8, 7, 12, .9));
  border: 1px solid rgba(232, 194, 122, .5);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(3, 6, 10, .7), 0 0 30px rgba(232, 194, 122, .18);
  opacity: 0; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .2, 1);
}
.sphinxspeak.in { opacity: 1; transform: translate(-50%, 0); }
.sphinxspeak .ssname {
  font-family: var(--disp); font-size: 12px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: #e8c27a;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 6px;
}
.sphinxspeak .ssname svg { fill: #e8c27a; }
.sphinxspeak .ssline {
  font-family: var(--disp); font-size: clamp(17px, 3vw, 23px); font-weight: 600;
  font-style: italic; color: #f2ead9; line-height: 1.35;
  text-shadow: 0 2px 12px rgba(3, 6, 10, .8);
}

.ravgrid { display: grid; grid-template-columns: repeat(3, 62px); gap: 6px; }
.ravcell {
  width: 62px; height: 62px;
  background: linear-gradient(180deg, #fbf6e9, #f0e6cd);
  border: 1px solid var(--parch-line);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.ravcell.missing {
  font-family: var(--disp); font-size: 30px; font-weight: 800; color: #b3a37c;
  background: repeating-linear-gradient(-45deg, #ece1c4 0 8px, #e2d4ad 8px 16px);
  border-style: dashed; border-color: #b3a37c;
}
.ravopts { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.glyphopt {
  background: linear-gradient(180deg, #fbf6e9, #f0e6cd);
  border: 1px solid var(--parch-line);
  border-radius: 9px;
  padding: 6px;
  box-shadow: 0 2px 5px rgba(90, 70, 30, .22);
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.glyphopt:not(:disabled):hover {
  border-color: var(--bronze);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--bronze), 0 3px 7px rgba(90, 70, 30, .3);
}
/* sequence — "The Fates' Thread": a row of numbers, type the next */
.seqthread {
  font-family: var(--disp); font-size: 30px; font-weight: 800;
  letter-spacing: .06em; color: var(--sepia); text-align: center;
  margin: 0 auto var(--s4); max-width: 460px;
}
.seqthread::after { content: ''; }

/* lights out — "The Gorgon's Gaze": lit stones glow; darken them all */
.logrid { display: grid; gap: 5px; }
.locell {
  width: 52px; height: 52px; border-radius: 8px;
  background: linear-gradient(180deg, #2a2532, #17131c);
  border: 1px solid #0e0b12;
  box-shadow: inset 0 1px 0 rgba(120, 110, 130, .14);
}
.locell.lit {
  background: radial-gradient(circle at 40% 35%, #ffe9a6, var(--bronze) 68%, var(--bronze-deep));
  border-color: var(--bronze-dark);
  box-shadow: 0 0 14px 2px rgba(201, 162, 39, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.locell:not(:disabled):hover { border-color: var(--bronze); }

/* sliding tile — "The Shifting Mosaic": number tiles, one blank */
.slidegrid { display: grid; grid-template-columns: repeat(3, 56px); gap: 5px; }
.slidecell {
  width: 56px; height: 56px;
  font-family: var(--disp); font-size: 24px; font-weight: 800; color: var(--sepia);
  display: flex; align-items: center; justify-content: center;
}
.slidecell.blank {
  background: repeating-linear-gradient(-45deg, #ece1c4 0 8px, #e2d4ad 8px 16px);
  border-style: dashed; border-color: #b3a37c; box-shadow: none; cursor: default;
}

.dragghost { position: fixed; z-index: 400; pointer-events: none; left: -999px; top: -999px; }

/* ═══ GENERIC MODAL: intro · upgrades · winner ═══════════════════════════ */
.intro { text-align: left; margin: var(--s3) 0 var(--s3) 22px; line-height: 1.55; font-size: 15px; }
.intro li { margin-bottom: 5px; }
.intro strong { color: #4a3811; }
.upgrades { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin: var(--s4) 0; }
.upcard {
  --notch: 9px;
  display: flex; flex-direction: column; gap: 6px;
  width: 182px;
  padding: var(--s4) var(--s4);
  font-size: 14px; font-family: var(--body);
  color: var(--sepia);
  text-align: left;
  cursor: pointer;
  transition: transform var(--fast);
}
.upcard:hover { transform: translateY(-3px); }
.upcard:hover::before {
  background:
    var(--grain),
    radial-gradient(130% 100% at 50% 0%, #fdf8ea 0%, var(--parch-hi) 52%, #e6d4a8 100%);
}
.upcard strong {
  font-family: var(--disp); font-size: 15px; letter-spacing: .06em;
  color: #4a3811;
}
.upcard svg { width: 26px; height: 26px; }

/* ═══ PLAYER INSPECTOR (z 25) ════════════════════════════════════════════ */
#uppanel {
  position: fixed; top: 64px; left: var(--s3); z-index: 25;
  padding: var(--s4) var(--s4);
  width: min(310px, 90vw);
}
#uppanel h3 { margin-bottom: var(--s2); font-size: 17px; letter-spacing: .06em; color: #4a3811; }
.uprow {
  display: flex; gap: var(--s3); align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(138, 108, 28, .4);
  text-align: left; font-size: 14px;
}
.uprow:last-of-type { border-bottom: 0; }
.upic { width: 26px; height: 26px; flex: none; color: var(--bronze-deep); }
.upic svg { width: 100%; height: 100%; }
#uppanel .small { margin-top: var(--s3); }

/* ═══ SHOP — bottom sheet above the tray ═════════════════════════════════ */
#shopPanel {
  position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  width: min(540px, 94vw);
  padding: var(--s3) var(--s4) var(--s4);
  animation: sheetup .25s ease-out;
}
@keyframes sheetup { from { opacity: 0; transform: translate(-50%, 16px); } }
.stallhead {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--disp); font-weight: 700;
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gilt);
  padding-bottom: var(--s2);
  margin-bottom: var(--s1);
  border-bottom: 1px solid rgba(201, 162, 39, .35);
}
.stallhead svg { width: 17px; height: 17px; }
.stallhead em { font-family: var(--body); font-size: 12.5px; letter-spacing: .02em; text-transform: none; color: var(--mist); margin-left: auto; }

/* ── the trader's chart: a scrap of paper slid UNDER the stall's top corner.
 * Body-level at z-index 9 (below the panel's 10), positioned each frame at the
 * box's corner (a rAF tracker keeps it glued through the slide-in). The .96-
 * opaque panel hides all but a tip that overhangs the corner; three tugs slide
 * it out from under, and it NEVER floats on top. ── */
.mapTab {
  position: fixed; z-index: 9; padding: 0;
  width: 34px; height: 44px;
  border: 1px solid #a9884b; border-radius: 3px 6px 6px 3px;
  background: linear-gradient(158deg, #f3e8c6 0%, #e2cd97 60%, #cdb277 100%);
  color: #6b4f22; box-shadow: 2px 3px 8px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  translate: calc(var(--pull, 0) * 9px) calc(var(--pull, 0) * -9px);
  rotate: 15deg;
  transition: translate .2s cubic-bezier(.3, 1.5, .5, 1), filter .15s ease;
}
.mapTab:hover { filter: brightness(1.06); }
.mapTab svg { width: 15px; height: 15px; opacity: .85; }
.mapTab.got { background: linear-gradient(158deg, #f4de9a, #d7b256); color: #5a3f12; }
/* a little tug when you click it, before it opens (transform composes with the
 * base translate/rotate individual properties) */
.mapTab.wiggle { animation: mapwiggle .38s ease; }
@keyframes mapwiggle {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  18% { transform: translate(3px, -3px) rotate(5deg); }
  42% { transform: translate(1px, -7px) rotate(-4deg); }
  68% { transform: translate(3px, -3px) rotate(4deg); }
  86% { transform: translate(1px, -1px) rotate(-2deg); }
}

/* the stall slides down out of the way when the board chart takes over */
body.shop-aside #shopPanel {
  transform: translate(-50%, 130%) !important;
  opacity: 0; pointer-events: none;
  transition: transform .45s ease, opacity .35s ease;
}

/* the trader's-chart flow: charge prompt + the unfolding treasure map */
.chartov {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .6);
}
.chartcard {
  width: min(400px, 92vw); text-align: center;
  padding: var(--s3) var(--s4) var(--s4);
  background: linear-gradient(180deg, rgba(26, 20, 13, .97), rgba(12, 9, 6, .99));
  border: 1px solid var(--gilt); border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7); color: var(--bone);
  animation: sheetup .25s ease-out;
}
.cc-kick { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--disp); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt); }
.cc-kick svg { width: 15px; height: 15px; }
.chartcard p { font-size: 14px; line-height: 1.55; margin: 8px 0 14px; }
.chartcard em { color: var(--gilt); font-style: italic; }
.cc-btns { display: flex; gap: var(--s2); justify-content: center; }
.cc-pay, .cc-no {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
  font-family: var(--disp); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; cursor: pointer;
  border-radius: 6px;
}
.cc-pay { color: #35270a; border: 1px solid #8a6a1c; background: linear-gradient(180deg, #f0d987, #cba53f); }
.cc-pay:hover:not(:disabled) { filter: brightness(1.07); }
.cc-pay:disabled { opacity: .5; cursor: not-allowed; }
.cc-pay svg { width: 13px; height: 13px; }
.cc-no { color: var(--bone); border: 1px solid rgba(201, 162, 39, .35); background: rgba(30, 40, 52, .8); }
.cc-note { font-size: 12px; color: #d98a5a; margin-top: 9px; }

.tm-sheet {
  width: min(440px, 92vw); cursor: pointer;
  padding: var(--s4) var(--s4) var(--s3); text-align: center;
  background:
    radial-gradient(130% 100% at 30% 15%, rgba(255, 250, 232, .55), transparent 55%),
    linear-gradient(158deg, #e9d6a6 0%, #d3b878 70%, #c6a962 100%);
  border: 2px solid #9c7a3e; border-radius: 8px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .65);
  color: #4a3617; transform-origin: 80% 0;
  /* opens up from the corner to centre when the .in class is added next frame */
  opacity: 0; transform: translate(22vw, -26vh) scale(.14) rotate(-8deg);
  transition: transform .55s cubic-bezier(.2, 1.15, .35, 1), opacity .4s ease;
}
.tm-sheet.in { opacity: 1; transform: none; }
.tm-art { display: block; width: 100%; height: auto; }
.tm-wave { fill: none; stroke: #7a3b1c; stroke-width: 1.4; stroke-linecap: round; opacity: .3; }
.tm-isle { fill: #c2a86e; stroke: #7d6636; stroke-width: 1.6; }
.tm-palm { fill: none; stroke: #6b5228; stroke-width: 1.6; stroke-linecap: round; opacity: .65; }
.tm-trail { fill: none; stroke: #8a3f1c; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 3 12; stroke-dashoffset: 300; }
.tm-sheet.in .tm-trail { animation: tmdash .8s ease-out both .3s; }
@keyframes tmdash { to { stroke-dashoffset: 0; } }
.tm-start { fill: #8a3f1c; }
/* the spot: a dashed ring, and the X centred exactly on it */
.tm-ring { fill: none; stroke: #c0392b; stroke-width: 2.4; stroke-dasharray: 4 5;
  transform-box: fill-box; transform-origin: center; opacity: 0; }
.tm-sheet.in .tm-ring { animation: tmringin .5s ease-out both .95s, tmspin 14s linear 1.4s infinite; }
@keyframes tmringin { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes tmspin { to { transform: rotate(360deg); } }
.tm-x path { stroke: #c0392b; stroke-width: 5.5; stroke-linecap: round; }
.tm-x { transform-box: fill-box; transform-origin: center; opacity: 0; }
.tm-sheet.in .tm-x { animation: tmxin .4s cubic-bezier(.3, 1.5, .5, 1) both 1.2s; }
@keyframes tmxin { 0% { opacity: 0; scale: 2.4; } 60% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
.tm-rose-o { fill: none; stroke: #7d6636; stroke-width: 1.5; opacity: .8; }
.tm-rose-a { fill: #8a6a3a; opacity: .8; }
.tm-rose-c { fill: #5a4320; }
.tm-cap { font-family: var(--disp); font-size: 15px; letter-spacing: .03em; color: #5a3f12; margin: 6px 0 2px; }
.tm-hint { font-size: 12.5px; font-style: italic; color: #7a5a2a; }

/* the red X the chart stamps on the hidden islet, on the board map (labelled ?) */
.mapchip.swordx .mapx {
  font-weight: 900; font-size: 17px; line-height: 1;
  color: #e5452c; text-shadow: 0 0 6px rgba(224, 58, 47, .8), 0 1px 2px rgba(0, 0, 0, .8);
  animation: swordxpulse 1.6s ease-in-out infinite;
}
.mapchip.swordx .ml { color: #ffcf6a; font-weight: 800; font-size: 15px; }
@keyframes swordxpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
/* …descending onto the island the first time you chart it. Animate the ✕ span
 * (not the chip — mapTick owns the chip's positioning transform), so the drop
 * plays without knocking the marker off the island. */
.mapchip.swordx.drop .mapx {
  animation: xdrop .7s cubic-bezier(.3, 1.4, .5, 1) both,
             swordxpulse 1.6s ease-in-out .7s infinite;
}
@keyframes xdrop {
  0% { transform: translateY(-46px) scale(2.4); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── the Sword of Damocles claim cinematic ───────────────────────────────── */
#swordClaim {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 60%, rgba(20, 12, 30, .82), rgba(4, 3, 8, .96));
  animation: mapfade .35s ease-out;
}
@keyframes mapfade { from { opacity: 0; } }
.sc-scene { position: relative; width: 220px; height: 300px; }
.sc-stone {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  width: 150px; height: 66px; border-radius: 12px 14px 30px 26px / 10px 12px 40px 36px;
  background: linear-gradient(180deg, #5c5750 0%, #38342f 70%, #24211d 100%);
  box-shadow: inset 0 6px 10px rgba(255, 255, 255, .08), 0 14px 26px rgba(0, 0, 0, .6);
}
.sc-stone::after {                       /* the slot the blade sits in */
  content: ''; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 30px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #100e0c, #2a2622);
}
.sc-blade {
  position: absolute; left: 50%; bottom: 42px; width: 66px; height: 250px;
  transform: translateX(-50%) translateY(78px);       /* buried: only the hilt shows */
  fill: #d9dee6; stroke: #9aa3ad; stroke-width: .6;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
  transition: transform 1s cubic-bezier(.22, 1.2, .36, 1), filter .4s;
}
.sc-blade .sc-fuller { stroke: #aeb6c0; stroke-width: 1.4; }
.sc-blade circle, .sc-blade rect:first-of-type, .sc-blade rect + rect { fill: #cB9a3e; stroke: #8a6a1c; }
#swordClaim.drawn .sc-blade { transform: translateX(-50%) translateY(-6px); }
#swordClaim.shine .sc-blade { filter: drop-shadow(0 0 16px rgba(255, 246, 210, 1)) brightness(1.6); }
/* a lasting glimmer after the flash, so the drawn blade keeps its shine */
#swordClaim.named .sc-blade { filter: drop-shadow(0 0 9px rgba(255, 244, 205, .85)) brightness(1.18); }
.sc-flash {
  position: absolute; left: 50%; top: 44%; width: 10px; height: 10px;
  transform: translate(-50%, -50%) scale(0); border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 244, 200, .7) 40%, transparent 70%);
  opacity: 0;
}
#swordClaim.shine .sc-flash { animation: scflash .7s ease-out; }
@keyframes scflash {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(34); opacity: 0; }
}
.sc-rays {
  position: absolute; left: 50%; top: 44%; width: 0; height: 0;
  opacity: 0; transition: opacity .5s;
}
#swordClaim.shine .sc-rays { opacity: .8; animation: scspin 9s linear infinite; }
@keyframes scspin { to { transform: rotate(360deg); } }
.sc-ray {
  position: absolute; left: 0; top: 0; width: 3px; height: 150px;
  transform-origin: 50% 0; transform: rotate(calc(var(--r) * 30deg));
  background: linear-gradient(rgba(255, 240, 200, .85), transparent);
}
.sc-card {
  margin-top: 22px; width: min(440px, 92vw); text-align: center;
  padding: var(--s3) var(--s4) var(--s4);
  background: linear-gradient(180deg, rgba(26, 20, 13, .97), rgba(12, 9, 6, .99));
  border: 1px solid var(--gilt); border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7), inset 0 0 30px rgba(240, 208, 96, .14);
  opacity: 0; transform: translateY(16px); pointer-events: none;
}
#swordClaim.named .sc-card { opacity: 1; transform: none; pointer-events: auto; transition: .5s ease-out; }
.sc-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--disp); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gilt); opacity: .85;
}
.sc-kicker svg { width: 15px; height: 15px; }
.sc-card h2 { font-family: var(--disp); font-size: 26px; color: var(--gilt); margin: 4px 0 8px; letter-spacing: .04em; }
.sc-card p { font-size: 14px; line-height: 1.55; color: var(--bone); margin: 0 0 8px; }
.sc-hint { font-style: italic; color: var(--mist) !important; font-size: 13px !important; }
.sc-ok { margin-top: 10px; }
.shoprow {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s2) 0;
  border-bottom: 1px dashed rgba(201, 162, 39, .2);
}
.shoprow:last-child { border-bottom: 0; }
.shoprow .sicon {
  width: 34px; height: 34px; padding: 6px;
  color: var(--bronze);
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .3);
  border-radius: 8px;
}
.shoprow .sicon svg { width: 100%; height: 100%; }
.shoprow .sname { font-family: var(--disp); font-weight: 700; font-size: 13.5px; letter-spacing: .05em; }
.shoprow .sdesc { font-size: 12.5px; font-style: italic; color: var(--mist); line-height: 1.3; }
.price {
  font-family: var(--disp); font-weight: 800; font-size: 12.5px;
  color: var(--gilt);
  background: rgba(240, 208, 96, .13);
  border: 1px solid rgba(240, 208, 96, .45);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.shoprow.cant .price { color: #6a7885; border-color: rgba(120, 135, 148, .3); background: none; }
.buy, .buybtn { font-size: 11px; letter-spacing: .1em; padding: 7px 14px; }

/* ═══ THE OPENING TOUR — captions + hidden HUD ═══════════════════════════ */
body.touring #tray, body.touring #players, body.touring #objective,
body.touring #turnBanner, body.touring #itembelt, body.touring #log,
body.touring #mapBtn, body.touring #dice, body.touring #shopPanel { display: none !important; }

#tourCap {
  position: fixed; left: 50%; bottom: 7vh; transform: translateX(-50%);
  z-index: 19; pointer-events: none; text-align: center;
  width: min(720px, 92vw);
}
#tourCap .tc-title {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(24px, 5vw, 40px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gilt);
  text-shadow: 0 2px 14px rgba(3, 6, 10, .9), 0 0 34px rgba(240, 208, 96, .35);
}
#tourCap .tc-body {
  margin-top: 8px;
  font-family: var(--body); font-style: italic;
  font-size: clamp(14px, 2.4vw, 19px); line-height: 1.45;
  color: #f2ead2;
  text-shadow: 0 2px 10px rgba(3, 6, 10, .95);
}
#tourCap .tc-skip {
  margin-top: 10px;
  font-family: var(--disp); font-weight: 700; font-size: 10.5px;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(240, 230, 200, .55);
}

/* the Amber Vale's "chart" — a question mark; the Vale is different for
   every captain, so there is nothing to draw */
#valeChart {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 9, 13, .45);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
#valeChart .vc-card {
  text-align: center;
  padding: 34px 44px 30px;
  background: linear-gradient(168deg, rgba(22, 30, 24, .94), rgba(12, 16, 13, .96));
  border: 1px solid rgba(240, 162, 79, .45);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(3, 6, 10, .8), 0 0 44px rgba(240, 162, 79, .12) inset;
  max-width: min(440px, 86vw);
}
#valeChart .vc-mark {
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(84px, 18vw, 130px); line-height: 1;
  color: #f0a24f;
  text-shadow: 0 0 34px rgba(240, 162, 79, .5), 0 4px 18px rgba(3, 6, 10, .9);
}
#valeChart .vc-line {
  margin-top: 12px;
  font-family: var(--disp); font-weight: 700; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gilt);
}
#valeChart .vc-sub {
  margin-top: 8px;
  font-family: var(--body); font-style: italic; font-size: 15px;
  line-height: 1.5; color: #e8dcc0;
}

/* ═══ CHART — live aerial view of the current region ═════════════════════ */
#mapBtn {
  position: fixed; top: var(--s3); right: 128px; z-index: 10;
  width: 44px; height: 44px; padding: 9px;
  color: var(--bronze);
  background: rgba(14, 24, 34, .72);
  border: 1px solid rgba(201, 162, 39, .4);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  transition: transform var(--fast), border-color var(--fast), color var(--fast);
}
#mapBtn:hover { transform: translateY(-1px); color: var(--gilt); border-color: rgba(240, 208, 96, .7); }
#mapBtn.on { color: #0e1822; background: var(--bronze); }
#mapBtn svg { width: 100%; height: 100%; }

/* floating isle icons over the aerial view */
#mapIcons { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.mapchip {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: flex; align-items: center; justify-content: center;
  color: #f2e7c8;
  background: rgba(14, 24, 34, .78);
  border: 1.5px solid rgba(201, 162, 39, .65);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(4, 8, 12, .55);
  cursor: help;
}
.mapchip .mi { width: 16px; height: 16px; display: block; }
.mapchip .mi svg { width: 100%; height: 100%; display: block; }
.mapchip .ml {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  display: none;
  font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .04em;
  white-space: nowrap; color: #f5ecd2;
  background: rgba(10, 17, 25, .92);
  border: 1px solid rgba(201, 162, 39, .5);
  border-radius: 6px; padding: 3px 9px;
}
.mapchip:hover { z-index: 3; border-color: var(--gilt); }
.mapchip:hover .ml { display: block; }
.mapchip.haven  { border-color: rgba(63, 168, 255, .85); color: #bfe4ff; }
.mapchip.lair   { border-color: rgba(224, 85, 58, .85); color: #ffc9b8; }
.mapchip.lair.done { opacity: .55; }
.mapchip.pharos { border-color: rgba(163, 108, 255, .9); color: #e2d1ff; }
.mapchip.gate   { border-color: rgba(120, 160, 190, .85); }
.mapchip.foe    { border-color: rgba(200, 120, 60, .7); opacity: .9; }

/* captains on the aerial view */
.mapav {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 800; font-size: 12px; color: #fff;
  background: var(--pc, #888);
  border: 2px solid rgba(255, 250, 233, .95);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(4, 8, 12, .6);
}
.mapav.you { box-shadow: 0 0 0 3px rgba(240, 208, 96, .8), 0 2px 8px rgba(4, 8, 12, .6); }

/* the control hint bar */
#mapHint {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 12;
  font-family: var(--body); font-size: 13px; color: #e7dcc0;
  background: rgba(12, 20, 29, .85);
  border: 1px solid rgba(201, 162, 39, .45);
  border-radius: 999px;
  padding: 7px 18px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
#mapHint strong { font-family: var(--disp); letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; color: var(--gilt); }
#mapHint kbd {
  font-family: var(--body); font-size: 11.5px; color: #0e1822;
  background: #cfc3a2; border-radius: 4px; padding: 0 5px;
}

@media (max-width: 700px) {
  #mapBtn { right: 118px; width: 38px; height: 38px; padding: 8px; top: var(--s2); }
  #mapHint { font-size: 11px; padding: 6px 12px; max-width: 94vw; white-space: normal; text-align: center; }
}

.stallnote {
  font-size: 12px; font-style: italic; color: var(--mist);
  padding: 2px 0 var(--s2); text-align: center;
  border-bottom: 1px dashed rgba(201, 162, 39, .2);
}

/* legendary relics — the shipwright's back room, set apart from the stall */
.relicsplit {
  margin: var(--s3) 0 var(--s1);
  font-family: var(--disp); font-weight: 800; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: #cf9bff;
  display: flex; align-items: center; gap: 7px;
  border-top: 1px solid rgba(163, 108, 255, .35); padding-top: var(--s2);
}
.relicsplit svg { width: 13px; height: 13px; }
.shoprow.relicrow .sicon {
  color: #cf9bff;
  background: rgba(140, 82, 255, .12);
  border-color: rgba(163, 108, 255, .4);
}
.shoprow.relicrow .sname { color: #e9d4ff; }
.shoprow.relicrow.have { opacity: .62; }
.price.owned {
  color: #cf9bff; background: rgba(140, 82, 255, .14);
  border-color: rgba(163, 108, 255, .5);
}

/* ═══ MOBILE — single 700px breakpoint, bottom-anchored stack ════════════ */
@media (max-width: 700px) {
  .title-panel { padding: var(--s5) var(--s4) var(--s4); }
  .title-hero { gap: var(--s2); }
  .title-hero .laurel { width: 34px; height: 64px; }
  .title-hero h1 { letter-spacing: .14em; margin-right: -.14em; }
  .title-howto { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }

  #players { max-width: min(240px, 62vw); gap: 4px; }
  .pchip { padding: 4px 8px; font-size: 12px; gap: 5px; }
  .pname { font-size: 11.5px; max-width: 6.5em; }
  .hullpips i, .hullpip { width: 8px; height: 8px; }

  #muteBtn { width: 38px; height: 38px; padding: 8px; top: var(--s2); right: var(--s2); }
  #compass { width: 68px; height: 68px; top: 54px; right: var(--s2); }
  #compass .needle { height: 26px; }
  #bounties { top: 130px; right: var(--s2); font-size: 11.5px; }

  /* bottom stack: tray 10 › turnBanner › objective › dice/itembelt above */
  #tray { bottom: 10px; gap: 6px; }
  .act { padding: 8px 12px; font-size: 12.5px; }
  .act.big { padding: 11px 18px; font-size: 15px; }
  #turnBanner {
    top: auto; bottom: 72px;
    font-size: 11.5px; padding: 5px 14px;
    max-width: min(420px, 92vw);
    overflow: hidden; text-overflow: ellipsis;
  }
  #objective {
    top: auto; bottom: 106px;
    font-size: 11.5px; padding: 4px 12px;
    max-width: 92vw;
  }
  #itembelt { bottom: auto; top: 130px; right: var(--s2); flex-direction: column; gap: 6px; }
  .itemslot, .beltslot { width: 40px; height: 40px; padding: 7px; }
  #dice { bottom: 148px; }
  .die { --dsz: 46px; --hz: 23px; }
  .face { border-radius: 8px; }
  .face i { width: 8px; height: 8px; }
  #log { bottom: 176px; max-width: min(260px, 64vw); font-size: 11.5px; }
  #log > *:nth-last-child(3), #log > *:nth-last-child(4) { display: none; }
  #toasts { bottom: 210px; max-width: min(280px, 78vw); font-size: 12px; }

  /* battle */
  .cinebar.top { height: 132px; }
  .cinebar.bot { height: 118px; }
  #bfoe { top: 8px; }
  .btitle { font-size: 21px; }
  .bsub { font-size: 12px; }
  .chargewarn { font-size: 10.5px; letter-spacing: .12em; }
  #bmon { top: 92px; }
  .ecard { min-width: 104px; padding: 5px 9px 7px; }
  .hpcell { width: 24px; height: 11px; }
  .hpbar.ally .hpcell { width: 20px; height: 9px; }
  #bturn { bottom: 132px; font-size: 14px; }
  #bship { bottom: 92px; }
  #bactions { bottom: 10px; gap: 7px; }
  .battlebtn { font-size: 13px; min-width: 86px; padding: 12px 12px 10px; }
  .battlebtn.ghost { font-size: 11px; padding: 10px 10px; }
  #bactions .itemslot, #bactions .beltslot { width: 38px; height: 38px; padding: 7px; }

  /* cards + minigames */
  #qtext { font-size: 16.5px; }
  #qopts { grid-template-columns: 1fr; gap: var(--s2); }
  .mgcell { width: 36px; height: 36px; }
  .mgcell.nono { width: 31px; height: 31px; }
  .simonpad { grid-template-columns: repeat(3, 54px); }
  .mgpad { width: 54px; height: 54px; }
  .ravgrid { grid-template-columns: repeat(3, 52px); }
  .ravcell { width: 52px; height: 52px; }
  .agtile { width: 36px; height: 42px; font-size: 19px; }

  #shopPanel { bottom: 64px; width: min(540px, 96vw); }
  .shoprow { gap: var(--s2); }
  .shoprow .sdesc { display: none; }
  #uppanel { top: 52px; }
}

/* ═══ REDUCED MOTION ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .chargewarn, #bfoe .charging { animation: none; }  /* stays striped, stops scrolling */
  .ecard.targetable { animation: none; box-shadow: 0 0 16px rgba(240, 208, 96, .75); }
}

/* ── the CORRECT / WRONG verdict banner (Kraken riddles) ───────────────── */
.verdictBanner {
  position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%);
  z-index: 80; pointer-events: none;
  font-family: 'Cinzel', serif; font-size: 60px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 40px; border-radius: 14px;
  background: rgba(8, 11, 20, .55); backdrop-filter: blur(2px);
}
.verdictBanner.long { font-size: 26px; letter-spacing: .04em; max-width: min(88vw, 620px);
  text-align: center; line-height: 1.3; text-transform: none; }
.verdictBanner.good { color: #7CFFB2; text-shadow: 0 0 30px rgba(60, 220, 130, .8);
  border: 2px solid rgba(124, 255, 178, .5); }
.verdictBanner.bad { color: #ff7a6b; text-shadow: 0 0 30px rgba(224, 70, 40, .8);
  border: 2px solid rgba(255, 122, 107, .5); }

/* ── the loading beat before the grand fly-over ────────────────────────── */
#loadOv {
  position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 42%,
    rgba(14, 18, 30, 0.72) 0%, rgba(7, 9, 16, 0.96) 78%);
  transition: opacity .55s;
}
#loadOv.lgone { opacity: 0; pointer-events: none; }
#loadOv .lwrap {
  text-align: center; padding: 30px 44px; width: min(88vw, 460px);
  background: linear-gradient(180deg, rgba(20, 26, 40, .92), rgba(12, 15, 26, .96));
  border: 1px solid rgba(217, 164, 65, .55); border-radius: 14px;
  box-shadow: 0 0 70px rgba(217, 164, 65, .14), 0 24px 60px rgba(0, 0, 0, .6);
}
#loadOv .ltitle {
  font-family: 'Cinzel', serif; font-size: 20px; letter-spacing: .12em;
  color: #f4d582; text-shadow: 0 0 18px rgba(217, 164, 65, .45);
  margin-bottom: 18px;
}
#loadOv .lbar {
  height: 12px; border-radius: 7px; overflow: hidden;
  background: rgba(9, 12, 20, .9);
  border: 1px solid rgba(217, 164, 65, .4);
}
#loadOv .lfill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #a87424, #d9a441 55%, #f4d582);
  box-shadow: 0 0 14px rgba(217, 164, 65, .7);
  transition: width .25s ease-out;
}
#loadOv .lcount {
  margin-top: 10px; font-size: 12.5px; font-style: italic; color: #8d97ab;
}

/* ── the victory curtain call ──────────────────────────────────────────── */
#victoryOv {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 42%,
    rgba(14, 18, 30, 0.55) 0%, rgba(7, 9, 16, 0.94) 78%);
  animation: vfade 1.1s ease both;
}
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
#victoryOv.vpeek { opacity: 0; pointer-events: none; transition: opacity .5s; }
#victoryOv .vwrap {
  text-align: center; padding: 34px 46px; max-width: 620px; width: min(92vw, 620px);
  background: linear-gradient(180deg, rgba(20, 26, 40, .92), rgba(12, 15, 26, .96));
  border: 1px solid rgba(217, 164, 65, .55); border-radius: 14px;
  box-shadow: 0 0 90px rgba(217, 164, 65, .18), 0 30px 70px rgba(0, 0, 0, .6);
  animation: vrise 0.9s cubic-bezier(.2, 1.4, .4, 1) both .25s;
}
@keyframes vrise { from { transform: translateY(36px) scale(.94); opacity: 0; }
                   to { transform: none; opacity: 1; } }
#victoryOv .vlaurel { color: var(--gilt, #d9a441); margin-bottom: 2px;
  filter: drop-shadow(0 0 18px rgba(217, 164, 65, .8)); }
#victoryOv .vtitle {
  font-family: 'Cinzel', serif; font-size: 54px; letter-spacing: .3em;
  color: #f4d582; text-shadow: 0 0 26px rgba(217, 164, 65, .55);
}
#victoryOv .vsub { font-style: italic; color: #cfd6e4; margin: 4px 0 20px; }
#victoryOv .vboard { margin: 0 auto 22px; text-align: left; }
#victoryOv .vrow {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border-radius: 8px; color: #b9c2d4; font-size: 14px;
}
#victoryOv .vrow.vwin {
  background: rgba(217, 164, 65, .12); color: #f0e6c8;
  border: 1px solid rgba(217, 164, 65, .4);
}
#victoryOv .vrank { width: 22px; color: var(--gilt, #d9a441); text-align: center; }
#victoryOv .vdot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
#victoryOv .vname { flex: 1; font-weight: 600; letter-spacing: .04em; }
#victoryOv .vstat { min-width: 74px; text-align: right; opacity: .85; font-size: 12.5px; }
#victoryOv .vbtns { display: flex; gap: 12px; justify-content: center; align-items: center; }
#victoryOv .vgold {
  font-family: 'Cinzel', serif; letter-spacing: .18em; font-size: 16px;
  padding: 12px 30px; border-radius: 9px; cursor: pointer; border: none;
  background: linear-gradient(180deg, #e8bf62, #b98a2e); color: #241a08;
  box-shadow: 0 6px 22px rgba(217, 164, 65, .35);
}
#victoryOv .vgold:hover { filter: brightness(1.08); }
#victoryOv .vghost {
  background: none; border: 1px solid rgba(180, 190, 210, .35); color: #aeb8ca;
  padding: 11px 18px; border-radius: 9px; cursor: pointer; letter-spacing: .08em;
}
#victoryOv .vwait { color: #8d97ab; font-style: italic; font-size: 13px; }

/* ── the WIN cinematic: darkness pours from the Pharos, then a flood to white ── */
/* sits ABOVE the board (z60): the white floods over everything, then clears to
   reveal the leaderboard already risen beneath it */
#victoryCine {
  position: fixed; inset: 0; z-index: 62; pointer-events: none; overflow: hidden;
}
#victoryCine .vc-dark {
  position: absolute; left: 50%; top: 46%; width: 12px; height: 12px;
  transform: translate(-50%, -50%) scale(0); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #000 0%, #05040a 40%, rgba(22, 8, 44, .82) 66%, rgba(30, 12, 54, 0) 82%);
  box-shadow: 0 0 80px 40px rgba(4, 2, 12, .8);
  animation: vcdark 2.2s cubic-bezier(.5, .1, .4, 1) forwards;
}
@keyframes vcdark {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(120); opacity: 1; }
}
#victoryCine .vc-wisps { position: absolute; left: 50%; top: 46%; }
#victoryCine .vc-wisp {
  position: absolute; left: 0; top: 0; width: 90px; height: 34px;
  margin: -17px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 4, 22, .95), rgba(26, 10, 50, .5) 60%, transparent);
  opacity: 0; transform: rotate(calc(var(--w) * 36deg)) translateX(0) scale(.3);
  animation: vcwisp 2.1s calc(var(--w) * .04s) ease-out forwards;
}
@keyframes vcwisp {
  0%   { opacity: 0; transform: rotate(calc(var(--w) * 36deg)) translateX(0) scale(.3); }
  22%  { opacity: .9; }
  100% { opacity: 0; transform: rotate(calc(var(--w) * 36deg)) translateX(min(70vw, 900px)) scale(3.4); }
}
#victoryCine .vc-white {
  position: absolute; inset: 0; background: #fff; opacity: 0;
}
#victoryCine.flash .vc-white { animation: vcflash 1.1s ease-in forwards; }
@keyframes vcflash { from { opacity: 0; } to { opacity: 1; } }
#victoryCine.clear .vc-white { animation: vcclear 1.4s ease-out forwards; }
#victoryCine.clear .vc-dark, #victoryCine.clear .vc-wisps { opacity: 0; transition: opacity .6s; }
@keyframes vcclear { from { opacity: 1; } to { opacity: 0; } }

/* the board itself now stacks a tappable head over a reveal panel */
#victoryOv .vhint {
  color: #96a0b4; font-size: 12px; font-style: italic; margin: -8px 0 14px;
  letter-spacing: .02em;
}
#victoryOv .vrow { flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; overflow: hidden; cursor: pointer; outline: none; }
#victoryOv .vrow:focus-visible { box-shadow: 0 0 0 2px rgba(217, 164, 65, .55); }
#victoryOv .vrow-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
}
#victoryOv .vrow:hover .vrow-head { background: rgba(255, 255, 255, .04); }
#victoryOv .vname small { color: #8d97ab; font-weight: 400; }
#victoryOv .vchev { width: 16px; text-align: center; color: #8d97ab;
  transition: transform .2s ease; }
#victoryOv .vrow.open .vchev { transform: rotate(180deg); }
#victoryOv .vdet {
  max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .3s ease;
}
#victoryOv .vrow.open .vdet { max-height: 240px; opacity: 1; }
#victoryOv .vdet-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
  padding: 4px 14px 12px 40px; font-size: 12.5px;
}
#victoryOv .vdet-grid .vk { color: #9aa4b8; white-space: nowrap; }
#victoryOv .vdet-grid .vv { color: #dce3ef; text-align: right; }

/* ── dev teleport panel (unlocked by double-tapping the T, code 783) ─────── */
#devBar {
  position: fixed; right: 12px; bottom: 12px; z-index: 9999;
  background: rgba(12, 16, 22, 0.93); border: 1px solid #2a3341; border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; gap: 5px;
  font: 12px/1.2 system-ui, sans-serif; color: #cfe0f0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
#devBar .dev-title { color: #7fe0a0; font-weight: 700; letter-spacing: 1px; margin-bottom: 2px; }
#devBar .dev-btn {
  background: #1b2531; color: #e6eef7; border: 1px solid #33465a; border-radius: 6px;
  padding: 5px 9px; cursor: pointer; text-align: left;
}
#devBar .dev-btn:hover { background: #24405c; }
#devBar .dev-btn.dev-off { background: #3a2330; border-color: #6a3346; color: #f0b8c4; }
#devBar .dev-hint { color: #8aa0b4; font-size: 11px; margin-top: 3px; max-width: 160px; }
#devFightMenu {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 44vh; overflow-y: auto; margin-top: 4px;
  padding-top: 6px; border-top: 1px solid #2a3341;
}
#devFightMenu .dev-btn { background: #17202b; }
#devFightMenu .dev-btn:hover { background: #24405c; }

/* dev teleport: when unlocked, the aerial-chart isles become jump targets */
body.dev .mapchip { cursor: pointer; }
body.dev .mapchip:hover {
  border-color: #7fe0a0;
  box-shadow: 0 0 0 2px rgba(127, 224, 160, .55), 0 2px 8px rgba(4, 8, 12, .55);
}

/* ═══ QA POLISH PASS (reviewer panel, docs/QA-REVIEWS.md) ════════════════ */

/* FLEE stands apart from the stance trio — butted against GUARD it was the
   top fat-finger complaint (an accidental flee costs scrolls AND a free hit) */
.battlebtn.flee { margin-left: clamp(10px, 3vw, 26px); }

/* the reconnecting veil: dims and blocks the board while the socket is down */
#connVeil {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 9, 14, .55);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  animation: veilin .4s ease-out;
}
@keyframes veilin { from { opacity: 0; } }
#connVeil .plaque { font-family: var(--disp); font-weight: 700; letter-spacing: .06em; }

/* phone-scale touch targets: 44px minimum on the toolbar icons + item belt */
@media (max-width: 700px) {
  #muteBtn, #mapBtn { width: 44px; height: 44px; }
  #bactions .itemslot, #bactions .beltslot { width: 44px; height: 44px; padding: 8px; }
  .itemslot, .beltslot { min-width: 44px; min-height: 44px; }
}

/* ═══ BATTLE REWORK: turn rail, dodge beat, readable foe HP ══════════════ */

/* foe HP reads at a glance: fatter cells + a numeric count beside them */
.ehprow { display: flex; align-items: center; justify-content: center; gap: 7px; }
.ehpnum {
  font-family: var(--disp); font-weight: 800; font-size: 12.5px;
  color: #ffb4a4; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.hpbar.foe .hpcell { width: 30px; height: 15px; background: rgba(10, 14, 20, .55); }

/* the DODGE beat: full-screen tap zone, collapsing ring onto a target */
#dodgeQte {
  position: fixed; inset: 0; z-index: 16;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 46%, rgba(6, 10, 16, .18), rgba(6, 10, 16, .55));
  touch-action: none; cursor: pointer;
}
#dodgeQte .dodgecap {
  font-family: var(--disp); font-weight: 700; font-size: clamp(16px, 3vw, 24px);
  letter-spacing: .08em; color: var(--bone);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
#dodgeQte .dodgecap strong { color: #ef6448; }
/* the loud warning banner over the telegraphed heavy blow */
#dodgeQte .dodgewarn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(20px, 4.4vw, 40px); letter-spacing: .1em;
  padding: 6px 20px; border-radius: 10px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
#dodgeQte .dodgewarn.heavy {
  color: #ffcf6b; border: 2px solid rgba(255, 196, 77, .8);
  background: rgba(70, 44, 8, .55);
}
#dodgeQte .dodgehint {
  font-family: var(--body); font-style: italic; font-size: 13px;
  color: var(--mist); text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
/* the timing wheel: a dark clock face, a GOLD arc shaded onto its ring, a
   thin WHITE hand sweeping clockwise. Tap while the hand crosses the gold. */
.dodgewheel {
  position: relative; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 16, 24, .55) 58%, rgba(16, 24, 34, .85) 100%);
  border: 3px solid rgba(201, 162, 39, .55);
  box-shadow: 0 0 22px rgba(3, 8, 13, .8), inset 0 0 18px rgba(3, 8, 13, .7);
}
/* the gold window — a conic sector (inline background) cut into a ring band */
.dodgewheel .dq-arc {
  position: absolute; inset: 4px; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  filter: drop-shadow(0 0 8px rgba(240, 208, 96, .7));
}
/* the little white clock hand, pivoting from the centre */
.dodgewheel .dq-hand {
  position: absolute; left: 50%; bottom: 50%;
  width: 3.5px; height: 46%;
  margin-left: -1.75px;
  transform-origin: bottom center;
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, .35));
  border-radius: 3px;
  box-shadow: 0 0 9px rgba(255, 255, 255, .85);
  will-change: transform;
}
.dodgewheel .dq-hand::before {           /* tip knob riding the ring */
  content: '';
  position: absolute; top: -5px; left: 50%;
  width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .9);
}
.dodgewheel .dq-hand::after {             /* centre pin */
  content: '';
  position: absolute; bottom: -4px; left: 50%;
  width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%;
  background: var(--gilt);
  box-shadow: 0 0 6px rgba(240, 208, 96, .8);
}
.dodgewheel .dq-verdict {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--disp); font-weight: 800; font-size: 19px;
  letter-spacing: .1em; pointer-events: none;
}
.dodgewheel .dq-verdict.hit { color: #7cffb2; text-shadow: 0 0 18px rgba(60, 220, 130, .8); }
.dodgewheel .dq-verdict.miss { color: #ff7a6b; text-shadow: 0 0 18px rgba(224, 70, 40, .8); }
#dodgeQte.dodged .dodgewheel { border-color: #7cffb2; }
#dodgeQte.flubbed .dodgewheel { border-color: #55606e; }
#dodgeQte.dodged .dq-hand, #dodgeQte.flubbed .dq-hand { opacity: .5; }

@media (max-width: 700px) {
  .dodgewheel { width: 132px; height: 132px; }
  .hpbar.foe .hpcell { width: 24px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #dodgeQte { background: rgba(6, 10, 16, .55); }
}

/* ── the JEOPARDY! category board ──────────────────────────────────────────
   classic show blue + gold: four categories to pick before the typed clue */
#jboard {
  position: fixed; inset: 0; z-index: 16;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 20px;
  background: radial-gradient(circle at 50% 42%, rgba(6, 10, 20, .35), rgba(4, 6, 14, .74));
}
#jboard.picked { pointer-events: none; }
#jboard .jbhead {
  font-family: var(--disp); font-weight: 800; font-size: clamp(16px, 3vw, 26px);
  letter-spacing: .05em; color: #f4d27a; text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
  display: inline-flex; align-items: center; gap: 8px; text-align: center;
}
#jboard .jbsub {
  font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .16em;
  color: var(--mist); text-transform: uppercase;
}
#jboard .jbtimer {
  width: min(560px, 86vw); height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, .14); overflow: hidden;
}
#jboard .jbtimerBar { height: 100%; width: 100%; background: #f0d061; }
#jboard .jbgrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  width: min(720px, 92vw);
}
/* the tiles are inscribed bronze-framed marble-dark steles, not TV blue —
   the same Aegean stone + bronze + gilt the rest of the HUD is carved from */
#jboard .jbcell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 96px; padding: 14px 12px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(240, 208, 96, .10), transparent 60%),
    linear-gradient(180deg, var(--ink3), var(--ink1));
  border: 2px solid var(--bronze); border-radius: 12px;
  color: var(--bone); cursor: pointer;
  box-shadow: 0 4px 16px rgba(3, 8, 20, .6), inset 0 1px 0 rgba(240, 208, 96, .14);
  transition: transform .1s, box-shadow .1s, border-color .1s, filter .1s;
}
#jboard .jbcell:hover:not(.disabled) {
  transform: translateY(-2px);
  border-color: var(--gilt);
  box-shadow: 0 0 22px rgba(240, 208, 96, .5), inset 0 1px 0 rgba(240, 208, 96, .2);
  filter: brightness(1.08);
}
#jboard .jbcell:active:not(.disabled) { transform: translateY(0); }
#jboard .jbcell.disabled { cursor: default; opacity: .82; }
#jboard .jbval {
  font-family: var(--disp); font-weight: 900; font-size: clamp(20px, 3.4vw, 30px);
  color: var(--gilt); text-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
#jboard .jbcat {
  font-family: var(--disp); font-weight: 800; font-size: clamp(12px, 1.9vw, 16px);
  letter-spacing: .05em; text-transform: uppercase; text-align: center;
  line-height: 1.15; color: var(--bone); text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}