:root { color-scheme: dark; --cyan:#54f8ff; --pink:#ff3dc8; --yellow:#ffe64d; --ink:#060616; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; min-height:100%; overflow:hidden; background:var(--ink); font-family:Arial, Helvetica, sans-serif; }
body { background:radial-gradient(circle at 50% 20%, #18234c 0%, #09091e 38%, #03030d 100%); }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.app-shell { position:relative; width:100vw; height:100dvh; overflow:hidden; isolation:isolate; }
#gameCanvas { width:100%; height:100%; display:block; transition:transform .08s; }
.screen { position:absolute; inset:0; display:grid; place-items:center; padding:20px; overflow:auto; background:rgba(3,3,15,.42); backdrop-filter:blur(4px); z-index:3; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.screen.active { opacity:1; pointer-events:auto; }
.hidden { display:none !important; }
.panel { width:min(540px, 100%); padding:clamp(28px, 6vw, 48px); border:1px solid rgba(84,248,255,.38); background:linear-gradient(135deg, rgba(13,16,47,.94), rgba(5,5,22,.92)); box-shadow:0 0 0 1px rgba(255,61,200,.1) inset, 0 0 45px rgba(68,128,255,.14), 0 0 90px rgba(255,61,200,.08); text-align:center; clip-path:polygon(0 16px,16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px)); }
.small-panel { width:min(440px, 100%); }
.eyebrow { margin:0 0 12px; font-size:.67rem; letter-spacing:.26em; color:var(--cyan); }
.eyebrow.danger { color:var(--pink); }
h1,h2 { margin:0; font-weight:900; line-height:.9; letter-spacing:.05em; text-shadow:0 0 16px currentColor; }
h1 { font-size:clamp(2.6rem, 9vw, 4.6rem); color:#f3fbff; } h1 span { color:var(--pink); }
h2 { font-size:clamp(2.5rem, 8vw, 3.7rem); color:var(--pink); }
.tagline, .small-panel > p:not(.eyebrow):not(.hint) { color:#b3c0df; line-height:1.5; margin:20px 0 28px; }
.instruction-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:26px 0; text-align:left; }
.instruction-grid div { padding:11px 9px; border-left:2px solid var(--cyan); background:rgba(84,248,255,.06); }
.instruction-grid b,.instruction-grid span { display:block; } .instruction-grid b { font-size:.63rem; letter-spacing:.11em; color:var(--cyan); margin-bottom:5px; } .instruction-grid span { font-size:.68rem; color:#d4dcf5; line-height:1.25; }
.difficulty { margin:24px 0 25px; } .difficulty p { margin:0 0 10px; color:#8995bc; font-size:.64rem; letter-spacing:.16em; }
.difficulty-options { display:flex; gap:7px; justify-content:center; }
.difficulty-button,.secondary-button,.pause-button,.touch-controls button { border:1px solid rgba(151,174,226,.35); background:rgba(20,25,58,.7); }
.difficulty-button { padding:9px 14px; font-size:.75rem; color:#b8c5e7; transition:.2s; } .difficulty-button.selected { color:var(--ink); background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 16px rgba(84,248,255,.6); font-weight:bold; }
.primary-button { width:100%; border:1px solid var(--cyan); padding:14px 20px; background:linear-gradient(90deg, var(--cyan), #b8ffff); color:#071020; text-transform:uppercase; font-weight:900; letter-spacing:.13em; box-shadow:0 0 25px rgba(84,248,255,.38); transition:transform .18s, box-shadow .18s; } .primary-button:hover { transform:translateY(-2px); box-shadow:0 0 34px rgba(84,248,255,.65); }.primary-button span { float:right; font-size:1.2em; }
.secondary-button { width:100%; margin-top:10px; padding:12px; color:#d0d9f2; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }.hint { margin:18px 0 0; color:#687397; font-size:.68rem; letter-spacing:.04em; }
.hud { position:absolute; top:0; left:0; right:0; z-index:2; padding:max(16px, env(safe-area-inset-top)) 18px 0; display:flex; align-items:flex-start; gap:clamp(10px,3vw,28px); pointer-events:none; }
.hud-item { text-shadow:0 0 10px rgba(84,248,255,.6); }.hud-label { display:block; color:#9aa6cc; font-size:.57rem; letter-spacing:.2em; margin-bottom:4px; }.hud strong { color:#eafcff; font-size:clamp(.8rem,2.4vw,1.15rem); letter-spacing:.08em; }.lives strong { color:var(--pink); font-size:clamp(.75rem,2.2vw,1rem); }.difficulty-readout strong { color:var(--yellow); }.pause-button { margin-left:auto; pointer-events:auto; width:36px; height:32px; color:var(--cyan); font-size:1rem; box-shadow:0 0 12px rgba(84,248,255,.18); }
.results { display:flex; justify-content:center; gap:14px; margin:24px 0; }.results div { width:50%; padding:14px 6px; background:rgba(255,255,255,.045); border-top:1px solid rgba(84,248,255,.24); }.results span,.results strong { display:block; }.results span { color:#8c99bf; font-size:.59rem; letter-spacing:.13em; }.results strong { color:var(--yellow); font-size:1.5rem; margin-top:7px; text-shadow:0 0 14px rgba(255,230,77,.5); }
.destroyed-summary { margin:-8px 0 20px; padding:12px 8px; border-top:1px solid rgba(255,61,200,.25); background:rgba(255,61,200,.04); }.destroyed-summary > span { display:block; color:#96a4c9; font-size:.58rem; letter-spacing:.15em; }.destroyed-summary > strong { display:block; color:var(--pink); margin:4px 0 9px; font-size:1.25rem; text-shadow:0 0 12px rgba(255,61,200,.45); }.destroyed-summary p { display:flex; justify-content:center; gap:7px; margin:0; color:#8492ba; font-size:.55rem; letter-spacing:.08em; }.destroyed-summary i { color:#e9f5ff; font-style:normal; font-weight:bold; }
.leaderboard { margin:24px auto 0; max-width:280px; border-top:1px solid rgba(84,248,255,.2); padding-top:13px; }.leaderboard p { margin:0 0 7px; color:#8796bd; font-size:.6rem; letter-spacing:.18em; }.leaderboard ol { margin:0; padding:0; list-style:none; counter-reset:score; }.leaderboard li { counter-increment:score; display:flex; justify-content:space-between; padding:5px 3px; color:#c7d3ee; font-size:.72rem; border-bottom:1px solid rgba(255,255,255,.04); }.leaderboard li::before { content:'#' counter(score); color:var(--cyan); }.leaderboard li span { color:var(--yellow); font-weight:bold; }.leaderboard .empty { justify-content:center; color:#7180a6; font-size:.66rem; }.leaderboard .empty::before { content:''; }.compact { margin-top:18px; }
.boss-alert { position:absolute; z-index:2; top:max(60px, calc(env(safe-area-inset-top) + 48px)); left:50%; transform:translateX(-50%); width:min(290px,calc(100% - 36px)); padding:7px 12px 9px; text-align:center; background:rgba(39,5,39,.75); border:1px solid rgba(255,61,200,.65); box-shadow:0 0 22px rgba(255,61,200,.35); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }.boss-alert span,.boss-alert b { display:block; }.boss-alert span { color:#ffc2f0; font-size:.52rem; letter-spacing:.22em; }.boss-alert b { color:var(--pink); font-size:.76rem; letter-spacing:.16em; margin-top:3px; }.boss-alert i { display:block; height:3px; width:100%; margin-top:7px; background:linear-gradient(90deg,var(--pink),#ff8cdd); box-shadow:0 0 8px var(--pink); transition:width .1s; }
.gun-meter { position:absolute; z-index:2; right:18px; bottom:88px; width:124px; padding:7px 8px; border:1px solid rgba(255,230,77,.55); background:rgba(35,29,3,.65); box-shadow:0 0 16px rgba(255,230,77,.2); }.gun-meter span { display:block; color:var(--yellow); font-size:.54rem; letter-spacing:.12em; }.gun-meter i { display:block; height:3px; margin-top:6px; background:var(--yellow); box-shadow:0 0 8px var(--yellow); }.fire-button { color:var(--yellow) !important; border-color:rgba(255,230,77,.5) !important; box-shadow:0 0 14px rgba(255,230,77,.22) !important; }
.level-clear { position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:min(430px,90vw); padding:16px; text-align:center; color:#fff5a6; font-size:clamp(1.35rem,5vw,2.3rem); font-weight:900; letter-spacing:.12em; background:rgba(25,20,2,.76); border:1px solid var(--yellow); text-shadow:0 0 14px var(--yellow); box-shadow:0 0 34px rgba(255,230,77,.35); animation:level-pop .35s ease-out; }.level-clear::after { content:'ARENA SHIFT IN PROGRESS'; display:block; margin-top:7px; color:#d1d9f4; font-size:.52em; letter-spacing:.2em; text-shadow:none; }@keyframes level-pop { from { opacity:0; transform:translate(-50%,-45%) scale(.8); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
.touch-controls { position:absolute; left:0; right:0; bottom:max(14px, env(safe-area-inset-bottom)); z-index:2; display:flex; justify-content:space-between; padding:0 22px; pointer-events:none; }.touch-controls button { pointer-events:auto; width:66px; height:52px; color:var(--cyan); font-size:1.35rem; box-shadow:0 0 14px rgba(84,248,255,.18); touch-action:none; }
@media (min-width: 750px) { .touch-controls { display:none !important; } }
@media (max-width: 420px) { .panel { padding:27px 22px; }.instruction-grid { gap:5px; }.instruction-grid div { padding:9px 6px; }.instruction-grid span { font-size:.62rem; }.hud { padding-left:12px; padding-right:12px; gap:10px; }.difficulty-readout { display:none; } }