:root {
  color-scheme: dark;
  --void: #08050d;
  --paper: #f6f2ff;
  --violet: #b56cff;
  --magenta: #ff3f8f;
  --cyan: #55e8ff;
  --line: rgba(181, 108, 255, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--void); }
body { min-height: 100%; margin: 0; overflow-x: hidden; color: var(--paper); background: radial-gradient(circle at 50% 0, #36154d 0, #13091e 35%, var(--void) 72%); font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif; }
button { min-height: 44px; font: inherit; cursor: pointer; touch-action: none; }
button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.fury-shell { width: min(100%, 720px); margin: 0 auto; padding: clamp(18px, 4vw, 40px) clamp(8px, 3vw, 24px) 32px; }
.fury-header { width: min(100%, 550px); margin: 0 auto 15px; }
.serial { margin: 0 0 9px; color: var(--cyan); font: 700 .7rem/1.3 ui-monospace, monospace; letter-spacing: .2em; }
.fury-header h1 { margin: 0; font: 900 clamp(2.4rem, 10vw, 5rem)/.85 system-ui, sans-serif; letter-spacing: -.07em; }
.fury-header h1 em { color: var(--magenta); font-style: normal; }
.fury-header > p:last-child { margin: 10px 0 0; color: #bdb0cc; letter-spacing: .18em; }

.game-console { width: min(100%, 550px); margin: 0 auto; padding: 10px; border: 1px solid var(--line); background: rgba(10, 5, 17, .9); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 45px rgba(181,108,255,.12); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.console-strip { display: flex; justify-content: space-between; gap: 8px; padding: 3px 3px 10px; color: #aa9bb8; font: 700 .58rem/1.3 ui-monospace, monospace; letter-spacing: .08em; }
.console-strip strong, #runtimeStatus { color: var(--cyan); }

#game-wrapper { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid rgba(85,232,255,.28); background: #0a0a12; }
#gameCanvas { display: block; width: 100%; height: 100%; background: #0a0a12; cursor: crosshair; }
#hud { position: absolute; inset: 0 0 auto; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); padding: 9px 6px 26px; pointer-events: none; background: linear-gradient(#08050df0, transparent); }
.hud-item { text-align: center; }
.hud-item small { display: block; color: #a49ab0; font: 700 .55rem/1 ui-monospace, monospace; }
.hud-item strong { display: block; margin-top: 3px; color: var(--paper); font: 800 .8rem/1 ui-monospace, monospace; }
#score { color: var(--cyan); } #lives { color: #ff6a9d; } #bombs { color: #ffd071; }

.overlay { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; padding: 24px; background: rgba(8,5,13,.88); text-align: center; backdrop-filter: blur(5px); }
.hidden { display: none !important; }
.overlay h2 { margin: 4px 0 8px; font-size: clamp(2rem, 8vw, 4rem); letter-spacing: -.05em; }
.overlay p { max-width: 360px; color: #b9aec5; line-height: 1.65; }
.overlay .target-lock { margin: 0; color: var(--magenta); font: 800 .7rem/1 ui-monospace, monospace; letter-spacing: .2em; }
.overlay button { margin-top: 14px; padding: 0 24px; border: 1px solid var(--magenta); color: #fff; background: linear-gradient(110deg, #9b38ff, #e82c79); font-weight: 800; }
#combo-display { position: absolute; inset: 45% 0 auto; z-index: 20; color: #ffd65b; font: 900 2.3rem/1 system-ui, sans-serif; text-align: center; text-shadow: 0 0 28px #ff9c35; pointer-events: none; }

.mobile-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: center; padding: 10px 2px 0; }
.move-controls { display: grid; grid-template: repeat(2, 42px) / repeat(3, 42px); justify-content: center; gap: 4px; }
.move-controls button { border: 1px solid var(--line); color: var(--paper); background: rgba(181,108,255,.09); }
.move-controls button:nth-child(1) { grid-column: 2; }
.move-controls button:nth-child(2) { grid-column: 1; grid-row: 2; }
.move-controls button:nth-child(3) { grid-column: 2; grid-row: 2; }
.move-controls button:nth-child(4) { grid-column: 3; grid-row: 2; }
.combat-controls { display: grid; grid-template-columns: 1.2fr .8fr; gap: 6px; }
.combat-controls button { border: 1px solid var(--magenta); color: #fff; background: rgba(255,63,143,.12); font: 800 .7rem/1 ui-monospace, monospace; }
.combat-controls button:last-child { border-color: #ffd071; color: #ffd071; }
.pause-button { width: 100%; margin-top: 8px; border: 1px solid rgba(255,255,255,.12); color: #b9aec5; background: transparent; }
.fury-notes { width: min(100%, 550px); margin: 15px auto 0; color: #9c90a9; font-size: .82rem; line-height: 1.75; }

@media (max-width: 420px) {
  .game-console { padding: 7px; }
  .console-strip { font-size: .51rem; }
  .hud-item small { font-size: .49rem; }
  .hud-item strong { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }