/* ==========================================================
   DUO 수라상 (한식 진화형 합성 게임) v20260515_29
   prefix: .mg-
   - 멀티 확장 hooks: .mg-multi-side, .mg-leaderboard, .mg-mini-board (솔로에선 .mg-hidden)
   - 중앙 정렬 정책: 광고를 viewport center 기준으로 calc() 배치 → 스크롤바 유무와 무관 100% 대칭
   ========================================================== */

.mg-hidden { display: none !important; }

/* 세로 스크롤바 항상 표시 + 모던 브라우저는 gutter 예약 — 어떤 환경에서도 viewport 폭 일관됨 */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  overflow-x: hidden;
}

:root {
  --mg-bg: #1a1410;
  --mg-bg-2: #2a1f17;
  --mg-panel: #2d231a;
  --mg-panel-2: #3a2c20;
  --mg-line: rgba(255, 200, 120, 0.15);
  --mg-text: #f5e9d4;
  --mg-text-dim: #c9b89a;
  --mg-text-mute: #8a7860;
  --mg-accent: #ff8c42;
  --mg-accent-2: #ffc14a;
  --mg-danger: #e74c3c;
  --mg-success: #66c469;
}

/* ============ PAGE SHELL ============
   광고는 position:fixed로 normal flow 완전 제거.
   .mg-page-shell은 flex 중심 정렬로 viewport 중앙에 .mg-app 고정.
   → 광고 유무·표시 여부와 무관하게 게임 위치 100% viewport 정중앙.
   → 모바일: 광고 자동 숨김.
*/
.mg-page-shell {
  position: relative;
  min-height: calc(100vh - 60px);
  background: linear-gradient(180deg, var(--mg-bg) 0%, var(--mg-bg-2) 100%);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.mg-app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 12px 40px;
  color: var(--mg-text);
  position: relative;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: 0;
}

/* 멀티 모드: 게임 영역 wider */
body.mg-in-room .mg-app {
  max-width: 480px;
}
@media (min-width: 1024px) {
  body.mg-in-room .mg-app {
    max-width: 1100px;
  }
}

/* 사이드 광고: viewport 중앙(50%) 기준 calc()로 좌/우 배치
   → 게임도 viewport 중앙, 광고도 viewport 중앙 기준 → 어떤 스크롤바 환경에서도 완벽 대칭 */
.mg-side-ad { display: none; }

/* 솔로 모드: viewport 1200+ (게임 480 + 좌우 광고 200 + 24 간격 = 928 + 여유) */
@media (min-width: 1200px) {
  body:not(.mg-in-room) .mg-side-ad {
    display: block;
    position: fixed;
    top: 80px;
    width: 200px;
    height: 600px;
    z-index: 1;
  }
  /* 게임 반폭(240) + 간격(24) + 광고폭(200) = 464 */
  body:not(.mg-in-room) .mg-side-ad-left  { left: calc(50% - 464px); }
  body:not(.mg-in-room) .mg-side-ad-right { left: calc(50% + 264px); } /* 50% + 게임반폭 + 간격 */
}

/* 멀티 모드: viewport 1548+ (게임 1100 + 좌우 광고 180 + 24 간격) */
@media (min-width: 1548px) {
  body.mg-in-room .mg-side-ad {
    display: block;
    position: fixed;
    top: 80px;
    width: 180px;
    height: 600px;
    z-index: 1;
  }
  /* 게임 반폭(550) + 간격(16) + 광고폭(180) = 746 */
  body.mg-in-room .mg-side-ad-left  { left: calc(50% - 746px); }
  body.mg-in-room .mg-side-ad-right { left: calc(50% + 566px); } /* 50% + 게임반폭 + 간격 */
}

/* ============ SCREENS ============ */
.mg-screen { display: none; }
.mg-screen.active { display: block; }

