:root {
  --ink: #f6f3e8;
  --muted: #858a9b;
  --night: #080b14;
  --night-soft: #101522;
  --line: rgba(255,255,255,.10);
  --gold: #f4ca64;
  --gold-deep: #e9a83e;
  --coral: #ef665d;
  --mint: #72e1bd;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 0%, rgba(53, 63, 103, .24), transparent 33%),
    radial-gradient(circle at 86% 66%, rgba(132, 75, 54, .12), transparent 28%),
    var(--night);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.ambient {
  position: fixed;
  z-index: 0;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .14;
  pointer-events: none;
}
.ambient-a { left: -130px; top: 30%; background: #6279ca; }
.ambient-b { right: -150px; bottom: 3%; background: #f1a24d; }

.page-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
}

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 46px; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-mark { position: relative; display: grid; place-items: center; width: 38px; height: 38px; transform: rotate(-10deg); }
.brand-mark i { position: absolute; display: block; width: 30px; height: 11px; border: 1px solid var(--gold); border-radius: 50%; }
.brand-mark i:nth-child(2) { transform: rotate(60deg); }
.brand-mark i:nth-child(3) { transform: rotate(-60deg); }
.brand strong { display: block; font-size: 15px; letter-spacing: .16em; }
.brand small { display: block; color: var(--muted); font: 400 8px/1.5 "Space Mono", monospace; letter-spacing: .35em; }

.top-actions { display: flex; gap: 10px; }
.icon-btn, .pause-btn, .skin-trigger {
  height: 39px;
  color: #b8bdca;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.icon-btn:hover, .pause-btn:hover, .skin-trigger:hover { color: var(--ink); border-color: rgba(244,202,100,.34); background: rgba(244,202,100,.05); }
.icon-btn:active, .pause-btn:active, .skin-trigger:active { transform: scale(.96); }
.icon-btn { display: grid; place-items: center; width: 39px; padding: 9px; }
.icon-btn svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.icon-btn .sound-off { display: none; }
.icon-btn.is-muted .sound-on { display: none; }
.icon-btn.is-muted .sound-off { display: block; }
.pause-btn { display: flex; align-items: center; gap: 9px; padding: 0 14px; font-size: 12px; letter-spacing: .12em; }
.pause-symbol { color: var(--gold); font-family: "Space Mono", monospace; font-size: 11px; }
.skin-trigger { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 10px; letter-spacing: .12em; }
.active-skin-swatch { width: 15px; height: 15px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: linear-gradient(135deg, #fff1a4, #cf8736); box-shadow: 0 0 11px rgba(244,202,100,.35); }

.hero-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--gold); font: 700 9px "Space Mono", monospace; letter-spacing: .25em; }
.eyebrow span { width: 25px; height: 1px; background: var(--gold); }
h1 { margin: 0; font-size: clamp(44px, 6vw, 76px); font-weight: 900; line-height: .94; letter-spacing: -.065em; }
h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(244,202,100,.75); text-shadow: 0 0 30px rgba(244,202,100,.08); }
.intro-text { width: min(420px, 42%); margin: 0 0 7px; color: #959aa9; font-size: 13px; line-height: 1.95; letter-spacing: .04em; }

.game-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 560;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 3px;
  background: #0a0f1b;
  box-shadow: 0 34px 90px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.02);
  isolation: isolate;
  touch-action: none;
}
.game-frame::before, .game-frame::after { content: ""; position: absolute; z-index: 12; pointer-events: none; }
.game-frame::before { inset: 0; border: 7px solid rgba(6,8,15,.26); box-shadow: inset 0 0 60px rgba(0,0,0,.35); }
.game-frame::after { inset: 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,.035) 4px); mix-blend-mode: soft-light; }
#gameCanvas { display: block; width: 100%; height: 100%; }

