:root {
  --bg-color: #07090e;
  --surface-color: rgba(18, 24, 38, 0.85);
  --border-glow: rgba(0, 240, 255, 0.25);
  --accent-cyan: #00f0ff;
  --accent-magenta: #ff0077;
  --accent-amber: #ffb700;
  --accent-purple: #9d4edd;
  --text-primary: #f0f4fc;
  --text-secondary: #8e9bb4;
  --grid-line: rgba(255, 255, 255, 0.08);
  --grid-danger: rgba(255, 59, 48, 0.35);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-color);
  color: var(--text-primary);
  /* --lang-font: 언어별 대체 폰트 (js/i18n.js LANGUAGES의 font, 예: 일본어 Hiragino/Noto Sans JP) */
  font-family: 'Outfit', var(--lang-font,) -apple-system, BlinkMacSystemFont, sans-serif;
  touch-action: none;
}

/* ==========================================
   🌐 다국어 글자 길이 보호
   ========================================== */
/* 한 줄 칸(data-fit): 줄바꿈 없이 칸 폭에 맞춤. js/i18n.js fitText가 글자를 최대 62%까지 줄이고,
   그래도 넘치면 … 으로 자름 (칸이 밀리거나 겹치는 일 없음) */
[data-fit] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

/* 두 줄로 내려간 버튼 · 제목은 줄 간격을 좁게 */
[data-fit="wrap"] {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* 여러 줄 설명: 긴 단어(독일어 합성어 등)도 칸 안에서 줄바꿈, 한국어·일본어는 단어 단위 유지 */
.tip-desc, .tip-title, .coach-text, .game-over-desc, .ending-sub, .pause-desc,
.setting-name, .tip-toast, .tip-continue {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

:lang(ko) .coach-text, :lang(ko) .game-over-desc, :lang(ko) .ending-sub, :lang(ko) .pause-desc {
  word-break: keep-all;
}

#app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  background: radial-gradient(circle at center, #0f1524 0%, #07090e 100%);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

/* Header HUD */
.game-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 14px 9px;
  padding-top: max(10px, env(safe-area-inset-top, 10px));
  background: rgba(10, 14, 23, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-glow);
  z-index: 10;
}

.hud-top,
.hud-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hud-buttons {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.hud-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

.hud-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
  line-height: 1.25;
}

/* 도트 타이틀: 원본 98x13px 픽셀아트를 계단 없이 확대 (넓은 화면에서 정확히 3배 = 294x39px) */
.game-title {
  flex: 1;
  min-width: 0;
  line-height: 0;
}

.game-title img {
  display: block;
  width: 100%;
  max-width: 252px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hud-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--accent-amber);
  letter-spacing: 0.5px;
}

.hud-score {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hud-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.hud-stage-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hud-stage-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hud-rings {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  width: 76px;
  flex-shrink: 0;
}

/* RINGS 글자만 줄어들고 0/4 숫자는 항상 다 보이게 */
.hud-rings-label {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
}

.hud-rings-count {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.ring-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.ring-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-cyan), #bd00ff);
  transition: width 0.3s ease;
}

/* 상단 아이콘 버튼 (사운드 / 일시정지): 손가락으로 누르기 쉬운 38px */
.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  font-size: 17px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.icon-btn:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.92);
}

.icon-btn.off {
  opacity: 0.45;
}

.hidden {
  display: none !important;
}

/* Canvas Wrapper */
.canvas-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 🎓 Tutorial Coach Card (상단 중앙) */
.coach {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, calc(100% - 24px));
  background: rgba(14, 20, 32, 0.94);
  border: 1px solid rgba(255, 250, 101, 0.55);
  border-radius: 12px;
  padding: 8px 10px 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  z-index: 8;
}

.coach-text {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.45;
  color: #e6edf8;
}

.coach-text b {
  color: #fffa65;
}

.coach-text small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

.coach-btn {
  flex: none;
  max-width: 40%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

/* 💡 한 줄 안내 (하단 중앙, 터치는 통과) */
.tip-toast {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 8px);
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(14, 20, 32, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #e6edf8;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 6;
}

.tip-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 💡 설명 창 (가운데, 게임 멈춤) */
.tip-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 9, 14, 0.55);
  z-index: 18;
  cursor: pointer;
  touch-action: none;
}

