/* Fuel Race only: the Poster Racer look, flat cream, teal and tomato. Every colour of the game lives in this block, the
   canvas reads its own (--fr-*) too. The page, list and cards come from kit/midnight.css, the live layout from kit/arcade.css. */
:root {
  --bg-0: #0d3b41; --bg-1: #0d3b41; --bg-2: #0f4248; --bg-sheen: none;
  --ink: #fbefd6; --ink-soft: #d9e6d8;
  --edge: #fbefd6; --edge-bright: #fbefd6;
  --glow: transparent; --glow-strong: transparent; --sheen: transparent;
  --glass: #fbefd6;
  --sheet: #fbefd6;
  --veil: rgba(7, 34, 38, 0.72);
  --scroll: rgba(251, 239, 214, 0.5);
  --f1: #a9c2bb; --f2: #94b1ab; --f3: #84a39d; --f4: #76968f; --f5: #698a84; --f6: #5c7e78;
  --amber: #e2402f; --amber-rgb: 226, 64, 47; --go-ink: #fbefd6; --focus: #ffb31f; --warn: #e2402f;
  --hover: 0.96; --press: 0.86;
  --teal-ink: #0d3b41; --bar-red: #bf2626; --tomato: #e2402f; --arrow-held: rgba(251, 239, 214, 0.1);
  --lit1: #ffb9a6; --lit2: #f4644a; --lit3: #d92f22; --lit4: #ea4a35; --lit5: #c9281e; --lit6: #a81f19;
  --thumb: min(calc(100vw / 4.4), 13vh);

  /* the canvas */
  --fr-cream: #fbefd6; --fr-cream2: #f1dfbd; --fr-sand: #f6e3bf;
  --fr-red: #e2402f; --fr-red2: #bf2626; --fr-red3: #f26d55;
  --fr-teal: #0f4a4f; --fr-teal2: #0d3b41; --fr-teal3: #17666a; --fr-tree: #114a4e; --fr-tree2: #0b3a3f;
  --fr-road: #11484e; --fr-road2: #0c3d43; --fr-road3: #165358;
  --fr-shadow: #0a3136; --fr-glass: #0d3b41; --fr-glass2: #1b5d62;
  --fr-van: #f2bf47; --fr-van2: #dda634; --fr-van3: #9d7420;
  --fr-halo: rgba(242, 100, 70, 0.45); --fr-halo2: rgba(250, 130, 90, 0.95); --fr-halo3: rgba(242, 100, 70, 0);
  --fr-flame: #ffb31f; --fr-spark: #ffd98a; --fr-popedge: #0d3b41;
  --fr-speed: rgba(251, 239, 214, 0.5);
  /* traffic: a colour always means the same thing */
  --fr-white: #fffbf3; --fr-white2: #e6dccb;
  --fr-blue: #3b8ee6; --fr-blue2: #2a6cbd;
  --fr-green: #9ccf3b; --fr-green2: #6f9e1e;
  --fr-pink: #ff63ad; --fr-pink2: #d63f88;
  --fr-lamp: #ffb31f;
  --fr-tyre: #04211f; --fr-smoke: rgba(251, 239, 214, 0.82); --fr-smoke2: rgba(120, 140, 136, 0.72);
  --fr-hole: #031c1f; --fr-hole2: #f1dfbd; --fr-hole3: #0a3337;
}
@supports (height: 1dvh) { html, body { height: 100dvh; } }
html, body { overscroll-behavior: none; }
body.playing { touch-action: none; }
body { -webkit-touch-callout: none; }

/* the poster's crystals are tomato on cream */
.crystal.lit .f1 { fill: var(--lit1); }
.crystal.lit .f2 { fill: var(--lit2); }
.crystal.lit .f3 { fill: var(--lit3); }
.crystal.lit .f4 { fill: var(--lit4); }
.crystal.lit .f5 { fill: var(--lit5); }
.crystal.lit .f6 { fill: var(--lit6); }
.marks svg.lit, .big-crystals svg.lit { filter: none; }

