/* ==========================================================
   피해피해 (DUO Dodge) v20260516_1
   prefix: .dg-
   ========================================================== */

.dg-hidden { display: none !important; }
html { scrollbar-gutter: stable; }
body { overflow-x: hidden; }

:root {
  --dg-bg: #14080a;
  --dg-bg-2: #1f0c10;
  --dg-panel: #2a1418;
  --dg-panel-2: #3a1c22;
  --dg-line: rgba(255, 100, 100, 0.18);
  --dg-line-strong: rgba(255, 100, 100, 0.45);
  --dg-text: #ffe8e0;
  --dg-text-dim: #d0a8a0;
  --dg-text-mute: #8a6868;
  --dg-accent: #ff6b6b;
  --dg-accent-2: #ff9966;
  --dg-accent-glow: rgba(255, 107, 107, 0.5);
  --dg-gold: #ffd166;
  --dg-success: #66e9a8;
  --dg-danger: #ff4d6d;
  --dg-canvas-bg: #0a0508;
}

/* ===== PAGE SHELL ===== */
.dg-page-shell {
  position: relative;
  min-height: calc(100vh - 60px);
  background: radial-gradient(ellipse at top, #3a1c22 0%, transparent 50%), linear-gradient(180deg, var(--dg-bg) 0%, var(--dg-bg-2) 100%);
  display: flex; justify-content: center; align-items: flex-start;
  overflow-x: clip; /* 모바일 가로 스크롤 방지 */
}
/* 모바일: 좁은 화면 — padding 축소 + canvas 100% 활용 */
@media (max-width: 480px) {
  .dg-app { padding: 10px 6px 30px; }
}
.dg-app {
  width: 100%; max-width: 640px;
  margin: 0 auto;
  padding: 12px 12px 30px;
  color: var(--dg-text);
  position: relative;
  box-sizing: border-box;
  flex: 0 1 auto; min-width: 0;
}
body.dg-in-room .dg-app { max-width: 640px; }
@media (min-width: 1024px) {
  body.dg-in-room .dg-app { max-width: 1200px; }
}

/* 사이드 광고 — 앱 640 + 마진 50 = 740 너비 기준 (앱 max-width 640px 대응) */
.dg-side-ad { display: none; }
@media (min-width: 1280px) {
  body:not(.dg-in-room) .dg-side-ad {
    display: block; position: fixed; top: 80px; width: 200px; height: 600px; z-index: 1;
  }
  body:not(.dg-in-room) .dg-side-ad-left  { left: calc(50% - 560px); }
  body:not(.dg-in-room) .dg-side-ad-right { left: calc(50% + 360px); }
}
@media (min-width: 1680px) {
  body.dg-in-room .dg-side-ad {
    display: block; position: fixed; top: 80px; width: 180px; height: 600px; z-index: 1;
  }
  body.dg-in-room .dg-side-ad-left  { left: calc(50% - 800px); }
  body.dg-in-room .dg-side-ad-right { left: calc(50% + 620px); }
}

.dg-screen { display: none; animation: dg-screen-in 0.3s ease-out; }
.dg-screen.active { display: block; }
@keyframes dg-screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== SETUP / LOBBY ===== */
.dg-setup, .dg-lobby {
  background: linear-gradient(145deg, var(--dg-panel) 0%, var(--dg-panel-2) 100%);
  border: 1px solid var(--dg-line);
  border-radius: 20px;
  padding: 28px 22px;
  margin-top: 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 60px rgba(255, 107, 107, 0.1);
  position: relative;
  overflow: hidden;
}
.dg-setup-emoji {
  font-size: 72px; margin-bottom: 8px;
  text-shadow: 0 0 24px var(--dg-accent-glow);
  animation: dg-emoji-float 2s ease-in-out infinite;
}
@keyframes dg-emoji-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dg-setup-title {
  font-size: 32px; font-weight: 900;
  background: linear-gradient(135deg, var(--dg-accent) 0%, var(--dg-accent-2) 50%, var(--dg-gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 4px;
}
.dg-setup-sub { font-size: 14px; color: var(--dg-text-dim); margin-bottom: 18px; line-height: 1.5; }
.dg-stage-preview { display: flex; justify-content: center; gap: 4px; margin: 8px 0 14px; font-size: 22px; color: var(--dg-text-dim); }

/* 모드 토글 */
.dg-mode-tabs { display: flex; gap: 6px; margin: 8px 0 14px; }
.dg-mode-tab {
  flex: 1; padding: 10px 8px;
  background: var(--dg-bg-2); border: 1px solid var(--dg-line); border-radius: 10px;
  color: var(--dg-text-mute); font-size: 13px; font-weight: 800; cursor: pointer;
  transition: all 0.15s;
}
.dg-mode-tab:hover { color: var(--dg-text); }
.dg-mode-tab.active {
  background: linear-gradient(135deg, var(--dg-accent), var(--dg-gold));
  color: #14080a; border-color: var(--dg-gold);
  box-shadow: 0 0 12px rgba(255,209,102,0.45);
}
.dg-setup-input {
  width: 100%; padding: 12px 14px; font-size: 15px;
  background: var(--dg-bg-2); color: var(--dg-text);
  border: 1px solid var(--dg-line); border-radius: 11px;
  margin-bottom: 10px; box-sizing: border-box;
}
.dg-setup-input:focus { outline: none; border-color: var(--dg-accent); box-shadow: 0 0 0 3px var(--dg-accent-glow); }
.dg-setup-btn {
  display: block; width: 100%; max-width: 320px; margin: 8px auto 0;
  padding: 14px;
  background: linear-gradient(135deg, var(--dg-accent) 0%, var(--dg-accent-2) 100%);
  color: #14080a; font-size: 16px; font-weight: 900;
  border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 4px 16px var(--dg-accent-glow);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.dg-setup-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--dg-accent-glow); filter: brightness(1.08); }
.dg-setup-btn:disabled { background: var(--dg-panel-2); color: var(--dg-text-mute); cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.dg-setup-btn-secondary {
  background: var(--dg-panel-2); color: var(--dg-text); font-size: 15px; box-shadow: none; border: 1px solid var(--dg-line);
}
.dg-setup-btn-secondary:hover { background: var(--dg-panel); }
.dg-setup-hint { margin-top: 14px; font-size: 13px; color: var(--dg-text-mute); line-height: 1.6; }
.dg-login-warn {
  margin: 0 0 10px; padding: 8px 12px;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.4);
  border-radius: 10px; font-size: 12px; color: var(--dg-text-dim);
}

/* Lobby */
.dg-lobby-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dg-lobby-title { font-size: 20px; font-weight: 900; background: linear-gradient(135deg, var(--dg-accent) 0%, var(--dg-gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dg-btn-ghost { background: transparent; color: var(--dg-text-dim); border: 1px solid var(--dg-line); border-radius: 8px; cursor: pointer; font-size: 13px; padding: 6px 12px; }
.dg-btn-ghost:hover { background: var(--dg-panel-2); color: var(--dg-text); }
.dg-btn-secondary { background: var(--dg-panel-2); color: var(--dg-text); border: 1px solid var(--dg-line); border-radius: 8px; cursor: pointer; font-size: 12px; padding: 5px 10px; }
.dg-btn-secondary:hover { background: var(--dg-panel); }
.dg-btn-primary { background: linear-gradient(135deg, var(--dg-accent) 0%, var(--dg-accent-2) 100%); color: #14080a; border: none; border-radius: 10px; padding: 10px 18px; font-weight: 900; cursor: pointer; }

.dg-lobby-invite { background: var(--dg-bg-2); border: 1px solid var(--dg-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.dg-lobby-invite-label { font-size: 12px; color: var(--dg-text-mute); margin-bottom: 6px; text-align: left; font-weight: 700; }
.dg-lobby-invite-row { display: flex; gap: 6px; align-items: center; }
.dg-lobby-invite-code { flex: 1; font-size: 22px; font-weight: 900; letter-spacing: 4px; color: var(--dg-accent-2); text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px var(--dg-accent-glow); }

.dg-lobby-options { background: var(--dg-bg-2); border: 1px solid var(--dg-line); border-radius: 12px; padding: 12px; margin-bottom: 14px; text-align: left; }
.dg-lobby-opt-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--dg-text-dim); }
.dg-lobby-opt-hint { margin-top: 8px; font-size: 11px; color: var(--dg-text-mute); }

.dg-lobby-roster-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--dg-text-dim); margin-bottom: 6px; }
.dg-lobby-roster { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.dg-roster-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--dg-bg-2); border-radius: 8px; font-size: 13px; }
.dg-roster-row.dg-roster-me { border: 1px solid var(--dg-accent); }
.dg-roster-name { flex: 1; text-align: left; font-weight: 700; }
.dg-roster-tags { display: flex; gap: 4px; }
.dg-roster-host { background: var(--dg-gold); color: #14080a; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 900; }
.dg-roster-guest { background: var(--dg-panel-2); color: var(--dg-text-mute); padding: 2px 6px; border-radius: 6px; font-size: 10px; }

/* ===== PLAY ===== */
.dg-play-layout { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dg-play-main {
  flex: 0 1 auto; min-width: 0;
  /* HUD + 캔버스 같이 줄어들도록 동일 공식 적용 */
  width: min(100%, 640px, calc((100vh - 320px) * 600 / 720));
  max-width: 640px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
}
.dg-multi-left, .dg-multi-right { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 260px; }
@media (min-width: 1200px) {
  body.dg-in-room .dg-play-layout {
    display: grid; grid-template-columns: 260px 640px 260px;
    gap: 20px; align-items: start; justify-content: center;
  }
  /* width override 제거 — 부모 .dg-play-main 규칙의 min() 공식이 적용되어
     멀티에서도 뷰포트 높이 따라 자동 축소됨 */
  body.dg-in-room .dg-play-main { max-width: 640px; }
  body.dg-in-room .dg-multi-left, body.dg-in-room .dg-multi-right {
    width: 260px; max-width: 260px;
    position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto;
  }
}

/* HUD */
.dg-hud {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--dg-panel) 0%, var(--dg-panel-2) 100%);
  border: 1px solid var(--dg-line); border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.dg-hud-left, .dg-hud-center, .dg-hud-right { display: flex; flex-direction: column; align-items: center; }
.dg-hud-label { font-size: 10px; color: var(--dg-text-mute); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; }
.dg-hud-val { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.dg-hud-center .dg-hud-val { color: var(--dg-accent-2); }

/* HP 바 */
.dg-hp-bar {
  position: relative; height: 16px;
  background: rgba(0,0,0,0.5); border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--dg-line);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.dg-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4d6d 0%, #ff9966 50%, #ffd166 100%);
  transition: width 0.3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 12px var(--dg-accent-glow);
  position: relative;
}
.dg-hp-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
}
/* HP 낮을 때 빨강 펄스 */
.dg-hp-bar.dg-hp-low { animation: dg-hp-pulse 0.8s ease-in-out infinite; }
.dg-hp-bar.dg-hp-critical { animation: dg-hp-pulse 0.4s ease-in-out infinite; }
@keyframes dg-hp-pulse {
  0%, 100% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 0 rgba(255,77,109,0); }
  50% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 20px rgba(255,77,109,0.85); }
}
.dg-hp-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.7); font-variant-numeric: tabular-nums; }
/* HUD 값 점수 갱신 펄스 */
.dg-hud-val.dg-pop { animation: dg-pop 0.4s ease-out; }
@keyframes dg-pop { 0% { transform: scale(1); } 50% { transform: scale(1.25); color: var(--dg-gold); } 100% { transform: scale(1); } }

