/* Pot Holes -- UI. System fonts only; nothing is fetched. */

:root {
  --ink: #1b1422;
  --purple: #2a1840;
  --purple-2: #4b2a7a;
  --gold: #f2b632;
  --green: #1f8a4c;
  --cream: #f4efe2;
  --cobalt: #1d4f9c;
  --red: #d8432e;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #f3d9b6;
  color: var(--cream);
  font-family: var(--ui);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hidden { display: none !important; }

/* ---------------------------------------------------------------- HUD */

#hud {
  position: fixed;
  top: calc(var(--safe-t) + 10px);
  left: calc(var(--safe-l) + 12px);
  right: calc(var(--safe-r) + 12px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.score {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(27, 20, 34, 0.55);
}

.sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(27, 20, 34, 0.6);
}

.meter { margin-top: 10px; width: 150px; }

.meter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 var(--ink);
}

.meter-track {
  margin-top: 3px;
  height: 12px;
  border-radius: 6px;
  background: rgba(27, 20, 34, 0.6);
  border: 2px solid var(--ink);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 100%;
  background: var(--green);
  transform-origin: left center;
  transition: transform 0.18s ease-out, background-color 0.18s;
}

.meter-fill.mid { background: var(--gold); }
.meter-fill.low { background: var(--red); }
.meter-track.hit { animation: shake 0.3s; }

@keyframes shake {
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.hud-right { display: flex; gap: 8px; pointer-events: auto; }

.round {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: rgba(42, 24, 64, 0.72);
  color: var(--cream);
  font: 800 16px/1 var(--ui);
  letter-spacing: 1px;
  touch-action: manipulation;
}

.round.off { color: rgba(244, 239, 226, 0.35); text-decoration: line-through; }

/* --------------------------------------------------- warnings + labels */

.warn, .toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  text-align: center;
  pointer-events: none;
}

.warn {
  top: calc(var(--safe-t) + 112px);
  padding: 9px 16px;
  border-radius: 8px;
  border: 3px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--gold) 0 14px, #e3a51f 14px 28px);
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.toast {
  /* at the bottom: the top of the screen is where the next hazard appears */
  bottom: calc(var(--safe-b) + 18px);
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(27, 20, 34, 0.82);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.toast.good { background: rgba(31, 138, 76, 0.92); }
.toast.bad { background: rgba(216, 67, 46, 0.92); }

/* ------------------------------------------------------------ overlays */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-t) + 7vh) calc(var(--safe-r) + 20px) calc(var(--safe-b) + 22px) calc(var(--safe-l) + 20px);
  text-align: center;
  background: linear-gradient(180deg, rgba(42, 24, 64, 0.9) 0%, rgba(42, 24, 64, 0.5) 46%, rgba(27, 20, 34, 0.86) 100%);
}

.overlay p { margin: 0; }

