/* RageQuit page styles: menus and screens, the HUD, touch controls and effects. */
#view.hitstop {
  transform: scale(1.035);
}
:root {
  --bg: #0b0c10;
  --fg: #f6ead8;
  --muted: #a8968a;
  --accent: #ff4d1f;
  --gold: #ffd34d;
  --bad: #ff3030;
  --cash: #7dff9a;
  --panel: rgba(16, 12, 14, 0.8);
  --edge: #3a1c14;
  --hp: #ef4444;
  --st: #4ade80;
  --buff: #fff;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', system-ui, sans-serif;
  letter-spacing: 0.03em;
}
#view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}
body:not(.playing)
  :is(#hud, #map, #bars, #rightcol, #target, #boss, #cross, #arrows, #pauseBtn, #runlabel, #tutor, #autoBadge) {
  display: none;
}

/* top HUD */
#hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 0;
  pointer-events: none;
  font-size: clamp(14px, 3vw, 21px);
}
#hud .box {
  background: var(--panel);
  padding: 5px 12px;
  border: 2px solid var(--edge);
  border-radius: 6px;
  white-space: nowrap;
}
#hud .mid {
  text-align: center;
  min-width: 220px;
}
#money {
  color: var(--cash);
}
#money.neg {
  color: var(--bad);
}
#hud .wanted {
  text-align: center;
  min-width: 120px;
}
#stars {
  font-size: 1.15em;
  letter-spacing: 0.08em;
  color: #5a5a66;
}
#stars b {
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold);
}
#wantedBox.hot {
  border-color: var(--bad);
  animation: copsbox 0.5s infinite;
}
#wantedBox.hot #stars b {
  animation: copsstar 0.5s infinite;
}
@keyframes copsbox {
  0%,
  49% {
    box-shadow: 0 0 18px #ff3030;
    border-color: #ff3030;
  }
  50%,
  100% {
    box-shadow: 0 0 18px #3a7bff;
    border-color: #3a7bff;
  }
}
@keyframes copsstar {
  0%,
  49% {
    color: #ff4040;
    text-shadow: 0 0 12px #ff3030;
  }
  50%,
  100% {
    color: #5a8cff;
    text-shadow: 0 0 12px #3a7bff;
  }
}
#copslights {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
body.wanted #copslights {
  opacity: 1;
  animation: copslights 0.5s infinite;
}
@keyframes copslights {
  0%,
  49% {
    box-shadow: inset 0 0 90px 14px rgba(255, 40, 40, 0.45);
  }
  50%,
  100% {
    box-shadow: inset 0 0 90px 14px rgba(50, 90, 255, 0.45);
  }
}
#wantedHint {
  font-size: 0.62em;
  color: var(--muted);
}
#held {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 56%;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 16px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
  opacity: 0;
  transition: opacity 0.15s;
}
#held.on {
  opacity: 1;
}
#errbox {
  position: fixed;
  z-index: 8;
  left: 10px;
  bottom: 10px;
  max-width: 60vw;
  font-family: monospace;
  font-size: 11px;
  color: #fff;
  background: rgba(160, 20, 20, 0.9);
  padding: 6px 8px;
  border-radius: 4px;
  display: none;
  pointer-events: none;
}
#errbox.on {
  display: block;
}
#where {
  font-size: 0.8em;
  color: var(--gold);
}
#objective.done {
  color: var(--st);
  animation: okglow 0.5s infinite alternate;
}
#event {
  font-size: 0.72em;
  color: #ffd34d;
}
#event:empty {
  display: none;
}
#snitch {
  font-size: 0.75em;
  color: var(--bad);
}
#snitch.soon {
  animation: blink 0.4s infinite alternate;
}
@keyframes okglow {
  to {
    text-shadow: 0 0 12px #40ff70;
  }
}
#hud .box:has(#objective.done) {
  border-color: #40ff70;
  box-shadow: 0 0 16px #40ff70;
}
#pauseBtn {
  position: fixed;
  z-index: 6;
  left: 10px;
  top: max(10px, env(safe-area-inset-top));
  font: inherit;
  font-size: 16px;
  color: var(--fg);
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 6px 10px;
  cursor: pointer;
}

/* weapon stats (top right) + buffs under it */
#rightcol {
  position: fixed;
  z-index: 3;
  right: 12px;
  top: max(10px, env(safe-area-inset-top));
  width: 236px;
  pointer-events: none;
  display: grid;
  gap: 6px;
}
#stats {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 6px;
  padding: 6px 10px;
}
#stats i {
  font-style: normal;
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(2px 2px 0 #000);
}
#stats b {
  display: block;
  color: var(--gold);
  font-size: 17px;
}
#stats span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
#stats span.wd {
  color: var(--fg);
  font-size: 20px;
}
#stats span.wd em {
  font-style: normal;
  color: #ff6a3a;
}
#stats #wCalc {
  color: #9ab0c0;
  font-size: 11px;
}
#stats.flash {
  animation: statflash 0.5s;
}
@keyframes statflash {
  0% {
    box-shadow: 0 0 0 0 var(--gold);
  }
  50% {
    box-shadow: 0 0 18px 4px var(--gold);
    border-color: var(--gold);
  }
}
#buffs {
  display: grid;
  gap: 6px;
}
.chip {
  background: var(--panel);
  border: 2px solid var(--c);
  padding: 4px 8px;
  font-size: 14px;
  color: var(--c);
  box-shadow: 0 0 12px var(--c);
}
.chip i {
  display: block;
  height: 4px;
  margin-top: 3px;
  background: var(--c);
}
#buffglow {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: inset 0 0 60px 10px var(--buff);
  animation: bglow 0.5s infinite alternate;
}
#buffglow.on {
  opacity: 0.7;
}
@keyframes bglow {
  to {
    box-shadow: inset 0 0 90px 22px var(--buff);
  }
}
#speedlines {
  position: fixed;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.18) 0 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 70%);
  mask: radial-gradient(circle, transparent 38%, #000 70%);
  animation: spin 1.2s linear infinite;
}
#speedlines.on {
  opacity: 1;
}
#speedlines.run {
  opacity: 0.35;
}
#runlabel {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 22px;
  color: #40c8ff;
  text-shadow:
    0 0 14px #40c8ff,
    2px 2px 0 #000;
  opacity: 0;
  transition: opacity 0.15s;
  letter-spacing: 0.08em;
}
#runlabel.on {
  opacity: 1;
  animation: runpulse 0.4s infinite alternate;
}
@keyframes runpulse {
  to {
    transform: translateX(-50%) scale(1.08);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#slowmo {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(ellipse at center, rgba(90, 120, 255, 0.08), rgba(40, 60, 160, 0.45));
  mix-blend-mode: multiply;
}
#slowmo.on {
  opacity: 1;
}
#buffpop {
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  top: 24%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  font-size: clamp(34px, 8vw, 72px);
  color: var(--buff);
  text-shadow:
    0 0 20px var(--buff),
    4px 4px 0 #000;
}
#buffpop small {
  display: block;
  font-size: 0.4em;
  color: var(--fg);
}
#buffpop.on {
  animation: bpop 1.4s ease-out forwards;
}
@keyframes bpop {
  0% {
    opacity: 0;
    transform: scale(2.4) rotate(-6deg);
  }
  15% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1) translateY(-30px);
  }
}

