/* ── Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  overflow: hidden;
  background: #0a0a0f;
  font-family: 'Courier New', Courier, monospace;
  color: #fff;
  user-select: none;
}

#game-canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}

/* ── 모바일 조작 ─────────────────────────────────────────── */
#mobile-controls {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

#stick-base {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#stick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 2px solid rgba(255,255,255,0.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#mobile-jump {
  position: absolute;
  bottom: 50px;
  right: 36px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,102,0,0.75);
  background: rgba(255,102,0,0.18);
  color: #ff8833;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: bold;
  cursor: pointer;
  pointer-events: all;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 12px rgba(255,80,0,0.25), inset 0 0 8px rgba(255,80,0,0.1);
  transition: background 0.08s, box-shadow 0.08s;
}

#mobile-jump:active {
  background: rgba(255,102,0,0.5);
  box-shadow: 0 0 18px rgba(255,100,0,0.55), inset 0 0 12px rgba(255,100,0,0.25);
}

/* 터치 기기에서 포인터 잠금 힌트 숨김 */
@media (hover: none) and (pointer: coarse) {
  #pointer-lock-hint { display: none !important; }
  #controls-hint .hint-key { display: none; }
}

.hidden { display: none !important; }

/* ── HUD ───────────────────────────────────────────── */
#hud {
  display: none;            /* Game.js에서 'playing' 상태일 때 보임 */
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* 공통 패널 */
.panel-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ff6600;
  margin-bottom: 4px;
}

/* 좌상단: 스테이지 패널 */
#stage-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,102,0,0.4);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 210px;
}

#stage-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ff6600;
  margin-bottom: 3px;
}

#stage-name {
  font-size: 20px;
  font-weight: bold;
  color: #ffcc00;
  margin-bottom: 5px;
}

#stage-desc {
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
}

/* 우상단: 질량 패널 */
#mass-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,102,0,0.4);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 190px;
  text-align: right;
}

#mass-value {
  font-size: 32px;
  font-weight: bold;
  color: #00ff88;
  line-height: 1;
  margin-bottom: 8px;
}

#mass-bar-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

#mass-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00ff88, #00ccff);
  border-radius: 3px;
  transition: width 0.4s ease;
}

#next-target {
  font-size: 10px;
  color: #777;
}

/* 우하단: 효과 패널 */
#minimap-wrap {
  position: absolute;
  top: 130px;
  right: 64px;   /* 오른쪽의 ?·⚙ 버튼(right 20 + 34px)을 가리지 않게 */
  z-index: 10;
  text-align: center;
}
.minimap-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(100, 180, 255, 0.65);
  margin-bottom: 4px;
  font-family: 'Courier New', monospace;
  text-align: center;
  white-space: nowrap;
}
#minimap {
  display: block;
  border-radius: 50%;
  border: 2px solid rgba(50, 120, 200, 0.55);
  box-shadow: 0 0 12px rgba(30, 80, 200, 0.35);
}

#effects-panel {
  position: absolute;
  bottom: 60px;
  right: 20px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,102,0,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 170px;
  text-align: right;
}

#effects-list {
  font-size: 11px;
  color: #ccc;
  line-height: 1.8;
  min-height: 16px;
}

.effect-item { color: #ffdd55; }

/* 좌하단: HP 패널 */
#hp-panel {
  position: absolute;
  bottom: 60px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,60,60,0.4);
  border-radius: 8px;
  padding: 8px 14px;
}

#hp-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ff4444;
  min-width: 16px;
}

#hp-bar-wrap {
  width: 120px;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

#hp-bar {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff2222, #ff6666);
  transition: width 0.15s ease, background 0.3s ease;
}

#hp-value {
  font-size: 13px;
  font-weight: bold;
  color: #ff6666;
  min-width: 28px;
  text-align: right;
}

/* 좌하단: 조작 힌트 */
#controls-hint {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── 상단 중앙: 타이머 ───────────────────────────────── */
#timer-wrap {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,102,0,0.4);
  border-radius: 8px;
  padding: 10px 22px;
  text-align: center;
  min-width: 110px;
  pointer-events: none;
}

#timer-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ff6600;
  margin-bottom: 2px;
}

#stage-timer {
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  line-height: 1;
}

#stage-timer.timer-warning {
  color: #ff3333;
  animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── 흡수 진행바 ────────────────────────────────────── */