.tip-card {
  width: min(320px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 20px 16px;
  border-radius: 18px;
  background: rgba(14, 20, 32, 0.96);
  border: 1px solid rgba(255, 250, 101, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  text-align: center;
  animation: tipIn 0.25s ease-out;
}

@keyframes tipIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.tip-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  image-rendering: pixelated;
}

.tip-icon[hidden], .tip-emoji[hidden] {
  display: none;
}

.tip-emoji {
  font-size: 44px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.tip-title {
  font-size: 20px;
  font-weight: 800;
  color: #fffa65;
  margin-bottom: 8px;
}

.tip-desc {
  font-size: 15px;
  line-height: 1.55;
  color: #e6edf8;
  margin: 0;
  word-break: keep-all;
}

.tip-continue {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  animation: pulseText 1.4s ease-in-out infinite;
}

@keyframes pulseText {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 일시정지 메뉴 '아이템 설명' 카드 */
.item-guide {
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 250, 101, 0.3);
  text-align: center;
}

.item-guide .tip-icon {
  width: 48px;
  height: 48px;
}

.item-guide .tip-emoji {
  font-size: 34px;
}

.item-guide .tip-title {
  font-size: 16px;
  margin-bottom: 4px;
}

.item-guide .tip-desc {
  font-size: 13px;
}

.guide-count {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
}

/* 튜토리얼 발사 단계: 발사 버튼을 숨 쉬듯 강조 */
.quick-btn.drop-btn.tutorial-pulse {
  animation: tutorialPulse 1.1s ease-in-out infinite;
}

@keyframes tutorialPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 250, 101, 0.3); border-color: var(--accent-cyan); }
  50% { box-shadow: 0 0 26px rgba(255, 250, 101, 0.85); border-color: #fffa65; }
}

/* Stage Banner (스테이지 시작/클리어 알림) */
.stage-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 24px); /* 번역이 길어도 화면 밖으로 나가지 않게 (안쪽 글자는 data-fit으로 축소) */
  transform: translateY(-50%) scale(0.85);
  text-align: center;
  padding: 16px 28px;
  border-radius: 16px;
  background: rgba(10, 14, 23, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  z-index: 15;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.stage-banner.show {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.stage-banner-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-secondary);
}

.stage-banner-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  margin: 4px 0;
  color: var(--banner-color, #fff);
  text-shadow: 0 0 18px var(--banner-color, #fff);
}

.stage-banner-desc {
  font-size: 12px;
  color: #d8e2f3;
}

/* Game Over Overlay */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 14, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  z-index: 20;
  transition: opacity 0.3s ease;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.overlay-card {
  background: var(--surface-color);
  border: 1px solid rgba(255, 0, 119, 0.4);
  padding: 30px 24px;
  border-radius: 20px;
  text-align: center;
  width: 85%;
  max-width: 320px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 30px rgba(255, 0, 119, 0.25);
  margin: auto 0; /* 공간이 남으면 세로 가운데, 화면보다 길면 위에서부터 스크롤 */
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.overlay-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #ff3b30;
  background: rgba(255, 59, 48, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.overlay-badge.victory {
  color: #ffd23f;
  background: rgba(255, 210, 63, 0.2);
  border: 1px solid rgba(255, 210, 63, 0.5);
  box-shadow: 0 0 20px rgba(255, 210, 63, 0.4);
}

.final-score-title {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.final-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  margin: 8px 0 16px;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.game-over-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
}

.neon-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-magenta) 0%, #bd00ff 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(255, 0, 119, 0.4);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.neon-btn:active {
  transform: scale(0.97);
  filter: brightness(1.2);
}

/* Ending Card (5회차 클리어) */
.ending-card {
  border-color: rgba(255, 210, 63, 0.5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 36px rgba(255, 210, 63, 0.3);
}

.ending-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffd23f;
  text-shadow: 0 0 14px rgba(255, 210, 63, 0.5);
  margin-bottom: 6px;
}

.ending-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.endless-btn {
  background: linear-gradient(135deg, #ffd23f 0%, #ff9f1a 100%);
  box-shadow: 0 8px 25px rgba(255, 210, 63, 0.35);
  color: #1a1200;
}

/* 일시정지 메뉴 설정 토글 */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.setting-row:active {
  background: rgba(255, 255, 255, 0.1);
}

.setting-name small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
}

.setting-name {
  flex: 1;
  min-width: 0;
}

.setting-state {
  flex: none;
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.setting-state::after {
  content: attr(data-off);
}

.setting-row[aria-pressed="true"] .setting-state {
  color: #001a1d;
  background: var(--accent-cyan);
}

.setting-row[aria-pressed="true"] .setting-state::after {
  content: attr(data-on);
}

/* 🌐 언어 선택 줄: 기기 기본 선택창(select)을 그대로 써서 언어가 많아져도 목록으로 고름 */
.lang-row {
  gap: 8px;
}

.lang-select {
  flex: none;
  max-width: 55%;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.1);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
}

.lang-select option {
  background: #0f1524;
  color: var(--text-primary);
}

/* 낮은 화면(iPhone SE 등)에서는 일시정지 카드를 촘촘하게 */
@media (max-height: 720px) {
  .pause-card {
    padding: 18px 18px;
  }

  .pause-desc {
    display: none;
  }

  .pause-title {
    margin-bottom: 12px;
  }

  .settings-list {
    margin-bottom: 12px;
  }

  .setting-row {
    min-height: 40px;
    padding: 6px 12px;
  }
}

/* Pause Card & Actions */
.pause-card {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.2);
}