/* building map + floor minimap */
#map {
  position: fixed;
  z-index: 3;
  left: 10px;
  top: 54px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 8px;
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 6px;
  pointer-events: none;
  transform-origin: top left;
}
body.floorclear #map {
  border-color: #40ff70;
  box-shadow: 0 0 18px #40ff70;
}
#skyline {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}
.bld {
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  width: 14px;
}
.bld .fl {
  height: 5px;
  background: #2a2a30;
}
.bld .fl.done {
  background: #4a8a4a;
}
.bld .fl.cur {
  background: var(--gold);
  animation: blink 0.6s infinite alternate;
}
.bld .fl.boss {
  box-shadow: inset 0 0 0 1px var(--bad);
}
.bld.locked {
  opacity: 0.45;
}
@keyframes blink {
  to {
    background: var(--accent);
  }
}
#minimap {
  width: 150px;
  height: 110px;
  image-rendering: pixelated;
  border: 1px solid #000;
  background: #000;
}
@media (max-width: 640px) {
  #map {
    transform: scale(0.72);
  }
}

/* bars */
#bars {
  position: fixed;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(42vw, 360px);
  pointer-events: none;
  display: grid;
  gap: 4px;
}
.bar {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.track {
  height: 12px;
  background: rgba(0, 0, 0, 0.65);
  border: 2px solid #000;
}
#hpfill,
#stfill {
  height: 100%;
  width: 100%;
  transition: width 0.12s;
}
#hpfill {
  background: var(--hp);
}
#stfill {
  background: var(--st);
}
#stbar.tired #stfill {
  background: #a8a8a8;
  animation: blinkst 0.3s infinite alternate;
}
#stbar.inf #stfill {
  background: linear-gradient(90deg, #40ff70, #c0ffd0, #40ff70);
}
@keyframes blinkst {
  to {
    opacity: 0.4;
  }
}
#rgfill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #a01010, #ff3a1a);
  transition: width 0.12s;
}
#rgbar.full {
  border-color: #ff3a1a;
  animation: ragebar 0.25s infinite alternate;
}
#rgbar.full #rgfill {
  background: linear-gradient(90deg, #ff3a1a, #ffd34d, #ff3a1a);
}
@keyframes ragebar {
  to {
    box-shadow: 0 0 12px #ff3a1a;
  }
}
/* rage: the screen goes red at the edges and pulses */
#rageglow {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 20, 0, 0.12) 30%,
    rgba(220, 0, 0, 0.5) 70%,
    rgba(140, 0, 0, 0.9)
  );
}
body.raging #rageglow {
  opacity: 1;
  animation: rageglow 0.5s infinite alternate;
}
body.raging #view {
  filter: saturate(1.6) contrast(1.15) sepia(0.25) hue-rotate(-20deg);
}
@keyframes rageglow {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 1;
  }
}

/* target + boss */
#target {
  position: fixed;
  z-index: 3;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: min(56vw, 260px);
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
#target.on {
  opacity: 1;
}
#target.bad #targetname {
  color: var(--bad);
}
#target.boss #targetname {
  color: var(--gold);
}
#target.innocent #targetname {
  color: #9ad0ff;
}
#targetbar {
  height: 9px;
  margin-top: 3px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--edge);
}
#targetfill {
  height: 100%;
  width: 100%;
  background: var(--st);
  transition: width 0.1s;
}
#boss {
  position: fixed;
  z-index: 3;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: min(70vw, 480px);
  text-align: center;
  font-size: 18px;
  color: var(--accent);
  text-shadow: 2px 2px 0 #000;
  display: none;
  pointer-events: none;
}
#boss.on {
  display: block;
}
body.bossnear #target {
  top: 132px;
}
#bossbar {
  height: 14px;
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #000;
}
#bossfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(#ff6a3a, #c0200a);
  transition: width 0.1s;
}

/* edge arrows */
#arrows {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.edge {
  position: absolute;
  width: 0;
  height: 0;
}
.edge b {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  background: var(--c);
  clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%);
  filter: drop-shadow(0 0 3px #000);
}
.edge span {
  position: absolute;
  left: -30px;
  top: 16px;
  width: 60px;
  text-align: center;
  font-size: 11px;
  color: var(--c);
  text-shadow: 1px 1px 0 #000;
}

/* crosshair, hit marker, charge */
#cross {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  pointer-events: none;
}
#hitmark {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  pointer-events: none;
  opacity: 0;
}
#hitmark::before,
#hitmark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  margin-left: -1.5px;
  background: linear-gradient(#fff 0 35%, transparent 35% 65%, #fff 65%);
}
#hitmark::before {
  transform: rotate(45deg);
}
#hitmark::after {
  transform: rotate(-45deg);
}
#hitmark.on {
  animation: mark 0.18s ease-out;
}
#hitmark.big::before,
#hitmark.big::after {
  background: linear-gradient(var(--accent) 0 35%, transparent 35% 65%, var(--accent) 65%);
}
@keyframes mark {
  from {
    opacity: 1;
    transform: scale(1.5);
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}
#charge {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  --p: 0;
  background: conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.18) 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
  mask: radial-gradient(circle, transparent 60%, #000 62%);
}
#charge.on {
  opacity: 1;
}
#charge.full {
  background: var(--accent);
  animation: glow 0.25s infinite alternate;
}
@keyframes glow {
  to {
    transform: scale(1.2);
  }
}

