*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0a2024;color:#f3f7f3;font-family:"Courier New",Courier,monospace}body{display:flex;justify-content:center}main{width:100%;max-width:1000px;height:100dvh;display:flex;flex-direction:column;padding:0 24px}header{height:94px;flex-shrink:0;display:flex;align-items:center;gap:30px}.brand{font-size:23px;letter-spacing:-1px;font-weight:900;margin-right:auto}.brand span{color:#d9f566}.brand small{display:block;font-size:10px;letter-spacing:3px;margin-top:6px;color:#92abae}.score,.time{display:flex;flex-direction:column;gap:4px}.score span,.time span{font-size:10px;letter-spacing:2px;color:#abc0c0}strong{font-size:30px;font-variant-numeric:tabular-nums}.score strong{color:#e5fa80}button{cursor:pointer;color:inherit;font:inherit;border:0}#pause{background:#ffffff0c;border:1px solid #ffffff20;border-radius:12px;font-size:25px;width:44px;height:44px}#pause:disabled{opacity:.35}#arena{flex:1;position:relative;min-height:0;border:1px solid #547071;border-radius:20px;overflow:hidden;background:#607575;touch-action:none}canvas{width:100%;height:100%;display:block;touch-action:none}.topnote{position:absolute;left:20px;right:20px;top:18px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#d5e3dc;pointer-events:none}.topnote span:first-child{color:#e8f59e}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#071c246b;backdrop-filter:blur(4px);padding:20px}.card{max-width:390px;padding:32px;background:#102c30ed;border:1px solid #6f898966;border-radius:20px;box-shadow:0 20px 60px #001b2970}.eyebrow{font-size:10px;letter-spacing:2px;color:#d9f566}h1{font-size:42px;line-height:1.04;letter-spacing:-1.6px;margin:20px 0}p{color:#c0d0cf;font-size:16px;line-height:1.55;margin:0 0 24px}#start{background:#d9f566;color:#172d24;font-weight:800;border-radius:9px;display:flex;justify-content:space-between;padding:17px 19px;width:100%;font-size:17px}.controls{font-size:12px;text-align:center;margin:18px 0 0;color:#8fa9a9}footer{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#a4bbba;font-size:11px;flex-shrink:0}footer span:first-child{font-size:10px;letter-spacing:1px}i{display:inline-block;width:6px;height:6px;background:#d9f566;border-radius:50%;margin-right:6px}@media(max-width:550px){main{padding:0 10px}header{height:77px;gap:17px}.brand{font-size:19px}.brand small{font-size:8px;letter-spacing:2px}strong{font-size:25px}.time strong{font-size:22px}#pause{width:37px;height:37px}#arena{border-radius:14px}.card{padding:26px}h1{font-size:38px}.topnote{font-size:8px;left:14px;right:14px;letter-spacing:1px}footer{font-size:10px;height:38px}footer span:first-child{font-size:8px}}

.brand{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:38px;letter-spacing:-2px}.brand small{font-family:"Courier New",Courier,monospace;font-style:normal;letter-spacing:1.5px}h1{font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:-1px}.card{max-width:440px}p{font-size:15px}.topnote{letter-spacing:1px}@media(max-width:550px){.brand{font-size:31px}.card{padding:22px}.topnote{letter-spacing:.4px}footer{font-size:9px}}

#overlay{overflow-y:auto;align-items:safe center}.card{max-height:100%;overflow-y:auto;touch-action:pan-y}#leaderboard{margin-top:18px;font-size:14px}#leaderboard summary{cursor:pointer;color:#d9f566;padding:10px 0}#leaderboard table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}#leaderboard th,#leaderboard td{text-align:right;padding:6px 3px;border-bottom:1px solid #ffffff18}#leaderboard th:first-child,#leaderboard td:first-child{text-align:left}#score-note{font-size:12px;margin:10px 0;color:#b4c9c4}#sound{background:transparent;color:#d9f566;padding:8px 5px;font-size:12px}

