/* Chicago Traffic in the toy box (games/static/games/brainteasers/, loaded
   before this; docs/adr/0042): its accent, the red of the stars on
   Chicago's flag and of your car; the tray's molded asphalt; the cars and
   trucks in their paint; how the board is drawn. Units: one cell is 1. */
:root {
  --accent: #b8122b;         /* the one filled button: 6.6:1 with white */
  --accent-ink: #ffffff;
  /* the tray: a molded rim, the block's asphalt, the street out, its sign */
  --tray-rim: #262a31;
  --tray-bed: #3a3f48;
  --tray-seam: rgba(255, 255, 255, .07);
  --street: #4a4f58;
  --street-line: #f2c230;
  --sign: #1d6b3c;           /* Chicago's street signs: green, white letters */
  --sign-ink: #ffffff;
  /* the paint */
  --p-red: #d7262e;
  --p-teal: #24998c; --p-cab: #f4c21a; --p-orange: #ef8a23; --p-sky: #69b3e6; --p-lime: #8cc43f; --p-violet: #8b5ad4;
  --p-tan: #c9a879; --p-pink: #ea6ea4; --p-navy: #2e4a8c; --p-green: #2d8a56; --p-silver: #b7bec7; --p-plum: #7e3d6c;
  --p-bus: #f1f3f5; --p-yellow: #f1b505; --p-purple: #6b3fb1; --p-blue: #2a6bc6;
  --cta-blue: #1d5eab;
  --cta-red: #c8102e;
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.wordmark-h .ct-mark { width: 1.3em; height: .7em; transform: none; }
.cover-mark .ct-mark { width: 120px; }

/* ── the tray ───────────────────────────────────────────────────────────── */
.tray-rim { fill: var(--tray-rim); }
.tray-bed { fill: var(--tray-bed); }
.seams { fill: none; stroke: var(--tray-seam); stroke-width: .03; }
.street { fill: var(--street); }
.street-line { fill: none; stroke: var(--street-line); stroke-width: .05; stroke-dasharray: .22 .16; }
.sign-plate { fill: var(--sign); stroke: color-mix(in srgb, var(--sign) 60%, #000); stroke-width: .02; }
.sign-post { fill: #8a9099; }
.sign-word { fill: var(--sign-ink); font: 700 .15px var(--ui); letter-spacing: .02em; text-anchor: middle; }
.sign-word.small { font-size: .13px; }
.ct-tray .reach { fill: rgba(255, 255, 255, .12); }
.ct-tray:focus-visible { outline: 3px solid var(--pick); outline-offset: 6px; border-radius: 10px; }

/* ── a car or truck ─────────────────────────────────────────────────────── */
.veh { cursor: grab; transition: transform var(--m-quick, 150ms) ease-out; }
.veh.dragging { cursor: grabbing; transition: none; }
.ct-tray.done .veh, .ct-tray.win .veh { cursor: default; }
.veh .lip { fill: rgba(0, 0, 0, .45); }
.veh .body { stroke: rgba(0, 0, 0, .3); stroke-width: .03; }
.veh .glass { fill: rgba(16, 24, 36, .62); }
.veh .roof { fill: rgba(255, 255, 255, .16); }
.veh .box { fill: rgba(255, 255, 255, .14); stroke: rgba(0, 0, 0, .12); stroke-width: .02; }
.veh .stripe { stroke: rgba(255, 255, 255, .85); stroke-width: .06; stroke-linecap: round; }
.veh .check { fill: #1a1a1a; }
.veh .cab-light { fill: #fff6c8; stroke: rgba(0, 0, 0, .3); stroke-width: .015; }
.veh .bus-blue { fill: var(--cta-blue); }
.veh .bus-red { fill: var(--cta-red); }
.veh .bus-roof { fill: rgba(0, 0, 0, .06); }
.veh.picked .body { stroke: #fff; stroke-width: .07; }
.veh.dragging .lip { transform: translate(.03px, .06px); }
.p-red .body { fill: var(--p-red); }
.p-teal .body { fill: var(--p-teal); } .p-cab .body { fill: var(--p-cab); } .p-orange .body { fill: var(--p-orange); }
.p-sky .body { fill: var(--p-sky); } .p-lime .body { fill: var(--p-lime); } .p-violet .body { fill: var(--p-violet); }
.p-tan .body { fill: var(--p-tan); } .p-pink .body { fill: var(--p-pink); } .p-navy .body { fill: var(--p-navy); }
.p-green .body { fill: var(--p-green); } .p-silver .body { fill: var(--p-silver); } .p-plum .body { fill: var(--p-plum); }
.p-bus .body { fill: var(--p-bus); } .p-yellow .body { fill: var(--p-yellow); } .p-purple .body { fill: var(--p-purple); } .p-blue .body { fill: var(--p-blue); }
.p-bus .glass { fill: rgba(16, 24, 36, .7); }

/* Solved: the red car drives off down the street, past the sign: pulling
   away from a standstill (a key, a replayed move), or let go from a drag
   (board.js celebrate), rolling straight on at speed and easing in under
   the sign. Under reduced motion it's there at once. */
@media (prefers-reduced-motion: no-preference) {
  .ct-tray.driving .p-red { transition: transform 800ms cubic-bezier(.55, 0, .7, 1); }
  .ct-tray.driving.rolling .p-red { transition: transform var(--ct-roll) cubic-bezier(.25, .55, .45, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-tray.win .p-red { transition: none; }
}

/* ── small trays: a daily's card, How to play ───────────────────────────── */
.ct-mini .veh, .ct-example .veh { cursor: default; transition: none; }
.ct-example { width: min(100%, 260px); height: auto; }

/* ── the home's Level picker: the box's four names need more room than three sizes do ── */
.pk .home .settings { --house-control-width: 480px; }
@media (max-width: 640px) { .pk .home .house-seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }