/* Traffic Alibi: whimsical 8-bit theme. Palette: Sweetie-16. One look for light and dark. */
:root {
  --night: #1a1c2c; --plum: #5d275d; --red: #b13e53; --orange: #ef7d57; --gold: #ffcd75;
  --lime: #a7f070; --green: #38b764; --teal: #257179; --navy: #29366f; --blue: #3b5dc9;
  --sky: #41a6f6; --cyan: #73eff7; --white: #f4f4f4; --mist: #94b0c2; --slate: #566c86; --ink: #333c57;
  --good: var(--green); --warning: var(--orange); --critical: var(--red); --neutral: var(--slate);
  --px: "Press Start 2P", monospace;   /* display: titles, buttons, labels */
  --read: "VT323", monospace;          /* body text: pixel, but readable */
  color-scheme: dark;
}
/* Pixel fonts have broken "fi" ligatures ("traffic" -> "trafc", "fix" -> "fx"). font-feature-settings,
   unlike font-variant-ligatures, survives the `font:` shorthand used throughout this file. */
* { box-sizing: border-box; font-feature-settings: "liga" 0, "clig" 0; }
html { background: var(--night); }
body {
  margin: 0; color: var(--white); font: 22px/1.15 var(--read);
  /* a quiet starfield, drawn with hard-edged dots */
  background:
    radial-gradient(circle at 12% 18%, var(--mist) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 9%, var(--gold) 0 1.5px, transparent 2px),
    radial-gradient(circle at 44% 64%, var(--mist) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 72%, var(--cyan) 0 1.5px, transparent 2px),
    radial-gradient(circle at 26% 88%, var(--gold) 0 1px, transparent 1.5px),
    var(--night);
  background-size: 260px 260px; image-rendering: pixelated;
}
main { max-width: 480px; margin: 0 auto; padding: 28px 16px 64px; }

/* ---- title bar ---- */
.title { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.title img { width: 52px; height: auto; image-rendering: pixelated; animation: bob .5s steps(2, jump-none) infinite; }
h1 { font: 24px/1.45 var(--px); margin: 0; color: var(--gold); text-shadow: 3px 3px 0 var(--red); letter-spacing: .02em; }
.sub { color: var(--mist); margin: 0 0 22px; font-size: 22px; }

/* road strip with a car driving across, under the home title */
.road { position: relative; height: 40px; margin: 4px 0 22px; overflow: hidden;
        background: linear-gradient(var(--ink) 0 0) 0 30px / 100% 10px no-repeat; }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px;
               background: repeating-linear-gradient(90deg, var(--gold) 0 12px, transparent 12px 24px); }
.road img { position: absolute; bottom: 8px; width: 52px; image-rendering: pixelated;
            animation: drive 6s steps(48) infinite, bob .4s steps(2, jump-none) infinite; }
@keyframes drive { from { left: -60px; } to { left: 100%; } }

/* ---- RPG dialog-box cards ---- */
.card { background: var(--white); color: var(--night); border: 4px solid var(--night);
        outline: 4px solid var(--white); outline-offset: 0; box-shadow: 0 0 0 8px var(--night), 8px 8px 0 8px #00000066;
        padding: 18px 18px 20px; margin: 8px 8px 28px; position: relative; }
