/* css/game.css
 * Sky Defender 미니 게임 모달 스타일 — Tactical HUD 재설계.
 * 시계 모드 좌측 메뉴 '게임' 아이콘을 통해 열리는 모달 전용.
 *
 * 디자인 언어:
 *   - 밀리터리 택티컬 (Ace Combat/DCS 계열)
 *   - 컬러: 딥 네이비 배경 + 시안(#00d4ff) 액센트 + 앰버(#ffd24a) 하이라이트 + 레드(#ff3860) 위험
 *   - 폰트: Rajdhani (제목/라벨), Chakra Petch (숫자 tabular)
 *   - 모서리 코너 브래킷, 미묘한 스캔라인, 발광 효과, 상태 애니메이션
 *
 * 다른 .modal 공통 스타일은 css/style.css의 .overlay > div / .modal 규칙 위에 !important 로 덮어씀.
 */

/* ────────────────────────── 팔레트 & 폰트 변수 ────────────────────────── */
:root {
  --tf-bg-1: #0e1a2e;
  --tf-bg-2: #04070f;
  --tf-frame: rgba(0, 212, 255, 0.42);
  --tf-frame-soft: rgba(0, 212, 255, 0.18);
  --tf-glow: rgba(0, 180, 255, 0.28);
  --tf-cyan: #58e0ff;
  --tf-cyan-strong: #00d4ff;
  --tf-amber: #ffd24a;
  --tf-amber-strong: #ffb800;
  --tf-red: #ff5471;
  --tf-green: #6effa8;
  --tf-text: #e6edf6;
  --tf-muted: #8ea0bd;
  --tf-display: 'Rajdhani', 'Noto Sans KR', 'Segoe UI', sans-serif;
  --tf-tabular: 'Chakra Petch', 'Rajdhani', 'Consolas', monospace;
}

/* ────────────────────────── 접근성 유틸 ────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ────────────────────────── 모달 프레임 ────────────────────────── */
/* 사이드바(HUD+버튼) + 캔버스 2열 레이아웃 (넓은 화면 기본).
 * 세로 구성: [title-bar] [game-main = sidebar|canvas] [controls-hint]
 *   game-main 이 남는 세로를 모두 차지하고 (flex 1), 그 안에서 sidebar 는 고정 폭,
 *   canvas-wrap 은 flex 로 남는 가로를 채우며 aspect-ratio 3:5 로 세로가 자동 계산.
 * 좁은 화면(<760px) 에서는 .game-main 이 세로 스택으로 폴백.
 *
 * 폭 정책: min(뷰포트기반, 높이기반)
 *   - 뷰포트 기반: clamp(560px, 55vw, 1100px)
 *   - 높이 기반 상한: calc(96dvh * 0.75) — 캔버스 3:5 비율을 세로 여유 안에서 지키도록.
 *     ※ 이 상한 없이 폭만 넓히면 세로가 부족한 노트북 창(예: 1024×640)에서
 *       캔버스가 aspect-ratio 를 못 지키고 옆으로 늘어져 보이는 문제 발생.
 *   결과 예시:
 *     - 1024×640 (노트북 창모드) → min(563, 460) = 460px  — 3:5 유지 ✅
 *     - 1366×768                → min(720, 552) = 552px
 *     - 1920×1080 (최대화)      → min(1056, 778) = 778px — 3:5 유지 ✅
 *     - 2560×1440               → min(1100, 1037) = 1037px
 *   캔버스는 aspect-ratio 3:5 (세로 슈터 정통 비율)로 자동 계산. */
.game-modal {
  width: min(
    clamp(560px, 55vw, 1100px),
    calc(96dvh * 0.75)
  );
  max-width: 96vw;
  max-height: 96dvh;
  padding: 20px 22px 16px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  color: var(--tf-text);
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

/* 사이드바 + 캔버스 2열 레이아웃 컨테이너 */
.game-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* 왼쪽 사이드바: STATS/LIVES/WORLD/ACTIONS 4개 섹션 스택.
 * 폭도 뷰포트에 살짝 비례하도록 clamp — 큰 모니터에서 아이콘/텍스트가 답답하지 않게.
 * 작은 모달(<600px)에서는 140px 로 좁혀 캔버스 여유 확보.
 *
 * 시각적 분리: 모달 배경보다 살짝 더 어두운 톤 + 오른쪽에 시안 발광 경계선을 두어
 *   "콘솔 패널" 로 인식되도록. 미묘한 인셋 그라데이션으로 깊이감 부여. */
.game-sidebar {
  flex: 0 0 clamp(140px, 11vw, 190px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
  padding: 8px 8px 8px 6px;
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(0, 20, 45, 0.28) 0%,
      rgba(0, 8, 20, 0.42) 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(88, 224, 255, 0.06),
    inset 0 1px 0 rgba(88, 224, 255, 0.10);
}
/* 사이드바 우측 발광 경계선 — 캔버스와 시각적 분리 */
.game-sidebar::after {
  content: '';
  position: absolute;
  top: 4%; bottom: 4%;
  right: -6px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(88, 224, 255, 0.40) 20%,
    rgba(88, 224, 255, 0.55) 50%,
    rgba(88, 224, 255, 0.40) 80%,
    transparent 100%);
  box-shadow:
    0 0 6px rgba(0, 180, 255, 0.35),
    0 0 12px rgba(0, 140, 220, 0.20);
  pointer-events: none;
}

/* ─── 사이드바 섹션 그룹 (STATS / LIVES / WORLD / ACTIONS) ─── */
.side-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
/* ACTIONS 섹션은 하단으로 밀림 (버튼은 항상 사이드바 바닥에 정렬) */
.side-section-actions {
  margin-top: auto;
}
/* 섹션 헤더 — "──── LABEL ────" 형태의 얇은 라인 + 소형 라벨 */
.side-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  margin: 2px 0 1px;
  min-width: 0;
}
.side-section-line {
  flex: 1 1 auto;
  height: 1px;
  min-width: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(88, 224, 255, 0.28) 50%,
    transparent 100%);
}
.side-section-label {
  flex-shrink: 0;
  font-family: var(--tf-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tf-muted);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.side-section-label i {
  color: var(--tf-cyan-strong);
  font-size: 8px;
  opacity: 0.85;
}
/* WORLD 섹션 헤더는 앰버 톤 */
.side-section-header-amber .side-section-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 200, 80, 0.35) 50%,
    transparent 100%);
}
.side-section-header-amber .side-section-label {
  color: rgba(255, 200, 80, 0.85);
}
.side-section-header-amber .side-section-label i {
  color: var(--tf-amber-strong);
}
/* LIVES 섹션 헤더 하트 아이콘 — 붉은 톤으로 강조 (LIVES=하트 시각 통일) */
.side-section-lives .side-section-label i {
  color: #ff6b8b;
  filter: drop-shadow(0 0 3px rgba(255, 90, 120, 0.55));
  opacity: 1;
}

.game-modal-tactical {
  background:
    /* 우상단 미묘한 시안 오라 */
    radial-gradient(600px 400px at 100% 0%, rgba(0, 140, 220, 0.10), transparent 60%),
    /* 좌하단 미묘한 앰버 오라 */
    radial-gradient(500px 350px at 0% 100%, rgba(255, 180, 60, 0.06), transparent 65%),
    linear-gradient(180deg, var(--tf-bg-1) 0%, var(--tf-bg-2) 100%) !important;
  border: 1px solid var(--tf-frame-soft);
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 40px 80px rgba(0, 60, 120, 0.12),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(0, 140, 220, 0.10);
}

/* 모달 4모서리 대형 브래킷 (모달 자체 프레임) */
.tframe-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 0 solid var(--tf-cyan-strong);
  pointer-events: none;
  filter: drop-shadow(0 0 4px var(--tf-glow));
  z-index: 2;
}
.tf-tl { top: -1px;    left: -1px;    border-top-width: 2px;    border-left-width: 2px; border-top-left-radius: 6px; }
.tf-tr { top: -1px;    right: -1px;   border-top-width: 2px;    border-right-width: 2px; border-top-right-radius: 6px; }
.tf-bl { bottom: -1px; left: -1px;    border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.tf-br { bottom: -1px; right: -1px;   border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

/* ────────────────────────── 닫기 버튼 ────────────────────────── */
.game-close-tactical {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 84, 113, 0.10);
  border: 1px solid rgba(255, 84, 113, 0.45);
  color: var(--tf-red);
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  z-index: 3;
}
.game-close-tactical:hover {
  background: rgba(255, 84, 113, 0.28);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 84, 113, 0.5);
}
.game-close-tactical:active { transform: scale(0.94); }