.pause-badge {
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.15);
}

.pause-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.pause-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 22px;
}

.pause-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resume-btn {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, #0099ff 100%);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.35);
  color: #000;
}

.secondary-btn {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.secondary-btn:active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: scale(0.98);
}

/* New Record Badge */
.new-record-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  color: #ffd23f;
  background: rgba(255, 210, 63, 0.18);
  border: 1px solid rgba(255, 210, 63, 0.5);
  padding: 4px 14px;
  border-radius: 14px;
  margin: -6px 0 14px;
  animation: pulseGold 1.5s infinite alternate;
}

@keyframes pulseGold {
  from { transform: scale(1); box-shadow: 0 0 10px rgba(255, 210, 63, 0.2); }
  to { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 210, 63, 0.6); }
}

/* Stats Grid in Game Over */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
  background: rgba(0, 0, 0, 0.28);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 4px;
  border-radius: 8px;
}

.stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-cyan);
}

/* Footer / Action Controls */
.game-footer {
  padding: 10px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  background: rgba(10, 14, 23, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-glow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.control-tip {
  display: flex;
  min-width: 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}

.quick-btn {
  flex: 1;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  touch-action: manipulation;
}

.quick-btn:active {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(0.97);
}

.quick-btn.drop-btn {
  flex: 2;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22) 0%, rgba(0, 240, 255, 0.08) 100%);
  border: 1.5px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 15px;
  letter-spacing: 1px;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.2);
}

.quick-btn.drop-btn:active {
  background: var(--accent-cyan);
  color: #07090e;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.7);
  transform: scale(0.97);
}

/* 🕹️ 가상 회전 스틱 (설정에서 켰을 때만): 원 왼쪽 아래 빈 곳을 누르면 손가락 자리에 나타남 */
.joy-tip,
#app-container.joy-mode .touch-tip {
  display: none;
}

#app-container.joy-mode .joy-tip {
  display: flex;
}

/* 손대기 전: 왼쪽 아래에 희미한 자리 표시 */
.joy-hint {
  display: none;
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 4;
}

.joy-hint::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

#app-container.joy-mode .joy-hint {
  display: block;
}

#app-container.joy-mode .joy-hint.held {
  display: none;
}

.joystick {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background: rgba(10, 14, 23, 0.35);
  border: 1.5px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.15);
  pointer-events: none;
  z-index: 4;
}

.joystick.active {
  display: block;
}

.joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.3);
  border: 1.5px solid var(--accent-cyan);
}

.next-group {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.next-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* NEXT · CARGO 글자 폭이 칸(미리보기 · 보관 칸) 크기를 밀어내지 않도록: 글자는 칸 폭에 맞춰 줄어듦 */
.next-slot > .hud-label {
  width: 0;
  min-width: 100%;
  text-align: center;
}

.next-sub {
  opacity: 0.82;
}

/* 🎁 아이템 보관 칸 (우측 상단, NEXT/THEN과 대칭) */
.item-group {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.item-slot {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 183, 0, 0.6);
  border-radius: 8px;
  background: rgba(255, 183, 0, 0.07);
  box-shadow: 0 0 10px rgba(255, 183, 0, 0.3);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, opacity 0.2s ease;
}

.item-slot:active {
  transform: scale(0.92);
}

.item-slot:focus:not(:focus-visible) {
  outline: none;
}

.item-slot img {
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
  pointer-events: none;
}

.item-slot.empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
  box-shadow: none;
  cursor: default;
}

.item-slot.disabled {
  opacity: 0.4;
  box-shadow: none;
}

/* 🪐 블랙홀 스테이지에서 쓸 수 없는 행성 충돌 (보유는 유지) */
.item-slot {
  position: relative;
}