#absorption-wrap {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,102,0,0.5);
  border-radius: 10px;
  padding: 12px 24px;
  text-align: center;
  z-index: 20;
  min-width: 260px;
}

#absorption-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: #ff6600;
  margin-bottom: 8px;
}

#absorption-bar-outer {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

#absorption-bar-inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff6600, #ffcc00);
  border-radius: 4px;
  transition: width 0.1s linear;
}

#absorption-target-name {
  font-size: 12px;
  color: #ffcc00;
}

/* ── 스테이지 전환 연출 ──────────────────────────────── */
#stage-transition {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  z-index: 50;
  pointer-events: none;
  transition: background 0.4s ease;
}

#stage-transition.active {
  background: rgba(0,0,0,0.7);
}

#transition-inner {
  text-align: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#stage-transition.active #transition-inner {
  opacity: 1;
  transform: scale(1);
}

#transition-stage-label {
  font-size: 12px;
  letter-spacing: 5px;
  color: #ff6600;
  margin-bottom: 8px;
}

#transition-stage-name {
  font-size: 42px;
  font-weight: bold;
  color: #ffcc00;
  margin-bottom: 10px;
  text-shadow: 0 0 30px rgba(255,204,0,0.6);
}

#transition-stage-desc {
  font-size: 15px;
  color: #ccc;
}

/* ── 아이템 알림 ─────────────────────────────────────── */
#item-notify {
  position: fixed;
  top: 130px;
  right: -320px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(255,221,85,0.5);
  border-radius: 10px;
  padding: 12px 18px;
  z-index: 30;
  min-width: 260px;
  transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#item-notify.slide-in { right: 20px; }

#item-notify-icon {
  font-size: 28px;
  line-height: 1;
}

#item-notify-name {
  font-size: 13px;
  font-weight: bold;
  color: #ffdd55;
  margin-bottom: 3px;
}

#item-notify-desc {
  font-size: 11px;
  color: #aaa;
}

/* ── 잠금 안내 ───────────────────────────────────────── */
#lock-notify {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(80,0,0,0.85);
  border: 1px solid rgba(255,80,80,0.5);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 12px;
  color: #ff8888;
  z-index: 25;
  letter-spacing: 1px;
  animation: fadeInOut 2.5s ease forwards;
}

@keyframes fadeInOut {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 화면 플래시 ─────────────────────────────────────── */
#screen-flash {
  position: fixed;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
}

#screen-flash.flash-anim {
  animation: screenFlash 0.4s ease-out forwards;
}

@keyframes screenFlash {
  0%   { opacity: 0.55; }
  100% { opacity: 0; }
}

#damage-flash {
  position: fixed;
  inset: 0;
  background: #ff0000;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
}

#damage-flash.active {
  animation: damageFlash 0.2s ease-out forwards;
}

@keyframes damageFlash {
  0%   { opacity: 0.28; }
  100% { opacity: 0; }
}

/* ── 게임 오버 스크린 ────────────────────────────────── */
#gameover-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a0000 0%, #0a0a0f 70%);
  z-index: 100;
}

#gameover-inner {
  text-align: center;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0 10px;
}

#gameover-title {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #ff2222;
  text-shadow: 0 0 40px rgba(255,0,0,0.6), 0 0 80px rgba(255,0,0,0.3);
  margin-bottom: 12px;
}

#gameover-subtitle {
  font-size: 13px;
  color: #666;
  letter-spacing: 2px;
  margin-bottom: 32px;
}

#gameover-stage-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: #ff4444;
  margin-bottom: 4px;
}

#gameover-stage-value {
  font-size: 20px;
  font-weight: bold;
  color: #ff8888;
  margin-bottom: 18px;
}

#gameover-mass-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: #ff4444;
  margin-bottom: 4px;
}

#gameover-mass-value {
  font-size: 48px;
  font-weight: bold;
  color: #ff6666;
  margin-bottom: 36px;
}

/* 게임오버 순위 섹션 */
#gameover-rank-section {
  background: rgba(255,0,0,0.06);
  border: 1px solid rgba(255,50,50,0.25);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
}

#gameover-rank-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ff4444;
  margin-bottom: 6px;
}

#gameover-rank-value {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 14px;
  line-height: 1;
}

#gameover-scores-title {
  font-size: 10px;
  letter-spacing: 3px;
  color: #444;
  margin-bottom: 8px;
}