/* ============ SETUP ============ */
.mg-setup {
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 18px;
  padding: 32px 24px;
  margin-top: 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mg-setup-emoji {
  font-size: 64px;
  margin-bottom: 8px;
}
.mg-setup-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--mg-accent-2);
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.mg-setup-sub {
  font-size: 14px;
  color: var(--mg-text-dim);
  margin-bottom: 20px;
}
.mg-stage-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  margin-bottom: 22px;
  padding: 12px;
  background: var(--mg-bg);
  border-radius: 12px;
}
.mg-stage-preview span:nth-child(odd) {
  font-size: 22px;
}
.mg-stage-preview span:nth-child(even) {
  color: var(--mg-text-mute);
  font-size: 12px;
}
.mg-setup-input {
  width: 100%;
  max-width: 260px;
  padding: 12px 14px;
  background: var(--mg-bg);
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  color: var(--mg-text);
  font-size: 15px;
  margin-bottom: 14px;
  outline: none;
  text-align: center;
}
.mg-setup-input:focus {
  border-color: var(--mg-accent);
}
.mg-setup-btn {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  padding: 14px;
  background: linear-gradient(135deg, var(--mg-accent) 0%, var(--mg-accent-2) 100%);
  color: #1a1410;
  font-size: 18px;
  font-weight: 900;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.mg-setup-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 140, 66, 0.4); }
.mg-setup-btn:active { transform: translateY(0); }
.mg-setup-btn-demo {
  margin-top: 8px;
  background: var(--mg-panel-2);
  color: var(--mg-text);
  font-size: 15px;
  box-shadow: none;
  border: 1px solid var(--mg-line);
}
.mg-setup-btn-demo:hover { background: var(--mg-panel); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.mg-setup-btn-challenge {
  margin-top: 8px;
  background: linear-gradient(135deg, #b8860b 0%, #daa520 50%, #ffd700 100%);
  color: #1a1410;
  box-shadow: 0 4px 12px rgba(218, 165, 32, 0.35);
}
.mg-setup-btn-challenge:hover { box-shadow: 0 6px 16px rgba(218, 165, 32, 0.5); }

.mg-setup-season-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: var(--mg-panel-2);
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mg-text-dim);
}
.mg-setup-season-label select {
  flex: 0 1 auto;
  min-width: 160px;
  max-width: 220px;
  font-size: 13px;
  padding: 6px 10px;
  background: var(--mg-bg);
  color: var(--mg-text);
  border: 1px solid var(--mg-line);
  border-radius: 8px;
}
.mg-setup-hint {
  margin-top: 16px;
  font-size: 13px;
  color: var(--mg-text-mute);
  line-height: 1.6;
}

/* ============ HUD ============ */
.mg-hud {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 12px;
  margin-bottom: 10px;
}
.mg-hud > div {
  text-align: center;
}
.mg-hud-score-label,
.mg-hud-combo-label,
.mg-hud-next-label {
  font-size: 11px;
  color: var(--mg-text-mute);
  margin-bottom: 2px;
  font-weight: 700;
  letter-spacing: 1px;
}
.mg-hud-score {
  font-size: 22px;
  font-weight: 900;
  color: var(--mg-accent-2);
  font-variant-numeric: tabular-nums;
}
.mg-hud-combo {
  font-size: 22px;
  font-weight: 900;
  color: var(--mg-text);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s, transform 0.2s;
}
.mg-hud-combo.active {
  color: var(--mg-accent);
  transform: scale(1.1);
}
.mg-hud-next {
  font-size: 24px;
  line-height: 1;
}

/* ============ GAME BOX ============ */
.mg-box-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.mg-canvas {
  background: linear-gradient(180deg, #f5e6d3 0%, #e8d5b8 100%);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 2px 6px rgba(0,0,0,0.1);
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: block;
  width: 360px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 360 / 540;
}

/* ============ STAGE ROW (현재 도달 단계 표시) ============ */
.mg-stage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 12px;
  padding: 8px;
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 10px;
}
.mg-stage-chip {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--mg-bg);
  border-radius: 6px;
  opacity: 0.3;
  transition: opacity 0.3s, transform 0.3s;
}
.mg-stage-chip.unlocked {
  opacity: 1;
}
.mg-stage-chip.new {
  animation: mg-chip-pop 0.6s ease-out;
  background: var(--mg-accent);
}
@keyframes mg-chip-pop {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255, 140, 66, 0.7); }
  40%  { transform: scale(1.4); box-shadow: 0 0 0 12px rgba(255, 140, 66, 0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255, 140, 66, 0); }
}

