:root {
  color-scheme: dark;
  --bg: #050712;
  --glass: rgba(8, 14, 31, .58);
  --glass-strong: rgba(8, 14, 31, .88);
  --line: rgba(118, 205, 255, .28);
  --text: #eff8ff;
  --muted: #9db4ca;
  --cyan: #3ee7ff;
  --pink: #ff4fd8;
  --gold: #ffd166;
  --green: #7cff9b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none; touch-action: none; }
body { min-height: 100svh; background: radial-gradient(circle at 10% 20%, #173069 0, transparent 34%), radial-gradient(circle at 90% 30%, #421053 0, transparent 32%), #03040d; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(#ffffff88 1px, transparent 1px); background-size: 34px 34px; opacity: .12; animation: drift 15s linear infinite; }
@keyframes drift { to { transform: translateX(-34px); } }
button { border: 0; font: inherit; cursor: pointer; user-select: none; }
.app { width: 100vw; min-height: 100svh; display: grid; place-items: center; padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
.game-shell { position: relative; width: min(100vw, calc(100svh * 16 / 9)); height: min(100svh, calc(100vw * 9 / 16)); min-height: 300px; aspect-ratio: 16 / 9; overflow: hidden; background: #020513; border-radius: clamp(0px, 2.2vw, 22px); box-shadow: 0 24px 100px #000d, inset 0 0 0 1px #ffffff18; border: 1px solid #ffffff14; }
.game-shell:fullscreen { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
.game-shell:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; background: #020513; }
.top-hud { position: absolute; z-index: 3; top: calc(7px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.hud-cluster { display: flex; justify-content: flex-end; align-items: flex-start; gap: 6px; min-width: 0; pointer-events: none; }
.brand, .stat, .mini-button { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(7, 16, 37, .72), rgba(5, 9, 24, .50)); backdrop-filter: blur(10px); box-shadow: 0 10px 30px #0007; }
.brand { min-width: 0; padding: 7px 9px; border-radius: 14px; text-transform: uppercase; letter-spacing: .12em; line-height: 1; }
.brand span { display: block; color: var(--cyan); font-size: 9px; font-weight: 900; }
.brand strong { display: block; margin-top: 2px; font-size: 15px; }
.stat { min-width: 0; padding: 6px 8px; border-radius: 13px; width: 82px; }
.stat.compact { width: 58px; }
.stat.power-stat { width: 142px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: end; }
.stat span { display: block; color: var(--muted); font-size: 9px; line-height: 1; }
.stat strong { display: block; margin-top: 3px; font-size: 15px; line-height: 1; overflow: hidden; text-overflow: ellipsis; }
.mini-button { pointer-events: auto; width: 44px; height: 40px; border-radius: 13px; color: var(--text); font-weight: 950; font-size: 18px; }
.power-stat span { grid-column: 1 / -1; }
.power-stat strong { color: var(--green); font-size: 12px; white-space: nowrap; }
.power-stat em { color: var(--gold); font-style: normal; font-weight: 900; font-size: 12px; }
.rotate-hint { display: none; position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 280px; padding: 14px 16px; border-radius: 18px; background: rgba(0,0,0,.7); border: 1px solid var(--line); text-align: center; color: var(--text); font-weight: 800; }
.mobile-controls { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: end; gap: 18px; padding: 0 calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left)); pointer-events: none; }
.touch-hint { align-self: end; margin: 0 0 4px; padding: 7px 10px; border: 1px solid rgba(62, 231, 255, .18); border-radius: 999px; background: rgba(3, 8, 20, .42); color: rgba(239, 248, 255, .62); font-size: 10px; font-weight: 800; text-shadow: 0 2px 8px #000; }
.joystick { pointer-events: auto; z-index: 4; width: clamp(96px, 18vh, 126px); height: clamp(96px, 18vh, 126px); border-radius: 999px; border: 1px solid rgba(62, 231, 255, .28); background: radial-gradient(circle, rgba(62, 231, 255, .08), rgba(7, 14, 31, .44) 58%, rgba(7, 14, 31, .72)); box-shadow: inset 0 0 38px rgba(62, 231, 255, .12), 0 18px 50px #0009; position: absolute; left: calc(76px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom)); opacity: .72; touch-action: none; transition: opacity .12s ease, transform .12s ease, filter .12s ease; }
.joystick.is-floating { opacity: 1; filter: brightness(1.22); transform: translate(-50%, -50%) scale(1.04); }
.joystick::before { content: ""; position: absolute; inset: 16px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .18); }
.stick { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #fff, var(--cyan) 22%, #0e7490 68%); box-shadow: 0 0 30px rgba(62, 231, 255, .8); transform: translate3d(0, 0, 0); }
.action-stack { pointer-events: auto; display: grid; justify-items: center; gap: 6px; }
.fire { width: clamp(92px, 17vh, 120px); height: clamp(92px, 17vh, 120px); border-radius: 999px; color: #fff; font-weight: 1000; letter-spacing: .08em; background: radial-gradient(circle at 35% 25%, #fff1a9, #ff5b7d 38%, #a91dff 100%); border: 2px solid rgba(255,255,255,.32); box-shadow: 0 0 42px rgba(255, 79, 216, .7), 0 20px 60px #000b; touch-action: none; }
.nova { width: clamp(70px, 13vh, 92px); height: clamp(38px, 7vh, 48px); border-radius: 999px; color: #06101f; font-size: 12px; font-weight: 1000; letter-spacing: .12em; background: linear-gradient(135deg, #e8fbff, var(--cyan), var(--green)); border: 1px solid rgba(255,255,255,.36); box-shadow: 0 0 28px rgba(124,255,155,.45); opacity: .58; touch-action: none; }
.nova.is-ready { opacity: 1; animation: pulseNova 1s ease-in-out infinite; }
@keyframes pulseNova { 50% { transform: scale(1.06); box-shadow: 0 0 42px rgba(124,255,155,.85), 0 0 80px rgba(62,231,255,.45); } }
.fire.is-pressed, .mini-button:active, .nova:active { transform: scale(.94); filter: brightness(1.18); }
.action-stack p { margin: 0; color: rgba(239, 248, 255, .68); font-size: 10px; text-shadow: 0 2px 8px #000; }
.overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 38%, rgba(29, 14, 57, .48), rgba(0, 0, 0, .76)); backdrop-filter: blur(5px); transition: opacity .16s ease, visibility .16s ease; }
.overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.panel { width: min(520px, 86%); padding: 20px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .18); background: var(--glass-strong); text-align: center; box-shadow: 0 24px 80px #000d; }
.eyebrow { margin: 0 0 8px; color: var(--cyan); text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 900; }
h1 { margin: 0; font-size: clamp(38px, 8vw, 72px); line-height: .85; text-transform: uppercase; text-shadow: 0 0 28px #3ee7ff88; }
.panel p:not(.eyebrow) { margin: 14px auto 18px; max-width: 460px; color: var(--muted); line-height: 1.45; }
.panel-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#startButton, #startFullscreenButton, #startSettingsButton, #closeSettingsButton { min-width: 150px; padding: 13px 20px; border-radius: 999px; color: #03101a; font-weight: 1000; background: linear-gradient(135deg, var(--cyan), var(--green)); box-shadow: 0 0 34px rgba(62, 231, 255, .58); }
#startFullscreenButton, #startSettingsButton { color: var(--text); background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(62,231,255,.18)); border: 1px solid var(--line); }
.settings-panel { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0, 0, 0, .48); backdrop-filter: blur(5px); transition: opacity .16s ease, visibility .16s ease; }
.settings-panel[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.settings-card { width: min(420px, 82%); padding: 18px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .18); background: var(--glass-strong); box-shadow: 0 24px 80px #000d; }
.settings-card h2 { margin: 0 0 12px; font-size: 26px; }
.setting-row { display: grid; grid-template-columns: 1fr minmax(140px, 190px); gap: 12px; align-items: center; margin: 12px 0; color: var(--text); font-weight: 900; }
.setting-row select { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; color: var(--text); background: rgba(5, 9, 24, .94); font: inherit; font-weight: 900; }
#difficultyHelp { min-height: 40px; margin: 8px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.35; }
#closeSettingsButton { width: 100%; }
@media (orientation: portrait) and (max-width: 760px) {
  .game-shell { width: 100vw; height: calc(100vw * 9 / 16); max-height: 62svh; }
  .rotate-hint { display: block; }
  .top-hud, .mobile-controls { opacity: .45; }
}
@media (max-height: 390px) {
  .brand { padding: 6px 8px; }
  .brand strong { font-size: 13px; }
  .hud-cluster { gap: 4px; }
  .stat { width: 72px; padding: 5px 7px; }
  .stat.compact { width: 50px; }
  .stat.power-stat { width: 124px; }
  .stat strong, .power-stat strong, .power-stat em { font-size: 11px; }
  .mini-button { width: 38px; height: 36px; }
  .joystick { width: 92px; height: 92px; }
  .fire { width: 88px; height: 88px; }
  .nova { width: 72px; height: 38px; font-size: 11px; }
  .panel { padding: 14px; }
}