/* ────────────────────────── 타이틀 바 / 헤더 바 ──────────────────────────
 * 구성: [브랜드 액센트 + 제목] — [필 라인] — [상태 칩] — (닫기 버튼은 absolute)
 * 좌측: 시안 세로 바 액센트 + h3
 * 중앙: 필 라인 (수평선 + 다이아 마커, 남는 공간 채움)
 * 우측: 상태 칩 그룹 (사운드 ON/OFF, GOD 모드 등)
 * 우상단 close 버튼은 padding-right 40px 로 겹침 회피. */
.game-title-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0 0 10px;
  padding-right: 40px; /* absolute 닫기 버튼 자리 확보 */
  min-width: 0;
}
/* ─── 헤더 좌측: 브랜드 액센트 + 제목 ─── */
.header-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}
.header-brand-bar {
  display: inline-block;
  width: 3px;
  height: 22px;
  background: linear-gradient(180deg, var(--tf-cyan-strong), rgba(0, 180, 255, 0.35));
  box-shadow:
    0 0 6px rgba(0, 200, 255, 0.75),
    0 0 12px rgba(0, 140, 220, 0.45);
  border-radius: 1px;
  flex-shrink: 0;
}
/* ─── 헤더 중앙: 필 라인 (기존 title-mark 재사용, 이제 오른쪽에만 하나) ─── */
.game-title-bar .title-mark {
  flex: 1 1 auto;
  min-width: 20px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tf-frame) 30%,
    var(--tf-frame) 70%,
    transparent 100%);
  position: relative;
}
.game-title-bar .title-mark::before,
.game-title-bar .title-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  background: var(--tf-cyan-strong);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 6px var(--tf-glow);
}
.game-title-bar .title-mark::before { left: 30%; opacity: 0.75; }
.game-title-bar .title-mark::after  { right: 30%; opacity: 0.75; }

/* ─── 헤더 우측: 상태 칩 그룹 ─── */
.header-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
/* 상태 칩 — 얇은 아웃라인 + 아이콘 (라벨은 옵션). 각 칩은 자체 색 팔레트. */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  min-height: 22px;
  font-family: var(--tf-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  line-height: 1;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.status-chip i { font-size: 10px; }
.status-chip .status-chip-label { font-size: 9px; }

/* SFX 칩 — OFF: 회색톤 / ON: 그린 (기존 SOUND 클래스 유지 — SFX 전용으로 재정의) */
.status-chip-sound {
  color: var(--tf-muted);
  background: rgba(140, 160, 190, 0.08);
  border: 1px solid rgba(140, 160, 190, 0.28);
}
.status-chip-sound.is-on {
  color: var(--tf-green);
  background: rgba(30, 180, 100, 0.16);
  border-color: rgba(110, 255, 168, 0.50);
  box-shadow: 0 0 8px rgba(30, 180, 100, 0.25);
}
/* MUSIC 칩 — OFF: 회색톤 / ON: 라일락 톤 (SFX 와 시각적으로 구별) */
.status-chip-music {
  color: var(--tf-muted);
  background: rgba(140, 160, 190, 0.08);
  border: 1px solid rgba(140, 160, 190, 0.28);
}
.status-chip-music.is-on {
  color: #d7bfff;
  background: rgba(140, 100, 220, 0.18);
  border-color: rgba(190, 160, 255, 0.55);
  box-shadow: 0 0 8px rgba(140, 100, 220, 0.30);
}
.status-chip-music.is-on i {
  filter: drop-shadow(0 0 4px rgba(190, 160, 255, 0.55));
}
/* GOD 칩 — 앰버/레드 강렬 (기본 hidden, JS 로 show) */
.status-chip-god {
  color: #fff2c8;
  background: linear-gradient(180deg, rgba(255, 84, 113, 0.32), rgba(180, 40, 60, 0.42));
  border: 1px solid rgba(255, 120, 140, 0.55);
  text-shadow: 0 0 6px rgba(255, 100, 130, 0.7);
  box-shadow:
    0 0 10px rgba(255, 84, 113, 0.35),
    inset 0 0 6px rgba(255, 84, 113, 0.20);
  animation: god-chip-pulse 1.6s ease-in-out infinite;
}
.status-chip-god i {
  color: var(--tf-amber);
  filter: drop-shadow(0 0 3px rgba(255, 200, 80, 0.8));
}
@keyframes god-chip-pulse {
  0%, 100% { box-shadow: 0 0 8px  rgba(255, 84, 113, 0.30), inset 0 0 6px  rgba(255, 84, 113, 0.18); }
  50%      { box-shadow: 0 0 16px rgba(255, 84, 113, 0.60), inset 0 0 10px rgba(255, 84, 113, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .status-chip-god { animation: none; }
}

.game-modal h3 {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--tf-display);
  font-size: clamp(22px, 1.7vw, 28px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e8f4ff;
  text-shadow:
    0 0 10px rgba(88, 224, 255, 0.55),
    0 0 24px rgba(0, 140, 220, 0.25);
  white-space: nowrap;
}

/* ────────────────────────── HUD 슬롯 ────────────────────────── */
/* 레거시 컨테이너 (반응형 폴백에서만 사용). 사이드바 재구조 후 기본 layout 은
 * .side-section 이 담당하므로 넓은 화면에선 display:contents 로 무력화. */
.game-hud {
  width: 100%;
  color: var(--tf-text);
}
.game-hud-tactical {
  display: contents;
}

.hud-slot {
  position: relative;
  padding: 5px 10px 6px;
  background:
    linear-gradient(180deg, rgba(0, 40, 80, 0.35) 0%, rgba(0, 12, 30, 0.55) 100%);
  border: 1px solid var(--tf-frame-soft);
  border-radius: 2px;
  overflow: hidden;
  min-width: 0;
}
/* 슬롯 상단 시안 라인 (미묘한 스캔라인 느낌) */
.hud-slot::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tf-cyan-strong), transparent);
  opacity: 0.55;
}
.hud-slot::after {
  content: '';
  position: absolute;
  right: 4px; top: 4px;
  width: 4px; height: 4px;
  background: var(--tf-cyan);
  opacity: 0.5;
  border-radius: 50%;
  box-shadow: 0 0 4px var(--tf-glow);
}

.hud-slot-label {
  display: block;
  font-family: var(--tf-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tf-muted);
  line-height: 1;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-slot-label i {
  color: var(--tf-cyan-strong);
  font-size: 9px;
  margin-right: 5px;
  opacity: 0.85;
}
.hud-slot-value {
  display: block;
  font-family: var(--tf-tabular);
  font-size: clamp(20px, 1.5vw, 25px);
  font-weight: 700;
  line-height: 1;
  color: var(--tf-cyan);
  text-shadow: 0 0 8px rgba(0, 180, 255, 0.35);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 슬롯별 액센트 색 (BEST 는 앰버, WAVE 도 앰버로 강조) */
.hud-slot-best .hud-slot-value,
.hud-slot-wave .hud-slot-value {
  color: var(--tf-amber);
  text-shadow: 0 0 8px rgba(255, 180, 60, 0.4);
}
.hud-slot-best::before,
.hud-slot-wave::before {
  background: linear-gradient(90deg, transparent, var(--tf-amber-strong), transparent);
}
.hud-slot-best::after,
.hud-slot-wave::after {
  background: var(--tf-amber);
  box-shadow: 0 0 4px rgba(255, 180, 60, 0.45);
}

/* ─── SCORE 강조 (primary 슬롯) ─────────────────────────────
 * SCORE 는 게임 내내 가장 자주 읽는 값 — 시각적 계층상 최상위.
 * 폰트를 크게 하고 발광 강화, 상단 라인도 더 뚜렷하게. */
.hud-slot-primary {
  padding: 6px 10px 8px;
  background:
    linear-gradient(180deg, rgba(0, 60, 120, 0.45) 0%, rgba(0, 16, 40, 0.60) 100%);
  border-color: rgba(88, 224, 255, 0.35);
}
.hud-slot-primary::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tf-cyan-strong), transparent);
  opacity: 0.85;
  filter: blur(0.3px);
}
.hud-slot-primary::after {
  width: 5px; height: 5px;
  opacity: 0.85;
}
.hud-slot-primary .hud-slot-label {
  font-size: 10px;
  margin-bottom: 3px;
}
.hud-slot-primary .hud-slot-value {
  font-size: clamp(28px, 2.3vw, 38px);
  color: #d6f6ff;
  text-shadow:
    0 0 10px rgba(0, 200, 255, 0.55),
    0 0 22px rgba(0, 140, 220, 0.30);
  line-height: 0.95;
}

/* ─── 컴팩트 슬롯 (WAVE + BEST 를 한 줄에 나란히) ─────────── */
.hud-slot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  min-width: 0;
}
.hud-slot-compact {
  padding: 4px 8px 5px;
  min-width: 0;
}
.hud-slot-compact .hud-slot-label {
  font-size: 9px;
  margin-bottom: 2px;
  letter-spacing: 0.14em;
}
.hud-slot-compact .hud-slot-label i {
  font-size: 8px;
  margin-right: 3px;
}
.hud-slot-compact .hud-slot-value {
  font-size: clamp(15px, 1.15vw, 19px);
}

/* 값이 변할 때 짧게 발광 */
.hud-slot-value.tick {
  animation: hud-tick 0.4s ease-out;
}
@keyframes hud-tick {
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(1.15); filter: brightness(1.6); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* 신기록 업데이트 시 앰버 펄스 */
.hud-slot-value.newbest {
  animation: hud-newbest 0.9s ease-out;
}
@keyframes hud-newbest {
  0%   { color: var(--tf-amber); text-shadow: 0 0 4px rgba(255, 180, 60, 0.4); }
  30%  { color: #fff8d0;         text-shadow: 0 0 16px var(--tf-amber-strong), 0 0 32px var(--tf-amber-strong); }
  100% { color: var(--tf-amber); text-shadow: 0 0 8px rgba(255, 180, 60, 0.4); }
}

/* ─── LIVES 슬롯: 아이콘 배열 ─── */
.hud-lives-wrap {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  height: 20px;
}
.hud-lives-icons {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
/* 하트 아이콘 — 생명은 붉은/핑크 톤으로 표현 (헬스 UI 관례).
 *   기본 은은한 코랄 → 잃을 때 붉은 플래시 → 잃은 상태 회색 → 획득 시 그린 팝. */
.hud-life {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  color: #ff6b8b;
  font-size: 13px;
  filter: drop-shadow(0 0 4px rgba(255, 90, 120, 0.55));
  transition:
    color 0.35s ease,
    filter 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* ─── LIVES 카드 (섹션 전용, 더 큰 아이콘 + 중앙 정렬) ─────
 * 사이드바에서 LIVES 는 별도 섹션으로 승격 — 카드 안에 아이콘만 큼직하게. */
.lives-card {
  padding: 8px 8px 9px;
  background:
    linear-gradient(180deg, rgba(0, 40, 80, 0.35) 0%, rgba(0, 12, 30, 0.55) 100%);
  border: 1px solid var(--tf-frame-soft);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lives-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tf-cyan-strong), transparent);
  opacity: 0.55;
}
.lives-card .hud-lives-icons {
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.lives-card .hud-life {
  width: 20px; height: 20px;
  font-size: 17px;
}
.hud-life.lost {
  color: rgba(140, 160, 190, 0.28);
  filter: none;
  opacity: 0.35;
  transform: scale(0.75) rotate(-18deg);
}
/* 방금 잃은 라이프 짧게 빨간 플래시 */
.hud-life.just-lost {
  animation: life-lost-flash 0.55s ease-out;
}
@keyframes life-lost-flash {
  0%   { color: var(--tf-red); transform: scale(1.35); filter: drop-shadow(0 0 12px rgba(255,84,113,0.85)); }
  100% { color: rgba(140, 160, 190, 0.28); transform: scale(0.75) rotate(-18deg); filter: none; }
}
/* 라이프 획득 시 그린 팝 */
.hud-life.just-gain {
  animation: life-gain-pop 0.55s ease-out;
}
@keyframes life-gain-pop {
  0%   { color: var(--tf-green); transform: scale(1.5); filter: drop-shadow(0 0 12px rgba(110,255,168,0.9)); }
  100% { color: #ff6b8b; transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 90, 120, 0.55)); }
}

/* ────────────────────────── 세계 기록 바 (사이드바 내부 세로 스택) ────────────────────────── */
.game-world-bar {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 8px 9px;
  margin-bottom: 0;
  background:
    linear-gradient(180deg,
      rgba(255, 180, 60, 0.08) 0%,
      rgba(255, 180, 60, 0.16) 50%,
      rgba(255, 180, 60, 0.08) 100%);
  border: 1px solid rgba(255, 200, 80, 0.35);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
/* 세계 기록 라벨 라인: 아이콘 + WORLD */
.game-world-bar .game-world-icon {
  order: 1;
}
.game-world-bar .game-world-label {
  order: 2;
}
/* 이름/점수를 아래 한 줄로 정렬 */
.game-world-bar .game-world-sep {
  display: none;   /* 세로 스택에서는 구분자 불필요 */
}
.game-world-bar .game-world-name {
  order: 3;
  margin-top: 2px;
  max-width: 100%;
  text-align: center;
  font-size: 12px;
}
.game-world-bar .game-world-score {
  order: 4;
  font-size: 18px;
  line-height: 1;
}
.game-world-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tf-amber-strong), transparent);
  opacity: 0.7;
}
.game-world-icon {
  color: var(--tf-amber-strong);
  font-size: 13px;
  filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.6));
  animation: world-icon-pulse 3.2s ease-in-out infinite;
}
@keyframes world-icon-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.6)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255, 220, 120, 0.9)); }
}
.game-world-label {
  font-family: var(--tf-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--tf-amber);
}
.game-world-sep {
  color: rgba(255, 200, 80, 0.45);
  font-family: var(--tf-tabular);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.game-world-name {
  font-family: var(--tf-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff2c8;
  letter-spacing: 0.06em;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-world-score {
  font-family: var(--tf-tabular);
  font-size: 16px;
  font-weight: 700;
  color: var(--tf-amber-strong);
  text-shadow: 0 0 8px rgba(255, 180, 60, 0.4);
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────── 캔버스 래퍼 ────────────────────────── */
/* .game-main (flex row) 안에서 남는 가로 공간을 모두 채운다.
 *   aspect-ratio 3:5 로 세로가 자동 계산되며, 모달 max-height 제약에 걸릴 경우
 *   max-height: 100% + min-height: 0 조합으로 flex 가 축소해준다.
 *   (렌더러는 논리 좌표 480×800 을 DPR로 스케일하므로 CSS 표시 크기 변화는
 *    게임 로직/선명도에 영향 없음.) */
.game-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 3 / 5;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #02050b;
}
.game-canvas-tactical {
  box-shadow:
    inset 0 0 0 1px var(--tf-frame-soft),
    0 8px 24px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(0, 140, 220, 0.15);
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: crosshair;
  image-rendering: auto;
}

/* 캔버스 4모서리 브래킷 (내부) — 크고 두꺼운 브래킷 + 라디오 링크 도트.
 * 게임 화면의 "포커스 영역" 을 명확히 프레임 — 프로 세로 슈터의 조준경/HUD 느낌. */
.canvas-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 0 solid var(--tf-cyan-strong);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 4px var(--tf-glow));
  opacity: 0.90;
}
.cc-tl { top: 4px;    left: 4px;    border-top-width: 3px;    border-left-width: 3px; }
.cc-tr { top: 4px;    right: 4px;   border-top-width: 3px;    border-right-width: 3px; }
.cc-bl { bottom: 4px; left: 4px;    border-bottom-width: 3px; border-left-width: 3px; }
.cc-br { bottom: 4px; right: 4px;   border-bottom-width: 3px; border-right-width: 3px; }

/* 각 브래킷 안쪽에 작은 링크 도트 (라디오 신호 인디케이터 스타일) */
.canvas-corner::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  background: var(--tf-cyan-strong);
  border-radius: 50%;
  box-shadow:
    0 0 4px rgba(0, 200, 255, 0.85),
    0 0 8px rgba(0, 140, 220, 0.5);
  animation: cc-dot-pulse 2.4s ease-in-out infinite;
}
.cc-tl::after { top: 4px;    left: 4px; }
.cc-tr::after { top: 4px;    right: 4px; }
.cc-bl::after { bottom: 4px; left: 4px; }
.cc-br::after { bottom: 4px; right: 4px; }
@keyframes cc-dot-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-corner::after { animation: none; opacity: 0.75; }
}

/* ────────────────────────── READY/PAUSE/GAME OVER 오버레이 ────────────────────────── */
.game-overlay-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 20px;
  pointer-events: none;
  z-index: 5;
}

.game-overlay-msg .big {
  font-family: var(--tf-display);
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tf-amber-strong);
  text-shadow:
    0 0 18px rgba(255, 200, 80, 0.55),
    0 0 3px rgba(255, 240, 200, 0.9);
  margin-bottom: 6px;
}