/* ============ GAME OVER ============ */
.mg-end-card {
  background: var(--mg-panel);
  border: 2px solid var(--mg-accent);
  border-radius: 18px;
  padding: 32px 20px;
  text-align: center;
  margin-top: 24px;
  box-shadow: 0 8px 24px rgba(255, 140, 66, 0.2);
}
.mg-end-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--mg-text-dim);
  margin-bottom: 12px;
}
.mg-end-score-label {
  font-size: 12px;
  color: var(--mg-text-mute);
  margin-bottom: 4px;
  letter-spacing: 2px;
}
.mg-end-score {
  font-size: 48px;
  font-weight: 900;
  color: var(--mg-accent-2);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.mg-end-stage {
  font-size: 16px;
  color: var(--mg-text);
  margin-bottom: 12px;
}
.mg-end-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--mg-bg);
  border-radius: 10px;
}
.mg-end-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}
.mg-end-stat-label {
  font-size: 11px;
  color: var(--mg-text-mute);
  letter-spacing: 0.5px;
}
.mg-end-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--mg-accent-2);
  font-variant-numeric: tabular-nums;
}
.mg-end-rank {
  font-size: 13px;
  color: var(--mg-text-dim);
}
.mg-end-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.mg-btn-primary,
.mg-btn-secondary,
.mg-btn-ghost {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.mg-btn-primary {
  background: linear-gradient(135deg, var(--mg-accent) 0%, var(--mg-accent-2) 100%);
  color: #1a1410;
}
.mg-btn-secondary {
  background: var(--mg-panel-2);
  color: var(--mg-text);
  border: 1px solid var(--mg-line);
}
.mg-btn-ghost {
  background: transparent;
  color: var(--mg-text-dim);
  border: 1px solid var(--mg-line);
}

/* ============ TOAST ============ */
.mg-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 14, 8, 0.95);
  color: var(--mg-text);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 14px;
  border: 1px solid var(--mg-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
  max-width: 90%;
  text-align: center;
}
.mg-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ PLAY LAYOUT ============
   솔로: 단일 컬럼, 게임 가운데
   멀티(body.mg-in-room): 데스크탑 ≥1024px에서 3-col grid (좌 리더보드 / 중 게임 / 우 미니보드)
*/
.mg-play-layout {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 솔로/모바일: 게임 가로 중앙 */
  gap: 12px;
}
.mg-play-main {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 360px;        /* 캔버스 폭과 동일 — 좌우 절대 치우치지 않음 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* 좌/우 사이드 — 모바일에서 전체 폭, 데스크탑에서 그리드 컬럼 */
.mg-multi-left,
.mg-multi-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 360px;
}

/* 멀티 모드 전용 3-col grid (호스트가 솔로 grid에 영향 주지 않도록 .mg-in-room scope) */
@media (min-width: 1024px) {
  body.mg-in-room .mg-play-layout {
    display: grid;
    grid-template-columns: 260px 360px 260px;
    gap: 20px;
    align-items: start;
    justify-content: center;
  }
  body.mg-in-room .mg-play-main {
    width: 360px;
    max-width: 360px;
  }
  body.mg-in-room .mg-multi-left,
  body.mg-in-room .mg-multi-right {
    width: 260px;
    max-width: 260px;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}

/* ============ LEADERBOARD (1~8등) ============ */
.mg-leaderboard {
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 12px;
  padding: 12px;
}
.mg-leaderboard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.mg-leaderboard-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--mg-accent-2);
  letter-spacing: 0.5px;
}
.mg-myrank {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  background: var(--mg-accent);
  color: #1a1410;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.mg-myrank-dead {
  background: var(--mg-text-mute);
  color: var(--mg-bg);
}
.mg-leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mg-lb-row {
  display: grid;
  grid-template-columns: 22px 1fr auto 22px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--mg-bg);
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.2s, transform 0.2s;
}
.mg-lb-rank {
  font-weight: 900;
  color: var(--mg-text-mute);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.mg-lb-row:nth-child(1) .mg-lb-rank { color: #ffd700; }
.mg-lb-row:nth-child(2) .mg-lb-rank { color: #c0c0c0; }
.mg-lb-row:nth-child(3) .mg-lb-rank { color: #cd7f32; }
.mg-lb-nick {
  color: var(--mg-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-lb-score {
  color: var(--mg-accent-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.mg-lb-stage {
  font-size: 14px;
  text-align: center;
}
.mg-lb-me {
  background: var(--mg-panel-2);
  outline: 1px solid var(--mg-accent);
}
.mg-lb-top {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.18) 0%, var(--mg-bg) 70%);
}
.mg-lb-dead {
  opacity: 0.45;
}
.mg-lb-dead .mg-lb-nick { text-decoration: line-through; }

/* ============ MINI BOARDS (자신 제외 상위 3명) ============ */
.mg-mini-boards-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--mg-text-mute);
  letter-spacing: 0.5px;
  margin-top: -4px;
}
.mg-mini-boards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 1024px) {
  .mg-mini-boards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.mg-mini-board {
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  padding: 8px;
  overflow: hidden;
  transition: opacity 0.3s, filter 0.3s, transform 0.3s;
}
.mg-mini-board.mg-mini-dead {
  opacity: 0.55;
  filter: grayscale(0.7);
}
.mg-mini-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
}
.mg-mini-rank {
  font-size: 10px;
  font-weight: 900;
  color: var(--mg-accent-2);
  background: var(--mg-bg);
  border-radius: 6px;
  padding: 2px 6px;
  flex: 0 0 auto;
}
.mg-mini-nick {
  color: var(--mg-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.mg-mini-score {
  color: var(--mg-accent-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  font-size: 12px;
}
.mg-mini-canvas-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.mg-mini-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #f5e6d3;
}
.mg-mini-dead-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-weight: 900;
  letter-spacing: 4px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.mg-mini-dead .mg-mini-dead-overlay { display: flex; }

.mg-mini-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
}
.mg-mini-stage {
  flex: 0 0 auto;
  font-size: 13px;
}
.mg-mini-stage-name {
  font-size: 10px;
  color: var(--mg-text-dim);
  margin-left: 2px;
}
.mg-mini-danger {
  flex: 1 1 auto;
  height: 6px;
  background: var(--mg-bg);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.mg-mini-danger-fill {
  height: 100%;
  width: 0%;
  background: #66c469;
  transition: width 0.3s, background 0.2s;
}

/* ============ MULTI HUD: 타이머 + 방해 게이지 ============ */
.mg-game-timer {
  font-size: 18px;
  font-weight: 800;
  color: var(--mg-accent-2);
  text-align: center;
  padding: 6px 12px;
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  transition: color 0.2s, background 0.2s, transform 0.2s;
}
.mg-game-timer-urgent {
  color: var(--mg-accent);
  background: var(--mg-panel-2);
  animation: mg-timer-pulse 1s ease-in-out infinite;
}
.mg-game-timer-critical {
  color: #fff;
  background: var(--mg-danger);
  animation: mg-timer-pulse 0.5s ease-in-out infinite;
}
@keyframes mg-timer-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.mg-skill-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 10px;
}
.mg-skill-bar {
  flex: 1 1 auto;
  height: 12px;
  background: var(--mg-bg);
  border-radius: 999px;
  overflow: hidden;
}
.mg-skill-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #66c469 0%, var(--mg-accent) 60%, var(--mg-accent-2) 100%);
  transition: width 0.25s;
}
.mg-skill-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  background: var(--mg-panel-2);
  color: var(--mg-text-mute);
  cursor: not-allowed;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
.mg-skill-btn.mg-skill-ready {
  background: linear-gradient(135deg, var(--mg-danger) 0%, var(--mg-accent) 100%);
  color: #fff;
  cursor: pointer;
  animation: mg-skill-glow 1.2s ease-in-out infinite;
}
.mg-skill-btn.mg-skill-ready:hover { transform: translateY(-1px); }
.mg-skill-btn.mg-skill-ready:active { transform: translateY(0); }
@keyframes mg-skill-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
}

/* ============ 폭탄 스킬 (솔로 자가 구원기) ============ */
.mg-bomb-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 10px;
}
.mg-bomb-bar {
  flex: 1 1 auto;
  height: 10px;
  background: var(--mg-bg);
  border-radius: 999px;
  overflow: hidden;
}
.mg-bomb-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #555 0%, #ff6b35 60%, #ffaa3c 100%);
  transition: width 0.25s;
}
.mg-bomb-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  background: var(--mg-panel-2);
  color: var(--mg-text-mute);
  cursor: not-allowed;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
.mg-bomb-btn.mg-bomb-ready {
  background: linear-gradient(135deg, #ff6b35 0%, #ffaa3c 100%);
  color: #1a1410;
  cursor: pointer;
  animation: mg-bomb-glow 1.2s ease-in-out infinite;
}
.mg-bomb-btn.mg-bomb-ready:hover { transform: translateY(-1px); }
.mg-bomb-btn.mg-bomb-ready:active { transform: translateY(0); }
@keyframes mg-bomb-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); }
}

