:root {
  --acid: #f5e400;
  --pink: #ff2d95;
  --paper: #f4f1e8;
  --shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.9);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--paper);
  font-family: 'VT323', monospace;
}

[hidden] { display: none !important; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* Menu and pause */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.85));
  padding: 16px;
}

.menu-inner { text-align: center; max-width: 100%; }
/* The start menu sits in the dark band across the top, out of the turntable's way: the name top left,
   the buttons in a row under it. */
#menu {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%);
  align-items: flex-start;
  justify-content: flex-start;
  padding: 28px 40px;
}
#menu .menu-inner { text-align: left; }
#menu .disc { display: none; }
#menu h1 { font-size: clamp(48px, 7.5vw, 120px); text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 #000; margin: 0; }
#menu .sub { font-size: clamp(16px, 1.8vw, 26px); margin: 10px 0 2px; }
#menu .date { font-size: clamp(14px, 1.4vw, 20px); margin: 0 0 18px; }
#menu .drop-hint { margin: -6px 0 14px; display: inline-block; padding: 6px 12px; border: 2px solid var(--acid); color: var(--acid); font-size: clamp(13px, 1.2vw, 16px); opacity: 1; }
#menu nav { display: flex; flex-wrap: wrap; gap: 10px; }
#menu nav[hidden] { display: none; }
#menu nav button { width: auto; margin: 0; padding: 10px 18px; font-size: clamp(14px, 1.2vw, 18px); }
#menu .controls { margin-top: 14px; }
.drop-hint { margin: -18px 0 22px; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); opacity: 0.75; animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .drop-hint { animation: none; } }

.disc { width: 96px; height: 96px; animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

h1 {
  font-family: 'Rubik Mono One', sans-serif;
  font-size: clamp(64px, 15vw, 180px);
  line-height: 0.9;
  margin: 8px 0 0;
  color: var(--acid);
  text-shadow: 6px 6px 0 var(--pink), 12px 12px 0 #000;
}

h2 {
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 48px;
  color: var(--acid);
  margin: 0 0 24px;
}

.sub {
  font-size: 34px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin: 18px 0 4px;
}

.date { font-size: 24px; color: var(--pink); letter-spacing: 0.08em; margin: 0 0 28px; }

nav button {
  display: block;
  width: 280px;
  max-width: 100%;
  margin: 10px auto;
  padding: 14px;
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 20px;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.4);
  border: 3px solid var(--paper);
  cursor: pointer;
}
nav button:disabled { opacity: 0.35; cursor: default; }
nav button:hover:not(:disabled), nav button:focus-visible {
  background: var(--acid);
  border-color: var(--acid);
  color: #000;
  outline: none;
}


.controls table { margin: 18px auto 0; border-collapse: collapse; font-size: 22px; text-align: left; }
.controls th { color: var(--acid); padding: 10px 0 2px; font-weight: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.controls td { padding: 1px 14px 1px 0; }
.controls td:first-child { color: var(--pink); white-space: nowrap; }

/* HUD */

#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: var(--shadow); }

#objective {
  position: absolute;
  top: 18px;
  left: 18px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.55);
  border-left: 5px solid var(--acid);
  font-size: 24px;
  line-height: 1.1;
}
#objective .label { color: var(--acid); font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; }
#objective-dist { margin-top: 6px; color: var(--acid); }
#objective-arrow { display: inline-block; transition: transform 0.1s linear; }

#status { position: absolute; top: 14px; right: 74px; text-align: right; }
#clock { font-size: 56px; line-height: 1; }
#money { font-size: 34px; color: #7dff6a; }
#loved { font-size: 30px; color: var(--pink); text-transform: uppercase; letter-spacing: 0.1em; }

#radio {
  position: absolute;
  right: 22px;
  bottom: 92px;
  padding: 2px 10px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #ff9a3c;
  color: #ff9a3c;
  font-size: 26px;
  letter-spacing: 0.08em;
}

#speedo { position: absolute; right: 22px; bottom: 16px; font-size: 64px; line-height: 1; }
#speedo small { font-size: 26px; margin-left: 6px; color: var(--acid); }

#prompt {
  position: absolute;
  left: 50%;
  bottom: 150px;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--acid);
  font-size: 28px;
  white-space: nowrap;
}

#subtitle {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  width: min(900px, calc(100vw - 32px));
  text-align: center;
  font-size: 32px;
  color: #fff;
}