/* Menus and cards are flat cream plates with teal type */
.plate { color: var(--teal-ink); border: 0; box-shadow: none; }
.btn { color: var(--teal-ink); border: 0; box-shadow: none; background: var(--glass); font-weight: 500; }
.btn.go { color: var(--go-ink); background: var(--tomato); box-shadow: none; border: 0; }
.sheet { color: var(--teal-ink); border: 0; box-shadow: 0 calc(10 * var(--u)) 0 var(--bar-red); }
.sheet .btn { outline-offset: 2px; box-shadow: inset 0 0 0 max(calc(3 * var(--u)), 2px) var(--teal-ink); }
.sheet .btn.go { box-shadow: none; }
.sheet h2 { font-weight: 500; }
.big-crystals:empty { display: none; }
.sheet h2 + .big-crystals:empty + p { margin-top: calc(30 * var(--u)); }
.pair.three .btn.go { grid-column: 1 / -1; }
.pause-card p { color: inherit; } /* kit/midnight.css's soft ink is for dark sheets; this one is cream */
.legend:empty { display: none; }
.legend { display: grid; gap: max(calc(12 * var(--u)), 5px); margin: calc(-20 * var(--u)) 0 calc(36 * var(--u)); text-align: left; }
.legend-row { display: flex; align-items: center; gap: max(calc(22 * var(--u)), 10px); font-size: max(calc(36 * var(--u)), 14px); line-height: 1.2; }
.legend-icon { flex: none; width: max(calc(46 * var(--u)), 22px); height: max(calc(66 * var(--u)), 32px); }
.legend-icon.pothole, .legend-icon.can { width: max(calc(56 * var(--u)), 26px); height: max(calc(56 * var(--u)), 26px); }
.icon { width: max(calc(60 * var(--u)), 44px); height: max(calc(60 * var(--u)), 44px); }
.icon svg { width: max(calc(52 * var(--u)), 28px); height: max(calc(52 * var(--u)), 28px); stroke-width: 2.6; }
.lv-grid { grid-template-columns: repeat(auto-fill, minmax(max(calc(212 * var(--u)), 62px), 1fr)); }
.lv { color: var(--teal-ink); border: 0; box-shadow: none; font-weight: 500; }
.lv.now { box-shadow: inset 0 0 0 max(calc(5 * var(--u)), 3px) var(--tomato); }
.chapter { font-weight: 500; }
.list-screen .bar { height: max(calc(92 * var(--u)), 52px); border: 0; box-shadow: none; background: var(--bar-red); color: var(--ink); }
.count-plate { flex: none; width: calc(440 * var(--u)); height: calc(64 * var(--u)); min-height: 34px; font-size: max(calc(34 * var(--u)), 13px); }

/* The bar: tomato right across, as on the sample */
.screen.play { width: 100%; padding: 0; gap: 0; }
.play .bar {
  height: auto;
  min-height: max(calc(92 * var(--u)), 52px);
  padding: env(safe-area-inset-top) max(calc(16 * var(--u)), 6px) 0;
  justify-content: flex-start;
  gap: max(calc(14 * var(--u)), 6px);
  color: var(--ink);
  background: var(--bar-red);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.play .bar h1 { flex: 1 1 auto; font-size: max(calc(56 * var(--u)), 21px); font-weight: 400; }
.rule { flex: none; width: max(calc(3 * var(--u)), 2px); height: max(calc(52 * var(--u)), 28px); background: var(--ink); opacity: 0.85; }
.play .icon { color: var(--ink); }

.play .stats {
  width: 100%;
  padding: max(calc(14 * var(--u)), 7px) max(calc(26 * var(--u)), 16px) 0;
  gap: max(calc(30 * var(--u)), 18px);
}
.play .stats .plate {
  position: relative;
  isolation: isolate;
  height: max(calc(74 * var(--u)), 34px);
  font-size: max(calc(46 * var(--u)), 17px);
  background: none;
}
.play .stats .plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass);
  border-radius: max(calc(14 * var(--u)), 7px);
  transform: skewX(-22deg);
}
#scorePlate { gap: 0.3em; }
#scorePlate.up { animation: nudge 0.45s ease-out; }
@keyframes nudge { 0% { transform: scale(1.12); } 100% { transform: none; } }