/* 방해 받았을 때 캔버스 흔들기 */
.mg-canvas.mg-shake {
  animation: mg-canvas-shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes mg-canvas-shake {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-6px); }
  40%,60% { transform: translateX(6px); }
}

/* ============ LOBBY (멀티 대기실) ============ */
.mg-lobby {
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 18px;
  padding: 24px 20px;
  margin-top: 24px;
  color: var(--mg-text);
}
.mg-lobby-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.mg-lobby-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--mg-accent-2);
}
.mg-lobby-invite {
  background: var(--mg-bg);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.mg-lobby-invite-label {
  font-size: 11px;
  color: var(--mg-text-mute);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.mg-lobby-invite-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mg-lobby-invite-code {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--mg-accent-2);
  flex: 1 1 120px;
  min-width: 0;
}
.mg-lobby-options {
  margin-bottom: 12px;
}
.mg-lobby-opt-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--mg-text);
  font-weight: 700;
  gap: 12px;
}
.mg-lobby-opt-label select {
  padding: 6px 10px;
  font-weight: 700;
}
.mg-lobby-opt-hint {
  font-size: 11px;
  color: var(--mg-text-mute);
  margin-top: 4px;
}
.mg-lobby-roster-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mg-text-mute);
  margin: 14px 0 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.mg-lobby-roster {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mg-roster-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--mg-bg);
  border-radius: 8px;
  font-size: 14px;
}
.mg-roster-me {
  outline: 1px solid var(--mg-accent);
  background: var(--mg-panel-2);
}
.mg-roster-name {
  color: var(--mg-text);
  font-weight: 700;
}
.mg-roster-tags {
  display: flex;
  gap: 4px;
  font-size: 11px;
}
.mg-roster-host { color: #ffd700; font-weight: 800; }
.mg-roster-guest { color: var(--mg-text-mute); }
.mg-roster-off { color: var(--mg-danger); }

.mg-login-warn {
  background: rgba(255, 140, 66, 0.12);
  border: 1px solid rgba(255, 140, 66, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--mg-text);
  margin-bottom: 12px;
}

/* ============ END (최종 순위) ============ */
.mg-final-ranking {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mg-final-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--mg-bg);
  border-radius: 8px;
  font-size: 14px;
}
.mg-final-rank {
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}
.mg-final-row:nth-child(1) { background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), var(--mg-bg) 70%); }
.mg-final-row:nth-child(2) { background: linear-gradient(90deg, rgba(192, 192, 192, 0.18), var(--mg-bg) 70%); }
.mg-final-row:nth-child(3) { background: linear-gradient(90deg, rgba(205, 127, 50, 0.18), var(--mg-bg) 70%); }
.mg-final-me { outline: 1px solid var(--mg-accent); }
.mg-final-nick { color: var(--mg-text); font-weight: 700; }
.mg-final-score { color: var(--mg-accent-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.mg-final-stage { font-size: 12px; color: var(--mg-text-dim); }

/* ============ INFO CARD (셋업 화면 SEO 설명 박스) ============ */
.mg-info-card {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(10, 16, 28, 0.72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  color: var(--mg-text-dim);
  line-height: 1.7;
}
.mg-info-card h2 {
  font-size: 18px;
  color: var(--mg-accent-2);
  margin: 0 0 12px;
}
.mg-info-card h3 {
  font-size: 14px;
  color: var(--mg-text);
  margin: 16px 0 8px;
  letter-spacing: 0.5px;
}
.mg-info-card p,
.mg-info-card ul,
.mg-info-card dl {
  font-size: 13px;
  margin: 6px 0;
}
.mg-info-card dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 4px 12px;
}
.mg-info-card dt {
  color: var(--mg-text-mute);
  font-weight: 700;
}
.mg-info-card dd { margin: 0; }
.mg-info-card ul { padding-left: 20px; }
.mg-info-card a { color: var(--mg-accent); }
.mg-info-card.is-hidden { display: none; }
@media (max-width: 480px) {
  .mg-info-card { padding: 18px 14px; margin: 16px 8px 0; }
  .mg-info-card dl { grid-template-columns: 80px 1fr; }
}

/* ============ LEADERBOARD PANEL (셋업 화면 + 게임오버 미니) ============ */
.mg-lb-panel {
  margin-top: 16px;
  padding: 14px;
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 14px;
  max-width: 480px;
}
.mg-lb-tabs-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.mg-lb-tabs-sub {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mg-line);
}
.mg-lb-tab {
  flex: 1;
  padding: 8px 10px;
  background: var(--mg-bg);
  color: var(--mg-text-dim);
  border: 1px solid var(--mg-line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mg-lb-tab:hover { background: var(--mg-panel-2); color: var(--mg-text); }
.mg-lb-tab.active {
  background: var(--mg-accent);
  color: #1a1410;
  border-color: var(--mg-accent);
}
.mg-lb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
}
.mg-lb-row {
  display: grid;
  grid-template-columns: 30px 26px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--mg-bg);
  border-radius: 8px;
  font-size: 13px;
}

/* ===== 관전 모드 ===== */
.mg-box-wrap { position: relative; }
.mg-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);
}
.mg-spectator.mg-hidden { display: none; }
.mg-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;
}
.mg-spec-close:hover { background: rgba(255,77,77,.6); }
.mg-spec-close:active { transform: scale(.92); }
.mg-spectator-head {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; gap: 8px;
}
.mg-spec-arrow {
  width: 40px; height: 40px;
  background: var(--mg-panel); border: 1px solid var(--mg-accent);
  border-radius: 10px; color: var(--mg-text);
  font-size: 18px; font-weight: 900; cursor: pointer;
  transition: all 0.15s;
}
.mg-spec-arrow:hover { background: var(--mg-accent); color: #14080a; }
.mg-spec-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.mg-spec-target {
  text-align: center; font-size: 13px; font-weight: 800;
  color: var(--mg-accent-2);
  background: rgba(0,0,0,0.6); padding: 8px;
  border-radius: 10px; border: 1px solid var(--mg-line);
}
.mg-spec-score { color: #ffd166; margin-left: 6px; font-variant-numeric: tabular-nums; }
.mg-spectator-canvas {
  flex: 1; width: 100%;
  background: #0a0a0f;
  border-radius: 8px; border: 1px solid var(--mg-line);
  display: block; min-height: 0;
}
.mg-lb-row .mg-lb-rank {
  font-weight: 800;
  color: var(--mg-accent-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mg-lb-row .mg-lb-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--mg-bg-2);
  border: 1px solid var(--mg-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
}
.mg-lb-row .mg-lb-avatar-initial {
  background: linear-gradient(135deg, var(--mg-accent), var(--mg-accent-2));
  color: var(--mg-bg);
}
.mg-lb-row .mg-lb-nick {
  font-weight: 700;
  color: var(--mg-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-lb-row .mg-lb-primary {
  font-weight: 800;
  color: var(--mg-text);
  font-variant-numeric: tabular-nums;
}
.mg-lb-row .mg-lb-secondary {
  font-size: 12px;
  color: var(--mg-text-mute);
}
.mg-lb-empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--mg-text-mute);
  font-size: 13px;
}
.mg-lb-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--mg-text-mute);
  line-height: 1.5;
}
.mg-lb-list-mini .mg-lb-row { padding: 6px 8px; font-size: 12px; }

/* ============ END CARD EXTRAS ============ */
.mg-end-best {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mg-text-mute);
  text-align: center;
}
.mg-end-cta {
  margin-top: 12px;
  padding: 14px;
  background: var(--mg-panel);
  border: 1px solid var(--mg-accent);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}