/* screen effects */
#flash {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}
#vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.35) 100%);
}
#pulse {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 140, 60, 0.55) 100%);
}
#pulse.orange {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(255, 90, 20, 0.75) 100%);
}
#pulse.red {
  background: radial-gradient(ellipse at center, transparent 25%, rgba(220, 0, 0, 0.85) 100%);
}
#fade {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
#fade.on {
  opacity: 1;
}
#banner {
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  top: 28%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  text-shadow: 4px 4px 0 #000;
}
#banner.on {
  animation: banner 4.5s ease-out forwards;
}
#bannerTitle {
  font-size: clamp(40px, 9vw, 80px);
}
#bannerName {
  font-size: clamp(22px, 5vw, 38px);
  color: var(--gold);
}
#bannerGoal {
  font-size: clamp(16px, 3.6vw, 26px);
  color: var(--bad);
  margin-top: 6px;
  text-shadow:
    0 0 14px var(--bad),
    3px 3px 0 #000;
}
#bannerHint {
  font-size: clamp(15px, 3.2vw, 24px);
  color: #5dff7a;
  margin-top: 4px;
  text-shadow:
    0 0 14px #2aff5a,
    3px 3px 0 #000;
}
@keyframes banner {
  0% {
    opacity: 0;
    transform: scale(1.6);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#clearpop {
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  top: 26%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  font-size: clamp(42px, 10vw, 92px);
  color: #5dff7a;
  text-shadow:
    0 0 24px #2aff5a,
    5px 5px 0 #000;
}
#clearpop small {
  display: block;
  font-size: 0.36em;
  color: var(--fg);
  text-shadow: 3px 3px 0 #000;
}
#clearpop.on {
  animation: clearpop 3.6s ease-out forwards;
}
@keyframes clearpop {
  0% {
    opacity: 0;
    transform: scale(2.2);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}
#cutscene {
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 14%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: clamp(22px, 5vw, 40px);
  color: var(--gold);
  text-shadow:
    0 0 18px var(--gold),
    3px 3px 0 #000;
}
#cutscene.on {
  opacity: 1;
}
.bars-cine {
  position: fixed;
  left: 0;
  right: 0;
  height: 0;
  background: #000;
  z-index: 3;
  transition: height 0.5s;
  pointer-events: none;
}
#cineTop {
  top: 0;
}
#cineBot {
  bottom: 0;
}
body.cine .bars-cine {
  height: 9vh;
}
body.cine :is(#hud, #map, #bars, #rightcol, #target, #cross, #arrows, #pauseBtn) {
  display: none;
}
.dmg {
  position: fixed;
  z-index: 3;
  pointer-events: none;
  color: var(--gold);
  font-size: 24px;
  text-shadow: 2px 2px 0 #000;
  transform: translate(-50%, -50%);
  animation: rise 0.85s ease-out forwards;
  white-space: nowrap;
}
.dmg.big {
  color: var(--accent);
  font-size: 38px;
}
.dmg.neg {
  color: var(--bad);
  font-size: 30px;
}
.dmg.cash {
  color: var(--cash);
  font-size: 24px;
}
.dmg.burn {
  color: #ff8a30;
  font-size: 18px;
}
@keyframes rise {
  0% {
    transform: translate(-50%, -50%) scale(1.6);
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -150%) scale(1);
    opacity: 0;
  }
}
/* Tutorial step banner (top centre) and the one-finger AUTO badge */
#tutor {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  max-width: calc(100vw - 32px);
  font-size: clamp(18px, 3.6vw, 40px);
  color: var(--gold);
  text-shadow:
    0 0 18px var(--gold),
    4px 4px 0 #000;
  background: rgba(0, 0, 0, 0.55);
  border: 3px solid var(--gold);
  padding: 8px 22px;
}
#tutor[hidden],
#drill[hidden] {
  display: none;
}
#drill {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: 31%;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  max-width: calc(100vw - 32px);
  font-size: clamp(16px, 2.8vw, 30px);
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  background: rgba(20, 40, 90, 0.7);
  border: 3px solid #6aa8ff;
  padding: 6px 18px;
}
#drill small {
  display: block;
  font-size: 0.55em;
  color: #9ac4ff;
}
#drill.pop {
  animation: tutorpop 0.5s;
}
body:not(.playing) #drill {
  display: none;
}
@media (max-height: 540px), (max-width: 700px) {
  #tutor {
    top: 14%;
    font-size: 17px;
    padding: 4px 12px;
    border-width: 2px;
  }
}
#tutor small {
  display: block;
  font-size: 0.45em;
  color: var(--fg);
  text-shadow: 2px 2px 0 #000;
}
#tutor.pop {
  animation: tutorpop 0.5s;
}
@keyframes tutorpop {
  0% {
    transform: translateX(-50%) scale(1.5);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
/* The opening story: old-photo colours for the flashbacks, a caption, speech bubbles over the heads */
body.flashback #view {
  filter: sepia(0.6) saturate(0.7) contrast(1.08) brightness(0.93);
}
#story {
  position: fixed;
  inset: 0;
  z-index: 7;
  cursor: pointer;
}
#story[hidden] {
  display: none;
}
#storyFx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6));
}
body.flashback #storyFx {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(40, 24, 8, 0.75));
}
body.story .bars-cine {
  height: 10vh;
}
#storyTag {
  position: absolute;
  top: calc(10vh + 12px);
  left: 18px;
  font-size: clamp(16px, 3vw, 24px);
  color: #f4e2b8;
  letter-spacing: 0.2em;
  text-shadow: 2px 2px 0 #000;
}
#storyCap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10vh + 14px);
  text-align: center;
  padding: 0 16px;
  font-size: clamp(20px, 4.4vw, 38px);
  color: var(--fg);
  text-shadow: 3px 3px 0 #000;
}
body.snapped #storyCap {
  color: var(--bad);
  font-size: clamp(42px, 10vw, 96px);
  text-shadow:
    0 0 24px #ff2010,
    5px 5px 0 #000;
}
#storyTap {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
#storySkip,
#storyHome {
  position: absolute;
  top: 12px;
  right: 12px;
  font: inherit;
  font-size: 18px;
  color: var(--fg);
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 6px 14px;
  cursor: pointer;
}
#storyHome {
  right: auto;
  left: 12px;
}
#coachHome {
  display: block;
  margin: 12px auto 0;
  opacity: 0.75;
}
#storyBubble {
  position: absolute;
  transform: translate(-50%, -100%);
  max-width: min(360px, 70vw);
  background: #fff;
  color: #111;
  padding: 8px 14px;
  border: 3px solid #000;
  border-radius: 14px;
  font-size: clamp(15px, 2.6vw, 22px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 4px 4px 0 #000;
}
#storyBubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top: 8px solid #000;
}
#storyBubble.on {
  animation: bubble 0.25s ease-out forwards;
}
#storyBubble.off {
  visibility: hidden;
}
@keyframes bubble {
  from {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.7);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
}
/* Coach cards: the game stands still behind a half-clear card that explains one mechanic */
#coach {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
}
#coach[hidden] {
  display: none;
}
#coach .card {
  max-width: 560px;
  max-height: calc(100dvh - 32px); /* never taller than the screen: the text scrolls, the buttons stay */
  overflow-y: auto;
  background: rgba(16, 12, 14, 0.94);
  border: 3px solid var(--gold);
  padding: 18px 22px;
  text-align: center;
  box-shadow: 0 0 30px rgba(255, 211, 77, 0.35);
}
#coach h2 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: clamp(26px, 5vw, 40px);
}
#coachText {
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
}
#coachText .muted {
  color: var(--muted);
  font-size: 14px;
}
#coachText b.r {
  color: var(--bad);
}
#coachText b.y {
  color: var(--gold);
}
#coachText b.b {
  color: #6aa8ff;
}
/* The guide's time stop: the world goes cold and still while the player rages */
body.timestop #view {
  filter: saturate(0.35) contrast(1.1) brightness(0.95);
}
body.timestop.raging #view {
  filter: saturate(0.6) contrast(1.15);
}
body.guide-rage :is(#rgbar, #rageBtn) {
  animation: guidepulse 0.6s infinite alternate;
}
@keyframes guidepulse {
  to {
    box-shadow: 0 0 22px 6px var(--gold);
  }
}
/* Settings: key bindings and profiles, folded */
.setbox {
  margin: 10px 0;
  text-align: left;
  border: 2px solid var(--edge);
  padding: 6px 10px;
}
.setbox summary {
  cursor: pointer;
  color: var(--gold);
  font-size: 18px;
}
body.touch #keysBox {
  display: none;
}
.keyrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
  font-size: 15px;
}
.keyrow span {
  flex: 1;
}
.keyrow.on span {
  color: var(--gold);
}
.keyrow button,
#profNew button,
.setbox .small {
  font: inherit;
  font-size: 14px;
  min-width: 70px;
  padding: 4px 10px;
  background: #2a2a34;
  color: var(--fg);
  border: 2px solid #000;
  cursor: pointer;
}
.keyrow button.wait {
  background: var(--gold);
  color: #000;
}
.keyrow button.del {
  min-width: 0;
  background: #5a1a1a;
}
#profNew {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
#profNew[hidden] {
  display: none;
}
#profName {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  padding: 4px 8px;
}
.setbox .danger {
  background: #8a1a1a;
  margin-top: 4px;
  width: 100%;
}
#autoBadge {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 56px;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 13px;
  color: #40c8ff;
  letter-spacing: 0.1em;
  background: var(--panel);
  border: 2px solid #40c8ff;
  padding: 2px 10px;
  box-shadow: 0 0 10px rgba(64, 200, 255, 0.5);
}
#autoBadge[hidden] {
  display: none;
}
#toast {
  position: fixed;
  z-index: 4;
  top: 136px;
  left: 50%;
  transform: translate(-50%, -12px);
  opacity: 0;
  pointer-events: none;
  background: var(--accent);
  color: #fff;
  padding: 9px 18px;
  font-size: 19px;
  border: 3px solid #000;
  transition: all 0.25s;
  text-align: center;
  max-width: calc(100vw - 32px);
}
#toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
body:has(#tutor:not([hidden])) #toast {
  top: calc(14% + 110px);
} /* below the guide banner, not on it */
#toast.good {
  background: #1f9a4a;
}
#combo {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%) scale(0.8);
  font-size: clamp(28px, 6vw, 50px);
  color: var(--accent);
  text-shadow: 3px 3px 0 #000;
  opacity: 0;
  transition:
    opacity 0.15s,
    transform 0.15s;
  pointer-events: none;
}
#combo.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* touch controls (Genshin Impact mobile style): a floating stick on the left, a round action cluster bottom right */
#touch {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: none;
  --cr: max(18px, env(safe-area-inset-right));
  --cb: max(14px, env(safe-area-inset-bottom));
}
body.touch.playing #touch {
  display: block;
}
/* Floating stick: a thumb anywhere on the left 40% puts it under the thumb; at rest it waits faint, bottom left.
     Push past 80% up into the blue zone to run (it glows blue and says RUN). */
