:root{
  font-family:Inter,Avenir Next,ui-rounded,system-ui,-apple-system,sans-serif;
  color:#17333b;background:#eaf4ee;font-synthesis:none;
  --ink:#17333b;--cream:#fffaf0;--gold:#f4b942;--coral:#f35f4f;--teal:#2ea69b;--sky:#8ddbd4;
  --road:#ead7aa;--road-edge:#b9945d;--ground:#6d966d;--ground-deep:#4f7659;--route:#078b93;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;overscroll-behavior:none}
button,select{font:inherit}
button{color:inherit}
body{
  min-height:100svh;
  background:
    radial-gradient(circle at 4% 8%,rgba(244,185,66,.24),transparent 28%),
    radial-gradient(circle at 94% 84%,rgba(46,166,155,.2),transparent 32%),
    #eaf4ee;
}
.shell{width:min(100%,1040px);margin:auto;padding:18px 16px 30px}
.hero{
  position:relative;min-height:205px;border:2px solid var(--ink);border-radius:30px;overflow:hidden;
  box-shadow:8px 9px 0 var(--ink);color:white;margin-bottom:18px;background:#246a72;
}
.hero-art{position:absolute;inset:0;background:url("./assets/street-scene.png") center 54%/cover no-repeat;transform:scale(1.01)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,40,48,.89) 0%,rgba(8,40,48,.58) 42%,rgba(8,40,48,.04) 78%)}
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
.brand{display:flex;align-items:center;gap:11px;line-height:.92}
.brand-mark{
  position:relative;width:48px;height:48px;border:2px solid white;border-radius:15px;background:var(--gold);
  box-shadow:3px 3px 0 var(--ink);overflow:hidden;
}
.brand-mark::before{content:"";position:absolute;left:8px;bottom:11px;width:29px;height:7px;border-radius:99px;background:var(--ink);transform:rotate(-25deg)}
.brand-mark::after{content:"";position:absolute;left:27px;top:8px;width:8px;height:25px;border-radius:99px;background:white;transform:rotate(35deg)}
.brand-mark i{position:absolute;right:7px;bottom:7px;width:11px;height:11px;border:3px solid var(--ink);border-radius:50%;background:white}
.brand strong,.brand small{display:block;text-shadow:0 2px 10px rgba(0,0,0,.28)}
.brand strong{font-size:20px}.brand small{font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-top:6px}
.chip{
  min-height:44px;border:1.5px solid rgba(255,255,255,.78);border-radius:999px;background:rgba(9,43,50,.56);
  backdrop-filter:blur(8px);padding:9px 14px;font-weight:800;font-size:12px;color:white;
}
.hero-copy{position:relative;z-index:2;padding:16px 24px 24px}
.eyebrow{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.hero-copy h1{font-size:clamp(28px,4vw,43px);line-height:.96;letter-spacing:-.04em;margin:11px 0 0;text-shadow:0 3px 18px rgba(0,0,0,.36)}

.game-card{
  display:grid;grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr);gap:22px;
  background:rgba(255,250,240,.97);border:2px solid var(--ink);border-radius:30px;padding:20px;
  box-shadow:8px 9px 0 var(--ink);
}
.game-info{min-width:0;display:flex;flex-direction:column}
.level-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.level-head p{margin:0;color:#5f776f;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.level-head h2{margin:4px 0 2px;font-size:25px;line-height:1.05;letter-spacing:-.03em}
.chapter-note{font-size:12px;color:#71827c;font-weight:700}
.level-picker{
  white-space:nowrap;border:1.5px solid var(--ink);border-radius:13px;background:white;padding:7px 8px;
  font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
}
.level-picker select{display:block;margin-top:3px;border:0;background:transparent;font-weight:800;text-transform:none;letter-spacing:0;max-width:116px}
.score-strip{display:grid;grid-template-columns:.7fr 1.3fr;gap:8px;margin:17px 0 0}
.score-strip>div{min-height:62px;padding:10px 11px;border:1px solid #c8d8d0;border-radius:14px;background:#f5faf7}
.score-strip .best-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff8da,#fff0ad);border:2px solid #e0aa2e;box-shadow:0 4px 0 rgba(177,126,18,.2)}
.best-card #best{padding-right:58px}.best-card #best-badge{position:absolute;right:7px;top:7px;padding:4px 6px;border-radius:999px;background:var(--ink);color:white;font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.score-strip small{display:block;color:#71827c;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;margin-bottom:4px}
.score-strip strong{display:block;font-size:12px;line-height:1.25}
.score-strip .stars{font-size:20px;letter-spacing:.08em;color:#e6a323}
.pace-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.route-note{margin:0 2px;color:#71827c;font-size:11px;font-weight:750}
.timer{flex:0 0 auto;padding:5px 8px;border-radius:9px;background:#17333b;color:white;font-size:10px;font-variant-numeric:tabular-nums;font-weight:900}.timer.over{background:#a4473f}
.mode-badge{align-self:flex-start;margin-top:8px;padding:5px 8px;border-radius:8px;background:#d9f2ed;color:#17665e;font-weight:850;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.preview-badge{background:#fff0bb;color:#75520a}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 5px;font-size:10px;font-weight:850;color:#526b64}
.legend span{display:flex;align-items:center;gap:5px}.legend-icon{display:inline-grid;place-items:center;width:24px;height:24px;padding:2px;border-radius:7px;background:#edf5ef}.legend-icon svg{width:100%;height:100%;display:block}
.score-help{margin:4px 0 2px;color:#61776f;font-size:10px}.score-help summary{font-weight:900;cursor:pointer}.score-help p{margin:6px 0 0;line-height:1.45}
.status{min-height:50px;margin:10px 0 5px;display:flex;align-items:center;font-weight:800;line-height:1.35;color:#526b64}
.status.bad{color:#b53c34}.status.good{color:#157563;font-size:18px}
.status.sr-only{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.controls button,.settings button{
  min-height:46px;border:1.5px solid var(--ink);border-radius:13px;background:white;padding:9px 10px;
  font-weight:850;box-shadow:2px 2px 0 var(--ink);cursor:pointer;
}
.controls button span{font-size:16px;margin-right:4px}.controls button:active,.settings button:active{transform:translate(2px,2px);box-shadow:none}
.controls button:disabled{opacity:.36;box-shadow:none;cursor:not-allowed}
.controls #hint{background:#edf9f6}.controls #preview{background:#fff4d3}
.controls .primary{grid-column:1/-1;background:var(--gold);font-size:15px}
.controls .celebrate{animation:pop .35s ease}

.board-wrap{min-width:0;padding:10px;border:1px solid #b6cbc1;border-radius:24px;background:#dceee4}
.board-label{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 9px;color:#48645b}
.board-label span{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.board-label small{font-size:10px;font-weight:750}
.board{
  --gap:5px;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));gap:var(--gap);width:100%;aspect-ratio:1/1;padding:10px;
  background:linear-gradient(145deg,#5f8765,#476a52);border:2px solid var(--ink);border-radius:20px;
  touch-action:none;user-select:none;position:relative;overflow:hidden;contain:layout paint;
}
.route-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.route-shadow,.route-line,.route-dashes,.preview-shadow,.route-preview{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route-shadow,.preview-shadow{stroke:rgba(16,48,52,.78);stroke-width:18}
.route-line,.route-preview{stroke:var(--route);stroke-width:12}
.route-dashes{stroke:#fffaf0;stroke-width:2.5;stroke-dasharray:2 9}
.route-preview{opacity:.82}.preview-shadow{opacity:.58}
.route-head{fill:var(--coral);stroke:white;stroke-width:4;filter:drop-shadow(0 2px 2px rgba(23,51,59,.35))}
.cell{
  position:relative;z-index:auto;display:grid;place-items:center;border:0;border-radius:13px;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;padding:0;
  touch-action:none;transition:transform .15s ease,filter .15s ease,background .15s ease;
}
.cell.block{background:linear-gradient(145deg,#7ca47a,#638b68);box-shadow:inset 0 0 0 2px rgba(245,235,204,.42),0 1px 0 rgba(23,51,59,.28);border-radius:10px}
.cell.road{
  background:linear-gradient(145deg,#f2e4c3,#dfc590);box-shadow:inset 0 0 0 2px rgba(255,250,234,.82),inset 0 -3px 0 rgba(176,137,80,.2),0 0 0 1px #b18f5d;cursor:pointer;border-radius:8px;
}
.street{position:absolute;z-index:0;inset:3px;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(169,126,68,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.44)}
.closed-art{position:absolute;display:block;filter:drop-shadow(0 3px 1px rgba(23,51,59,.22));pointer-events:none}
.closed-art.garden{inset:7%;filter:drop-shadow(0 3px 1px rgba(23,51,59,.24))}
.tree-icon{display:block;width:100%;height:100%;overflow:visible}
.tree-shadow{fill:rgba(23,51,59,.22)}
.tree-bed{fill:#e9d29f;stroke:var(--ink);stroke-width:4}
.tree-trunk{fill:#b9793e;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.tree-branch{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.tree-crown{fill:#3f7652;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.tree-crown-light{fill:#67a06c;opacity:.9}
.tree-leaf{fill:#9ac786}
.closed-art.barricade{inset:18% 6% 12%}
.closed-art.barricade b{position:absolute;z-index:3;left:2%;right:2%;top:20%;height:31%;border:3px solid var(--ink);border-radius:6px;background:repeating-linear-gradient(135deg,#fff6dc 0 13px,#ef6958 13px 26px);box-shadow:0 4px 0 rgba(23,51,59,.2)}
.closed-art.barricade i,.closed-art.barricade em{position:absolute;z-index:2;top:46%;bottom:2%;width:9%;border-radius:0 0 4px 4px;background:var(--ink);font-style:normal}
.closed-art.barricade i{left:19%}.closed-art.barricade em{right:19%}
.closed-art.barricade::before,.closed-art.barricade::after{content:"";position:absolute;z-index:4;top:5%;width:13%;aspect-ratio:1;border:3px solid var(--ink);border-radius:50%;background:#f4b942}
.closed-art.barricade::before{left:19%}.closed-art.barricade::after{right:19%}
.cell.route{filter:saturate(1.08)}
.cell.head{filter:brightness(1.06)}
.cell.error{animation:shake .28s linear 2;background:#ff9a8a}
.cell.passed{transform:scale(.96)}
.cell.hint{animation:hintPulse .9s ease-in-out infinite;box-shadow:inset 0 0 0 4px white,0 0 0 4px var(--gold)}
.cell.visited-stop .landmark{transform:scale(.86);opacity:.68}
.landmark{position:relative;z-index:7;width:64%;height:64%;display:grid;place-items:center;filter:drop-shadow(0 2px 1px rgba(23,51,59,.25));transition:.2s ease}
.landmark .game-icon{display:block;width:100%;height:100%;overflow:visible}
.landmark.parcel i,.landmark.shop i{position:absolute;left:12%;right:12%;bottom:-5px;height:5px;border-radius:99px;background:var(--pair);box-shadow:0 1px 0 white}
.landmark.start{width:72%;height:72%}.landmark.finish{width:60%;height:60%}
.keepsake{position:absolute;z-index:6;right:8%;top:8%;display:grid;place-items:center;width:22%;aspect-ratio:1;border-radius:50%;background:#ffe48a;color:#865d12;border:2px solid white;box-shadow:0 2px 0 var(--ink);font-size:clamp(8px,2.5vw,17px);animation:keepsakePulse 1.5s ease-in-out infinite}
.start-cue{display:none;position:absolute;z-index:9;left:50%;top:2px;transform:translateX(-50%);white-space:nowrap;padding:3px 6px;border-radius:999px;background:#17333b;color:white;font-size:clamp(7px,1.2vw,10px);font-weight:950;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.board.onboarding .start-cue{display:block;animation:startCue 1.2s ease-in-out infinite}.board.onboarding .start-cell{box-shadow:inset 0 0 0 3px white,0 0 0 4px var(--gold)}
.success-burst{position:absolute;z-index:12;inset:10%;display:grid;place-items:center;align-content:center;gap:5px;padding:12px;border:3px solid white;border-radius:24px;background:rgba(23,51,59,.96);color:white;opacity:0;pointer-events:none;transform:scale(.82);box-shadow:0 18px 45px rgba(23,51,59,.42)}
.success-burst strong{font-size:clamp(20px,5vw,42px);letter-spacing:-.03em}.success-stars{color:var(--gold);font-size:clamp(24px,6vw,48px);font-weight:950;letter-spacing:.12em;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.22)}.success-van{width:clamp(58px,16vw,112px);height:clamp(58px,16vw,112px);filter:drop-shadow(0 6px 0 rgba(0,0,0,.22))}.success-van svg{width:100%;height:100%}
.success-actions{position:relative;z-index:14;display:grid;grid-template-columns:minmax(150px,1fr) auto;gap:8px;width:min(100%,360px);margin-top:5px}.success-actions button{min-height:46px;border:2px solid white;border-radius:13px;padding:8px 13px;font-weight:950;cursor:pointer}.success-primary{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 #b8790c;font-size:clamp(13px,3vw,17px)}.success-secondary{background:transparent;color:white;font-size:12px}.success-actions button:focus-visible{outline:4px solid #8ddbd4;outline-offset:3px}.success-actions button:active{transform:translateY(3px);box-shadow:none}
.success-burst i{position:absolute;width:9px;height:18px;border-radius:4px;background:var(--gold);opacity:0}.success-burst i:nth-of-type(3n){background:var(--coral)}.success-burst i:nth-of-type(3n+1){background:var(--sky)}
.delivered .success-burst{animation:deliveryCard .58s cubic-bezier(.2,.9,.2,1) both;pointer-events:auto}.delivered .route-line{animation:routeGlow .7s ease-in-out 2}.delivered .success-burst>i{animation:confetti 1s ease-out both}
.success-burst i:nth-of-type(1){left:10%;top:10%;--x:-25px;--y:-32px;--r:180deg}.success-burst i:nth-of-type(2){left:28%;top:2%;--x:-12px;--y:-38px;--r:240deg}.success-burst i:nth-of-type(3){left:50%;top:5%;--x:8px;--y:-44px;--r:300deg}.success-burst i:nth-of-type(4){right:18%;top:10%;--x:26px;--y:-30px;--r:220deg}.success-burst i:nth-of-type(5){right:4%;top:34%;--x:36px;--y:-8px;--r:160deg}.success-burst i:nth-of-type(6){right:8%;bottom:18%;--x:33px;--y:25px;--r:270deg}.success-burst i:nth-of-type(7){right:27%;bottom:2%;--x:16px;--y:40px;--r:190deg}.success-burst i:nth-of-type(8){left:48%;bottom:0;--x:-5px;--y:42px;--r:250deg}.success-burst i:nth-of-type(9){left:24%;bottom:5%;--x:-20px;--y:35px;--r:320deg}.success-burst i:nth-of-type(10){left:4%;bottom:24%;--x:-34px;--y:18px;--r:220deg}.success-burst i:nth-of-type(11){left:2%;top:37%;--x:-38px;--y:-9px;--r:280deg}.success-burst i:nth-of-type(12){left:18%;top:18%;--x:-28px;--y:-20px;--r:200deg}

.settings{margin:19px 7px 0;color:#48645b;font-size:13px}.settings summary{font-weight:900;cursor:pointer}.settings p{line-height:1.55;max-width:760px}.settings button{background:var(--cream)}
.courier-card{margin:16px 7px 0;padding:14px 16px;border:1.5px solid #b6cbc1;border-radius:18px;background:rgba(255,250,240,.84);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.courier-card small{font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#71827c}.courier-card h2{margin:3px 0;font-size:18px}.courier-card p{margin:0;color:#61776f;font-size:11px}.courier-card>button{border:1.5px solid var(--ink);border-radius:10px;background:white;padding:8px 12px;font-weight:850;cursor:pointer}.collection{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.collection-item{display:grid;place-items:center;min-width:0;padding:7px 3px;border-radius:10px;background:#e5ece8;color:#899792;text-align:center}.collection-item.found{background:#fff0b8;color:#74530d;box-shadow:inset 0 0 0 1px #e0b13f}.collection-item b{font-size:18px}.collection-item small{font-size:7px;line-height:1.1;text-transform:none;letter-spacing:0;color:inherit}
footer{text-align:center;margin-top:18px;color:#71827c;font-size:11px;font-weight:700}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes pop{50%{transform:scale(1.035)}}
@keyframes hintPulse{50%{transform:scale(.91);filter:brightness(1.1)}}
@keyframes startCue{50%{transform:translate(-50%,3px)}}
@keyframes deliveryCard{0%{opacity:0;transform:scale(.82) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes confetti{0%{opacity:0;transform:translate(0,0) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@keyframes routeGlow{50%{stroke:#fff;stroke-width:13;filter:drop-shadow(0 0 7px #fff2a8)}}
@keyframes keepsakePulse{50%{transform:translateY(-3px) rotate(12deg)}}

@media(max-width:760px){
  .shell{padding:10px 10px 24px}
  .hero{min-height:160px;border-radius:22px;box-shadow:5px 6px 0 var(--ink)}
  .hero-art{background-position:57% 58%}.hero-shade{background:linear-gradient(90deg,rgba(8,40,48,.88),rgba(8,40,48,.3))}
  .topbar{padding:12px}.brand-mark{width:43px;height:43px}.brand strong{font-size:18px}
  .hero-copy{padding:7px 15px 17px}.hero-copy h1{font-size:30px}
  .game-card{grid-template-columns:1fr;padding:12px;border-radius:23px;box-shadow:5px 6px 0 var(--ink);gap:12px}
  .board-wrap{grid-row:1;padding:7px;border-radius:18px}.game-info{grid-row:2}
  .board{--gap:6px;padding:7px;border-radius:15px}
  .level-head h2{font-size:22px}.score-strip{margin-top:12px}.legend{margin-top:14px}
  .status{min-height:42px;margin-top:6px}.controls{margin-top:5px}
  .settings{margin-top:16px}
}
@media(max-width:370px){
  .shell{padding-left:7px;padding-right:7px}.hero-copy h1{font-size:27px}
  .chip{padding:8px 10px}.board{--gap:5px;padding:6px}.cell{border-radius:10px}
}
@media(max-width:430px){.success-burst{inset:6%;padding:8px}.success-actions{grid-template-columns:1fr}.success-actions button{min-height:42px}.success-van{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}
  .delivered .success-burst{opacity:1;transform:none}
}