#gameover-scores-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#gameover-restart-btn {
  background: transparent;
  border: 1px solid rgba(255,50,50,0.5);
  border-radius: 6px;
  padding: 12px 36px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 3px;
  color: #ff4444;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#gameover-restart-btn:hover {
  background: rgba(255,50,50,0.12);
  box-shadow: 0 0 20px rgba(255,50,50,0.4);
}

/* ── 스타트 스크린 ───────────────────────────────────── */
#start-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a0a00 0%, #0a0a0f 70%);
  z-index: 100;
}

#start-inner {
  text-align: center;
  max-width: 500px;
}

#start-title {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 8px;
  line-height: 1.1;
  color: #ffcc00;
  text-shadow:
    0 0 40px rgba(255,102,0,0.8),
    0 0 80px rgba(255,102,0,0.4);
  margin-bottom: 18px;
}

#start-tagline {
  font-size: 14px;
  letter-spacing: 3px;
  color: #ff6600;
  margin-bottom: 16px;
}

#start-desc {
  font-size: 13px;
  color: #888;
  line-height: 1.7;
  margin-bottom: 36px;
}

#start-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}

#start-btn {
  background: linear-gradient(135deg, #ff6600, #ffaa00);
  border: none;
  border-radius: 6px;
  padding: 14px 36px;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #000;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#start-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 30px rgba(255,102,0,0.7);
}

#start-howto-btn {
  background: transparent;
  border: 1px solid rgba(255,102,0,0.5);
  border-radius: 6px;
  padding: 14px 28px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  color: #ff6600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

#start-howto-btn:hover {
  background: rgba(255,102,0,0.1);
  box-shadow: 0 0 20px rgba(255,102,0,0.3);
}

/* ── 피드백 버튼 / 버전 표시 ─────────────────────────────── */
.feedback-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 9px 20px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.feedback-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
#gameover-inner .feedback-btn,
#end-inner .feedback-btn { display: block; width: fit-content; margin: 14px auto 0; }

#version-label {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}

#start-controls {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 1px;
}

#start-stage2-btn {
  background: linear-gradient(135deg, #cc3300, #ff6a00);
  border: none;
  border-radius: 6px;
  padding: 14px 28px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#start-stage2-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 30px rgba(204,51,0,0.7);
}

/* ── 엔딩 스크린 ─────────────────────────────────────── */
#end-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0a1a00 0%, #0a0a0f 70%);
  z-index: 100;
}

#end-inner {
  text-align: center;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0 10px;
}

#end-title {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #00ff88;
  text-shadow: 0 0 40px rgba(0,255,136,0.5);
  margin-bottom: 8px;
}

#end-subtitle {
  font-size: 13px;
  color: #666;
  margin-bottom: 22px;
  letter-spacing: 2px;
}

#end-mass-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: #ff6600;
  margin-bottom: 4px;
}

#end-mass-value {
  font-size: 52px;
  font-weight: bold;
  color: #00ff88;
  margin-bottom: 22px;
  line-height: 1;
}

/* ── 순위 섹션 ──────────────────────────────────────── */
#end-rank-section {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,102,0,0.25);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 22px;
}

#end-rank-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ff6600;
  margin-bottom: 6px;
}

#end-rank-value {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 16px;
  line-height: 1;
}

.rank-gold   { color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,0.7); }
.rank-silver { color: #C0C0C0; text-shadow: 0 0 16px rgba(192,192,192,0.5); }
.rank-bronze { color: #cd7f32; text-shadow: 0 0 14px rgba(205,127,50,0.4); }

#end-scores-title {
  font-size: 10px;
  letter-spacing: 3px;
  color: #555;
  margin-bottom: 8px;
}

#end-scores-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  font-size: 12px;
  color: #777;
}

.score-row.score-mine {
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.25);
  color: #ccc;
}

.score-rank-num {
  width: 22px;
  text-align: center;
  color: #ff6600;
  font-size: 11px;
  flex-shrink: 0;
}

.score-mass {
  flex: 1;
  text-align: left;
  font-weight: bold;
  color: inherit;
}

.score-date {
  font-size: 10px;
  color: #444;
  flex-shrink: 0;
}

.score-row.score-mine .score-date { color: #666; }

#end-quote {
  font-size: 12px;
  color: #555;
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 28px;
}

#restart-btn {
  background: transparent;
  border: 1px solid rgba(0,255,136,0.5);
  border-radius: 6px;
  padding: 12px 36px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 3px;
  color: #00ff88;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#restart-btn:hover {
  background: rgba(0,255,136,0.1);
  box-shadow: 0 0 20px rgba(0,255,136,0.3);
}

