:root {
  --primary-cyan: #00f0ff;
  --primary-magenta: #ff007f;
  --primary-yellow: #ffea00;
  --primary-red: #ff3333;
  --bg-dark: #05050c;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-color: #020205;
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 1080x1920 logical canvas viewport, scaled dynamically by CSS transforms */
#game-container {
  width: 1080px;
  height: 1920px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background-color: var(--bg-dark);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.2);
  overflow: hidden;
}

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Charge shot presentation layer */
#charge-shot-effects {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}

.death-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #ffffff;
  opacity: 0;
  z-index: 50;
  transition: opacity 0.18s ease-out;
}

.death-flash.flash-on {
  opacity: 1;
  transition: opacity 0.08s ease-in;
}

.death-flash.flash-finale {
  opacity: 0;
  z-index: 55;
  transition: opacity 0.78s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.death-flash.flash-finale.fade-in-active {
  opacity: 1;
}

.death-flash.flash-finale.fade-in-active.fade-out {
  opacity: 0;
  transition: opacity 0.64s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

.death-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 230, 150, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 49;
}

.death-ripple.go {
  animation: deathRipple 0.7s ease-out forwards;
}

@keyframes deathRipple {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(40); opacity: 0;   }
}

.charge-gauge {
  position: absolute;
  width: 131.2px;
  height: 14px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(0, 8, 16, 0.72);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.42);
  opacity: 0;
  overflow: hidden;
}

.charge-gauge.visible {
  opacity: 1;
}

.charge-gauge-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--charge-gauge-start, #00cfff), var(--charge-gauge-end, #9ff8ff));
  box-shadow: 0 0 16px var(--charge-gauge-glow, rgba(0, 207, 255, 0.85));
}

.charge-gauge-fill.full {
  box-shadow: 0 0 20px var(--charge-gauge-glow, rgba(255, 255, 255, 0.95));
}

.charge-gauge.maxed {
  animation: charge-maxed-pulse 0.5s ease-in-out infinite;
}
@keyframes charge-maxed-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 255, 255, 0.7); transform: translate(-50%, -50%) scale(1); }
  50%      { box-shadow: 0 0 28px rgba(180, 220, 255, 1);   transform: translate(-50%, -50%) scale(1.06); }
}

.charge-converge-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: charge-converge-particle 0.48s ease-in forwards;
}

@keyframes charge-converge-particle {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--charge-from-x)), calc(-50% + var(--charge-from-y))) scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* UI Overlay Layer */
.ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 11;
}

.screen.active {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
}

/* 기체 선택 스택 가시성 물리적 최상위 보장 */
#ship-select {
  z-index: 999 !important;
}

/* UI Glassmorphism Panels */
.glass-panel {
  background: rgba(10, 10, 25, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 2px solid rgba(0, 240, 255, 0.2);
  border-radius: 24px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 240, 255, 0.1);
  width: 80%;
  max-width: 800px;
}

/* ============================================================
   PNG 커스터마이징 완전 보장 버튼 (스타트 / 론치 공통)
   ============================================================ */
.png-btn {
  position: absolute;
  width: 500px;
  height: 200px; /* 500x200 픽셀 사이즈 고정 */
  background: transparent; /* 사용자가 PNG로 교체할 수 있도록 기본 배경 투명 */
  border: none; /* 사용자 수정 불가한 테두리 완전 삭제 */
  color: #ffffff; /* PNG 파일 없을 시 노출할 디폴트 흰색 글씨 */
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.15s ease, filter 0.15s ease;
  pointer-events: auto;
}

/* 스타트 버튼 위치: 288, 1238 (기존 대비 100px 내림) */
.start-btn-pos {
  left: 288px;
  top: 1238px;
}

