:root {
  color-scheme: dark;
  --night: #100c20;
  --panel: #1a132b;
  --ink: #fff5e8;
  --muted: #cbbbda;
  --purple: #ad9ae0;
  --line: #58446c;
  --gold: #ffd394;
  --rose: #ffa8b0;
  --mint: #c7efb9;
  --display: system-ui, sans-serif;
  --body: system-ui, sans-serif;
  --mono: ui-monospace, "Courier New", monospace;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: var(--night); }
body { isolation: isolate; margin: 0; min-height: 100dvh; color: var(--ink); font: 500 14px/1.5 var(--body); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
a { color: inherit; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.world { position: fixed; inset: 0; overflow: hidden; z-index: -1; background: #151024; pointer-events: none; }
.park-strip {
  --path-width: clamp(94px, 20vw, 220px);
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 700dvh;
  transform: translate3d(-50%, calc(74dvh - var(--walker-y, 94%)), 0);
  will-change: transform;
  background:
    radial-gradient(ellipse at 38% 15%, #252647 0, transparent 36%),
    radial-gradient(ellipse at 70% 44%, #302541 0, transparent 37%),
    radial-gradient(ellipse at 30% 72%, #29253f 0, transparent 34%),
    #1a162e;
}
.park-strip::before, .park-strip::after { content: ""; position: absolute; inset-block: 0; left: 50%; transform: translateX(-50%); }
.park-strip::before {
  width: var(--path-width);
  border-inline: 3px solid #8b6164;
  box-shadow: 0 0 0 8px #36283e, 0 0 70px #100b1e75;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, #a5839222 31px 32px),
    linear-gradient(90deg, #4c3b53, #695061 49%, #4c3b53);
}
.park-strip::after { width: 1px; background: repeating-linear-gradient(180deg, #d9b69c58 0 7px, transparent 7px 29px); }
.rarity-marker {
  position: absolute;
  z-index: 2;
  top: var(--marker-y);
  left: 50%;
  width: min(calc(100% - 42px), calc(var(--path-width) + 168px));
  transform: translateX(-50%);
  border-top: 1px dashed var(--marker-color);
  opacity: .92;
}
.rarity-marker.left { margin-left: -53px; }
.rarity-marker.right { margin-left: 53px; }
.rarity-marker span {
  position: absolute;
  top: -1px;
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: clamp(78px, 28vw, 180px);
  transform: translateY(-50%);
  padding: 3px 5px;
  border: 1px solid #665071;
  border-radius: 3px;
  background: #21172f;
  color: var(--marker-color);
  font: 600 12px/1.15 var(--mono);
  text-align: left;
}
.rarity-marker.left span { right: calc(100% + 6px); }
.rarity-marker.right span { left: calc(100% + 6px); }
.rarity-marker small { font: inherit; }
.rarity-marker[data-reached] { border-top-width: 2px; opacity: 1; }
.rarity-marker[data-reached] span { border-color: var(--marker-color); }
.landmark, .walker { position: absolute; top: var(--landmark-y, var(--walker-y)); left: 50%; }
.landmark {
  z-index: 1;
  display: grid;
  width: clamp(88px, 21vw, 200px);
  justify-items: center;
  gap: 9px;
  --roof: #ae787e;
  --wall: #79566d;
  --light: #f1b785;
}
.landmark.left { transform: translate(calc(-100% - clamp(60px, 14vw, 158px)), -53%); }
.landmark.right { transform: translate(clamp(60px, 14vw, 158px), -53%); }
.landmark-label {
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #7e607a;
  border-radius: 3px;
  background: #21172f;
  color: #f8d2a6;
  font: 600 clamp(10px, 1.25vw, 13px)/1.25 var(--mono);
  text-align: center;
  text-wrap: balance;
}
.landmark-art {
  display: block;
  width: min(100%, 138px);
  aspect-ratio: 1.7;
  position: relative;
  color: var(--wall);
  filter: drop-shadow(0 7px 0 #140d236c);
}
.landmark-art::before, .landmark-art::after, .landmark-art i { position: absolute; content: ""; }
.landmark-art::before {
  inset: 41% 8% 6%;
  border: 2px solid #2a1b33;
  background: var(--wall);
}
.landmark-art::after {
  inset: 0 3% 56%;
  background: var(--roof);
  clip-path: polygon(50% 3%, 100% 94%, 0 94%);
}
.landmark-art i {
  inset: 52% 16% 18%;
  z-index: 1;
  background: repeating-linear-gradient(90deg, var(--light) 0 13%, transparent 13% 26%);
  opacity: .9;
}
.landmark.gates { --roof: #a98e9f; --wall: #66556f; }
.gates .landmark-art::before {
  inset: 21% 13% 4%;
  border: 0;
  background: var(--wall);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 83% 100%, 83% 36%, 17% 36%, 17% 100%, 0 100%);
}
.gates .landmark-art::after { inset: 0 8% 70%; clip-path: polygon(9% 70%, 25% 70%, 50% 0, 75% 70%, 91% 70%, 100% 100%, 0 100%); }
.gates .landmark-art i { inset: 31% 13% 62%; background: linear-gradient(90deg, var(--light) 0 15%, transparent 15% 85%, var(--light) 85%); }
.main-street .landmark-art::after, .floridian .landmark-art::after { clip-path: polygon(0 92%, 13% 46%, 30% 46%, 48% 0, 66% 46%, 87% 46%, 100% 92%); }
.landmark.mansion { --roof: #8c84b5; --wall: #5a506f; --light: #b2beec; }
.mansion .landmark-art::after { clip-path: polygon(0 100%, 9% 49%, 28% 49%, 28% 23%, 45% 23%, 50% 0, 55% 23%, 72% 23%, 72% 49%, 91% 49%, 100% 100%); }
.landmark.space { --roof: #b4b8dd; --wall: #797ab6; --light: #beeff8; }
.space .landmark-art::before { inset: 58% 0 7%; border-radius: 50%; }
.space .landmark-art::after { inset: 0 4% 21%; clip-path: polygon(0 88%, 32% 30%, 38% 34%, 43% 14%, 46% 19%, 50% 0, 54% 19%, 57% 14%, 62% 34%, 68% 30%, 100% 88%, 88% 100%, 12% 100%); }
.space .landmark-art i { inset: 65% 17% 25%; }
.landmark.polynesian { --roof: #a57966; --wall: #6d675d; --light: #fed092; }
.polynesian .landmark-art::after { inset: 0 0 47%; clip-path: polygon(0 100%, 16% 32%, 27% 52%, 50% 0, 73% 52%, 84% 32%, 100% 100%); }
.landmark.floridian { --roof: #b86b80; --wall: #c2a7ab; --light: #6c4762; }
.landmark.castle { --roof: #7b8cc8; --wall: #b785a9; }
.castle .landmark-art::before { inset: 18% 6% 4%; border: 0; clip-path: polygon(0 43%, 16% 43%, 16% 30%, 31% 30%, 31% 62%, 38% 62%, 38% 10%, 62% 10%, 62% 62%, 69% 62%, 69% 30%, 84% 30%, 84% 43%, 100% 43%, 100% 100%, 0 100%); }
.castle .landmark-art::after { inset: 0 3% 51%; clip-path: polygon(2% 100%, 23% 30%, 39% 96%, 50% 0, 61% 96%, 77% 30%, 98% 100%); }
.castle .landmark-art i { inset: 67% 44% 4%; border-radius: 50% 50% 0 0; background: #46305b; }
.landmark.carousel { --roof: #c0809a; --wall: #8e607e; }
.carousel .landmark-art::before { border-radius: 0 0 38% 38%; inset-inline: 16%; }
.carousel .landmark-art::after { inset-inline: 10%; background: repeating-linear-gradient(90deg, #d9b3b8 0 14%, var(--roof) 14% 28%); }
.carousel .landmark-art i { inset-inline: 24%; }
.landmark.left .landmark-label, .landmark.right .landmark-label { position: relative; }
.landmark.left .landmark-label::after, .landmark.right .landmark-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(10px, 3vw, 43px);
  border-top: 1px dashed #c39b94;
}
.landmark.left .landmark-label::after { left: 100%; }
.landmark.right .landmark-label::after { right: 100%; }
.walker { transform: translate(-50%, -50%); z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #ffe7b7; border-radius: 50%; background: #271435; box-shadow: 0 0 0 4px #f8bc7b45, 0 0 18px #ffcf74; }
.walker span { width: 8px; height: 8px; background: #ffe9bf; transform: rotate(45deg); }
.is-walking .walker span { animation: footstep .44s ease-in-out infinite alternate; }
@keyframes footstep { to { transform: translateY(-3px) rotate(45deg); } }
body[data-phase="intro"] .walker { visibility: hidden; }
.world-shade, .world-flash, .grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-shade { background: linear-gradient(180deg, #110d23cc, #130f2433 28%, transparent 52%, #110b2050 69%, #0f0a1eea 100%); }
.world-flash { opacity: 0; }
.world-flash.good { background: radial-gradient(ellipse at 50% 59%, #ffd48399, transparent 70%); animation: flash .95s ease-out; }
.world-flash.miss { background: radial-gradient(ellipse at 50% 52%, transparent 25%, #31143bc9 100%); animation: flash .85s ease-out; }
@keyframes flash { 0%, 100% { opacity: 0; } 24% { opacity: .72; } }
.grain { opacity: .11; background: repeating-linear-gradient(180deg, transparent 0 3px, #0c081b 3px 4px); }

.hud {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  padding: max(20px, env(safe-area-inset-top)) max(24px, 5vw) 0;
}
.hud-brand {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-shadow: 0 2px #140c22;
  font: 600 23px/1 var(--display);
}
body[data-phase="intro"] .hud { visibility: hidden; }
.round-progress { grid-column: 2; display: grid; justify-items: center; gap: 5px; color: var(--ink); font: 500 10px/1.4 var(--mono); letter-spacing: .13em; text-shadow: 0 1px 4px #100b1e; }
.round-dots { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.round-dots li { width: 12px; height: 11px; background: #201730; border: 1px solid #726185; }
.round-dots li.active { background: var(--gold); border-color: #ffe4b5; box-shadow: 0 0 9px #ffcc7b77; }
.round-dots li.scored { background: var(--tier); border-color: var(--tier); }
.round-dots li.missed { border-color: #b77b8e; background: #624055; }
.distance { grid-column: 3; justify-self: end; display: grid; min-width: 68px; justify-items: end; padding: 0 0 2px 11px; text-shadow: 0 1px 4px #100b1e; }
.distance strong { color: var(--gold); font: 600 27px/1 var(--mono); font-variant-numeric: tabular-nums; }
.distance span { color: var(--ink); font-size: 9px; letter-spacing: .15em; }
.distance small { margin-top: 4px; color: #f1d5af; font-size: 12px; line-height: 1.2; text-align: right; }

.stage {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 74px 20px max(28px, env(safe-area-inset-bottom));
}
.stage[data-phase="question"], .stage[data-phase="feedback"], .stage[data-phase="countdown"] {
  grid-template-rows: minmax(90px, 1fr) auto minmax(75px, 1.58fr) auto;
}
.intro { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 48px; width: min(100%, 640px); text-align: center; padding: clamp(15px, 5vh, 54px) 0 clamp(20px, 5.5vh, 52px); }
.intro h1 { color: var(--ink); font: 800 clamp(46px, 10.3vw, 115px)/1 var(--display); letter-spacing: -.025em; text-shadow: 0 3px #613d73, 0 6px #24163a, 0 0 36px #13091b; }
.intro h1 span { color: var(--gold); }
.intro-subtitle { color: var(--gold); font-size: clamp(11px, 2vw, 14px); letter-spacing: .29em; text-transform: uppercase; margin-top: 16px; text-shadow: 0 2px 8px #090415, 0 2px 8px #090415; }
.intro-controls { display: grid; gap: 13px; justify-items: center; }
.intro-instructions { color: var(--ink); font-size: clamp(11px, 2vw, 14px); text-shadow: 0 2px 5px #0a0517, 0 2px 10px #0a0517; }
.intro-instructions span { color: var(--gold); }
.intro small { color: #dfd1ea; text-shadow: 0 2px 5px #0a0517; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.arcade-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 52px;
  padding: 0 23px;
  background: #1d152e;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 0 #604365, inset 0 0 0 3px #282039;
  color: var(--ink);
  font: 700 16px/1 var(--display);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.arcade-button:hover { background: #382747; }
.arcade-button.primary { background: var(--gold); color: #281731; box-shadow: 0 4px 0 #825a63, inset 0 0 0 3px #e9ad77; border-color: #ffe2ac; }
.arcade-button.primary:hover { background: #ffe1ab; }
.arcade-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #604365; }
.arcade-button:disabled { opacity: .63; }
.arcade-button.primary:disabled { background: #d8ae86; }
.intro .arcade-button { width: min(340px, 80vw); min-height: 59px; font-size: 19px; }

.prompt-box {
  grid-row: 2;
  width: min(100%, 565px);
  padding: 17px 22px 19px;
  background: #151126eF;
  border: 1px solid #78608b;
  border-left: 3px solid var(--gold);
  box-shadow: 0 5px 0 #110b1ecc;
  text-align: left;
}
.prompt-index { margin-bottom: 5px; color: var(--gold); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.prompt-box h1 { font: 700 clamp(23px, 4.5vw, 37px)/1.12 var(--display); letter-spacing: .005em; text-wrap: pretty; }

.answer-dock { grid-row: 4; position: relative; display: grid; grid-template-columns: 47px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: min(100%, 650px); padding-bottom: max(9px, 2vh); }
.entry-status {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
  padding: 7px 11px;
  border: 1px solid #6b526f;
  background: #151024;
  color: #fff0df;
}
.entry-message { font-weight: 700; overflow-wrap: anywhere; }
.entry-instructions { color: var(--muted); }
.answer-wrap input.shake { animation: answer-shake .27s ease-out; }
@keyframes answer-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.timer {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #a17d9d;
  border-radius: 50%;
  background: #1a142a;
  color: var(--gold);
  font: 600 21px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px #1d132b;
}
.answer-dock.urgent .timer { color: var(--rose); border-color: var(--rose); }
.answer-wrap { position: relative; min-width: 0; }
.answer-wrap input {
  width: 100%;
  height: 52px;
  padding: 0 13px;
  color: var(--ink);
  background: #151024;
  border: 1px solid #9979ad;
  border-radius: 0;
  font: 500 18px/1.25 var(--body);
  letter-spacing: .01em;
}
.answer-wrap input::placeholder { color: #b7a2c6; }
.answer-wrap input:focus { outline: 1px solid var(--gold); border-color: var(--gold); }
.answer-wrap input[aria-invalid="true"] { border-color: var(--rose); outline-color: var(--rose); }
.time-track { position: absolute; inset: auto 0 -8px; height: 3px; overflow: hidden; background: #5b466a; }
.time-track i { display: block; height: 100%; background: var(--gold); transform: scaleX(var(--remaining, 1)); transform-origin: left; }
.answer-dock.urgent .time-track i { background: var(--rose); }

.countdown { grid-row: 4; align-self: end; margin-bottom: 2vh; padding: 8px 16px; border: 1px solid var(--line); color: var(--ink); background: #151026e8; text-align: center; }
.countdown strong { color: var(--gold); font: 600 25px/1 var(--display); vertical-align: -.07em; }
.feedback { grid-row: 2; text-align: center; text-shadow: 0 2px 7px #160a23, 0 2px 9px #160a23; }
.feedback:focus { outline: none; }
.feedback h1 { margin: 8px 0 6px; color: var(--tier); font: 700 clamp(31px, 6vw, 64px)/1.08 var(--display); text-wrap: balance; }
.feedback-answer {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
  border-radius: 5px;
  background: #171021ee;
  color: var(--tier);
  font: 700 clamp(19px, 3.5vw, 29px)/1.12 var(--display);
  overflow-wrap: anywhere;
}
.feedback-steps { margin-top: 12px; color: var(--ink); }
.rarity-reveal { transition: opacity .35s ease; }
.stage[data-walking] .rarity-reveal { visibility: hidden; opacity: 0; }
.continue { grid-row: 4; align-self: end; margin-bottom: max(9px, 2vh); }
.stage[data-walking] .continue { visibility: hidden; }

.results { width: min(100%, 565px); padding: clamp(19px, 4vw, 32px); border: 1px solid #836891; background: #151026ed; box-shadow: 0 5px 0 #0f091c99; }
.results h1 { font: 700 clamp(34px, 6.5vw, 60px)/1.08 var(--display); color: var(--gold); text-wrap: balance; }
.results h1:focus, .countdown:focus { outline: none; }
.result-line { margin-top: 9px; color: var(--muted); }
.result-line strong { color: var(--ink); }
.result-emoji { margin-top: 9px; line-height: 1.35; letter-spacing: .13em; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.result-actions .arcade-button { min-height: 42px; padding-inline: 13px; font-size: 14px; }
.today-link { border: 0; padding: 8px 0; color: var(--muted); background: none; }
.today-link:hover { color: var(--ink); }
.share-text { width: 100%; min-height: 115px; margin-top: 10px; padding: 8px; border: 1px solid var(--line); background: var(--night); color: var(--ink); }
.review { margin-top: 15px; border-top: 1px solid #50385e; padding-top: 13px; }
summary { color: #ecdaf7; cursor: pointer; }
.result-list { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.result-list > li { border: 1px solid #50385e; padding: 9px; background: #21172e; }
.result-list summary { font-size: 12px; color: var(--ink); }
.result-answer { color: var(--muted); margin-top: 5px; font-size: 11px; overflow-wrap: anywhere; }
.answer-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.answer-key li { padding: 3px 6px; background: #342445; color: #e8d9ee; font-size: 11px; }

.stage[data-phase="question"].keyboard-open {
  position: fixed;
  z-index: 2;
  inset: var(--visible-top) auto auto var(--visible-left);
  width: var(--visible-width);
  height: var(--visible-height);
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 15px 13px;
}
.keyboard-open .prompt-box { grid-row: 1; align-self: start; max-height: 100%; overflow: auto; padding: 9px 13px; }
.keyboard-open .prompt-box h1 { font-size: clamp(20px, 5vw, 28px); }
.keyboard-open .answer-dock { grid-row: 2; padding-bottom: 4px; }
.keyboard-open .entry-status { grid-column: 1 / -1; padding-block: 4px; }

@media (max-width: 520px) {
  .hud { padding-inline: 14px; }
  .hud-brand span { font-size: 17px; }
  .hud-brand img { width: 23px; height: 23px; }
  .round-dots { gap: 3px; }
  .round-dots li { width: 8px; height: 8px; }
  .round-progress { font-size: 9px; }
  .distance { min-width: 46px; }
  .distance strong { font-size: 22px; }
  .distance small { font-size: 10px; }
  .landmark-label { padding-inline: 4px; }
  .rarity-marker { width: var(--path-width); }
  .rarity-marker.left, .rarity-marker.right { margin-left: 0; }
  .rarity-marker span { font-size: 9px; padding: 2px 4px; gap: 3px; }
  .stage { padding-inline: 15px; }
  .stage[data-phase="question"], .stage[data-phase="feedback"], .stage[data-phase="countdown"] { grid-template-rows: minmax(55px, .8fr) auto minmax(40px, 1.45fr) auto; }
  .intro { justify-content: space-around; }
  .prompt-box { padding: 13px 15px 15px; }
  .answer-dock { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 7px; }
  .timer { width: 35px; height: 35px; font-size: 17px; }
  .answer-wrap input { height: 47px; padding-inline: 8px; font-size: 16px; }
  .answer-dock .arcade-button { min-height: 47px; padding-inline: 9px; font-size: 15px; }
  .entry-status { grid-column: 1 / -1; }
}

@media (max-height: 460px) {
  .stage { padding-block: 52px 15px; }
  .stage[data-phase="question"], .stage[data-phase="feedback"], .stage[data-phase="countdown"] { grid-template-rows: minmax(12px, .7fr) auto minmax(25px, 1fr) auto; }
  .intro { padding: 0; gap: 12px; }
  .intro h1 { font-size: clamp(41px, 13vh, 82px); }
  .hud { padding-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .answer-wrap input.shake, .is-walking .walker span { animation: none; }
  .rarity-reveal { transition: none; }
  .world-flash { animation: none !important; }
}