/* ── HUD 툴바 (설정·조작법 버튼) ────────────────────── */
#hud-toolbar {
  position: absolute;
  top: 20px;
  right: 20px;
  /* mass-panel 아래에 배치 */
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: all;
  /* mass-panel 높이만큼 아래로 밀기 */
  top: auto;
  bottom: auto;
  /* 실제로는 우상단에 mass-panel과 겹치지 않게 절대 위치 */
  right: 20px;
  top: 158px;   /* mass-panel 아래 */
}

.hud-btn {
  width: 34px;
  height: 34px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,102,0,0.4);
  border-radius: 6px;
  color: #ff6600;
  font-size: 16px;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-btn:hover {
  background: rgba(255,102,0,0.15);
  border-color: rgba(255,102,0,0.8);
}

/* FPS 카운터 */
#fps-counter {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
}

/* 좌하단 힌트 키 */
.hint-key {
  color: rgba(255,102,0,0.4);
  font-size: 10px;
}

/* ── 포인터 잠금 힌트 ────────────────────────────────── */
#pointer-lock-hint {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,102,0,0.45);
  border-radius: 6px;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 3px;
  color: #ff6600;
  z-index: 15;
  pointer-events: none;
  animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 1; }
}

/* ── 위치 마커 (2분 이하 도시·보스) ─────────────────────── */
.location-marker {
  position: absolute;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.78);
  border-radius: 8px;
  padding: 7px 12px;
  pointer-events: none;
  z-index: 20;
  animation: markerPulse 1.4s ease-in-out infinite;
}

#city-marker {
  top: calc(50% - 50px);
  border: 1px solid rgba(255, 210, 50, 0.7);
}

#boss-marker {
  top: calc(50% + 10px);
  border: 1px solid rgba(255, 60, 60, 0.7);
}

.marker-arrow {
  font-size: 18px;
  display: inline-block;
  line-height: 1;
  transition: transform 0.15s linear;
}

#city-marker .marker-arrow  { color: #ffdd33; text-shadow: 0 0 8px rgba(255,220,50,0.8); }
#boss-marker .marker-arrow  { color: #ff4444; text-shadow: 0 0 8px rgba(255,60,60,0.8); }

.marker-info { display: flex; flex-direction: column; gap: 1px; }

.marker-label {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  line-height: 1;
}

#city-marker .marker-label  { color: #ffdd33; }
#boss-marker .marker-label  { color: #ff6666; }

.marker-dist {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  line-height: 1;
}

@keyframes markerPulse {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 1.0; }
}

/* ── 공통 모달 ───────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
}

.modal-panel {
  background: #0f0f18;
  border: 1px solid rgba(255,102,0,0.35);
  border-radius: 12px;
  width: 440px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(255,102,0,0.15);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255,102,0,0.2);
  flex-shrink: 0;
}

.modal-title {
  font-size: 13px;
  letter-spacing: 4px;
  color: #ff6600;
}

.modal-x {
  background: none;
  border: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s;
}

.modal-x:hover { color: #fff; }

.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid rgba(255,102,0,0.2);
  justify-content: flex-end;
  flex-shrink: 0;
}

.modal-btn-primary {
  background: linear-gradient(135deg, #ff6600, #ffaa00);
  border: none;
  border-radius: 5px;
  padding: 9px 24px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #000;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.modal-btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 16px rgba(255,102,0,0.5);
}

.modal-btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,102,0,0.4);
  border-radius: 5px;
  padding: 9px 20px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ff6600;
  cursor: pointer;
  transition: background 0.15s;
}

.modal-btn-secondary:hover { background: rgba(255,102,0,0.1); }

/* ── 설정 패널 ───────────────────────────────────────── */
.setting-section-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ff6600;
  margin: 16px 0 8px;
}

