:root {
  --void: #0e0a1a;
  --bg: #140f24;
  --stone: #2b2445;
  --stone-2: #3a3160;
  --wall: #4a4170;
  --amber: #ffb547;
  --amber-deep: #c7772e;
  --rose: #ff5d73;
  --mint: #7dffb0;
  --parchment: #efe0bd;
  --parchment-2: #e3cfa3;
  --ink: #231c38;
  --ink-soft: #5a4c6e;
  --text: #ece6ff;
  --text-dim: #a99fd1;
  --display: "Lilita One", "Arial Black", sans-serif;   /* the Heading Down logo font (was Grenze Gotisch) */
  --ui: "Alegreya Sans", "Trebuchet MS", system-ui, sans-serif;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.touch kbd { display: none; }
html, body { margin: 0; height: 100%; background: var(--void); color: var(--text); font-family: var(--ui); overflow: hidden; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; display: block; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px calc(10px + var(--safe-r)) calc(6px + var(--safe-b)) calc(10px + var(--safe-l));
  background: linear-gradient(to top, rgba(14,10,26,0.94), rgba(14,10,26,0.7));
  border-top: 1px solid rgba(169,159,209,0.18);
  z-index: 5;
  flex-wrap: nowrap; align-items: flex-end;
}
/* your hero, bottom left: a bit bigger than the pack slots, beside the pack row and the status chips */
#hud-hero {
  flex: none; width: 62px; height: 62px; border-radius: 12px; align-self: flex-end;
  background: radial-gradient(circle at 50% 40%, rgba(83,70,130,0.9), rgba(43,36,69,0.9));
  border: 1px solid rgba(169,159,209,0.3); box-shadow: inset 0 0 0 1px rgba(255,181,71,0.12);
}
.hud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#hud-pack { display: flex; flex-wrap: wrap; gap: 5px; min-height: 0; }
#hud-pack:empty { display: none; }
body.touch #hud-pack { display: none; }
/* phones: no pack row, so the hero sits beside the one row of chips */
body.touch #hud { align-items: center; }
body.touch #hud-hero { width: 34px; height: 34px; border-radius: 9px; align-self: center; }
.pslot {
  position: relative; width: 40px; height: 40px; padding: 0; border-radius: 9px;
  background: rgba(43,36,69,0.85); border: 1px solid rgba(169,159,209,0.22); display: grid; place-items: center;
}
.pslot:hover { border-color: var(--amber); }
.pslot.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); background: rgba(255,181,71,0.12); }
.pslot canvas { width: 32px; height: 32px; }
.pslot .pk { position: absolute; left: 3px; top: 1px; font-size: 11px; font-weight: 800; color: var(--text-dim); }
.pslot .pc { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.happened { background: rgba(35,28,56,0.08); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.happened p { margin: 0; font-style: italic; color: var(--ink); }
.hud-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; font-weight: 500; }
.chip { display: inline-flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; }
.chip.depth { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--amber); letter-spacing: 0.03em; }
.chip.gold { color: #ffd24a; }
.hp-bar { width: 96px; height: 10px; border-radius: 6px; background: #3a1e2c; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,93,115,0.35); }
#hud-hpfill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5d73, #ff8a7a); transition: width .25s ease; }
.hp.low #hud-hpfill { background: #ff3b3b; animation: pulse 0.9s infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
.effects { display: inline-flex; gap: 6px; }
.badge { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: rgba(255,181,71,0.15); color: var(--amber); }
.badge.bad { background: rgba(255,93,115,0.16); color: var(--rose); }
.badge.good { background: rgba(125,255,176,0.14); color: var(--mint); }
.badge.spree { background: #ff5d73; color: #fff; animation: pulse 0.8s infinite; }
.hud-btn { background: rgba(58,49,96,0.6); border: 1px solid rgba(169,159,209,0.25); border-radius: 10px; width: 40px; height: 36px; display: grid; place-items: center; color: var(--text); flex: none; }

/* ---------- message log ---------- */
#log {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(12px + var(--safe-l)); right: 30%;
  font-size: 17px; line-height: 1.3; z-index: 4; pointer-events: auto; cursor: pointer;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,0.9);
  max-width: 60em;   /* on a wide screen, long lines wrap instead of running across the whole dungeon */
}
#log .m { margin: 0 0 2px; transition: opacity .4s; }
#log .m.old { opacity: 0.45; font-size: 15px; }
#log .m.new { color: #fff; }
/* combat lines: color = who did what, arrow = direction (→ you acted, ← it acted) */
#log .m.gap { margin-top: 6px; }
#log .m.gap::before { content: ''; display: block; width: min(220px, 45%); border-top: 1px solid rgba(236,230,255,0.18); margin-bottom: 5px; }
.m .ic, .hm .ic { display: inline-block; width: 1.05em; margin-right: 5px; text-align: center; font-weight: 800; }
#log .m.k-you_hit, .hm.k-you_hit { color: #ffcf7a; }
#log .m.k-you_miss, .hm.k-you_miss { color: #b3aad8; }
#log .m.k-hit_you, .hm.k-hit_you { color: #ff8595; }
#log .m.k-miss_you, .hm.k-miss_you { color: #a7adbd; }
#log .m.k-special, .hm.k-special { color: #cfa3ff; }
#log .m.k-defeated, .hm.k-defeated { color: #7dffb0; }
#log .m.k-regen, .hm.k-regen { color: #74d9e0; }
.k-regen .dmg { background: rgba(116,217,224,0.22); color: #b8f1f5; }
.m .dmg, .hm .dmg { display: inline-block; margin-left: 7px; padding: 0 6px; border-radius: 6px; font-size: 0.8em; font-weight: 800; line-height: 1.35; vertical-align: 1px; text-shadow: none; }
.k-you_hit .dmg { background: rgba(255,181,71,0.24); color: #ffd99a; }
.k-hit_you .dmg, .k-miss_you .dmg { background: rgba(255,93,115,0.28); color: #ffc0c8; }
.hist { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.hist .hm { padding: 3px 8px; border-radius: 6px; background: #2b2445; margin-bottom: 2px; }
.hist .hm:not([class*="k-"]) { background: transparent; color: var(--ink); }
.hist .hm.gap { margin-top: 8px; }
.hist .hm.gap::before { content: ''; display: block; border-top: 1px solid rgba(35,28,56,0.18); margin: -5px -8px 5px; }
.hist.legend { margin-bottom: 6px; }
.hist.legend .hm { display: inline-block; margin: 0 6px 6px 0; }

#banner {
  position: absolute; left: 50%; transform: translateX(-50%); top: 22%;
  background: var(--parchment); color: var(--ink); border-radius: 12px; padding: 10px 18px;
  font-size: 18px; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,0.5); z-index: 8; text-align: center; max-width: 90vw;
}
#banner small { display: block; font-weight: 400; font-size: 14px; color: var(--ink-soft); }

#dirpad { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
#dirpad button {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 2px solid var(--amber); background: rgba(20,15,36,0.75); color: var(--amber); pointer-events: auto;
  display: grid; place-items: center; font-size: 20px; font-weight: 800;
}
#dirpad button:hover { background: var(--amber); color: var(--ink); }
#dirpad button.self { border-color: #7dffb0; color: #7dffb0; }   /* zap yourself (the Healing wand) */
#dirpad button.self:hover { background: #7dffb0; color: var(--ink); }
#banner #dir-cancel { margin-top: 8px; font-size: 14px; padding: 4px 14px; }

/* ---------- touch controls ---------- */
#touch { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#dpad {
  position: absolute; left: calc(14px + var(--safe-l)); bottom: calc(54px + var(--safe-b));
  width: 168px; height: 168px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 3px; pointer-events: auto; opacity: 0.88;
}
#dpad button {
  border: 1px solid rgba(169,159,209,0.3); background: rgba(43,36,69,0.72); border-radius: 12px; color: var(--text);
  display: grid; place-items: center; touch-action: none;
}
#dpad button.center { border-radius: 50%; background: rgba(255,181,71,0.12); border-color: rgba(255,181,71,0.35); font-size: 12px; color: var(--amber); font-weight: 700; }
#dpad button.on { background: var(--amber); color: var(--ink); }
#dpad svg { width: 22px; height: 22px; }
#actions {
  position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(56px + var(--safe-b));
  display: grid; grid-template-columns: repeat(2, 64px); gap: 8px; pointer-events: auto;
}
.act {
  width: 64px; height: 58px; border-radius: 14px; border: 1px solid rgba(169,159,209,0.3);
  background: rgba(43,36,69,0.78); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; font-weight: 700; touch-action: manipulation;
}
.act svg { width: 24px; height: 24px; }
.act.ctx { grid-column: span 2; width: auto; height: 46px; background: var(--amber); color: var(--ink); border: none; font-size: 15px; flex-direction: row; gap: 8px; }
.act:active { transform: scale(0.96); }