/* ===== 무기 슬롯 + 다음 해금 진행 바 ===== */
.dg-weapons-row {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--dg-panel) 0%, var(--dg-panel-2) 100%);
  border: 1px solid var(--dg-line); border-radius: 12px;
  flex-wrap: wrap; /* 좁은 화면에서 진행바가 다음 줄로 */
}
.dg-weapons { display: flex; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; }
.dg-weapon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dg-bg-2); border-radius: 8px;
  border: 1px solid var(--dg-line);
  font-size: 16px; transition: all 0.2s;
  filter: grayscale(1) brightness(0.5);
  opacity: 0.45;
  flex: 0 0 auto;
}
/* 모바일: 좁은 화면에서 이모지 축소 — 9개 한줄 유지 */
@media (max-width: 480px) {
  .dg-weapons-row { gap: 6px; padding: 6px 8px; }
  .dg-weapons { gap: 3px; }
  .dg-weapon { width: 26px; height: 26px; font-size: 14px; border-radius: 6px; }
}
@media (max-width: 360px) {
  .dg-weapon { width: 22px; height: 22px; font-size: 12px; }
}
.dg-weapon.dg-weapon-active {
  filter: none; opacity: 1;
  background: linear-gradient(135deg, var(--dg-accent), var(--dg-gold));
  border-color: var(--dg-gold);
  box-shadow: 0 0 12px rgba(255,209,102,0.5);
  animation: dg-weapon-pulse 1.6s ease-in-out infinite;
}
@keyframes dg-weapon-pulse { 0%,100% { box-shadow: 0 0 8px rgba(255,209,102,0.4); } 50% { box-shadow: 0 0 16px rgba(255,209,102,0.7); } }
.dg-weapon.dg-weapon-cooldown {
  filter: none; opacity: 0.6;
  border-color: var(--dg-accent-2);
  background: var(--dg-bg-2);
}
.dg-weapon.dg-weapon-cooldown::after {
  content: ""; display: block; position: absolute;
}
.dg-weapon.dg-weapon-just-unlocked { animation: dg-weapon-unlock 0.7s ease-out; }
@keyframes dg-weapon-unlock {
  0% { transform: scale(0.6) rotate(-25deg); filter: brightness(2.5); }
  50% { transform: scale(1.4) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

.dg-next-progress { flex: 1; min-width: 140px; }
.dg-next-text {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 11px; color: var(--dg-text-mute);
  margin-bottom: 4px; font-weight: 700;
}
.dg-next-label { letter-spacing: 0.02em; opacity: 0.85; }
.dg-next-meta { display: inline-flex; align-items: center; gap: 6px; }
.dg-next-icon { font-size: 16px; filter: drop-shadow(0 0 6px rgba(255,209,102,0.5)); }
.dg-next-lv {
  display: inline-block; padding: 1px 6px;
  background: rgba(255, 209, 102, 0.15);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 6px; color: var(--dg-gold);
  font-size: 10.5px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.dg-next-pct {
  font-size: 10.5px; font-weight: 900;
  color: var(--dg-accent-2); font-variant-numeric: tabular-nums;
  min-width: 32px; text-align: right;
}
.dg-next-bar {
  position: relative; height: 8px; background: rgba(0,0,0,0.55);
  border-radius: 5px; overflow: hidden;
  border: 1px solid var(--dg-line);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.dg-next-fill {
  height: 100%;
  transition: width 0.35s cubic-bezier(.2,.7,.3,1);
  background: linear-gradient(90deg, #ff4d6d 0%, #ffd166 50%, #00e0ff 100%);
  background-size: 200% 100%;
  animation: dg-next-fill-shift 3s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255,209,102,0.55), inset 0 1px 1px rgba(255,255,255,0.4);
  position: relative;
}
@keyframes dg-next-fill-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* shimmer — 막대 위로 흐르는 흰 빛 */
.dg-next-shimmer {
  position: absolute; top: 0; left: -50%;
  width: 35%; height: 100%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%);
  animation: dg-next-shimmer-move 2.2s linear infinite;
  pointer-events: none;
}
@keyframes dg-next-shimmer-move {
  0% { left: -50%; }
  100% { left: 110%; }
}
/* 거의 다 찼을 때 강한 펄스 */
.dg-next-progress.dg-next-close .dg-next-bar {
  animation: dg-next-close-pulse 0.7s ease-in-out infinite;
  border-color: var(--dg-gold);
}
.dg-next-progress.dg-next-close .dg-next-pct {
  color: var(--dg-gold); font-size: 12px;
  text-shadow: 0 0 8px rgba(255,209,102,0.7);
}
@keyframes dg-next-close-pulse {
  0%, 100% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 0 rgba(255,209,102,0); }
  50% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 14px rgba(255,209,102,0.85); }
}
.dg-next-progress.dg-next-maxed .dg-next-label,
.dg-next-progress.dg-next-maxed .dg-next-pct { color: var(--dg-gold); }
.dg-next-progress.dg-next-maxed .dg-next-fill {
  background: linear-gradient(90deg, #ff4d6d, #ffd166, #ff8800, #ffd166);
  background-size: 200% 100%;
  animation: dg-next-fill-shift 2s ease-in-out infinite;
}
.dg-next-progress.dg-next-maxed .dg-next-shimmer { display: none; }

/* 게임 타이머 */
.dg-game-timer {
  display: inline-block; padding: 6px 14px;
  background: var(--dg-bg-2); border: 2px solid var(--dg-line); border-radius: 999px;
  font-size: 14px; font-weight: 900; color: var(--dg-accent-2);
  font-variant-numeric: tabular-nums; text-align: center;
}
.dg-game-timer-urgent { border-color: var(--dg-gold); color: var(--dg-gold); animation: dg-timer-pulse 1s ease-in-out infinite; }
.dg-game-timer-critical { border-color: var(--dg-danger); color: var(--dg-danger); animation: dg-timer-pulse 0.5s ease-in-out infinite; }
@keyframes dg-timer-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* 캔버스 */
.dg-canvas-wrap { position: relative; }
.dg-canvas {
  display: block;
  /* 부모 .dg-play-main이 이미 뷰포트 기반 폭 계산 — 캔버스는 100%로 부모 폭 채움 */
  width: 100%;
  max-width: 640px;
  height: auto; aspect-ratio: 600/720;
  margin: 0 auto;
  background: var(--dg-canvas-bg);
  border-radius: 12px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    inset 0 0 0 2px var(--dg-line),
    0 0 60px rgba(255,77,109,0.18),
    0 0 120px rgba(255,209,102,0.06);
  touch-action: none; cursor: crosshair; user-select: none;
  animation: dg-canvas-breathe 4s ease-in-out infinite;
}
@keyframes dg-canvas-breathe {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 0 2px var(--dg-line), 0 0 60px rgba(255,77,109,0.18), 0 0 120px rgba(255,209,102,0.06); }
  50% { box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 0 2px var(--dg-line), 0 0 80px rgba(255,77,109,0.28), 0 0 160px rgba(255,209,102,0.10); }
}

/* ===== 강퇴 버튼 (호스트 전용, 로비) ===== */
.dg-kick-btn {
  margin-left: 8px;
  width: 24px; height: 24px;
  background: rgba(255,77,109,0.15); border: 1px solid var(--dg-danger);
  border-radius: 6px; color: var(--dg-danger);
  font-size: 11px; font-weight: 900; cursor: pointer;
  transition: all 0.15s;
}
.dg-kick-btn:hover { background: var(--dg-danger); color: #fff; }

/* ===== 관전 모드 (사망 후 풀스크린) ===== */
.dg-spectator {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  border-radius: 12px;
  display: flex; flex-direction: column;
  padding: 8px; gap: 8px;
  z-index: 10;
  backdrop-filter: blur(2px);
}
.dg-spectator.dg-hidden { display: none; }
.dg-spec-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 12;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.dg-spec-close:hover { background: rgba(255,77,77,.6); }
.dg-spec-close:active { transform: scale(.92); }
.dg-spectator-head {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; gap: 8px;
}
.dg-spec-arrow {
  width: 40px; height: 40px;
  background: var(--dg-panel); border: 1px solid var(--dg-accent);
  border-radius: 10px; color: var(--dg-text);
  font-size: 18px; font-weight: 900; cursor: pointer;
  transition: all 0.15s;
}
.dg-spec-arrow:hover { background: var(--dg-accent); color: #14080a; }
.dg-spec-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.dg-spec-target {
  text-align: center; font-size: 13px; font-weight: 800;
  color: var(--dg-accent-2);
  background: rgba(0,0,0,0.6); padding: 8px;
  border-radius: 10px; border: 1px solid var(--dg-line);
}
.dg-spec-score { color: var(--dg-gold); margin-left: 6px; font-variant-numeric: tabular-nums; }
.dg-spectator-canvas {
  flex: 1; width: 100%;
  background: var(--dg-canvas-bg);
  border-radius: 8px; border: 1px solid var(--dg-line);
  display: block; min-height: 0;
}

/* 가상 조이스틱 (floating: 캔버스 어디든 터치하면 그 자리에서 등장) */
.dg-joystick {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--dg-line);
  display: none;
  pointer-events: none;
  touch-action: none;
  z-index: 5;
}
.dg-joystick-knob {
  position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--dg-accent) 0%, var(--dg-accent-2) 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px var(--dg-accent-glow);
}

/* 멀티 사이드 */
.dg-leaderboard, .dg-mini-boards-title { background: var(--dg-panel); border: 1px solid var(--dg-line); border-radius: 12px; padding: 10px 12px; }
.dg-leaderboard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dg-leaderboard-title { font-size: 13px; font-weight: 800; color: var(--dg-accent-2); letter-spacing: 0.5px; }
.dg-myrank { font-size: 12px; font-weight: 800; padding: 3px 8px; background: var(--dg-accent); color: #14080a; border-radius: 10px; font-variant-numeric: tabular-nums; }
.dg-myrank-dead { background: var(--dg-text-mute); color: var(--dg-bg); }
.dg-leaderboard-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dg-lb-row { display: grid; grid-template-columns: 22px auto 1fr auto auto; gap: 6px; align-items: center; padding: 6px 8px; background: var(--dg-bg-2); border-radius: 7px; font-size: 12px; }
/* 인게임 leaderboard (dg-leaderboard-list 안) — 아바타 컬럼 추가로 6컬럼 */
.dg-leaderboard-list .dg-lb-row {
  grid-template-columns: 20px 22px 1fr auto auto auto;
  gap: 5px;
}
.dg-leaderboard-list .dg-lb-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--dg-bg);
  border: 1px solid var(--dg-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: var(--dg-text);
  flex: 0 0 auto;
}
.dg-leaderboard-list .dg-lb-avatar-photo {
  font-size: 0; color: transparent;
}
.dg-leaderboard-list .dg-lb-avatar-initial {
  background: linear-gradient(135deg, var(--dg-accent), var(--dg-accent-2));
  color: #14080a;
}
.dg-lb-row.dg-lb-me { border: 1px solid var(--dg-accent); }
.dg-lb-row.dg-lb-dead { opacity: 0.4; }
.dg-lb-row.dg-lb-top { border-left: 3px solid var(--dg-gold); }
.dg-lb-rank { font-weight: 800; text-align: center; }
.dg-lb-nick { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-lb-score { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dg-accent-2); }
.dg-lb-hp { width: 30px; height: 5px; background: rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden; }
.dg-lb-hp-fill { height: 100%; background: linear-gradient(90deg, var(--dg-danger), var(--dg-accent-2), var(--dg-gold)); }

.dg-mini-boards { display: flex; flex-direction: column; gap: 10px; }
.dg-mini-boards-title { font-size: 13px; font-weight: 800; color: var(--dg-accent-2); margin-bottom: 8px; }
.dg-mini-board { background: var(--dg-panel); border: 1px solid var(--dg-line); border-radius: 10px; padding: 8px; }
.dg-mini-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; }
.dg-mini-rank { font-weight: 800; }
.dg-mini-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--dg-bg);
  border: 1px solid var(--dg-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  color: #14080a;
  background-image: linear-gradient(135deg, var(--dg-accent), var(--dg-accent-2));
  flex: 0 0 auto;
}
.dg-mini-avatar.dg-mini-avatar-photo {
  font-size: 0; color: transparent;
  background-image: none;
}
.dg-mini-nick { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-mini-score { font-weight: 800; color: var(--dg-accent-2); font-variant-numeric: tabular-nums; }
.dg-mini-canvas-wrap { position: relative; }
.dg-mini-canvas { width: 100%; aspect-ratio: 600/720; background: var(--dg-canvas-bg); border-radius: 6px; display: block; }
.dg-mini-dead-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: var(--dg-danger); background: rgba(0,0,0,0.6); border-radius: 6px; }
.dg-mini-board.dg-mini-dead .dg-mini-dead-overlay { display: flex; }
.dg-mini-board:not(.dg-mini-dead) .dg-mini-dead-overlay { display: none; }