.setting-section-label:first-child { margin-top: 0; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.setting-label {
  font-size: 13px;
  color: #ccc;
}

/* 토글 그룹 */
.toggle-group {
  display: flex;
  gap: 3px;
}

.tgl {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 5px 12px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #666;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tgl:hover { color: #ccc; border-color: rgba(255,102,0,0.4); }

.tgl.active {
  background: rgba(255,102,0,0.2);
  border-color: rgba(255,102,0,0.7);
  color: #ffaa00;
}

/* ── 조작법 패널 ─────────────────────────────────────── */
.controls-panel { width: 500px; }

.controls-body { padding: 18px 22px; }

.ctrl-section {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ff6600;
  margin: 20px 0 10px;
}

.ctrl-section:first-child { margin-top: 0; }

/* 키 레이아웃 */
.key-layout {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  align-items: center;
}

.key-row {
  display: flex;
  gap: 4px;
}

.key-cap {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-bottom: 3px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  color: #ddd;
}

.wide-cap {
  width: 60px;
  font-size: 10px;
  letter-spacing: 1px;
}

.key-blank { width: 32px; height: 32px; }

.key-hint-text {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  text-align: center;
}

.key-extras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 20px;
  margin: 8px 0 4px;
}

.key-extra-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.key-extra-label {
  font-size: 11px;
  color: #999;
  line-height: 1.4;
}

/* 흡수 팁 */
.ctrl-tips { display: flex; flex-direction: column; gap: 7px; }

.ctrl-tip {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #aaa;
  line-height: 1.5;
}

.ctrl-tip b { color: #ffcc00; }

.tip-dot {
  flex-shrink: 0;
  margin-top: 1px;
}

.tip-highlight {
  background: rgba(255,102,0,0.06);
  border-left: 2px solid rgba(255,102,0,0.4);
  padding: 6px 8px;
  border-radius: 0 4px 4px 0;
  color: #bbb;
}

/* 성장 단계 */
.stage-progression {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.stage-prog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  width: 100%;
}

.stage-prog-item.stage-final {
  border-color: rgba(255,204,0,0.3);
  background: rgba(255,204,0,0.05);
}

.sp-num {
  width: 22px;
  height: 22px;
  background: rgba(255,102,0,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #ff6600;
  font-weight: bold;
  flex-shrink: 0;
}

.sp-name {
  flex: 1;
  font-size: 12px;
  color: #ccc;
}

.sp-target {
  font-size: 11px;
  color: #777;
}

.stage-prog-arrow {
  font-size: 10px;
  color: rgba(255,102,0,0.4);
  padding: 2px 0 2px 14px;
  letter-spacing: 1px;
}

/* 아이템 가이드 */
.item-guide { display: flex; flex-direction: column; gap: 8px; }

.item-guide-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.07);
}

.item-guide-icon { font-size: 22px; line-height: 1; margin-top: 1px; }

.item-guide-name {
  font-size: 13px;
  color: #ffdd55;
  font-weight: bold;
  margin-bottom: 2px;
}

.item-guide-desc { font-size: 11px; color: #888; }

/* ── 이벤트 배너 ─────────────────────────────────────────── */
#event-banner {
  position: absolute;
  top: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0,0,0,0.88);
  border: 1px solid rgba(255,200,0,0.55);
  border-radius: 10px;
  padding: 10px 28px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 12;
  white-space: nowrap;
}

#event-banner.event-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#event-banner.event-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#event-name {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #ffcc00;
  margin-bottom: 3px;
}

#event-desc {
  font-size: 11px;
  color: #aaa;
  letter-spacing: 1px;
}

/* ── 쇼크웨이브 쿨다운 ──────────────────────────────────── */
#shockwave-wrap {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(0,200,255,0.35);
  border-radius: 8px;
  padding: 7px 16px;
  pointer-events: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#shockwave-wrap.shock-ready {
  border-color: rgba(0,220,255,0.75);
  box-shadow: 0 0 14px rgba(0,200,255,0.4);
}

#shock-key {
  width: 26px;
  height: 26px;
  background: rgba(0,180,255,0.15);
  border: 1px solid rgba(0,200,255,0.5);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  color: #00ccff;
  transition: background 0.3s ease;
}

#shockwave-wrap.shock-ready #shock-key {
  background: rgba(0,200,255,0.35);
}

#shock-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #00ccff;
  min-width: 76px;
}

#shock-cooldown-wrap {
  width: 72px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

#shock-cooldown-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0088ff, #00ddff);
  border-radius: 2px;
  transition: width 0.12s linear;
}

/* ── 더블점프 / 대시 표시기 ──────────────────────────────── */
#action-indicators {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  pointer-events: none;
}

#doublejump-wrap,
#dash-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.65);
  border-radius: 8px;
  padding: 6px 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#doublejump-wrap {
  border: 1px solid rgba(100,220,100,0.35);
}
#doublejump-wrap.dj-ready {
  border-color: rgba(100,255,100,0.75);
  box-shadow: 0 0 12px rgba(100,255,100,0.3);
}