.item-slot.locked::after {
  content: '🔒';
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 14px;
  line-height: 1;
}

/* 🌀 중력 게이지 (게임판 왼쪽 아래) */
.gravity-gauge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;
  width: 126px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

.gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
}

.gauge-head .hud-label {
  font-size: 9px;
  letter-spacing: 1px;
  flex: 0 1 auto;
  max-width: 45%;
}

/* 보상 글자는 남은 폭을 쓰고, 길면 data-fit으로 축소 */
.gauge-reward {
  flex: 1 1 0;
  text-align: right;
}

.gauge-reward {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.gauge-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(189, 0, 255, 0.35);
  overflow: hidden;
}

.gauge-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6c2bd9, #bd00ff);
  transition: width 0.35s ease;
}

.gravity-gauge.incursion .gauge-fill {
  background: linear-gradient(90deg, #ff8a4c, #ffd29a);
}

.gravity-gauge.incursion .gauge-reward {
  color: #ffd29a;
}

.gravity-gauge.full .gauge-track {
  animation: gauge-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes gauge-pulse {
  from { box-shadow: 0 0 2px rgba(255, 210, 154, 0.3); }
  to { box-shadow: 0 0 10px rgba(255, 210, 154, 0.9); }
}

.next-slot canvas {
  border: 1px solid var(--border-glow);
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.04);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
}

/* ==========================================
   🌌 타이틀 화면 · 오프닝 (js/title.js)
   ========================================== */
#title-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #12122a;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
#title-screen .title-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#title-screen .title-logo {
  position: absolute;
  left: 50%;
  top: calc(15% + env(safe-area-inset-top, 0px));
  transform: translate(-50%, -12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
}
#title-screen .title-logo img {
  width: min(86vw, 504px);
  height: auto;
  image-rendering: pixelated;
}
#title-screen .title-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 3.2vw, 15px);
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #c8d4f0;
  text-shadow: 0 2px 0 #0a0620;
  white-space: nowrap;
}
#title-screen.show-logo .title-logo {
  animation: titleDrop 0.5s steps(6) forwards;
}
@keyframes titleDrop {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
#title-screen .title-start {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(17% + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(18px, 5.8vw, 28px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #ffe14d;
  text-shadow: 0 3px 0 #0a0620, 2px 0 0 #0a0620, -2px 0 0 #0a0620, 0 -2px 0 #0a0620;
  opacity: 0;
  pointer-events: none;
}
/* 두근두근: 게임 조준 도트처럼 느린 박동으로 밝기만 살짝 변화 */
#title-screen.show-start .title-start {
  animation: titleBeat 1.6s ease-in-out infinite;
}
@keyframes titleBeat {
  0%, 100% { opacity: 0.72; }
  12%      { opacity: 1; }
  24%      { opacity: 0.82; }
  36%      { opacity: 1; }
}
#title-screen .title-fade {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}
/* 첫 실행 "소리를 켜고 눌러 주세요" 화면 (웹은 터치 전에 소리를 못 냄) */
#title-screen .title-gate {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px calc(20% + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(12px, 3.6vw, 16px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #e6ecff;
  text-shadow: 0 2px 0 #0a0620;
}
#title-screen.gated .title-gate {
  display: flex;
  animation: titleBeat 1.6s ease-in-out infinite;
}

/* 📤 점수 공유 버튼 (결과 화면) */
#share-btn {
  margin-top: 10px;
}

/* 일시정지 메뉴: 튜토리얼 · 오프닝 다시 보기 버튼을 반씩 나란히 */
.pause-row {
  display: flex;
  gap: 8px;
}
.pause-row > .secondary-btn {
  flex: 1 1 0;
  min-width: 0;
}

.pause-replay-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 4px 0 -4px;
}

/* 📺 광고 보고 부활 버튼 (게임 오버 결과 화면) */
.revive-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 14px 0 12px;
}
.revive-btn.hidden { display: none; }
.revive-btn small {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0;
}
.revive-btn:disabled { opacity: 0.6; }

/* 웹 테스트용 광고 자리 (앱에서는 AdMob 광고가 대신 뜸) */
.ad-test-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #05060f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-test-card {
  text-align: center;
  color: var(--text-secondary, #9aa3c7);
  font-weight: 600;
}
.ad-test-badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #ffd23f;
  color: #ffd23f;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.ad-test-count {
  margin-top: 16px;
  font-size: 40px;
  font-family: 'JetBrains Mono', monospace;
  color: #00f0ff;
}