/* ===== END ===== */
.dg-end-card { background: linear-gradient(145deg, var(--dg-panel) 0%, var(--dg-panel-2) 100%); border: 2px solid var(--dg-accent); border-radius: 18px; padding: 24px; max-width: 480px; margin: 24px auto; text-align: center; box-shadow: 0 12px 36px rgba(255, 107, 107, 0.2); }
.dg-end-title { font-size: 24px; font-weight: 900; background: linear-gradient(135deg, var(--dg-accent), var(--dg-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; }
.dg-end-score-label { font-size: 12px; color: var(--dg-text-dim); margin-bottom: 4px; }
.dg-end-score { font-size: 48px; font-weight: 900; color: var(--dg-accent-2); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px var(--dg-accent-glow); margin-bottom: 16px; }
.dg-end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.dg-end-stat { background: var(--dg-bg-2); border-radius: 10px; padding: 8px; }
.dg-end-stat-label { font-size: 10px; color: var(--dg-text-mute); }
.dg-end-stat-val { display: block; font-size: 16px; font-weight: 800; margin-top: 2px; }
.dg-end-rank { font-size: 13px; color: var(--dg-text-dim); margin-top: 8px; font-weight: 700; }
.dg-end-best { font-size: 12px; color: var(--dg-text-mute); margin-top: 4px; }
.dg-end-cta {
  margin-top: 14px; padding: 12px;
  background: var(--dg-bg-2); border: 1px dashed var(--dg-accent); border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.dg-end-cta-text { font-size: 13px; color: var(--dg-text); font-weight: 700; }
.dg-end-actions { display: flex; flex-direction: column; gap: 8px; max-width: 340px; margin: 16px auto 0; }

/* ===== 리더보드 (셋업 TOP10 + End mini TOP5) ===== */
.dg-lb-panel {
  max-width: 480px; margin: 16px auto 0; padding: 14px;
  background: linear-gradient(145deg, var(--dg-panel) 0%, var(--dg-panel-2) 100%);
  border: 1px solid var(--dg-line); border-radius: 14px;
}
.dg-lb-tabs-row { display: flex; gap: 4px; margin-bottom: 10px; }
.dg-lb-tab {
  flex: 1; padding: 7px 10px;
  background: var(--dg-bg-2); border: 1px solid var(--dg-line); border-radius: 8px;
  color: var(--dg-text-mute); font-size: 12px; font-weight: 800; cursor: pointer;
  transition: all 0.15s;
}
.dg-lb-tab:hover { color: var(--dg-text); }
.dg-lb-tab.active { background: var(--dg-accent); color: #14080a; border-color: var(--dg-accent); }
.dg-lb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dg-lb-row {
  display: grid; grid-template-columns: 30px 26px 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 7px 10px;
  background: var(--dg-bg-2); border-radius: 8px; font-size: 13px;
}
.dg-lb-rank { font-weight: 900; text-align: center; }
.dg-lb-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--dg-bg);
  border: 1px solid var(--dg-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: var(--dg-text);
}
.dg-lb-avatar-initial { background: linear-gradient(135deg, var(--dg-accent), var(--dg-accent-2)); color: #14080a; }
.dg-lb-nick { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-lb-primary { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dg-accent-2); }
.dg-lb-secondary { font-size: 11px; color: var(--dg-text-mute); font-variant-numeric: tabular-nums; }
.dg-lb-empty { text-align: center; padding: 16px; color: var(--dg-text-mute); font-size: 12px; }
.dg-lb-note { margin-top: 8px; font-size: 11px; color: var(--dg-text-mute); text-align: center; }
.dg-end-mini-lb { margin-top: 14px; }
.dg-end-mini-lb-title { font-size: 12px; font-weight: 800; color: var(--dg-accent-2); margin-bottom: 6px; text-align: left; }
.dg-lb-list-mini .dg-lb-row { font-size: 12px; padding: 5px 8px; }

.dg-final-ranking { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dg-final-row { display: grid; grid-template-columns: 36px 36px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; background: var(--dg-bg-2); border-radius: 10px; border: 1px solid transparent; }
.dg-final-row.dg-final-me { border-color: var(--dg-accent); box-shadow: 0 0 12px rgba(255, 77, 109, 0.25); }
.dg-final-row.r1 { background: linear-gradient(135deg, rgba(250, 204, 21, 0.16), var(--dg-bg-2)); border-color: rgba(250, 204, 21, 0.5); }
.dg-final-row.r2 { border-color: rgba(192, 200, 224, 0.4); }
.dg-final-row.r3 { border-color: rgba(255, 157, 61, 0.4); }
.dg-final-row.r1.dg-final-me { box-shadow: 0 0 14px rgba(250, 204, 21, 0.35), 0 0 10px rgba(255, 77, 109, 0.2); }
.dg-final-rank { font-size: 20px; font-weight: 900; text-align: center; }
.dg-final-nick { font-weight: 800; text-align: left; }
.dg-final-score { font-weight: 900; color: var(--dg-accent-2); }
.dg-final-me-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: rgba(255, 77, 109, 0.18);
  border: 1px solid rgba(255, 77, 109, 0.55);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #ff8095;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.dg-final-row .duo-avatar { width: 32px; height: 32px; font-size: 14px; }

/* TOAST */
.dg-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(20, 8, 10, 0.96); color: var(--dg-text); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 1px solid var(--dg-line-strong); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 3000; }
.dg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* SEO Info Card */
.dg-info-card {
  max-width: 720px; margin: 24px auto 0; padding: 22px 20px;
  background: var(--dg-panel); border: 1px solid var(--dg-line); border-radius: 14px;
  color: var(--dg-text-dim); line-height: 1.6;
}
.dg-info-card h2 { font-size: 18px; color: var(--dg-accent-2); margin: 0 0 12px; }
.dg-info-card h3 { font-size: 14px; color: var(--dg-text); margin: 16px 0 8px; font-weight: 800; }
.dg-info-card p, .dg-info-card ul, .dg-info-card ol, .dg-info-card dl { font-size: 13px; margin: 6px 0; }
.dg-info-card dl { display: grid; grid-template-columns: 90px 1fr; gap: 4px 12px; }
.dg-info-card dt { color: var(--dg-text-mute); font-weight: 700; }
.dg-info-card dd { margin: 0; }
.dg-info-card ul, .dg-info-card ol { padding-left: 20px; }
.dg-info-card a { color: var(--dg-accent); }
.dg-info-card .seo-info-tags { color: var(--dg-text-mute); font-size: 12px; }
.dg-info-card.is-hidden { display: none; }
@media (max-width: 480px) { .dg-info-card { padding: 18px 14px; margin: 16px 8px 0; } .dg-info-card dl { grid-template-columns: 80px 1fr; } }

/* 짧은 뷰포트 컴팩트 — 16:9 노트북, iPad 가로 등 */
@media (max-height: 720px){
  .dg-setup, .dg-lobby{ padding: 16px 18px 18px; }
  .dg-setup-emoji{ font-size: 36px; }
  .dg-setup-title{ font-size: 20px; }
  .dg-setup-sub{ font-size: 12px; margin-bottom: 10px; }
  .dg-setup-input{ padding: 8px 10px; margin-bottom: 8px; font-size: 14px; }
  .dg-setup-btn{ padding: 10px 14px; font-size: 14px; }
  .dg-setup-hint{ margin-top: 8px; font-size: 11px; }
  .dg-end-card{ padding: 16px; }
  .dg-end-title{ font-size: 20px; margin-bottom: 6px; }
  .dg-end-score{ font-size: 36px; margin-bottom: 10px; }
  .dg-end-stats{ gap: 6px; margin-bottom: 8px; }
  .dg-end-stat{ padding: 6px; }
  .dg-end-stat-val{ font-size: 14px; }
}
@media (max-height: 560px){
  .dg-setup-emoji{ font-size: 28px; }
  .dg-setup-title{ font-size: 17px; }
  .dg-setup-sub, .dg-setup-hint{ display: none; }
  .dg-end-score{ font-size: 28px; }
}

/* ===== 방해 패널 ===== */
.dg-interfere-panel {
  margin-top: 12px;
  background: linear-gradient(135deg, var(--dg-panel) 0%, var(--dg-panel-2) 100%);
  border: 1px solid var(--dg-line); border-radius: 12px;
  padding: 10px 12px;
}
.dg-interfere-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dg-interfere-title { font-size: 12px; font-weight: 800; color: var(--dg-accent-2); letter-spacing: 0.5px; }
.dg-interfere-pct { font-size: 11px; font-weight: 800; color: var(--dg-text-mute); font-variant-numeric: tabular-nums; }
.dg-interfere-bar { height: 8px; background: rgba(0,0,0,0.5); border-radius: 6px; overflow: hidden; border: 1px solid var(--dg-line); }
.dg-interfere-fill {
  height: 100%; transition: width 0.2s linear;
  background: linear-gradient(90deg, #ff4d6d 0%, #ffd166 100%);
}
.dg-interfere-fill.dg-interfere-ready { box-shadow: 0 0 12px rgba(255,209,102,0.8); animation: dg-interfere-glow 0.8s ease-in-out infinite; }
@keyframes dg-interfere-glow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
.dg-interfere-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.dg-interfere-btn {
  padding: 8px 6px;
  background: var(--dg-bg-2); border: 1px solid var(--dg-line); border-radius: 8px;
  color: var(--dg-text); font-size: 12px; font-weight: 800; cursor: pointer;
  transition: all 0.15s;
}
.dg-interfere-btn:not(:disabled):hover { background: var(--dg-accent); color: #14080a; border-color: var(--dg-accent); }
.dg-interfere-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dg-interfere-hint { font-size: 11px; color: var(--dg-text-mute); margin-top: 6px; line-height: 1.4; }

/* 방해 효과 시각화 (캔버스 오버레이) */
.dg-canvas-wrap.dg-effect-darken::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(0,0,0,0.55); border-radius: 12px; z-index: 5;
  animation: dg-fx-fade 4s ease-out forwards;
}
.dg-canvas-wrap.dg-effect-invert .dg-canvas { filter: invert(1) hue-rotate(180deg); transition: filter 0.2s; }
.dg-canvas-wrap.dg-effect-slow::after {
  content: "🐢 SLOW"; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.7); color: #5fc8ff; padding: 4px 10px; border-radius: 12px;
  font-weight: 900; font-size: 12px; z-index: 6;
  animation: dg-fx-fade 4s ease-out forwards;
}
.dg-canvas-wrap.dg-effect-bulletStorm::after {
  content: "💥 탄막↑"; position: absolute; top: 6px; right: 6px;
  background: rgba(255,77,109,0.85); color: #fff; padding: 4px 10px; border-radius: 12px;
  font-weight: 900; font-size: 12px; z-index: 6;
  animation: dg-fx-fade 4s ease-out forwards;
}
@keyframes dg-fx-fade { 0%,90% { opacity: 1; } 100% { opacity: 0; } }

/* 공통 아바타 */
.duo-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 800; flex-shrink: 0; vertical-align: middle; text-transform: uppercase; line-height: 1; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.duo-avatar .duo-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo-avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.duo-avatar--md { width: 32px; height: 32px; font-size: 14px; }