*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08132e;color:#f5f3e8;font-family:Arial,Helvetica,sans-serif}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}header,footer{position:fixed;z-index:3;left:3.5%;right:3.5%;display:flex;align-items:center;justify-content:space-between}header{top:28px;font-size:11px;letter-spacing:2px}header a{font-size:25px;font-weight:900;color:#f5f3e8;text-decoration:none;letter-spacing:-1px}header a span{color:#beff59;padding-left:4px}i{color:#7db0c6;padding:0 12px;font-style:normal}button{cursor:pointer;border:0;font-weight:800;font-family:inherit}button:focus-visible{outline:3px solid white;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}#pause{background:#ffffff14;color:white;border:1px solid #ffffff40;border-radius:50%;width:38px;height:38px}#menu{position:fixed;top:24%;left:6%;z-index:2;max-width:560px;text-shadow:0 2px 35px #06132f}#menu:before{content:'';position:absolute;inset:-80px -70px;background:radial-gradient(ellipse,#07162ad9,transparent 73%);z-index:-1;pointer-events:none}.eyebrow{color:#bcff61;font-size:11px;font-weight:bold;letter-spacing:3px}h1{font-size:clamp(40px,5.5vw,80px);letter-spacing:-4px;line-height:.97;margin:25px 0;font-weight:900}h1 em{color:#c6ff65;font-style:italic}p{color:#d1d9df;font-size:15px;line-height:1.7}#start,.panel button{background:#c1ff62;color:#122016;padding:20px 28px;font-size:14px;letter-spacing:1px;min-width:270px;margin-top:20px}#start:hover,.panel button:hover{background:white}.ride{display:flex;gap:15px;align-items:center;margin-top:28px;font-size:10px;letter-spacing:1px}.ride span{color:#b4c2cd}.ride b{font-size:11px}.badge{border:1px solid #b7e87855;padding:6px}.best{font-size:10px;letter-spacing:2px;margin-top:18px;color:#c1ccd6}.best b{color:white;padding-left:12px}footer{bottom:25px;font-size:9px;letter-spacing:1.5px;color:#cedde5}kbd{display:inline-block;border:1px solid #ffffff50;padding:5px;margin-right:4px;font-family:inherit;color:white}.score{position:fixed;left:3.5%;top:115px}.score small,.distance small{display:block;font-size:10px;letter-spacing:2px;color:#aabbd0}.score strong{display:block;font-size:55px;letter-spacing:-2px;font-style:italic}.score span{font-size:12px;color:#d2ff79}.speed{position:fixed;right:4%;bottom:95px;text-align:right}.speed strong{font-size:75px;letter-spacing:-5px;font-style:italic}.speed span{font-size:10px;margin-left:10px}.meter{width:190px;background:#ffffff30;height:3px;margin-top:8px}.meter b{height:100%;display:block;background:#c1ff62;width:0}.distance{position:fixed;right:4%;top:120px;text-align:right}.distance b{font-size:24px;line-height:1.8}.panel{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);padding:45px 65px;text-align:center;background:#081a31ef;border:1px solid #8bd4ef55;min-width:410px;box-shadow:0 20px 120px #0008}h2{font-size:50px;letter-spacing:-3px;margin:20px 0}.panel strong{font-size:60px;display:block;color:#c1ff62}.panel small{display:block;letter-spacing:2px;font-size:10px}#flash{position:fixed;inset:0;pointer-events:none;background:#ff364b;opacity:0;transition:opacity .15s}[hidden]{display:none!important}@media(max-width:750px){header div{display:none}#menu{top:20%}h1{letter-spacing:-2px}.ride{flex-wrap:wrap;max-width:300px}footer{font-size:8px}footer i{padding:0 3px}footer #status{display:none}.panel{min-width:320px;padding:25px}.score strong{font-size:38px}}

#effects{position:fixed;left:50%;bottom:95px;transform:translateX(-50%);color:#c1ff62;font-weight:bold;font-size:14px;letter-spacing:1px;text-shadow:0 2px 8px #000;background:#081a3188;padding:12px 20px;border-radius:4px}#effects:empty{display:none}

