:root{
 --asphalt:#27343A;--ink:#263238;--paper:#FCFAF2;--cream:#F5EEDC;--park:#4D8B62;
 --school:#D89D3E;--brick:#B85B48;--sky:#79B8D1;--mall:#8D6FAE;--trail:#CE7F3F;
 --muted:#6D7778;--line:#263238;--safe:#E8F1E8;--shadow:7px 8px 0 #263238;--focus:#1F5F75
}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:#F4EFE3;color:var(--ink);font-family:"Aptos","Segoe UI",system-ui,sans-serif}
button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:4px solid var(--focus);outline-offset:4px}
.top{position:sticky;top:0;z-index:80;background:#FCFAF2f0;border-bottom:3px solid var(--asphalt);backdrop-filter:blur(10px)}
.nav{width:min(1240px,calc(100% - 24px));margin:auto;min-height:70px;display:flex;align-items:center;gap:10px}
.logo{font-weight:1000;letter-spacing:.14em}.logo b{color:var(--brick)}.spacer{flex:1}
.nav a{padding:10px 12px;border-radius:12px;font-weight:900;font-size:.76rem}.nav .play{background:var(--asphalt);color:white}
.shell{width:min(1240px,calc(100% - 24px));margin:auto;padding:34px 0 70px}
.hero{display:grid;grid-template-columns:.92fr 1.08fr;gap:30px;align-items:center;padding:28px 0}
.eyebrow{display:inline-block;background:var(--school);border:3px solid var(--asphalt);border-radius:999px;padding:7px 11px;font-size:.68rem;font-weight:950;letter-spacing:.08em}
h1{font-size:clamp(3.1rem,6.9vw,6.5rem);line-height:.87;letter-spacing:-.06em;margin:14px 0}
h2{font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.04em;margin:0 0 10px}
p{line-height:1.58;color:var(--muted)}
.note{background:var(--paper);border:3px solid var(--asphalt);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:3px solid var(--asphalt);border-radius:14px;background:var(--paper);padding:12px 15px;font-weight:950;box-shadow:4px 5px 0 var(--asphalt)}
.btn.green{background:#BFD8B8}.btn.gold{background:#F0C86F}.btn.blue{background:#A8D5E6}.btn.brick{background:#D98270}.btn.dark{background:var(--asphalt);color:white}.btn.purple{background:#C9B6DC}
.map{min-height:540px;background:#CFE6D2;border:4px solid var(--asphalt);border-radius:34px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.road.h{position:absolute;left:-4%;right:-4%;top:47%;height:70px;background:#667176;border-top:4px solid var(--asphalt);border-bottom:4px solid var(--asphalt)}
.road.v{position:absolute;top:-5%;bottom:-5%;left:51%;width:74px;background:#667176;border-left:4px solid var(--asphalt);border-right:4px solid var(--asphalt)}
.road.h:after{content:"";position:absolute;left:3%;right:3%;top:31px;border-top:4px dashed #F5D46B}.road.v:after{content:"";position:absolute;top:3%;bottom:3%;left:34px;border-left:4px dashed #F5D46B}
.block{position:absolute;border:4px solid var(--asphalt);border-radius:14px;background:var(--paper);box-shadow:4px 5px 0 var(--asphalt);display:grid;place-items:center;text-align:center;font-weight:950;padding:7px;font-size:.7rem;z-index:3}
.house{width:120px;height:88px;background:#F2D1B5}.school{width:150px;height:104px;background:#EBC56F}.mall{width:172px;height:116px;background:#C8B4DB}.warehouse{width:155px;height:96px;background:#BFC6C6}.park{width:188px;height:135px;background:#86BB88;border-radius:44% 49% 42% 48%}
.b1{left:5%;top:8%}.b2{left:31%;top:14%}.b3{right:6%;top:8%}.b4{left:6%;bottom:8%}.b5{right:7%;bottom:7%}.b6{left:37%;bottom:5%}
.tree{position:absolute;width:42px;height:42px;border:4px solid var(--asphalt);background:#6FA66E;border-radius:50%;z-index:4}.tree:after{content:"";position:absolute;width:8px;height:24px;background:#815B3D;border:2px solid var(--asphalt);left:13px;top:31px}.t1{left:22%;top:18%}.t2{left:25%;bottom:19%}.t3{right:25%;top:25%}.t4{right:30%;bottom:18%}
.pin{position:absolute;width:28px;height:28px;background:var(--brick);border:4px solid var(--asphalt);border-radius:50% 50% 50% 0;transform:rotate(-45deg);z-index:10;animation:pinPulse 2.2s ease-in-out infinite}.pin:after{content:"";position:absolute;inset:7px;background:#fff;border-radius:50%}
.p1{left:18%;top:35%}.p2{right:18%;top:36%}.p3{left:44%;bottom:24%}
@keyframes pinPulse{50%{transform:rotate(-45deg) translate(0,-5px)}}
.section{margin-top:42px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--paper);border:3px solid var(--asphalt);border-radius:20px;padding:17px;min-height:154px;box-shadow:4px 5px 0 var(--asphalt);display:flex;flex-direction:column;justify-content:space-between}
.card[data-cat="Residential"]{background:#F8E9D9}.card[data-cat="Park & Nature"]{background:#E5F0DF}.card[data-cat="School & Civic"]{background:#F7EBCB}.card[data-cat="Shopping & Town"]{background:#EEE6F4}.card[data-cat="Work & Industry"]{background:#E7EAEA}.card[data-cat="Community"]{background:#E8F1F4}.card[data-cat="Town & Transit"]{background:#E9EEF0}
.card:hover{transform:translateY(-3px)}.tag{display:inline-block;width:max-content;border:2px solid var(--asphalt);border-radius:999px;padding:5px 8px;font-size:.61rem;font-weight:950;background:#fff}
.mode{display:inline-block;border-radius:999px;padding:6px 9px;font-size:.63rem;font-weight:950;margin-top:6px}
.mode.PRIVATE{background:#BFD8B8}.mode.AUTH{background:#F0C86F}.mode.OBSERVE{background:#A8D5E6}
.card strong{font-size:1.08rem}.card em{font-style:normal;color:var(--muted);font-size:.78rem}
.search{width:100%;border:3px solid var(--asphalt);border-radius:14px;background:var(--paper);padding:14px 16px;box-shadow:4px 5px 0 var(--asphalt)}
.safe{background:var(--safe);border:3px solid var(--asphalt);border-radius:18px;padding:15px;box-shadow:4px 5px 0 var(--asphalt)}
.safe strong{display:block}.safe p{margin:4px 0 0;font-size:.86rem}
.location-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}.location-head h1{font-size:clamp(3rem,6vw,5.7rem)}
.checkpoint-badge{max-width:260px;border:3px solid var(--asphalt);border-radius:18px;padding:14px;font-weight:950;box-shadow:4px 5px 0 var(--asphalt)}
.checkpoint-badge.PRIVATE{background:#BFD8B8}.checkpoint-badge.AUTH{background:#F0C86F}.checkpoint-badge.OBSERVE{background:#A8D5E6}
.spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.spot{border:3px solid var(--asphalt);border-radius:18px;background:var(--paper);min-height:98px;padding:15px;text-align:left;font-weight:900;box-shadow:4px 5px 0 var(--asphalt)}
.spot:nth-child(4n+1){background:#F7EBCB}.spot:nth-child(4n+2){background:#E5F0DF}.spot:nth-child(4n+3){background:#EEE6F4}.spot:nth-child(4n){background:#E8F1F4}.spot.active{background:#D98270;color:#19262c;transform:translateY(-3px)}
.composer{margin-top:28px;background:#FFFDF6;border:4px solid var(--asphalt);border-radius:28px;padding:22px;box-shadow:var(--shadow)}
.selected{background:#E5F0DF;border:3px solid var(--asphalt);border-radius:14px;padding:12px;font-weight:950}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.full{grid-column:1/-1}
label{display:block;font-size:.67rem;font-weight:950;letter-spacing:.07em;margin-bottom:6px}
input,textarea,select{width:100%;border:3px solid var(--asphalt);border-radius:12px;background:var(--paper);padding:12px}textarea{min-height:98px;resize:vertical}
.route{display:grid;gap:14px}.route-item{background:var(--paper);border:3px solid var(--asphalt);border-radius:20px;padding:15px;box-shadow:4px 5px 0 var(--asphalt);display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center}
.route-item:nth-child(3n+1){background:#F7EBCB}.route-item:nth-child(3n+2){background:#E5F0DF}.route-item:nth-child(3n){background:#EEE6F4}
.route-num{width:50px;height:50px;border:3px solid var(--asphalt);border-radius:50%;background:#D98270;display:grid;place-items:center;font-weight:950}
.route-item strong{display:block}.route-item small{color:var(--muted)}.empty{border:4px dashed var(--asphalt);border-radius:24px;padding:42px;text-align:center;background:#FFFDF6}
.runner{max-width:820px;margin:30px auto;background:var(--paper);border:4px solid var(--asphalt);border-radius:30px;padding:26px;box-shadow:var(--shadow);text-align:center}
.progress{display:inline-block;background:#A8D5E6;border:3px solid var(--asphalt);border-radius:999px;padding:8px 12px;font-weight:950}
.clue{margin-top:20px;background:#F7EBCB;border:4px solid var(--asphalt);border-radius:22px;padding:32px;font-size:clamp(1.4rem,3vw,2.15rem);font-weight:950;line-height:1.24}
.hint{margin-top:14px;background:#E5F0DF;border:3px solid var(--asphalt);border-radius:16px;padding:14px}
.answer-box{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:10px}.footer{margin-top:45px;padding-bottom:40px;color:var(--muted);font-size:.8rem}
@media(max-width:960px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.spot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.nav a:not(.play){display:none}.grid,.spot-grid,.form-grid{grid-template-columns:1fr}.location-head{grid-template-columns:1fr}.route-item{grid-template-columns:50px 1fr}.route-item .actions{grid-column:2}.map{min-height:470px}.block{transform:scale(.82)}.answer-box{grid-template-columns:1fr}}
@media(pointer:coarse){button,a,input,select{min-height:48px;min-width:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.top,.actions,.footer,.safe{display:none!important}.shell{width:100%;padding:0}.route-item{break-inside:avoid;box-shadow:none}}