.game-overlay-msg .small {
  font-family: var(--tf-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.9;
  color: #cfe1ff;
}

/* READY: hero 비행체가 보이도록 상하단만 어둡게 + 영화적 오버레이 요소 배치.
 * 구조 (buildReadyOverlayContent 참조):
 *   .ready-mission     — 좌상단 미션 브리핑 패널 (absolute)
 *   .ready-target-lock — 비행체 주위 조준경 브래킷 (absolute, cx=50%, cy=55%)
 *   .big               — READY 텍스트 (flex 상단 자연 배치)
 *   .ready-records     — 개인/세계 기록 (flex 두번째 요소)
 *   .ready-launch-hint — 하단 CTA (margin-top: auto)
 * 각 요소는 --rdelay 커스텀 프로퍼티로 순차 페이드인 (0.15s → 0.75s). */
.game-overlay-msg.ready {
  background: linear-gradient(180deg,
    rgba(0, 5, 15, 0.55) 0%,
    rgba(0, 5, 15, 0.15) 18%,
    rgba(0, 5, 15, 0.00) 32%,
    rgba(0, 5, 15, 0.00) 68%,
    rgba(0, 5, 15, 0.55) 100%);
  justify-content: flex-start;
  align-items: center;
  padding: 44px 22px 24px;
  gap: 12px;
  overflow: hidden;
}

/* 요소별 순차 페이드인 (--rdelay: 0.15s ~ 0.75s) — HTML 인라인 style 로 지정.
 * ※ opacity 전용 애니메이션 (transform 사용 금지):
 *   .ready-target-lock 처럼 translate(-50%, -50%) 로 중앙 정렬이 필요한 요소가
 *   있어 fade-in 이 transform 을 덮으면 중앙에서 벗어난다. opacity 만 다루면
 *   각 요소가 자유롭게 자신의 transform 을 사용할 수 있다. */
.game-overlay-msg.ready > * {
  animation: ready-fade-in 0.55s ease-out var(--rdelay, 0s) both;
}
@keyframes ready-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .game-overlay-msg.ready > * { animation: none; opacity: 1; }
}

/* ─── READY: 대형 텍스트 (상단, 펄스) ─── */
.game-overlay-msg.ready .big {
  font-family: var(--tf-display);
  font-size: clamp(60px, 5vw, 88px);
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #fffbe6;
  text-shadow:
    0 0 24px rgba(255, 200, 80, 0.85),
    0 0 10px rgba(255, 255, 255, 0.7),
    0 2px 0 rgba(0, 0, 0, 0.55);
  margin: 0;
  padding-left: 0.32em; /* letter-spacing 마지막 문자 offset 보정 */
  text-align: center;
}
/* 페이드인 완료 후 펄스 애니메이션 시작 — .big 은 fade-in 애니메이션이 끝난 뒤
 * inline style 로 animation-name 을 오버라이드하기 어렵기 때문에
 * ::after 로 별도 래퍼 없이 opacity/transform 만 사용. 대신 부모에서 pulse 는
 * fade-in 종료 후 CSS animation을 이어 붙이기 어렵기 때문에 filter 로 대체. */
.game-overlay-msg.ready .big {
  filter: brightness(1);
  animation:
    ready-fade-in 0.55s ease-out var(--rdelay, 0s) both,
    ready-pulse 2.4s ease-in-out 1s infinite;
}
@keyframes ready-pulse {
  0%, 100% { text-shadow:
              0 0 24px rgba(255, 200, 80, 0.85),
              0 0 10px rgba(255, 255, 255, 0.7),
              0 2px 0  rgba(0, 0, 0, 0.55); }
  50%      { text-shadow:
              0 0 34px rgba(255, 220, 120, 1),
              0 0 16px rgba(255, 255, 255, 0.9),
              0 2px 0  rgba(0, 0, 0, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .game-overlay-msg.ready .big {
    animation: none;
  }
}

/* ─── 하단 런치 CTA (▶ PRESS S TO LAUNCH) ─── */
.game-overlay-msg.ready .small {
  font-family: var(--tf-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6f0ff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.6);
  margin: 0;
}
.ready-launch-hint {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: linear-gradient(90deg,
    rgba(0, 100, 180, 0.25) 0%,
    rgba(0, 140, 220, 0.32) 50%,
    rgba(0, 100, 180, 0.25) 100%);
  border: 1px solid rgba(88, 224, 255, 0.55);
  border-radius: 3px;
  box-shadow:
    0 0 20px rgba(0, 140, 220, 0.25),
    inset 0 0 12px rgba(0, 180, 255, 0.15);
  color: #eaf7ff !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.8);
}
.ready-launch-hint .cta-arrow {
  color: var(--tf-cyan-strong);
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.85));
  animation: cta-arrow-pulse 1.4s ease-in-out infinite;
}
@keyframes cta-arrow-pulse {
  0%, 100% { transform: translateX(0);    opacity: 0.85; }
  50%      { transform: translateX(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ready-launch-hint .cta-arrow { animation: none; }
}

/* ─── 미션 브리핑 패널 (좌상단) ─── */
.ready-mission {
  position: absolute;
  top: 18px; left: 20px;
  padding: 8px 12px 9px 10px;
  max-width: 46%;
  border-left: 2px solid var(--tf-cyan-strong);
  background: linear-gradient(90deg,
    rgba(0, 60, 120, 0.55) 0%,
    rgba(0, 30, 70, 0.28) 60%,
    rgba(0, 30, 70, 0.00) 100%);
  border-radius: 0 3px 3px 0;
  box-shadow:
    0 0 12px rgba(0, 140, 220, 0.20),
    inset 1px 0 0 rgba(88, 224, 255, 0.35);
  text-align: left;
  pointer-events: none;
}
.ready-mission-tag {
  font-family: var(--tf-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--tf-cyan);
  text-shadow: 0 0 6px rgba(0, 200, 255, 0.55);
  line-height: 1;
  margin-bottom: 3px;
}
.ready-mission-title {
  font-family: var(--tf-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #eaf7ff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
  line-height: 1.1;
  margin-bottom: 4px;
}
.ready-mission-sep {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(88, 224, 255, 0.55) 0%,
    transparent 100%);
  margin: 4px 0 5px;
}
.ready-mission-obj {
  font-family: var(--tf-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tf-amber);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
  line-height: 1.2;
}

/* ─── 타겟 락 (비행체 주위 조준경) ─── */
/* 캔버스 좌표에서 비행체 본체는 cy=55% 에 anchor, 스프라이트 118×133 (24.6% × 16.6%).
 * 그러나 엔진 화염이 아래로 약 5% 더 뻗어나가 실제 aircraft 실루엣은 68.6% 까지 확장.
 *
 * 브래킷 박스 = 화염 포함 실루엣의 26% × 23% (약 125×184 canvas 단위):
 *   - top 57% + height 23% → 스팬 45.5% ~ 68.5%  (본체 46.7%~63.2% + 화염 68.6%)
 *   - 화염이 조준경 안에 있어 실루엣 완전 프레이밍 + SYS: NOMINAL 겹침 해결
 *
 * 위치 정렬:
 *   left/top 을 50%/57% 로 두고 translate(-50%, -50%) 로 자신의 중심을 그 좌표로 이동.
 *   ※ fade-in 애니메이션은 opacity 전용이므로 이 transform 을 덮지 않는다.
 *      target-scan 애니메이션도 반드시 translate(-50%, -50%) 를 포함해야 중앙 유지.
 *   ※ 특이도 확보를 위해 .game-overlay-msg.ready 접두 사용. */
.game-overlay-msg.ready .ready-target-lock {
  position: absolute;
  left: 50%;
  top: 57%;
  /* 사진급 영웅기(assets/hero_aircraft.png, displayH≈210px)를 감싸기 위한 크기.
     세로는 항공기 본체 + 아래로 뻗는 엔진 화염을 함께 프레이밍한다.
     기존 절차적 스프라이트(~150×80px)와도 자연스럽게 호환된다. */
  width: 27%;
  height: 28%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.5));
  animation:
    ready-fade-in 0.55s ease-out var(--rdelay, 0s) both,
    target-scan 3.2s ease-in-out 1s infinite;
}
.target-corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 0 solid var(--tf-cyan-strong);
  opacity: 0.9;
}
.target-corner.tl { top: 0;    left: 0;    border-top-width: 2px;    border-left-width: 2px; }
.target-corner.tr { top: 0;    right: 0;   border-top-width: 2px;    border-right-width: 2px; }
.target-corner.bl { bottom: 0; left: 0;    border-bottom-width: 2px; border-left-width: 2px; }
.target-corner.br { bottom: 0; right: 0;   border-bottom-width: 2px; border-right-width: 2px; }
/* 미묘한 스캔 애니메이션 — 반드시 translate(-50%, -50%) 를 유지해야 중앙 정렬 보존 */
@keyframes target-scan {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%      { transform: translate(-50%, -50%) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .game-overlay-msg.ready .ready-target-lock {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.target-name {
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--tf-tabular);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--tf-cyan);
  text-shadow: 0 0 6px rgba(0, 200, 255, 0.75), 0 1px 0 rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  text-transform: uppercase;
}
.target-status {
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--tf-tabular);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--tf-green);
  text-shadow: 0 0 6px rgba(110, 255, 168, 0.65), 0 1px 0 rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  text-transform: uppercase;
}

