/* The lot fills the page; everything else floats over it. The body's second row is the hub navbar's spacer. */
/* fonts kept in the folder (fonts/LICENSES.txt), so the signs are right offline and nothing is asked of Google */
@font-face { font-family: "Big Shoulders Display"; font-weight: 700; font-display: swap; src: url("fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-display: swap; src: url("fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Monoton"; font-weight: 400; font-display: swap; src: url("fonts/monoton-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url("fonts/vt323-latin-400-normal.woff2") format("woff2"); }
:root {
  --bg: #100d14;
  --surface: #19151f;
  --line: #2f2938;
  --fg: #efe8dd;
  --muted: #a59cae;
  --accent: #f0a540;
  --accent-ink: #1a1206;
  --pink: #ff3fa4;
  --cyan: #3ff3ff;
  --scrim: rgba(10, 8, 14, .74);
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad-l: max(10px, env(safe-area-inset-left, 0px));
  --pad-r: max(10px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
/* the hub's cross-fade between pages: nav.js opts every page in, but it runs after this page's heavy scripts, by when
   the page has been drawn and the transition is skipped (an uncaught "Transition was skipped" on Back and Forward) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--body); font-size: 15px; line-height: 1.5;
  height: 100vh; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden;
}
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lot { min-height: 0; display: grid; } /* the page's main landmark; the lot inside it is the application */
.stage {
  position: relative; min-height: 0; overflow: hidden; background: #000; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.stage canvas#view { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
/* the film: behind the canvas, bent onto the screen each frame (screen.js) */
.player { position: absolute; left: 0; top: 0; width: 640px; height: 480px; z-index: 0; transform-origin: 0 0; background: #000; pointer-events: none; visibility: hidden; }
.player iframe, .player video { display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
body.close .player { z-index: 6; pointer-events: auto; box-shadow: 0 0 0 100vmax rgba(5, 4, 9, .82); }

.hud { position: absolute; z-index: 3; left: var(--pad-l); top: 10px; right: var(--pad-r); pointer-events: none; display: flex; flex-wrap: wrap; gap: 6px; padding-right: 52px; }
/* the HUD reads like the lot's own signage: square chips in the pixel face */
.hud span { font: 17px/1 VT323, var(--mono); letter-spacing: .02em; color: var(--fg); background: var(--scrim); padding: 5px 8px 4px; border-radius: 3px; border: 1px solid rgba(63, 243, 255, .22); max-width: 100%; }
.hud .now { color: var(--accent); }
@media (min-width: 1600px) { .hud span { font-size: 21px; } } /* 17px is small on a big screen */
.menu-btn {
  position: absolute; right: 0; top: 0; pointer-events: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--scrim); cursor: pointer; display: grid; place-content: center; gap: 5px; padding: 0;
}
.menu-btn i { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--fg); }
.hint { position: absolute; z-index: 3; left: var(--pad-l); bottom: 66px; pointer-events: none; max-width: min(55%, 300px); font-size: 13px; line-height: 1.35; color: var(--fg); background: var(--scrim); padding: 7px 10px; border-radius: 8px; }
@media (pointer: coarse) { .hint { bottom: 216px; max-width: 200px; } }
.stick { position: absolute; z-index: 2; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(10,8,14,.35); pointer-events: none; }
.stick.ghost { left: calc(var(--pad-l) + 66px); top: calc(100% - 150px); opacity: .55; }
.stick.ghost::after { content: "walk"; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; text-align: center; font: 10px var(--mono); color: var(--muted); }
.stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.55); }

/* bottom right: the game, ride or film prompt */
.bottom { position: absolute; z-index: 3; right: var(--pad-r); bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(76%, 380px); pointer-events: none; }
.bottom > * { pointer-events: auto; }
.prompt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.prompt:empty { display: none; }

.prompt button, .card button, .playbar button, .close-bar button, .door .primary {
  font: 600 13px/1 var(--body); min-height: 44px; padding: 10px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
}
.prompt kbd { font: 11px/1 var(--mono); padding: 2px 5px; margin-left: 2px; border: 1px solid currentColor; border-radius: 3px; opacity: .75; }
.prompt button.quiet, .playbar button.quiet { background: var(--scrim); color: var(--fg); border-color: var(--line); }
.card {
  position: absolute; z-index: 4; left: var(--pad-l); right: var(--pad-r); top: calc(var(--hud-b, 46px) + 10px); max-width: 420px; padding: 14px 16px; /* under the HUD, however many rows it takes */
  background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px;
  max-height: calc(100% - var(--hud-b, 46px) - 20px); overflow-y: auto; overscroll-behavior: contain; /* zoomed right in, the card scrolls rather than running off */
}
@media (max-height: 300px) { .card { top: 10px; max-height: calc(100% - 20px); } } /* zoomed to 400%, the HUD would leave it no room: it covers the HUD while open */
.card .meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.card h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; text-wrap: balance; }
.card p { margin: 0; font-size: 14px; white-space: pre-line; }
/* the board at the ticket booth */
.board .notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.board .notes span { color: var(--muted); }
.board .pin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.board .pin label { flex-basis: 100%; }
.board .pin input { flex: 1 1 12em; min-height: 44px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--fg); font: 14px var(--body); }
/* the photo booth: its flash, and the strip it gives you */
.flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .45s ease-out; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flash.on { animation-duration: .2s; } @keyframes flash { from { opacity: .35; } to { opacity: 0; } } }
.strip img { display: block; width: auto; max-width: 100%; max-height: min(52vh, 420px); margin: 4px auto; border-radius: 3px; }
.strip .save { display: inline-flex; align-items: center; font: 600 13px/1 var(--body); min-height: 44px; padding: 0 14px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.card .actions { display: flex; gap: 8px; margin-top: 4px; }
/* a talk: who's speaking, their line, and what you could say back */
.talk p { font-size: 15px; }
/* along the bottom third, the person you're talking to in view above it (the prompt and the walk stick step aside) */
.card.talk { top: auto; bottom: 12px; left: var(--pad-l); right: var(--pad-r); width: auto; max-width: 720px; margin: 0 auto; max-height: 38%; }
body.talking .bottom, body.talking .stick { display: none; }
.talk .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; margin-top: 4px; }
.talk .choices button { text-align: left; min-height: 44px; background: rgba(255, 255, 255, .04); color: var(--fg); border-color: var(--line); }
.talk .choices button:hover, .talk .choices button:focus-visible { border-color: var(--accent); }
.talk kbd { font: 11px/1 var(--mono); padding: 2px 5px; margin-right: 4px; border: 1px solid currentColor; border-radius: 3px; opacity: .7; }
.toast {
  position: absolute; z-index: 5; left: 50%; top: 84px; transform: translateX(-50%); width: max-content; max-width: min(calc(100% - 20px), 360px); text-align: center;
  font: 18px/1.1 VT323, var(--mono); padding: 7px 12px 6px; border-radius: 4px; pointer-events: none;
  background: var(--accent); color: var(--accent-ink); transition: opacity .3s, transform .3s;
}
.toast.off { opacity: 0; transform: translate(-50%, -8px); }
/* with a card open, just under it and lined up with it: lower down it covered the prompt */
.card:not(.talk):not([hidden]) ~ .toast { top: min(calc(var(--hud-b, 46px) + 18px + var(--card-h, 120px)), calc(100% - 60px)); left: var(--pad-l); transform: none; }
.card:not(.talk):not([hidden]) ~ .toast.off { transform: translateY(-8px); }
.playbar:not([hidden]) ~ .toast { top: auto; bottom: 76px; }
.playbar { position: absolute; z-index: 4; left: var(--pad-l); right: var(--pad-r); top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: rgba(10, 8, 14, .88); } /* darker than the scrim: the hint sits over the brightest games */
/* pause: two bars, a play triangle once paused (drawn, so it looks the same everywhere) */
.playbar button.icon { width: 44px; padding: 0; display: grid; place-items: center; }
.playbar button.icon svg { fill: currentColor; }
.playbar button.icon .go, .playbar button.icon[aria-pressed="true"] .bars { display: none; }
.playbar button.icon[aria-pressed="true"] .go { display: inline; }
.playbar .gt { font-family: var(--display); font-weight: 900; font-size: 22px; text-transform: uppercase; line-height: 1; }
.playbar .gs { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 12px; color: var(--accent); margin-right: auto; font-variant-numeric: tabular-nums; }
.playbar .sign { display: flex; align-items: center; gap: 8px; flex-basis: 100%; font-size: 13px; color: var(--accent); }
.playbar .sign[hidden] { display: none; }
.playbar .sign input { width: 4.2em; min-height: 44px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--accent); background: rgba(255, 255, 255, .06); color: var(--fg); font: 22px/1 VT323, var(--mono); text-transform: uppercase; letter-spacing: .2em; }
.playbar .gh { flex-basis: 100%; font-size: 13px; color: #cfc7d6; }
@media (max-width: 480px) { .playbar .gt { margin-right: auto; } .playbar .gs { order: 5; flex-basis: 100%; } .playbar .gh { order: 6; } } /* a phone: the score on its own row, whole */
/* a seat: the screen framed and nothing in the way, only a faint way back up */
body.seated .hud, body.seated .hint, body.seated .bottom, body.seated .stick { visibility: hidden; }
body.riding .stick, body.riding .hint { visibility: hidden; }
.stand-up { position: absolute; z-index: 5; right: var(--pad-r); top: 10px; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--scrim); color: var(--fg); font: 600 13px/1 var(--body); opacity: .7; cursor: pointer; }
.stand-up:hover, .stand-up:focus-visible { opacity: 1; }
/* in your car: three buttons along the foot, out of the screen's way */
.car-bar { position: absolute; z-index: 5; left: var(--pad-l); right: var(--pad-r); bottom: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.car-bar[hidden] { display: none; }
.car-bar button { font: 600 13px/1 var(--body); min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--scrim); color: var(--fg); cursor: pointer; }
#closeTitle { color: var(--fg); }
.close-bar { position: absolute; z-index: 7; left: var(--pad-l); right: var(--pad-r); bottom: 10px; display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* the menu: a sheet from the bottom on a phone, a panel at the right on a wider screen */
.sheet {
  position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: 82%; overflow-y: auto; overscroll-behavior: contain; /* one height for every tab, so the tabs stay where your finger is */
  padding: 12px var(--pad-r) 18px var(--pad-l); background: rgba(16, 13, 20, .96); border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
  user-select: text; -webkit-user-select: text;
}
@media (min-width: 760px) { .sheet { left: auto; top: 0; width: 400px; height: auto; max-height: none; border-top: 0; border-left: 1px solid var(--line); border-radius: 0; } }
.sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; position: sticky; top: -12px; padding-top: 2px; background: inherit; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.tabs button { flex: none; font: 600 13px/1 var(--body); padding: 10px 11px; min-height: 44px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--fg); border-color: var(--line); background: var(--surface); }
.sheet .x { flex: none; font: 600 13px/1 var(--body); padding: 10px 12px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
.panel p { margin: 0 0 12px; }
.panel h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; margin: 16px 0 4px; font-weight: 600; }
.panel h3:first-child { margin-top: 0; }
.panel a { color: var(--accent); }
.small { font-size: 13px; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.chip { flex: none; font: 600 13px/1 var(--body); min-height: 44px; padding: 10px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip:disabled { opacity: .45; cursor: default; }
.carry-none { margin: 0; font-size: 13px; color: var(--muted); }
.film-art { float: left; width: 96px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; margin: 0 12px 8px 0; background: var(--surface); }
#panel-film .row { clear: both; }
.film-now { font-weight: 600; }
.coming { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.coming li { display: grid; grid-template-columns: 4.6em 1fr; column-gap: 8px; font-size: 13.5px; }
.coming time { grid-row: span 2; font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 2px; }
.coming span { color: var(--muted); font-size: 12.5px; }
#plan { width: 100%; max-width: 560px; height: auto; border-radius: 8px; display: block; }

.wallet-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wallet-head .count { font-family: var(--mono); font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.linkbtn { margin-left: auto; font: 500 12px var(--mono); background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 4px 6px; }
.unlocks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.unlocks span { font-family: var(--mono); font-size: 11.5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.unlocks span.on { border-color: var(--accent); color: var(--fg); }
.stubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.stub { display: grid; gap: 3px; align-content: start; padding: 10px 16px; border-radius: 6px; border: 1px dashed var(--line); min-width: 0; color: var(--muted); }
.stub[role="button"] { cursor: pointer; }
.stub .kind { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.stub .nm { font-weight: 600; font-size: 14px; color: var(--fg); }
.stub .hn { font-size: 12.5px; }
.stub.found {
  border: 0; color: #2a1d0c; background: var(--stub, #f0a540);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.stub.found .nm { color: #1a1206; }

/* the door: you're already at the gate, and one tap anywhere comes in (it's the tap that lets the film and the lot
   be heard). The lot shows through; a line at the foot says how, and what's on */
.door { position: absolute; z-index: 9; inset: 0; background: linear-gradient(to bottom, rgba(10, 8, 14, 0) 45%, rgba(10, 8, 14, .78)); }
/* behind the door, the controls wait */
body:not(.entered) .hud, body:not(.entered) .hint, body:not(.entered) .bottom, body:not(.entered) .stick { visibility: hidden; }
.door-tap { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 16px max(36px, calc(env(safe-area-inset-bottom, 0px) + 24px)); border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer; text-align: center; }
.door-go { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: .02em; padding: 10px 20px; border-radius: 999px; background: var(--scrim); border: 1px solid var(--accent); color: var(--fg); text-shadow: 0 0 14px rgba(255, 63, 164, .55); }
@media (prefers-reduced-motion: no-preference) { .door-go { animation: door-pulse 2.4s ease-in-out infinite; } }
@keyframes door-pulse { 50% { border-color: var(--pink); box-shadow: 0 0 18px rgba(255, 63, 164, .35); } }
.door-tap:focus-visible { outline: none; }
.door-tap:focus-visible .door-go { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.door .now { color: var(--accent); font-family: var(--mono); font-size: 12.5px; max-width: 34em; background: var(--scrim); padding: 4px 10px; border-radius: 6px; }
.door .now:empty { display: none; }
.door-off { position: absolute; inset: auto 16px 36px; margin: 0 auto; max-width: 30em; padding: 12px 14px; border-radius: 10px; background: var(--scrim); color: var(--fg); text-align: center; }
.door-off a { color: var(--accent); }
/* Windows contrast themes paint every background the same, so the drawn bars and the pressed and chosen states get system colors */
@media (forced-colors: active) {
  .menu-btn i, .stick i { forced-color-adjust: none; background: CanvasText; }
  .chip[aria-pressed="true"], .tabs button[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}