:root {
  color-scheme: dark;
  --ink: #edfaff;
  --muted: #89a8b7;
  --cyan: #39e7ff;
  --cyan-soft: #78f3ff;
  --violet: #9c6cff;
  --coral: #ff5577;
  --gold: #ffc85c;
  --panel: rgba(8, 17, 29, 0.76);
  --line: rgba(115, 227, 255, 0.2);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05070e;
  color: var(--ink);
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  user-select: none;
}

button { font: inherit; }

#game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #0a1724 0%, #05070d 70%);
}

#game-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.hidden { display: none !important; }
.glass-panel {
  background: linear-gradient(145deg, rgba(14, 29, 45, 0.86), rgba(5, 13, 23, 0.72));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 35px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
}

#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.hud-left { position: absolute; top: 22px; left: 24px; width: 290px; padding: 13px 15px 11px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.bar-row { display: grid; grid-template-columns: 22px 1fr 73px; align-items: center; gap: 8px; margin-bottom: 8px; }
.bar-icon { font-size: 13px; text-align: center; filter: drop-shadow(0 0 5px currentColor); }
.hp-icon { color: #ff6a82; }.shield-icon { color: #56bfff; }
.bar-track { position: relative; height: 8px; background: rgba(0,0,0,.54); overflow: hidden; transform: skewX(-14deg); border: 1px solid rgba(255,255,255,.06); }
.bar-fill { height: 100%; width: 100%; transition: width .12s ease; box-shadow: 0 0 12px currentColor; }
.health-fill { color: #ff496b; background: linear-gradient(90deg, #c8294f, #ff6f86); }
.shield-fill { color: #38b9ff; background: linear-gradient(90deg, #207fd8, #68dfff); }
.bar-value { color: #bdd0d9; font: 600 11px/1 ui-monospace, monospace; text-align: right; }
.quick-stats { display: flex; gap: 15px; padding-left: 30px; color: #6e93a5; text-transform: uppercase; font-size: 10px; letter-spacing: .7px; }
.quick-stats b { color: #d8f5ff; font-size: 11px; }

.wave-panel { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); min-width: 180px; padding: 9px 28px 10px; text-align: center; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.wave-panel::before, .wave-panel::after { content:""; position:absolute; top:50%; width:28px; height:1px; background:linear-gradient(90deg, transparent, var(--cyan)); }
.wave-panel::before { right:100%; }.wave-panel::after { left:100%; transform:rotate(180deg); }
#wave-kicker, #enemy-count { display:block; color:#7198a9; font-size:9px; letter-spacing:1.7px; text-transform:uppercase; }
#wave-label { display:block; color:#f1fcff; font-size:19px; letter-spacing:2.5px; line-height:1.2; text-shadow:0 0 12px rgba(57,231,255,.3); }
#enemy-count { color:#69c8d8; letter-spacing:.8px; }

.icon-button { pointer-events:auto; position:absolute; top:22px; right:24px; width:42px; height:42px; color:#8fc4d3; border-radius:50%; border:1px solid var(--line); cursor:pointer; font-weight:800; }
.icon-button:hover { color:white; border-color:rgba(57,231,255,.55); box-shadow:0 0 20px rgba(57,231,255,.12); }

.xp-area { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:min(620px, 55vw); height:28px; display:grid; grid-template-columns:55px 1fr 65px; align-items:center; gap:9px; }
.level-badge { height:28px; line-height:28px; color:#79bfcb; font-size:10px; letter-spacing:1px; text-align:center; background:rgba(8,19,31,.85); border:1px solid rgba(57,231,255,.25); transform:skewX(-12deg); }
.level-badge b { color:white; font-size:14px; }
.xp-track { height:7px; background:rgba(4,9,18,.9); border:1px solid rgba(122,245,255,.13); overflow:hidden; transform:skewX(-12deg); }
.xp-fill { height:100%; width:0; background:linear-gradient(90deg, #3a63ef, #57e5ff, #9dfff4); box-shadow:0 0 14px #50e8ff; transition:width .15s ease; }
#xp-text { color:#84a4b2; font:600 10px ui-monospace, monospace; }

.dash-indicator { position:absolute; left:24px; bottom:25px; display:flex; gap:9px; align-items:center; color:#6f91a1; opacity:.55; transition:.2s; }
.dash-indicator.ready { color:#bff9ff; opacity:1; filter:drop-shadow(0 0 8px rgba(57,231,255,.24)); }
.dash-key { min-width:52px; padding:5px 6px; border:1px solid currentColor; border-radius:3px; text-align:center; font:700 9px ui-monospace, monospace; }
.dash-indicator strong, .dash-indicator small { display:block; font-size:10px; line-height:1.25; }.dash-indicator small { color:#668898; }

.boss-hud { position:absolute; z-index:11; top:102px; left:50%; transform:translateX(-50%); width:min(510px, 60vw); text-align:center; pointer-events:none; }
.boss-title { display:flex; justify-content:space-between; align-items:end; padding:0 4px 5px; }.boss-title span { color:#ff6c88; font-size:9px; letter-spacing:2px; }.boss-title strong { color:#ffe6eb; font-size:13px; letter-spacing:1px; }
.boss-bar { height:9px; padding:2px; background:rgba(20,5,11,.88); border:1px solid rgba(255,77,113,.4); transform:skewX(-12deg); }
#boss-fill { height:100%; background:linear-gradient(90deg,#b01e53,#ff496f,#ff9470); box-shadow:0 0 14px rgba(255,55,100,.75); transition:width .1s; }

.announcement { position:absolute; z-index:14; top:31%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; pointer-events:none; animation:announce 2.3s both; }
.announcement::before { content:""; position:absolute; left:50%; top:50%; width:430px; height:1px; transform:translate(-50%,-50%); background:linear-gradient(90deg,transparent,rgba(57,231,255,.65),transparent); }
.announcement span, .announcement strong { position:relative; display:block; text-shadow:0 3px 20px #000; }
.announcement span { color:#54e7fa; font-size:11px; letter-spacing:5px; }.announcement strong { margin-top:7px; font-size:36px; letter-spacing:7px; }
@keyframes announce { 0%{opacity:0;transform:translate(-50%,-35%) scale(.92)} 16%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-65%) scale(1.06)} }

.screen { position:absolute; z-index:30; inset:0; display:none; align-items:center; justify-content:center; background:rgba(3,6,12,.72); backdrop-filter:blur(3px); }
.screen.active { display:flex; }
#start-screen { background:radial-gradient(ellipse at center, rgba(9,31,43,.45), rgba(2,4,10,.93)); overflow:hidden; }
#start-screen::before { content:""; position:absolute; width:min(72vw,850px); aspect-ratio:1; border:1px solid rgba(69,223,255,.08); border-radius:50%; box-shadow:0 0 0 60px rgba(80,224,255,.018),0 0 0 130px rgba(80,224,255,.012); animation:orbit 28s linear infinite; }
#start-screen::after { content:""; position:absolute; width:min(43vw,500px); aspect-ratio:1; border:1px dashed rgba(69,223,255,.13); border-radius:50%; animation:orbit 18s linear infinite reverse; }
@keyframes orbit { to{transform:rotate(360deg)} }
.scanlines { position:absolute; inset:0; opacity:.16; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(100,220,255,.08) 4px); }
.start-content { position:relative; z-index:2; width:min(850px, 92vw); text-align:center; }
.eyebrow { display:flex; justify-content:center; align-items:center; gap:12px; color:#5db5c8; font:600 10px/1 ui-monospace,monospace; letter-spacing:3px; text-transform:uppercase; }.eyebrow i { display:block; width:38px; height:1px; background:linear-gradient(90deg,transparent,currentColor); }.eyebrow i:last-child { transform:rotate(180deg); }.eyebrow.danger { color:#f25a76; }
h1 { margin:17px 0 -4px; font-size:clamp(54px, 8vw, 96px); line-height:1; letter-spacing:clamp(7px,1.3vw,17px); font-weight:800; background:linear-gradient(180deg,#fff 25%,#bfefff 62%,#56b7d1); color:transparent; -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 22px rgba(67,219,255,.22)); }
.title-en { margin:0; color:#4fc6dd; font:600 13px/1.5 ui-monospace,monospace; letter-spacing:12px; text-indent:12px; }
.tagline { margin:25px 0 24px; color:#91afbc; font-size:14px; letter-spacing:1.5px; }
.primary-button { position:relative; min-width:220px; padding:12px 40px 10px; color:white; border:1px solid rgba(84,235,255,.66); background:linear-gradient(105deg,rgba(12,93,119,.72),rgba(18,52,76,.86)); cursor:pointer; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); box-shadow:inset 0 0 25px rgba(44,219,255,.06); transition:transform .16s,filter .16s; }
.primary-button::before { content:""; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.07); clip-path:inherit; }
.primary-button span,.primary-button small { position:relative; display:block; }.primary-button span { font-size:17px; font-weight:700; letter-spacing:4px; }.primary-button small { margin-top:2px;color:#58cfe3;font:600 8px ui-monospace,monospace;letter-spacing:3px; }
.primary-button:hover { transform:translateY(-2px); filter:brightness(1.28) drop-shadow(0 0 13px rgba(44,219,255,.25)); }.primary-button:active { transform:translateY(1px); }
.controls-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:35px auto 0; width:min(690px,90vw); border-top:1px solid rgba(89,207,230,.11); border-bottom:1px solid rgba(89,207,230,.11); }
.controls-grid>div { min-height:94px; display:flex; justify-content:center; align-items:center; gap:14px; border-right:1px solid rgba(89,207,230,.11); }.controls-grid>div:last-child{border:0}.controls-grid p{text-align:left}.controls-grid b,.controls-grid small{display:block}.controls-grid b{font-size:12px;letter-spacing:1px}.controls-grid small{color:#668797;font-size:10px;margin-top:4px;white-space:nowrap}
kbd { display:inline-grid; place-items:center; min-width:23px; height:21px; margin:1px; padding:0 5px; color:#a7dbe5; background:rgba(14,30,42,.8); border:1px solid #416c77; border-bottom-width:2px; border-radius:3px; font:700 9px ui-monospace,monospace; box-shadow:0 0 8px rgba(73,221,255,.08); }
.key-cluster { display:flex; flex-direction:column; align-items:center; }.key-cluster>span{display:flex}.mouse-icon{display:grid;place-items:center;width:42px;height:50px;border:1px solid #416c77;border-radius:20px;color:#7de7f6;font-size:24px}.wide-key{min-width:62px}.hint{color:#4f7281;font-size:10px;letter-spacing:.5px}.hint kbd{height:17px;min-width:27px;font-size:8px}
.corner-mark { position:absolute;width:70px;height:70px;opacity:.35; }.corner-tl{left:25px;top:25px;border-left:1px solid #53dff2;border-top:1px solid #53dff2}.corner-br{right:25px;bottom:25px;border-right:1px solid #53dff2;border-bottom:1px solid #53dff2}

.modal-screen { background:rgba(2,5,10,.74); backdrop-filter:blur(7px); }
.level-content { width:min(1050px,94vw); text-align:center; }.level-content h2,.dialog h2{margin:13px 0 4px;font-size:clamp(31px,5vw,48px);letter-spacing:5px}.level-content>p,.dialog>p{margin:0 0 27px;color:#7898a7;font-size:13px}.upgrade-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}.upgrade-card{position:relative;min-height:285px;padding:24px 22px;text-align:left;color:var(--ink);background:linear-gradient(160deg,rgba(15,37,51,.96),rgba(7,14,26,.96));border:1px solid rgba(87,213,236,.25);cursor:pointer;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));transition:.18s;overflow:hidden}.upgrade-card::after{content:"";position:absolute;inset:auto -40% -65% 5%;height:180px;background:radial-gradient(ellipse,rgba(57,231,255,.17),transparent 67%);transition:.18s}.upgrade-card:hover{transform:translateY(-8px);border-color:#54e7fa;filter:drop-shadow(0 12px 24px rgba(14,159,184,.18))}.upgrade-card:hover::after{transform:translateY(-20px)}.upgrade-number{position:absolute;right:15px;top:13px;color:#4c7786;font:700 11px ui-monospace,monospace}.upgrade-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:29px;border:1px solid currentColor;transform:rotate(45deg);color:#56e0f5;background:rgba(37,164,185,.08);box-shadow:inset 0 0 20px rgba(66,226,245,.08)}.upgrade-icon span{transform:rotate(-45deg);font-size:28px;filter:drop-shadow(0 0 8px currentColor)}.upgrade-rarity{color:#4fbbc9;font:700 9px ui-monospace,monospace;letter-spacing:2px}.upgrade-card h3{margin:8px 0 10px;font-size:22px;letter-spacing:2px}.upgrade-card p{color:#82a1ae;font-size:12px;line-height:1.7}.upgrade-level{position:absolute;left:22px;bottom:20px;color:#4f7281;font:600 9px ui-monospace,monospace;letter-spacing:1px}.upgrade-card.rare{border-color:rgba(172,114,255,.36)}.upgrade-card.rare .upgrade-icon,.upgrade-card.rare .upgrade-rarity{color:#b784ff}.upgrade-card.rare::after{background:radial-gradient(ellipse,rgba(148,72,255,.18),transparent 67%)}.upgrade-card.legendary{border-color:rgba(255,198,77,.4)}.upgrade-card.legendary .upgrade-icon,.upgrade-card.legendary .upgrade-rarity{color:#ffc861}.upgrade-card.legendary::after{background:radial-gradient(ellipse,rgba(255,179,39,.18),transparent 67%)}.choice-hint{display:block;margin-top:23px;color:#4d7180;letter-spacing:1px}
.dialog { width:min(460px,90vw); padding:38px 42px 42px; text-align:center; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); }.dialog .primary-button{margin-top:8px}.text-button{display:block;margin:17px auto 0;color:#668b9b;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;font-size:11px}.text-button:hover{color:#c9f8ff;border-color:#7bdded}.gameover-dialog{width:min(550px,92vw)}.run-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:27px 0 15px;border:1px solid rgba(106,208,225,.12)}.run-stats div{padding:14px 5px;border-right:1px solid rgba(106,208,225,.12)}.run-stats div:last-child{border:0}.run-stats span,.run-stats strong{display:block}.run-stats span{color:#5f8291;font-size:9px}.run-stats strong{margin-top:4px;font:700 20px ui-monospace,monospace}.best-record{font-size:10px!important;margin-bottom:13px!important;color:#d5a95e!important}

.toast { position:absolute;z-index:50;left:50%;bottom:72px;transform:translateX(-50%);padding:8px 16px;color:#aeeef7;background:rgba(6,18,27,.88);border:1px solid rgba(73,225,246,.22);font-size:11px;letter-spacing:1px;animation:toast-in .25s ease both;pointer-events:none;white-space:nowrap}@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.mobile-controls{position:absolute;z-index:20;inset:0;pointer-events:none}.move-pad{position:absolute;left:28px;bottom:35px;width:116px;height:116px;border-radius:50%;background:rgba(12,28,42,.34);border:1px solid rgba(102,225,240,.2);pointer-events:auto;touch-action:none}.move-pad::before,.move-pad::after{content:"";position:absolute;background:rgba(121,225,238,.12)}.move-pad::before{left:50%;top:12px;bottom:12px;width:1px}.move-pad::after{top:50%;left:12px;right:12px;height:1px}.move-stick{position:absolute;left:35px;top:35px;width:46px;height:46px;border-radius:50%;background:rgba(71,214,234,.25);border:1px solid rgba(121,235,248,.5);box-shadow:0 0 17px rgba(55,210,236,.18)}.mobile-action{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;height:74px;border-radius:50%;color:#bcf7ff;background:rgba(12,35,49,.52);border:1px solid rgba(98,227,244,.38);pointer-events:auto;touch-action:none;font-size:28px}.mobile-action small{font-size:8px;letter-spacing:1px}.fire-action{right:32px;bottom:46px}.dash-action{right:116px;bottom:120px;width:55px;height:55px;font-size:20px}.mobile-action:active{background:rgba(38,150,172,.45);transform:scale(.96)}

@media (pointer: coarse) {
  #game-canvas { cursor:default; }
  .dash-indicator { display:none; }
  .xp-area { bottom:12px;width:48vw; }
  .hud-left{top:12px;left:12px;transform:scale(.86);transform-origin:top left}.wave-panel{top:12px}.icon-button{top:12px;right:12px}.controls-grid>div:nth-child(2) small{font-size:0}.controls-grid>div:nth-child(2) small::after{content:"按住右侧按钮";font-size:10px}
}

@media (max-width: 720px) {
  #game-shell{min-height:320px}.hud-left{width:245px}.quick-stats span:nth-child(2){display:none}.wave-panel{min-width:135px;padding-inline:18px;left:auto;right:55px;transform:none}.wave-panel::before,.wave-panel::after{display:none}.xp-area{grid-template-columns:48px 1fr;width:52vw}.xp-area #xp-text{display:none}.boss-hud{top:82px;width:75vw}.start-content{transform:scale(.9)}.controls-grid{margin-top:25px}.controls-grid>div{min-height:80px}.controls-grid small{display:none}.hint{display:none}.upgrade-cards{gap:8px}.upgrade-card{min-height:245px;padding:16px 13px}.upgrade-icon{width:44px;height:44px;margin-bottom:20px}.upgrade-card h3{font-size:16px}.upgrade-card p{font-size:10px}.upgrade-level{left:13px}.level-content{transform:scale(.94)}
}

@media (max-height: 600px) {
  .start-content{transform:scale(.78)}.level-content{transform:scale(.78)}.dialog{transform:scale(.86)}.announcement{top:28%}.upgrade-cards{margin-top:18px}.choice-hint{margin-top:12px}
}