.main-menu-btn {
  position: absolute;
  top: 21px;
  width: 193px;
  height: 71px;
  z-index: 60;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  pointer-events: auto;
  text-shadow: none;
  box-shadow: none;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.guide-menu-btn {
  left: 610px;
}

.ranking-menu-btn {
  left: 833px;
}

.main-menu-btn.has-img {
  background-color: transparent !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.main-menu-btn:hover {
  filter: brightness(1.2);
}

.main-menu-btn:active {
  opacity: 0.6;
}

.guide-popup {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: none;
  pointer-events: none;
}

.guide-popup.active {
  display: block;
  pointer-events: auto;
}

.guide-popup img {
  width: 1080px;
  height: 1920px;
  display: block;
  object-fit: contain;
  cursor: pointer;
}

.gameplay-guide-popup {
  z-index: 150;
}

.game-menu-popup {
  position: absolute;
  inset: 0;
  width: 1080px;
  height: 1920px;
  z-index: 130;
  display: none;
  pointer-events: none;
  background-color: #000000;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.game-menu-popup.active {
  display: block;
  pointer-events: auto;
}

.menu-popup-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 507px;
  height: 140px;
  z-index: 131;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  transition: opacity 0.15s ease, filter 0.15s ease;
  pointer-events: auto;
}

.menu-popup-btn.has-img {
  background-color: transparent !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.menu-popup-btn:hover {
  filter: brightness(1.2);
}

.menu-popup-btn:active {
  opacity: 0.6;
}

.menu-resume-btn {
  top: 679px;
}

.menu-main-btn {
  top: 873px;
}

.menu-guide-btn {
  top: 1066px;
}

/* 기체 선택 LAUNCH 버튼 위치: 288, 1638 (기존 대비 300px 내림) */
.launch-btn-pos {
  left: 288px;
  top: 1638px;
}

#launch-btn {
  animation: launch-btn-pulse 1.0s infinite ease-in-out;
}

@keyframes launch-btn-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 커스텀 PNG 이미지가 로딩 완료되어 인스턴스에 적용되었을 때 */
.png-btn.has-img {
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important; /* 이미지 로딩 성공 시 글자를 감춰 깨끗하게 유지 */
  border: none !important;
  box-shadow: none !important;
}

/* 클릭 시 살짝 반투명해지는 효과 구현 */
.png-btn:active {
  opacity: 0.6 !important;
}

.png-btn:hover {
  filter: brightness(1.2);
}

/* Glowing Title styles */
h1.title {
  font-size: 72px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.4);
  margin-bottom: 80px;
  text-align: center;
  line-height: 1.2;
}

h1.title span {
  color: var(--primary-magenta);
  text-shadow: 0 0 10px rgba(255, 0, 127, 0.8), 0 0 30px rgba(255, 0, 127, 0.4);
}

/* Sci-fi Glowing Buttons */
.btn {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 127, 0.1));
  border: 3px solid var(--primary-cyan);
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 32px;
  font-weight: 700;
  padding: 24px 64px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: opacity 0.15s ease, filter 0.15s ease;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), inset 0 0 15px rgba(0, 240, 255, 0.2);
  margin: 20px 0;
  outline: none;
}

.btn:hover {
  filter: brightness(1.2);
}

.btn:active {
  opacity: 0.6;
}


/* Ship Selection Swipers (디폴트 텍스트 & 이미지 하이브리드 화살표) */
.ship-select-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 400px; /* 120x400 크기 고정 */
  background: transparent; /* 배경 제거 */
  border: none; /* 파란 라인 테두리 제거 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 50;
  pointer-events: auto;
  font-size: 80px;
  font-weight: 900;
  color: #ffffff; /* 디폴트 단순 흰색 화살표 글씨 */
  transition: opacity 0.15s ease, filter 0.15s ease;
  outline: none;
}

/* 이미지 로드 완료 시 배경화면 스왑 */
.ship-select-arrow.has-img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important;
}

.ship-select-arrow:hover {
  filter: brightness(1.2);
}

.ship-select-arrow:active {
  opacity: 0.6;
}

.ship-select-arrow.left {
  left: 30px;
}

.ship-select-arrow.right {
  right: 30px;
}



/* HUD Overlay Layer */
#game-hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 100px;
  background: transparent center top / contain no-repeat;
  border-bottom: none;
  z-index: 20;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 30px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  pointer-events: none;
}

.hud-section {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
}

/* 좌측: LIVES 섹션 */
.hud-lives-section {
  justify-content: flex-start;
  width: 260px;   /* 280 → 260 */
}

.hud-label {
  color: #ffffff;
  font-size: 26px;
  letter-spacing: 2px;
  text-shadow: none;
}

.hud-lives {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 136px;
}

.hud-lives svg,
.hud-life-icon {
  width: 40px;
  height: 40px;
}

.hud-lives svg {
  fill: var(--primary-red);
  filter: drop-shadow(0 0 6px var(--primary-red));
  transition: transform 0.2s ease;
}

