:root {
  --night: #050b16;
  --panel: #0a1726;
  --ink: #f4f6ef;
  --muted: #7f95a6;
  --cyan: #25ead3;
  --coral: #ff635d;
  --amber: #ffc44f;
  --blue: #4b86ff;
  --line: rgba(188, 226, 232, .17);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { overflow-x: hidden; background: var(--night); }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; color: var(--ink); background: var(--night); font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; letter-spacing: 0; -webkit-overflow-scrolling: touch; }
body.playing { width: 100%; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
body.result-mode { overflow-y: auto; touch-action: pan-y; }
body.preview-open { overflow: hidden; }
button, input { font: inherit; letter-spacing: 0; }

#ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; }
.scanlines { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .05; background: repeating-linear-gradient(180deg, transparent 0 3px, #fff 4px); }

.topbar { position: fixed; inset: 0 0 auto; z-index: 60; height: calc(70px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) clamp(20px,4vw,58px) 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(4,11,22,.66); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.result-mode .topbar { background: rgba(4,11,22,.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { color: #a8bcc5; font: 700 11px Consolas, monospace; }
.brand span { display: inline-grid; place-items: center; width: 38px; height: 28px; margin-right: 11px; color: #061419; background: var(--cyan); clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); }
.sound { width: 42px; height: 30px; border: 1px solid var(--line); border-radius: 2px; color: var(--cyan); background: transparent; font: 700 9px Consolas, monospace; cursor: pointer; }
.sound[aria-pressed="false"] { color: #667885; text-decoration: line-through; }

.view { min-height: 100vh; min-height: 100dvh; display: none; opacity: 0; }
.view.active { display: flex; animation: view-in .65s cubic-bezier(.2,.8,.2,1) forwards; }

.register { position: relative; align-items: center; padding: calc(104px + env(safe-area-inset-top)) clamp(24px,7vw,108px) calc(42px + env(safe-area-inset-bottom)); }
.register-copy { position: relative; z-index: 2; width: min(620px,54vw); }
.eyebrow { margin: 0 0 18px; color: var(--cyan); font-size: 11px; font-weight: 800; }
h1 { margin: 0; font: 900 clamp(62px,8vw,120px)/.82 "STKaiti", "KaiTi", serif; }
h1 em { color: var(--coral); font-style: normal; text-shadow: 4px 0 rgba(37,234,211,.24), -4px 0 rgba(75,134,255,.22), 0 0 42px rgba(255,99,93,.28); animation: chroma 2.4s ease-in-out infinite; }
.lead { margin: 30px 0 22px; color: #bbcad0; font-size: 14px; }

form { width: min(520px,100%); display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; }
label { min-width: 0; }
label span { display: block; margin-bottom: 7px; color: #79909c; font: 700 9px Consolas, monospace; }
input { width: 100%; height: 54px; padding: 0 15px; border: 1px solid var(--line); border-radius: 3px; outline: 0; color: var(--ink); background: rgba(8,27,42,.78); transition: border-color .2s, box-shadow .2s; }
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37,234,211,.1), 0 0 30px rgba(37,234,211,.08); }
input::placeholder { color: #536b78; }
.form-error { grid-column: 1/3; min-height: 16px; margin: 0; color: var(--coral); font-size: 11px; }
.launch-btn { min-height: 54px; padding: 0 22px; border: 0; border-radius: 3px; color: #05151b; background: var(--cyan); box-shadow: 0 16px 42px rgba(37,234,211,.16); font-weight: 800; cursor: pointer; transition: .2s; }
form .launch-btn { grid-column: 1/3; }
.launch-btn b { margin-left: 30px; font-size: 21px; }
.launch-btn:hover { transform: translateY(-3px); background: #65f6e6; box-shadow: 0 20px 48px rgba(37,234,211,.25); }
.privacy { color: #536b78; font-size: 10px; }

.hangar { position: absolute; right: clamp(20px,8vw,130px); top: 50%; width: clamp(300px,34vw,520px); aspect-ratio: 1; transform: translateY(-45%); }
.radar-ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.radar-ring::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 20px var(--amber); }
.r1 { inset: 0; animation: spin 16s linear infinite; }
.r1::after { left: 10%; top: 24%; }
.r2 { inset: 18%; border-style: dashed; animation: spin 10s linear reverse infinite; }
.r2::after { right: 3%; bottom: 36%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.radar-sweep { position: absolute; inset: 12%; border-radius: 50%; background: conic-gradient(from 10deg, rgba(37,234,211,.18), transparent 22%, transparent); animation: spin 4s linear infinite; }
.ship-preview { position: absolute; left: 50%; top: 50%; width: 120px; height: 160px; transform: translate(-50%,-50%); filter: drop-shadow(0 0 34px rgba(37,234,211,.42)); animation: float 2.4s ease-in-out infinite; }
.ship-preview::before { content: ""; position: absolute; left: 48px; top: 0; width: 24px; height: 150px; background: linear-gradient(180deg,#fff 0 15%,var(--cyan) 15% 75%,#0d5262 75%); clip-path: polygon(50% 0,100% 28%,72% 88%,50% 100%,28% 88%,0 28%); }
.ship-preview i, .ship-preview b { position: absolute; top: 58px; width: 70px; height: 55px; background: var(--blue); clip-path: polygon(0 65%,100% 0,74% 100%); }
.ship-preview i { left: 0; }
.ship-preview b { right: 0; transform: scaleX(-1); }
.ship-preview span { position: absolute; left: 45px; top: 135px; width: 30px; height: 70px; background: linear-gradient(var(--amber),var(--coral),transparent); clip-path: polygon(20% 0,80% 0,100% 100%,50% 72%,0 100%); animation: flame .18s infinite alternate; }
.hangar-code { position: absolute; right: 0; bottom: 2%; color: #647a86; font: 10px/1.7 Consolas,monospace; }

.game { position: fixed; inset: 0; background: #020712; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.game-hud { position: absolute; z-index: 5; top: calc(70px + env(safe-area-inset-top)); left: 0; right: 0; height: 66px; padding: 0 clamp(18px,4vw,54px); display: grid; grid-template-columns: 1.5fr 1fr .55fr 1fr 1fr; align-items: center; gap: 20px; background: linear-gradient(180deg,rgba(3,10,20,.92),transparent); pointer-events: none; }
.game-hud span, .game-hud small { display: block; color: #78909d; font: 8px Consolas,monospace; }
.game-hud b { color: var(--ink); font: 700 22px Consolas,monospace; }
.pilot-block span { color: var(--cyan); font-size: 12px; font-weight: 800; }
.combo-block { color: var(--coral); font: 700 21px Consolas,monospace; opacity: 0; transform: scale(.75); transition: .2s; }
.combo-block.live { opacity: 1; transform: scale(1); text-shadow: 0 0 16px var(--coral); }
.time-block { text-align: right; }
.time-block b { color: var(--amber); }
.life-block { display: flex; justify-content: flex-end; gap: 7px; }
.life-block i { width: 20px; height: 10px; background: var(--coral); clip-path: polygon(50% 0,100% 100%,50% 75%,0 100%); transition: .25s; }
.life-block i.lost { opacity: .16; transform: scale(.6); }
.countdown { position: absolute; z-index: 8; inset: 0; display: none; place-items: center; color: var(--ink); background: rgba(2,7,18,.45); backdrop-filter: blur(4px); font: 900 clamp(90px,18vw,240px)/1 Consolas,monospace; text-shadow: 8px 0 var(--coral),-8px 0 var(--blue); }
.countdown.show { display: grid; }
.boss-alert { position: absolute; z-index: 8; top: 46%; left: 50%; width: min(620px,88vw); padding: 18px; border-block: 1px solid var(--coral); color: var(--coral); background: rgba(45,4,10,.72); text-align: center; font: 800 clamp(16px,2vw,24px) Consolas,monospace; transform: translate(-50%,-50%) scaleX(0); opacity: 0; }
.boss-alert.show { animation: alert 2.2s ease both; }

.result { width: 100%; align-items: center; gap: clamp(40px,7vw,110px); padding: calc(108px + env(safe-area-inset-top)) clamp(24px,7vw,108px) calc(44px + env(safe-area-inset-bottom)); overflow: visible; touch-action: pan-y; }
.result-copy { flex: 1; max-width: 720px; }
.result h2 { margin: 0; font: 800 clamp(38px,4.5vw,68px)/1.16 "STKaiti","KaiTi",serif; }
.result h2 em { color: var(--coral); font-style: normal; }
.evaluation { max-width: 670px; margin: 24px 0; color: #b5c7cd; font-size: 14px; line-height: 1.85; }
.result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.secondary-btn { min-height: 54px; padding: 0 20px; border: 1px solid var(--cyan); border-radius: 3px; color: var(--cyan); background: rgba(37,234,211,.05); font-weight: 800; cursor: pointer; }
.text-btn { min-height: 42px; border: 0; border-bottom: 1px solid #536b78; color: #90a5ae; background: transparent; cursor: pointer; }
.report-panel { position: relative; width: min(420px,100%); min-height: 550px; padding: 24px 28px; color: #071925; background: #f2f0e6; border-radius: 5px; box-shadow: 28px 35px 0 rgba(0,0,0,.18),0 36px 100px rgba(0,0,0,.36); transform: rotate(1deg); }
.report-panel::before { content:""; position:absolute; inset:0 0 auto; height:9px; background:linear-gradient(90deg,var(--cyan) 0 46%,var(--amber) 46% 72%,var(--coral) 72%); }
.report-head { display:flex; justify-content:space-between; color:#667980; font:700 9px Consolas,monospace; }
.report-panel>p { margin:34px 0 5px; color:#62767d; font-size:11px; }
.report-panel h3 { margin:0; font:800 35px "STKaiti","KaiTi",serif; }
.rank { position:absolute; right:28px; top:75px; color:var(--coral); font:900 90px/.8 Georgia,serif; }
.report-panel dl { margin:34px 0 26px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(7,25,37,.18); }
.report-panel dl div { padding:16px 0; border-bottom:1px solid rgba(7,25,37,.18); }
.report-panel dt { color:#6a7d82; font-size:10px; }
.report-panel dd { margin:5px 0 0; font:800 22px Consolas,monospace; }
.report-panel blockquote { margin:0; color:#17343d; font:700 16px/1.6 "STKaiti","KaiTi",serif; }
.report-foot { position:absolute; left:28px; right:28px; bottom:20px; color:#6d7d81; font:9px Consolas,monospace; }

.report-preview { position: fixed; inset: 0; z-index: 100; height: 100vh; height: 100dvh; padding: calc(58px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: rgba(2,7,15,.96); }
.report-preview[hidden] { display: none; }
.preview-bar { position: fixed; z-index: 2; inset: 0 0 auto; min-height: calc(50px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; display: flex; align-items: center; justify-content: space-between; color: #a9bec6; background: #050b16; border-bottom: 1px solid var(--line); font-size: 12px; }
.preview-bar button { min-width: 58px; min-height: 34px; border: 1px solid var(--cyan); border-radius: 3px; color: var(--cyan); background: transparent; }
.report-preview img { display: block; width: min(100%, 540px); height: auto; margin: 0 auto; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,.55); }

@keyframes view-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes chroma { 50% { text-shadow:7px 0 rgba(37,234,211,.34),-6px 0 rgba(75,134,255,.32),0 0 60px rgba(255,99,93,.48); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 50% { transform:translate(-50%,-54%) rotate(2deg); } }
@keyframes flame { to { transform:scaleY(.76); filter:brightness(1.6); } }
@keyframes alert { 0% { opacity:0; transform:translate(-50%,-50%) scaleX(0); } 18%,72% { opacity:1; transform:translate(-50%,-50%) scaleX(1); } 100% { opacity:0; transform:translate(-50%,-50%) scaleX(0); } }

@media (max-width:760px) {
  .topbar { height:calc(60px + env(safe-area-inset-top)); }
  .brand { font-size:9px; }
  .register { align-items:flex-start; padding:calc(95px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom)); overflow:visible; }
  .register-copy { width:100%; }
  h1 { font-size:70px; }
  .lead { font-size:13px; }
  form { grid-template-columns:1fr; }
  form .launch-btn,.form-error { grid-column:1; }
  .hangar { width:240px; right:-82px; top:28%; opacity:.42; }
  .game-hud { top:calc(60px + env(safe-area-inset-top)); height:58px; padding:0 12px; grid-template-columns:1fr .85fr .55fr .75fr; gap:9px; }
  .pilot-block small,.score-block span,.time-block span { display:none; }
  .pilot-block span { max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .game-hud b { font-size:15px; }
  .combo-block { font-size:15px; }
  .life-block { position:absolute; right:12px; top:65px; }
  .result { display:none; padding:calc(88px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom)); }
  .result.active { display:flex; flex-direction:column; align-items:stretch; overflow:visible; }
  .report-panel { order:-1; min-height:510px; transform:none; }
  .result h2 { font-size:39px; }
  .result-actions { align-items:stretch; flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; } }