:root{
  --navy:#001039;
  --navy-2:#042766;
  --blue:#067fff;
  --cyan:#20d8ff;
  --orange:#ff5b12;
  --orange-2:#ff9619;
  --yellow:#ffd735;
  --white:#fff;
  --glass:rgba(0,22,74,.86);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#007ef6;color:#fff;font-family:Inter,system-ui,sans-serif;overscroll-behavior:none}
button{font:inherit}
.game-shell{position:relative;width:100%;height:100%;min-height:540px;overflow:hidden;isolation:isolate;background:linear-gradient(#008cff,#004abe)}
#game{position:absolute;z-index:0;inset:0}
#game canvas{display:block;width:100%!important;height:100%!important;touch-action:none}
.world-glow{position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 29%,transparent 0 29%,rgba(0,25,83,.08) 54%,rgba(0,7,34,.48) 100%),linear-gradient(180deg,rgba(14,141,255,.06),transparent 24%,rgba(0,10,42,.12));box-shadow:inset 0 0 110px rgba(0,8,38,.42)}
.emergency-flash{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .22s}.emergency-flash.active{opacity:.72}.emergency-flash i,.emergency-flash b{position:absolute;top:-12%;bottom:-12%;width:48%;filter:blur(24px);mix-blend-mode:screen;animation:emergencySweep .52s ease-in-out infinite alternate}.emergency-flash i{left:-19%;background:radial-gradient(ellipse at left,rgba(255,30,17,.65),rgba(255,30,17,0) 72%)}.emergency-flash b{right:-19%;background:radial-gradient(ellipse at right,rgba(13,126,255,.72),rgba(13,126,255,0) 72%);animation-delay:-.26s}
.hit-flash{position:absolute;z-index:25;inset:0;pointer-events:none;background:rgba(255,35,12,.72);opacity:0;mix-blend-mode:screen}
.hit-flash.flash{animation:hitFlash .48s ease-out}

.hud{position:absolute;z-index:10;top:max(15px,env(safe-area-inset-top));left:50%;width:min(1120px,calc(100% - 30px));transform:translateX(-50%);display:grid;grid-template-columns:180px 1fr 180px;align-items:start;gap:14px;pointer-events:none}
.hud-panel,.brand-panel{border:1px solid rgba(81,194,255,.72);background:linear-gradient(150deg,rgba(7,56,139,.93),rgba(0,18,65,.94));box-shadow:0 16px 40px rgba(0,6,35,.3),inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 24px rgba(0,134,255,.13);backdrop-filter:blur(12px)}
.hud-panel{min-height:92px;padding:13px 15px;border-radius:18px}
.hud-panel>span{display:block;color:#9ed8ff;font-family:"Barlow Condensed",Impact,sans-serif;font-size:15px;font-weight:800;font-style:italic;letter-spacing:.09em;text-transform:uppercase}
.hud-panel strong{display:flex;align-items:baseline;gap:3px;font-family:"Barlow Condensed",Impact,sans-serif;font-size:37px;font-weight:900;font-style:italic;line-height:.92;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.hud-panel strong i{color:#8ab8e9;font-size:19px;font-style:inherit}
.progress{height:8px;margin-top:9px;overflow:hidden;border:1px solid rgba(255,255,255,.34);border-radius:6px;background:#00123e}
.progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#44ee56,#b8ff1f);box-shadow:0 0 13px #51ed46;transition:width .25s ease}
.rank-panel{text-align:right}.rank-panel strong{justify-content:flex-end;color:var(--yellow)}
.lives{margin-top:8px;color:#ff5b29;font-size:12px;letter-spacing:4px;text-shadow:0 0 10px rgba(255,54,20,.8)}
.brand-panel{justify-self:center;width:290px;padding:8px 20px 10px;border-radius:0 0 20px 20px;border-top:0;text-align:center}
.mini-brand{display:flex;align-items:center;justify-content:center;gap:7px;height:30px}
.mini-brand img{width:35px;height:35px;border-radius:50%;box-shadow:0 0 12px rgba(33,171,255,.45)}
.mini-brand span,.start-logo span{font-family:"Barlow Condensed",Impact,sans-serif;font-size:25px;font-weight:900;font-style:italic;letter-spacing:-.035em;transform:skew(-4deg)}
.mini-brand em,.start-logo em{color:var(--orange);font-style:inherit}
.clock{margin-top:5px;font-family:"Barlow Condensed",Impact,sans-serif;font-size:39px;font-weight:900;font-style:italic;line-height:.82;letter-spacing:.025em;text-shadow:0 3px 0 rgba(0,8,35,.3);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;min-width:4.9em;text-align:center}
.best{margin-top:5px;color:var(--cyan);font-family:"Barlow Condensed",Impact,sans-serif;font-size:13px;font-weight:900;font-style:italic;letter-spacing:.08em;text-transform:uppercase}.best b{margin-left:5px;color:#fff}

.alert-pill{display:none}
.alert-pill i{width:8px;height:8px;border-radius:50%;background:#41f477;box-shadow:0 0 12px #41f477}
.alert-pill.danger{border-color:#ff6533;background:rgba(100,15,0,.84);color:#fff}.alert-pill.danger i{background:#ff3927;box-shadow:0 0 14px #ff2e1d;animation:pulse .55s infinite alternate}
.sound-button{position:absolute;z-index:13;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:48px;height:48px;border:1px solid rgba(78,188,255,.7);border-radius:14px;background:rgba(0,24,78,.82);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 12px 28px rgba(0,6,32,.28);backdrop-filter:blur(9px)}

.overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 42%,rgba(0,104,255,.06),rgba(0,11,48,.66) 62%,rgba(0,7,35,.84));backdrop-filter:blur(4px);transition:opacity .35s,visibility .35s}
.overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.start-card,.result-card{width:min(570px,100%);padding:26px 32px 28px;border:1px solid rgba(77,191,255,.78);border-radius:28px;background:linear-gradient(155deg,rgba(6,49,128,.96),rgba(0,15,57,.98) 72%);box-shadow:0 34px 90px rgba(0,4,32,.58),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 55px rgba(0,125,255,.11);text-align:center}
.start-logo{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:12px}.start-logo img{width:58px;height:58px;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 20px rgba(0,153,255,.38)}.start-logo span{font-size:37px}
.kicker{display:inline-block;color:var(--cyan);font-family:"Barlow Condensed",Impact,sans-serif;font-size:14px;font-weight:900;font-style:italic;letter-spacing:.12em;text-transform:uppercase}
h1,h2,p{margin-top:0}
h1,h2{font-family:"Barlow Condensed",Impact,sans-serif;text-transform:uppercase}
h1{margin:9px 0 13px;font-size:clamp(70px,10vw,108px);font-weight:900;font-style:italic;line-height:.72;letter-spacing:-.045em;text-shadow:0 6px 0 rgba(0,5,30,.3)}
h1 em{color:var(--orange);font-style:inherit;text-shadow:0 0 25px rgba(255,80,12,.35)}
.start-card>p{width:min(455px,100%);margin:0 auto 18px;color:#cce0fb;font-size:15px;line-height:1.55}
.feature-row{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-bottom:19px}.feature-row span{padding:8px 10px;border:1px solid rgba(67,170,255,.46);border-radius:10px;background:rgba(4,46,118,.64);color:#e4f2ff;font-size:11px;font-weight:800}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-width:240px;min-height:58px;padding:14px 26px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--orange-2),var(--orange) 72%);color:#fff;font-family:"Barlow Condensed",Impact,sans-serif;font-size:24px;font-weight:900;font-style:italic;text-transform:uppercase;cursor:pointer;box-shadow:0 13px 30px rgba(255,62,0,.34),inset 0 1px 0 rgba(255,255,255,.34);transition:transform .2s,filter .2s}.primary-button:hover{transform:translateY(-3px);filter:brightness(1.08) saturate(1.1)}.primary-button b{font-size:16px}
.start-card small{display:block;margin-top:13px;color:#84a8d4;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.result-card{width:min(460px,100%);padding-top:31px}.result-icon{display:block;margin-bottom:5px;font-size:58px}.result-card h2{margin:8px 0 20px;font-size:60px;font-weight:900;font-style:italic;line-height:.83}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:21px}.result-stats div{padding:13px;border:1px solid rgba(69,172,255,.47);border-radius:13px;background:rgba(0,21,71,.54)}.result-stats span,.result-stats b{display:block}.result-stats span{color:#8fbae7;font-family:"Barlow Condensed",Impact,sans-serif;font-size:13px;font-weight:900;font-style:italic;letter-spacing:.08em;text-transform:uppercase}.result-stats b{margin-top:3px;font-family:"Barlow Condensed",Impact,sans-serif;font-size:30px;font-style:italic}

.touch-controls{position:absolute;z-index:14;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);display:none;align-items:flex-end;gap:9px;pointer-events:auto}.touch-controls>div{display:grid;gap:8px}.touch-controls button{width:66px;height:66px;border:1px solid rgba(99,203,255,.72);border-radius:18px;background:linear-gradient(145deg,rgba(13,72,169,.92),rgba(0,20,67,.94));color:#fff;font-size:30px;font-weight:900;box-shadow:0 12px 30px rgba(0,5,32,.35),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(9px);touch-action:manipulation}.touch-controls button:active{transform:translateY(2px) scale(.96);background:linear-gradient(145deg,var(--orange-2),var(--orange))}.touch-controls .forward{background:linear-gradient(145deg,var(--orange-2),var(--orange))}
.desktop-hint{position:absolute;z-index:12;left:20px;bottom:18px;display:flex;align-items:center;gap:5px;color:#bed8f5;font-family:"Barlow Condensed",Impact,sans-serif;font-size:12px;font-weight:800;font-style:italic;letter-spacing:.05em;text-transform:uppercase}.desktop-hint kbd{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(107,193,255,.62);border-radius:7px;background:rgba(0,25,79,.78);color:#fff;font-family:inherit}.desktop-hint span{margin-left:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes hitFlash{0%{opacity:.88}100%{opacity:0}}
@keyframes pulse{to{transform:scale(.65);opacity:.45}}
@keyframes emergencySweep{from{opacity:.28;transform:scaleX(.88)}to{opacity:1;transform:scaleX(1.08)}}

@media(max-width:720px){
  .game-shell{min-height:500px}
  .hud{top:max(9px,env(safe-area-inset-top));width:calc(100% - 18px);grid-template-columns:82px 1fr 82px;gap:7px}
  .hud-panel{min-height:71px;padding:9px 9px;border-radius:13px}
  .hud-panel>span{font-size:10px}.hud-panel strong{font-size:26px}.hud-panel strong i{font-size:13px}.progress{height:5px;margin-top:6px}.lives{margin-top:5px;font-size:8px;letter-spacing:2px}
  .brand-panel{width:100%;padding:5px 8px 7px;border-radius:0 0 14px 14px}.mini-brand{height:23px}.mini-brand img{width:27px;height:27px}.mini-brand span{font-size:19px}.clock{margin-top:4px;font-size:29px}.best{margin-top:3px;font-size:9px}
  .alert-pill{top:92px;padding:6px 10px;font-size:10px;white-space:nowrap}
  .touch-controls{display:flex;bottom:max(14px,env(safe-area-inset-bottom))}.touch-controls button{width:58px;height:58px;border-radius:16px;font-size:27px}
  .sound-button{right:10px;bottom:max(14px,env(safe-area-inset-bottom));width:42px;height:42px;border-radius:12px;font-size:17px}
  .desktop-hint{display:none}
  .start-card{padding:20px 18px 22px;border-radius:22px}.start-logo{margin-bottom:7px}.start-logo img{width:48px;height:48px}.start-logo span{font-size:31px}
  h1{font-size:74px;margin-block:8px 11px}.start-card>p{font-size:13px;line-height:1.45}.feature-row{margin-bottom:15px}.feature-row span{font-size:9px;padding:7px 8px}.primary-button{min-height:54px;font-size:21px}.start-card small{font-size:9px}
  .result-card h2{font-size:49px}
}

@media(max-height:680px){
  .start-card{padding-block:14px 16px}.start-logo{margin-bottom:4px}.start-logo img{width:43px;height:43px}.start-logo span{font-size:29px}h1{font-size:62px;margin-block:5px 8px}.start-card>p{font-size:12px;margin-bottom:10px}.feature-row{margin-bottom:11px}.primary-button{min-height:49px}.start-card small{margin-top:8px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}