@font-face {
  font-family: "Lilita One";
  src: url("LilitaOne-Regular.ttf") format("truetype");
  font-display: block;
}

:root {
  --sky: #2c9eec;
  --sea: #30b9fc;
  --gold: #f4d210;
  --gold-lip: #c49608;
  --grass: #25d315;
  --grass-lip: #128c0c;
  --white-lip: #b0c4da;
  --ink: #0c1220;
  --heart: #f80234;
  --line: 3px;   /* the one ink line of the menu, thinner than the old 6 px */
  --hud: 1;      /* the game HUD's scale, kept by frontdoor.js */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky);
  color: #fff;
  font: 20px/1.3 "Lilita One", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* The game fills the window; Unity matches its render size to this. Behind the start menu it runs the
   Race course as a living world (PongoMenuWorld). */
#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  outline: none;
  background: var(--sky);
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
}
.screen[hidden] { display: none; }

/* ---- The start menu: Grand Prix ---- */

#front {
  display: block;
  padding: 0;
  text-align: left;
  transition: opacity 0.35s;
}
#front.leaving { opacity: 0; pointer-events: none; }
#front[hidden] { display: none; }

/* A still of the course until the game is running behind the menu, then the live world shows through. */
.poster {
  position: absolute;
  inset: 0;
  background: var(--sky) url("menu-poster.jpg") center / cover no-repeat;
  animation: drift 24s ease-in-out infinite alternate;
  transition: opacity 1.2s;
}
body.world .poster { opacity: 0; animation: none; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.08) translate(-1%, 0.5%); } }

#loading {
  background: var(--sky) url("menu-poster.jpg") center / cover no-repeat;
}