#dj-key {
  width: 42px;
  height: 22px;
  background: rgba(100,200,100,0.15);
  border: 1px solid rgba(100,220,100,0.5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  color: #66dd66;
}
#dj-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #66dd66;
  min-width: 60px;
}
.dj-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(100,255,100,0.2);
  border: 1px solid rgba(100,255,100,0.5);
  transition: background 0.2s;
}
.dj-dot.active { background: rgba(100,255,100,0.9); }

#dash-wrap {
  border: 1px solid rgba(255,150,0,0.35);
}
#dash-wrap.dash-ready {
  border-color: rgba(255,180,0,0.75);
  box-shadow: 0 0 12px rgba(255,150,0,0.35);
}

#dash-key {
  width: 42px;
  height: 22px;
  background: rgba(255,150,0,0.15);
  border: 1px solid rgba(255,150,0,0.5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  color: #ffaa33;
}
#dash-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #ffaa33;
  min-width: 28px;
}
#dash-cooldown-wrap {
  width: 60px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
#dash-cooldown-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff8800, #ffcc44);
  border-radius: 2px;
  transition: width 0.12s linear;
}

/* ── 모바일 대시 버튼 ────────────────────────────────────── */
#mobile-dash {
  position: absolute;
  bottom: 50px;
  right: 208px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,150,0,0.75);
  background: rgba(200,100,0,0.18);
  color: #ffcc44;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: all;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 0 12px rgba(255,130,0,0.22), inset 0 0 8px rgba(255,130,0,0.1);
  transition: background 0.08s, box-shadow 0.08s;
}
#mobile-dash span {
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: bold;
}
#mobile-dash:active {
  background: rgba(255,150,0,0.5);
  box-shadow: 0 0 18px rgba(255,150,0,0.55), inset 0 0 12px rgba(255,150,0,0.2);
}
#mobile-dash.dash-on-cooldown {
  border-color: rgba(100,100,100,0.5);
  background: rgba(40,40,40,0.25);
  color: #666;
  box-shadow: none;
}

/* ── 콤보 카운터 ─────────────────────────────────────────── */
#combo-wrap {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,153,0,0.55);
  border-radius: 8px;
  padding: 7px 12px;
  text-align: center;
  min-width: 70px;
  pointer-events: none;
}

#combo-count {
  font-size: 22px;
  font-weight: 900;
  color: #ffaa00;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 2px;
  text-shadow: 0 0 12px rgba(255,170,0,0.7);
}

#combo-mult {
  font-size: 12px;
  font-weight: bold;
  color: #ff6600;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

#combo-timer-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

#combo-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff6600, #ffaa00);
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* ── 레벨업 플래시 ───────────────────────────────────────── */
#levelup-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 91;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.75) 0%, rgba(255,140,0,0.35) 50%, transparent 100%);
  opacity: 0;
}

#levelup-flash.active {
  animation: levelupFlash 0.6s ease-out forwards;
}

@keyframes levelupFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 특전 선택 오버레이 ──────────────────────────────────── */
#perk-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#perk-overlay.hidden { display: none; }

#perk-inner {
  text-align: center;
}

#perk-title {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #FFD700;
  text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,140,0,0.4);
  margin-bottom: 8px;
  animation: perkTitlePulse 1.5s ease-in-out infinite;
}

@keyframes perkTitlePulse {
  0%, 100% { text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,140,0,0.4); }
  50%       { text-shadow: 0 0 50px rgba(255,215,0,1),   0 0 90px rgba(255,140,0,0.6); }
}

#perk-subtitle {
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 36px;
}

#perk-cards {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.perk-card {
  background: rgba(15, 12, 28, 0.95);
  border: 2px solid rgba(255,215,0,0.3);
  border-radius: 14px;
  padding: 28px 22px;
  width: 190px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.perk-card:hover {
  transform: scale(1.06) translateY(-5px);
  border-color: #FFD700;
  box-shadow: 0 10px 36px rgba(255,215,0,0.4), 0 0 60px rgba(255,215,0,0.15);
}

.perk-card:active {
  transform: scale(0.97);
}

.perk-icon {
  font-size: 42px;
  margin-bottom: 14px;
  line-height: 1;
}