/* ─── 개인/세계 기록 (READY 아래 두 박스) ─── */
.ready-records {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin: 4px 0 0;
  max-width: 90%;
  flex-wrap: wrap;
  justify-content: center;
}
.ready-record {
  min-width: 128px;
  padding: 6px 12px 7px;
  background: linear-gradient(180deg,
    rgba(0, 30, 60, 0.55) 0%,
    rgba(0, 10, 25, 0.65) 100%);
  border: 1px solid rgba(88, 224, 255, 0.30);
  border-radius: 2px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ready-record::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tf-cyan-strong), transparent);
  opacity: 0.55;
}
.ready-record-label {
  font-family: var(--tf-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tf-muted);
  margin-bottom: 3px;
}
.ready-record-value {
  font-family: var(--tf-tabular);
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-cyan);
  text-shadow: 0 0 8px rgba(0, 180, 255, 0.4);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ready-record-name {
  display: block;
  margin-top: 3px;
  font-family: var(--tf-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff2c8;
  text-shadow: 0 0 6px rgba(255, 200, 80, 0.3);
  opacity: 0.9;
}
/* WORLD RECORD 박스는 앰버 액센트 */
.ready-record-world {
  border-color: rgba(255, 200, 80, 0.45);
  background: linear-gradient(180deg,
    rgba(60, 40, 10, 0.55) 0%,
    rgba(20, 12, 0, 0.65) 100%);
}
.ready-record-world::before {
  background: linear-gradient(90deg, transparent, var(--tf-amber-strong), transparent);
}
.ready-record-world .ready-record-value {
  color: var(--tf-amber);
  text-shadow: 0 0 8px rgba(255, 180, 60, 0.4);
}

/* 작은 화면에서 READY 오버레이 요소 축소 */
@media (max-width: 760px) {
  .game-overlay-msg.ready { padding: 30px 16px 16px; gap: 8px; }
  .ready-mission { max-width: 42%; padding: 6px 10px 7px 8px; }
  .ready-mission-title { font-size: 12px; }
  .ready-mission-tag, .ready-mission-obj { font-size: 9px; }
  .ready-record { min-width: 100px; padding: 5px 10px 6px; }
  .ready-record-value { font-size: 15px; }
  .ready-record-name { font-size: 9px; }
  .target-name { font-size: 10px; top: -16px; }
  .target-status { font-size: 9px; bottom: -16px; }
  .target-corner { width: 14px; height: 14px; }
  .ready-launch-hint { font-size: 12px !important; padding: 6px 12px 6px 10px; }
}

.game-overlay-msg.pause {
  background: rgba(0, 0, 0, 0.55);
}

/* ═══════════ CINEMATIC GAME OVER ═══════════
 * READY 오버레이와 동일한 미학 (미션 브리핑/카드/뱃지/CTA + 순차 페이드인).
 * 구조 (buildGameOverContent 참조):
 *   .gameover-debrief      — 좌상단 미션 디브리핑 패널 (붉은 액센트, ready-mission 미러링)
 *   .big                   — "GAME OVER" 대형 텍스트 (붉은 발광 + 펄스)
 *   .gameover-stat-card    — 중앙 STAT 카드 (FINAL SCORE 카운트업 + WAVE/BEST)
 *   .gameover-badges       — 조건부 성취 뱃지 (0~3개)
 *   .gameover-actions      — 하단 액션 버튼 (Play Again + Close)
 * 각 요소는 --rdelay 로 순차 페이드인 (0.15s → 1.05s). */
.game-overlay-msg.gameover {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.55) 30%,
    rgba(0, 0, 0, 0.55) 70%,
    rgba(20, 0, 5, 0.75) 100%);
  justify-content: flex-start;
  align-items: center;
  padding: 44px 22px 24px;
  gap: 10px;
  overflow: hidden;
}
/* 각 자식 요소를 READY 와 동일한 fade-in 애니메이션으로 처리 (opacity 전용). */
.game-overlay-msg.gameover > * {
  animation: ready-fade-in 0.55s ease-out var(--rdelay, 0s) both;
}
@media (prefers-reduced-motion: reduce) {
  .game-overlay-msg.gameover > * { animation: none; opacity: 1; }
}

/* ─── GAME OVER 대형 텍스트 (붉은 발광 + 펄스) ───
   ※ "GAME OVER" 는 9자(공백 포함)로 READY(5자) 보다 훨씬 넓다.
      1000px 이하 뷰포트나 150% DPI 스케일에서 한 줄에 들어가지 않아
      두 줄로 wrap 되는 문제가 있어 폰트/자간을 축소하고 white-space: nowrap 을 명시.
      최소 사이즈 38px → 좁은 폭에서도 강제로 한 줄 유지, 자간 0.20em 으로 완화. */
.game-overlay-msg.gameover .big {
  font-family: var(--tf-display);
  font-size: clamp(38px, 3.6vw, 60px);
  font-weight: 700;
  letter-spacing: 0.20em;
  color: #ffe0e6;
  white-space: nowrap;
  text-shadow:
    0 0 24px rgba(255, 84, 113, 0.85),
    0 0 10px rgba(255, 200, 210, 0.7),
    0 2px 0 rgba(0, 0, 0, 0.7);
  margin: 4px 0 0;
  padding-left: 0.20em; /* letter-spacing 마지막 문자 offset 보정 */
  animation:
    ready-fade-in 0.55s ease-out var(--rdelay, 0s) both,
    gameover-pulse 2.6s ease-in-out 0.9s infinite;
}
@keyframes gameover-pulse {
  0%, 100% { text-shadow:
              0 0 24px rgba(255, 84, 113, 0.85),
              0 0 10px rgba(255, 200, 210, 0.7),
              0 2px 0  rgba(0, 0, 0, 0.7); }
  50%      { text-shadow:
              0 0 34px rgba(255, 120, 140, 1),
              0 0 16px rgba(255, 230, 235, 0.9),
              0 2px 0  rgba(0, 0, 0, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .game-overlay-msg.gameover .big { animation: none; }
}

/* ─── 미션 디브리핑 패널 (좌상단, 붉은 액센트) ─── */
.gameover-debrief {
  position: absolute;
  top: 18px; left: 20px;
  padding: 8px 12px 9px 10px;
  max-width: 46%;
  border-left: 2px solid var(--tf-red);
  background: linear-gradient(90deg,
    rgba(120, 30, 40, 0.55) 0%,
    rgba(70, 15, 20, 0.28) 60%,
    rgba(70, 15, 20, 0.00) 100%);
  border-radius: 0 3px 3px 0;
  box-shadow:
    0 0 12px rgba(255, 84, 113, 0.22),
    inset 1px 0 0 rgba(255, 130, 145, 0.4);
  text-align: left;
  pointer-events: none;
}
.gameover-debrief-tag {
  font-family: var(--tf-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: #ff9aa8;
  text-shadow: 0 0 6px rgba(255, 84, 113, 0.55);
  line-height: 1;
  margin-bottom: 3px;
}
.gameover-debrief-title {
  font-family: var(--tf-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffeaef;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
  line-height: 1.1;
  margin-bottom: 4px;
}
.gameover-debrief-sep {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 130, 145, 0.6) 0%,
    transparent 100%);
  margin: 4px 0 5px;
}
.gameover-debrief-result {
  font-family: var(--tf-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ffb8c2;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
  line-height: 1.2;
}

/* ─── STAT CARD (FINAL SCORE + WAVE/BEST) ─── */
.gameover-stat-card {
  margin: 6px 0 0;
  padding: 12px 26px 14px;
  min-width: min(260px, 60%);
  background: linear-gradient(180deg,
    rgba(0, 20, 45, 0.72) 0%,
    rgba(0, 8, 20, 0.82) 100%);
  border: 1px solid rgba(88, 224, 255, 0.35);
  border-radius: 3px;
  box-shadow:
    0 0 24px rgba(0, 140, 220, 0.22),
    inset 0 0 20px rgba(0, 60, 120, 0.25);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gameover-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tf-cyan-strong), transparent);
  opacity: 0.7;
}
.gameover-stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tf-cyan-strong), transparent);
  opacity: 0.4;
}
.gameover-stat-label {
  font-family: var(--tf-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--tf-muted);
  margin-bottom: 6px;
}
.gameover-final-score {
  font-family: var(--tf-tabular);
  font-size: clamp(40px, 3.8vw, 60px);
  font-weight: 700;
  color: var(--tf-cyan);
  text-shadow:
    0 0 20px rgba(0, 200, 255, 0.55),
    0 0 6px rgba(255, 255, 255, 0.35);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.gameover-stat-sep {
  height: 1px;
  margin: 8px auto;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(88, 224, 255, 0.5), transparent);
}
.gameover-stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--tf-display);
}
.gameover-stat-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.gameover-stat-mini-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--tf-muted);
}
.gameover-stat-mini-value {
  font-family: var(--tf-tabular);
  font-size: 16px;
  font-weight: 700;
  color: #eaf7ff;
  text-shadow: 0 0 6px rgba(0, 140, 220, 0.35);
  font-variant-numeric: tabular-nums;
}
.gameover-stat-divider {
  color: var(--tf-muted);
  opacity: 0.6;
  font-size: 14px;
}