#joy {
  position: absolute;
  left: max(6vw, env(safe-area-inset-left));
  bottom: 7vh;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.07);
  opacity: 0.35;
  pointer-events: none;
  transition:
    opacity 0.25s,
    box-shadow 0.15s,
    border-color 0.15s;
}
#joy.on {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.6);
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}
#joy.run {
  border-color: #40c8ff;
  box-shadow:
    0 0 26px 6px rgba(64, 200, 255, 0.55),
    inset 0 0 30px rgba(64, 200, 255, 0.35);
}
/* Blue RUN zone at the top of the ring: hold the stick in it to run. */
#joy .runzone {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from -38deg, rgba(64, 200, 255, 0.38) 0 76deg, transparent 76deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%);
  mask: radial-gradient(circle, transparent 66%, #000 68%);
  transition: background 0.15s;
}
#joy.run .runzone {
  background: conic-gradient(from -38deg, rgba(64, 200, 255, 0.95) 0 76deg, transparent 76deg);
}
#joy .runlabel {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  font-size: 15px;
  color: #40c8ff;
  text-shadow:
    0 0 10px #40c8ff,
    2px 2px 0 #000;
  opacity: 0.75;
  transition: opacity 0.15s;
}
#joy.run .runlabel {
  opacity: 1;
  font-size: 18px;
}
#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.15s;
}
#joy.run #knob {
  background: rgba(64, 200, 255, 0.75);
}
/* Round, see-through action buttons: an icon with a small word under it. */
.tbtn {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(20, 14, 12, 0.42);
  color: #fff;
  font: inherit;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  touch-action: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.tbtn i {
  font-style: normal;
  font-size: 24px;
  line-height: 1;
}
.tbtn small {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-shadow: 1px 1px 0 #000;
}
.tbtn.down {
  background: rgba(255, 77, 31, 0.6);
  transform: scale(0.94);
}
/* The cluster: ATTACK in the corner, JUMP / GRAB / RUN on an arc around it, RAGE and the mask on an outer arc. */
#fire {
  right: var(--cr);
  bottom: var(--cb);
  width: 100px;
  height: 100px;
  border-color: var(--accent);
  background: rgba(255, 77, 31, 0.28);
  --p: 0;
}
#fire i {
  font-size: 38px;
}
#fire small {
  font-size: 12px;
}
/* Holding ATTACK fills a ring around it (the power hit charge); full, it glows. */
#fire::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  background: conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.15) 0);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%);
  mask: radial-gradient(circle, transparent 64%, #000 66%);
}
#fire.charging::after {
  opacity: 1;
}
#fire.full::after {
  background: var(--accent);
  animation: glow 0.25s infinite alternate;
}
#fire2 {
  display: none;
}
#jump {
  right: calc(var(--cr) + 115px);
  bottom: calc(var(--cb) + 20px);
}
#grab {
  right: calc(var(--cr) + 87px);
  bottom: calc(var(--cb) + 87px);
  border-color: var(--gold);
}
#grab.holding {
  background: rgba(255, 211, 77, 0.45);
  color: #000;
}
#sprint {
  right: calc(var(--cr) + 20px);
  bottom: calc(var(--cb) + 115px);
  border-color: #40c8ff;
}
#sprint.down,
#sprint.on {
  background: rgba(64, 200, 255, 0.55);
}
/* RAGE (the burst button): the ring fills with the rage bar; full, it glows and pulses; in a rage it drains. */
body.touch #rageBtn {
  position: absolute;
  right: calc(var(--cr) + 103px);
  bottom: calc(var(--cb) + 165px);
  width: 64px;
  height: 64px;
  animation: none;
  --p: 0;
  background: rgba(20, 14, 12, 0.42);
  border-color: rgba(255, 90, 40, 0.6);
}
body.touch #rageBtn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(#ff3a1a calc(var(--p) * 360deg), rgba(255, 255, 255, 0.15) 0);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 65%);
  mask: radial-gradient(circle, transparent 63%, #000 65%);
}
body.touch #rageBtn:not(.ready):not(.on) i {
  opacity: 0.55;
  filter: grayscale(0.6);
}
body.touch #rageBtn.ready {
  background: rgba(208, 32, 10, 0.7);
  border-color: var(--gold);
  animation: burst 0.4s infinite alternate;
}
body.touch #rageBtn.ready::before {
  background: conic-gradient(var(--gold) 0 360deg);
}
body.touch #rageBtn.on {
  background: rgba(208, 32, 10, 0.55);
}
@keyframes burst {
  from {
    box-shadow: 0 0 8px 2px rgba(255, 58, 26, 0.6);
  }
  to {
    box-shadow: 0 0 22px 8px rgba(255, 211, 77, 0.8);
  }
}
body.touch #maskBtn {
  position: absolute;
  right: calc(var(--cr) + 186px);
  bottom: calc(var(--cb) + 66px);
  width: 56px;
  height: 56px;
  color: #000;
  background: rgba(255, 211, 77, 0.85);
  border-color: #000;
  animation: blink 0.5s infinite alternate;
}
body.touch #maskBtn[hidden],
body.touch #rageBtn[hidden] {
  display: none;
}
/* Phones: one HIT button, no stat detail lines, stars only, no labels on the bars. The view stays free. */
@media (pointer: coarse) {
  #stats #wMore,
  #stats #wCalc,
  #wantedHint {
    display: none;
  }
  body.touch.playing #mute {
    display: none;
  }
  #map {
    transform: scale(0.45);
  }
  #bars {
    width: 26vw;
    gap: 3px;
  }
  .bar {
    grid-template-columns: 1fr;
  }
  .bar span {
    display: none;
  }
  .track {
    height: 9px;
  }
}
@media (pointer: coarse) and (orientation: portrait) {
  #hud {
    font-size: 12px;
    gap: 4px;
  }
  #hud .mid {
    min-width: 150px;
  }
  #hud {
    justify-content: flex-start;
    padding-left: 120px;
  }
  #rightcol {
    width: 150px;
    top: 72px;
  }
  #stats i {
    font-size: 22px;
  }
  #stats b {
    font-size: 12px;
  }
  #stats span {
    font-size: 10px;
  }
  #stats span.wd {
    font-size: 14px;
  }
  #stats #wCalc {
    display: none;
  }
  #map {
    transform: scale(0.5);
  }
  #skyline {
    display: none;
  }
  #bars {
    width: 60vw;
    bottom: 2px;
  }
  .bar {
    font-size: 10px;
    grid-template-columns: 50px 1fr;
  }
  #joy {
    bottom: 16vh;
  }
  #touch {
    --cb: max(14vh, env(safe-area-inset-bottom));
  }
  /* Upright, the mask goes above RUN, clear of the stick. */
  body.touch #maskBtn {
    right: calc(var(--cr) + 20px);
    bottom: calc(var(--cb) + 192px);
  }
  #touch #hint {
    bottom: 7vh;
    font-size: 11px;
    white-space: normal;
    width: 92vw;
    text-align: center;
  }
}
#hint {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  animation: hintfade 12s forwards;
}
@keyframes hintfade {
  0%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Phones in landscape: compact HUD so the view stays free. */
@media (pointer: coarse) and (max-height: 540px) {
  #hud {
    font-size: 13px;
    padding-top: 6px;
  }
  #hud .mid {
    min-width: 160px;
  }
  #rightcol {
    width: 172px;
    top: 6px;
  }
  #stats {
    padding: 4px 8px;
    gap: 6px;
  }
  #stats i {
    font-size: 24px;
  }
  #stats b {
    font-size: 13px;
  }
  #stats span {
    font-size: 10px;
  }
  #stats span.wd {
    font-size: 14px;
  }
  #stats #wCalc {
    display: none;
  }
  #map {
    transform: scale(0.45);
    top: 40px;
  }
  #skyline {
    display: none;
  }
  #bars {
    width: 24vw;
    bottom: 6px;
  }
  #hint {
    display: none;
  }
  #coach .card {
    padding: 12px 16px;
  }
  #coach h2 {
    font-size: 22px;
  }
  #coachText {
    font-size: 14px;
  }
  #banner {
    top: 18%;
  }
  #bannerTitle {
    font-size: 34px;
  }
  #bannerName {
    font-size: 20px;
  }
  #bannerGoal,
  #bannerHint {
    font-size: 14px;
  }
  #clearpop {
    font-size: 40px;
  }
  #pauseBtn {
    padding: 4px 8px;
    font-size: 13px;
  }
}