#banner {
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Rubik Mono One', sans-serif;
  font-size: clamp(28px, 5vw, 60px);
  color: var(--acid);
  text-shadow: 4px 4px 0 var(--pink), 0 0 20px #000;
  opacity: 0;
}
#banner.show { animation: banner 3.5s ease forwards; }
@keyframes banner {
  0% { opacity: 0; transform: scale(1.3); }
  12% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* End of the night */

.sunrise { font-size: clamp(48px, 11vw, 140px); color: #ffb070; text-shadow: 6px 6px 0 var(--pink), 12px 12px 0 #000; }
#end { background: radial-gradient(ellipse at center, rgba(40, 10, 0, 0.3), rgba(0, 0, 0, 0.8)); }
.stats { margin: 0 auto 24px; font-size: 26px; border-collapse: collapse; }
.stats td { padding: 2px 14px; text-align: left; }
.stats td:first-child { color: var(--acid); text-align: right; }

#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s; }
#fade.on { opacity: 1; }

/* Monday's papers, over the black at the end: the date, then each headline as it's read out */
#papers {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  text-align: center;
  pointer-events: none;
  color: #f2f0ea;
}
#papers .day { font: 22px 'VT323', monospace; letter-spacing: 0.2em; opacity: 0.8; }
#papers .paper { font: 700 20px Georgia, serif; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; }
#papers .headline { font: 64px/1.05 'Anton', Impact, sans-serif; text-transform: uppercase; max-width: 900px; }
#papers .headline small { display: block; margin-top: 10px; font: 26px Georgia, serif; text-transform: none; opacity: 0.85; }

#choices {
  position: absolute;
  left: 50%;
  bottom: 150px;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid var(--acid);
  font-size: 28px;
  white-space: nowrap;
}
#choices b { color: var(--acid); margin-right: 10px; }

#minimap { position: absolute; left: 18px; bottom: 18px; width: 180px; height: 180px; border-radius: 50%; }

/* Jump menu */

#burger {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 46px;
  height: 46px;
  font-size: 26px;
  line-height: 1;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--acid);
  cursor: pointer;
}
#burger:hover, #burger:focus-visible { background: var(--acid); color: #000; outline: none; }

#jumps {
  position: fixed;
  top: 66px;
  right: 14px;
  z-index: 20;
  width: min(300px, calc(100vw - 28px));
  background: rgba(0, 0, 0, 0.88);
  border: 2px solid var(--acid);
}
#jumps button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-family: 'VT323', monospace;
  font-size: 24px;
  text-align: left;
  color: var(--paper);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(245, 228, 0, 0.25);
  cursor: pointer;
}
#jumps button:hover, #jumps button:focus-visible { background: var(--acid); color: #000; outline: none; }

/* Flyers */

#flyer-count { font-size: 24px; color: var(--acid); }
#kit { font-size: 18px; color: var(--paper); opacity: 0.85; }

#toast {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--acid);
  font-size: 26px;
  white-space: nowrap;
  opacity: 0;
}
#toast.show { animation: toast 3.5s ease-out; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  10%, 75% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; }
}

/* Hurt: red creeping in from the edges while they've got hold of you */
#hurt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 45%, rgba(140, 0, 0, 0.85) 100%);
}

/* Shotgun: a crosshair while you aim, and what's left in the barrels and your pockets */
#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  pointer-events: none;
}
#crosshair::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 2px;
  height: 2px;
  background: #fff;
}
#ammo {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  font: 26px 'VT323', monospace;
  color: #f2e8c8;
}

/* Spence's bleeper: a black box with a green LCD, up in the corner for a few seconds */
#pager {
  position: absolute;
  top: 120px;
  right: 24px;
  padding: 14px 14px 18px;
  background: #1c1c1e;
  border-radius: 10px 10px 16px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 #444;
}
#pager .lcd {
  padding: 8px 10px;
  background: #8fa874;
  color: #1a2410;
  font: 22px/1.15 'VT323', monospace;
  letter-spacing: 1px;
  border: 3px solid #0e0e0e;
}
#pager.show { animation: pager 7s ease-out forwards; }
@keyframes pager {
  0% { transform: translateX(140%); }
  6%, 88% { transform: translateX(0); }
  100% { transform: translateX(140%); }
}