.bottom {
  margin-top: auto;
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* The title is set in street-name tiles, the way corners are lettered here. */
.tiles { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tile-row { display: flex; gap: 5px; }

.tile-row span {
  width: min(15vw, 64px);
  height: min(15vw, 64px);
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--cobalt);
  border: 3px solid var(--cobalt);
  outline: 2px solid var(--cream);
  font: 700 min(10vw, 42px)/1 var(--serif);
  box-shadow: 0 3px 0 rgba(27, 20, 34, 0.6);
}

.tile-row .loose { transform: rotate(7deg) translateY(4px); }

/* the O in HOLES is, naturally, a pothole */
.tile-row .hole {
  background:
    radial-gradient(ellipse 34% 30% at 50% 56%, #0c0a09 0 98%, transparent 100%),
    radial-gradient(ellipse 46% 42% at 50% 52%, #3a2c22 0 98%, transparent 100%),
    #6e6a63;
  border-color: #56534f;
  outline-color: #56534f;
}

.tagline { margin-top: 20px !important; font: italic 700 20px/1.2 var(--serif); color: var(--gold); }
.subtag { margin-top: 6px !important; font-size: 15px; font-weight: 600; }
.best { margin-top: 14px !important; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); min-height: 16px; }
.tip { font: italic 400 14px/1.35 var(--serif); opacity: 0.92; min-height: 38px; }
.keys { font-size: 12px; opacity: 0.7; }

.modes { display: flex; gap: 6px; }

.mode {
  flex: 1;
  min-height: 42px;
  border-radius: 10px;
  border: 2px solid rgba(244, 239, 226, 0.5);
  background: transparent;
  color: var(--cream);
  font: 700 14px/1 var(--ui);
  touch-action: manipulation;
}

.mode.on { background: var(--cream); color: var(--purple); border-color: var(--cream); }

/* street picker: three streets, easiest first */
.streets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.street {
  flex: 1;
  min-height: 48px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 2px solid rgba(242, 182, 50, 0.55);
  background: rgba(27, 20, 34, 0.35);
  color: var(--cream);
  font: 700 13px/1.15 var(--ui);
  touch-action: manipulation;
}
.street .lvl { display: block; font-size: 11px; letter-spacing: 0.12em; color: var(--gold); }
.street.on { background: var(--gold); color: var(--purple); border-color: var(--gold); }
.street.on .lvl { color: var(--purple-2); }
.street-info { font-size: 13px; line-height: 1.35; min-height: 36px; }
.street-info strong { color: var(--gold); }
.over-street { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px !important; }

/* Bourbon Street: throw beads on the windshield. Strands of dots across the glass. */
.beads { position: fixed; inset: 0; pointer-events: none; z-index: 3; animation: beads-in 0.15s ease-out; }
.strand {
  position: absolute;
  height: 16px;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 45%, #fff9 0 2px, var(--bead) 3px 6px, transparent 7px) 0 0 / 15px 16px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
.s1 { --bead: #8e3fd6; width: 120vw; left: -10vw; top: 22%; transform: rotate(-12deg); }
.s2 { --bead: #2fbf4a; width: 110vw; left: -5vw; top: 36%; transform: rotate(9deg); }
.s3 { --bead: #f2c230; width: 120vw; left: -12vw; top: 48%; transform: rotate(-4deg); }
.s4 { --bead: #8e3fd6; width: 90vw; left: 10vw; top: 60%; transform: rotate(16deg); }
.s5 { --bead: #f2c230; width: 100vw; left: 0; top: 30%; transform: rotate(27deg); }
.s6 { --bead: #2fbf4a; width: 105vw; left: -2vw; top: 68%; transform: rotate(-20deg); }
@keyframes beads-in { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

.big {
  min-height: 62px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  font: 900 22px/1 var(--ui);
  letter-spacing: 0.08em;
  box-shadow: 0 5px 0 var(--ink);
  touch-action: manipulation;
}

.big:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }

.ghost {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--cream);
  font: 700 15px/1 var(--ui);
  text-decoration: underline;
  touch-action: manipulation;
}

button:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }

.card-title { margin: 12vh 0 0; font: italic 700 34px/1.1 var(--serif); color: var(--gold); }

.over-line { font: italic 700 26px/1.2 var(--serif); color: var(--cream); max-width: 460px; }
.over-cause { margin-top: 10px !important; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }

.result { margin-top: 5vh; }
.result-score { font-size: 76px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 0 4px 0 var(--ink); }
.stats { margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; }

.fatal {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--safe-b) + 12px);
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  z-index: 10;
}

.debug {
  position: fixed;
  left: calc(var(--safe-l) + 8px);
  bottom: calc(var(--safe-b) + 8px);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre;
  pointer-events: none;
}

/* short landscape screens: tighten everything so the buttons still fit */
@media (max-height: 460px) {
  .overlay { padding-top: calc(var(--safe-t) + 12px); }
  .tiles { flex-direction: row; gap: 14px; }
  .tile-row span { width: 40px; height: 40px; font-size: 26px; }
  .tagline { margin-top: 8px !important; font-size: 16px; }
  .tip, .keys { display: none; }
  .big { min-height: 48px; font-size: 18px; }
  .card-title { margin-top: 2vh; }
  .result { margin-top: 1vh; }
  .result-score { font-size: 46px; }
  .over-line { font-size: 19px; }
  .warn { top: calc(var(--safe-t) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .meter-track.hit { animation: none; }
  .meter-fill { transition: none; }
}

/* v0.3 pedals: hold to speed up / slow down. Bottom corners, out of the drag's way. */
.pedals { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-b) + 14px); display: flex; justify-content: space-between;
  padding: 0 calc(var(--safe-r) + 14px) 0 calc(var(--safe-l) + 14px); pointer-events: none; z-index: 2; }
.pedal { pointer-events: auto; width: 72px; height: 72px; border-radius: 18px; border: 2px solid rgba(244, 239, 226, 0.55);
  background: rgba(27, 20, 34, 0.45); color: var(--cream); font: 900 22px/1 var(--ui); touch-action: none;
  user-select: none; -webkit-user-select: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.pedal span { font-size: 10px; letter-spacing: 0.14em; font-weight: 800; }
.pedal.gas.on { background: rgba(31, 138, 76, 0.85); border-color: var(--cream); }
.pedal.brake.on { background: rgba(216, 67, 46, 0.85); border-color: var(--cream); }
#hud.hidden ~ .pedals, body.no-pedals .pedals { display: none; }

/* v0.3 finish line */
#over.win .over-line { color: var(--gold); }
.big.next { background: var(--green); color: var(--cream); }

/* v0.3 high scores: arcade initials + the board */
.hs { margin-top: 10px; text-align: center; }
.hs-title { font-size: 13px; font-weight: 900; letter-spacing: 0.14em; color: var(--gold); animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.45; } }
.initials { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 8px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.letter { font: 900 40px/1 ui-monospace, "Courier New", monospace; width: 46px; padding: 6px 0; text-align: center;
  background: var(--ink); border: 2px solid var(--gold); border-radius: 8px; color: var(--gold); }
.letter.cur { background: var(--gold); color: var(--purple); }
.arrow { width: 46px; height: 32px; border-radius: 8px; border: 2px solid rgba(244, 239, 226, 0.5); background: transparent;
  color: var(--cream); font-size: 14px; touch-action: manipulation; }
.hs-ok { height: 52px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--gold); color: var(--purple);
  font: 900 15px/1 var(--ui); letter-spacing: 0.12em; touch-action: manipulation; }
.board { margin: 10px auto 0; width: min(320px, 92vw); }
.board-title { font-size: 12px; font-weight: 900; letter-spacing: 0.16em; color: var(--gold); text-align: center; }
.board-list { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: rank; font: 700 15px/1.5 ui-monospace, "Courier New", monospace; }
.board-list li { counter-increment: rank; display: flex; gap: 10px; }
.board-list li::before { content: counter(rank) "."; width: 2.2em; text-align: right; opacity: 0.7; }
.board-list li:empty { display: none; }
.board-list li.mine { color: var(--gold); }
.petition { display: block; margin: 12px auto 0; max-width: 420px; padding: 12px 14px; border-radius: 12px; background: var(--red);
  color: var(--cream); text-decoration: none; text-align: center; font-size: 14px; line-height: 1.35; }
.title-petition { color: var(--gold); }
#over { overflow-y: auto; }

/* v0.5 the clock */
.clock { margin-top: 6px; font: 900 18px/1 ui-monospace, "Courier New", monospace; letter-spacing: 0.08em; color: var(--gold);
  text-shadow: 0 1px 0 var(--ink); }
.clock.low { color: var(--red); animation: blink 0.5s steps(2) infinite; }
/* doubloons on the windshield: gold, purple and green coins */
.coin { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.25);
  background: radial-gradient(circle at 35% 30%, #fff8 0 4px, var(--c) 6px 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); }
.c1 { --c: #e8b923; left: 8%; top: 20%; } .c2 { --c: #8e3fd6; left: 30%; top: 32%; } .c3 { --c: #2fbf4a; left: 62%; top: 18%; }
.c4 { --c: #e8b923; left: 78%; top: 40%; } .c5 { --c: #e8b923; left: 18%; top: 55%; } .c6 { --c: #8e3fd6; left: 48%; top: 50%; }
.c7 { --c: #2fbf4a; left: 70%; top: 62%; } .c8 { --c: #e8b923; left: 40%; top: 70%; } .c9 { --c: #8e3fd6; left: 85%; top: 15%; }
.c10 { --c: #e8b923; left: 5%; top: 75%; } .c11 { --c: #2fbf4a; left: 25%; top: 12%; } .c12 { --c: #e8b923; left: 55%; top: 30%; }
/* the daiquiri stop */
.daq-offer { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 100px); z-index: 4;
  padding: 14px 20px; border-radius: 14px; border: 3px solid var(--cream); background: #e2336b; color: var(--cream);
  font: 900 18px/1 var(--ui); letter-spacing: 0.06em; animation: blink 0.8s steps(2) infinite; touch-action: manipulation; }
.modal { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; background: rgba(27, 20, 34, 0.88); }
.modal .big { width: min(320px, 90vw); }
.modal-title { margin: 0 0 8px; font: italic 700 26px/1.2 var(--serif); color: var(--gold); text-align: center; }
/* arrested: the sign, and the whole screen flashes red and blue */
.arrest { position: fixed; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; animation: siren 0.5s steps(1) infinite; }
@keyframes siren { 0% { background: rgba(220, 20, 40, 0.75); } 50% { background: rgba(20, 60, 230, 0.75); } }
.arrest-title { margin: 0; font: 900 clamp(48px, 14vw, 96px)/1 var(--ui); letter-spacing: 0.1em; color: #fff;
  text-shadow: 0 4px 0 #000; }
.arrest-line { margin: 0; max-width: 520px; text-align: center; font: 800 clamp(20px, 5vw, 30px)/1.25 var(--ui); color: #fff;
  background: #111; padding: 14px 18px; border: 4px solid #fff; border-radius: 6px; }