.logo {
  position: absolute;
  left: 3.6vw;
  top: 3vh;
  margin: 0;
  width: clamp(300px, 40vw, 760px);
  font-weight: normal;
  pointer-events: none;
}
.wordmark {
  display: block;
  width: 100%;
  overflow: visible;
  transform: skewX(-9deg) rotate(-4deg);
  filter: drop-shadow(0 6px 14px rgba(8, 30, 60, 0.22));
}
.wordmark text {
  font-family: "Lilita One", sans-serif;
  font-size: 240px;
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 11px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.plate {
  position: absolute;
  left: 18%;
  top: 76%;
  display: block;
  padding-bottom: 6px;
  transform: skewX(-9deg) rotate(-4deg);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 6px 0 0;
  background: var(--gold-lip);
  border: var(--line) solid var(--ink);
  border-radius: 14px;
}
.plate-face {
  position: relative;
  display: block;
  padding: 0.05em 0.7em 0.12em;
  background: var(--gold);
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
  font-size: clamp(26px, 3.2vw, 60px);
  letter-spacing: 0.2em;
  line-height: 1.15;
}

.dock {
  position: absolute;
  left: 3.6vw;
  right: 3.6vw;
  bottom: 5vh;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

/* A slab: a flat toon face over a darker lip, a flat band of light and one thin ink line, like the game's
   props. Pressing sinks the face into its lip with a small squash; letting go springs it back with sparks. */
.slab {
  --face: #fff;
  --lip: var(--white-lip);
  --depth: 8px;
  --radius: 22px;
  position: relative;
  display: block;
  padding: 0 0 var(--depth);
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
}
.slab::before {
  content: "";
  position: absolute;
  inset: var(--depth) 0 0;
  background: var(--lip);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
}
.slab-face {
  --sink: 0px;
  --sx: 1;
  --sy: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  background: var(--face);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  transform: translateY(var(--sink)) scale(var(--sx), var(--sy));
  transition: transform 0.22s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.slab-face::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 5px;
  height: 36%;
  border-radius: calc(var(--radius) - 7px);
  background: rgba(255, 255, 255, 0.26);
  pointer-events: none;
}
button.slab { cursor: pointer; }
button.slab:hover:not(:disabled) .slab-face { --sink: -2px; }
button.slab.down .slab-face {
  --sink: calc(var(--depth) * 0.8);
  --sx: 1.03;
  --sy: 0.95;
  transition-duration: 0.06s;
}
button.slab:focus-visible { outline: none; }
button.slab:focus-visible .slab-face { box-shadow: 0 0 0 4px var(--gold); }
button.slab:disabled { cursor: default; filter: grayscale(1) brightness(0.92); }

.gold { --face: var(--gold); --lip: var(--gold-lip); }
.green { --face: var(--grass); --lip: var(--grass-lip); }

.card { --depth: 7px; }
.card > .slab-face {
  flex-direction: column;
  align-items: stretch;
  padding: 10px 26px 12px;
}
.card label {
  position: relative;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}
#name {
  position: relative;
  width: 13ch;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: clamp(30px, 2.6vw, 50px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  outline: none;
}
#name[readonly] { cursor: default; }
#name:focus { text-decoration: underline var(--gold) 4px; text-underline-offset: 6px; }

/* Edit: a small pen slab beside the name, inside the card. */
.name-row { position: relative; display: flex; align-items: center; gap: 14px; }
.edit { --radius: 11px; --depth: 4px; width: 44px; height: calc(44px + var(--depth)); flex: none; }
.edit .slab-face { justify-content: center; }
.edit .slab-face::after { display: none; }
.edit svg { position: relative; width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* The music button, top right of the start menu: a small gold slab; the speaker's waves give way to a cross when it's off. */
.mute { --radius: 16px; position: absolute; top: 3vh; right: 3.6vw; width: 64px; height: calc(64px + var(--depth)); }
.mute .slab-face { justify-content: center; }
.mute svg { position: relative; width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mute .slash { display: none; }
.mute.off .wave { display: none; }
.mute.off .slash { display: inline; }

/* The tutorial, above Play at its right edge: small and quiet beside it, so Play stays the main way in. */
.tutorial { --radius: 16px; --depth: 6px; position: absolute; right: 0; bottom: calc(clamp(96px, 7.6vw, 146px) + 34px); width: 168px; height: calc(52px + var(--depth)); }
.tutorial .slab-face { justify-content: center; gap: 8px; }
.tutorial svg { position: relative; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.tutorial .label { position: relative; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: #3a4457; }

/* Join match and Start match, side by side at the right of the dock. */
/* The now-playing strip: a cream panel in the corner map's look, in the bottom left corner. Its size and its gaps from
   the two edges are the game's (PongoHudCorners: inset 28, 260×44, in the game HUD's units), times its scale --hud,
   which frontdoor.js keeps, so the gaps stay equal at any window size. The chapter's title scrolls if it is long. */
.radio {
  position: fixed;
  left: calc(28px * var(--hud));
  bottom: calc(28px * var(--hud));
  width: calc(260px * var(--hud));
  height: calc(44px * var(--hud));
  box-sizing: border-box;
  padding: 0 calc(12px * var(--hud));
  display: flex;
  align-items: center;
  background: #fbf3dc;
  border: var(--line) solid var(--ink);
  border-radius: calc(12px * var(--hud));
  color: var(--ink);
  font-size: calc(22px * var(--hud));
  pointer-events: none;
  z-index: 5;
}
.radio[hidden] { display: none; }
.radio-window {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
/* Soft edges while a long title scrolls, so it rises in and out of the window rather than being cut. */
.radio-window.scroll {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.radio-window span { display: inline-block; white-space: pre; }
.radio-window span.scroll { animation: radio-scroll var(--time, 10s) linear infinite; }
@keyframes radio-scroll { to { transform: translateX(var(--shift, 0)); } }

.play {
  --depth: 10px;
  --radius: 28px;
  width: clamp(220px, 21vw, 420px);
  height: calc(clamp(84px, 6.6vw, 128px) + var(--depth));
}
#join-match { margin-left: auto; }
.play .slab-face { justify-content: center; gap: 0.3em; }
.play .label {
  position: relative;
  color: #fff;
  font-size: clamp(30px, 2.6vw, 52px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
}
.play .tri { position: relative; width: 0.62em; height: 0.68em; font-size: clamp(30px, 2.6vw, 52px); fill: #fff; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }

.playing {
  position: relative;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 6px 18px 8px;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--white-lip), 0 4px 0 var(--line) var(--ink);
  color: var(--ink);
  font-size: 24px;
  white-space: nowrap;
}
.playing[hidden] { display: none; }
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--grass);
  border: var(--line) solid var(--ink);
}
.playing.full .dot { background: var(--heart); }

.note {
  position: absolute;
  left: 3.6vw;
  bottom: 1.2vh;
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.note[hidden] { display: none; }

/* The sparks thrown by a pressed slab, above everything and never in the way. */
#sparks {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 20;
}

/* ---- Loading and the overlay over the game ---- */

/* A thin ink line on white, like the wordmark. */
.status {
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
}

button {
  font: inherit;
  cursor: pointer;
}
.small {
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  background: var(--gold);
  box-shadow: 0 5px 0 var(--gold-lip), 0 5px 0 var(--line) var(--ink);
  color: var(--ink);
  font-size: 24px;
  padding: 6px 14px;
}

.status { margin: 0; font-size: 34px; max-width: 30ch; }
.hint { margin: 0; font-size: 20px; color: #fff; opacity: 0.9; }
.hint[hidden], .small[hidden] { display: none; }

/* BarFrame from the UI kit, filled in the kit's two grass greens. */
.bar {
  position: relative;
  width: min(480px, 80vw);
  aspect-ratio: 768 / 128;
  background: url("bar-frame.png") center / 100% 100% no-repeat;
}
.bar-fill {
  position: absolute;
  left: 4.4%;
  top: 26%;
  height: 48%;
  width: 0;
  max-width: 91.2%;
  border-radius: 999px;
  background: linear-gradient(to bottom, #25d315 62%, #1cb10d 62%);
  transition: width 0.15s;
}

/* Over the running game: dim it, keep it visible. */
.overlay {
  background: rgba(8, 8, 8, 0.45);
  cursor: pointer;
}
.overlay.waiting { cursor: default; }

/* ---- Join match and the lobby: the Side Rail ---- */

/* Laid out at 1920 x 1080 and scaled to the window: one unit is a pixel of that frame. */
.railed {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  position: fixed;
  inset: 0;
  color: var(--ink);
}
.railed[hidden] { display: none; }
#join { transition: opacity 0.35s; }
#join.leaving { opacity: 0; pointer-events: none; }
.railed .logo.sm { left: calc(56 * var(--u)); top: calc(30 * var(--u)); width: calc(400 * var(--u)); }
.railed .logo.sm .plate-face { font-size: calc(32 * var(--u)); border-radius: 10px; }
.railed .back { position: absolute; left: calc(56 * var(--u)); bottom: calc(56 * var(--u)); }
.square { --radius: 20px; width: 84px; height: calc(84px + var(--depth)); flex: none; }
.square .slab-face { justify-content: center; }
.square svg { position: relative; width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.rail {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(700 * var(--u));
  min-width: 380px;
  padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u));
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
  border-left: var(--line) solid var(--ink);
}
.rail h2 {
  margin: 0 0 calc(6 * var(--u));
  font-weight: normal;
  font-size: calc(56 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.rail-note { margin: 0 0 calc(20 * var(--u)); font-size: calc(22 * var(--u)); opacity: 0.55; }
.rail-note.alert { opacity: 1; color: #b3001f; }
.rail-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(-8 * var(--u)); padding: 0 calc(8 * var(--u)) calc(10 * var(--u)); }

/* A racer: their colour, and a crown for whoever made the match. */
.av {
  position: relative;
  flex: none;
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  border-radius: 50%;
  background: var(--c, #bfe6ff);
  border: var(--line) solid var(--ink);
  box-shadow: 0 4px 0 var(--white-lip), 0 4px 0 var(--line) var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(30 * var(--u));
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}
.crown { position: absolute; left: 50%; top: calc(-20 * var(--u)); width: calc(30 * var(--u)); height: calc(22 * var(--u)); transform: translateX(-50%); -webkit-text-stroke: 0; }
.crown path { fill: var(--gold); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }

.rrow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(16 * var(--u));
  width: 100%;
  margin: 0;
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: var(--line) solid transparent;
  border-radius: 18px;
  background: none;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.rrow + .rrow { margin-top: calc(6 * var(--u)); }
.rrow:hover { background: rgba(244, 210, 16, 0.12); }
.rrow.sel {
  background: #fff7c2;
  border-color: var(--ink);
  box-shadow: 0 5px 0 var(--gold-lip), 0 5px 0 var(--line) var(--ink);
}
.rrow.full { opacity: 0.45; }
.rrow .who { flex: 1; min-width: 0; }
.rrow .hn { font-size: calc(30 * var(--u)); text-transform: uppercase; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .sub { display: flex; gap: calc(12 * var(--u)); align-items: center; font-size: calc(19 * var(--u)); opacity: 0.6; }
.rrow .cnt { font-size: calc(34 * var(--u)); }
.rrow .cnt small { opacity: 0.5; }
.rrow .cnt small { font-size: calc(20 * var(--u)); }
.rrow .names { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) 0 calc(2 * var(--u)) calc(74 * var(--u)); }
.rrow .names span { font-size: calc(19 * var(--u)); padding: 3px 12px 4px; border-radius: 999px; background: #fff; border: 2px solid rgba(12, 18, 32, 0.25); }
.rrow .names span.h { border-color: var(--ink); background: var(--gold); }
.mini-state { display: inline-flex; align-items: center; gap: 6px; }
.mini-state .dot { width: 12px; height: 12px; border-width: 2px; }
.mini-state.racing .dot { background: var(--gold); border-radius: 3px; }

.rail-foot { margin-top: auto; padding-top: calc(16 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)); }
.rail .big { --depth: 10px; --radius: 28px; flex: 1; height: calc(130 * var(--u) + var(--depth)); min-height: 72px; }
.rail .big.narrow { flex: 0 0 calc(250 * var(--u)); }
.rail .big.wide { flex: 1 0 100%; }
.rail .big .slab-face { justify-content: center; gap: 0.3em; }
.rail .big .label {
  position: relative;
  color: #fff;
  font-size: calc(54 * var(--u));
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
}
.rail .big .label.ink { color: var(--ink); -webkit-text-stroke: 0; font-size: calc(34 * var(--u)); }
.rail .big .tri { position: relative; width: 0.62em; height: 0.68em; font-size: calc(54 * var(--u)); fill: #fff; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.rail .big[hidden] { display: none; }

/* The lobby: the count, big over the course, and the racers in the rail. */
#lobby { pointer-events: none; }
#lobby .rail, #lobby button { pointer-events: auto; }
.lobby-count {
  position: absolute;
  left: calc(84 * var(--u));
  bottom: calc(220 * var(--u));
  color: #fff;
  font-size: calc(200 * var(--u));
  line-height: 0.9;
  -webkit-text-stroke: calc(12 * var(--u)) var(--ink);
  paint-order: stroke fill;
  transform: skewX(-9deg) rotate(-3deg);
}
.lobby-count small { font-size: calc(90 * var(--u)); }
.lobby-wait { position: absolute; left: calc(96 * var(--u)); bottom: calc(150 * var(--u)); margin: 0; font-size: calc(24 * var(--u)); }
.seats { list-style: none; margin: 0; padding: calc(8 * var(--u)) 0 0; flex: 1; min-height: 0; overflow: hidden; }
.seat {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(4 * var(--u)) calc(12 * var(--u));
  border-radius: 14px;
  font-size: calc(26 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.seat .av { width: calc(44 * var(--u)); height: calc(44 * var(--u)); font-size: calc(23 * var(--u)); }
.seat + .seat { margin-top: calc(4 * var(--u)); }
#lobby .rail h2 { font-size: calc(46 * var(--u)); }
.seat .nm { overflow: hidden; text-overflow: ellipsis; }
.seat.empty { opacity: 0.33; }
.seat.empty .av { border-style: dashed; background: none; box-shadow: none; }
.seat.me { background: #fff7c2; }
.seat .tag { margin-left: auto; font-size: calc(18 * var(--u)); letter-spacing: 0.12em; opacity: 0.55; }
.lobby-foot .big { height: calc(104 * var(--u) + var(--depth)); }
.lobby-foot .big .label.ink { font-size: calc(32 * var(--u)); }