.perk-name {
  font-size: 13px;
  font-weight: 700;
  color: #FFD700;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.perk-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}

/* ── 보스 HP 바 (상단 중앙) ─────────────────────────────── */
#boss-hp-wrap {
  position: absolute;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 46vw);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(220, 0, 50, 0.55);
  border-radius: 8px;
  padding: 10px 16px;
  text-align: center;
  z-index: 12;
}

#boss-hp-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: #ff2244;
  margin-bottom: 7px;
  text-shadow: 0 0 8px rgba(255, 0, 50, 0.9);
  animation: bossPulse 1.2s ease-in-out infinite;
}

@keyframes bossPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

#boss-hp-bar-bg {
  background: rgba(180, 0, 30, 0.18);
  border: 1px solid rgba(220, 0, 50, 0.35);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

#boss-hp-bar {
  height: 100%;
  background: linear-gradient(90deg, #aa0022, #ee1133, #ff6677);
  border-radius: 4px;
  width: 100%;
  transition: width 0.25s ease, background 0.4s ease;
  box-shadow: 0 0 8px rgba(255, 20, 60, 0.6);
}

/* ── 보스 면역 상태 ──────────────────────────────────────── */
#boss-hp-wrap.boss-immune {
  border-color: rgba(50, 120, 255, 0.55);
}
#boss-hp-wrap.boss-immune #boss-hp-label {
  color: #88aaff;
  text-shadow: 0 0 8px rgba(80, 130, 255, 0.9);
  animation: bossImmuneP 0.75s ease-in-out infinite;
}
@keyframes bossImmuneP {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
#boss-hp-wrap.boss-immune #boss-hp-bar {
  background: linear-gradient(90deg, #1133aa, #2255dd, #6688ff);
  box-shadow: 0 0 8px rgba(60, 100, 255, 0.6);
}
#boss-hp-wrap.boss-immune #boss-hp-bar-bg {
  border-color: rgba(50, 100, 255, 0.35);
  background: rgba(0, 0, 100, 0.18);
}

/* ── 모바일 쇼크웨이브 버튼 ──────────────────────────────── */
#mobile-shock {
  position: absolute;
  bottom: 50px;
  right: 122px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(0,200,255,0.75);
  background: rgba(0,160,220,0.18);
  color: #44ddff;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: all;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 0 12px rgba(0,180,255,0.22), inset 0 0 8px rgba(0,180,255,0.1);
  transition: background 0.08s, box-shadow 0.08s;
}

#mobile-shock span {
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: bold;
}

#mobile-shock:active {
  background: rgba(0,200,255,0.5);
  box-shadow: 0 0 18px rgba(0,200,255,0.55), inset 0 0 12px rgba(0,200,255,0.2);
}

#mobile-shock.shock-on-cooldown {
  border-color: rgba(100,100,100,0.5);
  background: rgba(40,40,40,0.25);
  color: #666;
  box-shadow: none;
}

/* ── 반응형: 중간 화면 (≤900px) ─────────────────────────── */
@media (max-width: 900px) {
  #minimap-wrap { top: 122px; right: 62px; }
  #minimap      { width: 130px; height: 130px; }

  #stage-panel  { padding: 10px 13px; min-width: 170px; }
  #stage-name   { font-size: 16px; }
  #stage-desc   { font-size: 10px; }

  #mass-panel   { padding: 10px 13px; min-width: 150px; }
  #mass-value   { font-size: 26px; }

  #hp-panel     { padding: 8px 13px; }

  #item-panel   { padding: 10px 13px; }

  #combo-wrap   { bottom: 120px; right: 20px; left: auto; top: auto; transform: none; }
  #shockwave-wrap { bottom: 12px; left: 50%; transform: translateX(-50%); }
  #action-indicators { bottom: 58px; }

  #event-banner { font-size: 13px; }
}

