:root{
 --indigo:#17153B;--ink:#1C1B2E;--porcelain:#FFFDF8;--cyan:#44E0E7;--magenta:#FF4FA0;
 --lemon:#FFE65A;--violet:#8C6BFF;--silver:#E8EBF2;--slate:#5E6275;--white:#FFFFFF;
 --shadow:8px 9px 0 #17153B;--focus:#17153B
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:#ECEFFC;color:var(--ink);font-family:"Segoe UI","Arial",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:#17153B;color:white;border-bottom:4px solid var(--cyan)}
.nav{width:min(1260px,calc(100% - 24px));margin:auto;min-height:72px;display:flex;align-items:center;gap:10px}
.logo{font-weight:1000;letter-spacing:.15em}.logo b{color:var(--cyan)}.spacer{flex:1}
.nav a{padding:10px 12px;border-radius:12px;font-weight:900;font-size:.76rem}.nav .play{background:var(--lemon);color:var(--ink);border:3px solid white}
.shell{width:min(1260px,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}
.kicker{display:inline-block;background:var(--magenta);color:white;border:4px solid var(--indigo);border-radius:10px;padding:8px 12px;font-size:.69rem;font-weight:1000;letter-spacing:.08em;box-shadow:4px 5px 0 var(--indigo);transform:rotate(-1deg)}
h1{font-size:clamp(3.2rem,7vw,6.7rem);line-height:.86;letter-spacing:-.065em;margin:15px 0}
h2{font-size:clamp(2rem,3.7vw,3.1rem);letter-spacing:-.045em;margin:0 0 10px}
p{line-height:1.58;color:var(--slate)}
.note{background:var(--porcelain);border:4px solid var(--indigo);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:4px solid var(--indigo);border-radius:12px;background:white;padding:12px 15px;font-weight:1000;box-shadow:4px 5px 0 var(--indigo)}
.btn.cyan{background:var(--cyan)}.btn.magenta{background:var(--magenta);color:white}.btn.lemon{background:var(--lemon)}.btn.violet{background:var(--violet);color:white}.btn.dark{background:var(--indigo);color:white}
/* STREETBOARD - intentionally different from V30's scenic neighborhood map */
.streetboard{min-height:560px;background:var(--porcelain);border:5px solid var(--indigo);border-radius:20px;box-shadow:var(--shadow);padding:18px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:11px;position:relative;overflow:hidden}
.tile{border:4px solid var(--indigo);border-radius:12px;display:flex;align-items:end;padding:10px;font-weight:1000;font-size:.72rem;position:relative;box-shadow:3px 4px 0 var(--indigo)}
.tile.home{background:#FFD7EA}.tile.park{background:#C8F7EF}.tile.school{background:#FFF1A8}.tile.mall{background:#D9CCFF}.tile.civic{background:#D9F5FF}.tile.work{background:#E7E9F0}
.tile.road{background:var(--indigo);border-color:var(--indigo);box-shadow:none}
.tile.road:after{content:"";position:absolute;left:10%;right:10%;top:50%;border-top:4px dashed var(--lemon)}
.tile.road.v:after{left:50%;right:auto;top:10%;bottom:10%;border-top:0;border-left:4px dashed var(--lemon)}
.tree-chip{position:absolute;width:34px;height:34px;border:4px solid var(--indigo);background:var(--cyan);border-radius:50%;top:8px;right:8px}
.house-chip{position:absolute;width:38px;height:29px;border:4px solid var(--indigo);background:white;top:13px;right:9px}
.house-chip:before{content:"";position:absolute;left:-6px;right:-6px;top:-18px;height:22px;background:var(--magenta);border:4px solid var(--indigo);clip-path:polygon(50% 0,100% 100%,0 100%)}
.token{position:absolute;width:36px;height:36px;background:var(--lemon);border:4px solid var(--indigo);border-radius:50%;z-index:10;display:grid;place-items:center;font-weight:1000;animation:tokenPulse 2s ease-in-out infinite}
.token.one{left:19%;top:26%}.token.two{right:16%;top:51%}.token.three{left:43%;bottom:11%}
@keyframes tokenPulse{50%{transform:translateY(-5px) scale(1.04)}}
.section{margin-top:44px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--porcelain);border:4px solid var(--indigo);border-radius:16px;padding:17px;min-height:164px;box-shadow:5px 6px 0 var(--indigo);display:flex;flex-direction:column;justify-content:space-between}
.card[data-cat="Homes & Streets"]{background:#FFF1F7}.card[data-cat="Parks & Outdoors"]{background:#E9FFFA}.card[data-cat="Learning Zone"]{background:#FFF9D8}.card[data-cat="Civic & Community"]{background:#ECF8FF}.card[data-cat="Shops & Town"]{background:#F2EDFF}.card[data-cat="Work & Transit"]{background:#F1F2F6}
.card:hover{transform:translate(-2px,-3px)}.tag{display:inline-block;width:max-content;background:var(--cyan);border:3px solid var(--indigo);border-radius:8px;padding:5px 8px;font-size:.61rem;font-weight:1000}
.mode{display:inline-block;border:3px solid var(--indigo);border-radius:8px;padding:5px 8px;font-size:.62rem;font-weight:1000;margin-top:6px}
.mode.PRIVATE{background:var(--magenta);color:white}.mode.AUTH{background:var(--lemon)}.mode.OBSERVE{background:var(--cyan)}
.card strong{font-size:1.08rem}.card em{font-style:normal;color:var(--slate);font-size:.78rem}
.search{width:100%;border:4px solid var(--indigo);border-radius:12px;background:var(--porcelain);padding:14px 16px;box-shadow:4px 5px 0 var(--indigo)}
.safe{background:#F8F6FF;border:4px solid var(--indigo);border-radius:16px;padding:15px;box-shadow:4px 5px 0 var(--indigo)}
.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)}
.pass{max-width:260px;border:4px solid var(--indigo);border-radius:14px;padding:14px;font-weight:1000;box-shadow:4px 5px 0 var(--indigo)}
.pass.PRIVATE{background:#FFD7EA}.pass.AUTH{background:#FFF1A8}.pass.OBSERVE{background:#C8F7EF}
.spot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.spot{border:4px solid var(--indigo);border-radius:13px;background:var(--porcelain);min-height:100px;padding:14px;text-align:left;font-weight:900;box-shadow:4px 5px 0 var(--indigo)}
.spot:nth-child(4n+1){background:#FFF1F7}.spot:nth-child(4n+2){background:#E9FFFA}.spot:nth-child(4n+3){background:#FFF9D8}.spot:nth-child(4n){background:#F2EDFF}.spot.active{background:var(--violet);color:white;transform:translateY(-4px)}
.composer{margin-top:30px;background:var(--porcelain);border:5px solid var(--indigo);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.selected{background:var(--cyan);border:4px solid var(--indigo);border-radius:10px;padding:12px;font-weight:1000}
.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:1000;letter-spacing:.07em;margin-bottom:6px}
input,textarea,select{width:100%;border:4px solid var(--indigo);border-radius:10px;background:white;padding:12px}textarea{min-height:100px;resize:vertical}
.route{display:grid;gap:12px}.route-item{background:var(--porcelain);border:4px solid var(--indigo);border-radius:14px;padding:14px;box-shadow:4px 5px 0 var(--indigo);display:grid;grid-template-columns:58px 1fr auto;gap:13px;align-items:center}
.route-item:nth-child(3n+1){background:#FFF1F7}.route-item:nth-child(3n+2){background:#E9FFFA}.route-item:nth-child(3n){background:#FFF9D8}
.route-num{width:52px;height:52px;border:4px solid var(--indigo);border-radius:10px;background:var(--lemon);display:grid;place-items:center;font-weight:1000}
.route-item strong{display:block}.route-item small{color:var(--slate)}
.empty{border:5px dashed var(--indigo);border-radius:15px;padding:42px;text-align:center;background:var(--porcelain)}
.runner{max-width:840px;margin:30px auto;background:var(--porcelain);border:5px solid var(--indigo);border-radius:18px;padding:28px;box-shadow:var(--shadow);text-align:center}
.progress{display:inline-block;background:var(--magenta);color:white;border:4px solid var(--indigo);border-radius:8px;padding:8px 12px;font-weight:1000}
.clue{margin-top:20px;background:#FFF9D8;border:5px solid var(--indigo);border-radius:14px;padding:34px;font-size:clamp(1.45rem,3vw,2.2rem);font-weight:1000;line-height:1.23}
.hint{margin-top:14px;background:#E9FFFA;border:4px solid var(--indigo);border-radius:12px;padding:14px}
.answer-box{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:10px}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.legend>div{border:4px solid var(--indigo);padding:13px;border-radius:12px;background:white}
.footer{margin-top:45px;padding-bottom:40px;color:var(--slate);font-size:.8rem}
@media(max-width:980px){.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,.legend{grid-template-columns:1fr}.location-head{grid-template-columns:1fr}.route-item{grid-template-columns:52px 1fr}.route-item .actions{grid-column:2}.answer-box{grid-template-columns:1fr}.streetboard{min-height:490px;gap:6px;padding:9px}.tile{font-size:.55rem;padding:5px}}
@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}}