.hud-life-icon {
  display: block;
  object-fit: contain;
  flex: 0 0 40px;
  filter: none;
}

/* 중앙: STAGE 섹션 */
.hud-stage {
  justify-content: center;
  width: 200px;   /* 220 → 200 */
  text-align: center;
  margin-right: 20px;   /* 추가: STAGE와 SCORE 사이 간격 */
}

.hud-stage span {
  color: #ffffff;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
}

.hud-stage > span {
  display: inline-block;
  width: 200px;   /* 220 → 200 (내부 span도 함께 줄여 오버플로 방지) */
}

/* 우측: SCORE + 배율 + MENU 버튼 섹션 */
.hud-right {
  justify-content: flex-start;
  gap: 14px;      /* 20 → 14 */
  width: 540px;   /* 560 → 540 (stage margin-right 20px 보정; 260+200+20+540 = 1020) */
}

.hud-score-text {
  display: inline-block;
  width: 300px;   /* 360 → 300 (스코어 박스를 줄여 배율/버튼과 격치지 않게) */
  color: #ffffff;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hud-score-text span {
  display: inline-block;
  width: 150px;   /* 170 → 150 */
  color: #ffffff;
  text-align: right;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
}

/* Boss Health Bar Overlay */
#boss-hp-container {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, width 0.3s ease;
}

#boss-hp-container.visible {
  opacity: 1;
}

#boss-hp-container.twin-mode {
  width: 1000px;
}

#boss-single-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#boss-twin-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;
}

.boss-twin-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.boss-name {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-red);
  text-shadow: 0 0 8px rgba(255, 51, 51, 0.8);
}

.boss-bar-outer {
  width: 100%;
  height: 24px;
  background: rgba(20, 5, 5, 0.8);
  border: 2px solid var(--primary-red);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.3);
}

.boss-bar-inner {
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, var(--primary-red), #ff7733);
  box-shadow: 0 0 10px var(--primary-red);
  transition: width 0.1s ease-out;
}

/* 3스테이지 쌍둥이 보스용 HP 게이지 바 스타일 */
#boss3-hp-container {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  display: none;
  flex-direction: row;
  gap: 20px;
  z-index: 20;
  pointer-events: none;
}

.boss3-hp-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.boss3-name {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ff007f;
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.8);
}

.boss3-bar-bg {
  width: 100%;
  height: 24px;
  background: rgba(20, 20, 20, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.boss3-bar {
  height: 100%;
  transition: width 0.1s ease-out;
}

.boss3-bar.left {
  background: linear-gradient(to right, #00f0ff, #0077ff);
  box-shadow: 0 0 10px #00f0ff;
}

.boss3-bar.right {
  background: linear-gradient(to right, #ff007f, #ff00ff);
  box-shadow: 0 0 10px #ff007f;
}

/* Stage Clear overlay popups */
#stage-clear-overlay {
  background: rgba(18, 18, 20, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 0;
  border-right: 0;
  width: 100%;
  padding: 60px 0;
  text-align: center;
  box-shadow: none;
  font-family: 'Orbitron', sans-serif;
}

.clear-title {
  font-size: 64px;
  font-weight: 700;
  color: #f5f5f7;
  text-shadow: none;
  margin-bottom: 40px;
  letter-spacing: -0.03em;
}

.clear-stats {
  font-size: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
  color: #d1d1d6;
}

.clear-stat-row {
  display: flex;
  justify-content: space-between;
  width: 600px;
}

.clear-stat-val {
  color: #f5f5f7;
}

/* Result / Ending screens */
#continue-screen,
#ranking-screen,
#result-clear-screen,
#result-gameover-screen {
  background-color: #05050c;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#continue-screen {
  background-image: url('../assets/images/bg_continue.png');
  z-index: 40;
}

#result-clear-screen {
  background-image: url('../assets/images/bg_result_clear.png');
}

#result-gameover-screen {
  background-image: url('../assets/images/bg_result_gameover.png');
}

#ranking-screen {
  background-image: url('../assets/images/bg_result.png');
}

#continue-content,
#result-clear-content,
#result-gameover-content {
  width: 980px;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  text-align: center;
  text-shadow: none;
  font-family: 'Orbitron', sans-serif;
}

#continue-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}

.ranking-screen-content {
  position: absolute;
  left: 40px;
  top: 220px;
  width: 1000px;
  max-width: none;
  padding: 42px;
  gap: 28px;
  text-align: center;
  background: rgba(18, 18, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  font-family: 'Orbitron', sans-serif;
}

/* 컨티뉴 화면 랭킹 패널 */
.continue-ranking-panel {
  position: absolute;
  left: 40px;
  top: 220px;
  width: 1000px;
  max-width: none;
  padding: 42px;
  box-sizing: border-box;
}

/* 남은 횟수 숫자 표기 (버튼 이미지 위에 오버레이) */
.continue-left-value {
  position: absolute;
  left: 877px;
  top: 1772px;
  margin: 0;
  font-size: 41px;
  font-weight: 500;
  font-family: 'Orbitron', sans-serif;
  color: #ffffff;
  text-shadow: none;
  pointer-events: none;
  line-height: 1;
}

.continue-actions {
  display: block;
  margin: 0;
}

/* 두 버튼 그룹 중앙 정렬:
   총 너비 = 385 + 28 + 385 = 798px
   좌측 버튼 left = (1080 - 798) / 2 = 141px
   우측 버튼 left = 141 + 385 + 28 = 554px */
#continue-main-btn.continue-main-btn-pos {
  position: absolute;
  left: 141px;
  top: 1748px;
  width: 385px;
  height: 91px;
  margin: 0;
  box-sizing: border-box;
}

#continue-btn.continue-btn-pos {
  position: absolute;
  left: 554px;
  top: 1748px;
  width: 385px;
  height: 91px;
  margin: 0;
  box-sizing: border-box;
}

.result-title {
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: -0.04em;
  color: #f5f5f7;
  text-shadow: none;
}

.result-title.game-over {
  color: #f5f5f7;
  text-shadow: none;
}

.result-title.all-clear {
  color: #f5f5f7;
  text-shadow: none;
}

.result-line {
  width: 100%;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #d1d1d6;
}

.result-line.total {
  margin-top: 6px;
  font-size: 42px;
  font-weight: 700;
  color: #f5f5f7;
  text-shadow: none;
}

.ranking-panel {
  width: 100%;
  padding: 36px 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(18, 18, 20, 0.82);
  box-shadow: none;
}

.ranking-title {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f5f5f7;
  text-shadow: none;
}

.ranking-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 21px;
  align-items: stretch;
}

.ranking-form-label {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #a1a1a6;
  text-align: left;
}

.ranking-form-row {
  display: flex;
  gap: 21px;
  align-items: center;
}