main{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.app-actions{margin-top:16px;font-size:13px}.app-actions button{background:#ffffff16;border:1px solid #ffffff30;border-radius:8px;padding:10px 14px}.app-actions details{margin-top:12px}.app-actions summary{cursor:pointer}.app-actions p{font-size:12px;margin:10px 0}.app-actions input{width:100%;font-size:12px;padding:8px}#app-status:empty{display:none}@media(display-mode:standalone){.app-actions details{display:none}}

#bonus-status{position:absolute;top:30px;width:100%;text-align:center;color:#f3fba8;font-size:12px;pointer-events:none;text-shadow:0 1px 4px #000}.bonus-guide{margin-top:14px;font-size:13px}.bonus-guide p{font-size:13px;margin:10px 0}.points strong{color:#ffcc83}@media(max-width:550px){header{gap:10px}.brand{font-size:27px}.brand small{font-size:8px}.time strong{font-size:19px}.score strong{font-size:22px}.time span,.score span{font-size:8px;letter-spacing:1px}}

#control-deck{display:flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0;height:110px;touch-action:none}.bank-side{display:flex;gap:8px;flex:1;justify-content:center;max-width:180px}.bank-side button{position:relative;width:64px;min-height:62px;background:#203b3e;border:1px solid #93bbb45c;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}.bank-side button:disabled{opacity:.32}.bank-side button span{font-size:24px}.bank-side small{font-size:11px}.bank-side b{position:absolute;top:-5px;right:-3px;background:#d9f566;color:#102c30;border-radius:20px;min-width:18px;padding:2px;font-size:11px}#spray-button{width:90px;height:90px;flex-shrink:0;border-radius:50%;background:#def1df12;border:2px solid #d0e3d93b;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none}footer{height:30px}@media(max-width:550px){#control-deck{gap:8px;height:102px}.bank-side{gap:6px}.bank-side button{width:48px;min-height:58px}.bank-side small{font-size:9px}#spray-button{width:80px;height:80px}header{height:68px}.brand small{letter-spacing:.5px}}@media(max-height:550px){#control-deck{height:72px}#spray-button{width:62px;height:62px}.bank-side button{min-height:48px}header{height:54px}footer{height:24px}}

#spray-button{color:#d9f566;flex-direction:column;gap:5px}#spray-button span{font-size:28px}#spray-button small{font-size:11px}#spray-button:disabled{opacity:.5}#spray-button.spraying{background:#d9f56635;opacity:1;border-color:#d9f566}

#spray-button{position:relative;isolation:isolate}#spray-button.charging:before{content:"";position:absolute;inset:-5px;padding:4px;border-radius:50%;background:conic-gradient(#d9f566 var(--charge),#ffffff20 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}#spray-button.charging{opacity:.85}.bank-side button,#spray-button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}canvas{-webkit-user-select:none;user-select:none}

@keyframes sprayGlow{0%,100%{box-shadow:0 0 12px #38ff7080,inset 0 0 8px #38ff7030;background:#1f713b}50%{box-shadow:0 0 30px #38ff70e0,0 0 44px #38ff7060,inset 0 0 16px #38ff7060;background:#299f49}}#spray-button.ready-glow{animation:sprayGlow 1.4s ease-in-out infinite;border-color:#78ff9b;color:#e4ffeb}
#spray-button.charging:before,#spray-button.spraying:before{content:"";position:absolute;inset:-5px;padding:4px;border-radius:50%;background:conic-gradient(var(--ring-color,#58ff8b) var(--charge),#ffffff20 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
#spray-button.charging{--ring-color:#ff9999;background:#873e4655;border-color:#ec858580;color:#ffd7d7;opacity:1}
#spray-button.spraying{background:#27844866;border-color:#58ff8b}
#bonus-status{left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;background:#e2e5e7;color:#172c30;text-shadow:none;border-radius:8px;padding:9px 12px;font-size:14px;font-weight:700;box-shadow:0 2px 8px #0003}
#bonus-status:empty{display:none}
@media(prefers-reduced-motion:reduce){#spray-button.ready-glow{animation:none;box-shadow:0 0 20px #38ff70a0;background:#237e40}}

/* Lobby and single-record result screen. */
main[data-screen="ready"] header,main[data-screen="ready"] #control-deck,main[data-screen="over"] header,main[data-screen="over"] #control-deck{display:none}
main[data-screen="ready"] #arena,main[data-screen="over"] #arena{margin-top:10px}
#overlay{background:linear-gradient(145deg,#031e25d9,#052a2fbb);backdrop-filter:blur(7px);padding:22px 16px;z-index:5}
.card{width:100%;max-width:480px;background:linear-gradient(145deg,#0c2d30f5,#04191df5);border:2px solid #769d9890;border-radius:28px;padding:26px;box-shadow:0 20px 65px #0009,inset 0 1px 0 #ffffff25;text-align:center}
.menu-brand{font:italic bold 66px Georgia,serif;letter-spacing:-4px;line-height:1;color:#fff;margin-bottom:24px}.menu-brand span{color:#d9f566}.menu-brand small{display:block;font:700 12px 'Courier New',monospace;letter-spacing:4px;margin-top:10px;color:#d5e3df}
.card .eyebrow{font-size:12px;letter-spacing:2px}.card h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-style:italic;font-weight:900;font-size:clamp(30px,8vw,48px);line-height:1.06;letter-spacing:-1px;margin:16px 0;color:#fff}.card h1 em{font-style:inherit;color:#e3fa52}.card #message{font-family:Arial,sans-serif;font-size:16px;line-height:1.45;margin:0 0 22px}
#start{justify-content:center;background:linear-gradient(#7af144 0%,#18ca19 46%,#00a80c 100%);border:2px solid #7cf854;border-radius:50px;box-shadow:inset 0 3px 5px #e3ffc578,0 6px 20px #11e32935;color:white;text-shadow:0 2px 2px #07500f88;font:900 24px Arial,sans-serif;padding:17px 12px;min-height:60px}
#start:active{filter:brightness(.9)}#result-panel[hidden]{display:none}.record{display:flex;align-items:center;justify-content:center;gap:18px;text-align:left;margin:12px 0 20px}.trophy{font-size:58px}.record div{min-width:0}#record-label{display:block;font:800 19px Arial,sans-serif;color:#e3fa52}#record-value{display:block;font:bold 48px Arial,sans-serif;color:#fff;overflow-wrap:anywhere;line-height:1.2}.run-stats{border:1px solid #769d9845;border-radius:18px;background:#03151966;padding:16px;margin:0}.run-stats div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 0;font-family:Arial,sans-serif}.run-stats dt{font-weight:700;font-size:13px;text-align:left;color:#ccd8d7}.run-stats dd{margin:0;font-size:23px;font-weight:700}.card #score-note{font:12px Arial,sans-serif;margin:10px 0 18px}.bonus-guide,.app-actions{text-align:left}.bonus-guide summary{padding:10px 0;color:#d9f566}.card .controls{line-height:1.5}
main[data-screen="over"] .menu-brand{font-size:46px;margin-bottom:16px}main[data-screen="over"] #message,main[data-screen="over"] .bonus-guide,main[data-screen="over"] .app-actions,main[data-screen="over"] .controls{display:none}
main[data-screen="paused"] #result-panel{display:none}
@media(max-width:380px){.card{padding:20px 16px}.record{gap:10px}#record-label{font-size:16px}#record-value{font-size:40px}.trophy{font-size:48px}}

main[data-screen="ready"] #title{display:none}
#lobby-record{display:none;border:1px solid #769d9870;border-radius:18px;background:#03151966;margin:20px 0;padding:18px;text-align:center}
main[data-screen="ready"] #lobby-record{display:block}
#lobby-record span{display:block;font:800 15px Arial,sans-serif;letter-spacing:2px;color:#e3fa52}
#lobby-record-value{display:block;font:bold 46px Arial,sans-serif;line-height:1.2;margin-top:6px;color:#fff;overflow-wrap:anywhere}
main[data-screen="ready"] #message{margin-top:18px}

main{position:relative}#lobby-walkers{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;touch-action:auto}#lobby-walkers[hidden]{display:none}

.bonus-guide h2{font:700 15px "Courier New",monospace;color:#d9f566;margin:18px 0 10px}main[data-screen="paused"] #title,main[data-screen="paused"] #message{display:none}footer{justify-content:flex-end}

.turbo-guide-icon{width:26px;height:26px;object-fit:contain;vertical-align:middle;border-radius:50%}

.topnote{justify-content:flex-end}#bonus-status{background:#e2e5e74d;color:#172c30bf;box-shadow:none;padding:6px 10px}

.privacy-menu{margin:18px 0 0!important;font:14px system-ui!important}.privacy-menu a,.privacy-link{color:#c5d5d2;text-decoration:underline;text-underline-offset:3px}.privacy-link{margin-right:auto;font:12px system-ui;padding:10px 0}footer{gap:16px}

/* Stable HUD geometry on all game screens; native Android bounds exclude system UI. */
main{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
header{height:86px;gap:12px}.brand-stack{margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0}.brand-stack .brand{line-height:1;margin:0}.brand-stack #sound{font-size:12px;min-height:32px;padding:4px 0;white-space:nowrap}
main[data-screen="ready"] header,main[data-screen="over"] header{display:flex}
main[data-screen="ready"] header .score,main[data-screen="ready"] header .time,main[data-screen="ready"] #pause{visibility:hidden}
main[data-screen="over"] #control-deck{display:flex;visibility:hidden}
main[data-screen="over"] #arena{margin-top:0}
main[data-screen="over"] #overlay{animation:resultFade .45s ease-out both}
main[data-screen="over"] .card{animation:resultRise .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes resultFade{from{opacity:0}to{opacity:1}}
@keyframes resultRise{from{transform:translateY(20px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@media(max-width:380px){header{gap:7px}.brand-stack .brand{font-size:26px}.score span,.time span{letter-spacing:.5px}}
@media(max-height:550px){header{height:68px}.brand-stack .brand{font-size:26px}footer{height:26px}}
@media(prefers-reduced-motion:reduce){main[data-screen="over"] #overlay,main[data-screen="over"] .card{animation:none}}

/* Keep the replay action visible within the available phone viewport. */
main[data-screen="over"] #control-deck{display:none}
main[data-screen="over"] #overlay{overflow:hidden;padding:12px}
main[data-screen="over"] .card{display:flex;flex-direction:column;gap:10px;max-height:100%;padding:18px;overflow:hidden}
main[data-screen="over"] #eyebrow{display:none}
main[data-screen="over"] #title{flex-shrink:0;font-size:clamp(24px,6vw,36px);margin:0 0 4px}
main[data-screen="over"] #result-panel{min-height:0;overflow:auto}
main[data-screen="over"] .record{margin:4px 0 12px;gap:12px}
main[data-screen="over"] .trophy{font-size:44px}
main[data-screen="over"] #record-value{font-size:40px}
main[data-screen="over"] .run-stats{padding:10px 14px}
main[data-screen="over"] .run-stats div{padding:5px 0}
main[data-screen="over"] .run-stats dd{font-size:21px}
main[data-screen="over"] #score-note{margin:8px 0 0}
main[data-screen="over"] #start{flex-shrink:0;min-height:52px;padding:12px;font-size:22px;margin-top:2px}
footer{justify-content:flex-start}.privacy-link{margin-right:auto}
@media(max-height:550px){
 main[data-screen="over"] .card{max-width:720px;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:12px}
 main[data-screen="over"] #title{grid-column:1;align-self:center;font-size:24px}
 main[data-screen="over"] #result-panel{grid-column:2;grid-row:1 / 3}
 main[data-screen="over"] #start{grid-column:1;align-self:end}
 main[data-screen="over"] .record{margin:0 0 6px}
 main[data-screen="over"] .trophy{font-size:28px}
 main[data-screen="over"] #record-value{font-size:28px}
 main[data-screen="over"] #record-label{font-size:14px}
 main[data-screen="over"] .run-stats{padding:6px 10px}
 main[data-screen="over"] .run-stats div{padding:3px 0}
 main[data-screen="over"] .run-stats dt{font-size:11px}
 main[data-screen="over"] .run-stats dd{font-size:16px}
}

#intro-message{position:absolute;z-index:4;left:50%;top:47%;width:max-content;max-width:90%;text-align:center;pointer-events:none;color:#f7ffd1;font:italic 900 clamp(23px,6vw,38px)/1.15 Arial,sans-serif;text-shadow:0 2px 3px #193d34,0 0 12px #dcff55,0 0 28px #b5fa6570;animation:introPulse .85s ease-in-out infinite}
#intro-message[hidden]{display:none}
@keyframes introPulse{0%,100%{transform:translate(-50%,-50%) scale(.97);filter:brightness(1)}50%{transform:translate(-50%,-50%) scale(1.04);filter:brightness(1.18)}}
@media(prefers-reduced-motion:reduce){#intro-message{animation:none;transform:translate(-50%,-50%)}}

#boss-message{position:absolute;z-index:5;left:50%;top:28%;transform:translate(-50%,-50%);width:90%;text-align:center;pointer-events:none;color:#ffe789;font:italic 900 clamp(22px,6vw,36px)/1.15 Arial,sans-serif;text-shadow:0 2px 4px #172a24,0 0 18px #ffbf4290;animation:bossPulse .7s ease-in-out infinite}
#boss-message[hidden]{display:none}
#boss-message.victory{color:#eeffa3;text-shadow:0 2px 4px #172a24,0 0 20px #d8ff63a0}
@keyframes bossPulse{50%{transform:translate(-50%,-50%) scale(1.05)}}
@media(prefers-reduced-motion:reduce){#boss-message{animation:none}}

#combo-hud{position:absolute;top:auto;bottom:54px;left:12px;z-index:3;padding:6px 9px;background:#102c3066;color:#efff9f;border-radius:7px;font:bold 13px Arial,sans-serif;pointer-events:none;text-shadow:0 1px 3px #102c30}
#combo-timer{display:block;width:100%;height:3px;margin:5px 0 0;background:#ddf86b;border-radius:2px;transform-origin:left}
#combo-message{position:absolute;z-index:5;left:50%;top:48%;width:92%;text-align:center;transform:translate(-50%,-50%);color:#e8ff7c;font:italic 900 clamp(26px,7vw,42px)/1.1 Arial,sans-serif;text-shadow:0 2px 4px #183b29,0 0 20px #bfff6370;pointer-events:none;animation:bossPulse .55s ease-in-out infinite}
#combo-hud[hidden],#combo-message[hidden]{display:none}
@media(prefers-reduced-motion:reduce){#combo-message{animation:none}}

#boss-hint{display:block;width:fit-content;max-width:100%;margin:10px auto 0;padding:6px 10px;border:1px solid #e7db9950;border-radius:8px;background:#102820bf;color:#f2edd3;font:600 13px/1.4 Arial,sans-serif;letter-spacing:0;text-shadow:none}
#boss-hint[hidden],#boss-title[hidden]{display:none}
#boss-message.hint-only{top:82px;animation:none}
#boss-message.hint-only #boss-hint{margin:0 auto}

button.privacy-link{background:none;border:0;color:inherit;text-decoration:underline;padding:4px;font:inherit}

/* Give the in-game logo a little more clearance below the phone status bar. */
main:is([data-screen="playing"],[data-screen="paused"],[data-screen="dying"]) header .brand-stack{transform:translateY(6px)}

#ranked-status{position:absolute;bottom:7px;right:10px;max-width:65%;font:12px sans-serif;color:#d8e5e3;opacity:.8;pointer-events:none;text-align:right;z-index:3}main[data-screen=ready] #ranked-status{z-index:8}

/* A registered player strip is informational, not an edit control. */
#profile-edit:disabled{opacity:1;cursor:default}