.hud { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 24px 28px; pointer-events: none; }
.hud-group span { display: block; margin-bottom: 3px; color: #767d8e; font-size: 9px; letter-spacing: .22em; }
.hud-group strong { font: 700 23px "Space Mono", monospace; letter-spacing: .07em; }
.best-block { text-align: right; }
.best-block strong { color: var(--gold); font-size: 15px; }
.hud-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.life-wrap { display: flex; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; background: rgba(5,8,15,.42); }
.life { display: block; width: 16px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.11); transition: background .25s, box-shadow .25s; }
.life.active { background: var(--mint); box-shadow: 0 0 10px rgba(114,225,189,.45); }
.combo-pill { transform: translateY(-6px) scale(.8); padding: 5px 10px; color: var(--gold); border: 1px solid rgba(244,202,100,.2); border-radius: 20px; background: rgba(244,202,100,.08); font-size: 9px; letter-spacing: .12em; opacity: 0; transition: .2s; }
.combo-pill.is-active { transform: translateY(0) scale(1); opacity: 1; }
.combo-pill span { font: 700 11px "Space Mono", monospace; }

.pulse-meter-wrap { position: absolute; z-index: 6; left: 28px; right: 28px; bottom: 22px; display: grid; grid-template-columns: 150px minmax(120px, 300px) auto; align-items: end; gap: 16px; pointer-events: none; }
.pulse-copy { display: flex; flex-direction: column; gap: 2px; }
.pulse-copy span { color: var(--ink); font-size: 9px; letter-spacing: .18em; }
.pulse-copy b { color: #626a7c; font-size: 8px; font-weight: 500; letter-spacing: .08em; }
.pulse-track { height: 3px; margin-bottom: 8px; overflow: hidden; background: rgba(255,255,255,.11); }
.pulse-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold-deep), #fff0a5); box-shadow: 0 0 12px var(--gold); transition: width .25s ease; }
.pulse-button { pointer-events: auto; min-width: 92px; height: 30px; color: #575e70; border: 1px solid rgba(255,255,255,.09); border-radius: 4px; background: rgba(5,8,15,.5); font-size: 9px; letter-spacing: .12em; transition: .2s; }
.pulse-button span { margin-right: 4px; font: 700 8px "Space Mono", monospace; }
.pulse-button:not(:disabled) { color: #171207; border-color: var(--gold); background: var(--gold); box-shadow: 0 0 25px rgba(244,202,100,.3); cursor: pointer; animation: pulse-ready 1.6s ease-in-out infinite; }

.overlay { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain; background: rgba(6,9,17,.42); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility .35s; backdrop-filter: blur(2px); }
.overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.start-overlay { grid-template-columns: .8fr 1.2fr; gap: 20px; padding: 54px 10%; background: linear-gradient(90deg, rgba(7,10,18,.74), rgba(7,10,18,.44)); }
.overlay-card { width: min(100%, 430px); }
.overlay-card.compact { padding: 38px; text-align: center; border: 1px solid rgba(255,255,255,.10); background: rgba(10,14,24,.85); box-shadow: 0 20px 60px rgba(0,0,0,.4); backdrop-filter: blur(14px); }
.card-kicker { margin: 0 0 10px !important; color: var(--gold) !important; font: 700 9px "Space Mono", monospace !important; letter-spacing: .24em !important; }
.overlay-card h2 { margin: 0 0 13px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; }
.overlay-card > p { margin: 0; color: #9ba0af; font-size: 12px; line-height: 1.9; }
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 25px 0; }
.controls-grid > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 73px; padding: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.controls-grid b { color: #858b9a; font-size: 9px; font-weight: 500; letter-spacing: .12em; }
.key-group { display: flex; gap: 4px; }
kbd { display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; color: var(--gold); border: 1px solid rgba(244,202,100,.24); border-bottom-color: rgba(244,202,100,.5); border-radius: 3px; background: rgba(244,202,100,.06); box-shadow: 0 2px 0 rgba(0,0,0,.2); font: 700 8px "Space Mono", monospace; }
.primary-btn { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; height: 49px; color: #151005; border: 0; border-radius: 3px; background: var(--gold); box-shadow: 0 12px 30px rgba(244,202,100,.18); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .16em; transition: transform .2s, background .2s, box-shadow .2s; }
.primary-btn:hover { transform: translateY(-2px); background: #ffdc7e; box-shadow: 0 15px 36px rgba(244,202,100,.25); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.overlay-card > small { display: block; margin-top: 12px; color: #5d6372; text-align: center; font-size: 8px; letter-spacing: .08em; }

.orbit-art { position: relative; width: min(30vw, 250px); aspect-ratio: 1; justify-self: center; }
.orbit { position: absolute; inset: 12%; border: 1px solid rgba(244,202,100,.17); border-radius: 50%; transform: rotate(25deg) scaleY(.35); }
.orbit::after { content: ""; position: absolute; top: 45%; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 15px var(--gold); }
.orbit-two { inset: 2%; transform: rotate(-32deg) scaleY(.42); border-color: rgba(114,225,189,.13); }
.orbit-two::after { top: 20%; left: auto; right: 7%; width: 4px; height: 4px; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.core { position: absolute; inset: 33%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; background: radial-gradient(circle at 45% 40%, #fff5b7 0 3%, #edc05b 4% 12%, #6c5635 13% 18%, #14182a 45%, transparent 65%); box-shadow: 0 0 55px rgba(244,202,100,.12); animation: float 4s ease-in-out infinite; }
.core i { width: 7px; height: 18px; border-radius: 50%; background: white; filter: blur(4px); opacity: .65; }

.pause-overlay { background: rgba(5,8,15,.68); backdrop-filter: blur(8px); }
.pause-overlay .overlay-card p { margin-bottom: 24px; }
.result-card { width: min(100%, 390px) !important; }
.result-score { margin: 22px 0; padding: 20px; border-block: 1px solid rgba(255,255,255,.08); }
.result-score span, .result-score small { display: block; color: #747b8c; font-size: 9px; letter-spacing: .16em; }
.result-score strong { display: block; margin: 4px 0 2px; color: var(--gold); font: 700 38px "Space Mono", monospace; }

.skin-overlay { z-index: 16; padding: 30px; background: rgba(5,8,15,.76); backdrop-filter: blur(12px); }
.skin-panel { width: min(100%, 690px); padding: 32px; border: 1px solid rgba(255,255,255,.11); background: linear-gradient(145deg, rgba(17,22,35,.98), rgba(8,12,21,.98)); box-shadow: 0 28px 80px rgba(0,0,0,.5); }
.skin-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.skin-panel-head h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; }
.skin-close { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; color: #8c93a3; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: transparent; cursor: pointer; font: 300 23px/1 sans-serif; transition: .2s; }
.skin-close:hover { color: var(--ink); border-color: rgba(244,202,100,.35); transform: rotate(8deg); }
.skin-lead { margin: 12px 0 22px; color: #777e8e; font-size: 11px; letter-spacing: .04em; }
.skin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.skin-card { position: relative; display: grid; grid-template-columns: 76px 1fr 22px; align-items: center; gap: 13px; min-height: 92px; padding: 14px; color: var(--ink); text-align: left; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.skin-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.045); }
.skin-card.is-selected { border-color: rgba(244,202,100,.5); background: rgba(244,202,100,.065); box-shadow: inset 0 0 25px rgba(244,202,100,.025); }
.ship-preview { --ship-a:#f9e29b; --ship-b:#ae6e2c; --ship-glow:#f4ca64; position: relative; display: block; width: 62px; height: 44px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ship-glow) 55%, transparent)); }
.ship-preview::before { content:""; position:absolute; left:10px; top:7px; width:47px; height:30px; clip-path: polygon(100% 50%, 9% 5%, 27% 50%, 9% 95%); background: linear-gradient(135deg, var(--ship-a), var(--ship-b)); }
.ship-preview::after { content:""; position:absolute; left:1px; top:18px; width:23px; height:8px; border-radius:50%; background: linear-gradient(90deg, transparent, var(--ship-glow)); filter: blur(2px); }
.ship-preview i { position:absolute; z-index:1; left:38px; top:18px; width:9px; height:7px; border-radius:50%; background:#142538; border:1px solid rgba(255,255,255,.7); }
.preview-glacier { --ship-a:#d7fbff; --ship-b:#2f81ad; --ship-glow:#72e1e1; }
.preview-ember { --ship-a:#ffd0a5; --ship-b:#c34132; --ship-glow:#ff6e4f; }
.preview-void { --ship-a:#ead6ff; --ship-b:#6c45a7; --ship-glow:#b58cff; }
.skin-info b, .skin-info small { display:block; }
.skin-info b { margin-bottom:4px; font-size:13px; letter-spacing:.08em; }
.skin-info small { color:#656d7d; font:400 8px "Space Mono",monospace; letter-spacing:.12em; }
.skin-check { display:grid; place-items:center; width:19px; height:19px; color:#181207; border-radius:50%; background:var(--gold); font-size:10px; opacity:0; transform:scale(.65); transition:.2s; }
.skin-card.is-selected .skin-check { opacity:1; transform:scale(1); }
.skin-confirm { width:min(100%, 300px); margin:22px 0 0 auto; }

.game-footer { display: flex; justify-content: space-between; margin-top: 14px; color: #505766; font: 400 8px "Space Mono", monospace; letter-spacing: .12em; }
.game-footer p { margin: 0; }
.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.mobile-tip { display: none; }

@keyframes pulse-ready { 50% { box-shadow: 0 0 35px rgba(244,202,100,.52); } }
@keyframes float { 50% { transform: translateY(-8px) rotate(4deg); } }

@media (max-width: 760px) {
  .page-shell { width: min(calc(100% - 24px), 620px); padding-top: max(16px, env(safe-area-inset-top)); }
  .topbar { margin-bottom: 30px; }
  .pause-btn span:last-child { display: none; }
  .pause-btn { width: 39px; justify-content: center; padding: 0; }
  .skin-trigger { width: 39px; justify-content: center; padding: 0; }
  .skin-trigger > span:last-child { display: none; }
  .hero-copy { display: block; margin-bottom: 20px; }
  .intro-text { width: 100%; margin-top: 18px; font-size: 11px; line-height: 1.7; }
  .game-frame { width: 100%; height: clamp(540px, 72dvh, 680px); min-height: 0; max-height: none; aspect-ratio: auto; }
  .start-overlay { grid-template-columns: 1fr; padding: 72px 24px 62px; }
  .orbit-art { position: absolute; top: 35px; right: -5%; width: 150px; opacity: .55; }
  .overlay-card { position: relative; z-index: 1; }
  .overlay-card h2 { font-size: 38px; }
  .hud { padding: 20px 17px; }
  .hud-group strong { font-size: 18px; }
  .best-block strong { font-size: 13px; }
  .pulse-meter-wrap { left: 17px; right: 17px; bottom: 16px; grid-template-columns: 1fr auto; gap: 8px 12px; }
  .pulse-copy { grid-column: 1 / 2; }
  .pulse-track { grid-column: 1 / 2; grid-row: 2; margin-bottom: 7px; }
  .pulse-button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .game-footer p:first-child, .game-footer p:last-child { display: none; }
  .game-footer { justify-content: center; }
  .mobile-tip { display: block; }
  .skin-overlay { padding: 16px; }
  .skin-panel { padding: 22px 18px; }
  .skin-grid { grid-template-columns: 1fr; max-height: 330px; overflow-y: auto; }
  .skin-card { min-height: 74px; grid-template-columns: 64px 1fr 22px; padding: 9px 12px; }
  .ship-preview { transform: scale(.86); transform-origin: left center; }
  .skin-confirm { width:100%; }
}

@media (max-width: 430px) {
  .brand strong { font-size: 13px; }
  h1 { font-size: 47px; }
  .game-frame { height: clamp(500px, 70dvh, 640px); }
  .controls-grid { gap: 7px; }
  .controls-grid > div { padding: 10px; }
  .overlay-card.compact { padding: 30px 22px; }
  .hud-center { transform: scale(.86); transform-origin: top; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .page-shell { width: min(calc(100% - 36px), 940px); }
  .topbar { margin-bottom: 34px; }
  h1 { font-size: clamp(50px, 7vw, 68px); }
  .intro-text { width: 44%; }
  .game-frame { min-height: 400px; }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-shell { width: min(calc(100% - 24px), 980px); padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 8px; }
  .topbar { margin-bottom: 10px; }
  .hero-copy, .game-footer { display: none; }
  .game-frame { height: calc(100dvh - 70px); min-height: 360px; aspect-ratio: auto; }
  .start-overlay { grid-template-columns: .7fr 1.3fr; padding: 22px 7%; }
  .overlay-card h2 { font-size: 30px; margin-bottom: 8px; }
  .overlay-card > p { line-height: 1.55; }
  .controls-grid { margin: 12px 0; }
  .controls-grid > div { height: 58px; padding: 8px; }
  .skin-panel { padding: 20px 24px; }
  .skin-grid { grid-template-columns: repeat(2, 1fr); max-height: 210px; }
}

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