/* overlays */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(30, 24, 40, 0.9), rgba(6, 5, 8, 0.96));
  text-align: center;
  overflow: auto;
}
.overlay[hidden] {
  display: none;
}
.card {
  max-width: 560px;
  width: 100%;
}
.card h1 {
  font-size: clamp(52px, 14vw, 96px);
  margin: 0 0 10px;
  line-height: 0.9;
  text-shadow: 4px 4px 0 #000;
}
.card h1 span {
  color: var(--accent);
}
.card h1.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: clamp(44px, 11vw, 84px);
}
.card h1.logo img {
  width: clamp(56px, 12vw, 84px);
  height: auto;
  filter: drop-shadow(4px 4px 0 #000);
}
.card h2 {
  font-size: clamp(34px, 8vw, 48px);
  margin: 0 0 12px;
  text-shadow: 3px 3px 0 #000;
}
.card p {
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.card ul.intro {
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg);
  text-align: left;
  margin: 0 auto 20px;
  padding-left: 1.2em;
  width: fit-content;
  max-width: 100%;
}
.card ul.intro li {
  margin: 4px 0;
}
.card ul.intro li.muted {
  color: var(--muted);
  font-size: 0.85em;
  list-style: none;
  margin-left: -1.2em;
}
.check {
  display: block;
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0 0 16px;
  font-size: 15px;
}
.check input {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.check input[type='range'] {
  display: block;
  width: min(320px, 100%);
  margin: 6px auto 0;
  accent-color: var(--accent);
}
body.touch .desk,
body:not(.touch) .mob {
  display: none;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.stats div {
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 10px 6px;
}
.stats b {
  display: block;
  font-size: 28px;
}
.stats b.cash {
  color: var(--cash);
}
.stats small {
  color: var(--muted);
}
.stats div[hidden] {
  display: none;
}
.board {
  margin: 0 0 18px;
  font-size: 18px;
}
.board ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}
.board small {
  display: block;
  color: var(--muted);
  margin-bottom: 6px;
}
.board li {
  padding: 6px 10px;
  border: 2px solid var(--edge);
  background: var(--panel);
  margin-top: 4px;
}
.board li::before {
  counter-increment: rank;
  content: counter(rank) '. ';
  color: var(--muted);
}
.board li.new {
  border-color: var(--cash);
  color: var(--cash);
}
/* weekly league: nickname form, then two short boards side by side */
.nick {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--gold);
}
.nick[hidden],
.league[hidden] {
  display: none;
}
.nick input {
  font: inherit;
  font-size: 18px;
  width: 170px;
  padding: 6px 10px;
  color: var(--fg);
  background: #000;
  border: 2px solid var(--edge);
  letter-spacing: 0.05em;
}
.nick button {
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: #1f7a3a;
  border: 2px solid #000;
  padding: 7px 12px;
  cursor: pointer;
}
.league {
  margin: 0 0 18px;
}
.league .rank {
  color: var(--cash);
  font-size: 20px;
  margin: 0 0 8px;
}
.league .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.league h4 {
  margin: 0 0 4px;
  color: var(--gold);
  font-weight: normal;
  font-size: 16px;
}
.league ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
  font-size: 15px;
  text-align: left;
}
.league li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border: 2px solid var(--edge);
  background: var(--panel);
  margin-top: 3px;
}
.league li::before {
  counter-increment: rank;
  content: counter(rank) '.';
  color: var(--muted);
  min-width: 1.6em;
}
.league li span:first-of-type {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league li.me {
  border-color: var(--cash);
  color: var(--cash);
}
.league .muted,
.league li.none {
  color: var(--muted);
  justify-content: center;
}
.shopsec {
  margin: 8px 0 0;
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 0.08em;
}
.btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
button.big {
  font: inherit;
  font-size: 24px;
  color: #fff;
  background: var(--accent);
  border: 3px solid #000;
  padding: 12px 32px;
  cursor: pointer;
  box-shadow: 5px 5px 0 #000;
}
button.big.alt {
  background: #3a3a48;
}
button.big:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #000;
}
button.big.locked {
  background: #2a2a30;
  color: #8a8a92;
}
button.big.locked::after {
  content: attr(data-lock);
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  color: #c8a060;
}
.shake {
  animation: shake 0.35s;
}
@keyframes shake {
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
.wallet {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 0 0 18px;
  font-size: 20px;
  color: var(--gold);
  flex-wrap: wrap;
}
.wallet .cash {
  color: var(--cash);
}
/* Game version in the menu's bottom-left corner: small and quiet, for bug reports. */
.version {
  position: fixed;
  left: 12px;
  bottom: 8px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.45;
  user-select: text;
}
.menuBtns {
  display: grid;
  gap: 12px;
  width: min(320px, 100%);
  margin: 0 auto;
}
#maskBtn {
  font: inherit;
  color: #000;
  background: var(--gold);
  border: 2px solid #000;
  cursor: pointer;
  pointer-events: auto;
  animation: blink 0.5s infinite alternate;
}
#maskBtn[hidden] {
  display: none;
}
#rageBtn {
  font: inherit;
  color: #fff;
  background: #d0200a;
  border: 2px solid #000;
  cursor: pointer;
  pointer-events: auto;
  animation: blink 0.4s infinite alternate;
}
#rageBtn[hidden] {
  display: none;
}
#rgbar.ready {
  border-color: #ffd34d;
  animation: ragebar 0.35s infinite alternate;
}
/* police countdown: a big blinking warning while the officers are on their way */
#policeWarn {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: clamp(22px, 4vw, 40px);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  padding: 6px 18px;
  border: 3px solid #000;
  animation: copblink 0.45s infinite alternate;
  white-space: nowrap;
}
#policeWarn[hidden] {
  display: none;
}
@keyframes copblink {
  from {
    background: #c81e1e;
  }
  to {
    background: #1e46c8;
  }
}
/* window ledge: the balance meter (needle in a bar, red ends), the hold timer, wind streaks and the phone buttons */
#ledgePrompt {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 20px;
  color: #000;
  background: var(--gold);
  border: 3px solid #000;
  padding: 6px 14px;
  display: none;
  white-space: nowrap;
}
#ledgePrompt.on {
  display: block;
  animation: blink 0.5s infinite alternate;
}
#ledge {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: none;
}
#ledge.on {
  display: block;
}
#ledge .meter {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  width: min(420px, 80vw);
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  font-size: 18px;
}
#ledge .track {
  position: relative;
  height: 26px;
  margin-top: 6px;
  border: 3px solid #000;
  background: linear-gradient(90deg, #d0200a 0 12%, #2a2a34 12% 88%, #d0200a 88%);
}
#ledge .track::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #40ff70;
}
#ledgeNeedle {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 50%;
  width: 8px;
  margin-left: -4px;
  background: #fff;
  border: 2px solid #000;
}
#ledge.danger #ledgeNeedle {
  background: var(--gold);
}
#ledge .hold {
  height: 8px;
  margin-top: 8px;
  border: 2px solid #000;
  background: #2a2a34;
}
#ledgeHold {
  height: 100%;
  width: 0;
  background: #40ff70;
}
#ledge .wind {
  position: absolute;
  inset: 0;
  opacity: calc(0.15 + min(0.5, max(var(--wind, 0), calc(var(--wind, 0) * -1)) * 0.3));
  background:
    repeating-linear-gradient(
        90deg,
        transparent 0 140px,
        rgba(255, 255, 255, 0.35) 140px 220px,
        transparent 220px 400px
      )
      0 0 / 400px 37px,
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(255, 255, 255, 0.25) 90px 130px, transparent 130px 260px)
      0 13px / 260px 53px;
  -webkit-mask: linear-gradient(transparent 20%, #000 40% 60%, transparent 80%);
  mask: linear-gradient(transparent 20%, #000 40% 60%, transparent 80%);
  animation: wind 0.45s linear infinite;
}
@keyframes wind {
  to {
    background-position:
      400px 0,
      260px 13px;
  }
}
#ledge .lbtn {
  position: absolute;
  bottom: 8%;
  width: 30vw;
  height: 30vw;
  max-width: 160px;
  max-height: 160px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
  background: rgba(20, 10, 8, 0.55);
  color: #fff;
  font: inherit;
  font-size: 40px;
  pointer-events: auto;
  touch-action: none;
  display: none;
}
#ledge .lbtn.down {
  background: rgba(255, 77, 31, 0.6);
}
body.touch #ledge .lbtn {
  display: block;
}
#ledgeL {
  left: 6%;
}
#ledgeR {
  right: 6%;
}
#ledge .wbtn {
  position: absolute;
  bottom: calc(8% + min(30vw, 160px) + 14px);
  width: 18vw;
  height: 18vw;
  max-width: 90px;
  max-height: 90px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
  background: rgba(20, 10, 8, 0.55);
  color: #fff;
  font: inherit;
  font-size: 28px;
  pointer-events: auto;
  touch-action: none;
  display: none;
}
#ledge .wbtn.down {
  background: rgba(255, 77, 31, 0.6);
}
body.touch #ledge .wbtn {
  display: block;
}
#ledgeF {
  left: calc(6% + 6vw);
}
#ledgeB {
  right: calc(6% + 6vw);
}
#ledge .walk {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}
body.touch #ledge .walk {
  display: none;
}
#ledgeIn {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  font: inherit;
  font-size: 20px;
  color: #000;
  background: var(--gold);
  border: 3px solid #000;
  padding: 6px 14px;
  white-space: nowrap;
  display: none;
  pointer-events: auto;
}
#ledgeIn.on {
  display: block;
  animation: blink 0.5s infinite alternate;
}
#fWhy {
  color: #ff4d1f;
  font-size: 22px;
}
body.onledge #cross,
body.onledge #touch {
  display: none;
}
#lang {
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 6;
  display: flex;
  gap: 4px;
}
#lang button {
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 5px 9px;
  cursor: pointer;
}
#lang button.on {
  color: var(--fg);
  border-color: var(--gold);
}
body.playing #lang {
  display: none;
}
#mute {
  position: fixed;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 6;
  font-size: 20px;
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 6px 9px;
  cursor: pointer;
}
body.touch.playing #mute {
  top: max(10px, env(safe-area-inset-top));
  left: 56px;
  right: auto;
  bottom: auto;
  font-size: 15px;
  padding: 5px 8px;
}
body.touch:not(.playing) #mute {
  top: 58px;
  bottom: auto;
}
body.touch .maphead #mapShop {
  margin-right: 100px;
}