/* ---------- overlays & parchment panels ---------- */
.overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(8,5,16,0.62); }
.overlay[hidden] { display: none; }
#sheet { z-index: 30; }   /* panels (How to play, High scores, the Bank...) open on top of the title screen too */
.panel {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  background: var(--parchment); color: var(--ink); border-radius: 16px; padding: 18px 20px 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(122,90,48,0.25), inset 0 0 40px rgba(160,120,60,0.18);
}
.panel.wide { width: min(760px, calc(100vw - 24px)); }
.panel h2 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 0 0 10px; line-height: 1.05; color: var(--ink); }
.panel h3 { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 0.01em; margin: 14px 0 6px; }
.panel p { margin: 0 0 10px; line-height: 1.45; max-width: 62ch; }
.panel .muted { color: var(--ink-soft); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.close { background: none; border: none; font-size: 15px; color: var(--ink-soft); padding: 4px 6px; border-radius: 8px; }
.close:hover { color: var(--ink); background: rgba(35,28,56,0.07); }

.items { list-style: none; margin: 0; padding: 0; }
.items li button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: none;
  padding: 7px 8px; border-radius: 10px; color: var(--ink); font-size: 17px; line-height: 1.2;
}
.items li button:hover, .items li button.sel { background: rgba(35,28,56,0.09); }
.items li button[disabled] { opacity: 0.38; cursor: default; }
.items .key { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--parchment); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.items canvas { flex: none; width: 30px; height: 30px; }
.items .use { margin-left: auto; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.empty { color: var(--ink-soft); font-style: italic; padding: 8px; }

.detail { display: flex; gap: 14px; align-items: flex-start; }
.detail canvas { flex: none; width: 64px; height: 64px; background: rgba(35,28,56,0.08); border-radius: 12px; }
.detail .name { font-weight: 800; font-size: 19px; margin-bottom: 4px; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn {
  border: none; border-radius: 10px; padding: 10px 16px; font-size: 16px; font-weight: 700;
  background: var(--ink); color: var(--parchment); min-height: 44px;
}
.btn.alt { background: rgba(35,28,56,0.1); color: var(--ink); }
.btn.big { font-size: 19px; padding: 12px 22px; }
.btn kbd { font-family: var(--ui); font-size: 12px; opacity: 0.65; margin-left: 6px; }
input[type=text] {
  width: 100%; font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 10px;
  border: 2px solid rgba(35,28,56,0.25); background: #fbf3df; color: var(--ink); -webkit-user-select: text; user-select: text;
}

.keys { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 15px; }
.keys kbd { font-family: var(--ui); font-weight: 800; background: rgba(35,28,56,0.1); border-radius: 6px; padding: 1px 7px; }

/* ---------- title / end screens ---------- */
.screen { background: radial-gradient(ellipse at 50% 38%, #2f2551 0%, #171129 55%, #0b0814 100%); }
.title-wrap { text-align: center; padding: 20px; max-width: 640px; }
.logo {
  font-family: var(--display); font-weight: 400; font-size: clamp(64px, 13vw, 150px); line-height: 0.85; margin: 0;
  color: var(--amber); text-shadow: 0 0 28px rgba(255,181,71,0.45), 0 6px 0 #6d3b14;
  transform: rotate(-3deg);
}
.logo .gone { display: block; font-size: 0.55em; color: var(--text); text-shadow: 0 4px 0 #3a3160; transform: translateX(-0.6em) rotate(-2deg); }
.tagline { color: var(--text-dim); font-size: 18px; margin: 18px 0 26px; }
.title-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.title-actions .btn { background: var(--amber); color: var(--ink); min-width: 260px; }
.title-actions .btn.alt { background: rgba(169,159,209,0.14); color: var(--text); }
.name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--text-dim); }
.name-row input { width: 200px; background: rgba(20,15,36,0.8); color: var(--text); border-color: rgba(169,159,209,0.3); font-size: 17px; padding: 8px 12px; }
.footer { margin-top: 26px; color: #6f6595; font-size: 14px; }
/* title screen can scroll when it doesn't fit (phones in landscape) */
.screen { overflow-y: auto; place-items: start center; touch-action: pan-y; }
.screen > * { margin-block: auto; }
.hero-pick { width: min(600px, 92vw); margin: 2px 0 8px; }
.hero-label { color: var(--text-dim); font-size: 15px; margin-bottom: 6px; }
.hero-grid { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 6px; }
.hero-grid.fun { margin-top: 6px; }
.hero-card {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 5px; min-height: 44px;
  border-radius: 10px; border: 2px solid rgba(169,159,209,0.22); background: rgba(20,15,36,0.55); color: var(--text);
  font-size: 13px; font-weight: 700; line-height: 1.1;
}
.hero-card canvas { width: 56px; height: 56px; }
.hero-card:hover { border-color: rgba(255,181,71,0.6); }
.hero-card.on { border-color: var(--amber); background: rgba(255,181,71,0.14); box-shadow: 0 0 0 1px var(--amber) inset; }
.hero-card.locked { color: var(--text-dim); background: rgba(20,15,36,0.35); }
.hero-info { min-height: 3.6em; margin-top: 8px; color: var(--text-dim); font-size: 15px; line-height: 1.35; text-align: left; }
.hero-info b { color: var(--text); }
.hero-info .lock { color: var(--amber); margin-top: 3px; }
.hero-tag { font-size: 0.82em; font-weight: 700; opacity: 0.75; }

.tomb {
  width: 280px; margin: 0 auto 18px; padding: 34px 20px 22px; text-align: center; color: #2c2640;
  background: linear-gradient(#a49cbc, #807898); border-radius: 140px 140px 10px 10px;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,0.15), 0 14px 0 #3a3160, 0 20px 40px rgba(0,0,0,0.5);
}
.tomb .rip { font-family: var(--display); font-size: 32px; font-weight: 400; margin-bottom: 6px; }
.tomb .who { font-family: var(--display); font-size: 25px; font-weight: 400; }
.tomb div { font-size: 16px; line-height: 1.35; }
.scores { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 6px; }
.scores td, .scores th { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(35,28,56,0.12); }
.scores th { font-weight: 700; color: var(--ink-soft); }
.scores tr.me td { background: rgba(255,181,71,0.25); font-weight: 700; }
.scores td.n { text-align: right; font-variant-numeric: tabular-nums; }

#rotate { display: none; background: var(--bg); z-index: 50; }
.rotate-card { text-align: center; color: var(--text-dim); font-size: 18px; }
.phone { width: 54px; height: 92px; border: 4px solid var(--amber); border-radius: 12px; margin: 0 auto 16px; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt { 40%, 60% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) { #rotate { display: grid; } }

@media (max-height: 460px) {
  .hud-group { font-size: 13px; gap: 4px 10px; }
  .chip.depth { font-size: 16px; }
  .hp-bar { width: 64px; }
  #hud { padding-top: 4px; padding-bottom: calc(4px + var(--safe-b)); }
  #hud-hero { width: 46px; height: 46px; border-radius: 10px; }
  #log { font-size: 15px; right: 34%; }
  #log .m.old { font-size: 13px; }
  .panel { padding: 12px 14px; }
  .panel h2 { font-size: 24px; }
  .items li button { padding: 5px 6px; font-size: 15px; }
  .logo { font-size: 72px; }
  .tagline { margin: 10px 0 14px; font-size: 16px; }
  .title-actions { gap: 7px; }
  .title-actions .btn { min-height: 40px; padding: 8px 18px; }
  .hero-card canvas { width: 40px; height: 40px; }
  .hero-card { font-size: 12px; }
  .hero-info { font-size: 14px; min-height: 2.8em; }
  .tomb { width: 230px; padding: 18px 14px 12px; }
  .tomb .rip { font-size: 26px; }
  #dpad { width: 150px; height: 150px; bottom: calc(44px + var(--safe-b)); }
  #actions { bottom: calc(46px + var(--safe-b)); grid-template-columns: repeat(2, 58px); }
  .act { width: 58px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* run timer, achievements, discoveries tabs */
.chip.time { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.chip.time.daily { color: var(--amber); font-weight: 700; }
.chip.time.daily.low { color: #ff6b80; animation: pulse 0.9s infinite; }
#toasts { position: fixed; top: 14px; right: 14px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--parchment); color: var(--ink); border-radius: 12px; padding: 10px 16px; min-width: 220px; max-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-left: 6px solid var(--amber); animation: toastIn .35s ease-out; }
.toast small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.toast b { font-family: var(--display); font-weight: 400; font-size: 19px; }
.toast.out { opacity: 0; transform: translateX(20px); transition: all .4s; }
/* once-ever pop-ups (new hero, hero mastered): stay until Got it, with the hero's picture */
.toast.sticky { pointer-events: auto; max-width: 360px; }
.toast.with-pic { display: flex; gap: 12px; align-items: flex-start; }
.toast-pic { width: 56px; height: 56px; flex: none; border-radius: 10px; background: rgba(35,28,56,0.1); }
.toast-ok { margin-top: 8px; border: none; border-radius: 8px; padding: 6px 14px; font: inherit; font-weight: 800; background: var(--ink); color: var(--parchment); cursor: pointer; }
.toast-ok:hover { filter: brightness(1.2); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }
.tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.tabs button { border: none; background: rgba(35,28,56,0.1); color: var(--ink); padding: 7px 14px; border-radius: 9px; font-weight: 700; }
.tabs button.on { background: var(--ink); color: var(--parchment); }
.codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; list-style: none; padding: 0; margin: 0 0 6px; font-size: 15px; }
.codex li { padding: 2px 0; }
.codex .unk { color: var(--ink-soft); font-style: italic; }
.codex .tag { font-size: 12px; color: var(--ink-soft); margin-left: 4px; }
.codex .mdesc { font-size: 13px; color: var(--ink-soft); line-height: 1.3; margin: 1px 0 4px; }
.prog { font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-left: 8px; }
.ach { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(35,28,56,0.1); }
.ach .medal { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: rgba(35,28,56,0.12); color: var(--ink-soft); }
.ach.got .medal { background: var(--amber); color: var(--ink); }
.ach .nm { font-weight: 800; }
.ach .ds { font-size: 14px; color: var(--ink-soft); }
.ach:not(.got) .nm { opacity: 0.6; }

/* fight card: who you're fighting (bottom right on desktop, top right on phones) */
#foe {
  position: absolute; right: calc(12px + var(--safe-r)); bottom: 80px; z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; min-width: 220px; max-width: 300px;
  background: rgba(20,15,36,0.9); border: 1px solid rgba(169,159,209,0.3); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
#foe[hidden] { display: none !important; }
#foe canvas { width: 64px; height: 64px; border-radius: 10px; background: #2b2445; flex: none; }
#foe .foe-info { min-width: 0; flex: 1; }
#foe .foe-top { display: flex; align-items: center; gap: 8px; }
#foe .foe-letter { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 19px; }
#foe .foe-name { font-weight: 800; font-size: 17px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#foe .foe-hp { margin-top: 7px; height: 8px; border-radius: 5px; background: #3a1e2c; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,93,115,0.35); }
#foe .foe-hp[hidden] { display: none; }
#foe-hpfill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5d73, #ff8a7a); transition: width .25s ease; }
#foe .foe-state { font-size: 13px; font-weight: 800; color: var(--mint); margin-top: 3px; }
#foe .foe-state:empty { display: none; }
#foe.dead { border-color: rgba(125,255,176,0.55); }
#foe.dead canvas { filter: grayscale(0.7) brightness(0.8); }
/* it got away (stole and ran, fled, teleported, made friends): round 159 */
#foe.gone { border-color: rgba(255,196,92,0.55); }
#foe.gone canvas { opacity: 0.55; }
#foe.gone #foe-state { color: var(--amber); }
#foe.pop { animation: foePop .55s ease-out; }
@keyframes foePop { 0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(255,181,71,0.75); } 60% { transform: scale(1.05); } 100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(255,181,71,0); } }
body.touch #foe { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto !important; min-width: 0; max-width: 34%; padding: 6px 10px 6px 6px; gap: 8px; }
body.touch #foe canvas { width: 44px; height: 44px; }
body.touch #foe .foe-letter { width: 24px; height: 24px; font-size: 15px; }
body.touch #foe .foe-name { font-size: 14px; }

.btn.locked, .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.toast.hero { box-shadow: 0 0 0 3px var(--mint), 0 8px 24px rgba(0,0,0,0.35); }
/* male/female switch for heroes with more than one look */
.look-switch { display: inline-flex; margin: 0 6px 0 8px; vertical-align: 1px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(169,159,209,0.35); }
.look-switch button { border: none; background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 700; padding: 2px 9px; min-height: 0; }
.look-switch button.on { background: var(--amber); color: var(--ink); }
/* the Scavenger's trade screen */
.greet { font-style: italic; color: var(--ink); margin: 0 0 6px; }
.tnote { background: rgba(255,181,71,0.18); border-radius: 8px; padding: 6px 10px; margin: 4px 0 8px; color: var(--ink); font-style: italic; }
.panel-head:has(.scav-title) { align-items: center; }
.scav-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.scav-title h2 { margin: 0; }
#scav-pic { display: block; width: 64px; height: 64px; min-width: 64px; max-height: 64px; flex: 0 0 64px; align-self: center; aspect-ratio: 1 / 1; object-fit: contain; }
@media (max-height: 460px) { #scav-pic { width: 46px; height: 46px; min-width: 46px; max-height: 46px; flex-basis: 46px; } }
.items.trade li.trow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; color: var(--ink); }
.items.trade li.trow:nth-child(odd) { background: rgba(35,28,56,0.05); }
.items.trade canvas { width: 30px; height: 30px; flex: none; }
.items.trade .tname { flex: 1; min-width: 0; font-size: 16px; line-height: 1.2; }
.items.trade .tprice { text-align: right; font-weight: 800; white-space: nowrap; font-size: 15px; }
.items.trade .tprice small { display: block; font-weight: 600; color: var(--ink-soft); font-size: 12px; }
.items.trade .tbtns { display: flex; gap: 4px; flex: none; }
.items.trade .tbtns .btn { width: auto; display: inline-block; min-height: 34px; padding: 5px 10px; font-size: 14px; font-weight: 700; text-align: center; background: var(--ink); color: var(--parchment); }
.items.trade .tbtns .btn.alt { background: rgba(35,28,56,0.12); color: var(--ink); }
.items.trade .tbtns .btn:hover:not(:disabled) { filter: brightness(1.15); }
.items.trade .tbtns .btn:disabled { opacity: 0.35; cursor: default; }
.love { font-size: 12px; font-weight: 800; color: #a8620f; white-space: nowrap; }
.small { font-size: 13px; }
.btn.danger { background: var(--rose); color: #2a0a12; }
.btn.danger-text { color: #b3263b; }
.robconfirm { background: rgba(255,93,115,0.14); border-radius: 10px; padding: 8px 12px; margin-top: 8px; color: var(--ink); }
.robconfirm p { margin: 0 0 4px; }

/* ---------- the Bank, challenges, mastery ---------- */
.bank-bal { font-size: 19px; font-weight: 800; margin: 2px 0 4px; }
.shop-row { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid rgba(35,28,56,0.1); }
.shop-row .sb { flex: 1; min-width: 0; }
.shop-row .nm { font-weight: 800; }
.shop-row .ds { font-size: 14px; color: var(--ink-soft); }
.shop-row .btn { flex: none; min-width: 96px; }
.shop-row .btn:disabled { opacity: 0.55; }
.shop-row .maxed { flex: none; font-weight: 800; color: var(--amber-deep); min-width: 96px; text-align: center; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(35,28,56,0.15); }
.pips i.on { background: var(--amber-deep); }
.chal-list { display: flex; flex-direction: column; gap: 6px; }
.chal { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 9px 10px; border-radius: 10px; border: 2px solid rgba(35,28,56,0.14); background: rgba(35,28,56,0.04); color: var(--ink); font: inherit; min-height: 44px; }
.chal.on { border-color: var(--amber-deep); background: rgba(255,181,71,0.18); }
.chal .tick { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(35,28,56,0.3); display: grid; place-items: center; font-weight: 900; }
.chal.on .tick { background: var(--amber-deep); border-color: var(--amber-deep); color: #fff; }
.chal .nm { display: block; font-weight: 800; }
.chal .pct { color: var(--amber-deep); }
.chal .ds { display: block; font-size: 14px; color: var(--ink-soft); }
.title-actions .btn.locked { opacity: 0.6; }
.hero-card { position: relative; }
.hero-card .star { position: absolute; top: 2px; right: 4px; font-style: normal; color: var(--amber); font-size: 13px; }
.hero-info .mastery { margin-top: 3px; }
.hero-info .mastery.got { color: var(--amber); }
.bank-note { color: var(--amber); font-weight: 700; margin: -6px 0 12px; }
.hero-info .mastery .how { opacity: 0.8; font-style: italic; }
.hero-info .mastery.got b { color: var(--amber); }
.reset-row { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(35,28,56,0.12); text-align: right; }
.reset-opts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 14px; align-items: center; margin: 12px 0 4px; }
.reset-opts p { margin: 0; font-size: 14px; }
@media (max-width: 560px) { .reset-opts { grid-template-columns: 1fr; } }

/* ---------- Heading Down title logo (cartoon tumble: steel outline, the hole glows electric blue) ---------- */
.hd-logo { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin: 4px 0 0; padding-bottom: 0.66em;
  font-family: "Lilita One", "Arial Black", sans-serif; font-weight: 400; font-size: clamp(76px, 14vw, 132px); line-height: 0.9; }
.hd-logo .hd-heading { position: relative; z-index: 1; font-size: 0.55em; line-height: 1; color: #fff7e6;
  -webkit-text-stroke: 0.098em #111b24; paint-order: stroke fill; transform: rotate(-4deg) translateX(-1.3em); }
.hd-logo .hd-down { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 0.036em; color: var(--amber);
  -webkit-text-stroke: 0.071em #111b24; paint-order: stroke fill; text-shadow: 0 -0.018em 0 rgba(214, 221, 227, 0.55); }
.hd-logo .hd-down span { display: inline-block; }
.hd-logo .hd-down span:nth-child(1) { transform: rotate(-6deg); }
.hd-logo .hd-down span:nth-child(2) { transform: translateY(0.107em) rotate(9deg); }
.hd-logo .hd-down span:nth-child(3) { transform: translateY(0.274em) rotate(-14deg); }
.hd-logo .hd-down span:nth-child(4) { transform: translateY(0.571em) rotate(28deg); }
.hd-logo .hd-hole { position: absolute; z-index: 0; right: -0.5em; bottom: 0.02em; width: 1.37em; height: 0.38em; border-radius: 50%;
  background: #0c0816; box-shadow: 0 0 0 0.048em #3d2f63, 0 0 0.155em 0.06em rgba(47, 203, 239, 0.28); }
/* the tagline's words tumble in one by one (tap it to replay); they land below the hole, never on it */
.hd-tagline { margin: 2px 0 4px; font-family: var(--ui); font-weight: 700; font-size: 22px; color: #c9bfe8; cursor: pointer; }
.hd-tagline span { display: inline-block; opacity: 0; }
.hd-tagline.play span { animation: hd-tumble 0.75s cubic-bezier(0.3, 1.45, 0.5, 1) both; animation-delay: calc(0.35s + var(--i) * 0.13s); }
@keyframes hd-tumble {
  0% { opacity: 0; transform: translateY(-1.8em) rotate(var(--r)); }
  55% { opacity: 1; transform: translateY(0.18em) rotate(calc(var(--r) * -0.25)); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hd-tagline span { opacity: 1; } .hd-tagline.play span { animation: none; } }
.title-wrap .tagline { font-size: 15px; margin: 2px 0 20px; }
/* buttons in capitals, like the other Bish Games */
.title-actions .btn, .title-wrap .btnrow .btn { text-transform: uppercase; letter-spacing: 0.06em; }
/* footer: ©Bish Games (links to bishgames.com), then the credit line with a Credits pop-up */
.footer { display: grid; gap: 4px; }
.footer .foot-link { color: inherit; text-decoration: none; }
.footer .foot-link:hover, .footer .foot-link:focus-visible { text-decoration: underline; color: var(--text-dim); }
.footer .link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.footer .link-btn:hover { color: var(--text-dim); }
pre.license { white-space: pre-wrap; font-size: 12.5px; line-height: 1.45; background: rgba(35,28,56,0.06); border-radius: 10px; padding: 12px; max-height: 50vh; overflow: auto; }
@media (max-height: 560px) {
  .hd-logo { font-size: 72px; }
  .hd-tagline { font-size: 18px; }
}
/* the story pop-up (first game) and in How to play */
.lore p { margin: 0 0 10px; line-height: 1.5; }
.lore-btns { justify-content: flex-end; }
.lore-btns .btn { text-transform: uppercase; letter-spacing: 0.06em; min-width: 120px; }
/* the win-screen title in the logo style */
.title-wrap > .logo { color: var(--amber); -webkit-text-stroke: 0.06em #111b24; paint-order: stroke fill; text-shadow: 0 0 28px rgba(255, 181, 71, 0.35); }

/* status bar pop-ups (hover on a computer, tap on a phone): text in messages, hud_tip_* */
#hud [data-tip] { cursor: help; }
#hud-tip { position: fixed; z-index: 60; max-width: min(300px, calc(100vw - 16px)); padding: 7px 11px; border-radius: 10px;
  background: rgba(20, 15, 36, 0.96); color: #ece6ff; border: 1px solid rgba(255, 181, 71, 0.35);
  font-size: 13.5px; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
#hud-tip b { color: var(--amber); }
#hud-tip[hidden] { display: none; }
/* the note under the tagline after Save and quit (text in messages: title_saved) */
.title-note { margin: 10px auto 12px; max-width: 520px; color: var(--amber); font-weight: 700; font-size: 15px; line-height: 1.35; text-align: center; }

/* the other hand: what's ready to fire (f), on the status bar and the pack bar */
.chip.ready { gap: 3px; padding: 0 6px 0 2px; border-radius: 9px; background: rgba(255,181,71,0.12); border: 1px solid rgba(255,181,71,0.35); }
.chip.ready canvas { width: 22px; height: 22px; }
.chip.ready span { font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; }
.chip.ready span:empty { display: none; }
.chip.ready kbd { font-size: 11px; padding: 0 4px; opacity: 0.85; }
#hud-ready[hidden] { display: none; }
.pslot.ready { box-shadow: 0 0 0 2px var(--amber) inset; }
.pslot.ready::after { content: ''; position: absolute; right: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

/* keyboard: the lit-up button or row in a pop-up (arrows move, Enter picks) */
#sheet button:focus-visible, #sheet [tabindex]:focus-visible, #sheet a:focus-visible { outline: 3px solid #d9661a; outline-offset: 2px; }
#sheet ul.items:not(.trade) > li > button:focus-visible { outline-offset: -3px; background: rgba(217,102,26,0.12); }
#hud .chip.ready { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#hud .chip.ready:active { background: rgba(255,181,71,0.28); }

/* Dealer's Choice: pick one of the cards */
#sheet .cards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }
#sheet .card-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; padding: 12px 10px 10px;
  border: 2px solid var(--amber); border-radius: 12px; background: rgba(35,28,56,0.06); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; text-align: center;
}
#sheet .card-pick:hover, #sheet .card-pick:focus-visible { background: var(--amber); }
#sheet .card-pick canvas { width: 72px; height: 72px; }
#sheet .card-pick kbd { font-size: 12px; opacity: 0.7; }

/* the item that's ready to fire, tagged in the pack list (round 98) */
.ready-tag { color: var(--amber, #f2b544); font-size: .85em; white-space: nowrap; }
/* what a known smoothie, tablet, smart ring, or gadget does, next to it in your pack (round 146) */
.what-tag { color: #2f7a6c; font-size: .85em; }
.hero-stats { margin-top: .3em; color: var(--amber); font-weight: 600; font-size: .92em; }
.hm.k-popup { color: #ffd58a; }

/* hunger badges (round 100): capitals, pulsing faster the hungrier you are */
.badge.hunger { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.badge.h-hungry { color: #ffcf6e; border-color: rgba(255,207,110,.6); animation: hunger-pulse 2.4s ease-in-out infinite; }
.badge.h-weak { color: #ff9a3c; border-color: rgba(255,154,60,.75); background: rgba(255,154,60,.14); animation: hunger-pulse 1.2s ease-in-out infinite; }
.badge.h-faint { color: #ff5d5d; border-color: rgba(255,93,93,.85); background: rgba(255,93,93,.16); animation: hunger-pulse .7s ease-in-out infinite; }
.badge.h-fainted { color: #fff; border-color: #ff3b3b; background: #c62828; animation: hunger-pulse .45s ease-in-out infinite; }
@keyframes hunger-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .badge.hunger { animation: none; } }

/* the phone Fire button (round 105): the ready item's picture, its count, and "Fire" */
.act.fire { position: relative; border-color: rgba(255,181,71,0.55); }
.act.fire canvas { width: 28px; height: 28px; }
.act.fire .n { position: absolute; top: 3px; right: 6px; font-size: 11px; color: var(--amber); }
.act[hidden] { display: none; }

/* sound and music panel (round 111) */
.sound-opts { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; margin: 8px 0 16px; }
.sound-opts .sw { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.sound-opts input[type=range] { width: 100%; min-width: 0; accent-color: var(--accent, #d9a441); }
@media (max-width: 420px) { .sound-opts { grid-template-columns: 1fr; gap: 6px; } }
.sound-opts .sw.sub { padding-left: 26px; font-size: 0.95em; }
.sound-opts .sw input:disabled + * , .sound-opts .sw:has(input:disabled) { opacity: 0.55; }
.hero-info .mastery .label { color: var(--text); font-weight: 600; }
h3 .listen { margin-left: 8px; padding: 2px 10px; font-size: 13px; vertical-align: middle; min-height: 0; }

/* the monster card in the lower right, twice as big on a computer (round 115, Bish) */
body:not(.touch) #foe { gap: 20px; padding: 16px 28px 16px 16px; min-width: 440px; max-width: 600px; border-radius: 22px; }
body:not(.touch) #foe canvas { width: 128px; height: 128px; border-radius: 18px; }
body:not(.touch) #foe .foe-top { gap: 14px; }
body:not(.touch) #foe .foe-letter { width: 56px; height: 56px; border-radius: 14px; font-size: 36px; }
body:not(.touch) #foe .foe-name { font-size: 32px; }
body:not(.touch) #foe .foe-hp { margin-top: 14px; height: 16px; border-radius: 9px; }
body:not(.touch) #foe .foe-state { font-size: 24px; margin-top: 6px; }
@media (max-width: 1100px) { body:not(.touch) #foe { min-width: 0; max-width: 46vw; } }

/* the story pop-up as an elevator panel (round 119): brushed steel, screws in the corners, a floor display with
   the title, a notice plate for the story, and two buttons: door-open (Back) and DOWN */
.panel.lift-panel { position: relative; padding: 26px 26px 20px; border-radius: 12px; color: #1d1924;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0.035) 1px 2px, rgba(255,255,255,0) 2px 4px),
    linear-gradient(160deg, #d9d6df 0%, #a8a3b2 38%, #cdc9d4 58%, #908b9b 100%);
  box-shadow: 0 18px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgba(60,55,70,0.45); }
.lift .screw { position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f2f7, #8a8596 70%); box-shadow: inset 0 -1px 1px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.6); }
.lift .screw::after { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: rgba(50,45,60,0.65); transform: rotate(35deg); }
.lift { position: relative; }   /* the screws ride along when a short screen scrolls the panel */
.lift .screw.tl { left: -17px; top: -17px; } .lift .screw.tr { right: -17px; top: -17px; }
.lift .screw.bl { left: -17px; bottom: -11px; } .lift .screw.br { right: -17px; bottom: -11px; }
@media (max-width: 420px) { .lift .screw.tl, .lift .screw.bl { left: -10px; } .lift .screw.tr, .lift .screw.br { right: -10px; } }
.lift-display { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 16px; border-radius: 8px;
  background: linear-gradient(180deg, #0d0a08, #1a130c); border: 2px solid #5f5a6a;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.6); }
.lift-display h2 { margin: 0; color: #ffb547; text-shadow: 0 0 6px rgba(255,181,71,0.85), 0 0 16px rgba(255,140,40,0.45); letter-spacing: 0.02em; }
.lift-arrow { color: #ffb547; font-size: 22px; text-shadow: 0 0 8px rgba(255,181,71,0.9); animation: liftArrow 1.6s ease-in-out infinite; }
@keyframes liftArrow { 0%, 100% { transform: translateY(-2px); opacity: 1; } 50% { transform: translateY(3px); opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .lift-arrow { animation: none; } }
.lift-notice { padding: 14px 16px 6px; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.18));
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.7); }
.lift-notice p { color: #1d1924; text-shadow: 0 1px 0 rgba(255,255,255,0.55); }
.lift-controls { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 16px; }
.lift-btn { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 14px; }
.lift-btn .lift-plate { display: grid; place-items: center; width: 84px; height: 104px; border-radius: 12px;
  background: linear-gradient(135deg, #eeebf3 0%, #aea9bb 45%, #dcd8e4 60%, #948fa1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 3px rgba(0,0,0,0.25), 0 0 0 1px rgba(60,55,70,0.5), 0 6px 14px rgba(0,0,0,0.35); }
.lift-btn .lift-ring { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a4458 0%, #241f30 70%); border: 4px solid #c9c3d4;
  box-shadow: 0 0 0 2px #7a7488, inset 0 3px 6px rgba(0,0,0,0.6); transition: transform .08s ease, box-shadow .2s ease; }
.lift-btn svg { width: 32px; height: 32px; fill: #6d6480; transition: fill .2s ease, filter .2s ease; }
.lift-btn.down-btn:hover svg, .lift-btn.down-btn:focus-visible svg { fill: #ffd27a; filter: drop-shadow(0 0 4px rgba(255,181,71,0.8)); }
.lift-btn.door-open:hover svg, .lift-btn.door-open:focus-visible svg { fill: #e9f4ff; filter: drop-shadow(0 0 4px rgba(200,230,255,0.9)); }
#sheet .lift-btn:focus-visible { outline: none; }   /* no ring: the button's own glow shows where the keyboard is (Bish, Nov 5) */
/* hover help: a small label over the button (lore_back, lore_ready) */
.lift-btn { position: relative; }
.lift-btn[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px);
  white-space: nowrap; padding: 5px 10px; border-radius: 7px; font: 700 14px var(--ui); letter-spacing: 0.02em;
  color: #ffd27a; background: #17120c; border: 1px solid #5f5a6a; box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.lift-btn[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
body.touch .lift-btn[data-tip]::after { display: none; }
.lift-btn:active .lift-ring, .lift-btn.lit .lift-ring { transform: scale(0.94); box-shadow: 0 0 0 2px #7a7488, inset 0 4px 8px rgba(0,0,0,0.75); }
.lift-btn.down-btn.lit svg { fill: #ffb547; filter: drop-shadow(0 0 8px rgba(255,181,71,1)) drop-shadow(0 0 14px rgba(255,140,40,0.7)); }
.lift-btn.down-btn.lit .lift-ring { box-shadow: 0 0 0 2px #7a7488, inset 0 4px 8px rgba(0,0,0,0.75), 0 0 18px rgba(255,181,71,0.55); }
@media (max-width: 420px) { .panel.lift-panel { padding: 22px 16px 16px; } .lift-btn .lift-plate { width: 70px; height: 88px; } .lift-btn .lift-ring { width: 54px; height: 54px; } }


/* round 121: light leaking above and below the story panel, and the elevator doors when you press DOWN */
.lift-wrap { position: relative; display: grid; place-items: center; }
.lift-wrap .panel.lift-panel { max-height: calc(100vh - 70px); }
.leak { position: absolute; left: 8%; right: 8%; height: 3px; border-radius: 3px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffd27a 20%, #fff2c9 50%, #ffd27a 80%, transparent);
  box-shadow: 0 0 12px 3px rgba(255,190,90,0.55), 0 0 40px 10px rgba(255,160,60,0.25); animation: liftFlicker 3.2s infinite; }
.leak.top { top: -14px; animation-delay: -1.3s; } .leak.bottom { bottom: -14px; }
.leak::after { content: ''; position: absolute; left: -8%; right: -8%; height: 56px; pointer-events: none; }
.leak.top::after { bottom: 3px; background: radial-gradient(ellipse at 50% 100%, rgba(255,190,90,0.22), transparent 70%); }
.leak.bottom::after { top: 3px; background: radial-gradient(ellipse at 50% 0%, rgba(255,190,90,0.22), transparent 70%); }
@keyframes liftFlicker { 0%, 46%, 100% { opacity: 1; } 48% { opacity: 0.45; } 50% { opacity: 0.95; } 53% { opacity: 0.6; } 56% { opacity: 1; } }
#lift-doors { position: fixed; inset: 0; z-index: 60; overflow: hidden; }
#lift-doors .door { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform .7s cubic-bezier(.6,.05,.35,1);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0.04) 1px 3px), linear-gradient(180deg, #c9c5d1, #8f8a9b); }
#lift-doors .door.l { left: 0; transform: translateX(-101%); border-right: 2px solid #4b4657; box-shadow: inset 0 0 0 1px rgba(40,35,50,0.6), inset -10px 0 18px -10px rgba(0,0,0,0.5); }
#lift-doors .door.r { right: 0; transform: translateX(101%); border-left: 2px solid #4b4657; box-shadow: inset 0 0 0 1px rgba(40,35,50,0.6), inset 10px 0 18px -10px rgba(0,0,0,0.5); }
#lift-doors.shut .door { transform: translateX(0); }
#lift-doors .seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, #ffd27a 12%, #fff2c9 50%, #ffd27a 88%, transparent);
  box-shadow: 0 0 14px 4px rgba(255,190,90,0.6), 0 0 50px 14px rgba(255,150,50,0.25); transition: opacity .25s, width .6s, margin-left .6s; }
#lift-doors .seam.on { opacity: 1; animation: liftFlicker 2.4s infinite; }
#lift-doors .seam.flood { opacity: 0; width: 100%; margin-left: -50%; transition: opacity .9s ease-out, width .6s cubic-bezier(.6,.05,.35,1), margin-left .6s cubic-bezier(.6,.05,.35,1); }
@media (prefers-reduced-motion: reduce) { .leak { animation: none; } }
/* round 122: behind the story panel, the title screen fades way down so the panel holds the focus */
#sheet.lift-dim { background: rgba(5,3,10,0.9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* round 123: while a voice reads a pop-up, its words wait dim and light up as they're said (a click shows them all) */
.reading .w { opacity: 0.32; transition: opacity .35s ease, text-shadow .6s ease; }
.reading .w.lit { opacity: 1; }
.lift.reading .lift-notice .w.lit { text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 0 10px rgba(255,210,122,0.0); }
.reading { cursor: default; }

/* round 124: the fight card as a duel on a computer: the monster on the left, you (your name, health, and
   picture) on the right, the two bars meeting at VS. Each bar's health sits by the VS and drains toward its fighter. */
#foe .you-name, #foe .foe-vs, #foe .you-hp, #foe .you-num, #you-pic { display: none; }
#foe .foe-bars .foe-hp { flex: 1; }
body:not(.touch) #foe { gap: 0; padding: 14px; max-width: none; min-width: 0; width: min(780px, calc(100vw - 40px)); align-items: stretch; }
body:not(.touch) #foe canvas { align-self: center; }
body:not(.touch) #foe #you-pic { display: block; width: 128px; height: 128px; border-radius: 18px; background: #233a33; flex: none; }
body:not(.touch) #foe .foe-info { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; min-width: 0; }
body:not(.touch) #foe .foe-top { gap: 10px; }
body:not(.touch) #foe .foe-letter { width: 40px; height: 40px; border-radius: 10px; font-size: 26px; }
body:not(.touch) #foe .foe-name, body:not(.touch) #foe .you-name { font-size: 26px; }
body:not(.touch) #foe .you-name { display: block; margin-left: auto; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
body:not(.touch) #foe .foe-bars { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 12px; }
body:not(.touch) #foe .foe-bars .foe-hp, body:not(.touch) #foe .you-hp { display: block; margin: 0; height: 22px; border-radius: 11px; overflow: hidden; }
body:not(.touch) #foe .foe-bars .foe-hp[hidden] { display: block; visibility: hidden; }   /* keep the layout when the monster's health is hidden */
body:not(.touch) #foe .foe-hp #foe-hpfill { margin-left: auto; }
body:not(.touch) #foe .foe-vs { display: block; font: 400 26px var(--display); color: var(--amber); text-shadow: 0 0 10px rgba(255,181,71,0.5); }
body:not(.touch) #foe .you-hp { background: #1f3a2c; box-shadow: inset 0 0 0 1px rgba(125,255,176,0.35); }
#you-hpfill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #39c27a, #7dffb0); transition: width .25s ease; }
body:not(.touch) #foe .you-hp.low #you-hpfill { background: linear-gradient(90deg, #ff9d3a, #ffd27a); animation: youLow 1s ease-in-out infinite; }
@keyframes youLow { 50% { filter: brightness(1.35); } }
body:not(.touch) #foe .foe-nums { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; min-height: 22px; }
body:not(.touch) #foe .foe-nums .foe-state { margin: 0; font-size: 18px; }
body:not(.touch) #foe .you-num { display: block; margin-left: auto; font: 700 16px var(--ui); color: #b9b2d6; }
@media (max-width: 1100px) { body:not(.touch) #foe { width: min(640px, calc(100vw - 40px)); } body:not(.touch) #foe canvas, body:not(.touch) #foe #you-pic { width: 96px; height: 96px; } }

/* round 125: locked title buttons (Challenges, Daily speed run) just say so; how to unlock them shows on hover,
   keyboard focus, or a tap */
.btn.locked[aria-disabled="true"], .title-actions .btn.locked[aria-disabled="true"] { cursor: help; opacity: 1; color: rgba(233,228,245,0.5); background: rgba(43,36,69,0.4); }   /* dimmed by color, not opacity, so the tip stays solid */
.btn.locked[data-tip] { position: relative; overflow: visible; }
.btn.locked[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  width: max-content; max-width: min(320px, 80vw); white-space: normal; text-align: center; text-transform: none; letter-spacing: 0;
  padding: 7px 12px; border-radius: 8px; font: 700 14px/1.3 var(--ui); color: #ffd27a; background: #17120c; border: 1px solid #5f5a6a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 5; }
.btn.locked[data-tip]:hover::after, .btn.locked[data-tip]:focus-visible::after, .btn.locked[data-tip].tip-on::after { opacity: 1; transform: translate(-50%, 0); }

/* round 126: the floor display's title, crisper: a tight bright core and a thin edge, with the soft glow pulled back */
.lift-display h2 { color: #ffd88a; -webkit-font-smoothing: antialiased; -webkit-text-stroke: 0.4px #ffe7b3;
  text-shadow: 0 0 1px rgba(255,220,150,0.9), 0 0 3px rgba(255,181,71,0.55), 0 0 14px rgba(255,140,40,0.28); }

/* round 127: your hero's line after a kill, in a speech bubble from your picture on the fight card */
#foe { overflow: visible; }
#foe .you-say { position: absolute; right: 18px; bottom: calc(100% + 14px); max-width: min(360px, 70vw); width: max-content;
  padding: 10px 14px; border-radius: 16px; background: #fffaf0; color: #1d1924; border: 2px solid #1d1924;
  font: 700 18px/1.3 var(--ui); box-shadow: 0 6px 16px rgba(0,0,0,0.45); animation: sayPop .35s cubic-bezier(.3,1.6,.5,1); }
#foe .you-say::after { content: ''; position: absolute; right: 56px; bottom: -12px; width: 18px; height: 18px; background: #fffaf0;
  border-right: 2px solid #1d1924; border-bottom: 2px solid #1d1924; transform: rotate(45deg) skew(8deg, 8deg); }
#foe .you-say[hidden] { display: none; }
@keyframes sayPop { from { transform: scale(0.6) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
body.touch #foe .you-say { right: auto; left: 0; bottom: auto; top: calc(100% + 12px); font-size: 14px; max-width: 70vw; }
body.touch #foe .you-say::after { right: auto; left: 24px; bottom: auto; top: -11px; transform: rotate(225deg) skew(8deg, 8deg); }

/* round 127: the trap card: the trap on the left, you on the right, what it did in the middle */
#trapcard { position: absolute; right: calc(12px + var(--safe-r, 0px)); bottom: 80px; z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: 0; padding: 14px; width: min(780px, calc(100vw - 40px));
  background: rgba(20,15,36,0.92); border: 1px solid rgba(255,140,90,0.45); border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,93,115,0.12) inset; }
#trapcard[hidden] { display: none !important; }
#trapcard.pop { animation: foePop .55s ease-out; }
#trapcard canvas { width: 128px; height: 128px; border-radius: 18px; background: #3a2a2a; flex: none; }
#trapcard #tc-you-pic { background: #233a33; }
#trapcard .tc-mid { flex: 1; min-width: 0; padding: 0 16px; display: flex; flex-direction: column; justify-content: center; }
#trapcard .tc-top { display: flex; align-items: center; gap: 10px; }
#trapcard .tc-name { font: 800 26px var(--ui); color: #ffb3a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trapcard .tc-you { margin-left: auto; font: 800 26px var(--ui); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
#trapcard .tc-effect { margin-top: 8px; text-align: center; font: 400 30px var(--display); color: var(--amber); text-shadow: 0 0 10px rgba(255,181,71,0.45); }
#trapcard .tc-effect.bad { color: #ff7d8e; text-shadow: 0 0 10px rgba(255,93,115,0.5); animation: tcShake .4s ease-in-out; }
#trapcard .tc-effect.good { color: #7dffb0; text-shadow: 0 0 10px rgba(125,255,176,0.5); }
@keyframes tcShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
#trapcard .tc-timer { margin: 8px auto 0; width: 70%; height: 10px; border-radius: 6px; background: #2b2445; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(169,159,209,0.35); }
#trapcard .tc-timer[hidden] { display: none; }
#tc-timerfill { display: block; height: 100%; background: linear-gradient(90deg, #a99fd1, #d8cfff); transition: width .3s linear; }
#trapcard .tc-hprow { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
#trapcard .tc-hp { flex: 1; height: 18px; border-radius: 10px; background: #1f3a2c; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(125,255,176,0.35); margin-left: 40%; }
#tc-hpfill { display: block; height: 100%; background: linear-gradient(90deg, #39c27a, #7dffb0); transition: width .25s ease; }
#trapcard .tc-hp.low #tc-hpfill { background: linear-gradient(90deg, #ff9d3a, #ffd27a); animation: youLow 1s ease-in-out infinite; }
#trapcard .tc-num { font: 700 16px var(--ui); color: #b9b2d6; white-space: nowrap; }
@media (max-width: 1100px) { #trapcard { width: min(640px, calc(100vw - 40px)); } #trapcard canvas { width: 96px; height: 96px; } }
body.touch #trapcard { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto !important; width: min(70vw, 420px); padding: 6px 10px 6px 6px; border-radius: 14px; }
body.touch #trapcard canvas { width: 44px; height: 44px; border-radius: 10px; }
body.touch #trapcard #tc-you-pic, body.touch #trapcard .tc-you, body.touch #trapcard .tc-hprow { display: none; }
body.touch #trapcard .tc-mid { padding: 0 10px; }
body.touch #trapcard .tc-name { font-size: 14px; }
body.touch #trapcard .tc-effect { font-size: 18px; margin-top: 2px; text-align: left; }
body.touch #trapcard .tc-timer { width: 100%; height: 6px; margin-top: 4px; }
/* round 127: a narrow computer window: the duel and trap cards shrink to fit */
@media (max-width: 760px) {
  body:not(.touch) #foe canvas, body:not(.touch) #foe #you-pic, body:not(.touch) #trapcard canvas { width: 72px; height: 72px; border-radius: 12px; }
  body:not(.touch) #foe .foe-name, body:not(.touch) #foe .you-name, body:not(.touch) #trapcard .tc-name, body:not(.touch) #trapcard .tc-you { font-size: 18px; }
  body:not(.touch) #foe .foe-letter { width: 28px; height: 28px; font-size: 18px; border-radius: 8px; }
  body:not(.touch) #foe .foe-vs { font-size: 18px; }
  body:not(.touch) #foe .foe-bars .foe-hp, body:not(.touch) #foe .you-hp { height: 14px; }
  #trapcard .tc-effect { font-size: 22px; }
  #trapcard .tc-mid, body:not(.touch) #foe .foe-info { padding: 0 10px; }
  #foe .you-say { font-size: 15px; }
}

/* round 130: the amber floor display over the elevator doors, rolling down to the new floor */
#lift-doors .lift-floor { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 3; transform: translate(-50%, -14px); opacity: 0;
  transition: opacity .3s, transform .3s; display: flex; align-items: center; gap: 14px; padding: 10px 26px; border-radius: 12px;
  background: linear-gradient(180deg, #0d0a08, #1a130c); border: 3px solid #b9b4c4; box-shadow: inset 0 3px 10px rgba(0,0,0,0.9), 0 8px 20px rgba(0,0,0,0.55); }
#lift-doors .lift-floor.on { opacity: 1; transform: translate(-50%, 0); }
#lift-doors .lift-floor .arrow { color: #ffb547; font-size: 30px; text-shadow: 0 0 8px rgba(255,181,71,0.9); animation: liftBob 1s ease-in-out infinite; }
@keyframes liftBob { 50% { transform: translateY(4px); opacity: 0.6; } }
#lift-doors .lift-floor .win { position: relative; width: 74px; height: 62px; overflow: hidden; }
#lift-doors .lift-floor .num { position: absolute; inset: 0; display: grid; place-items: center; font: 400 54px/1 var(--display); color: #ffd88a;
  text-shadow: 0 0 2px rgba(255,220,150,0.9), 0 0 10px rgba(255,160,60,0.6); transition: transform .45s cubic-bezier(.5,0,.3,1); }
#lift-doors .lift-floor .num.next { transform: translateY(100%); }
#lift-doors .lift-floor.rolled .num.cur { transform: translateY(-100%); }
#lift-doors .lift-floor.rolled .num.next { transform: translateY(0); }
body.touch #lift-doors .lift-floor { padding: 6px 16px; gap: 10px; }
body.touch #lift-doors .lift-floor .win { width: 52px; height: 44px; }
body.touch #lift-doors .lift-floor .num { font-size: 38px; }

/* round 131: the fight and trap cards move to the top right when they'd cover the room you're in */
body:not(.touch) #foe.at-top, body:not(.touch) #trapcard.at-top { top: 16px; bottom: auto !important; }
body:not(.touch) #foe.at-top .you-say { bottom: auto; top: calc(100% + 14px); }
body:not(.touch) #foe.at-top .you-say::after { bottom: auto; top: -11px; transform: rotate(225deg) skew(8deg, 8deg); }

/* round 131: the title screen's buttons all as wide as the widest (ui.js sizeTitleButtons sets the width) */
.title-actions > .btn { max-width: 100%; }

/* round 131: the pause menu's buttons in a tidy grid, all the same size */
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-grid .btn { width: 100%; margin: 0; justify-content: center; text-align: center; min-height: 48px; }
@media (max-width: 380px) { .menu-grid { grid-template-columns: 1fr; } }
.menu-grid #m-resume { grid-column: 1 / -1; }

/* Sound and Music: a row of music choices for each band of floors (round 159) */
.music-band { margin: 4px 0 12px; }
.music-band .band-name { font: 800 15px var(--ui); color: inherit; margin-bottom: 6px; }
.music-band .band-name .muted { font-weight: 700; margin-left: 6px; }

/* Title screen: Normal / Hard (round 166) */
.difficulty { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.difficulty .hero-label { margin: 0 4px 0 0; }
.difficulty .btn { min-width: 96px; }
.hero-tag.hard-tag { background: #8b2a2a; color: #fff; }

/* ---------- round 166: the title and win screens over Bish's background (the building in the wasteland) ---------- */
.screen.title-screen, .screen.win-screen {
  background: linear-gradient(90deg, rgba(8,6,14,0.88) 0%, rgba(8,6,14,0.72) 34%, rgba(8,6,14,0.18) 62%, rgba(8,6,14,0) 80%),
    url(../assets/title_bg.jpg) 72% center / cover no-repeat, #0b0814;
}
.hd-logo-img { margin: 4px 0 6px; line-height: 0; }
.hd-logo-img img { width: min(360px, 76vw); height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6)); }
/* wide screens: everything moves into the open sky and ground on the left */
@media (min-width: 900px) {
  .screen.title-screen, .screen.win-screen { place-items: start start; }
  .screen.title-screen > .title-wrap, .screen.win-screen > .title-wrap { margin-left: clamp(24px, 6vw, 110px); text-align: left; max-width: 560px; }
  .screen.title-screen .title-actions { align-items: flex-start; }
  .screen.title-screen .hero-pick, .screen.title-screen .hero-info { text-align: left; }
  .screen.title-screen .difficulty, .screen.title-screen .btnrow, .screen.win-screen .btnrow { justify-content: flex-start; }
  .screen.win-screen .panel { margin: 0 !important; }
}
/* phones and narrow windows: the building sits behind a darker veil, everything centered */
@media (max-width: 899px) {
  .screen.title-screen, .screen.win-screen {
    background: linear-gradient(rgba(8,6,14,0.78), rgba(8,6,14,0.9)), url(../assets/title_bg.jpg) 70% center / cover no-repeat, #0b0814;
  }
}
/* the win screen: your hero and the Idol side by side */
.win-pics { display: flex; align-items: flex-end; gap: 18px; margin: 4px 0 10px; }
.win-pics canvas { width: 120px; height: 120px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); }
.win-pics .idol { width: 96px; height: 96px; }
@media (max-width: 899px) { .win-pics { justify-content: center; } }
.win-stats { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; text-align: left; font-size: 14.5px; margin: 0 0 12px; }
.win-stats dt { color: var(--text-dim); }
.win-stats dd { margin: 0; font-weight: 700; }

/* ---------- round 168: the title menu in two columns, a bigger logo, and menu color themes ---------- */
/* themes (menu_theme in Settings): classic = the old amber and lavender; rust, concrete, and ember = grays and the logo's red */
:root { --m-main-bg: var(--amber); --m-main-fg: var(--ink); --m-alt-bg: rgba(169,159,209,0.14); --m-alt-fg: var(--text); --m-accent: var(--amber);
  --m-accent-soft: rgba(255,181,71,0.14); --m-dim: var(--text-dim); --m-border: rgba(169,159,209,0.22); --m-card: rgba(20,15,36,0.55); --m-input: rgba(20,15,36,0.8); }
:root[data-menu-theme="rust"] { --m-main-bg: #a83a2c; --m-main-fg: #fff1ea; --m-alt-bg: rgba(46,44,46,0.78); --m-alt-fg: #ece6e2; --m-accent: #d0533f;
  --m-accent-soft: rgba(208,83,63,0.18); --m-dim: #b9b1ad; --m-border: rgba(255,255,255,0.14); --m-card: rgba(28,26,28,0.72); --m-input: rgba(22,20,22,0.85); }
:root[data-menu-theme="concrete"] { --m-main-bg: #d9d3cb; --m-main-fg: #2a2421; --m-alt-bg: rgba(58,56,58,0.8); --m-alt-fg: #ece6e2; --m-accent: #c4473a;
  --m-accent-soft: rgba(196,71,58,0.2); --m-dim: #bdb6b1; --m-border: rgba(255,255,255,0.16); --m-card: rgba(34,32,34,0.75); --m-input: rgba(26,24,26,0.85); }
:root[data-menu-theme="ember"] { --m-main-bg: linear-gradient(180deg, #c04a35, #7e2a20); --m-main-fg: #fff1ea; --m-alt-bg: rgba(20,18,18,0.82); --m-alt-fg: #efe7e3;
  --m-accent: #e0634a; --m-accent-soft: rgba(224,99,74,0.16); --m-dim: #b3a8a3; --m-border: rgba(224,99,74,0.35); --m-card: rgba(18,16,16,0.78); --m-input: rgba(14,12,12,0.88); }
.screen.title-screen .btn, .screen.win-screen .btn { background: var(--m-main-bg); color: var(--m-main-fg); }
.screen.title-screen .btn.alt, .screen.win-screen .btn.alt { background: var(--m-alt-bg); color: var(--m-alt-fg); box-shadow: 0 0 0 1px var(--m-border) inset; }
.screen.title-screen .hero-card { background: var(--m-card); border-color: var(--m-border); }
.screen.title-screen .hero-card:hover { border-color: var(--m-accent); }
.screen.title-screen .hero-card.on { border-color: var(--m-accent); background: var(--m-accent-soft); box-shadow: 0 0 0 1px var(--m-accent) inset; }
.screen.title-screen .hero-label, .screen.title-screen .hero-info, .screen.title-screen .name-row, .screen.title-screen .hd-tagline { color: var(--m-dim); }
.screen.title-screen .hero-info .lock { color: var(--m-accent); }
.screen.title-screen .name-row input { background: var(--m-input); border-color: var(--m-border); }
.screen.title-screen button:focus-visible, .screen.title-screen input:focus-visible { outline-color: var(--m-accent); }
/* the bigger logo, and everything else lined up under the hero picker */
.screen.title-screen .hd-logo-img img { width: clamp(380px, calc((100vh - var(--title-rest, 690px)) * 1.43), 600px); max-width: 92vw; }
.screen.title-screen .title-wrap { padding-top: 8px; padding-bottom: 8px; }
.screen.title-screen .hd-logo-img { margin: 0 0 2px; }
.screen.title-screen .hd-tagline { margin: 0 0 6px; }
.screen.title-screen .name-row { margin-bottom: 2px; }
.screen.title-screen .title-actions { gap: 7px; }
.screen.title-screen .footer { margin-top: 10px; font-size: 13px; }
.screen.title-screen .hero-info { min-height: 2.8em; margin-top: 6px; }
.title-menu { width: min(600px, 92vw); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.title-menu .btn, #t-continue { min-width: 0 !important; width: 100%; font-size: 15px; padding: 7px 12px; min-height: 38px; }
.title-menu .btn.big { font-size: 17px; }
.title-menu .menu-col { display: flex; flex-direction: column; gap: 7px; }
.title-menu .btn small { display: block; font-size: 11.5px; font-weight: 700; opacity: 0.7; letter-spacing: 0.02em; text-transform: none; }
.title-menu .difficulty { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; align-items: center; }
.title-menu .difficulty .btn { min-width: 0; padding: 8px 6px; }
.title-menu .difficulty .hero-label { margin: 0 2px 0 0; font-size: 13px; }
.sound-link { background: none; border: 0; color: var(--m-dim); text-decoration: underline; font-size: 14px; padding: 2px 0; }
.sound-link:hover { color: var(--m-alt-fg); }
@media (min-width: 900px) {
  .screen.title-screen .title-wrap { max-width: none; }
  .screen.title-screen .title-actions { align-items: flex-start; }
}
@media (max-width: 520px) { .title-menu .difficulty .hero-label { display: none; } .title-menu .difficulty { grid-template-columns: 1fr 1fr; } }

.screen.title-screen .hero-stats { color: var(--m-accent); }
.title-menu > .btn { align-self: stretch; }

/* ---------- round 169: name + Hard Mode on one row, the hero description pops up, the tagline tucked under DOWN ---------- */
.screen.title-screen .logo-block { position: relative; display: inline-block; }
.screen.title-screen .logo-block .hd-logo-img { margin: 0; }
.screen.title-screen .logo-block .hd-tagline { position: absolute; left: 0; bottom: 2%; max-width: 60%; margin: 0; line-height: 1.15; text-align: left; }
.pick-row { width: min(600px, 92vw); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pick-row .name-row { margin: 0; }
.hard-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--m-dim); cursor: pointer; user-select: none; }
.hard-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hard-toggle .knob { width: 34px; height: 20px; border-radius: 10px; background: var(--m-alt-bg); box-shadow: 0 0 0 1px var(--m-border) inset; position: relative; transition: background 0.15s; }
.hard-toggle .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--m-alt-fg); transition: transform 0.15s; }
.hard-toggle.on .knob { background: var(--m-accent); }
.hard-toggle.on .knob::after { transform: translateX(14px); }
.hard-toggle.on { color: var(--m-alt-fg); }
.hard-toggle.locked { opacity: 0.6; }
.hard-toggle input:focus-visible + .knob { outline: 3px solid var(--m-accent); outline-offset: 2px; }
.screen.title-screen .hero-pick { position: relative; }
.screen.title-screen .hero-info { min-height: 0; }
.hero-pop { position: absolute; z-index: 5; padding: 10px 12px; border-radius: 10px; background: rgba(16,14,16,0.96); color: var(--m-dim);
  box-shadow: 0 0 0 1px var(--m-border) inset, 0 10px 24px rgba(0,0,0,0.5); font-size: 14.5px; line-height: 1.35; text-align: left; pointer-events: none; }
.hero-pop b { color: var(--m-alt-fg); }
.hero-pop .hero-stats { color: var(--m-accent); margin-top: 4px; }
.title-foot { width: min(600px, 92vw); display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 6px; }
.title-foot .footer { margin: 0 !important; text-align: left; font-size: 13px; }
.title-foot .sound-link { flex: none; }
.title-menu #t-continue.locked { opacity: 0.5; }
@media (max-width: 899px) { .title-foot { flex-direction: column; align-items: center; } .title-foot .footer { text-align: center; } }
.title-foot .footer, .title-foot .footer .link-btn { color: var(--m-dim); }
.title-foot .footer { opacity: 0.8; }

/* ---------- round 170: the whole title column 10% bigger on wide screens ---------- */
@media (min-width: 900px) {
  /* (round 171: 15% bigger; the logo is sized for the taller back of the card, so it never changes when the card flips) */
  .screen.title-screen .title-actions { zoom: 1.15; }
  .screen.title-screen .hd-logo-img img { width: clamp(380px, calc((100vh - var(--title-rest, 655px)) * 1.43), 690px); }
  .screen.title-screen .logo-block .hd-tagline { font-size: 25px; }
}
@media (min-width: 900px) {
  /* (round 170) the picture slides a little to the right so the power pole stands clear of the bigger column */
  .screen.title-screen, .screen.win-screen { background-position: 0 0, 64% center; }
}

/* ---------- round 171: the title menu flips over into Choose Your Hero ---------- */
.flip { perspective: 1600px; width: min(600px, 92vw); }
.flip-card { display: grid; transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1); transform-style: preserve-3d; }
.flip-card.over { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; align-self: start; display: flex; flex-direction: column; gap: 7px; }
.flip-back { transform: rotateY(180deg); }
.flip-card:not(.over) .flip-back, .flip-card.over .flip-front { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .flip-card { transition: none; } }
.back-title { margin: 0 0 2px; font: 400 30px var(--display); color: var(--m-alt-fg); letter-spacing: 0.02em; text-align: left; }
.flip-back .pick-row { margin-bottom: -1px; }   /* Hard Mode sits right on top of the hero cards */
.flip-back .hero-pick { width: 100%; margin: 0; }
.screen.title-screen .flip-back .hero-info { margin-top: 4px; }
.go-row { display: grid; grid-template-columns: 1fr 2fr; gap: 7px; margin-top: 2px; }
.go-row .btn { min-width: 0 !important; width: 100%; min-height: 44px; }
.screen.title-screen .go-row .btn.big { font-size: 18px; }

/* ---------- round 172: the tagline back under the logo (below the arrow), a little more room above the card ---------- */
.screen.title-screen .logo-block .hd-tagline { position: static; max-width: none; margin: 6px 0 0; line-height: 1.2; }
.screen.title-screen .flip { margin-top: 18px; }
.title-foot { justify-content: flex-start; }
/* the menu side of the card sits in the middle of the card's height (the hero side is taller), so it moves down a bit */
/* (round 173) the menu side starts at the top again, under its own Choose An Option heading */
.back-title { font-size: 27px; }

.title-foot .foot-link { text-decoration: underline; text-underline-offset: 2px; }
.title-foot .foot-link:hover { color: var(--m-alt-fg); }
/* Round 173 (Bish): the tagline is yellow, the same as an earned perk (.hero-info .mastery.got) */
.screen.title-screen .logo-block .hd-tagline { color: var(--amber); }
/* Round 174 (Bish): the flip pivots from the card's top edge, so the near side never swings up into the tagline */
.flip { perspective-origin: 50% 0; }

/* ---------- Round 174 (Bish picked option A): dark panels to match the title screen ----------
   The panels, pop-ups, and floor banner swap the cream parchment for charcoal, with rust buttons and
   uppercase lettering like the title menu. Inside them, --ink is now the light text color and --parchment
   the dark panel color, so most rules carry over; the rest are set below. The old look is in
   archive/r174_before_2026-11-11/style.css. */
.panel, .toast, #banner { --ink: #ece6e2; --ink-soft: #b9b1ad; --parchment: #1f1c1f; --rust: #a83a2c; --rust-hi: #d0533f; --line: rgba(255,255,255,0.13); --tint: rgba(255,255,255,0.06); --dark-ink: #231c38; }
.panel { background: linear-gradient(180deg, #282528, #1c1a1c); border-radius: 12px;
  box-shadow: 0 22px 70px rgba(0,0,0,0.75), inset 0 0 0 1px var(--line); }
.toast, #banner { background: linear-gradient(180deg, #282528, #1c1a1c); box-shadow: 0 10px 34px rgba(0,0,0,0.6), inset 0 0 0 1px var(--line); }
.overlay { background: rgba(10,8,8,0.68); }
#hud { background: linear-gradient(to top, rgba(20,18,20,0.96), rgba(20,18,20,0.78)); border-top: 1px solid rgba(208,83,63,0.35); }
.close:hover { background: var(--tint); }
/* buttons: rust like New game; the quieter ones dark with a thin edge, like the rest of the title menu */
.panel .btn, .toast-ok, .tabs button.on, .items.trade .tbtns .btn { background: var(--rust); color: #fff1ea; }
.panel .btn.alt, .tabs button, .items.trade .tbtns .btn.alt { background: var(--tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.panel .btn, .tabs button { text-transform: uppercase; letter-spacing: 0.07em; font-size: 15px; }
.panel .btn.big { font-size: 17px; }
.panel .btn.danger { background: var(--rose); color: #2a0a12; }
.panel .btn.danger-text { color: #ff8a96; }
.panel .btn.locked, .panel .btn:disabled { opacity: 0.45; }
#sheet button:focus-visible, #sheet [tabindex]:focus-visible, #sheet a:focus-visible { outline-color: var(--amber); }
/* the pack and other lists */
.items li button:hover, .items li button.sel { background: rgba(208,83,63,0.14); }
#sheet ul.items:not(.trade) > li > button:focus-visible { background: rgba(208,83,63,0.18); }
.items .key { background: var(--rust); color: #fff1ea; }
.items canvas, .detail canvas, .toast-pic { background: rgba(236,230,226,0.82); border-radius: 7px; }
.items canvas { padding: 2px; }
.detail canvas, .toast-pic { border-radius: 12px; }
.what-tag { color: #e0a35a; }
.items.trade li.trow:nth-child(odd) { background: var(--tint); }
/* lines, tints, and inputs that were dark-on-cream */
.happened, pre.license, .keys kbd, .ach .medal, .pips i, .chal { background: var(--tint); }
.scores td, .scores th, .ach, .shop-row, .reset-row, .hist .hm.gap::before { border-color: var(--line); }
.chal, .chal .tick { border-color: rgba(255,255,255,0.22); }
.hist .hm { background: #2c292c; }
.hist .hm:not([class*="k-"]) { background: transparent; }
.panel input, .panel select, .panel textarea { background: #141214; color: var(--ink); border-color: rgba(255,255,255,0.2); }
/* amber chips keep dark text */
.ach.got .medal, .look-switch button.on, #sheet .card-pick:hover, #sheet .card-pick:focus-visible { color: var(--dark-ink); }
.tnote { color: var(--ink); }

/* Round 174 (Bish): the dungeon's background goes from purple-black to the title screen's warm near-black
   (render.js PAL has the map colors), and the chips that float over the map follow it */
:root { --void: #0f0d0e; --bg: #151314; }
#dirpad button { background: rgba(24,21,22,0.75); }
#foe { background: rgba(24,21,22,0.9); border-color: rgba(255,255,255,0.14); }
#trapcard { background: rgba(24,21,22,0.92); }
#hud-tip { background: rgba(24,21,22,0.96); color: #ece6e2; }
/* the status bar, touch controls, and fight card lose their purple too (round 174) */
#hud-hero { background: radial-gradient(circle at 50% 40%, rgba(92,84,80,0.9), rgba(40,36,36,0.9)); border-color: rgba(255,255,255,0.18); }
.pslot { background: rgba(40,36,36,0.85); border-color: rgba(255,255,255,0.14); }
.hud-btn { background: rgba(58,52,50,0.6); border-color: rgba(255,255,255,0.16); }
#dpad button, .act { background: rgba(40,36,36,0.78); border-color: rgba(255,255,255,0.18); }
#foe canvas { background: #3a2522; }   /* the monster on a dark rust, you on dark green */
#trapcard .tc-timer { background: #2c292c; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
body:not(.touch) #foe .you-num { color: #b9b1ad; }

/* ---------- Round 177 (Bish): the win screen ----------
   Congratulations! on top, then two columns: Your Run on the left, your hero and the Idol (named), the narrator's
   lines, and the high scores on the right. Phones and narrow windows stack it all in one column. */
.screen.win-screen { place-items: start center !important; overflow-y: auto; }
.screen.win-screen {
  background: linear-gradient(90deg, rgba(10,8,8,0.9) 0%, rgba(10,8,8,0.8) 45%, rgba(10,8,8,0.55) 75%, rgba(10,8,8,0.4) 100%),
    url(../assets/title_bg.jpg) 72% center / cover no-repeat, #0f0d0e;
}
.win-wrap { width: min(1180px, calc(100vw - 48px)); margin: clamp(18px, 4vh, 48px) auto 32px; color: var(--m-alt-fg); font-family: var(--ui); text-align: left; }
.win-congrats { margin: 0 0 14px; font: 400 clamp(44px, 6vw, 76px)/1 var(--display); color: var(--m-accent); letter-spacing: 0.01em;
  text-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 30px rgba(208,83,63,0.25); }
.win-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.win-run-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.win-run-head h2 { margin: 0; font: 400 30px/1.1 var(--display); color: var(--m-alt-fg); }
.win-run-head .bank-note { margin: 0; text-align: right; font-size: 16px; }
.screen.win-screen .panel { width: auto; max-width: none; max-height: none; overflow: visible; margin: 0 !important; }   /* the page scrolls, not the panels */
.win-run .win-stats { font-size: 16px; gap: 5px 18px; }
.win-run .win-stats dd { color: var(--ink); }
.win-run .win-stats dt { color: var(--ink-soft); }
.win-run h3:first-child, .win-scores h3:first-child { margin-top: 0; }
/* the right side */
.win-side { display: flex; flex-direction: column; gap: 12px; }
.win-pics { display: flex; align-items: flex-end; justify-content: center; gap: 34px; margin: 0; }
.win-pics figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.win-pics canvas { width: 190px; height: 190px; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.7)); }
.win-pics .idol { width: 150px; height: 150px; }
.win-pics figcaption { font: 400 24px/1.1 var(--display); color: var(--m-alt-fg); text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,0.7); }
.win-pics figure + figure figcaption { color: var(--amber); }
.win-say { margin: 0; font-size: 19px; line-height: 1.45; color: var(--m-alt-fg); text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.win-hidden-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.win-scores .btnrow { justify-content: flex-start; margin-top: 12px; }
/* phones and narrow windows: one column; the hero and Idol first, then the narrator, your run, and the scores */
@media (max-width: 899px) {
  .win-wrap { width: calc(100vw - 32px); margin-top: 18px; }
  .win-congrats { text-align: center; font-size: clamp(36px, 10vw, 56px); margin-bottom: 10px; }
  .win-cols { grid-template-columns: 1fr; gap: 16px; }
  .win-side { display: contents; }
  .win-pics { order: 1; gap: 22px; }
  .win-say { order: 2; font-size: 17px; text-align: center; }
  .win-main { order: 3; }
  .win-scores { order: 4; }
  .win-pics canvas { width: 130px; height: 130px; }
  .win-pics .idol { width: 104px; height: 104px; }
  .win-pics figcaption { font-size: 19px; }
  .win-run-head { flex-wrap: wrap; }
  .win-run-head .bank-note { font-size: 14.5px; }
  .win-scores .btnrow { justify-content: center; }
}
/* phones held sideways (short screens): a smaller heading and pictures, so the story shows without scrolling far */
@media (max-height: 500px) {
  .win-wrap { margin-top: 10px; }
  .win-congrats { font-size: 38px; margin-bottom: 6px; }
  .win-pics canvas { width: 96px; height: 96px; }
  .win-pics .idol { width: 78px; height: 78px; }
  .win-pics figcaption { font-size: 17px; }
  .win-say { font-size: 15.5px; }
}
/* Round 178 (Bish): on wider screens the win screen sits on the left like the title screen, clear of the building */
@media (min-width: 900px) {
  .screen.win-screen { place-items: start start !important;
    background: linear-gradient(90deg, rgba(10,8,8,0.9) 0%, rgba(10,8,8,0.8) 40%, rgba(10,8,8,0.35) 62%, rgba(10,8,8,0) 80%),
      url(../assets/title_bg.jpg) right center / cover no-repeat, #0f0d0e; }
  .win-wrap { margin-left: clamp(24px, 5vw, 110px); margin-right: 0; width: clamp(780px, 60vw, 1000px); }   /* narrower windows give up a bit of the building */
  .win-cols { gap: 22px; }
}
@media (min-width: 900px) and (max-width: 1250px) {
  .win-pics canvas { width: 150px; height: 150px; }
  .win-pics .idol { width: 120px; height: 120px; }
  .win-pics figcaption { font-size: 20px; }
  .win-say { font-size: 17px; }
}
.win-run-head h2 { white-space: nowrap; }
/* Round 179 (Bish): the building shows through on the left like the title screen. The same shading as the title
   screen, and the win panels are see-through like the title menu's buttons (--m-card) instead of solid. */
@media (min-width: 900px) {
  .screen.win-screen {
    background: linear-gradient(90deg, rgba(8,6,14,0.88) 0%, rgba(8,6,14,0.72) 34%, rgba(8,6,14,0.18) 62%, rgba(8,6,14,0) 80%),
      url(../assets/title_bg.jpg) right center / cover no-repeat, #0f0d0e; }
}
.screen.win-screen .panel { background: linear-gradient(180deg, rgba(40,37,40,0.78), rgba(28,26,28,0.78)); }
/* round 180: Congratulations! is sized in ui.js (fitCongrats) to end at the Your Run box's edge; no wrapping */
.win-congrats { white-space: nowrap; }
.win-congrats span { display: inline-block; }

/* ---------- Round 184: the Player Code pop-up, and the play stats switch ---------- */
.title-foot .foot-sep { margin: 0 8px; opacity: 0.7; }
.title-foot .footer .link-btn.foot-link { text-decoration: underline; text-underline-offset: 2px; font: inherit; }
.pc p { margin: 0 0 10px; line-height: 1.45; }
.pc h3 { margin: 18px 0 6px; }
.pc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0; }
.pc-label { min-width: 200px; color: var(--ink-soft); }
.pc-code { font: 400 26px/1 var(--display); letter-spacing: 0.08em; color: var(--amber); min-width: 150px; }
.pc-row input { font: 700 18px var(--ui); letter-spacing: 0.08em; text-transform: uppercase; width: 150px; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.2); background: #141214; color: var(--ink); }
.pc-row .btn { min-width: 0; }
.pc-status { margin-top: -4px !important; font-size: 14px; }
.pc-friends { list-style: none; margin: 6px 0 0; padding: 0; }
.pc-friends li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.pc .link-btn, .share-row .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.pc-msg { min-height: 1.3em; margin: 10px 0 0 !important; font-weight: 700; color: var(--amber); }
.pc-msg.bad { color: #ff8a96; }
.pc-fresh { margin-top: 14px !important; font-size: 14px; }
@media (max-width: 600px) { .pc-label { min-width: 0; width: 100%; } .pc-code { font-size: 22px; } }
.share-row { margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13.5px; color: var(--ink-soft); opacity: 0.85; }
.share-row label { cursor: pointer; }
.share-row input { vertical-align: -2px; margin-right: 4px; }
.share-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; }