styles.css

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #140f16;
  color: #ece6f0;
  font-family: "Courier New", ui-monospace, monospace;
  overflow: hidden;
  /* No rubber banding, no pinch zoom, no text selection while you are playing. */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#table { touch-action: none; }

#app {
  position: relative;
  width: 100vw;
  /* 100vh on iOS counts the browser chrome, so the bottom of the layout - the
     on-screen controls, the kick off button - ends up under it. dvh is the part
     you can actually see; the vh line stays as a fallback. */
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
}

/* The table is wider than it is tall and the camera fits itself to whatever
   shape the window is, so the canvas simply takes all of it. Landscape suits
   this game better than portrait, but nothing here insists on it. */
#table {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  image-rendering: pixelated;
  background: #140f16;
  outline: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Lighter than it was: there is a picture behind this now, and it should be
     visible around the panel. */
  background: rgba(10, 6, 14, 0.6);
  backdrop-filter: blur(1px);
  z-index: 10;
}

.overlay.hidden { display: none; }

.row.hidden { display: none; }

.panel {
  width: min(560px, 92vw);
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  padding: 26px 30px;
  background: #241b2e;
  border: 2px solid #6b4a8f;
  box-shadow: inset 0 0 0 2px #150f1c, 0 10px 40px rgba(0, 0, 0, 0.5);
}

.panel.small { width: min(320px, 90vw); text-align: center; }

h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: 3px;
  color: #ffe14d;
  text-shadow: 3px 3px 0 #5a1a3a;
}