.mg-end-cta-text {
  font-size: 13px;
  color: var(--mg-text);
  line-height: 1.5;
}
.mg-end-mini-lb {
  margin-top: 16px;
  padding: 12px;
  background: var(--mg-panel);
  border: 1px solid var(--mg-line);
  border-radius: 12px;
  max-width: 480px;
}
.mg-end-mini-lb-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--mg-accent-2);
  margin-bottom: 8px;
  text-align: center;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 380px) {
  .mg-hud-score, .mg-hud-combo { font-size: 18px; }
  .mg-end-score { font-size: 40px; }
}

/* 짧은 뷰포트 컴팩트 */
@media (max-height: 720px){
  .mg-setup{ padding: 14px 18px; }
  .mg-setup-emoji{ font-size: 36px; }
  .mg-setup-title{ font-size: 20px; }
  .mg-setup-sub{ font-size: 12px; margin-bottom: 8px; }
  .mg-setup-input{ padding: 8px 10px; margin-bottom: 8px; font-size: 14px; }
  .mg-setup-btn{ padding: 10px 14px; font-size: 14px; }
}
@media (max-height: 560px){
  .mg-setup-emoji{ font-size: 28px; }
  .mg-setup-title{ font-size: 17px; }
  .mg-setup-sub{ display: none; }
}