.fuel {
  width: calc(100% - 2 * max(calc(22 * var(--u)), 12px));
  flex: none;
  margin: max(calc(12 * var(--u)), 6px) max(calc(22 * var(--u)), 12px);
  padding: 0 max(calc(16 * var(--u)), 8px) 0 max(calc(36 * var(--u)), 14px);
  height: max(calc(82 * var(--u)), 38px);
  gap: max(calc(36 * var(--u)), 12px);
  font-size: max(calc(46 * var(--u)), 17px);
  border-radius: max(calc(14 * var(--u)), 7px);
  justify-content: flex-start;
}
.gauge {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: max(calc(50 * var(--u)), 22px);
  overflow: hidden;
  background: var(--glass);
  border: max(calc(5 * var(--u)), 3px) solid var(--teal-ink);
  border-radius: 999px;
}
.gauge i { position: absolute; inset: 0; display: block; background: var(--tomato); transform-origin: left center; }
.gauge b { position: absolute; top: 0; bottom: 0; left: 25%; width: max(calc(3 * var(--u)), 2px); background: var(--teal-ink); opacity: 0.55; }
.fuel.low { animation: lowplate 0.5s steps(2, jump-none) infinite alternate; }
@keyframes lowplate { from { background: var(--glass); color: var(--teal-ink); } to { background: var(--tomato); color: var(--ink); } }