/* ─── 성취 뱃지 (조건부, 0~3개) ─── */
.gameover-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 0;
  max-width: 92%;
}
.gameover-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 2px;
  font-family: var(--tf-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.gameover-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  opacity: 0.6;
}
.gameover-badge-icon { font-size: 13px; line-height: 1; }
.gameover-badge-label { line-height: 1; }

/* NEW PERSONAL BEST — 앰버 */
.gameover-badge-newbest {
  color: #fff2c8;
  background: linear-gradient(90deg, rgba(120, 80, 20, 0.55) 0%, rgba(60, 40, 10, 0.55) 100%);
  border-color: rgba(255, 200, 80, 0.55);
  box-shadow: 0 0 12px rgba(255, 180, 60, 0.25);
  text-shadow: 0 0 8px rgba(255, 180, 60, 0.5);
}
.gameover-badge-newbest::before { background: linear-gradient(90deg, transparent, var(--tf-amber-strong), transparent); }

/* WORLD RECORD TIED — 앰버 (조금 더 강렬) */
.gameover-badge-world-tied {
  color: #fff2c8;
  background: linear-gradient(90deg, rgba(140, 90, 20, 0.65) 0%, rgba(80, 50, 10, 0.6) 100%);
  border-color: rgba(255, 200, 80, 0.75);
  box-shadow: 0 0 14px rgba(255, 180, 60, 0.35);
  text-shadow: 0 0 8px rgba(255, 200, 80, 0.65);
}
.gameover-badge-world-tied::before { background: linear-gradient(90deg, transparent, var(--tf-amber-strong), transparent); }

/* NEW WORLD RECORD — 골드 (강렬한 발광 + 펄스) */
.gameover-badge-world-new {
  color: #fff8d0;
  background: linear-gradient(90deg, rgba(180, 120, 20, 0.7) 0%, rgba(120, 70, 10, 0.75) 100%);
  border-color: rgba(255, 220, 100, 0.9);
  box-shadow:
    0 0 20px rgba(255, 200, 80, 0.55),
    inset 0 0 8px rgba(255, 240, 180, 0.25);
  text-shadow: 0 0 10px rgba(255, 220, 120, 0.8);
  animation: gameover-badge-gold-pulse 1.8s ease-in-out infinite;
}
.gameover-badge-world-new::before {
  background: linear-gradient(90deg, transparent, #fff2c8, transparent);
  opacity: 0.85;
}
@keyframes gameover-badge-gold-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 200, 80, 0.55), inset 0 0 8px rgba(255, 240, 180, 0.25); }
  50%      { box-shadow: 0 0 30px rgba(255, 220, 120, 0.85), inset 0 0 12px rgba(255, 245, 200, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .gameover-badge-world-new { animation: none; }
}

/* ACE STATUS — 시안 */
.gameover-badge-ace {
  color: #eaf7ff;
  background: linear-gradient(90deg, rgba(0, 70, 130, 0.55) 0%, rgba(0, 40, 80, 0.55) 100%);
  border-color: rgba(88, 224, 255, 0.55);
  box-shadow: 0 0 12px rgba(0, 140, 220, 0.25);
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.5);
}
.gameover-badge-ace::before { background: linear-gradient(90deg, transparent, var(--tf-cyan-strong), transparent); }

/* ELITE PILOT — 시안 (약간 더 강조) */
.gameover-badge-elite {
  color: #eaf7ff;
  background: linear-gradient(90deg, rgba(0, 100, 170, 0.65) 0%, rgba(0, 60, 110, 0.65) 100%);
  border-color: rgba(88, 224, 255, 0.75);
  box-shadow: 0 0 14px rgba(0, 180, 255, 0.35);
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.65);
}
.gameover-badge-elite::before { background: linear-gradient(90deg, transparent, var(--tf-cyan-strong), transparent); }

/* TRAINING MODE — 회색 (기록 미저장 안내) */
.gameover-badge-training {
  color: #cfd6e0;
  background: linear-gradient(90deg, rgba(70, 70, 80, 0.55) 0%, rgba(40, 40, 50, 0.55) 100%);
  border-color: rgba(180, 180, 200, 0.35);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
  opacity: 0.85;
}
.gameover-badge-training::before { background: linear-gradient(90deg, transparent, rgba(180, 180, 200, 0.55), transparent); }

/* ─── 액션 버튼 (Play Again + Close) ─── */
.gameover-actions {
  margin-top: auto;
  display: flex;
  align-items: stretch;
  gap: 12px;
  pointer-events: none; /* 컨테이너는 통과, 버튼만 활성 */
}
.gameover-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 3px;
  font-family: var(--tf-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  position: relative;
}
.gameover-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(88, 224, 255, 0.55);
}
.gameover-btn-icon {
  font-size: 14px;
  line-height: 1;
}
.gameover-btn-label {
  line-height: 1;
  font-size: 13px;
}
.gameover-btn-key {
  font-family: var(--tf-tabular);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.85;
  line-height: 1;
  margin-left: 4px;
}

