/* ============================================================
   BrowserBlast — 案A ネオン・サイバー / Neon Cyber Arcade
   design.md 準拠。外部 CDN / Web フォント非依存。
   ============================================================ */

/* -------- 1. カラー & タイポ トークン -------- */
:root {
  --bg: #05060A;
  --bg-grad: radial-gradient(1200px 700px at 50% -10%, #0D1B3A 0%, #05060A 60%);
  --surface: #0C1426;
  --surface-2: #0A1020;
  --line: #13203A;
  --primary: #00E5FF;   /* cyan   */
  --secondary: #FF2E97; /* magenta*/
  --accent: #FFC400;    /* amber  */
  --success: #22F5A0;
  --danger: #FF3B5C;
  --text: #E6F3FF;
  --text-muted: #7A8AA8;
  --hp-grad: linear-gradient(90deg, #22F5A0, #00E5FF);
  --slider-grad: linear-gradient(90deg, #FF2E97, #00E5FF);

  --font-display: "Segoe UI", "Trebuchet MS", system-ui, -apple-system, sans-serif;
  --font-hud: "Consolas", "SFMono-Regular", ui-monospace, "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
}

/* -------- 3. ルートレイアウト -------- */
#game-root {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

#scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#ui-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* 走査線オーバーレイ (メニューで ON) */
#ui-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 229, 255, .04) 0 1px, transparent 1px 3px);
  z-index: 1;
}

/* -------- 状態による画面表示切替 -------- */
#hud { display: none; }
#screen-start { display: none; }

#game-root[data-state="title"] #screen-start { display: flex; }
#game-root[data-state="playing"] #hud,
#game-root[data-state="paused"] #hud { display: block; }

/* ゲームオーバー / 一時停止 / 設定 オーバーレイ */
#screen-gameover, #screen-pause, #screen-settings { display: none; }
#game-root[data-state="gameover"] #screen-gameover { display: flex; }
#game-root[data-state="paused"] #screen-pause { display: flex; }
#screen-settings:not([hidden]) { display: flex; }

/* -------- 共通コンポーネント -------- */
.clip {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.glow-cyan { box-shadow: 0 0 18px rgba(0, 229, 255, .35), inset 0 0 12px rgba(0, 229, 255, .08); }
.glow-mag  { box-shadow: 0 0 18px rgba(255, 46, 151, .35), inset 0 0 12px rgba(255, 46, 151, .08); }

.btn {
  font-family: var(--font-hud);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 13px 42px;
  cursor: pointer;
  pointer-events: auto;
  color: var(--primary);
  border: 1px solid var(--primary);
  background: linear-gradient(180deg, #00E5FF22, #00E5FF08);
  transition: box-shadow 120ms ease, background 120ms ease, transform 80ms ease;
}
.btn:hover {
  background: linear-gradient(180deg, #00E5FF33, #00E5FF12);
  box-shadow: 0 0 26px rgba(0, 229, 255, .5), inset 0 0 12px rgba(0, 229, 255, .12);
}
.btn:active { transform: translateY(1px); box-shadow: 0 0 10px rgba(0, 229, 255, .25); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #00E5FF, 0 0 14px rgba(0, 229, 255, .6); }
.btn.ghost {
  color: var(--text-muted);
  border-color: var(--line);
  background: transparent;
}
.btn.ghost:hover { color: var(--text); box-shadow: 0 0 12px rgba(122, 138, 168, .3); }

.icon-btn {
  position: absolute;
  top: 14px; left: 18px;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }

/* -------- スタート画面 -------- */
#screen-start {
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(14, 29, 64, .55), transparent),
    var(--bg-grad);
}
.hi-score {
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-hud);
  font-size: 12px;
  letter-spacing: 0.15em;
  display: flex; gap: 8px; align-items: baseline;
}
.start-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.start-tag {
  font-family: var(--font-hud);
  font-size: 12px;
  letter-spacing: 0.5em;
  color: var(--primary);
  text-transform: uppercase;
}
.title-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 12px #00E5FF, 0 0 26px rgba(0, 229, 255, .6);
}
.title-logo b {
  color: var(--secondary);
  text-shadow: 0 0 12px #FF2E97, 0 0 26px rgba(255, 46, 151, .6);
}
.controls {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
  font-family: var(--font-hud);
  font-size: 11px;
  color: var(--text-muted);
}
.controls span b { color: var(--text); }

/* -------- HUD 共通 -------- */
#hud { position: absolute; inset: 0; }
.hud-chip { position: absolute; font-family: var(--font-hud); }
.hud-label {
  display: block;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hud-num {
  font-family: var(--font-hud);
  font-size: 20px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.n-cyan  { color: var(--primary); }
.n-mag   { color: var(--secondary); }
.n-amber { color: var(--accent); text-shadow: 0 0 8px rgba(255, 196, 0, .5); }
.n-ok    { color: var(--success); }
.n-score { color: var(--primary); font-size: 26px; text-shadow: 0 0 8px rgba(0, 229, 255, .5); }

.hud-tl { top: 14px; left: 16px; display: flex; gap: 18px; }
.hud-block { display: flex; flex-direction: column; }
.hud-tc { top: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
.hud-tr { top: 14px; right: 16px; text-align: right; }
.hud-bl { bottom: 16px; left: 16px; width: 210px; }
.hud-br { bottom: 16px; right: 16px; text-align: right; }

/* 体力バー */
.health-track {
  position: relative;
  height: 12px;
  width: 210px;
  margin: 4px 0 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.health-fill {
  position: absolute;
  inset: 1px;
  width: 100%;
  background: var(--hp-grad);
  box-shadow: 0 0 10px rgba(34, 245, 160, .6);
}
.health-num { font-size: 14px; }

/* 弾数 */
.ammo-max { color: var(--text-muted); font-size: 13px; }
.ammo-hint {
  display: block;
  font-family: var(--font-hud);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
}
/* 弾切れ時: リロードヒントを amber で点滅させ発射不可を提示（design.md 4.3） */
.hud-br.empty .ammo-hint { color: var(--accent); animation: ammo-blink 1s steps(2, end) infinite; }
.hud-br.empty .ammo-cur { color: var(--danger); }
@keyframes ammo-blink { 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) {
  .hud-br.empty .ammo-hint { animation: none; }
}

/* クロスヘア */
#crosshair {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  pointer-events: none;
}
.ch-bar { position: absolute; background: var(--primary); box-shadow: 0 0 6px #00E5FF; }
.ch-v { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.ch-h { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
.ch-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--secondary);
  box-shadow: 0 0 8px #FF2E97;
}
/* 命中フィードバック（ヒットマーカー・音に依存しない視覚補完） */
#crosshair.ch-hit { animation: ch-hit 140ms ease-out; }
#crosshair.ch-hit .ch-bar { background: var(--success); box-shadow: 0 0 8px var(--success); }
@keyframes ch-hit {
  0% { transform: translate(-50%, -50%) scale(1.6); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #crosshair.ch-hit { animation: none; }
}

/* ミニレーダー */
.hud-radar {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background: radial-gradient(circle, #06121F, #040A12);
  box-shadow: inset 0 0 14px rgba(0, 229, 255, .3);
  overflow: hidden;
}
.hud-radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 229, 255, .35), transparent 60deg);
  animation: radar-sweep 3s linear infinite;
}
.radar-self {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary);
  box-shadow: 0 0 6px #00E5FF;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }

/* 検証専用 HUD (FPS / 座標) — 状態に依らず常時表示、左下寄り muted */
.debug-hud {
  position: absolute;
  bottom: 16px;
  left: 240px;
  z-index: 3;
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-family: var(--font-hud);
  opacity: 0.75;
  pointer-events: none;
}
.debug-item { display: inline-flex; gap: 6px; align-items: baseline; }
.debug-item .hud-label { display: inline; }
.debug-val {
  font-size: 14px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

@media (max-width: 760px) {
  .debug-hud { left: 16px; bottom: 40px; }
}

/* 狭幅案内 */
#narrow-notice {
  display: none;
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-hud);
  font-size: 11px;
  color: var(--text-muted);
  z-index: 5;
}

/* -------- レスポンシブ -------- */
@media (max-width: 760px) {
  .title-logo { font-size: 40px; }
  .hud-tl { gap: 12px; }
  .hud-radar { width: 72px; height: 72px; }
  #narrow-notice { display: block; }
}

/* -------- レーダー敵ブリップ（Sprint 5/10） -------- */
.radar-blip {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 6px #FF2E97;
  pointer-events: none;
}

/* -------- 体力バーの状態色（Sprint 6） -------- */
.health-fill.warn   { background: linear-gradient(90deg, #FFC400, #FF2E97); box-shadow: 0 0 10px rgba(255,196,0,.6); }
.health-fill.danger { background: linear-gradient(90deg, #FF3B5C, #FF2E97); box-shadow: 0 0 12px rgba(255,59,92,.7); }
.health-num.warn   { color: var(--accent); }
.health-num.danger { color: var(--danger); }

/* -------- 被弾ビネット（Sprint 6） -------- */
#damage-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 160px 40px rgba(255, 59, 92, .75);
}
#damage-vignette.flash { animation: dmg-flash 360ms ease-out; }
@keyframes dmg-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* -------- ゲームオーバー / 一時停止 画面（Sprint 6/8） -------- */
#screen-gameover, #screen-pause {
  position: absolute;
  inset: 0;
  z-index: 6;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 50% 40%, rgba(64, 14, 29, .55), transparent),
    rgba(5, 6, 10, .82);
}
#screen-pause {
  background:
    radial-gradient(900px 500px at 50% 40%, rgba(14, 29, 64, .5), transparent),
    rgba(5, 6, 10, .74);
}
.over-center {
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.over-tag { font-family: var(--font-hud); font-size: 13px; letter-spacing: 0.5em; text-transform: uppercase; }
.over-title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 52px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 12px var(--danger), 0 0 28px rgba(255, 59, 92, .6);
}
.over-title.n-cyan { color: #fff; text-shadow: 0 0 12px #00E5FF, 0 0 28px rgba(0,229,255,.6); }
.over-stats { display: flex; gap: 34px; margin: 6px 0 4px; }
.over-stat { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-hud); }
.over-stat .n-score, .over-stat .n-amber, .over-stat .n-cyan { font-size: 24px; font-variant-numeric: tabular-nums; }
.over-best {
  font-family: var(--font-hud); font-size: 14px; letter-spacing: 0.3em;
  color: var(--accent); text-shadow: 0 0 10px rgba(255, 196, 0, .6);
}

/* -------- 設定オーバーレイ（Sprint 9） -------- */
#screen-settings {
  position: absolute;
  inset: 0;
  z-index: 8;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 10, .7);
}
.settings-panel {
  width: min(420px, 86vw);
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--primary);
  box-shadow: 0 0 26px rgba(0, 229, 255, .25), inset 0 0 14px rgba(0, 229, 255, .06);
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 20px;
}
.settings-title { font-family: var(--font-hud); letter-spacing: 0.4em; font-size: 16px; }
.setting-row { display: flex; flex-direction: column; gap: 8px; }
.setting-row .hud-label b { color: var(--primary); font-size: 12px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--slider-grad);
  outline: none; cursor: pointer; pointer-events: auto;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px #00E5FF; cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border: none; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px #00E5FF; cursor: pointer;
}

/* アクセシビリティ: モーション低減 */
@media (prefers-reduced-motion: reduce) {
  .hud-radar::before { animation: none; }
  .btn { transition: none; }
  #damage-vignette.flash { animation: none; }
}