.play .stage { background: var(--bg-0); }
.warn {
  position: absolute;
  top: max(calc(150 * var(--u)), 64px);
  left: 50%;
  transform: translateX(-50%);
  padding: max(calc(12 * var(--u)), 6px) max(calc(36 * var(--u)), 16px);
  color: var(--ink);
  font-size: max(calc(50 * var(--u)), 19px);
  white-space: nowrap;
  background: var(--tomato);
  border: max(calc(5 * var(--u)), 3px) solid var(--ink);
  border-radius: max(calc(16 * var(--u)), 9px);
  pointer-events: none;
  animation: warn 0.5s ease-in-out infinite alternate;
}
.warn[hidden] { display: none; }
@keyframes warn { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.07); } }
.count {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  color: var(--ink);
  font-size: max(calc(210 * var(--u)), 84px);
  font-weight: 500;
  line-height: 1;
  text-shadow: max(calc(7 * var(--u)), 4px) max(calc(7 * var(--u)), 4px) 0 var(--tomato);
  pointer-events: none;
}
.count { opacity: 0; }
.count.tick { animation: tick 0.58s ease-out; }
@keyframes tick { 0% { transform: scale(1.5); opacity: 0; } 25% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.keys { display: none; }

/* Controls: big poster arrows and the round Boost, as on the sample */
.play .controls {
  padding: max(calc(10 * var(--u)), 6px) max(calc(10 * var(--u)), 6px) max(calc(16 * var(--u)), 8px, env(safe-area-inset-bottom));
  gap: max(calc(10 * var(--u)), 6px);
  background: var(--bg-0);
}
.hold { -webkit-user-select: none; user-select: none; }
.hold.arrow {
  flex: 1 1 0;
  width: auto;
  height: var(--thumb);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: max(calc(18 * var(--u)), 10px);
  box-shadow: none;
}
.hold.arrow svg { width: min(82%, max(calc(160 * var(--u)), 76px)); height: auto; fill: currentColor; stroke: none; }
.hold.arrow.held { color: var(--tomato); filter: none; background: var(--arrow-held); }
.hold.round {
  flex: none;
  width: calc(var(--thumb) * 1.08);
  height: calc(var(--thumb) * 1.08);
  color: var(--ink);
  font-size: max(calc(50 * var(--u)), 19px);
  background: var(--bar-red);
  border: max(calc(6 * var(--u)), 3px) solid var(--ink);
  box-shadow: none;
}
.hold.round.held { background: var(--tomato); filter: none; border-color: var(--ink); transform: scale(0.96); }
.hold.round.dry { opacity: 0.45; }

/* Wide screens and phones held sideways: steering on the left thumb, Boost on the right, the road between. */
@media (min-aspect-ratio: 5/4) {
  :root {
    --board: 100vh;
    --stage-w: min(100vh, 52vw);
    --side: calc((100vw - var(--stage-w)) / 2 - 28px - max(env(safe-area-inset-left), env(safe-area-inset-right)));
    --u: calc(var(--side) / 620);
    --thumb: max(56px, min(calc(var(--side) / 2 - 6px), 26vh, 170px));
  }
  @supports (height: 1dvh) {
    :root { --board: 100dvh; --stage-w: min(100dvh, 52vw); --thumb: max(56px, min(calc(var(--side) / 2 - 6px), 26dvh, 170px)); }
  }
  .screen.play {
    width: 100%;
    height: 100%;
    padding: 0;
    grid-template-columns: var(--side) var(--stage-w) var(--side);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "bar board fuel" "stats board fuel2" "keys board ." "steer board boost";
    justify-content: center;
    align-items: start;
    column-gap: 14px;
    row-gap: max(calc(18 * var(--u)), 8px);
  }
  .play .bar { grid-area: bar; margin-top: max(10px, env(safe-area-inset-top)); padding: 0 max(calc(10 * var(--u)), 4px); border-radius: max(calc(14 * var(--u)), 8px); }
  .play .bar h1 { font-size: max(calc(50 * var(--u)), 16px); white-space: nowrap; }
  .play .stats { grid-area: stats; padding: 0 12px; grid-template-columns: 1fr; gap: max(calc(12 * var(--u)), 5px); }
  .play .stats .plate { font-size: max(calc(40 * var(--u)), 14px); }
  .fuel { grid-area: fuel; width: 100%; margin: max(10px, env(safe-area-inset-top)) 0 0; flex-direction: column; align-items: stretch; justify-content: center; height: auto; padding: max(calc(16 * var(--u)), 6px) max(calc(20 * var(--u)), 8px); gap: max(calc(10 * var(--u)), 3px); text-align: center; }
  .gauge { flex: none; height: max(calc(64 * var(--u)), 22px); }
  .play .stage { width: var(--stage-w); height: var(--board); grid-row: 1 / -1; }
  .play .controls { display: contents; }
  .hold.arrow { flex: none; width: var(--thumb); height: var(--thumb); align-self: end; margin-bottom: max(14px, env(safe-area-inset-bottom)); }
  .hold.arrow.left { grid-area: steer; justify-self: start; }
  .hold.arrow.right { grid-area: steer; justify-self: end; }
  .hold.round { grid-area: boost; justify-self: center; align-self: end; margin-bottom: max(14px, env(safe-area-inset-bottom)); width: var(--thumb); height: var(--thumb); }
  .keys { grid-area: keys; align-self: center; justify-self: center; margin: 0; color: var(--ink-soft); font-size: max(calc(30 * var(--u)), 12px); line-height: 1.7; text-align: center; }
  @media (hover: hover) and (pointer: fine) and (min-height: 560px) { .keys { display: block; } }
  .screen.list-screen { width: min(100%, 1100px); padding: max(8px, calc(24 * var(--u))) 24px 0; }
}
/* The smallest phones held sideways: the side columns take a little from the road, and the bar keeps only its two buttons */
@media (min-aspect-ratio: 5/4) and (max-width: 720px) {
  :root { --stage-w: 47vw; }
  @supports (height: 1dvh) { :root { --stage-w: 47vw; } }
  .play .bar { justify-content: space-between; padding: 0; min-height: 44px; }
  .play .bar h1, .rule { display: none; }
  .play .stats { grid-template-columns: 1fr; padding: 0 10px; gap: 5px; }
  .play .stats .plate { height: 30px; }
  .fuel { padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fuel.low, .warn, #scorePlate.up { animation: none; }
  .fuel.low { background: var(--tomato); color: var(--ink); }
}