/* Clambake shell — palette and type match the acts (airtravel's dark slate +
   cyan/amber, ui-monospace everywhere). */
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #05080c; color: #c9d1d9;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

#act {
  position: fixed; inset: 0; width: 100%; height: 100%; border: 0;
  background: #000; display: none;
}
#act.visible { display: block; }

/* ---- overlay screens ---- */
#screen {
  position: fixed; inset: 0; z-index: 10; display: none;
  align-items: center; justify-content: safe center; flex-direction: column; gap: 22px;
  background: rgba(5, 8, 12, 0.96); text-align: center; padding: 44px 24px 24px;
  box-sizing: border-box; overflow-y: auto;
}
#screen.visible { display: flex; }
#screen.translucent { background: rgba(5, 8, 12, 0.82); }

.kicker { color: #7d8590; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; margin: 0; }
h1.big {
  font-size: clamp(34px, 7vw, 64px); margin: 0; color: #e8edf2; letter-spacing: 2px;
  text-transform: uppercase; text-shadow: 0 0 24px rgba(57, 208, 216, 0.35);
}
.accent { color: #39d0d8; }
.sub { color: #e3c84d; font-size: 16px; margin: 0; letter-spacing: 1px; }
.fine { color: #7d8590; font-size: 12px; margin: 0; }
/* slim brand banner pinned to the top of every overlay screen (compact, so it
   doesn't eat real estate); '•' separates the cheat-code arrows from the date */
#banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 12; display: none;
  align-items: center; justify-content: center; gap: 9px; box-sizing: border-box;
  padding: 6px 16px; background: rgba(13, 17, 23, 0.92); border-bottom: 1px solid #21262d;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  color: #9aa7b2; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); pointer-events: none;
}
#banner.visible { display: flex; }
#banner .nm { color: #e8edf2; }
#banner .arrows { font-size: 15px; letter-spacing: 0; }
#banner .dot { color: #39d0d8; }
#banner .date { color: #39d0d8; }

/* Bottom counterpart to #banner. pointer-events stay off the bar so it never blocks
   clicks on the screen behind it; only the host's report link is clickable. */
#footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 12; display: none;
  align-items: center; justify-content: center; gap: 16px; box-sizing: border-box;
  padding: 6px 16px; background: rgba(13, 17, 23, 0.92); border-top: 1px solid #21262d;
  font-size: 12px; letter-spacing: 1px; color: #6e7681; pointer-events: none;
}
#footer.visible { display: flex; }
#footer .ft-tag { text-transform: uppercase; }
#footer .ft-report {
  color: #39d0d8; text-decoration: none; text-transform: uppercase; font-weight: 700;
  letter-spacing: 1.5px; pointer-events: auto;
}
#footer .ft-report:hover, #footer .ft-report:focus-visible { text-decoration: underline; }
/* the quiet nudge at the bottom of the boards / achievements */
.cheathint { color: #6e7681; font-size: 12px; margin: 10px 0 0; letter-spacing: 0.5px; }

button.cta {
  background: #161b22; color: #39d0d8; border: 2px solid #39d0d8; border-radius: 10px;
  font: inherit; font-size: 20px; letter-spacing: 4px; text-transform: uppercase;
  padding: 16px 44px; cursor: pointer; transition: background 0.15s, transform 0.15s;
}
button.cta:hover, button.cta:focus-visible { background: #0d2b2e; transform: scale(1.04); outline: none; }

button.row {
  background: #161b22; color: #c9d1d9; border: 1px solid #30363d; border-radius: 8px;
  font: inherit; font-size: 15px; letter-spacing: 1px; padding: 13px 18px;
  cursor: pointer; width: min(440px, 86vw); text-align: left; display: flex;
  justify-content: space-between; align-items: center; gap: 12px;
}
button.row:hover, button.row:focus-visible { border-color: #39d0d8; color: #39d0d8; outline: none; }
button.row .status { font-size: 12px; color: #7ee787; }
button.row:disabled { opacity: 0.45; cursor: default; }
button.row:disabled:hover { border-color: #30363d; color: #c9d1d9; }

.menu { display: flex; flex-direction: column; gap: 10px; align-items: center; }
/* open-mode hub: section headers ("Get to Rhinelander", …) + a divider above the boards */
.menu .grp {
  width: min(440px, 86vw); text-align: left; color: #39d0d8;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 14px 0 0;
}
.menu .grp:first-child { margin-top: 0; }
.menu .sep { width: min(440px, 86vw); height: 1px; background: #21262d; margin: 12px 0 2px; }

/* top-level section headers (Hang out · Multiplayer / Play again) — stronger than
   the cyan sub-group labels, in the amber the UI uses for "this way in" copy */
.menu .grp.section {
  width: min(440px, 86vw); text-align: left; color: #e3c84d; font-weight: 700;
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 20px 0 0;
}
.menu .grp.section:first-child { margin-top: 0; }
.menu .grp-sub { width: min(440px, 86vw); text-align: left; color: #7d8590; font-size: 12px; margin: 3px 0 2px; }

/* ---- live multiplayer "hang out" status cards ---- */
.mp-card {
  width: min(440px, 86vw); border: 1px solid #30363d; border-radius: 10px;
  background: #0d1117; overflow: hidden;
}
.mp-card + .mp-card { margin-top: 6px; }
.mp-head {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  background: #161b22; color: #c9d1d9; border: 0; border-bottom: 1px solid #21262d;
  font: inherit; font-size: 15px; letter-spacing: 1px; padding: 12px 16px; cursor: pointer; text-align: left;
}
.mp-head:hover, .mp-head:focus-visible { color: #39d0d8; outline: none; }
.mp-head .mp-ttl { flex: 1; }
.mp-head .mp-count { font-size: 12px; color: #7ee787; white-space: nowrap; }
.mp-head .mp-go { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #39d0d8; }

.mp-now {
  padding: 7px 16px; font-size: 12px; color: #e3c84d; border-bottom: 1px solid #21262d;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-now b { color: #fff; }
.mp-now .idle { color: #7d8590; }

/* sized to ~5 names; scrolls past that (the header still shows the full count) */
.mp-list { max-height: 154px; overflow-y: auto; padding: 4px 0; }
#mp-racing-list { max-height: 234px; }
.mp-list .mp-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 16px; font-size: 14px; text-align: left;
}
.mp-row .nm { flex: 1; color: #c9d1d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-row .ics { font-size: 14px; letter-spacing: 3px; white-space: nowrap; }
.mp-empty { color: #7d8590; font-size: 12px; padding: 10px 16px; text-align: left; margin: 0; }

/* racing rows carry a second line of live stats under the name */
.mp-rrow { flex-direction: column; align-items: stretch; gap: 2px; }
.mp-rrow .mp-r1 { display: flex; align-items: center; gap: 8px; }
.mp-rrow .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.25); flex: none; }
.mp-rrow .sc { color: #e3c84d; font-size: 13px; }
.mp-rrow .mp-sub { color: #7d8590; font-size: 11px; padding-left: 20px; line-height: 1.5; }

/* ---- two-up leg choice cards (Fly/Pac-Man, Drive/Korey) ---- */
.choice { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
button.pick {
  background: #161b22; color: #c9d1d9; border: 2px solid #30363d; border-radius: 12px;
  font: inherit; padding: 18px 22px; cursor: pointer; width: min(300px, 86vw);
  text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center;
  transition: border-color 0.15s, transform 0.15s, color 0.15s;
}
button.pick:hover, button.pick:focus-visible { border-color: #39d0d8; color: #39d0d8; transform: translateY(-2px); outline: none; }
button.pick .ttl { font-size: 19px; letter-spacing: 2px; text-transform: uppercase; }
button.pick .ds { font-size: 12px; color: #7d8590; letter-spacing: 0.4px; line-height: 1.45; }
button.pick:hover .ds, button.pick:focus-visible .ds { color: #9fb0bd; }
button.pick .tag { font-size: 11px; letter-spacing: 2px; }
/* exactly one card is highlighted per choice, by device (see pickCard): the real
   game in primary cyan — "recommended on a computer"; the easy shortcut in the
   softer amber the rest of the UI uses for low-effort exits. Never disables the other. */
button.pick.real { border-color: #39d0d8; box-shadow: 0 0 18px rgba(57, 208, 216, 0.22); }
button.pick.real:hover, button.pick.real:focus-visible { border-color: #5ce1e6; }
button.pick.real .tag { color: #39d0d8; }
button.pick.easy { border-color: #e3c84d; box-shadow: 0 0 18px rgba(227, 200, 77, 0.22); }
button.pick.easy:hover, button.pick.easy:focus-visible { border-color: #f2dc6e; color: #e3c84d; }
button.pick.easy .tag { color: #e3c84d; }

/* the coward's exits: filled and unmissable, but smaller and amber — the big
   cyan CTA stays the obvious "real" way in */
button.scaredy {
  background: #e3c84d; color: #1b1503; border: 0; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.4px;
  padding: 12px 18px; cursor: pointer; max-width: min(560px, 90vw); line-height: 1.45;
  box-shadow: 0 0 16px rgba(227, 200, 77, 0.3);
  transition: background 0.15s, transform 0.15s;
}
button.scaredy:hover, button.scaredy:focus-visible { background: #f2dc6e; transform: scale(1.02); outline: none; }

/* mobile: the main CTA is visibly a dead end (still clickable for the nag) */
button.cta.ghosted {
  opacity: 0.4; color: #7d8590; border-color: #7d8590; cursor: pointer;
}
button.cta.ghosted:hover, button.cta.ghosted:focus-visible { background: #161b22; transform: none; }

.shout {
  color: #e3c84d; font-size: 14px; font-weight: 700; letter-spacing: 1.5px;
  margin: 0; max-width: min(620px, 92vw); line-height: 1.6;
}
.nag { color: #ff8a8a; min-height: 1.2em; }

/* ---- boarding-pass layover card ---- */
.boarding {
  background: #0d1117; border: 1px solid #30363d; border-radius: 14px;
  padding: 26px 34px; min-width: min(560px, 88vw); text-align: left;
  box-shadow: 0 0 60px rgba(57, 208, 216, 0.12);
}
.boarding .airline { color: #e3c84d; letter-spacing: 4px; font-size: 13px; margin: 0 0 14px; }
.boarding .legs {
  display: flex; align-items: baseline; gap: 18px; font-size: clamp(30px, 5vw, 46px);
  color: #e8edf2; letter-spacing: 2px;
}
.boarding .legs .arrow { color: #39d0d8; font-size: 0.7em; }
.boarding .rule { border: 0; border-top: 1px dashed #30363d; margin: 18px 0; }
.boarding .row2 { display: flex; gap: 34px; color: #7d8590; font-size: 13px; }
.boarding .row2 b { display: block; color: #c9d1d9; font-size: 15px; letter-spacing: 1px; }
.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---- corner pills ---- */
#pills { position: fixed; right: 18px; bottom: 18px; z-index: 20; display: flex; gap: 10px; }
#pills button {
  background: rgba(13, 17, 23, 0.92); color: #39d0d8; border: 1px solid #39d0d8;
  border-radius: 999px; font: inherit; font-size: 14px; letter-spacing: 2px;
  text-transform: uppercase; padding: 10px 22px; cursor: pointer;
  box-shadow: 0 0 18px rgba(57, 208, 216, 0.25);
}
#pills button:hover { background: #0d2b2e; }

/* ---- achievement-unlock toast ---- */
.toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: rgba(13, 17, 23, 0.96); border: 1px solid #e3c84d; border-radius: 10px;
  color: #e3c84d; padding: 12px 22px; font-size: 14px; letter-spacing: 1px;
  box-shadow: 0 0 24px rgba(227, 200, 77, 0.3); max-width: min(520px, 92vw); text-align: center;
  animation: toastin 0.3s ease-out;
}
.toast b { color: #fff; }
.toast .pop { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast .pop + .pop { margin-top: 10px; }
.toast .badge {
  width: 96px; height: 96px; object-fit: cover; border-radius: 8px;
  border: 1px solid #e3c84d; box-shadow: 0 0 14px rgba(227, 200, 77, 0.35);
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- scrollable panel for high-scores / achievements ---- */
.panel { width: min(620px, 92vw); max-height: 64vh; overflow-y: auto; padding: 2px; }
.sec { margin-bottom: 20px; }
.sec h3 {
  color: #39d0d8; font-size: 14px; letter-spacing: 2px; margin: 0 0 8px;
  text-transform: uppercase; text-align: left;
}

/* leaderboard rows */
.hs-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 13px; margin-bottom: 4px;
  border: 1px solid #30363d; border-radius: 6px; font-size: 14px;
}
.hs-row .rank { color: #7d8590; width: 1.4em; text-align: right; }
.hs-row .nm { flex: 1; text-align: left; color: #c9d1d9; }
.hs-row .sc { color: #e3c84d; }
.hs-row.mine { border-color: #39d0d8; }
.hs-row.mine .nm { color: #39d0d8; }
.hs-row.dev { border-style: dashed; }
.hs-row .devtag {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #b07cff;
  border: 1px solid #6f42c1; border-radius: 4px; padding: 0 4px; margin-left: 6px;
}

/* fastest-rampage time boards (3 independent top-50 lists, each scrollable) */
.tm-title { color: #e3c84d; font-size: 15px; letter-spacing: 2px; margin: 18px 0 10px; text-transform: uppercase; text-align: left; }
.tm-sec { margin-bottom: 16px; }
.tm-sub { color: #39d0d8; font-size: 12px; letter-spacing: 1.5px; margin: 0 0 6px; text-transform: uppercase; text-align: left; }
.tm-list { max-height: 200px; overflow-y: auto; padding-right: 2px; }
.tm-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 12px; margin-bottom: 3px;
  border: 1px solid #30363d; border-radius: 6px; font-size: 13px;
}
.tm-row .rank { color: #7d8590; width: 1.8em; text-align: right; }
.tm-row .nm { flex: 1; text-align: left; color: #c9d1d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-row .day { color: #7d8590; font-size: 11px; white-space: nowrap; }
.tm-row .tm { color: #7ee787; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4.5em; text-align: right; }
.tm-row.mine { border-color: #39d0d8; }
.tm-row.mine .nm { color: #39d0d8; }
.tm-row.dev { border-style: dashed; }

/* high-score expand toggle + "include dev team?" checkbox */
.hs-expand {
  background: none; border: none; color: #39d0d8; font: inherit; font-size: 12px;
  letter-spacing: 1px; cursor: pointer; padding: 4px 2px; text-align: left;
}
.hs-expand:hover, .hs-expand:focus-visible { color: #7ee7ef; outline: none; }
.devtoggle {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  color: #7d8590; font-size: 13px; margin: 6px 0 14px; cursor: pointer;
}
.devtoggle input { accent-color: #39d0d8; cursor: pointer; }

/* ---- territory (Korey mode) ---- */
.terr-tabs { display: flex; gap: 8px; }
.terr-tab {
  background: #161b22; color: #7d8590; border: 1px solid #30363d; border-radius: 999px;
  font: inherit; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 20px; cursor: pointer;
}
.terr-tab:hover, .terr-tab:focus-visible { color: #c9d1d9; border-color: #7d8590; outline: none; }
.terr-tab.active { color: #39d0d8; border-color: #39d0d8; background: #0d2b2e; }
/* the smaller second row: Korey rides vs Drive yourself (amber when active, so the
   two tab rows read as different axes) */
.terr-tab.sm { font-size: 11px; padding: 5px 14px; }
.terr-tab.sm.active { color: #e3c84d; border-color: #e3c84d; background: #2b230d; }

.terr-stats { font-size: 14px; min-height: 1.2em; }
.terr-wrap {
  position: relative; width: min(920px, 94vw); height: min(56vh, 560px);
  border: 1px solid #30363d; border-radius: 10px; overflow: hidden; background: #0a0e08;
}
#terrmap, #demomap { width: 100%; height: 100%; display: block; touch-action: none; }
#terrmap { cursor: grab; }
#terrmap:active { cursor: grabbing; }
.terr-ctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.terr-ctl button {
  width: 34px; height: 34px; background: rgba(13, 17, 23, 0.9); color: #39d0d8;
  border: 1px solid #39d0d8; border-radius: 8px; font: inherit; font-size: 16px; cursor: pointer;
}
.terr-ctl button:hover { background: #0d2b2e; }
.terr-toggles { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.terr-toggles .devtoggle { margin: 0; }

/* per-guest legend under the "last on each block" view */
.terr-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  max-width: min(920px, 94vw); max-height: 130px; overflow-y: auto;
}
.terr-lg {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  border: 1px solid #30363d; border-radius: 999px; padding: 4px 12px;
}
.terr-lg.mine { border-color: #39d0d8; }
.terr-lg .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.terr-lg .nm { color: #c9d1d9; }
.terr-lg.mine .nm { color: #39d0d8; }
.terr-lg .n { color: #e3c84d; font-size: 12px; }

/* ---- Korey ride replays ---- */
/* ▶ replay chip on time-board rows (empty spacer keeps rows without a demo aligned) */
.tm-play {
  flex: none; width: 26px; height: 22px; padding: 0; font: inherit; font-size: 11px;
  background: #161b22; color: #39d0d8; border: 1px solid #30363d; border-radius: 5px;
  cursor: pointer;
}
.tm-play:hover, .tm-play:focus-visible { border-color: #39d0d8; outline: none; }
.tm-play.none { visibility: hidden; }

/* the player's transport bar under the map */
.demo-bar {
  display: flex; align-items: center; gap: 10px; width: min(920px, 94vw);
}
.demo-bar button {
  flex: none; min-width: 40px; height: 34px; padding: 0 10px; font: inherit; font-size: 15px;
  background: #161b22; color: #39d0d8; border: 1px solid #39d0d8; border-radius: 8px; cursor: pointer;
}
.demo-bar button:hover { background: #0d2b2e; }
.demo-bar input[type="range"] { flex: 1; accent-color: #39d0d8; cursor: pointer; }
.demo-bar #demo-clock {
  flex: none; color: #e3c84d; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 7.5em; text-align: center;
}

/* territory board on the High Scores screen: two m² columns per row */
.terr-cols {
  display: flex; justify-content: flex-end; gap: 18px; padding: 0 14px 4px;
  color: #7d8590; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
}
.hs-row .sc.held { color: #7ee787; min-width: 6.5em; text-align: right; }

/* achievement tiles */
.ach {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; margin-bottom: 6px;
  border: 1px solid #30363d; border-radius: 8px; text-align: left;
}
.ach.unlocked { border-color: #7ee787; }
.ach .ic { font-size: 18px; line-height: 1.3; }
.ach .badge-sm { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; display: block; }
.ach .ach-txt { flex: 1; }
.ach .nm { color: #e8edf2; font-size: 14px; letter-spacing: 0.5px; }
.ach.locked .nm { color: #7d8590; }
.ach .ds { color: #7d8590; font-size: 12px; margin-top: 2px; }
.empty { color: #7d8590; font-size: 13px; }

/* "👥 N" winners count chip on each achievement; tap to peek the names */
.ach-who {
  flex: none; align-self: center; font: inherit; font-size: 12px; white-space: nowrap;
  background: #161b22; color: #9fb0bd; border: 1px solid #30363d; border-radius: 999px;
  padding: 4px 10px; cursor: pointer; transition: border-color 0.12s, color 0.12s;
}
.ach-who:hover, .ach-who:focus-visible { border-color: #39d0d8; color: #39d0d8; outline: none; }
.ach-who.none { color: #586069; cursor: default; }
.ach-who.none:hover { border-color: #30363d; color: #586069; }

/* floating winners popover — overlays, never reflows the list */
.who-pop {
  position: fixed; z-index: 50; width: min(260px, 80vw);
  background: rgba(13, 17, 23, 0.98); border: 1px solid #39d0d8; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); padding: 8px 0; text-align: left;
}
.who-pop .who-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid #21262d;
  color: #39d0d8; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
.who-pop .who-x {
  background: none; border: 0; color: #7d8590; font: inherit; font-size: 14px; cursor: pointer; padding: 0 2px;
}
.who-pop .who-x:hover { color: #c9d1d9; }
.who-pop .who-list { max-height: 220px; overflow-y: auto; }
.who-pop .who-row { padding: 5px 14px; font-size: 13px; color: #c9d1d9; }
.who-pop .who-row:nth-child(even) { background: rgba(255, 255, 255, 0.02); }