/* ── 반응형: 소형 화면 (≤600px) ─────────────────────────── */
@media (max-width: 600px) {
  #minimap-wrap { top: 80px; right: 58px; }
  #minimap      { width: 100px; height: 100px; }

  #stage-panel  { top: 10px; left: 10px; padding: 8px 11px; min-width: 140px; }
  #stage-label  { font-size: 8px; letter-spacing: 2px; }
  #stage-name   { font-size: 13px; margin-bottom: 3px; }
  #stage-desc   { font-size: 9px; }

  #mass-panel   { top: 10px; right: 10px; padding: 8px 11px; min-width: 120px; }
  #mass-value   { font-size: 22px; }
  #mass-bar-wrap { height: 5px; }

  #hp-panel     { padding: 6px 11px; bottom: auto; top: auto; }

  #item-panel   { left: 10px; }
  .item-row     { font-size: 11px; }
  .item-icon    { font-size: 14px; }

  #stage-timer  { font-size: 22px; }

  #combo-wrap   { bottom: 100px; right: 10px; left: auto; top: auto; transform: none; padding: 5px 9px; min-width: 52px; }
  #combo-count  { font-size: 16px; }
  #combo-mult   { font-size: 10px; margin-bottom: 4px; }

  #shockwave-wrap { bottom: 10px; }
  #shock-key    { font-size: 11px; }
  #shock-label  { font-size: 8px; }

  #event-banner { font-size: 11px; padding: 6px 14px; }
  #event-name   { font-size: 13px; }
  #event-desc   { font-size: 10px; }

  #absorption-wrap { bottom: 160px; }

  #action-indicators { bottom: 125px; }
  #shockwave-wrap { bottom: 10px; }

  #mobile-jump  { width: 60px; height: 60px; bottom: 38px; right: 28px; font-size: 10px; }
  #mobile-shock { width: 60px; height: 60px; bottom: 38px; right: 100px; font-size: 15px; }
  #mobile-dash  { width: 60px; height: 60px; bottom: 38px; right: 170px; font-size: 15px; }
}

/* ── 터치 기기: PC용 안내 숨김, 효과 패널을 버튼과 겹치지 않게 이동 ── */
@media (hover: none) and (pointer: coarse) {
  #controls-hint,
  #shockwave-wrap,
  #action-indicators { display: none !important; }

  #effects-panel {
    top: 118px; bottom: auto;
    left: 10px; right: auto;
    min-width: 0;
    padding: 6px 10px;
    text-align: left;
  }
  #effects-panel.empty { display: none; }
}

/* ── 높이가 낮은 화면(휴대폰 가로): 시작·결과 화면 축소 ── */
@media (max-height: 640px) {
  #start-screen, #gameover-screen, #end-screen { overflow-y: auto; }
  #start-inner, #gameover-inner, #end-inner { zoom: 0.8; }
}
@media (max-height: 500px) {
  #start-screen, #gameover-screen, #end-screen { align-items: flex-start; }
  #start-inner, #gameover-inner, #end-inner { zoom: 0.58; padding: 18px 10px; }
  #gameover-inner, #end-inner { max-height: none; overflow: visible; }
  #gameover-scores-list, #end-scores-list { max-height: 100px; overflow-y: auto; }
}

/* ── 세로 모드 안내 (터치 기기 전용) ─────────────────────── */
#rotate-hint { display: none; }
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #rotate-hint {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    background: radial-gradient(ellipse at center, #1a0a00 0%, #0a0a0f 70%);
    font-family: 'Courier New', monospace;
  }
  #rotate-icon {
    font-size: 54px;
    animation: rotateHint 1.8s ease-in-out infinite;
  }
  #rotate-title { font-size: 18px; letter-spacing: 3px; color: #ffcc00; font-weight: bold; }
  #rotate-desc  { font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,0.55); }
}
@keyframes rotateHint {
  0%, 30%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

/* ── 설정: 타이틀로 나가기 ───────────────────────────────── */
.modal-btn-danger {
  margin-right: auto;
  background: transparent;
  border: 1px solid rgba(255,60,60,0.45);
  border-radius: 5px;
  padding: 9px 16px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ff5555;
  cursor: pointer;
  transition: background 0.15s;
}
.modal-btn-danger:hover { background: rgba(255,60,60,0.1); }
.modal-btn-danger.armed {
  background: rgba(255,40,40,0.85);
  border-color: #ff4444;
  color: #fff;
}

/* 가이드 키 라벨: 글자 길이에 맞춰 늘어남 */
.key-extra-row .wide-cap { width: auto; min-width: 60px; padding: 0 6px; flex-shrink: 0; }

@media (max-width: 600px) {
  .modal-footer { flex-wrap: wrap; }
  .modal-btn-danger { width: 100%; margin-right: 0; }
}

/* 보스 HP바가 떠 있으면 이벤트 배너를 그 아래로 */
#boss-hp-wrap:not(.hidden) ~ #event-banner { top: 156px; }
@media (max-width: 900px), (max-height: 500px) {
  #boss-hp-wrap { top: 98px; padding: 6px 12px; }
  #boss-hp-wrap:not(.hidden) ~ #event-banner { top: 148px; }
}