:root { --ink: #1a30c0; --red: #d02030; --paper: #f6f3e6; }

html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--paper);
  font-family: 'Patrick Hand', 'Caveat', 'Comic Sans MS', 'Marker Felt', 'Segoe Print', cursive;
}
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#hud { position: fixed; inset: 0; color: var(--ink); user-select: none; overflow: hidden; }
#hud > *:not(.screen) { pointer-events: none; }

/* multiply blending is the whole trick: the writing sinks into the paper grain and the
   ruled lines show through it, instead of floating on top like a UI overlay */
.hud-tl, .hud-tr, .hud-br, .board, .message { mix-blend-mode: multiply; }
#hud.nogame .hud-tl, #hud.nogame .hud-tr, #hud.nogame .hud-br, #hud.nogame .board { display: none; }

/* the page margin sits at 7% - keep the left column clear of it */
.hud-tl { position: absolute; left: 9%; top: 3.5%; font-size: 30px; transform: rotate(-1.5deg); }
.hud-tl .lap b { font-size: 44px; }
.hud-tl .lap span { font-size: 24px; opacity: .75; }
.hud-tl .place { font-size: 30px; color: var(--red); margin-top: -4px; }
.hud-tl .place i { font-style: normal; font-size: 19px; opacity: .7; color: var(--ink); }

