*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --neon-cyan: #00d4ff;
  --neon-red: #ff2244;
  --neon-gold: #ffd700;
  --bg: #000010;
  --panel-bg: rgba(0,20,40,0.85);
  --panel-border: rgba(0,212,255,0.2);
  --font: 'Orbitron', monospace;
}
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); font-family: var(--font); color: #333; touch-action: none; }
#game-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
#gameCanvas { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }

.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #050520 0%, #000010 100%); z-index: 100; padding: 20px; gap: 14px; }
.screen.active { display: flex; }

.game-thumbnail { border-radius: 12px; border: 2px solid var(--neon-cyan); box-shadow: 0 8px 15px rgba(0,0,0,0.1); max-width: 280px; width: 90%; aspect-ratio: 16/9; object-fit: cover; }
.game-title { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 900; color: var(--neon-cyan); text-shadow: 1px 2px 0px rgba(0,0,0,0.1); text-align: center; letter-spacing: 3px; line-height: 1.1; }
.title-sub { color: #333; font-size: 0.55em; letter-spacing: 6px; text-shadow: 1px 2px 0px rgba(0,0,0,0.1); }
.start-info { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 1px; }
.hs-row { display: flex; align-items: baseline; gap: 10px; }
.hs-label { font-size: 0.65rem; color: rgba(255,255,255,0.4); letter-spacing: 2px; }
.hs-val { font-size: 1.8rem; font-weight: 700; color: var(--neon-gold); }

.btn-3d {
      padding: 15px 40px;
      background: linear-gradient(to bottom, #ff9a44, #fc6076);
      border: none;
      border-radius: 25px;
      font-size: 1.5rem;
      color: white;
      cursor: pointer;
      font-weight: bold;
      box-shadow: 0 6px 0 #e63946, 0 10px 15px rgba(0,0,0,0.2);
      transition: all 0.1s;
      text-transform: uppercase;
    }
.btn-3d:hover { background: rgba(0,212,255,0.15); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.btn-3d:active {
      transform: translateY(6px);
      box-shadow: 0 0 0 #e63946, 0 4px 6px rgba(0,0,0,0.2);
    }
@keyframes pulse-cyan { 0%,100% { box-shadow: 0 8px 15px rgba(0,0,0,0.1); } 50% { box-shadow: 0 8px 15px rgba(0,0,0,0.1); } }
.btn-secondary { padding: 10px 30px; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; font-family: var(--font); font-size: 0.75rem; color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.2s; }
.btn-secondary:hover { border-color: rgba(255,255,255,0.5); color: #333; }

/* HUD */
#hud { position: absolute; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.hud-bar { display: flex; align-items: center; padding: 8px 14px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); border-bottom: 1px solid var(--panel-border); gap: 8px; }
.hud-panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; padding: 5px 12px; display: flex; align-items: center; gap: 8px; }
.hud-center-panel { margin: 0 auto; }
.hl { font-size: 0.5rem; color: rgba(255,255,255,0.4); letter-spacing: 2px; }
.hv { font-size: 1rem; font-weight: 700; color: var(--neon-cyan); }
.powerup-bar { font-size: 0.7rem; color: var(--neon-gold); }

.boss-hp-bar { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); width: min(400px, 90%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.boss-hp-label { font-size: 0.65rem; color: var(--neon-red); letter-spacing: 3px; }
.boss-hp-wrap { width: 100%; height: 10px; background: rgba(255,0,0,0.2); border-radius: 5px; border: 1px solid rgba(255,0,0,0.4); overflow: hidden; }
.boss-hp-fill { height: 100%; background: linear-gradient(90deg, #ff0000, #ff4444); border-radius: 5px; transition: width 0.2s; }

.result-box { background: var(--panel-bg); border: 2px solid var(--panel-border); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 280px; }
.result-title { font-size: 1.8rem; color: var(--neon-cyan); text-shadow: 1px 2px 0px rgba(0,0,0,0.1); }
.result-stat { display: flex; justify-content: space-between; width: 100%; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.result-stat span:last-child { color: var(--neon-gold); font-weight: 700; }

.go-title { font-size: clamp(2rem, 8vw, 3rem); color: var(--neon-red); text-shadow: 1px 2px 0px rgba(0,0,0,0.1); letter-spacing: 4px; }
.go-stats { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 20px 32px; display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.stat-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: rgba(255,255,255,0.6); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.stat-row:last-child { border: none; }
.stat-row span:last-child { color: #333; font-weight: 700; }
.stat-row.best span:last-child { color: var(--neon-gold); }

.victory-title { font-size: clamp(2.5rem, 10vw, 4rem); color: var(--neon-gold); text-shadow: 1px 2px 0px rgba(0,0,0,0.1); }
.victory-sub { font-size: 1rem; color: rgba(255,255,255,0.5); }

/* Mobile */
#mobile-joystick { position: absolute; bottom: 40px; left: 30px; z-index: 60; }
.joystick-area { width: 100px; height: 100px; border-radius: 50%; background: rgba(0,212,255,0.1); border: 2px solid rgba(0,212,255,0.3); display: flex; align-items: center; justify-content: center; position: relative; touch-action: none; }
.joystick-knob { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,212,255,0.6); border: 2px solid var(--neon-cyan); position: absolute; pointer-events: none; }
#fire-btn-area { position: absolute; bottom: 40px; right: 30px; z-index: 60; }
.fire-btn { width: 70px; height: 70px; border-radius: 50%; background: rgba(255,34,68,0.3); border: 3px solid var(--neon-red); font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 15px rgba(0,0,0,0.1); }

.sound-btn { position: fixed; top: 14px; right: 14px; z-index: 200; font-size: 1.1rem; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; }
.hidden { display: none !important; }
/* CG-batch-overlay-fix */
#game-canvas, canvas#game-canvas { touch-action: none; }
#game-ui.screen,
#game-ui.screen.active { pointer-events: none !important; }