#flyerview {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.82);
}
#fv-canvas {
  height: min(86vh, calc((100vw - 32px) * 1.4167));
  max-width: calc(100vw - 32px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  transform: rotate(-1.5deg);
}
.fv-side { max-width: 240px; font-size: 24px; }
#fv-where { color: var(--paper); }
#fv-count { color: var(--acid); margin: 10px 0; }
.fv-keys { color: var(--pink); font-size: 20px; }
@media (max-width: 700px) {
  #flyerview { flex-direction: column; gap: 8px; }
  #fv-canvas { height: min(70vh, calc((100vw - 32px) * 1.4167)); }
  .fv-side { max-width: none; text-align: center; }
}

/* The decks */

#dj {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 12;
  width: min(1100px, calc(100vw - 20px));
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 10px;
  padding: 10px;
  background: rgba(10, 10, 14, 0.88);
  border: 2px solid #333;
  font-size: 18px;
  color: var(--paper);
}
#dj button {
  font-family: 'VT323', monospace;
  font-size: 20px;
  padding: 4px 10px;
  color: var(--paper);
  background: #222;
  border: 2px solid #555;
  cursor: pointer;
  user-select: none;
}
#dj button:hover { border-color: var(--acid); }
#dj button.on { background: var(--acid); color: #000; border-color: var(--acid); }
#dj select { width: 100%; font-family: 'VT323', monospace; font-size: 18px; background: #111; color: var(--paper); border: 1px solid #555; }
#dj input[type=range] { accent-color: var(--acid); cursor: pointer; }
.dj-deck, .dj-mixer { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dj-title { color: var(--acid); letter-spacing: 0.2em; text-transform: uppercase; }
.dj-sleeve { color: #9dd; min-height: 1.2em; font-size: 17px; }
.dj-row { display: flex; gap: 6px; }
.dj-row button { flex: 1; }
.dj-pitchrow { display: flex; gap: 12px; align-items: center; }
.dj-pitch { writing-mode: vertical-lr; height: 110px; width: 26px; }
.dj-pitchval { font-size: 26px; }
.dj-tempo { color: #9dd; min-height: 1.2em; }
.dj-lights { display: flex; gap: 6px; margin: 6px 0; }
.dj-lights i { width: 12px; height: 12px; border-radius: 50%; background: #333; }
.dj-lights i:first-child { border: 1px solid #777; }
.dj-lights i.on { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.dj-keys { color: #888; font-size: 15px; }
.dj-chans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dj-chan { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dj-chan label { display: flex; flex-direction: column; align-items: center; font-size: 15px; color: #aaa; width: 100%; }
.dj-chan label input { width: 90%; }
.dj-vu { display: flex; gap: 2px; }
.dj-vu span { width: 9px; height: 8px; background: #1a2a1a; }
.dj-vu span.on { background: #2f6; }
.dj-vu span:nth-child(n+6).on { background: #fb2; }
.dj-vu span:nth-child(8).on { background: #f33; }
.dj-fader { writing-mode: vertical-lr; direction: rtl; height: 80px; width: 26px; }
.dj-xfade { width: 70%; align-self: center; }
.dj-status { text-align: center; color: var(--pink); min-height: 1.2em; font-size: 22px; }
.dj-help { font-size: 15px; color: #aaa; text-align: center; }
@media (max-width: 800px) {
  #dj { grid-template-columns: 1fr 1fr; }
  .dj-mixer { grid-column: 1 / -1; order: -1; }
}

/* The wardrobe */

#wardrobe {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: min(460px, calc(100vw - 32px));
  padding: 16px;
  background: rgba(10, 10, 14, 0.88);
  border-left: 5px solid var(--pink);
  font-size: 20px;
}
#wardrobe h3 { font-family: 'Rubik Mono One', sans-serif; color: var(--acid); margin: 0 0 12px; font-size: 20px; }
.wr-row { display: grid; grid-template-columns: 80px 36px 1fr 36px; align-items: center; gap: 8px; padding: 8px 6px; border: 2px solid transparent; }
.wr-row.on { border-color: var(--acid); }
.wr-label { color: var(--pink); text-transform: uppercase; letter-spacing: 0.1em; font-size: 17px; }
.wr-name { font-size: 22px; }
.wr-note { color: #aaa; font-size: 16px; line-height: 1.1; }
#wardrobe button { font-family: 'VT323', monospace; font-size: 22px; color: var(--paper); background: #222; border: 2px solid #555; cursor: pointer; }
#wardrobe button:hover { border-color: var(--acid); }
.wr-done { width: 100%; margin-top: 12px; padding: 6px; }
.wr-keys { color: #888; font-size: 15px; margin-top: 8px; }
@media (max-width: 700px) {
  #wardrobe { left: 16px; top: auto; bottom: 16px; transform: none; }
}

/* Petrol gauge under the speedo */
#fuel { display: flex; align-items: center; gap: 4px; font-size: 16px; margin-top: 2px; }
#fuel i { display: block; width: 70px; height: 8px; border: 1px solid var(--paper); }
#fuel span { display: block; height: 100%; background: #7dff6a; }
#fuel.low span { background: #ff3b30; }
#fuel.low b:first-child { color: #ff3b30; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Phones and tablets ---- */

/* Landscape only: on its end, a notice covers everything. */
#rotate { display: none; }
@media (orientation: portrait) {
  body.touch #rotate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #000;
    color: var(--acid);
    font: 30px/1.3 'VT323', monospace;
    text-align: center;
  }
  body.touch #rotate div::before { content: '⟳'; display: block; font-size: 64px; margin-bottom: 12px; }
}

/* The controls: a stick bottom left, a look area over the right, buttons bottom right. */
#touch { position: fixed; inset: 0; z-index: 15; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#touch [hidden] { display: none !important; }
#touch .look { position: absolute; top: 0; right: 0; bottom: 0; left: 38%; pointer-events: auto; }
#touch .stick {
  position: absolute;
  left: calc(22px + env(safe-area-inset-left));
  bottom: 22px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.3);
  pointer-events: auto;
}
#touch .knob {
  position: absolute;
  left: 38px;
  top: 38px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
#touch .buttons {
  position: absolute;
  right: calc(18px + env(safe-area-inset-right));
  bottom: 18px;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px;
  max-width: 260px;
  pointer-events: auto;
}
#touch .tb {
  min-width: 64px;
  height: 52px;
  padding: 0 12px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 22px 'VT323', monospace;
  text-transform: uppercase;
}
#touch .tb.big { min-width: 86px; height: 76px; border-radius: 38px; font-size: 26px; }
#touch .tb.fire { border-color: #ff5a3c; color: #ffb09a; }
#touch .tb.on { background: rgba(255, 255, 255, 0.35); }
#touch .pause {
  position: absolute;
  top: 14px;
  right: calc(70px + env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font: 22px 'VT323', monospace;
  pointer-events: auto;
}

/* The prompt becomes the action button (below); the choices are tapped. The HUD sits above the
   look area so anything in it that's meant to be tapped can be. */
body.touch #hud { z-index: 16; }
body.touch #prompt { display: none !important; }
body.touch #choices { pointer-events: auto; }
#touch .action {
  position: absolute;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  max-width: calc(100vw - 460px);
  min-width: 180px;
  min-height: 56px;
  padding: 8px 22px;
  border: 3px solid var(--acid);
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--acid);
  font: 24px/1.1 'VT323', monospace;
  pointer-events: auto;
}
#touch .action.dead { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.75); pointer-events: none; }
body.touch #choices div { padding: 8px 4px; }

/* Room for your thumbs: the minimap moves up out of the way, the rest shrinks to fit a phone's height. */
body.touch #minimap { left: auto; right: calc(14px + env(safe-area-inset-right)); top: 118px; bottom: auto; width: 110px; height: 110px; }
body.touch #speedo, body.touch #radio, body.touch #ammo { right: auto; left: 50%; transform: translateX(-50%); }
body.touch #speedo { bottom: auto; top: 12px; font-size: 40px; }
body.touch #radio { bottom: auto; top: 58px; }
body.touch #ammo { bottom: auto; top: 12px; }
body.touch #subtitle { bottom: 12px; width: min(700px, calc(100vw - 420px)); font-size: 18px; }
body.touch #prompt { bottom: 110px; }
body.touch #choices { bottom: 100px; }
@media (max-height: 520px) {
  body.touch #objective { top: 10px; left: calc(10px + env(safe-area-inset-left)); max-width: 300px; padding: 6px 10px; font-size: 16px; }
  body.touch #objective .label { font-size: 13px; }
  body.touch #status { top: 8px; right: calc(128px + env(safe-area-inset-right)); }
  body.touch #clock { font-size: 34px; }
  body.touch #money { font-size: 22px; }
  body.touch #flyer-count { font-size: 18px; }
  body.touch #banner { font-size: 30px; }
  body.touch #pager { top: 70px; }
}

/* Short screens (a phone on its side, a small window): everything on the menus smaller and closer. */
.screen { align-items: safe center; overflow-y: auto; }
body.touch .for-keys, body:not(.touch) .for-touch { display: none; }
@media (max-height: 520px) {
  .disc { width: 52px; height: 52px; }
  h1 { font-size: clamp(44px, 13vh, 90px); text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 #000; }
  .date { font-size: 18px; margin-bottom: 12px; }
  nav button { margin: 6px auto; padding: 9px; font-size: 17px; }
  .stats { font-size: 19px; margin-bottom: 12px; }
  .controls table { font-size: 17px; }
}

/* Fruit machine buttons, along the bottom while you play. */
.pad {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  width: 300px; max-width: calc(100vw - 32px); font-family: 'VT323', monospace;
}
@media (max-width: 700px) {
  .pad { right: auto; left: 50%; top: auto; bottom: 16px; transform: translateX(-50%); }
}
.pad[hidden] { display: none; }
.pad .fp-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pad button {
  font-family: 'Rubik Mono One', sans-serif; font-size: 13px; min-width: 88px; padding: 10px 12px;
  color: #111; background: #f5e400; border: 3px solid #111; border-radius: 4px; cursor: pointer;
  box-shadow: 0 3px 0 #000;
}
.pad button:disabled { background: #444; color: #777; cursor: default; box-shadow: none; }
.pad button.fp-held { background: #fff; }
.pad .fp-red { background: #ff3a3a; }
.pad .fp-yellow { background: #f5c400; }
.pad .fp-pink { background: #ff2d95; }
.pad .fp-green { background: #39d14a; }
.pad .fp-leave { background: #222; color: #ddd; border-color: #555; font-size: 11px; min-width: 0; }
.pad .fp-keys { color: #ccc; font-size: 16px; text-shadow: 0 1px 2px #000; text-align: center; }
body.touch .pad .fp-keys { display: none; }

/* The cash machine: its screen, black with green writing, and the keypad under it. */
#atm {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px; background: #6a6a70; border: 6px solid #3a3a40; border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); max-width: calc(100vw - 32px);
}
#atm[hidden] { display: none; }
#atm .atm-screen {
  background: #030703; border: 10px solid #1a1a1c; border-radius: 10px; padding: 14px 18px;
  box-shadow: inset 0 0 30px rgba(57, 255, 20, 0.15);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px);
}
#atm pre {
  margin: 0; color: #39ff14; font: 22px/1.25 'VT323', monospace; min-height: 11.5em; min-width: 14em;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.7);
}
#atm .atm-pad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
#atm .atm-pad button {
  font: 22px 'VT323', monospace; padding: 8px 0; background: #d8d8dc; color: #111;
  border: 2px solid #222; border-radius: 4px; box-shadow: 0 3px 0 #222; cursor: pointer;
}
#atm .atm-pad .atm-cancel { grid-column: 1 / 4; background: #d4101c; color: #fff; }
#atm .atm-pad .atm-clear { background: #f5d020; font-size: 17px; }
#atm .atm-pad .atm-enter { background: #2a9a3a; color: #fff; font-size: 17px; }
#atm .atm-help { color: #eee; font: 16px 'VT323', monospace; }
#atm .atm-note { color: #f5e400; font: 20px 'VT323', monospace; }
body.touch #atm .atm-help { display: none; }
@media (max-height: 560px) {
  #atm { flex-direction: row; align-items: center; }
  #atm pre { font-size: 17px; }
}

/* The intro after the ending's picked (js/intro.js): pictures drifting full screen, the words low down, the title. */
#intro { position: fixed; inset: 0; z-index: 60; background: #000; overflow: hidden; transition: opacity 0.6s; }
#intro.out { opacity: 0; }
#intro .intro-pics { position: absolute; inset: 0; }
#intro .intro-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform, opacity; }
#intro .intro-words { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(80vw, 60rem); text-align: center;
  font: 26px/1.3 'VT323', monospace; color: #fff; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
#intro .intro-title { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
  font-family: 'Rubik Mono One', sans-serif; font-size: clamp(36px, 8vw, 110px); color: #f5e400; text-shadow: 6px 6px 0 #ff2d95; letter-spacing: 0.08em; }
#intro .intro-title span { color: #fff; }
#intro .intro-skip { position: absolute; right: 24px; bottom: 24px; font: 18px 'Rubik Mono One', sans-serif; color: #fff;
  background: rgba(0, 0, 0, 0.5); border: 2px solid #fff; padding: 8px 16px; cursor: pointer; }