#music{color:#e2fbff;background:#101936a8;border:1px solid #d3b1e875;padding:10px 14px;letter-spacing:1px;font-size:10px;border-radius:20px;margin-left:auto;margin-right:16px}header>div{position:absolute;left:50%;transform:translateX(-50%)}@media(max-width:750px){header>div{display:none}}
header,footer,.score,.distance,.speed{text-shadow:0 2px 7px #152333,0 0 16px #152333}.score small,.distance small{color:#fff}.score,.distance{background:#162a3b70;padding:12px 16px;border-radius:8px}header{padding:8px 12px;background:#172c404a;border-radius:8px}footer{color:#fff}
#challenge,#hazard-warning{position:fixed;left:50%;transform:translateX(-50%);text-align:center;background:#10283bd9;border-radius:5px;padding:8px 14px;color:#e5f7ff;font-size:12px;letter-spacing:1px;pointer-events:none}#challenge{top:102px}#hazard-warning{top:143px;color:#ffd78b;font-weight:bold;border-bottom:2px solid #ff6b54}#hazard-warning:empty{display:none}@media(max-width:750px){#challenge{top:76px;font-size:10px}#hazard-warning{top:110px;font-size:10px}.score,.distance{top:158px}}
#district-chip{position:fixed;left:3.5%;bottom:86px;background:#0b1c32d9;border-left:4px solid var(--district,#ffd15c);padding:10px 14px;min-width:210px;text-shadow:0 2px 8px #000}#district-chip small{display:block;color:var(--district,#ffd15c);font-size:9px;letter-spacing:2px;margin-bottom:5px}#district-chip b{font-size:12px;letter-spacing:1px}#district-intro{position:fixed;z-index:6;left:50%;top:37%;transform:translate(-50%,-50%);text-align:center;padding:22px 42px;background:#07172de6;border:1px solid var(--district,#ffd15c);pointer-events:none;animation:districtIn 2.4s ease both}#district-intro small,#district-intro span{display:block;letter-spacing:4px;font-size:10px;color:var(--district,#ffd15c)}#district-intro strong{display:block;font-size:clamp(28px,4vw,58px);font-style:italic;letter-spacing:-2px;margin:10px 0}@keyframes districtIn{0%{opacity:0;transform:translate(-50%,-35%) scale(.8)}15%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.05)}}@media(max-width:750px){#district-chip{bottom:70px;left:4%;min-width:170px}#district-intro{width:88%;padding:18px}}
#run-notice{position:fixed;z-index:7;bottom:150px;left:3.5%;max-width:min(420px,85vw);padding:12px 16px;background:#07172de8;border-left:4px solid #ffd65a;color:#fff6d5;font-size:13px;font-weight:700;pointer-events:none}#run-notice:empty{display:none}#summary{white-space:pre-line}#hazard-warning{border:1px solid #ffcb63;color:#fff5dc;font-size:13px} @media(max-width:750px){#run-notice{bottom:130px;font-size:11px}}
.ride-select{display:flex;gap:10px;margin-top:18px}.ride-select button{padding:10px 24px;color:#fff;background:#10243c;border:1px solid #77cfff66;border-radius:5px}.ride-select button[aria-pressed=true]{background:#c1ff62;color:#10243c;border-color:#c1ff62}

header .wome-logo{display:block;width:156px;height:auto;max-height:50px;object-fit:contain} @media(max-width:750px){header .wome-logo{width:120px}}

#touch-guide{display:none}
@media(max-width:750px){
html,body{overscroll-behavior:none}#game{touch-action:none}
header{top:max(10px,env(safe-area-inset-top));left:10px;right:10px}
#pause{width:44px;height:44px}
#music{min-height:44px;margin-right:10px}
#menu{top:max(72px,calc(env(safe-area-inset-top) + 64px));bottom:max(58px,calc(env(safe-area-inset-bottom) + 50px));left:18px;right:18px;max-width:none;overflow-y:auto;padding:8px 4px 20px}
#menu h1{font-size:clamp(38px,13vw,58px);margin:16px 0;line-height:.94}
#menu p{font-size:14px;line-height:1.45;margin:10px 0}
.ride{margin-top:16px;gap:9px}
.ride-select{width:100%;gap:8px;margin-top:12px}
.ride-select button{flex:1;min-height:44px;padding:10px 12px}
#start{width:100%;min-width:0;min-height:52px;margin-top:14px;padding:15px 18px}
.best{margin-top:12px}
.score,.distance{top:max(88px,calc(env(safe-area-inset-top) + 78px));padding:8px 10px}
.score{left:10px}.distance{right:10px}
.score strong{font-size:34px}.distance b{font-size:18px}
.speed{right:10px;bottom:max(86px,calc(env(safe-area-inset-bottom) + 76px))}
.speed strong{font-size:48px}.meter{width:118px}
#district-chip{left:10px;bottom:max(82px,calc(env(safe-area-inset-bottom) + 72px));min-width:148px;padding:8px 10px}
#run-notice{left:10px;bottom:max(142px,calc(env(safe-area-inset-bottom) + 132px))}
footer{bottom:max(10px,env(safe-area-inset-bottom));left:10px;right:10px}
footer>span:first-child{display:none}
#touch-guide{display:flex;position:fixed;z-index:4;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);align-items:center;gap:7px;white-space:nowrap;padding:9px 12px;border:1px solid #8bd4ef66;border-radius:999px;background:#07172ddd;color:#eaf7ff;font-size:10px;letter-spacing:.7px;text-shadow:0 2px 6px #000;pointer-events:none}
#touch-guide span{color:#c1ff62;font-size:16px}
#touch-guide b{margin-left:6px;color:#c1ff62;font-size:9px}
.panel{width:calc(100% - 24px);min-width:0;max-height:calc(100% - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;padding:24px 18px}
.panel h2{font-size:clamp(36px,12vw,48px);letter-spacing:-2px;margin:14px 0}
.panel strong{font-size:48px}
.panel button,.result-actions a{min-height:48px}
}
@media(max-width:750px) and (orientation:landscape){
#menu{top:62px;bottom:42px;max-width:520px}
#menu h1{font-size:38px;margin:10px 0}
#menu p{display:none}
.ride{margin-top:10px}
.ride-select{margin-top:8px}
#start{margin-top:9px}
.best{margin-top:8px}
.score,.distance{top:72px}
#touch-guide{bottom:8px}
}