/* Primary (Play Again) — 시안 발광 CTA */
.gameover-btn-primary {
  color: #eaf7ff;
  border-color: rgba(88, 224, 255, 0.75);
  background: linear-gradient(90deg,
    rgba(0, 100, 180, 0.45) 0%,
    rgba(0, 140, 220, 0.55) 50%,
    rgba(0, 100, 180, 0.45) 100%);
  box-shadow:
    0 0 20px rgba(0, 140, 220, 0.35),
    inset 0 0 12px rgba(0, 180, 255, 0.2);
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.6), 0 1px 0 rgba(0, 0, 0, 0.8);
  animation: gameover-cta-pulse 2.2s ease-in-out infinite;
}
.gameover-btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(90deg,
    rgba(0, 120, 200, 0.55) 0%,
    rgba(0, 160, 240, 0.65) 50%,
    rgba(0, 120, 200, 0.55) 100%);
  box-shadow:
    0 0 26px rgba(0, 180, 255, 0.5),
    inset 0 0 14px rgba(0, 200, 255, 0.3);
}
.gameover-btn-primary:active {
  transform: translateY(0);
}
@keyframes gameover-cta-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 140, 220, 0.35), inset 0 0 12px rgba(0, 180, 255, 0.2); }
  50%      { box-shadow: 0 0 28px rgba(0, 180, 255, 0.55), inset 0 0 16px rgba(0, 200, 255, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .gameover-btn-primary { animation: none; }
}

/* Secondary (Close) — 회색 */
.gameover-btn-secondary {
  color: #cfd6e0;
  border-color: rgba(180, 180, 200, 0.4);
  background: linear-gradient(180deg,
    rgba(30, 35, 45, 0.6) 0%,
    rgba(15, 18, 25, 0.7) 100%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
.gameover-btn-secondary:hover {
  transform: translateY(-1px);
  color: #eaf7ff;
  border-color: rgba(220, 220, 240, 0.55);
  background: linear-gradient(180deg,
    rgba(45, 50, 60, 0.7) 0%,
    rgba(25, 28, 35, 0.75) 100%);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
}
.gameover-btn-secondary:active {
  transform: translateY(0);
}

/* ─── GAME OVER 오버레이 반응형 (좁은 화면 축소) ─── */
@media (max-width: 760px) {
  .game-overlay-msg.gameover { padding: 30px 16px 16px; gap: 8px; }
  /* "GAME OVER" 9자가 좁은 캔버스에서도 한 줄에 유지되도록 추가 축소 */
  .game-overlay-msg.gameover .big {
    font-size: clamp(30px, 7.2vw, 44px);
    letter-spacing: 0.16em;
    padding-left: 0.16em;
  }
  .gameover-debrief { max-width: 42%; padding: 6px 10px 7px 8px; }
  .gameover-debrief-title { font-size: 12px; }
  .gameover-debrief-tag, .gameover-debrief-result { font-size: 9px; }
  .gameover-stat-card { padding: 10px 18px 12px; min-width: 60%; }
  .gameover-stat-label { font-size: 9px; letter-spacing: 0.24em; }
  .gameover-stat-mini-value { font-size: 14px; }
  .gameover-badge { font-size: 10px; padding: 5px 10px 5px 8px; }
  .gameover-badge-icon { font-size: 12px; }
  .gameover-actions { gap: 8px; }
  .gameover-btn { padding: 8px 14px 8px 12px; }
  .gameover-btn-label { font-size: 12px; }
  .gameover-btn-key { font-size: 9px; padding: 2px 5px; }
}

/* ────────────────────────── 웨이브 시작 배너 ────────────────────────── */
.game-wave-banner {
  position: absolute;
  top: 32%;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 0;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 140, 220, 0.20) 15%,
      rgba(0, 180, 255, 0.35) 50%,
      rgba(0, 140, 220, 0.20) 85%,
      transparent 100%);
  border-top: 1px solid var(--tf-cyan-strong);
  border-bottom: 1px solid var(--tf-cyan-strong);
  box-shadow:
    inset 0 0 30px rgba(0, 180, 255, 0.2),
    0 0 20px rgba(0, 140, 220, 0.3);
  transform: scaleX(0);
  transform-origin: center;
}
.game-wave-banner.show {
  animation: wave-banner 1.6s ease-out forwards;
}
@keyframes wave-banner {
  0%   { opacity: 0; transform: scaleX(0); }
  20%  { opacity: 1; transform: scaleX(1); }
  75%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
.wbn-tag {
  font-family: var(--tf-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5em;
  padding-left: 0.5em; /* letter-spacing 마지막 문자 offset */
  color: var(--tf-cyan);
  text-transform: uppercase;
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(0,0,0,0.85);
}
.wbn-num {
  font-family: var(--tf-tabular);
  font-size: clamp(54px, 4.5vw, 78px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 20px var(--tf-cyan-strong),
    0 0 6px #fff,
    0 2px 0 rgba(0, 0, 0, 0.55);
  font-variant-numeric: tabular-nums;
}
.wbn-sub {
  font-family: var(--tf-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  color: var(--tf-amber);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0,0,0,0.85);
}
@media (prefers-reduced-motion: reduce) {
  .game-wave-banner.show { animation: wave-banner-static 1.2s linear forwards; }
  @keyframes wave-banner-static {
    0% { opacity: 0; transform: scaleX(1); }
    15%, 85% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* ────────────────────────── 파워업 배너 (웨이브 배너와 시차) ──────────────────────────
 * 웨이브 배너 종료(1.6s) 직후 등장하도록 JS 에서 지연 호출(setTimeout).
 * 위치는 웨이브 배너보다 약간 아래(45%) — 겹치지 않게 배치.
 * 시각: 골드 그라데이션 + 코너 브래킷 + 스케일 팝 → 강한 성취감. */
.game-power-banner {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 34px 15px;
  min-width: 40%;
  pointer-events: none;
  opacity: 0;
  z-index: 7;               /* 웨이브 배너(6) 위 */
  background:
    /* 골드→앰버 그라데이션 */
    linear-gradient(135deg,
      rgba(120, 80, 20, 0.55) 0%,
      rgba(180, 120, 30, 0.72) 50%,
      rgba(120, 80, 20, 0.55) 100%);
  border: 1px solid rgba(255, 220, 100, 0.85);
  border-radius: 3px;
  box-shadow:
    0 0 26px rgba(255, 200, 80, 0.50),
    inset 0 0 14px rgba(255, 240, 180, 0.28);
  text-align: center;
}
/* 4개 코너 브래킷 — 시안(대비색)으로 미래적 느낌 강화 */
.pbn-corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 0 solid var(--tf-cyan-strong);
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.65));
}
.pbn-corner.tl { top: -3px;    left: -3px;    border-top-width: 2px;    border-left-width: 2px; }
.pbn-corner.tr { top: -3px;    right: -3px;   border-top-width: 2px;    border-right-width: 2px; }
.pbn-corner.bl { bottom: -3px; left: -3px;    border-bottom-width: 2px; border-left-width: 2px; }
.pbn-corner.br { bottom: -3px; right: -3px;   border-bottom-width: 2px; border-right-width: 2px; }

.pbn-tag {
  font-family: var(--tf-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  color: #fff2c8;
  text-shadow: 0 0 10px rgba(255, 220, 120, 0.85), 0 0 3px #fff;
  text-transform: uppercase;
  line-height: 1;
}
.pbn-text {
  font-family: var(--tf-display);
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 700;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  color: #fffbe6;
  text-shadow:
    0 0 18px rgba(255, 210, 100, 0.9),
    0 0 6px rgba(255, 255, 255, 0.75),
    0 2px 0 rgba(0, 0, 0, 0.65);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

.game-power-banner.show {
  animation: power-banner 2.2s ease-out forwards;
}
/* 팝 등장 → 잠깐 유지 → 페이드 아웃. transform 은 반드시 translate(-50%, -50%) 유지 (중앙 정렬). */
@keyframes power-banner {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.00); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1.00); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
/* 표시 중 배너 자체가 은은한 골드 pulse — 지속 시간(2.2s) 안에서 1회만 순환 */
.game-power-banner.show {
  animation:
    power-banner 2.2s ease-out forwards,
    power-banner-glow 1.1s ease-in-out 0.3s 1;
}
@keyframes power-banner-glow {
  0%, 100% { box-shadow: 0 0 26px rgba(255, 200, 80, 0.50), inset 0 0 14px rgba(255, 240, 180, 0.28); }
  50%      { box-shadow: 0 0 40px rgba(255, 220, 120, 0.80), inset 0 0 20px rgba(255, 245, 200, 0.40); }
}
@media (prefers-reduced-motion: reduce) {
  .game-power-banner.show {
    animation: power-banner-static 1.6s linear forwards;
  }
  @keyframes power-banner-static {
    0%       { opacity: 0; transform: translate(-50%, -50%) scale(1); }
    12%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100%     { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  }
}

/* 좁은 화면에서 배너 축소 */
@media (max-width: 760px) {
  .game-power-banner { padding: 10px 20px 11px; min-width: 60%; }
  .pbn-tag { font-size: 10px; letter-spacing: 0.32em; padding-left: 0.32em; }
  .pbn-text { font-size: 18px; letter-spacing: 0.14em; padding-left: 0.14em; }
  .pbn-corner { width: 12px; height: 12px; }
}

/* ────────────────────────── 배경 씬 전환 토스트 ────────────────────────── */
.game-scene-toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 5px 14px;
  background: rgba(10, 20, 40, 0.72);
  color: #fff6cc;
  font-family: var(--tf-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid rgba(255, 200, 80, 0.5);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 12px rgba(255, 200, 80, 0.20);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.20s ease, transform 0.20s ease;
  z-index: 10;
}
.game-scene-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .game-scene-toast { transition: opacity 0.10s linear; transform: translateX(-50%); }
  .game-scene-toast.show { transform: translateX(-50%); }
}

/* ────────────────────────── 세계 신기록 입력 폼 ────────────────────────── */
.game-record-form {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(15, 30, 55, 0.92), rgba(0, 5, 15, 0.94));
  color: #fff;
  padding: 24px 18px;
  gap: 10px;
  z-index: 8;
}
.game-record-form .game-record-title {
  font-family: var(--tf-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tf-amber);
  text-shadow: 0 0 18px rgba(255, 200, 80, 0.55);
  margin-bottom: 6px;
}
.game-record-form .game-record-label {
  font-family: var(--tf-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe1ff;
  opacity: 0.9;
}
.game-record-form .game-record-input {
  width: min(280px, 80%);
  padding: 10px 12px;
  background: rgba(0, 20, 40, 0.5);
  border: 1px solid rgba(88, 224, 255, 0.4);
  border-radius: 2px;
  color: #fff;
  font-family: var(--tf-display);
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.08em;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.game-record-form .game-record-input:focus {
  border-color: rgba(255, 200, 80, 0.7);
  box-shadow: 0 0 0 2px rgba(255, 200, 80, 0.25);
}
.game-record-form .game-record-buttons {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.game-record-form .modal-btn {
  min-width: 86px;
  padding: 8px 14px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--tf-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(0, 100, 180, 0.4), rgba(0, 40, 90, 0.55));
  border: 1px solid rgba(88, 224, 255, 0.4);
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.game-record-form #gameRecordSubmitBtn {
  background: linear-gradient(180deg, rgba(255, 200, 80, 0.65), rgba(180, 120, 30, 0.75));
  border-color: rgba(255, 220, 120, 0.7);
  color: #1a1206;
}
.game-record-form .modal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(88, 224, 255, 0.3);
}
.game-record-form .game-record-status {
  font-family: var(--tf-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  min-height: 16px;
  color: #cfe1ff;
  opacity: 0.9;
}
.game-record-form .game-record-status.error   { color: #ffb3b3; }
.game-record-form .game-record-status.success { color: #b3ffb8; }

/* ────────────────────────── 조작 힌트 (모달 최하단) ────────────────────────── */
/* .game-main 아래에 위치하여 사이드바/캔버스 양쪽을 아우르는 전폭 힌트로 표시. */
.game-controls-hint {
  flex-shrink: 0;
  margin-top: 8px;
  padding: 5px 10px;
  font-family: var(--tf-display);
  font-size: 11px;
  color: var(--tf-muted);
  letter-spacing: 0.10em;
  text-align: center;
  border-top: 1px dashed rgba(88, 224, 255, 0.14);
  border-bottom: 1px dashed rgba(88, 224, 255, 0.14);
  width: 100%;
  text-transform: uppercase;
}

/* ────────────────────────── 아이콘 버튼 (사이드바 ACTIONS 섹션 내부) ────────────────────────── */
/* 사이드바 하단 정렬은 이제 .side-section-actions { margin-top: auto } 가 담당.
 * flex-direction: column + 전체 폭(width:100%) 사용 → 다국어 라벨 wrap 완전 방지. */
.game-buttons {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.game-icon-btn {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 7px 10px 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(0, 100, 180, 0.32) 0%, rgba(0, 30, 70, 0.55) 100%);
  border: 1px solid rgba(88, 224, 255, 0.35);
  color: var(--tf-text);
  font-family: var(--tf-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
  outline: none;
}
.game-icon-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(0, 140, 220, 0.45) 0%, rgba(0, 50, 110, 0.65) 100%);
  border-color: rgba(88, 224, 255, 0.65);
  box-shadow:
    0 4px 14px rgba(0, 140, 220, 0.3),
    inset 0 0 8px rgba(88, 224, 255, 0.15);
  color: #fff;
}
.game-icon-btn:focus-visible {
  outline: 2px solid var(--tf-cyan-strong);
  outline-offset: 2px;
}
.game-icon-btn:active { transform: translateY(0); }

.game-icon-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--tf-cyan-strong);
  font-size: 12px;
  filter: drop-shadow(0 0 3px var(--tf-glow));
}
.game-icon-btn .btn-label {
  flex: 1 1 auto;
  text-align: left;
}
.game-icon-btn .btn-hotkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--tf-tabular);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(88, 224, 255, 0.9);
  background: rgba(0, 20, 40, 0.65);
  border: 1px solid rgba(88, 224, 255, 0.4);
  border-radius: 2px;
  line-height: 1;
}
.game-icon-btn:hover .btn-hotkey {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 60, 120, 0.65);
}

/* Sound ON 상태 (녹색) */
.game-buttons #gameSoundBtn[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(30, 180, 100, 0.35) 0%, rgba(10, 80, 50, 0.55) 100%);
  border-color: rgba(110, 255, 168, 0.5);
}
.game-buttons #gameSoundBtn[aria-pressed="true"] .btn-icon {
  color: var(--tf-green);
  filter: drop-shadow(0 0 4px rgba(110, 255, 168, 0.55));
}
.game-buttons #gameSoundBtn[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, rgba(50, 210, 120, 0.5) 0%, rgba(20, 100, 60, 0.65) 100%);
  box-shadow:
    0 4px 14px rgba(30, 180, 100, 0.35),
    inset 0 0 8px rgba(110, 255, 168, 0.2);
}
/* MUSIC 버튼 활성 상태 — 라일락(퍼플) 톤으로 SFX 와 구별 */
.game-buttons #gameMusicBtn[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(140, 100, 220, 0.35) 0%, rgba(80, 50, 140, 0.55) 100%);
  border-color: rgba(190, 160, 255, 0.55);
}
.game-buttons #gameMusicBtn[aria-pressed="true"] .btn-icon {
  color: #d7bfff;
  filter: drop-shadow(0 0 4px rgba(190, 160, 255, 0.65));
}
.game-buttons #gameMusicBtn[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, rgba(160, 120, 240, 0.5) 0%, rgba(90, 60, 160, 0.65) 100%);
  box-shadow:
    0 4px 14px rgba(140, 100, 220, 0.35),
    inset 0 0 8px rgba(190, 160, 255, 0.22);
}

