/* What the arcade adds to NEON RIVALS, and nothing else.
 *
 * neonrivals.css is vendored from the game's own drop and is kept byte-for-byte
 * so the next drop can replace it without a merge. Anything the host puts on
 * top of the game lives here instead, which is why this file is four rules
 * long and should stay that way.
 */

/* The ARCADE link in the menu footer.
 *
 * It reuses the game's own .chip so it reads as one of the row rather than as
 * something bolted on — but .chip was written for <button>, and an <a> is
 * inline, has no centred text and arrives underlined. These three lines are
 * the whole difference. */
.chip-exit {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.chip-exit:hover { background: rgba(34, 231, 255, 0.2); }

/* Playing sideways in a browser that will not turn.
 *
 * A wallet's in-app browser is portrait-locked at the OS level and no web API
 * overrides a host app's orientation policy, so ROTATE YOUR PHONE there is an
 * instruction nobody can carry out. The site already answers that elsewhere by
 * turning the CONTENT ninety degrees and letting the player turn the handset to
 * meet it (orient.js, body.phantom-landscape). This is the same move, the same
 * transform, applied to this game's own root.
 *
 * The transform is copied deliberately rather than reused: that rule is scoped
 * to `main`, and this page has no <main> - the game owns the whole document and
 * lives in #app. Same numbers, same origin, so the two behave identically.
 *
 * What is NOT free here, and is handled in neonrivals-shell.js: this game reads
 * raw pointer coordinates for its steering, so every touch has to be mapped
 * back through this rotation or the wheel turns the wrong axis. */
body.nr-turned { overflow: hidden; }
body.nr-turned #app {
  position: fixed; top: 0; left: 0;
  width: 100vh; height: 100vw;
  transform-origin: 0 0;
  transform: translateX(100vw) rotate(90deg);
}
/* Dynamic units where they exist: an in-app browser's chrome moves, and vh
   frozen at the largest viewport leaves the bottom of the game under it. */
@supports (height: 100dvh) {
  body.nr-turned #app {
    width: 100dvh; height: 100dvw;
    transform: translateX(100dvw) rotate(90deg);
  }
}
/* Turned, the game IS landscape; its own portrait gate must not sit over it. */
body.nr-turned #rotate-overlay { display: none !important; }

/* The way into it, on the gate itself. Offered to everyone rather than only to
   a browser we managed to recognise: wallet detection is by name, so it will
   miss one, and a player who is stuck should not need us to have guessed their
   app correctly. */
#rotate-turn { margin-top: 18px; }

/* Smaller controls, identical to play.
 *
 * On a phone the drawn controls covered a large part of the screen — reported
 * from a real race, where the GAS and BRAKE panels and the joystick ring sat
 * over the road you are trying to read.
 *
 * NOTHING HERE CHANGES WHAT IS TOUCHABLE. The zones come from viewport
 * fractions inside hitTest() — right 40% split top/bottom for brake and gas,
 * left 52% for steering — and #joystick is pointer-events:none. The art is
 * decoration drawn over those zones, so it can shrink freely while the tap
 * targets stay exactly as generous as the drop designed them. That is the whole
 * point: the controls stay easy to hit and stop being in the way.
 *
 * The joystick is scaled rather than resized, and that is deliberate. A scale
 * on the parent takes the ring, the knob AND the knob's travel with it, so the
 * stick still LOOKS right at full lock. Resizing the ring alone would leave the
 * knob flying outside it, because the throw is a JS constant (maxRadius = 78)
 * measured in raw pointer pixels. Which also means the FEEL is untouched: a
 * thumb still moves the same distance for full lock, the drawn knob just moves
 * a smaller distance to show it. */
#joystick { transform: translate3d(0, 0, 0) scale(0.66); }

/* The pedals were 74% x 62% of a zone that is itself 38% x 50% of the screen.
 * Just under half of that reads clearly and leaves the road visible. */
.pedal-face { width: 46%; height: 40%; }
.pedal-label { font-size: clamp(10px, 2.4vh, 20px); }

/* Lines that break evenly instead of orphaning a word.
 *
 * The logo tagline and the multiplayer hint were both breaking to leave a
 * single word alone on a second line — reported as the text looking messed up,
 * which is exactly what that looks like in a pixel font that is already
 * shouting. The tagline has since been shortened in the page as well; this
 * still covers it, and covers the three other lines long enough to wrap.
 *
 * text-wrap: balance asks the browser to even the lines out rather than fill
 * the first and dump the remainder. Where it is not supported the text simply
 * wraps as it does today, so this can only improve. */
.logo-sub, .hint, .rotate-inner p, .screen-title { text-wrap: balance; }

/* THE RESULTS CARD'S STAT BOXES SIZE TO WHAT GOES IN THEM.
 *
 * The drop asks for `repeat(auto-fit, minmax(96px, 1fr))`, and 96px is a
 * number chosen before the font was known. Press Start 2P has a 1em advance on
 * EVERY glyph — it is a pixel font on an 8x8 grid, not a proportional one — so
 * at the .v size of 14px with .06em tracking, one character costs 14.84px and
 * a seven-character value costs 104. The column's content box is 87. Measured
 * on a 430x932 phone, turned: TOTAL TIME "2'00.79" and RIVAL SCORE "111,746"
 * each overflowed by 17px, COLLECTED by 1, and TOP SPEED cleared it by a
 * single pixel. The value has nowhere to break — no spaces in "111,746" — so
 * it does not wrap, it spills out through the side of its own box and lands
 * over the neighbouring one. Reported from a phone as the score not fitting.
 *
 * max-content as the floor says the thing that is actually true: a box is at
 * least as wide as what it has to hold. Grid keeps repeat() columns uniform,
 * so they all take the widest item's width and auto-fit drops to fewer per row
 * when that no longer fits — which is the behaviour 96px was reaching for.
 *
 * Here rather than in neonrivals.css, which is byte-for-byte from the drop. */
#results-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
/* And a break opportunity, because a floor is still a bet on the longest
   value and 96px was that bet losing. 120 covers what a three-lap race
   actually produces — a time under ten minutes and a score under a million
   are both seven characters — but "12'05.99" is eight and a rival score in
   the millions is nine, and neither has a space to wrap at. `anywhere` lets
   the box break one mid-token as a last resort: a rare value goes to two
   lines inside its own box instead of out through the side of it. Together
   these two make the text escaping its box impossible rather than unlikely. */
#results-stats .stat .v { overflow-wrap: anywhere; }