h1 span { display: block; color: #fff; text-shadow: 3px 3px 0 #1e5a6b; }

h2 { margin: 0 0 18px; letter-spacing: 3px; color: #ffe14d; }

.tag { margin: 6px 0 22px; color: #b6a4c6; font-size: 13px; letter-spacing: 1px; }

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.row label {
  width: 92px;
  font-size: 13px;
  color: #b6a4c6;
  letter-spacing: 1px;
}

.btns { display: flex; gap: 8px; flex-wrap: wrap; }

button, select {
  font-family: inherit;
  font-size: 13px;
  padding: 9px 14px;
  color: #ece6f0;
  background: #38294a;
  border: 2px solid #6b4a8f;
  cursor: pointer;
  letter-spacing: 1px;
}

button:hover, select:hover { background: #463359; }

button.active { background: #ffe14d; color: #241b2e; border-color: #ffe14d; font-weight: bold; }

button.primary {
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  font-size: 17px;
  font-weight: bold;
  background: #ffe14d;
  color: #241b2e;
  border-color: #c9ab21;
}

button.primary:hover { background: #fff08a; }

.panel.small button { width: 100%; margin-top: 8px; }

.keys {
  width: 100%;
  margin: 18px 0 4px;
  border-collapse: collapse;
  font-size: 12px;
}

.keys th, .keys td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #3a2b4c;
}

.keys th { color: #b6a4c6; font-weight: normal; letter-spacing: 1px; }

.keys td .bind {
  min-width: 74px;
  padding: 5px 8px;
  font-size: 12px;
  letter-spacing: 0;
}

.keys td .bind.listening {
  background: #ffe14d;
  color: #241b2e;
  border-color: #ffe14d;
}

.keys td .bind.clash {
  border-color: #ff7a5a;
  color: #ff9d85;
}

.preset { width: 100%; padding: 5px 6px; font-size: 11px; letter-spacing: 0; }

#bindHint.warn { color: #ff9d85; }

.hints {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.7;
  color: #cdc0da;
}

.hints b { color: #ffe14d; }

/* --- online --- */

.explain, .fineprint {
  font-size: 12px;
  line-height: 1.7;
  color: #cdc0da;
}

.explain b { color: #ffe14d; }

.fineprint { margin: 16px 0 0; color: #8f80a2; }

.fineprint code { color: #cdc0da; }

.code {
  margin: 16px 0 6px;
  padding: 14px;
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 14px;
  text-indent: 14px;
  text-align: center;
  color: #ffe14d;
  background: #1a1222;
  border: 2px dashed #6b4a8f;
}

.code.hidden { display: none; }

.status {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #b6a4c6;
}

.joinrow { display: flex; gap: 8px; margin-top: 12px; }

.joinrow input {
  flex: 1;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
  color: #ece6f0;
  background: #1a1222;
  border: 2px solid #6b4a8f;
}

.joinrow input::placeholder { color: #6b5a80; letter-spacing: 6px; }

.joinrow button { white-space: nowrap; }

button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { background: #38294a; }
button.primary:disabled:hover { background: #ffe14d; }

/* A phone held sideways is about 400px tall. The panel scrolls, but a button
   you have to scroll to find is a button nobody presses, so the primary action
   sticks to the bottom of it and everything else gives up its spare room. */
/* Sticky on the footer rather than on the button: a sticky element can never
   leave its own container, and inside the mode panels the button was being
   clamped to a box that had already scrolled off. As a direct child of the
   panel it has the whole scroll length to work with. */
.panelFooter {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 4px;
  background: #241b2e;
  /* Its own dark edge, so the content scrolling underneath does not appear to
     touch it, and a shadow to lift it off the list. */
  box-shadow: 0 -12px 16px -8px rgba(36, 27, 46, 0.95);
}

@media (max-height: 560px) {
  .panel { padding: 14px 18px; max-height: 96dvh; }
  h1 { font-size: 22px; }
  h1 span { display: inline; margin-left: 8px; }
  .tag { margin: 4px 0 12px; font-size: 11px; }
  .row { margin-bottom: 8px; gap: 10px; }
  .row label { width: 76px; font-size: 11px; }
  button, select { padding: 6px 10px; font-size: 11px; }
  button.primary { margin-top: 10px; padding: 11px; font-size: 15px; }
  .explain, .fineprint, .hints { font-size: 11px; line-height: 1.5; }
  .keys th, .keys td { padding: 3px 6px; }
}

/* On a touch device the tips are a wall of text about keys you do not have. */
@media (pointer: coarse) {
  .hints { display: none; }
}

details {
  margin: 14px 0 4px;
  border-top: 1px solid #3a2b4c;
  border-bottom: 1px solid #3a2b4c;
}

summary {
  padding: 9px 2px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #b6a4c6;
  cursor: pointer;
}

summary:hover { color: #ffe14d; }

details[open] summary { color: #ffe14d; }

details .keys { margin-top: 0; }

/* A narrow screen has no room for a label beside its buttons: at 390 pixels the
   options wrapped into a ragged stack with one button stranded on the line
   above. The label goes over the top instead. */
@media (max-width: 520px) {
  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .row label {
    width: auto;
  }

  .btns { flex-wrap: wrap; }
}

/* --- touch controls ---
   The camera is fitted into the space above these rather than behind them: a
   thumb parked over the corner you are about to arrive at is no way to drive.
   The renderer is told how much room to leave. */

#touch {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* only the controls themselves take touches */
  padding: 0 max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom));
}

/* touch-action does not inherit, so saying it on the box the buttons sit in
   does nothing for the buttons. Without it on the button itself, holding the
   throttle down is a long press, and a long press on a phone is a text
   selection - the callout comes up and the car stops accelerating. */
#stick, #touchButtons, #touchButtons button, #wheelTrack, #knob {
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Only the wheel itself takes touches; the readout inside it must not swallow
   them, or the corner of the screen you are told to press has a hole in it. */
#wheelTrack, #knob { pointer-events: none; }

/* A track rather than a dish, because it is a wheel: it steers and does nothing
   else, and a round pad invites a thumb to push up and down for something that
   is not there. Wide enough that the whole range of lock is a comfortable
   sweep - the knob travels 58px each way from the middle. */
/* The whole bottom-left corner takes the wheel, not a little pad in it.
   The control is relative - wherever the thumb lands is straight ahead - so
   there is nothing to aim at and no reason to make you aim. It reaches most of
   the way up the strip and across to the pedals, so it cannot be missed while
   you are looking at the road. */
#stick {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  height: 170px;
  padding: 0 max(14px, env(safe-area-inset-left))
           max(30px, calc(env(safe-area-inset-bottom) + 18px));
  display: flex;
  align-items: flex-end;
}

/* And a track drawn inside it, which is only a readout: it shows how much lock
   is on, not where the thumb is. */
#wheelTrack {
  position: relative;
  width: 100%;
  height: 74px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 37px;
  background: rgba(0, 0, 0, 0.3);
}

#wheelTrack::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 26%;
  z-index: 0;
  width: 2px;
  height: 48%;
  background: rgba(255, 255, 255, 0.28);
}

#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 62px;
  height: 62px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Opaque: at 80% the centre mark showed through it and the knob looked like it
     had a slot in it. */
  background: rgb(232, 255, 77);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#touchButtons {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px));
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* With the throttle on automatic there is no gas button; the brake is the one
   thing you decide, so it becomes the big one. */
#touch.auto #btnGas { display: none; }

#touch.auto #btnBrake {
  width: 124px;
  height: 124px;
  margin-bottom: 0;
  font-size: 15px;
}

#touchButtons button {
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  border-width: 3px;
}

/* GAS is held for the whole race, so it is the big one and it sits nearest the
   thumb; BRAKE is the one you stab going into a corner and sits above and
   inside, where a stab can reach it without letting go of the throttle. */
#btnGas {
  width: 96px;
  height: 96px;
  font-size: 15px;
  background: rgba(232, 255, 77, 0.85);
  color: #241b2e;
  border-color: rgba(255, 255, 255, 0.55);
}

#btnBrake {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  background: rgba(120, 42, 52, 0.85);
  color: #f6e6e8;
  border-color: rgba(255, 255, 255, 0.35);
}

#touchButtons button.pressed { filter: brightness(1.35); transform: scale(0.94); }

/* --- Who is in the room -------------------------------------------------- */

.lobby {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0 4px;
}

.seat {
  padding: 10px 4px;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
  color: #6b5a80;
  background: #1a1222;
  border: 2px dashed #3a2b4c;
}

.seat.taken {
  color: #241b2e;
  border-style: solid;
  font-weight: bold;
}

.seat.you { box-shadow: inset 0 0 0 2px #ffe14d; }

.lobby.hidden { display: none; }

/* --- Lap records --------------------------------------------------------- */

.scores {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 0;
}

.scores td {
  padding: 3px 4px;
  color: #cdc0da;
}

.scores td.place { color: #8f80a2; width: 2.2em; }
.scores td.name { color: #ffe14d; letter-spacing: 2px; }
.scores td.result { text-align: right; color: #ffe14d; font-weight: bold; }
.scores td.when { color: #8f80a2; text-align: right; }
.scores tr.fresh td { color: #ffffff; }

.letters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
}

.letter {
  display: block;
  width: 1.4em;
  padding: 6px 10px;
  border: 2px solid #5c4080;
  border-radius: 4px;
  font-size: 34px;
  text-align: center;
  color: #cdc0da;
}

.letter.on {
  border-color: #ffe14d;
  color: #ffe14d;
  /* The slot you are on blinks, the way the cabinet did it. */
  animation: blink 0.9s steps(2, start) infinite;
}

@keyframes blink { 50% { opacity: 0.35; } }

/* Generic and deliberately last: .overlay and .row set their own display with
   the same specificity, so this only wins by coming after them. Without it
   nothing with class="hidden" was ever actually hidden - the online panel sat
   underneath the one player menu the whole time. */
.hidden { display: none; }

/* --- The name picker, with something to press ----------------------------
   The three letters used to be driven only by the game's own stick and its
   confirm button. On a phone those live at the bottom of the screen and this
   panel is laid over the top of them at a higher z-index, so the panel swallowed
   every tap: a score that had been earned arrived at a screen with no way off
   it, and the only way out was reloading the page.

   So the picker gets arrows and an OK of its own, and the letters themselves are
   tappable. Shown on every device rather than behind a touch check, because
   clicking an arrow beats hunting for the arrow keys on a laptop too, and one
   code path is one thing that can break. */

.picker { margin: 18px 0 6px; }

.letters, .letterRow {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.letters { margin: 0; }

.letter, .panel.small .letterRow button { width: 64px; }

.letter { padding: 6px 0; cursor: pointer; }

/* Big enough to hit with a thumb without looking, which is the whole point. */
.panel.small .letterRow button {
  margin: 6px 0;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1;
}

/* Pause, for a device with no Escape key. Top middle, small and quiet: this is
   the one control that must never be hit by accident mid-game. */
#btnPause {
  position: absolute;
  left: 50%;
  top: max(6px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: 46px;
  height: 34px;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 225, 77, 0.45);
}

#btnPause:active { background: #ffe14d; color: #111; }

/* Online there is nothing to pause: the other player is not waiting for you. */
#touch.online #btnPause { display: none; }