.hud-tr { position: absolute; right: 4%; top: 3.5%; text-align: right; font-size: 22px; transform: rotate(1deg); }
.hud-tr b { font-size: 30px; }
.hud-tr .best b { color: var(--red); }
/* live delta against the ghost - green when you are up on it, red when you are not */
.delta { font-size: 30px; line-height: 1.1; min-height: 0; }
.delta.up { color: #13803a; }
.delta.down { color: var(--red); }

.hud-br { position: absolute; right: 4%; bottom: 5%; text-align: right; }
.speedo b { font-size: 76px; line-height: .9; }
.speedo span { font-size: 24px; opacity: .8; margin-left: 6px; }
.gauge {
  width: 250px; height: 15px; margin-top: 5px; border: 2.5px solid var(--ink);
  border-radius: 6px 9px 5px 8px / 9px 5px 8px 6px; overflow: hidden; transform: rotate(-1deg);
}
.gauge i {
  display: block; height: 100%; width: 0%;
  background: repeating-linear-gradient(-55deg, var(--ink) 0 2.5px, transparent 2.5px 6px);
  transition: width .08s linear;
}
.drift {
  font-size: 30px; color: var(--red); opacity: 0; letter-spacing: 2px;
  transform: rotate(-3deg); transition: opacity .12s;
}
.drift.on { opacity: 1; animation: wobble .3s infinite alternate ease-in-out; }
@keyframes wobble { from { transform: rotate(-4deg) scale(1); } to { transform: rotate(-1deg) scale(1.06); } }

/* drift charge, and then the boost burning off - same bar, two jobs */
.boost {
  position: relative; width: 250px; height: 11px; margin-top: 6px; margin-left: auto;
  border: 2.5px solid var(--ink); border-radius: 5px 8px 4px 7px / 8px 4px 7px 5px;
  transform: rotate(-1deg); opacity: .38; transition: opacity .15s;
}
.boost.ready, .boost.burning { opacity: 1; }
.boost i {
  display: block; height: 100%; width: 0%;
  background: repeating-linear-gradient(55deg, var(--ink) 0 2.5px, transparent 2.5px 6px);
  transition: width .08s linear;
}
.boost u {
  position: absolute; right: calc(100% + 9px); top: -7px; font-size: 18px;
  text-decoration: none; letter-spacing: 1.5px; opacity: .85; white-space: nowrap;
}
.boost.ready { border-color: #b8710a; } .boost.ready u { color: #b8710a; }
.boost.ready i { background: repeating-linear-gradient(55deg, #b8710a 0 2.5px, transparent 2.5px 6px); }
.boost.burning { border-color: var(--red); animation: wobble .22s infinite alternate ease-in-out; }
.boost.burning u { color: var(--red); }
.boost.burning i { background: repeating-linear-gradient(55deg, var(--red) 0 2.5px, transparent 2.5px 6px); }

/* seconds to the car in front and the car behind */
.gaps {
  position: absolute; left: 9%; top: 52%; font-size: 20px; min-width: 200px;
  mix-blend-mode: multiply; display: flex; flex-direction: column; gap: 2px;
}
.gaps div { display: flex; justify-content: space-between; gap: 16px; }
.gaps .ahead { color: var(--red); }
.gaps .behind { opacity: .7; }
#hud.nogame .gaps { display: none; }

/* position change - small and off to the side, so it never fights the centre message */
.notice {
  position: absolute; left: 0; right: 0; top: 40%; text-align: center;
  font-size: 46px; opacity: 0; letter-spacing: 2px; mix-blend-mode: multiply;
  transform: rotate(-2deg); transition: opacity .18s;
}
.notice.show { opacity: 1; animation: pop .4s ease-out; }
.notice.up { color: #13803a; }
.notice.down { color: var(--red); }
@keyframes pop { from { transform: rotate(-5deg) scale(1.5); } to { transform: rotate(-2deg) scale(1); } }

/* live standings, pinned under the margin line on the left */
.board { position: absolute; left: 9%; top: 22%; font-size: 21px; min-width: 200px; }
.board div { display: flex; justify-content: space-between; gap: 18px; padding: 1px 6px; border-bottom: 1.5px solid rgba(26, 48, 192, .25); }
.board div.me { color: var(--red); background: rgba(26, 48, 192, .07); }

/* centre messages - countdown, LAP 2, FINISH */
.message { position: absolute; left: 0; right: 0; top: 22%; text-align: center; }
.msg-main { font-size: 96px; color: var(--ink); transform: rotate(-2deg); opacity: 0; letter-spacing: 3px; line-height: 1; }
.msg-main.show { animation: scribble .55s ease-out forwards; }
@keyframes scribble {
  0% { opacity: 0; transform: rotate(-7deg) scale(1.7); filter: blur(3px); }
  55% { opacity: 1; transform: rotate(-1deg) scale(.95); filter: blur(0); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}
.msg-sub { font-size: 30px; opacity: .85; color: var(--red); }

/* menu / results */
/* flex-start + margin:auto centres the panel when it fits and lets it scroll when it does
   not — plain align-items:center would clip the top off on a short window */
.screen {
  position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: center;
  pointer-events: auto; cursor: pointer; background: rgba(246, 243, 230, .55);
  overflow-y: auto; padding: 2.5vh 12px;
}
.screen.show { display: flex; }
.panel {
  text-align: center; max-width: 900px; padding: 20px 44px; cursor: default; margin: auto;
  background: rgba(250, 248, 238, .93); box-shadow: 6px 6px 0 rgba(26, 48, 192, .15);
  border: 3px solid var(--ink); border-radius: 12px 18px 10px 16px / 16px 10px 18px 12px;
  transform: rotate(-.6deg);
}
.panel h1 { font-size: 68px; margin: 0; letter-spacing: 3px; line-height: 1; }
.panel h2 { font-size: 26px; margin: 2px 0 10px; font-weight: normal; opacity: .85; }
.panel .cols { display: flex; gap: 44px; justify-content: center; text-align: left; font-size: 19px; line-height: 1.3; margin-top: 10px; }
.panel .cols b { color: var(--red); }
.colhead { font-size: 25px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.panel .stats { font-size: 28px; line-height: 1.4; } .panel .stats b { color: var(--red); }
.panel .tip { font-size: 22px; color: var(--red); margin-top: 6px; }
.beststat { font-size: 21px; opacity: .85; } .beststat b { color: var(--red); }

.finalboard { display: flex; flex-direction: column; gap: 3px; font-size: 23px; margin: 14px auto 0; max-width: 380px; }
.finalboard div { display: flex; justify-content: space-between; gap: 22px; padding: 2px 10px; border-bottom: 1.5px solid rgba(26, 48, 192, .25); }
.finalboard div.me { color: var(--red); background: rgba(26, 48, 192, .08); }
.finalboard .running { font-style: normal; opacity: .55; font-size: 19px; }

.mapsel { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--ink); flex-wrap: wrap; }
.mapsel > span { font-size: 20px; opacity: .75; }
.mapbtn {
  font: inherit; font-size: 20px; color: var(--ink); background: transparent;
  border: 2.5px solid var(--ink); border-radius: 7px 10px 6px 9px / 10px 6px 9px 7px;
  padding: 4px 14px; cursor: pointer; opacity: .55; display: flex; flex-direction: column;
  align-items: center; line-height: 1.15; transform: rotate(-.6deg);
}
.mapbtn i { font-style: normal; font-size: 14px; opacity: .75; }
.mapbtn:hover { opacity: .85; }
.mapbtn.on { opacity: 1; color: var(--paper); background: var(--ink); }

/* compact option rows - difficulty, car */
.pillrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pillrow > span { font-size: 20px; opacity: .75; }
.pill {
  font: inherit; font-size: 19px; color: var(--ink); background: transparent;
  border: 2.5px solid var(--ink); border-radius: 7px 10px 6px 9px / 10px 6px 9px 7px;
  padding: 3px 13px; cursor: pointer; opacity: .55; line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; transform: rotate(-.5deg);
}
.pill i { font-style: normal; font-size: 13px; opacity: .75; }
.pill:hover:not(:disabled) { opacity: .85; }
.pill.on { opacity: 1; color: var(--paper); background: var(--ink); }
.pill.locked { opacity: .34; cursor: not-allowed; border-style: dashed; }

.panel h1 .of { font-size: 40px; opacity: .5; }
.panel .tip.unlock { color: #b8710a; }
.finalboard .bhead { font-size: 17px; opacity: .6; border-bottom-width: 2.5px; }

.mainbtns { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 14px 0 2px; }
.mainbtns button {
  font: inherit; font-size: 30px; color: var(--paper); background: var(--ink);
  border: 3px solid var(--ink); border-radius: 9px 13px 8px 12px / 12px 8px 11px 9px;
  padding: 10px 34px; cursor: pointer; transform: rotate(-.8deg); line-height: 1.05;
}
.mainbtns button i { display: block; font-style: normal; font-size: 16px; opacity: .8; letter-spacing: 1px; }
.mainbtns button.start { min-width: 360px; font-size: 40px; padding: 11px 40px; border-width: 4px; transform: rotate(-1deg); box-shadow: 6px 7px 0 rgba(0, 0, 0, .18); }
.mainbtns button.start:hover { transform: rotate(-1deg) scale(1.03); }
.mainbtns button.start + button { transform: rotate(.7deg); background: var(--red); border-color: var(--red); font-size: 22px; padding: 6px 22px; min-width: 0; }
.mainbtns button:hover { filter: brightness(1.15); }

/* touch controls ---------------------------------------------------------
   The manifest advertises an installable landscape app, so on a phone these are the only
   way to drive. Hidden until a coarse pointer or a real touch is seen. */
#touch { position: absolute; inset: 0; display: none; }
#touch.show { display: block; }
#hud.nogame #touch { display: none; }
.tpad {
  position: absolute; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; gap: 12px; align-items: flex-end; pointer-events: none;
}
.tpad-l { left: max(14px, env(safe-area-inset-left)); }
.tpad-r { right: max(14px, env(safe-area-inset-right)); }
.tbtn {
  font: inherit; font-size: 26px; line-height: 1; color: var(--ink);
  background: rgba(250, 248, 238, .5); border: 3px solid var(--ink);
  border-radius: 12px 17px 10px 15px / 16px 10px 17px 11px;
  width: 88px; height: 74px; cursor: pointer; pointer-events: auto;
  touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none;
  display: flex; align-items: center; justify-content: center; transform: rotate(-1deg);
}
.tbtn:nth-child(2) { transform: rotate(1deg); }
.tbtn.on { color: var(--paper); background: var(--ink); }
.tbtn-gas { width: 108px; height: 108px; font-size: 30px; }
.tbtn-brake { border-color: var(--red); color: var(--red); }
.tbtn-brake.on { background: var(--red); color: var(--paper); }
.tbtn-hand { font-size: 18px; width: 78px; height: 60px; }
/* the speedo sits where the throttle button wants to be */
body.has-touch .hud-br { bottom: 21%; }
body.has-touch .gaps { top: 46%; }

/* boot / failure screen -------------------------------------------------- */
#boot {
  position: fixed; inset: 0; z-index: 10; display: flex;
  align-items: center; justify-content: center; background: var(--paper);
  transition: opacity .35s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
.bootcard {
  text-align: center; color: var(--ink); padding: 22px 40px;
  border: 3px solid var(--ink); border-radius: 12px 18px 10px 16px / 16px 10px 18px 12px;
  background: rgba(250, 248, 238, .93); transform: rotate(-.6deg);
  box-shadow: 6px 6px 0 rgba(26, 48, 192, .15); max-width: 90vw;
}
.bootcard h1 { font-size: 54px; margin: 0 0 6px; letter-spacing: 2px; line-height: 1; }
.bootcard p { font-size: 24px; margin: 0; opacity: .8; }
.bootcard small { font-size: 17px; opacity: .75; display: block; margin-top: 8px; line-height: 1.35; }
#boot.failed .bootcard { border-color: var(--red); }
#boot.failed p { color: var(--red); opacity: 1; }

/* Respect a reduced-motion preference. The drift indicator is the only infinite animation
   in the game; everything else is a short one-shot. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 900px) {
  .panel h1 { font-size: 54px; }
  .panel .cols { flex-direction: column; gap: 10px; font-size: 18px; }
  .msg-main { font-size: 56px; }
  .mainbtns button.start { min-width: 260px; font-size: 34px; }
  .speedo b { font-size: 52px; } .gauge { width: 170px; }
  .board { display: none; }
}

/* Short viewports: the menu carries four option rows and a control reference, and the RACE
   button has to stay on screen without scrolling on a 768px laptop. */
@media (max-height: 820px) {
  .panel h1 { font-size: 52px; }
  .panel h2 { font-size: 22px; margin-bottom: 6px; }
  .panel .cols { font-size: 17px; gap: 34px; margin-top: 6px; }
  .colhead { font-size: 21px; }
  .mapsel, .pillrow { margin-top: 6px; padding-top: 6px; }
  .mapbtn, .pill { font-size: 17px; padding: 2px 11px; }
  .mainbtns { margin: 10px 0 0; }
  .mainbtns button.start { font-size: 32px; padding: 8px 32px; min-width: 300px; }
  .panel { padding: 14px 34px; }
}
@media (max-height: 640px) {
  .panel .cols { display: none; }
  .panel h1 { font-size: 42px; }
}
/* Phone in landscape: 390 px of height, and the RACE button still has to be reachable
   without scrolling past the options. */
@media (max-height: 480px) {
  .panel { padding: 8px 20px; border-width: 2px; }
  .panel h1 { font-size: 30px; letter-spacing: 1px; }
  .panel h2 { font-size: 15px; margin: 0 0 4px; }
  .mapsel, .pillrow { margin-top: 4px; padding-top: 4px; gap: 5px; }
  .mapsel > span, .pillrow > span { font-size: 14px; }
  .mapbtn, .pill { font-size: 14px; padding: 1px 8px; }
  .mapbtn i, .pill i { display: none; }
  .beststat, .panel .tip { font-size: 14px; }
  .mainbtns { margin: 8px 0 0; gap: 6px; }
  .mainbtns button.start { font-size: 22px; padding: 5px 22px; min-width: 200px; border-width: 3px; }
  .mainbtns button.start i { font-size: 11px; }
  .mainbtns button { font-size: 16px; padding: 4px 14px; }
  .finalboard { font-size: 15px; margin-top: 6px; }
  .panel .stats { font-size: 17px; }
  /* smaller pads so they do not swallow the screen on a short viewport */
  .tbtn { width: 66px; height: 54px; font-size: 20px; }
  .tbtn-gas { width: 82px; height: 78px; font-size: 22px; }
  .tbtn-hand { width: 60px; height: 46px; font-size: 14px; }
  body.has-touch .hud-br { bottom: 25%; }
}