/* ============ DUO 공통 아바타 (multi-avatar.js) ============
   profile-utils 기반. img가 있으면 그대로, 없으면 이니셜 + deterministic hsl 배경.
   여러 멀티 게임이 같은 .duo-avatar 클래스 공유.
*/
.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--initial { letter-spacing: 0; }
.duo-avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.duo-avatar--md { width: 32px; height: 32px; font-size: 14px; }
.duo-avatar--lg { width: 48px; height: 48px; font-size: 20px; }

/* 멀티 row에서 아바타 정렬 — grid에 안 끼이도록 inline-flex 그대로 */
.mg-roster-row { display: flex; align-items: center; gap: 8px; }
.mg-roster-row .mg-roster-name { flex: 1; text-align: left; }
.mg-kick-btn {
  margin-left: 8px;
  width: 24px; height: 24px;
  background: rgba(231,76,60,0.15); border: 1px solid #e74c3c;
  border-radius: 6px; color: #e74c3c;
  font-size: 11px; font-weight: 900; cursor: pointer;
  transition: all 0.15s;
}
.mg-kick-btn:hover { background: #e74c3c; color: #fff; }
.mg-lb-row { display: grid; grid-template-columns: 22px 24px 1fr auto auto; gap: 6px; align-items: center; }
.mg-mini-head { display: flex; align-items: center; gap: 6px; }
.mg-mini-head .mg-mini-rank { font-weight: 800; }
.mg-mini-head .mg-mini-nick { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-final-row { display: grid; grid-template-columns: 36px auto 1fr auto auto; gap: 8px; align-items: center; }

/* ============ 방해모드 함정 시각 효과 (v20260516_3) ============ */

/* 기름칠 — 캔버스에 무지개 광택 오버레이 */
.mg-canvas.mg-oil-active {
  filter: brightness(1.05) saturate(1.2);
  box-shadow:
    inset 0 0 40px rgba(255, 200, 100, 0.25),
    0 0 12px rgba(255, 200, 100, 0.5);
  animation: mg-oil-shimmer 1.5s linear infinite;
}
@keyframes mg-oil-shimmer {
  0%   { box-shadow: inset 0 0 40px rgba(255, 200, 100, 0.25), 0 0 12px rgba(255, 200, 100, 0.5); }
  50%  { box-shadow: inset 0 0 50px rgba(180, 220, 255, 0.3), 0 0 16px rgba(180, 220, 255, 0.55); }
  100% { box-shadow: inset 0 0 40px rgba(255, 200, 100, 0.25), 0 0 12px rgba(255, 200, 100, 0.5); }
}

/* 먹구름 — 보드 일부 영역 반투명 가림 */
.mg-cloud-overlay {
  position: absolute;
  left: 0; right: 0;
  height: 45%;
  pointer-events: none;
  z-index: 10;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(60, 60, 70, 0.65) 0%, rgba(60, 60, 70, 0.35) 40%, transparent 70%),
    radial-gradient(ellipse at 70% 50%, rgba(80, 80, 90, 0.6) 0%, rgba(80, 80, 90, 0.3) 40%, transparent 70%),
    radial-gradient(ellipse at 50% 30%, rgba(50, 50, 60, 0.55) 0%, transparent 50%);
  backdrop-filter: blur(2px);
  animation: mg-cloud-drift 3s ease-in-out;
  border-radius: 14px;
}
.mg-cloud-overlay[data-side="top"] { top: 0; }
.mg-cloud-overlay[data-side="bottom"] { bottom: 0; }
@keyframes mg-cloud-drift {
  0%   { opacity: 0; transform: translateX(-20%); }
  20%  { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; transform: translateX(8%); }
  100% { opacity: 0; transform: translateX(20%); }
}
/* box-wrap이 position:relative 보장 — cloud absolute가 보드 안에 갇히게 */
.mg-box-wrap { position: relative; }