/* ────────────────────────── 반응형 ──────────────────────────
 * 사이드바 레이아웃은 넓은 화면(≥760px 뷰포트) 기본.
 * 그 이하에서는 세로 스택으로 폴백 — HUD/LIVES/WORLD/ACTIONS 를 가로로 재배치.
 * 좁은 화면에서 섹션 헤더는 시각적 소음이 되므로 숨김. */
@media (max-width: 760px) {
  .game-modal {
    width: 96vw;
    padding: 16px 14px 12px !important;
  }
  /* 세로 스택으로 폴백 — sidebar 를 title 아래 가로 정렬로 재배치 */
  .game-main {
    flex-direction: column;
    gap: 8px;
  }
  .game-sidebar {
    flex: 0 0 auto;
    width: 100%;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px;
    background: none;
    box-shadow: none;
  }
  .game-sidebar::after { display: none; } /* 세로 구분선 제거 */

  /* 섹션 헤더는 좁은 화면에서 숨김 (라벨은 슬롯 내부 라벨로 이미 표시됨) */
  .side-section-header { display: none; }
  .side-section {
    gap: 4px;
  }
  .side-section-actions { margin-top: 0; }

  /* STATS 섹션: SCORE 도 컴팩트로, WAVE/BEST 는 이미 row — 전체를 3열로 배치 */
  .side-section-stats {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 5px;
    align-items: stretch;
  }
  .hud-slot-primary {
    padding: 4px 8px 5px;
    background:
      linear-gradient(180deg, rgba(0, 40, 80, 0.35) 0%, rgba(0, 12, 30, 0.55) 100%);
  }
  .hud-slot-primary .hud-slot-value { font-size: 22px; }
  .side-section-stats .hud-slot-row {
    display: contents; /* 3열 grid 에 wave/best 를 그대로 편입 */
  }

  /* LIVES: 카드 없이 슬롯처럼 표시 (padding 축소) */
  .lives-card {
    padding: 5px 10px;
  }
  .lives-card .hud-life {
    width: 16px; height: 16px; font-size: 13px;
  }
  /* 세계 기록: 가로 한 줄로 되돌림 */
  .game-world-bar {
    flex-direction: row;
    gap: 8px;
    padding: 5px 10px;
  }
  .game-world-bar .game-world-sep { display: inline; }
  .game-world-bar .game-world-name {
    order: initial;
    margin-top: 0;
    max-width: 120px;
    text-align: left;
  }
  .game-world-bar .game-world-score {
    order: initial;
    font-size: 15px;
  }
  /* 버튼: 가로 나열 (아이콘 위주로 축소) */
  .game-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .game-icon-btn {
    width: auto;
    min-width: 0;
    padding: 7px 10px;
    font-size: 12px;
    gap: 6px;
  }
  .game-icon-btn .btn-hotkey { display: none; }

  /* 헤더: 상태 칩 라벨 숨김 (아이콘만) */
  .status-chip .status-chip-label { display: none; }

  /* 캔버스 크기 축소 (좁은 화면) — 코너 브래킷도 살짝 작게 */
  .game-canvas-wrap {
    flex: 0 1 auto;
    aspect-ratio: 3 / 5;
    max-width: 100%;
  }
  .canvas-corner { width: 16px; height: 16px; }
  .canvas-corner::after { width: 3px; height: 3px; }

  .hud-slot-value { font-size: 17px; }
  .game-controls-hint {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .wbn-num { font-size: 42px; }
}