.ranking-name-input {
  flex: 1;
  height: 105px;
  padding: 0 33px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
  font-family: 'Orbitron', sans-serif;
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 0.01em;
  outline: none;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

.ranking-name-input:focus {
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: none;
  background: rgba(255, 255, 255, 0.09);
}

.ranking-submit-btn {
  width: 375px;
  height: 105px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.10);
  color: #f5f5f7;
  font-family: 'Orbitron', sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.ranking-submit-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.ranking-submit-btn:not(:disabled):hover {
  filter: brightness(1.2);
}

.ranking-submit-btn:not(:disabled):active {
  opacity: 0.6;
}

.ranking-status {
  min-height: 45px;
  margin: 9px 0 15px;
  color: #a1a1a6;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ranking-status.error {
  color: #d1d1d6;
}

.ranking-status.success {
  color: #f5f5f7;
}

.ranking-table-scroll {
  width: 100%;
  max-height: 840px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 10px;
  border-radius: 14px;
  box-sizing: border-box;
  pointer-events: auto;
  scrollbar-color: rgba(255, 255, 255, 0.48) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

.ranking-table-scroll::-webkit-scrollbar {
  width: 10px;
}

.ranking-table-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.ranking-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
}

.ranking-panel .ranking-table-scroll {
  max-height: 945px;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  border-radius: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
}

.ranking-table th,
.ranking-table td {
  padding: 18px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.ranking-table th {
  color: #8e8e93;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ranking-table td {
  color: #f5f5f7;
  font-weight: 500;
}

.ranking-table th:nth-child(1),
.ranking-table td:nth-child(1) {
  width: 15%;
}

.ranking-table th:nth-child(2),
.ranking-table td:nth-child(2) {
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-table th:nth-child(3),
.ranking-table td:nth-child(3) {
  width: 30%;
}

.ranking-table th:nth-child(4),
.ranking-table td:nth-child(4) {
  width: 15%;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.ranking-ship-icon {
  height: 46px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.ranking-table tr.my-score td {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  text-shadow: none;
}

.ranking-table tr.ranking-top td:first-child {
  position: relative;
  overflow: visible;
  font-weight: 700;
}

.ranking-table tr.ranking-top-1 td {
  color: #ffd66b;
}

.ranking-table tr.ranking-top-2 td {
  color: #e7c768;
}

.ranking-table tr.ranking-top-3 td {
  color: #d6a84d;
}

.ranking-top-rank-label {
  display: inline-block;
  position: relative;
  z-index: 2;
}

.ranking-top-spark {
  position: absolute;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff0a6;
  box-shadow: 0 0 10px rgba(255, 214, 107, 0.95);
  pointer-events: none;
  opacity: 0;
  animation: ranking-top-sparkle 1.4s ease-in-out infinite;
}

.ranking-top-spark.spark-1 {
  left: -22%;
  top: 2%;
  animation-delay: 0s;
}

.ranking-top-spark.spark-2 {
  left: 104%;
  top: -12%;
  width: 5px;
  height: 5px;
  animation-delay: 0.28s;
}

.ranking-top-spark.spark-3 {
  left: 98%;
  top: 78%;
  width: 6px;
  height: 6px;
  animation-delay: 0.52s;
}

.ranking-top-spark.spark-4 {
  left: -18%;
  top: 70%;
  width: 4px;
  height: 4px;
  animation-delay: 0.78s;
}

@keyframes ranking-top-sparkle {
  0%, 72%, 100% {
    opacity: 0;
    transform: scale(0.35);
  }
  28% {
    opacity: 1;
    transform: scale(1.28);
  }
  44% {
    opacity: 0.52;
    transform: scale(0.82);
  }
}

.ranking-empty-row td {
  color: rgba(255, 255, 255, 0.72);
  font-size: 33px;
}

#ranking-screen .ranking-status {
  margin: 0;
  min-height: 40px;
}

#ranking-screen .ranking-table {
  font-size: 34px;
}

#ranking-screen .ranking-table th,
#ranking-screen .ranking-table td {
  padding: 14px 15px;
}

#ranking-screen .ranking-table th {
  font-size: 28px;
}

.ranking-table-scroll .ranking-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(36, 36, 42, 0.98);
}

.neon-btn {
  width: 500px;
  height: 200px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 127, 0.1));
  border: 3px solid var(--primary-cyan);
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.15s ease, filter 0.15s ease;
  pointer-events: auto;
}

.neon-btn:hover {
  filter: brightness(1.2);
}

.neon-btn:active {
  opacity: 0.6;
}

.neon-btn.has-img {
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#result-clear-screen .neon-btn:not(.has-img),
#result-gameover-screen .neon-btn:not(.has-img),
#ranking-screen .neon-btn:not(.has-img) {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f5f5f7;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: none;
  box-shadow: none;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

#result-clear-screen .neon-btn:not(.has-img):hover,
#result-gameover-screen .neon-btn:not(.has-img):hover,
#ranking-screen .neon-btn:not(.has-img):hover {
  filter: brightness(1.2);
}

#play-again-btn {
  position: absolute;
  left: 293px;
  top: 1748px;
  width: 499px;
  height: 96px;
}

#result-next-btn {
  position: absolute;
  left: 438px;
  top: 1748px;
  width: 209px;
  height: 96px;
}

.ranking-back-btn {
  position: absolute;
  left: 291px;
  top: 1522px;
  width: 499px;
  height: 96px;
  margin-top: 0;
}

#ending-screen {
  background: #000000;
  overflow: hidden;
}

#ending-illust,
#ending-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#ending-video {
  display: none;
  background: #000000;
}

#ending-skip-btn {
  position: absolute;
  top: 80px;
  left: 845px;
  width: 178px;
  height: 96px;
  display: none;
}

#ending-playagain-btn {
  position: absolute;
  top: 1151px;
  left: 291px;
  width: 499px;
  height: 96px;
  transform: none;
  display: none;
}

#ending-skip-btn.has-img,
#ending-playagain-btn.has-img {
  background-size: 100% 100%;
}