.card p { margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
.note { color: var(--slate); font-size: 20px; }
.warn { border-left: 6px solid var(--orange); padding-left: 10px; }
label { display: block; font: 10px var(--px); margin: 14px 0 6px; }
input { width: 100%; font: 22px var(--read); padding: 8px 10px; border: 4px solid var(--night); border-radius: 0;
        background: var(--white); color: var(--night); }

/* ---- chunky buttons that press down ---- */
button, .btn {
  display: inline-block; font: 11px/1.4 var(--px); padding: 14px 14px 12px; border: 4px solid var(--night); border-radius: 0;
  background: var(--gold); color: var(--night); cursor: pointer; text-decoration: none; text-align: center;
  box-shadow: inset -4px -4px 0 #00000033, 4px 4px 0 var(--night); text-transform: uppercase;
  transition: none;
}
button:hover, .btn:hover { background: #ffe0a0; }
button:active, .btn:active { transform: translate(4px, 4px); box-shadow: inset 4px 4px 0 #00000033; }
button.ghost, .btn.ghost { background: var(--white); color: var(--night); }
button.ghost:hover, .btn.ghost:hover { background: #ffffff; }
button:disabled { opacity: .6; cursor: default; transform: none; }
button:focus-visible, .btn:focus-visible, input:focus-visible { outline: 4px dashed var(--blue); outline-offset: 3px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.row > * { flex: 1 1 auto; }
.link { font: 18px/1.1 var(--read); word-break: break-all; background: var(--night); color: var(--lime);
        padding: 8px 10px; border: 4px solid var(--night); }

/* ---- verdict ---- */
.verdict-label { font: 20px/1.4 var(--px); margin: 6px 0 10px; text-shadow: 2px 2px 0 var(--night);
                 text-transform: uppercase; }  /* also dodges Press Start's broken lowercase "ffi" */
.tone-good { color: var(--good); } .tone-warning { color: var(--warning); }
.tone-critical { color: var(--critical); } .tone-neutral { color: var(--neutral); }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 18px 0 0; font-size: 22px;
         border-top: 4px dotted var(--mist); padding-top: 12px; }
.stats dt { color: var(--slate); } .stats dd { margin: 0; text-align: right; }
.blink::after { content: "_"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- dev panels ---- */
.dev { background: var(--navy); color: var(--white); }
.dev h2 { font: 9px/1.6 var(--px); color: var(--cyan); margin: 0 0 6px; }
.dev button { font-size: 8px; padding: 10px 8px 8px; }
.hidden { display: none !important; }

/* ---- mock-app place picker pop-up ---- */
dialog.picker { width: min(440px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: auto; margin: auto; }
dialog.picker::backdrop { background: rgba(26, 28, 44, .82);
  background-image: radial-gradient(rgba(0,0,0,.35) 1px, transparent 1.5px); background-size: 4px 4px; }
dialog.picker[open] { animation: pop .18s steps(3); }
@keyframes pop { from { transform: scale(.85); } to { transform: scale(1); } }
.picker h2 { font: 14px/1.5 var(--px); margin: 0 36px 4px 0; color: var(--night); }
.picker h3 { font: 10px var(--px); margin: 16px 0 8px; color: var(--slate); }
.picker .close { position: absolute; top: 10px; right: 10px; padding: 6px 8px 4px; font-size: 10px;
                 background: var(--white); box-shadow: 2px 2px 0 var(--night); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.choices .choice { font: 20px/1 var(--read); text-transform: none; padding: 8px 8px 6px; text-align: left;
                   background: var(--white); box-shadow: 3px 3px 0 var(--night); }
.choices.small .choice { font-size: 18px; }
.choices .choice[aria-pressed="true"] { background: var(--gold); }
.choices .choice[aria-pressed="true"]::before { content: "> "; }

/* ---- 8-bit map ---- */
#map { height: 340px; margin-top: 16px; border: 4px solid var(--night); background: #62bdf0; image-rendering: pixelated; }
.pixel-tiles canvas { image-rendering: pixelated; }
.sprite { background: none; border: 0; }
.sprite svg { display: block; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.car svg { animation: bob .5s steps(2, jump-none) infinite; }
.car-real_traffic svg { animation-duration: .25s; }          /* idling hard in the jam */
.car-not_on_road svg, .car-arrived svg { animation: none; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.leaflet-tooltip.pixel-tip { font-family: var(--px); font-size: 9px; line-height: 1;
       color: var(--night); background: var(--white); border: 3px solid var(--night); border-radius: 0; padding: 6px 7px;
       box-shadow: 3px 3px 0 var(--night); white-space: nowrap; }
.leaflet-tooltip.pixel-tip::before { display: none; }
#map .leaflet-bar { border: 3px solid var(--night); border-radius: 0; box-shadow: 3px 3px 0 var(--night); }
#map .leaflet-bar a { font-family: var(--px); font-size: 12px; border-radius: 0 !important; color: var(--night); background: var(--white); }
#map .center-me a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
#map .center-me svg { width: 22px; height: 22px; }
#map .center-me a:active { transform: translate(2px, 2px); }
#map .leaflet-control-attribution { font: 13px var(--read); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: var(--ink); font: 9px var(--px); }
.legend i { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin-right: 6px; border: 2px solid var(--night); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}