/* map */
#mapview {
  display: flex;
  flex-direction: column;
  padding: 0;
  place-items: stretch;
  background: linear-gradient(#17202e, #090b12);
}
#mapview[hidden] {
  display: none;
}
.maphead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 8px;
  border-bottom: 2px solid var(--edge);
  background: rgba(0, 0, 0, 0.4);
}
.maphead h2 {
  margin: 0;
  font-size: 28px;
}
button.small {
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: #3a3a48;
  border: 2px solid #000;
  padding: 8px 12px;
  cursor: pointer;
}
button.small.locked {
  color: #888;
}
#mapScroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.mapfoot {
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.5);
  border-top: 2px solid var(--edge);
  display: grid;
}
.mapfoot button {
  width: 100%;
  font-size: 28px;
  padding: 16px;
}
@media (pointer: coarse) {
  .floor text {
    font-size: 16px;
  }
  .menuBtns button.big {
    font-size: 30px;
    padding: 18px 32px;
  }
  #coachOk,
  #helpBack,
  #mGo {
    font-size: 28px;
    padding: 16px 40px;
  }
  button.small {
    font-size: 18px;
    padding: 12px 16px;
  }
  .item button {
    font-size: 17px;
    padding: 10px 14px;
  }
}
#mapSvg {
  display: flex;
  justify-content: center;
}
#mapSvg svg {
  display: block;
}
.floor {
  cursor: pointer;
}
.floor rect {
  stroke: #000;
  stroke-width: 1.5;
  fill: #3a3f4c;
}
.floor.done rect {
  fill: #2f9a4a;
}
.floor.cur rect {
  fill: var(--bad);
  animation: curfloor 0.6s infinite alternate;
}
.floor.locked rect {
  fill: #262a33;
}
.floor text {
  fill: #fff;
  font-size: 11px;
  text-anchor: middle;
  pointer-events: none;
}
.floor.locked text {
  fill: #6a6f7c;
}
.floor.boss rect {
  stroke: var(--gold);
  stroke-width: 2;
}
@keyframes curfloor {
  from {
    filter: drop-shadow(0 0 2px #ff3030);
  }
  to {
    fill: #ff8a1f;
    filter: drop-shadow(0 0 10px #ff3030);
  }
}
.dept text.title {
  fill: var(--fg);
  font-size: 20px;
  letter-spacing: 0.05em;
}
.dept text.sub {
  fill: var(--muted);
  font-size: 13px;
}
.dept.locked text.title {
  fill: #6a6a74;
}
.dept .ms rect {
  fill: rgba(0, 0, 0, 0.75);
  stroke: var(--gold);
  stroke-width: 2;
}
.dept .ms text {
  fill: var(--gold);
  font-size: 12px;
}
.dept.locked .ms text {
  fill: #a89060;
}
.dept .playhint {
  fill: var(--gold);
  font-size: 16px;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 3px;
  text-anchor: middle;
}

/* help + shop */
.helpgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  text-align: left;
  margin-bottom: 18px;
}
.helpgrid > div {
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 8px 12px;
}
.helpgrid h3 {
  margin: 0 0 6px;
  font-weight: normal;
  color: var(--gold);
}
.helpgrid p {
  margin: 0 0 6px;
  font-size: 14px;
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
  color: var(--muted);
}
.r {
  color: var(--bad);
}
.g {
  color: #5dff7a;
}
.b {
  color: #5aa0ff;
}
.y {
  color: var(--gold);
}
.unlock {
  color: #5dff7a !important;
  font-family: inherit !important;
  font-size: 22px !important;
  letter-spacing: 0.03em !important;
}
.shopintro {
  background: rgba(255, 211, 77, 0.12);
  border: 2px solid var(--gold);
  padding: 10px 14px;
  color: var(--fg) !important;
  text-align: left;
}
/* Bullet lists in the shop intro and the coach cards. */
.shopintro ul,
#coachText ul {
  margin: 6px 0;
  padding-left: 1.3em;
}
.shopintro li,
#coachText li {
  margin: 3px 0;
}
#mWallet {
  font-size: 22px;
  color: var(--cash);
  font-family: inherit;
  letter-spacing: 0.03em;
}
.gem {
  color: #8fe0ff !important;
}
/* steel safe mini-game: a steel door with bolts around the board; the bolts slide back when it opens */
.sgdoor {
  position: relative;
  margin: 0 auto 16px;
  width: min(560px, 100%);
  padding: 18px 26px;
  background: linear-gradient(160deg, #6a7078, #3a3f46);
  border: 4px solid #1a1c20;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 3px #8a9098,
    6px 6px 0 #000;
  transition: filter 0.4s;
}
.sgdoor svg {
  display: block;
  width: 100%;
  height: auto;
  background: #15171b;
  border: 3px solid #000;
  border-radius: 6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sgdoor svg .end {
  cursor: grab;
}
.sgdoor .bolt {
  position: absolute;
  width: 22px;
  height: 12px;
  background: linear-gradient(#e8ecf0, #8a9098);
  border: 2px solid #000;
  border-radius: 4px;
  transition: transform 0.45s cubic-bezier(0.6, -0.4, 0.3, 1.4);
}
.sgdoor .bolt.l {
  left: -14px;
}
.sgdoor .bolt.r {
  right: -14px;
}
.sgdoor .bolt:nth-of-type(odd) {
  top: 22%;
}
.sgdoor .bolt:nth-of-type(even) {
  top: 70%;
}
.sgdoor.open {
  filter: brightness(1.3) drop-shadow(0 0 18px #40c8ff);
}
.sgdoor.open .bolt.l {
  transform: translateX(18px);
}
.sgdoor.open .bolt.r {
  transform: translateX(-18px);
}
.sgdoor.shake {
  animation: shake 0.35s;
}
.unlock.gold {
  color: var(--gold) !important;
}
#mList,
#awardList {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  text-align: left;
}
.item.award:not(.done) {
  opacity: 0.5;
}
.item.award .buy {
  align-self: center;
}
.item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: center;
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 8px 10px;
}
.item .tile {
  --plate: #3a3a48;
  width: 64px;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.item .tile span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 32px;
  line-height: 1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--plate) 70%, #fff 30%), var(--plate));
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #000;
  filter: drop-shadow(0 0 0 transparent);
}
.item .tile.gold span {
  box-shadow:
    3px 3px 0 #000,
    0 0 16px 2px var(--gold);
}
.pips {
  display: flex;
  gap: 3px;
}
.pips b {
  width: 9px;
  height: 5px;
  background: #2a2a30;
  border: 1px solid #000;
}
.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border: 1px solid #000;
  vertical-align: middle;
}
.item.lockeditem {
  opacity: 0.6;
}
.item h3 {
  margin: 0;
  font-size: 20px;
  font-weight: normal;
}
.item h3 small {
  color: var(--gold);
  font-size: 0.7em;
  margin-left: 6px;
}
.item p {
  margin: 0;
  font-size: 13px;
}
.item .buy {
  display: flex;
  gap: 6px;
  grid-row: span 2;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.item button.pts {
  background: #2a4a9a;
}
.item button {
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: #1f7a3a;
  border: 2px solid #000;
  padding: 6px 10px;
  cursor: pointer;
}
.item button.eq {
  background: var(--accent);
}
.item button:disabled {
  background: #333;
  color: #777;
  cursor: not-allowed;
}

/* The stats question: a bar under the menus, asked once; hidden while a floor is played. */
#consentBar {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 7;
  width: min(640px, calc(100vw - 32px));
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 14px;
  background: var(--panel);
  border: 2px solid var(--gold);
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--fg);
}
#consentBar[hidden],
body.playing #consentBar {
  display: none;
}
/* While the bar is up, screens keep their buttons above it. */
body:has(#consentBar:not([hidden])) .overlay {
  padding-bottom: 96px;
}
#consentBar span {
  flex: 1 1 260px;
}
#consentBar a {
  color: #40c8ff;
}
#consentBar button {
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: #3a3a48;
  border: 2px solid #000;
  padding: 6px 14px;
  cursor: pointer;
}

/* Short landscape screens (phones such as an iPhone 11): the card goes wide, the text scrolls on the left and
   GOT IT and MAIN MENU stay visible in a column on the right. */
@media (max-height: 560px) {
  #coach {
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  }
  #coach .card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    column-gap: 18px;
    max-width: min(920px, 100%);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    padding: 10px 14px;
  }
  #coach h2 {
    grid-column: 1;
    font-size: 24px;
    margin-bottom: 4px;
  }
  #coachText {
    grid-column: 1;
    grid-row: 2 / span 2;
    min-height: 0;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.35;
  }
  #coachOk {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  #coachHome {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Rooms (PLAY WITH FRIENDS) */
#roomTag {
  display: none;
  color: #7fd8ff;
  font-size: 14px;
}
body.inroom #roomTag {
  display: block;
}
#roomview .roomcode b {
  font-size: 34px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
#roomPlayers {
  text-align: left;
  margin: 10px auto;
  max-width: 280px;
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
}
#roomCode {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
#roomMsg {
  color: var(--gold);
  min-height: 1.2em;
}