/* Warning alert animations */
#warning-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 990; /* 5에서 990으로 인상하여 HUD 및 스크린 위 가시성 확보 */
  background: rgba(255, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#warning-overlay.active {
  opacity: 1 !important;
  animation: alert-flash 0.5s infinite alternate !important;
}

.warning-text {
  font-size: 80px;
  font-weight: 900;
  color: var(--primary-red);
  text-shadow: 0 0 20px var(--primary-red);
  letter-spacing: 8px;
}

.warning-subtext {
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 4px;
  margin-top: 20px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

@keyframes alert-flash {
  from { opacity: 0.1; }
  to { opacity: 0.8; }
}

/* Cinematic Wide Borders */
.cinematic-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 160px;
  background: #000000;
  z-index: 15;
  transition: transform 0.5s ease-out;
}

.cinematic-bar.top {
  top: 0;
  transform: translateY(-100%);
}

.cinematic-bar.bottom {
  bottom: 0;
  transform: translateY(100%);
}

.cinematic-active .cinematic-bar.top {
  transform: translateY(0);
}

.cinematic-active .cinematic-bar.bottom {
  transform: translateY(0);
}

/* HUD Back to Main Menu Button */
.hud-back-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.92);
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 700;
  padding: 8px 18px;
  cursor: pointer;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: opacity 0.15s ease, filter 0.15s ease;
  box-shadow: none;
  outline: none;
  min-width: 96px;
  pointer-events: auto; /* Allow clicking through #game-hud pointer-events: none */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-indent: 1.5px;   /* letter-spacing 1.5px의 후행 여백 보정 → 텍스트 좌우 중앙 */
  margin-left: auto;   /* 추가: 버튼을 우측 끝으로 */
}

.hud-back-btn:hover {
  filter: brightness(1.2);
}

.hud-back-btn:active {
  opacity: 0.6;
}

.debug-toggle-btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 1001;
  width: 180px;
  height: 56px;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  box-shadow: none;
  outline: none;
}

.debug-toggle-btn.enabled {
  background: transparent;
  color: transparent;
  box-shadow: none;
}

/* ============================================================
   스테이지 시작 인트로 이미지 오버레이 (풀스크린 토스트)
   ============================================================ */
#stage-intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}

#stage-intro-overlay.visible {
  animation: stage-intro-toast 7s ease forwards;
}

#stage-intro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes stage-intro-toast {
  0%      { opacity: 0; }
  7.14%   { opacity: 1; }
  92.86%  { opacity: 1; }
  100%    { opacity: 0; }
}

/* ============================================================
   배경 전환 페이드용 블랙 오버레이
   ============================================================ */
#bg-fade-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000000 !important;
  z-index: 999999 !important; /* 모든 요소보다 위에 오도록 극대화 */
  pointer-events: none !important;
  opacity: 0;
  display: block !important;
  visibility: visible !important;
}

/* ============================================================
   LAUNCH 전용 워프 전환 오버레이
   ============================================================ */
#warp-transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 1000000;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  display: block;
  visibility: visible;
}

.warp-transition-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  will-change: transform;
}

.warp-transition-panel.warp-top {
  top: 0;
  transform: translateY(-100%);
}

.warp-transition-panel.warp-bottom {
  bottom: 0;
  transform: translateY(100%);
}

.warp-transition-spark {
  position: absolute;
  top: 50%;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(var(--spark-rotate, 0rad)) scale(1);
  animation: warp-spark-burst 180ms ease-out forwards;
  will-change: transform, opacity;
}

@keyframes warp-spark-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--spark-rotate, 0rad)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--spark-x, 0px)),
      calc(-50% + var(--spark-y, 0px))
    ) rotate(var(--spark-rotate, 0rad)) scale(0.12);
  }
}

/* 그레이즈 배율 HUD 슬롯 */
.hud-multiplier {
  display: inline-block;
  min-width: 72px;      /* ×2.50 둘째자리 수용 */
  text-align: center;
  font-family: monospace;
  font-weight: bold;
  font-size: 26px;      /* 20 → 26px */
  align-self: center;   /* 세로 중앙 정렬 */
  margin-left: 3px;     /* 좌측 요소에서 3px 추가 이격 */
  margin-top: 4px;      /* 폰트 차이로 인해 떠보이는 시각적 베이스라인 교정 */
  color: #ffffff;       /* 기본 흰색 (1.0). 색 변화는 JS가 제어 */
}