/* ===== 팟플 아이돌 매니지먼트 ===== */

/* ─── 이벤트 스크린 (보드 센터 전광판) ─────────── */
/* 보드 뷰포트(position:absolute 부모) 안에 박히는 요소 */
#idolEventScreen {
  position: absolute;
  z-index: 120;          /* 셀·토큰 위, 다이스 아래 */
  /* 정사각형 → rotate(-45deg) → scale(1,0.5) = 보드 중앙 2:1 다이아몬드 */
  transform: scale(1, 0.5) rotate(-45deg);
  transform-origin: center center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* 전광판 테두리 발광 */
  box-shadow:
    0 0  16px 3px  rgba(255, 210,  70, 0.95),
    0 0  40px 10px rgba(255, 140,  20, 0.65),
    0 0  80px 24px rgba(180,  60, 255, 0.30);
  border: 1.5px solid rgba(255, 230, 100, 0.80);
}
#idolEventScreen.ies-on {
  opacity: 1;
}

/* 스프라이트 캔버스 */
#idolEventCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

#idolEventVideo {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

#idolEventScreen.ies-video-mode #idolEventCanvas {
  display: none;
}

#idolEventScreen.ies-video-mode #idolEventVideo {
  display: block;
}

.ies-train-overlay {
  position: absolute;
  left: 50%;
  bottom: 16%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(135deg, rgba(8, 8, 16, 0.68), rgba(0, 0, 0, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, 8px) scale(0.94);
  opacity: 0;
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(.2,.9,.2,1.1);
}

.ies-train-overlay.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.ies-train-overlay.tone-talent {
  border-color: rgba(0, 238, 255, 0.78);
  box-shadow: 0 0 16px rgba(0, 238, 255, 0.45), 0 8px 22px rgba(0, 0, 0, 0.55);
}

.ies-train-overlay.tone-looks {
  border-color: rgba(255, 117, 189, 0.82);
  box-shadow: 0 0 16px rgba(255, 117, 189, 0.45), 0 8px 22px rgba(0, 0, 0, 0.55);
}

.ies-train-overlay.tone-fame {
  border-color: rgba(255, 214, 84, 0.84);
  box-shadow: 0 0 16px rgba(255, 214, 84, 0.48), 0 8px 22px rgba(0, 0, 0, 0.55);
}

.ies-train-overlay.tone-money {
  border-color: rgba(126, 255, 166, 0.82);
}

.ies-train-overlay.tone-favor {
  border-color: rgba(255, 120, 199, 0.82);
}

.ies-train-overlay-emoji {
  font-size: 12px;
}

.ies-train-overlay-label {
  font-size: 11px;
  opacity: 0.9;
}

.ies-train-overlay-gain {
  font-size: 13px;
  color: #fff7b5;
  text-shadow: 0 0 10px rgba(255, 223, 117, 0.78);
}

/* LED 도트 매트릭스 텍스처 */
.ies-led {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0) 38%, rgba(0,0,0,0.60) 38%);
  background-size: 5px 5px;
}

/* Mobile: lower billboard effect intensity so the video remains readable */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  #idolEventScreen {
    box-shadow:
      0 0 9px 2px rgba(255, 210, 70, 0.45),
      0 0 20px 6px rgba(255, 140, 20, 0.28),
      0 0 34px 11px rgba(180, 60, 255, 0.14);
    border-color: rgba(255, 230, 100, 0.45);
  }

  .ies-led {
    opacity: 0.32;
    background-image:
      radial-gradient(circle, rgba(0,0,0,0) 44%, rgba(0,0,0,0.34) 44%);
    background-size: 6px 6px;
  }

  #idolEventScreen.ies-video-mode .ies-led {
    opacity: 0.18;
  }

  .ies-train-overlay {
    background: linear-gradient(135deg, rgba(8, 8, 16, 0.44), rgba(0, 0, 0, 0.62));
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3);
  }
}
/* ─── 이벤트 스크린 끝 ─────────────────────────── */

/* ─── 기본 레이아웃 ─────────────────────────── */
#idolGame {
  background: transparent; /* 씬 배경 오버레이가 담당 */
  overflow: hidden;
  flex-direction: column;
  height: 100%;
  position: relative; /* 다이스 오버레이 기준점 */
  isolation: isolate;  /* 독립 stacking context → 배경 z-index가 외부와 섞이지 않음 */
}

/* ─── 씬 배경 오버레이 ───────────────────────── */
/* JS가 동적으로 생성하는 #idolBgOverlay div 스타일 */
/* (inline style로 제어하므로 이 섹션은 최소화) */

/* ─── 3D 다이스 오버레이 ────────────────────── */
.idol-dice-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 16, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: idolDiceFadeIn 0.18s ease;
}
@keyframes idolDiceFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.idol-dice-3d-wrap {
  width: min(88vw, 360px);
  height: min(55vw, 230px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,215,0,0.15);
}
.idol-dice-3d-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.idol-dice-result-badge {
  margin-top: 18px;
  font-size: 26px;
  letter-spacing: 0.08em;
  color: #fff;
  font-family: 'Black Han Sans', sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(6px);
  text-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.idol-dice-result-badge.visible {
  opacity: 1;
  transform: translateY(0);
}
.idol-dice-result-badge.double {
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,0.8);
}

/* ── 가로모드: 주사위 오버레이 컴팩트 ── */
@media (max-height: 500px) and (orientation: landscape) {
  .idol-dice-overlay {
    background: rgba(8, 8, 16, 0.70) !important;
  }
  .idol-dice-3d-wrap {
    width: min(50vw, 280px) !important;
    height: min(30vw, 160px) !important;
    border-radius: 12px !important;
  }
  .idol-dice-result-badge {
    margin-top: 8px !important;
    font-size: 20px !important;
  }
}

/* ─── 헤더 ──────────────────────────────────── */
.idol-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  gap: 8px;
}

.idol-header-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 16px;
  color: #ffd700;
  letter-spacing: 0.03em;
}

.idol-turn-badge {
  font-size: 11px;
  color: #aaa;
  background: rgba(255,255,255,0.08);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ─── 자원 바 ───────────────────────────────── */
.idol-resource-bar {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.idol-resource-bar::-webkit-scrollbar { display: none; }

.idol-res-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 5px 10px;
  min-width: 52px;
  flex-shrink: 0;
}

.idol-res-icon  { font-size: 14px; line-height: 1.2; }
.idol-res-label { font-size: 9px; color: #666; margin: 2px 0 0; }
.idol-res-value { font-size: 15px; font-weight: 800; color: #fff; font-family: 'Outfit', sans-serif; line-height: 1.1; }

.idol-res-item.res-money  { border-color: rgba(255,215,0,0.35); }
.idol-res-item.res-fame   { border-color: rgba(255,80,40,0.35); }
.idol-res-item.res-talent { border-color: rgba(64,196,255,0.35); }
.idol-res-item.res-looks  { border-color: rgba(255,100,200,0.35); }

/* ─── 보드 래퍼 ─────────────────────────────── */
.idol-board-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
  touch-action: none; /* 핀치줌·팬 직접 처리 */
}

/* ─── 보드 뷰포트 (줌/팬 컨테이너) ─────────── */
.idol-board-viewport {
  position: relative;          /* ← absolute 자식(SVG, 센터패널)의 기준점 */
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.idol-board-viewport.dragging { cursor: grabbing; }

/* ─── 카메라 컨트롤 버튼 ────────────────────── */
.idol-cam-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
}
.idol-cam-btn {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(8,8,20,0.78);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, transform 0.1s;
  padding: 0;
}
.idol-cam-btn:active       { background: rgba(255,215,0,0.18); transform: scale(0.88); }
.idol-cam-btn-reset        { font-size: 13px; }

/* ─── 보드 그리드 ───────────────────────────── */
.idol-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: min(390px, calc(100vw - 8px));
  height: min(390px, calc(100vw - 8px));
  gap: 1.5px;
  flex-shrink: 0;
}

/* ─── 셀 공통 ───────────────────────────────── */
.idol-cell {
  background: rgba(18,18,32,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.idol-cell:active { opacity: 0.75; }

/* 카테고리 컬러 상단 바 (샵 전용) */
.idol-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
}
.cell-shop-music::before  { background: #e91e63; }
.cell-shop-media::before  { background: #9c27b0; }
.cell-shop-beauty::before { background: #f06292; }
.cell-shop-event::before  { background: #ff9800; }

/* 특수 칸 */
.cell-start  { background: rgba(40,180,80,0.2);  border-color: rgba(40,180,80,0.4); }
.cell-police { background: rgba(50,120,255,0.15); border-color: rgba(50,120,255,0.35); }
.cell-tax    { background: rgba(255,50,50,0.15);  border-color: rgba(255,50,50,0.35); }
.cell-event  { background: rgba(255,210,50,0.12); border-color: rgba(255,210,50,0.3); }
.cell-gacha  { background: rgba(170,80,255,0.12); border-color: rgba(170,80,255,0.3); }
.cell-chance { background: rgba(0,210,255,0.1);   border-color: rgba(0,210,255,0.25); }
.cell-free   { background: rgba(70,210,120,0.12); border-color: rgba(70,210,120,0.3); }
.cell-stage  { background: rgba(255,140,40,0.15); border-color: rgba(255,140,40,0.35); }

/* 소유 표시 */
.idol-cell.owned-mine  { background: rgba(60,190,80,0.18); }
.idol-cell.owned-other { background: rgba(255,70,70,0.12); }

/* 내 위치 강조 */
.idol-cell.player-here {
  box-shadow: inset 0 0 0 1.5px #ffd700, 0 0 8px rgba(255,215,0,0.5);
  animation: cellPulse 1.4s ease-in-out infinite;
  z-index: 2;
}
@keyframes cellPulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px #ffd700, 0 0 5px rgba(255,215,0,0.4); }
  50%       { box-shadow: inset 0 0 0 1.5px #ffd700, 0 0 14px rgba(255,215,0,0.85); }
}

/* 셀 내용 */
.idol-cell-emoji { font-size: 14px; line-height: 1; pointer-events: none; }
.idol-cell-name  { font-size: 5px; color: #888; text-align: center; word-break: keep-all; line-height: 1.1; margin-top: 1px; max-width: 100%; padding: 0 1px; pointer-events: none; }
.idol-cell-rent  { font-size: 5px; color: #ffd700; pointer-events: none; }

/* 소유자 도트 */
.cell-owner-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 4px; right: 3px;
  box-shadow: 0 0 3px rgba(0,0,0,0.6);
}

/* ─── 보드 토큰 레이어 ───────────────────────── */
.idol-board { position: relative; } /* 토큰 레이어 기준점 */

/* 토큰 레이어 — board 위 전체 overlay, 터치 방해 안 함 */
.idol-token-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: visible;
}

/* 개별 토큰 (말) */
.idol-board-token {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--tok-size, 20px); height: var(--tok-size, 20px);
  border-radius: 50%;
  border: 2.5px solid var(--tok-color, #ffd700);
  background: rgba(10, 10, 24, 0.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.9),
    0 0 10px color-mix(in srgb, var(--tok-color, #ffd700) 40%, transparent);
  /* left/top 이동 transition */
  transition:
    left 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    top  0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: left, top;
  z-index: 1;
}

.idol-board-token-inner {
  font-size: calc(var(--tok-size, 20px) * 0.55);
  line-height: 1;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* 발 딛는 애니메이션 (중간 칸) */
@keyframes tokStep {
  0%   { transform: translate(-50%, -50%) scale(1); }
  35%  { transform: translate(-50%, -80%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
/* 최종 착지 애니메이션 */
@keyframes tokLand {
  0%   { transform: translate(-50%, -75%) scale(1.25); }
  55%  { transform: translate(-50%, -42%) scale(0.92); }
  80%  { transform: translate(-50%, -52%) scale(1.04); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.tok-bounce { animation: tokStep 0.17s ease-out forwards; }
.tok-land   { animation: tokLand 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* 이동 중 칸 하이라이트 */
.cell-step-hl {
  background: rgba(255, 255, 255, 0.13) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55) !important;
  animation: none !important;
  z-index: 3;
}

/* ─── 보드 중앙 ──────────────────────────────── */
.idol-board-center {
  grid-column: 2 / 10;
  grid-row: 2 / 10;
  background: rgba(6,6,18,0.8);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  gap: 4px;
  overflow: hidden;
}

/* 보드 중앙 제목 (폴백) */
.idol-center-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 10px; color: #ffd700; text-align: center;
}

/* 현재 아이돌 초상화 */
.idol-center-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.idol-center-img {
  width: 54px; height: 70px;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  border: 1.5px solid rgba(255,215,0,0.35);
  display: block;
}
.idol-center-img-placeholder {
  width: 54px; height: 70px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,215,0,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: rgba(255,255,255,0.04);
}
.idol-center-name {
  font-size: 8px;
  color: #ffd700;
  font-weight: 700;
  text-align: center;
  font-family: 'Black Han Sans', sans-serif;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idol-center-stage { font-size: 7px; text-align: center; }

/* 성장 단계별 이펙트 */
.idol-stage-1 .idol-center-img { filter: drop-shadow(0 0 5px rgba(66,165,245,0.7)); }
.idol-stage-2 .idol-center-img { filter: drop-shadow(0 0 7px rgba(171,71,188,0.9)); }
.idol-stage-3 .idol-center-img { animation: superstarGlow 2s ease-in-out infinite; }
@keyframes superstarGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,215,0,0.8)); }
  50%       { filter: drop-shadow(0 0 18px rgba(255,215,0,1)); }
}

/* 플레이어 미니 카드 */
.idol-players-mini {
  display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; width: 100%;
}
.idol-player-mini {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 3px 4px;
  min-width: 36px;
}
.idol-player-mini.is-current  { border-color: #ffd700; background: rgba(255,215,0,0.08); }
.idol-player-mini.is-bankrupt { opacity: 0.3; }

/* 소형: 두 초상화 가로 정렬 */
.idol-player-mini-portraits { display: flex; gap: 2px; flex-direction: row; }
.idol-mini-producer {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tok-color, #ffd700) 20%, rgba(10,10,24,0.9));
  border: 1.5px solid var(--tok-color, #ffd700);
  display: grid; place-items: center;
}
.idol-mini-producer-emoji { font-size: 11px; line-height: 1; display: block; }
.idol-mini-idol {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: grid; place-items: center;
  overflow: hidden;
}
.idol-mini-idol-img {
  width: 20px; height: 20px;
  object-fit: cover; object-position: top center;
  display: block;
}
.idol-mini-idol-emoji { font-size: 11px; line-height: 1; display: block; }

.idol-player-mini-name  { font-size: 7px; color: #888; text-align: center; max-width: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idol-player-mini-fame  { font-size: 9px; color: #ff6b35; font-weight: 700; font-family: 'Outfit', sans-serif; }

/* ─── 액션 패널 ──────────────────────────────── */
.idol-action-panel {
  padding: 10px 14px 14px;
  background: rgba(0,0,0,0.55);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  max-height: 42vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.idol-action-panel::-webkit-scrollbar { display: none; }

.idol-action-title {
  font-size: 12px; color: #ccc;
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.5;
}
.idol-action-buttons {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}

/* ─── 버튼 ───────────────────────────────────── */
.idol-btn {
  flex: 1;
  min-width: 80px; max-width: 160px;
  padding: 12px 10px;
  border: none; border-radius: 12px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  -webkit-tap-highlight-color: transparent;
}
.idol-btn:active   { transform: scale(0.93); }
.idol-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.idol-btn-primary { background: linear-gradient(135deg, #ff2d78, #c2185b); border-color: transparent; }
.idol-btn-gold    { background: linear-gradient(135deg, #ffd700, #e65100); color: #000; border-color: transparent; }
.idol-btn-purple  { background: linear-gradient(135deg, #9c44f7, #4a148c); border-color: transparent; }
.idol-btn-danger  { background: linear-gradient(135deg, #c62828, #7f0000); border-color: transparent; }
.idol-btn-safe    { background: linear-gradient(135deg, #00c853, #1b5e20); border-color: transparent; }

/* ─── 팝업 오버레이 ──────────────────────────── */
.idol-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end; justify-content: center;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.idol-popup {
  background: #111120;
  border: 1px solid rgba(255,255,255,0.11);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 8px 18px 32px;
  width: 100%; max-width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: none;
  animation: slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.idol-popup::-webkit-scrollbar { display: none; }

/* 드래그 핸들 */
.idol-popup::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  margin: 4px auto 16px;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.idol-popup-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 18px; color: #fff;
  margin-bottom: 6px; text-align: center;
}
.idol-popup-sub {
  font-size: 12px; color: #888;
  text-align: center; margin-bottom: 16px;
}
.idol-choice-btn {
  width: 100%;
  padding: 14px 16px; margin-bottom: 8px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.idol-choice-btn:active { transform: scale(0.97); background: rgba(255,255,255,0.1); }

/* ─── 주사위 ─────────────────────────────────── */
.idol-dice-area {
  display: flex; gap: 10px; justify-content: center; align-items: center; margin: 6px 0;
}
.idol-dice {
  width: 42px; height: 42px;
  background: linear-gradient(145deg, #fff, #d0d0d0);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #1a1a2e; font-weight: 900;
  box-shadow: 0 3px 12px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.8);
  flex-shrink: 0;
}
.idol-dice.rolling { animation: diceRoll 0.45s ease-out; }
@keyframes diceRoll {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(90deg) scale(1.15); }
  50%  { transform: rotate(180deg) scale(0.9); }
  75%  { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.idol-dice-sum {
  font-size: 28px; font-weight: 900; color: #fff;
  font-family: 'Black Han Sans', 'Outfit', sans-serif;
  min-width: 40px; text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 12px rgba(255,215,0,0.4);
}

/* ─── 가챠 ───────────────────────────────────── */
.idol-gacha-slot { text-align: center; padding: 8px 0 16px; }
.idol-gacha-reel {
  font-size: 52px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  margin: 10px 0;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 16px; background: rgba(0,0,0,0.3); overflow: hidden;
}
.idol-gacha-reel.spinning { animation: reelSpin 0.08s steps(1) infinite; }
@keyframes reelSpin {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(4px); }
}
.idol-gacha-result-grade { font-size: 20px; font-weight: 700; margin: 8px 0 4px; }
.grade-legend { color: #ffd700; text-shadow: 0 0 16px rgba(255,215,0,0.9); }
.grade-hit    { color: #c084fc; }
.grade-common { color: #94a3b8; }

.gacha-legend-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
  animation: legendIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes legendIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.gacha-legend-content { text-align: center; padding: 32px; }
.gacha-legend-emoji   { font-size: 90px; animation: floatUp 0.7s ease-out; }
@keyframes floatUp {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ─── 5턴 결산 ───────────────────────────────── */
.idol-settlement-popup { text-align: center; }
.idol-settlement-idol  { font-size: 60px; margin: 12px 0 4px; animation: settleIdolIn 0.45s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes settleIdolIn {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.idol-fame-counter {
  font-family: 'Outfit', sans-serif;
  font-size: 40px; font-weight: 900; color: #ffd700;
  text-shadow: 0 0 24px rgba(255,215,0,0.6); line-height: 1;
}
.idol-fame-delta { font-size: 20px; font-weight: 700; color: #00e676; margin-bottom: 8px; }

/* 순위 카드 */
.idol-rank-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.idol-rank-row  { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,0.05); border-radius: 10px; }
.idol-rank-num    { font-size: 16px; font-weight: 900; color: #ffd700; width: 24px; }
.idol-rank-avatar { font-size: 20px; }
.idol-rank-name   { flex: 1; font-size: 13px; color: #fff; }
.idol-rank-fame   { font-size: 14px; font-weight: 700; color: #ff6b35; font-family: 'Outfit', sans-serif; }
.idol-rank-stage  { font-size: 11px; color: #666; }

/* ─── 엔딩 화면 ──────────────────────────────── */
.idol-ending-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 500; padding: 24px; text-align: center;
  animation: endingFadeIn 1s ease-out;
}
@keyframes endingFadeIn { from { opacity: 0; } to { opacity: 1; } }
.idol-ending-emoji {
  font-size: 80px; margin-bottom: 16px;
  animation: endingEmojiIn 0.8s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes endingEmojiIn {
  from { transform: scale(0) translateY(-20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.idol-ending-title { font-family: 'Black Han Sans', sans-serif; font-size: 26px; color: #fff; margin-bottom: 12px; }
.idol-ending-text  { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.7; max-width: 320px; margin: 0 auto 24px; }

/* ─── 샵 팝업 ────────────────────────────────── */
.idol-shop-popup .shop-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.shop-cat-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; color: #fff; }
.shop-level-bar { display: flex; gap: 4px; margin: 10px 0; }
.shop-level-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #666;
}
.shop-level-dot.active { background: #ffd700; border-color: #ffd700; color: #000; }
.shop-rent-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
.shop-rent-table td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); color: #ccc; }
.shop-rent-table td:last-child { text-align: right; color: #ffd700; font-weight: 700; }

/* ─── 호감도 토스트 ──────────────────────────── */
.idol-favor-toast {
  position: fixed; top: 80px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,45,120,0.92);
  color: #fff; padding: 8px 20px;
  border-radius: 20px; font-size: 13px; font-weight: 700;
  z-index: 1000; pointer-events: none; white-space: nowrap;
  animation: favorToast 2.5s ease-out forwards;
}
@keyframes favorToast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ─── 이동 하이라이트 ────────────────────────── */
.idol-cell.moving-highlight { animation: movingCell 0.25s ease-out; }
@keyframes movingCell {
  0%   { background: rgba(255,215,0,0.35); }
  100% { }
}

/* ─── 폭죽 ───────────────────────────────────── */
.confetti-wrapper { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.confetti-piece   { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: confettiFall linear forwards; }
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ─── 경찰서 배지 ────────────────────────────── */
.idol-jail-badge {
  background: rgba(50,120,255,0.2); border: 1px solid rgba(50,120,255,0.4);
  border-radius: 8px; padding: 4px 8px; font-size: 10px; color: #90caf9;
}

/* ─── 훈련 결과 ──────────────────────────────── */
.idol-train-result { text-align: center; padding: 8px; }
.idol-train-die    { font-size: 36px; margin: 8px 0; }
.idol-train-gain   { font-size: 22px; font-weight: 700; color: #00e676; }

/* ─── 아이돌 선택 화면 ───────────────────────── */
.idol-select-screen {
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.idol-select-title { font-family: 'Black Han Sans', sans-serif; font-size: 20px; color: #fff; text-align: center; }

/* 아이돌 타입 카드 — 2×2 썸네일 그리드 */
.idol-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.idol-type-card {
  display: flex; flex-direction: column;
  border-radius: 16px;
  border: 2.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  cursor: pointer; overflow: hidden;
  transition: border-color 0.2s, background 0.2s, transform 0.12s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.idol-type-card:active { transform: scale(0.96); }

/* 선택 시 타입별 하이라이트 */
.idol-type-card[data-type="luna"].selected { border-color: #ff6b9d; background: rgba(255,107,157,0.12); box-shadow: 0 0 24px rgba(255,107,157,0.4); }
.idol-type-card[data-type="ddyobi"].selected { border-color: #ff9500; background: rgba(255,149,0,0.12);   box-shadow: 0 0 24px rgba(255,149,0,0.4); }
.idol-type-card[data-type="el"].selected  { border-color: #c084fc; background: rgba(192,132,252,0.12); box-shadow: 0 0 24px rgba(192,132,252,0.4); }
.idol-type-card[data-type="ai"].selected   { border-color: #22d3ee; background: rgba(34,211,238,0.12);  box-shadow: 0 0 24px rgba(34,211,238,0.4); }

.idol-type-img-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: rgba(0,0,0,0.15);
}
.idol-type-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; display: block;
}

.idol-type-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(transparent 0%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.idol-type-name {
  font-size: 17px; font-weight: 800; color: #fff;
  text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.idol-type-tag {
  font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.idol-type-desc {
  font-size: 12px; color: #fff; font-weight: 500;
  text-align: center; line-height: 1.4;
  padding: 5px 8px 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 0 0 14px 14px;
}
/* 타입 태그 색상 */
.idol-type-card[data-type="luna"] .idol-type-tag { color: #fff; background: rgba(255,107,157,0.7); }
.idol-type-card[data-type="ddyobi"] .idol-type-tag { color: #fff; background: rgba(255,149,0,0.7); }
.idol-type-card[data-type="el"]  .idol-type-tag { color: #fff; background: rgba(192,132,252,0.7); }
.idol-type-card[data-type="ai"]   .idol-type-tag { color: #fff; background: rgba(34,211,238,0.7); }

.idol-type-bonus { display: none; }
.idol-type-emoji { display: none; }

/* ─── 반응형 ──────────────────────────────────── */
@media (max-height: 640px) {
  .idol-board { width: min(270px, 92vw); height: min(270px, 92vw); }
  .idol-action-panel { max-height: 35vh; }
}
@media (min-width: 430px) {
  .idol-board { width: min(400px, calc(100vw - 20px)); height: min(400px, calc(100vw - 20px)); }
}

/* ===== UX refresh overrides ===== */
#idolGame {
  background:
    radial-gradient(140% 90% at 10% -10%, rgba(255, 90, 140, 0.18), transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(0, 217, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #080b16 0%, #06070d 100%);
}

.idol-header {
  padding: 12px 14px;
  background: rgba(8, 10, 20, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.idol-header-title {
  color: #ffe082;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.idol-turn-badge {
  font-size: 11px;
  font-weight: 700;
  color: #eef2ff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
}

.idol-resource-bar {
  display: block;
  padding: 10px 12px 8px;
  background: transparent;
  overflow: visible;
}

.idol-topdash {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.idol-res-hero,
.idol-action-context,
.idol-task-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.idol-res-hero {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.idol-res-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.idol-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.idol-status-chip.tone-primary {
  background: rgba(255, 45, 120, 0.14);
  color: #ffb3cf;
  border-color: rgba(255, 45, 120, 0.26);
}

.idol-status-chip.tone-info {
  background: rgba(0, 217, 255, 0.12);
  color: #b8f4ff;
  border-color: rgba(0, 217, 255, 0.22);
}

.idol-status-chip.tone-gold {
  background: rgba(255, 209, 102, 0.14);
  color: #ffe7a8;
  border-color: rgba(255, 209, 102, 0.26);
}

.idol-status-chip.tone-success {
  background: rgba(46, 204, 113, 0.12);
  color: #bff7d4;
  border-color: rgba(46, 204, 113, 0.24);
}

.idol-status-chip.tone-warn {
  background: rgba(255, 159, 67, 0.12);
  color: #ffd8ad;
  border-color: rgba(255, 159, 67, 0.24);
}

.idol-status-chip.tone-danger {
  background: rgba(255, 99, 132, 0.12);
  color: #ffc0cf;
  border-color: rgba(255, 99, 132, 0.24);
}

.idol-status-chip.tone-muted {
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  border-color: rgba(255,255,255,0.09);
}

.idol-res-hero-name {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 3px 0 0 var(--idol-accent, #ffd166);
}

/* 우측 사이드바 두 초상화 */
.idol-res-portraits {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

/* 프로듀서 (이모지 원형) */
.idol-res-producer-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tok-color, #ffd700) 20%, rgba(10,10,24,0.9));
  border: 2px solid var(--tok-color, #ffd700);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tok-color, #ffd700) 30%, transparent);
  flex-shrink: 0;
}

.idol-res-producer-emoji {
  font-size: 18px;
  line-height: 1;
  display: block;
}

/* 아이돌 이미지 */
.idol-res-idol-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  flex-shrink: 0;
}

.idol-res-idol-img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.idol-res-idol-emoji {
  font-size: 18px;
  line-height: 1;
  display: block;
}

.idol-res-hero-texts {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.idol-res-hero-title {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idol-res-hero-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idol-dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

.idol-res-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.idol-res-meta-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #dbe4f0;
  font-size: 11px;
  white-space: nowrap;
}

.idol-res-meta-pill.is-active {
  color: #0b0f18;
  background: #ffe082;
  border-color: transparent;
  font-weight: 800;
}

.idol-res-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.idol-res-item {
  min-width: 0;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  gap: 2px;
}

.idol-res-item.res-favor {
  border-color: rgba(255, 99, 132, 0.24);
}

.idol-res-icon {
  font-size: 15px;
}

.idol-res-label {
  font-size: 10px;
  color: #a0aec0;
  margin-top: 0;
}

.idol-res-value {
  font-size: 15px;
  color: #f8fafc;
}

.idol-board-wrapper {
  padding: 8px 8px 6px;
}

.idol-board {
  width: min(392px, calc(100vw - 12px));
  height: min(392px, calc(100vw - 12px));
  gap: 2px;
}

.idol-cell {
  border-radius: 7px;
  border-color: rgba(255,255,255,0.09);
  background: rgba(14, 17, 30, 0.9);
  transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.idol-cell:active {
  transform: scale(0.98);
}

.idol-cell::before {
  height: 4px;
}

.idol-cell-emoji {
  font-size: 14px;
}

.idol-cell-name {
  font-size: 7px;
  color: #c4cfde;
  line-height: 1.15;
  margin-top: 1px;
  padding: 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

.idol-cell-rent {
  font-size: 8px;
  line-height: 1.1;
  color: #ffe082;
  margin-top: 1px;
}

.cell-owner-dot {
  width: 6px;
  height: 6px;
  top: 3px;
  right: 3px;
}

/* 데스크탑 토큰 — --tok-size CSS 변수가 자동 처리 (JS에서 HW 비례 계산) */

.idol-cell:focus-visible {
  outline: 2px solid rgba(0, 217, 255, 0.7);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.18);
}

.idol-board-center {
  background: linear-gradient(180deg, rgba(9, 11, 20, 0.94), rgba(8, 10, 16, 0.92));
  border-radius: 14px;
  border-color: rgba(255,255,255,0.08);
  padding: 8px;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}

.idol-center-shell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.idol-center-empty {
  height: 100%;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #cbd5e1;
  font-size: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
}

.idol-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.idol-center-title-wrap {
  min-width: 0;
}

.idol-center-title {
  font-size: 13px;
  line-height: 1.1;
  color: #f8fafc;
  text-align: left;
  font-family: 'Black Han Sans', sans-serif;
}

.idol-center-subtitle {
  margin-top: 3px;
  font-size: 10px;
  color: #aeb8c8;
  line-height: 1.2;
}

.idol-center-statuses {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.idol-center-main {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

.idol-center-portrait {
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.idol-center-img,
.idol-center-img-placeholder {
  width: 60px;
  height: 78px;
  border-radius: 10px;
}

.idol-center-img-placeholder {
  font-size: 28px;
}

.idol-center-name {
  max-width: 66px;
  font-size: 9px;
  line-height: 1.1;
}

.idol-center-stage {
  font-size: 8px;
  line-height: 1.1;
}

.idol-center-summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.idol-center-current-name {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 3px 0 0 var(--idol-accent, #ffd166);
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idol-center-current-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.idol-center-current-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  color: #dbe4f0;
  font-size: 10px;
  line-height: 1;
}

.idol-center-cell-card {
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px 7px;
  min-width: 0;
}

.idol-center-cell-title {
  font-size: 9px;
  color: #94a3b8;
  margin-bottom: 2px;
}

.idol-center-cell-name {
  font-size: 11px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idol-center-cell-detail {
  margin-top: 2px;
  color: #cbd5e1;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idol-center-hint {
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255,255,255,0.07);
  color: #dce6f4;
  font-size: 10px;
  line-height: 1.25;
}

.idol-center-roster-label {
  font-size: 9px;
  color: #94a3b8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-left: 2px;
}

.idol-players-mini {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  justify-content: flex-start;
  scrollbar-width: none;
  min-height: 0;
}

.idol-players-mini::-webkit-scrollbar {
  display: none;
}

.idol-player-mini {
  min-width: 126px;
  max-width: 126px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 2px 0 0 var(--idol-accent, #ffd166);
}

.idol-player-mini.is-current {
  border-color: rgba(255, 224, 130, 0.35);
  background: rgba(255, 224, 130, 0.06);
}

.idol-player-mini.is-bankrupt {
  opacity: 0.45;
}

/* 두 초상화 컨테이너 */
.idol-player-mini-portraits {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

/* 프로듀서 아바타 (이모지 원형) */
.idol-mini-producer {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tok-color, #ffd700) 20%, rgba(10,10,24,0.9));
  border: 2px solid var(--tok-color, #ffd700);
  display: grid;
  place-items: center;
  box-shadow: 0 0 6px color-mix(in srgb, var(--tok-color, #ffd700) 35%, transparent);
}

.idol-mini-producer-emoji {
  font-size: 15px;
  line-height: 1;
  display: block;
}

/* 아이돌 이미지 */
.idol-mini-idol {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.idol-mini-idol-img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.idol-mini-idol-emoji {
  font-size: 15px;
  line-height: 1;
  display: block;
}

.idol-player-mini-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.idol-player-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.idol-player-mini-name {
  max-width: none;
  flex: 1;
  font-size: 10px;
  color: #f1f5f9;
  font-weight: 700;
  text-align: left;
}

.idol-player-mini-rank {
  font-size: 9px;
  color: #cbd5e1;
  white-space: nowrap;
}

.idol-player-mini-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.idol-player-mini-fame,
.idol-player-mini-money,
.idol-player-mini-stage {
  font-size: 9px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
}

.idol-player-mini-fame {
  color: #ffb874;
  font-weight: 700;
}

.idol-player-mini-money {
  color: #dce6f4;
}

.idol-player-mini-stage {
  padding: 0 4px;
}

.idol-action-panel {
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0));
  background: rgba(6, 8, 14, 0.74);
  border-top-color: rgba(255,255,255,0.08);
  max-height: min(38vh, 340px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.idol-action-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.idol-action-context {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.idol-action-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.idol-action-context-title {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
}

.idol-action-context-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.idol-action-context-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 3px 0 0 var(--idol-accent, #ffd166);
}

/* 행동안내 패널 두 초상화 — 아이콘 크기 살짝 축소 */
.idol-action-portraits .idol-res-producer-wrap,
.idol-action-portraits .idol-res-idol-wrap {
  width: 30px;
  height: 30px;
}

.idol-action-portraits .idol-res-idol-img {
  width: 30px;
  height: 30px;
}

.idol-action-context-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 16px;
  flex-shrink: 0;
}

.idol-action-context-player-texts {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.idol-action-context-player-name {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idol-action-context-player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.idol-action-context-player-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  color: #cbd5e1;
  font-size: 10px;
}

.idol-action-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.idol-context-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
}

.idol-context-stat .label {
  color: #94a3b8;
  font-size: 10px;
  line-height: 1;
}

.idol-context-stat .value {
  color: #e2e8f0;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idol-action-context-hint {
  color: #dbe4f0;
  font-size: 11px;
  line-height: 1.4;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.06);
}

.idol-task-card {
  padding: 12px;
}

.idol-task-card .idol-action-title {
  font-size: 14px;
  color: #f8fafc;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 8px;
  font-weight: 700;
}

.idol-task-card .idol-popup-sub {
  font-size: 12px;
  color: #b9c4d5;
  text-align: left;
  line-height: 1.45;
  margin-bottom: 12px;
}

.idol-task-card .idol-action-buttons {
  justify-content: stretch;
  gap: 10px;
}

.idol-btn {
  min-height: 48px;
  max-width: none;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.idol-choice-btn {
  min-height: 48px;
  border-radius: 14px;
  line-height: 1.35;
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.idol-select-screen {
  padding: 16px 14px 14px;
  gap: 12px;
}

.idol-select-title {
  font-size: 22px;
  letter-spacing: 0.01em;
}

.idol-type-card {
  border-radius: 16px;
}

.idol-select-screen .idol-btn {
  width: 100%;
}

.idol-btn:focus-visible,
.idol-choice-btn:focus-visible,
.idol-cell:focus-visible {
  outline: 3px solid rgba(0, 217, 255, 0.65);
  outline-offset: 2px;
}

.idol-btn:disabled:focus-visible {
  outline: none;
}

@media (max-width: 420px) {
  .idol-topdash {
    gap: 8px;
  }

  .idol-res-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .idol-res-item.res-money,
  .idol-res-item.res-fame {
    grid-column: span 1;
  }

  .idol-action-context-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 440px) {
  .idol-topdash {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }

  .idol-res-grid {
    align-content: stretch;
  }
}

@media (max-height: 760px) {
  .idol-resource-bar {
    padding-top: 8px;
    padding-bottom: 6px;
  }

  .idol-res-hero {
    padding: 8px;
    gap: 6px;
  }

  .idol-res-hero-meta {
    gap: 5px;
  }

  .idol-res-meta-pill {
    min-height: 24px;
    font-size: 10px;
  }

  .idol-board {
    width: min(350px, calc(100vw - 12px));
    height: min(350px, calc(100vw - 12px));
  }

  .idol-action-panel {
    max-height: min(34vh, 280px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .idol-cell,
  .idol-btn,
  .idol-choice-btn,
  .idol-type-card,
  .idol-dice.rolling,
  .idol-gacha-reel.spinning,
  .idol-cell.player-here,
  .idol-cell.moving-highlight,
  .idol-center-stage,
  .idol-favor-toast,
  .idol-stage-3 .idol-center-img {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Idol UX layout overhaul v2 (board-first + one-tap flow) ===== */
#idolGame.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* 헤더 | 리소스바 | 보드(유동) | 액션패널(최소 130px 보장) */
  grid-template-rows: auto auto minmax(0, 1fr) minmax(150px, auto);
  align-items: stretch;
  overflow: hidden;
}

#idolGame .idol-header {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
}

#idolGame .idol-resource-bar {
  grid-column: 1;
  grid-row: 2;
  z-index: 2;
  padding: 8px 10px 6px;
}

#idolGame .idol-board-wrapper {
  grid-column: 1;
  grid-row: 3;
  min-height: 0;
  padding: 8px 10px 6px;
  position: relative;
  align-items: center;
  justify-content: center;
  z-index: 1; /* 배경 레이어(z-index:0) 위에 항상 존재 */
}

#idolGame .idol-board-wrapper::before {
  content: 'BOARD';
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(226, 232, 240, 0.72);
  pointer-events: none;
}

#idolGame .idol-board-wrapper::after {
  content: '';
  position: absolute;
  inset: 6px 10px 4px;
  border-radius: 18px;
  background:
    radial-gradient(80% 70% at 10% 0%, rgba(255, 111, 145, 0.08), transparent 70%),
    radial-gradient(70% 70% at 100% 10%, rgba(0, 217, 255, 0.06), transparent 75%),
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006));
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}

#idolGame .idol-board {
  position: relative;
  z-index: 2;
  width: min(100%, calc(100vw - 20px), calc(100dvh - 390px), 860px);
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  padding: 8px;
  box-sizing: border-box;
  gap: 2px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(5, 7, 14, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 22px 48px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.02) inset;
}

#idolGame .idol-cell {
  border-radius: 9px;
}

#idolGame .idol-cell-emoji {
  font-size: clamp(12px, 2.6vw, 17px);
}

#idolGame .idol-cell-name {
  font-size: clamp(6px, 1.6vw, 10px);
  line-height: 1.15;
}

#idolGame .idol-cell-rent {
  font-size: clamp(7px, 1.45vw, 10px);
}

#idolGame .idol-board-center {
  border-radius: 16px;
  padding: 10px;
}

#idolGame .idol-center-shell {
  gap: 10px;
}

#idolGame .idol-center-hint {
  line-height: 1.45;
}

#idolGame .idol-action-panel {
  grid-column: 1;
  grid-row: 4;
  min-height: 140px;
  max-height: min(45vh, 400px);
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(5, 7, 13, 0.78);
  z-index: 1; /* 배경 레이어(z-index:0) 위에 항상 존재 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#idolGame .idol-action-shell {
  gap: 8px;
}

#idolGame .idol-action-context,
#idolGame .idol-task-card {
  border-radius: 14px;
}

#idolGame .idol-task-card {
  padding: 12px;
}

#idolGame .idol-task-card .idol-action-buttons {
  gap: 10px;
}

#idolGame .idol-btn,
#idolGame .idol-choice-btn {
  min-height: 52px;
}

#idolGame .idol-task-card .idol-btn {
  flex: 1 1 120px;
}

#idolGame .idol-turn-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

#idolGame .idol-turn-progress-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

#idolGame .idol-turn-progress-fill {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #ff4f9a 0%, #ffd166 55%, #00d9ff 100%);
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.25);
}

#idolGame .idol-turn-progress-label {
  color: #cbd5e1;
  font-size: 10px;
  line-height: 1.2;
}

#idolGame .idol-res-item.res-favor .idol-res-value {
  font-size: 12px;
  letter-spacing: -0.01em;
}

#idolGame .idol-select-progress,
#idolGame .idol-select-help,
#idolGame .idol-select-wait {
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.4;
}

#idolGame .idol-select-progress {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: #dbe4f0;
}

#idolGame .idol-select-progress b {
  color: #ffe082;
}

#idolGame .idol-select-help {
  background: rgba(0,217,255,0.05);
  border: 1px solid rgba(0,217,255,0.1);
  color: #b8f4ff;
}

#idolGame .idol-select-wait {
  background: rgba(255,209,102,0.06);
  border: 1px solid rgba(255,209,102,0.12);
  color: #ffe7a8;
}

#idolGame .idol-select-screen #idolSelectConfirmBtn {
  width: min(220px, 100%);
  min-height: 46px;
  align-self: center;
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 12px;
}

#idolGame .idol-type-card.is-locked {
  cursor: default;
  opacity: 0.72;
}

#idolGame .idol-type-card.is-locked:active {
  transform: none;
}

#idolGame.idol-select-mode.active {
  grid-template-rows: auto minmax(0, 1fr);
}

#idolGame.idol-select-mode .idol-action-panel {
  grid-column: 1;
  grid-row: 2;
  max-height: none;
  border-top: none;
  background: transparent;
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0));
}

#idolGame.idol-select-mode .idol-action-shell,
#idolGame.idol-select-mode .idol-action-context {
  display: block;
}

#idolGame.idol-select-mode .idol-task-card {
  padding: 14px;
}

#idolGame.idol-select-mode .idol-select-screen {
  min-height: 100%;
}

@media (min-width: 980px) {
  #idolGame.active {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 2px;
  }

  #idolGame .idol-header {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 12px 16px;
  }

  #idolGame .idol-board-wrapper {
    grid-column: 1;
    grid-row: 2 / 4;
    padding: 12px 12px 12px 14px;
  }

  #idolGame .idol-board-wrapper::after {
    inset: 10px 10px 10px 12px;
  }

  #idolGame .idol-board {
    width: min(100%, calc(100dvh - 120px), 860px);
  }

  #idolGame .idol-resource-bar {
    grid-column: 2;
    grid-row: 2;
    padding: 10px 12px 6px 8px;
  }

  #idolGame .idol-topdash {
    gap: 8px;
  }

  #idolGame .idol-res-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #idolGame .idol-res-item.res-money,
  #idolGame .idol-res-item.res-fame {
    grid-column: span 1;
  }

  #idolGame .idol-action-panel {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    max-height: 100%;
    padding: 8px 12px 12px 8px;
    border-top: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #idolGame .idol-action-shell {
    min-height: 0;
  }

  #idolGame .idol-action-context {
    flex: 0 0 auto;
  }

  #idolGame .idol-task-card {
    flex: 1 1 auto;
    min-height: 0;
  }

  #idolGame.idol-select-mode.active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  #idolGame .idol-board {
    width: min(100%, calc(100vw - 16px), calc(100dvh - 360px));
    padding: 6px;
  }

  #idolGame .idol-board-wrapper::before {
    top: 10px;
    left: 14px;
    font-size: 10px;
  }

  #idolGame .idol-action-panel {
    max-height: min(28vh, 228px);
  }

  #idolGame .idol-select-screen #idolSelectConfirmBtn {
    width: 100%;
    min-height: 48px;
  }
}

/* ===== Dedicated pre-game idol selection overlay ===== */
#idolGame {
  position: relative;
}

#idolGame .idol-select-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 14px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 79, 154, 0.16), transparent 60%),
    radial-gradient(120% 100% at 100% 0%, rgba(0, 217, 255, 0.12), transparent 62%),
    rgba(4, 6, 12, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#idolGame .idol-select-overlay::-webkit-scrollbar { display: none; }

#idolGame .idol-select-overlay-card {
  width: min(640px, 100%);
  margin: auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(7, 10, 18, 0.95);
  box-shadow: 0 24px 60px rgba(0,0,0,0.42);
}

#idolGame .idol-select-overlay-card .idol-select-screen {
  padding: 16px;
}

#idolGame .idol-select-wait-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#idolGame .idol-select-picked {
  display: flex;
  gap: 12px;
  align-items: stretch;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 10px;
}

#idolGame .idol-select-picked-media {
  width: 72px;
  flex-shrink: 0;
}

#idolGame .idol-select-picked-img {
  width: 72px;
  height: 92px;
  border-radius: 12px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(255,255,255,0.09);
  display: block;
}

#idolGame .idol-select-picked-fallback {
  display: grid;
  place-items: center;
  font-size: 28px;
  background: rgba(255,255,255,0.04);
}

#idolGame .idol-select-picked-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

#idolGame .idol-select-picked-name {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

#idolGame .idol-select-picked-sub {
  color: #ffe082;
  font-size: 12px;
  font-weight: 700;
}

#idolGame .idol-select-picked-desc {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.4;
}

#idolGame.idol-select-mode .idol-header {
  z-index: 41;
}

@media (max-width: 600px) {
  #idolGame .idol-select-overlay {
    padding: 0;
  }

  #idolGame .idol-select-overlay-card {
    width: 100%;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  #idolGame .idol-select-picked {
    gap: 10px;
    padding: 9px;
  }

  #idolGame .idol-select-picked-media {
    width: 62px;
  }

  #idolGame .idol-select-picked-img {
    width: 62px;
    height: 82px;
    border-radius: 10px;
  }

  #idolGame .idol-select-picked-name {
    font-size: 14px;
  }
}

/* ===== 보드 입체감 + 셀 가독성 개선 ===== */

/* 보드 원근감 — 위에서 비스듬히 내려다보는 시점 */
#idolGame .idol-board-wrapper {
  perspective: 900px;
  perspective-origin: 50% -5%;
}

#idolGame .idol-board {
  transform: rotateX(20deg) scale(1.04);
  transform-origin: 50% 60%;
  transform-style: flat;
  box-shadow:
    0 32px 64px rgba(0,0,0,0.7),
    0 12px 24px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* 셀 — 어두운 테마이지만 명확하게 보이도록 밝기 올림 */
#idolGame .idol-cell {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
}

/* 카테고리 컬러 바 더 두껍게 */
#idolGame .idol-cell::before { height: 5px; }

/* 특수 칸 더 선명하게 */
#idolGame .cell-start  { background: rgba(30,200,80,0.32);  border-color: rgba(30,200,80,0.5); }
#idolGame .cell-police { background: rgba(50,120,255,0.28); border-color: rgba(50,120,255,0.45); }
#idolGame .cell-tax    { background: rgba(255,50,50,0.25);  border-color: rgba(255,50,50,0.45); }
#idolGame .cell-event  { background: rgba(255,200,40,0.22); border-color: rgba(255,200,40,0.4); }
#idolGame .cell-gacha  { background: rgba(160,70,255,0.25); border-color: rgba(160,70,255,0.45); }
#idolGame .cell-chance { background: rgba(0,210,255,0.18);  border-color: rgba(0,210,255,0.4); }
#idolGame .cell-stage  { background: rgba(255,130,30,0.28); border-color: rgba(255,130,30,0.45); }
#idolGame .cell-free   { background: rgba(60,200,110,0.22); border-color: rgba(60,200,110,0.4); }

/* 소유 표시 더 강하게 */
#idolGame .idol-cell.owned-mine  { background: rgba(50,200,80,0.25); }
#idolGame .idol-cell.owned-other { background: rgba(255,60,60,0.18); }

/* 셀 텍스트 가독성 */
#idolGame .idol-cell-emoji { font-size: clamp(13px, 2.8vw, 18px); }
#idolGame .idol-cell-name  { font-size: clamp(6px, 1.5vw, 9px); color: #d0dae8; }
#idolGame .idol-cell-rent  { font-size: clamp(7px, 1.4vw, 9px); color: #ffe082; font-weight: 700; }

/* 보드 중앙 — 원근 변환에 맞게 조정 */
#idolGame .idol-board-center {
  background: linear-gradient(160deg, rgba(14,18,36,0.96), rgba(8,10,20,0.94));
  border-color: rgba(255,255,255,0.1);
}

/* 플레이어 위치 하이라이트 더 강하게 */
#idolGame .idol-cell.player-here {
  box-shadow: inset 0 0 0 2px #ffd700, 0 0 12px rgba(255,215,0,0.7);
}

/* 터치 피드백 — perspective에서는 scale 대신 opacity */
#idolGame .idol-cell:active {
  transform: none;
  opacity: 0.7;
}

/* 보드 배경 조금 더 밝게 */
#idolGame .idol-board {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(8, 10, 20, 0.95);
}

/* ============================================================
   PASTEL K-POP THEME OVERRIDES
   ============================================================ */

/* ── 전체 화면 배경 ─────────────────────────────────────────── */
#idolGame {
  background: #f5eefb !important;
}

/* ── 헤더 바 ─────────────────────────────────────────────────── */
#idolGame .idol-header {
  background: rgba(255,240,252,0.88) !important;
  border-bottom: 1.5px solid rgba(210,168,196,0.45) !important;
  color: #3a2840 !important;
  box-shadow: 0 2px 10px rgba(180,100,160,0.12) !important;
}

#idolGame .idol-header-title {
  color: #6a2060 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

#idolGame .idol-turn-badge {
  background: rgba(255,220,240,0.9) !important;
  color: #802060 !important;
  border: 1px solid rgba(210,130,180,0.5) !important;
  font-weight: 600 !important;
}

#idolGame .pk-close-btn {
  color: #6a2060 !important;
}

/* ── 보드 래퍼 ───────────────────────────────────────────────── */
#idolBoardWrapper {
  filter: drop-shadow(0 12px 32px rgba(180,100,160,0.18));
}

/* ── 보드 ────────────────────────────────────────────────────── */
#idolGame .idol-board {
  background: linear-gradient(135deg, #fdf8f6 0%, #fef5fb 50%, #f8f4fe 100%) !important;
  border: 2.5px solid #c9a84c !important;
  box-shadow:
    0 0 0 5px rgba(201,168,76,0.18),
    0 8px 32px rgba(180,100,160,0.18),
    0 2px 8px rgba(180,100,160,0.10) !important;
  border-radius: 14px !important;
}

/* ── 셀 기본 ─────────────────────────────────────────────────── */
#idolGame .idol-cell {
  background: rgba(255,248,252,0.85) !important;
  border-color: rgba(201,168,76,0.35) !important;
  color: #3a2840 !important;
}

#idolGame .idol-cell .idol-cell-name {
  color: #3a2840 !important;
  font-weight: 600 !important;
}

#idolGame .idol-cell .idol-cell-rent {
  color: #7a5590 !important;
}

/* ── 카테고리별 셀 색상 ──────────────────────────────────────── */
#idolGame .idol-cell.cell-shop-music {
  background: linear-gradient(135deg, #ffe0ef 0%, #ffd0e8 100%) !important;
  border-color: rgba(255,130,180,0.5) !important;
}

#idolGame .idol-cell.cell-shop-media {
  background: linear-gradient(135deg, #e8d8f8 0%, #dcc8f5 100%) !important;
  border-color: rgba(180,130,230,0.5) !important;
}

#idolGame .idol-cell.cell-shop-beauty {
  background: linear-gradient(135deg, #fce0e8 0%, #f8d0de 100%) !important;
  border-color: rgba(220,100,140,0.5) !important;
}

#idolGame .idol-cell.cell-shop-event {
  background: linear-gradient(135deg, #d8f5ec 0%, #c8ede0 100%) !important;
  border-color: rgba(80,180,140,0.5) !important;
}

/* ── 특수 셀 ─────────────────────────────────────────────────── */
#idolGame .idol-cell.cell-start {
  background: linear-gradient(135deg, #fff7d0 0%, #ffe89a 100%) !important;
  border-color: rgba(200,160,40,0.6) !important;
}

#idolGame .idol-cell.cell-police {
  background: linear-gradient(135deg, #d0e8ff 0%, #bcd8f8 100%) !important;
  border-color: rgba(80,140,220,0.5) !important;
}

#idolGame .idol-cell.cell-tax {
  background: linear-gradient(135deg, #ffddd0 0%, #ffc8b8 100%) !important;
  border-color: rgba(220,100,70,0.5) !important;
}

#idolGame .idol-cell.cell-gacha {
  background: linear-gradient(135deg, #e8d0f8 0%, #d8b8f5 100%) !important;
  border-color: rgba(160,80,220,0.5) !important;
}

#idolGame .idol-cell.cell-jail {
  background: linear-gradient(135deg, #e0e8f0 0%, #ccd8e8 100%) !important;
  border-color: rgba(100,130,180,0.5) !important;
}

#idolGame .idol-cell.cell-free {
  background: linear-gradient(135deg, #d8f0e0 0%, #c4e8d0 100%) !important;
  border-color: rgba(60,160,100,0.5) !important;
}

#idolGame .idol-cell.cell-event {
  background: linear-gradient(135deg, #ffd8f0 0%, #ffc8e8 100%) !important;
  border-color: rgba(220,100,170,0.5) !important;
}

#idolGame .idol-cell.cell-chance {
  background: linear-gradient(135deg, #fde8c8 0%, #f8d8a8 100%) !important;
  border-color: rgba(220,160,60,0.5) !important;
}

/* 플레이어 위치 하이라이트 */
#idolGame .idol-cell.player-here {
  box-shadow: inset 0 0 0 2.5px #c9a84c, 0 0 14px rgba(201,168,76,0.65) !important;
}

/* ── 센터 패널 ───────────────────────────────────────────────── */
#idolGame .idol-board-center {
  background: rgba(255,240,250,0.5) !important;
  border: 1.5px solid rgba(201,168,76,0.3) !important;
  border-radius: 10px !important;
}

/* ── 리소스 바 ───────────────────────────────────────────────── */
#idolGame .idol-resource-bar {
  background: rgba(255,244,254,0.92) !important;
  border-bottom: 1.5px solid rgba(210,168,196,0.35) !important;
  color: #3a2840 !important;
}

#idolGame .idol-topdash {
  background: transparent !important;
  color: #3a2840 !important;
}

#idolGame .idol-res-label {
  color: #7a5090 !important;
}

#idolGame .idol-res-value {
  color: #3a2840 !important;
  font-weight: 600 !important;
}

#idolGame .idol-res-hero-title {
  color: #6a2060 !important;
  font-weight: 700 !important;
}

#idolGame .idol-res-hero-sub {
  color: #7a5590 !important;
}

#idolGame .idol-res-meta-pill {
  background: rgba(255,220,240,0.85) !important;
  color: #802060 !important;
  border-color: rgba(210,130,180,0.4) !important;
}

/* ── 액션 패널 ───────────────────────────────────────────────── */
#idolGame .idol-action-panel {
  background: rgba(255,248,252,0.96) !important;
  border-top: 1.5px solid rgba(210,168,196,0.45) !important;
  box-shadow: 0 -4px 18px rgba(180,100,160,0.10) !important;
  color: #3a2840 !important;
}

#idolGame .idol-action-shell {
  background: transparent !important;
  color: #3a2840 !important;
}

#idolGame .idol-action-context {
  background: rgba(255,240,250,0.85) !important;
  border: 1.5px solid rgba(210,168,196,0.45) !important;
  border-radius: 12px !important;
  color: #3a2840 !important;
}

#idolGame .idol-action-context-title {
  color: #6a2060 !important;
  font-weight: 700 !important;
}

#idolGame .idol-action-context-hint {
  background: linear-gradient(90deg, rgba(255,230,245,0.9), rgba(245,220,255,0.9)) !important;
  border: 1px solid rgba(200,150,190,0.4) !important;
  color: #5a2860 !important;
  border-radius: 8px !important;
}

#idolGame .idol-action-context-player {
  background: rgba(255,230,248,0.7) !important;
  border: 1px solid rgba(210,150,190,0.4) !important;
  border-radius: 10px !important;
}

#idolGame .idol-action-context-player-name {
  color: #3a2840 !important;
  font-weight: 600 !important;
}

#idolGame .idol-action-context-player-meta {
  color: #7a5590 !important;
}

#idolGame .idol-action-title {
  color: #6a2060 !important;
  font-weight: 700 !important;
}

/* ── 플레이어 미니 카드 ──────────────────────────────────────── */
#idolGame .idol-players-mini {
  background: rgba(255,244,254,0.6) !important;
}

#idolGame .idol-player-mini {
  background: rgba(255,240,250,0.85) !important;
  border-color: rgba(210,168,196,0.5) !important;
  color: #3a2840 !important;
}

#idolGame .idol-player-mini.is-current {
  background: rgba(255,215,240,0.95) !important;
  border-color: rgba(210,100,160,0.65) !important;
  box-shadow: 0 0 0 2px rgba(210,100,160,0.35) !important;
}

#idolGame .idol-player-mini.is-bankrupt {
  background: rgba(230,225,230,0.7) !important;
  opacity: 0.7 !important;
}

#idolGame .idol-player-mini-name {
  color: #3a2840 !important;
  font-weight: 600 !important;
}

#idolGame .idol-player-mini-rank {
  color: #7a5590 !important;
  font-size: 0.8em !important;
}

#idolGame .idol-player-mini-money {
  color: #a0407a !important;
}

#idolGame .idol-player-mini-fame {
  color: #7a5590 !important;
}

/* ── 버튼 공통 ───────────────────────────────────────────────── */
#idolGame .idol-btn {
  background: linear-gradient(135deg, #ff6aaa, #d84cb0, #b040c8) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(200,70,180,0.38) !important;
  text-shadow: 0 1px 2px rgba(80,0,80,0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

#idolGame .idol-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  transform: skewX(-15deg);
  animation: btnShine 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnShine {
  0%, 100% { left: -60%; }
  50% { left: 120%; }
}

#idolGame .idol-btn:hover {
  background: linear-gradient(135deg, #ff82bb, #e85cc0, #c050d8) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(200,70,180,0.5) !important;
}

#idolGame .idol-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(200,70,180,0.3) !important;
}

/* 보조 버튼 (purple) */
#idolGame .idol-btn-purple {
  background: linear-gradient(135deg, #c8a0e8, #a870d0, #9060c0) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(140,80,200,0.28) !important;
}

#idolGame .idol-btn-purple:hover {
  background: linear-gradient(135deg, #d4b0f0, #b880da, #a070cc) !important;
}

/* 위험 버튼 */
#idolGame .idol-btn-danger {
  background: linear-gradient(135deg, #ff8a8a, #e83060) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(220,50,80,0.38) !important;
}

#idolGame .idol-btn-danger:hover {
  background: linear-gradient(135deg, #ff9f9f, #f04070) !important;
}

/* 골드 버튼 */
#idolGame .idol-btn-gold {
  background: linear-gradient(135deg, #ffe066, #e8a820, #c98000) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(200,150,20,0.38) !important;
  text-shadow: 0 1px 2px rgba(80,40,0,0.3) !important;
}

#idolGame .idol-btn-gold:hover {
  background: linear-gradient(135deg, #ffe880, #f0b830, #d89010) !important;
}

/* Primary 버튼 */
#idolGame .idol-btn-primary {
  background: linear-gradient(135deg, #ff6aaa, #d84cb0, #b040c8) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(200,70,180,0.38) !important;
}

#idolGame .idol-btn-primary:hover {
  background: linear-gradient(135deg, #ff82bb, #e85cc0, #c050d8) !important;
}

/* ── 텍스트 공통 ─────────────────────────────────────────────── */
#idolGame .idol-action-context-grid {
  color: #3a2840 !important;
}

#idolGame .idol-context-stat {
  color: #4a3050 !important;
}

/* ── 상태 칩 ─────────────────────────────────────────────────── */
#idolGame .idol-status-chip {
  border-radius: 20px !important;
}

#idolGame .idol-status-chip.tone-muted {
  background: rgba(220,210,230,0.8) !important;
  color: #5a4060 !important;
  border-color: rgba(180,150,200,0.4) !important;
}

/* ── 진행도 바 ───────────────────────────────────────────────── */
#idolGame .idol-turn-progress-track {
  background: rgba(210,180,210,0.3) !important;
}

#idolGame .idol-turn-progress-fill {
  background: linear-gradient(90deg, #ff8ac4, #b040c8) !important;
}

#idolGame .idol-turn-progress-label {
  color: #7a2070 !important;
  font-weight: 600 !important;
}

/* ── 주사위 오버레이 ──────────────────────────────────────────── */
#idolGame .idol-dice-overlay {
  background: rgba(60,20,80,0.40) !important;
  backdrop-filter: blur(3px) !important;
}

#idolGame .idol-dice-3d-wrap {
  background: rgba(255,240,252,0.6) !important;
  border: 1.5px solid rgba(210,168,196,0.5) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(180,80,160,0.25) !important;
}

#idolGame .idol-dice-result-badge {
  background: linear-gradient(135deg, rgba(255,220,240,0.97), rgba(240,210,255,0.97)) !important;
  border: 2px solid rgba(200,130,180,0.55) !important;
  color: #3a2840 !important;
  box-shadow: 0 4px 16px rgba(180,80,160,0.22) !important;
}

#idolGame .idol-dice-result-badge.double {
  border-color: rgba(201,168,76,0.8) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.28), 0 4px 16px rgba(180,80,160,0.22) !important;
}

/* ── 결산 팝업 ───────────────────────────────────────────────── */
#idolGame .idol-settlement-popup {
  background: linear-gradient(160deg, #fff8e8 0%, #fff0d0 100%) !important;
  border: 1.5px solid rgba(200,160,60,0.55) !important;
  color: #3a2840 !important;
  box-shadow: 0 8px 40px rgba(180,120,40,0.18) !important;
}

#idolGame .idol-rank-row {
  background: rgba(255,240,210,0.6) !important;
  border-color: rgba(200,160,60,0.3) !important;
  color: #3a2840 !important;
}

/* ── 엔딩 화면 ───────────────────────────────────────────────── */
#idolGame .idol-ending-screen {
  background: linear-gradient(160deg, #fff0f8 0%, #f0e8ff 100%) !important;
  border: 1.5px solid rgba(201,168,76,0.55) !important;
  color: #3a2840 !important;
  box-shadow: 0 8px 40px rgba(180,80,160,0.22) !important;
}

#idolGame .idol-ending-title {
  color: #6a2060 !important;
  text-shadow: none !important;
}

#idolGame .idol-ending-text {
  color: #3a2840 !important;
}

/* ── 호감도 토스트 ───────────────────────────────────────────── */
#idolGame .idol-favor-toast {
  background: rgba(255,230,248,0.95) !important;
  border: 1px solid rgba(210,140,185,0.5) !important;
  color: #3a2840 !important;
  box-shadow: 0 4px 16px rgba(180,80,160,0.2) !important;
}

/* ── 아이돌 선택 오버레이 ────────────────────────────────────── */
#idolGame .idol-select-overlay {
  background: linear-gradient(145deg, #f5cdde 0%, #ede0f5 50%, #ddd0f5 100%) !important;
}

#idolGame .idol-select-title {
  color: #6a2060 !important;
  text-shadow: none !important;
}

#idolGame .idol-select-help,
#idolGame .idol-select-wait {
  color: #7a5590 !important;
}

/* 아이돌 타입 카드 — 썸네일 */
#idolGame .idol-type-card {
  background: rgba(255,248,252,0.92) !important;
  border: 2.5px solid rgba(210,168,196,0.45) !important;
  color: #3a2840 !important;
}

#idolGame .idol-type-card:hover {
  background: rgba(255,235,248,0.97) !important;
  border-color: rgba(200,100,160,0.7) !important;
  box-shadow: 0 8px 24px rgba(200,80,160,0.3) !important;
}

#idolGame .idol-type-card.selected {
  background: rgba(255,210,240,0.97) !important;
  border-color: rgba(200,80,160,0.85) !important;
  box-shadow: 0 0 0 3px rgba(200,80,160,0.3), 0 8px 28px rgba(200,80,160,0.35) !important;
}

#idolGame .idol-type-info {
  background: linear-gradient(transparent 0%, rgba(40,10,35,0.88) 100%) !important;
}

#idolGame .idol-type-name {
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7) !important;
}

#idolGame .idol-type-tag {
  background: rgba(255,180,220,0.6) !important;
  color: #fff !important;
}

#idolGame .idol-type-desc {
  color: #fff !important;
  background: rgba(40,10,35,0.55) !important;
}

/* 선택된 아이돌 표시 */
#idolGame .idol-select-picked {
  background: rgba(255,240,252,0.9) !important;
  border: 1.5px solid rgba(210,168,196,0.5) !important;
  border-radius: 12px !important;
}

#idolGame .idol-select-picked-name {
  color: #6a2060 !important;
  font-weight: 700 !important;
}

#idolGame .idol-select-picked-sub {
  color: #7a5590 !important;
}

#idolGame .idol-select-picked-desc {
  color: #4a3050 !important;
}

/* 대기 카드 */
#idolGame .idol-select-wait-card {
  background: rgba(255,240,252,0.85) !important;
  border: 1.5px dashed rgba(210,168,196,0.6) !important;
  color: #7a5590 !important;
}

/* ── 선택 확인 버튼 ──────────────────────────────────────────── */
#idolSelectConfirmBtn {
  background: linear-gradient(135deg, #ff6aaa, #d84cb0, #b040c8) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(200,70,180,0.38) !important;
}

/* ── 선택지 버튼 (이벤트 카드 등) ───────────────────────────── */
#idolGame .idol-choice-btn {
  background: linear-gradient(135deg, rgba(255,230,245,0.9), rgba(245,220,255,0.9)) !important;
  border: 1.5px solid rgba(200,150,190,0.5) !important;
  color: #5a2860 !important;
  border-radius: 8px !important;
}

#idolGame .idol-choice-btn:hover {
  background: linear-gradient(135deg, rgba(255,210,240,0.95), rgba(240,205,255,0.95)) !important;
  border-color: rgba(200,100,170,0.7) !important;
}

/* ── 태스크 카드 ─────────────────────────────────────────────── */
#idolGame .idol-task-card {
  background: rgba(255,244,254,0.92) !important;
  border: 1.5px solid rgba(210,168,196,0.5) !important;
  border-radius: 12px !important;
  color: #3a2840 !important;
}

/* ── 가챠 슬롯 ───────────────────────────────────────────────── */
#idolGame .idol-gacha-slot {
  background: rgba(240,220,255,0.9) !important;
  border: 2px solid rgba(160,80,220,0.4) !important;
}

#idolGame .idol-gacha-reel {
  color: #3a2840 !important;
}

#idolGame .grade-legend .idol-gacha-slot {
  background: linear-gradient(135deg, #fff5b0, #ffe066) !important;
  border-color: rgba(200,160,40,0.6) !important;
  box-shadow: 0 0 20px rgba(201,168,76,0.4) !important;
}

/* ── 훈련 결과 ───────────────────────────────────────────────── */
#idolGame .idol-train-result {
  background: rgba(255,240,252,0.95) !important;
  border: 1.5px solid rgba(210,168,196,0.5) !important;
  border-radius: 12px !important;
  color: #3a2840 !important;
}

#idolGame .idol-train-die {
  background: rgba(255,220,240,0.9) !important;
  border: 2px solid rgba(210,130,180,0.5) !important;
  color: #3a2840 !important;
  font-weight: 700 !important;
}

#idolGame .idol-train-gain {
  color: #802060 !important;
  font-weight: 700 !important;
}

/* ── 액션 버튼 그룹 ──────────────────────────────────────────── */
#idolGame .idol-action-buttons {
  gap: 8px !important;
}

/* ── 포트레이트 그룹 ─────────────────────────────────────────── */
#idolGame .idol-res-portraits {
  background: rgba(255,240,252,0.5) !important;
  border-radius: 12px !important;
}

#idolGame .idol-res-idol-wrap,
#idolGame .idol-res-producer-wrap {
  background: rgba(255,230,248,0.6) !important;
  border: 1px solid rgba(210,168,196,0.35) !important;
  border-radius: 10px !important;
}

#idolGame .idol-center-portrait {
  background: rgba(255,240,252,0.7) !important;
  border: 1.5px solid rgba(210,168,196,0.4) !important;
  border-radius: 12px !important;
}

/* ── 스크롤바 ────────────────────────────────────────────────── */
#idolGame ::-webkit-scrollbar-track {
  background: rgba(230,210,240,0.3) !important;
}

#idolGame ::-webkit-scrollbar-thumb {
  background: rgba(180,120,180,0.45) !important;
}

#idolGame ::-webkit-scrollbar-thumb:hover {
  background: rgba(180,100,180,0.65) !important;
}

/* ── 플레이어 토큰 ───────────────────────────────────────────── */
#idolGame .idol-board-token {
  border: 2px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 2px 8px rgba(120,60,120,0.35) !important;
}

/* ── 보드 이동 중 하이라이트 셀 (grid 보드 — 미사용) ──────────── */

/* ── 반응형: 작은 화면 ───────────────────────────────────────── */
@media (max-width: 600px) {
  #idolGame {
    background: linear-gradient(180deg, #f5cdde 0%, #ddd0f5 100%) !important;
  }
}

/* ===================================================================
   COMMERCIAL VISUAL POLISH  —  에셋 준비 없이 바로 적용 가능한 개선
   =================================================================== */

/* ─── 1. 보드 3D 그림자 강화 ─────────────────────────────────── */
#idolGame .idol-board {
  box-shadow:
    0 44px 88px rgba(0,0,0,0.52),
    0 18px 36px rgba(0,0,0,0.32),
    0 5px 10px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
}

/* ─── 2. 보드 중앙 — 스포트라이트 분위기 + 에셋 활용 ─────────── */
#idolGame .idol-board-center {
  background:
    url('../../assets/idol/radial-shine.png') center center / 90% auto no-repeat,
    rgba(255,240,252,0.62) !important;
  border: 1.5px solid rgba(201,168,76,0.38) !important;
  overflow: hidden !important;
}

/* ─── 3. 플레이어 토큰 — 플레이어 컬러 일치 글로우 ───────────── */
/* 기존 코드가 흰색 테두리로 고정하는 !important를 재오버라이드    */
#idolGame .idol-board-token {
  border: 2.5px solid var(--tok-color, #ffd700) !important;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(255,255,255,0.26) 0%,
    rgba(8,8,20,0.93) 65%
  ) !important;
  box-shadow:
    0 3px 12px rgba(0,0,0,0.85),
    0 0 18px color-mix(in srgb, var(--tok-color, #ffd700) 65%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* ─── 4. 현재 위치 칸 — 드라마틱한 펄스 ─────────────────────── */
@keyframes playerHereDrama {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2.5px #c9a84c,
      0 0 12px rgba(201,168,76,0.65),
      0 0 24px rgba(201,168,76,0.30);
  }
  50% {
    box-shadow:
      inset 0 0 0 3px #ffd700,
      0 0 24px rgba(201,168,76,1.0),
      0 0 46px rgba(255,215,0,0.55);
  }
}
#idolGame .idol-cell.player-here {
  animation: playerHereDrama 1.3s ease-in-out infinite !important;
  z-index: 4 !important;
}

/* ─── 5. Primary 버튼 — 게임 최고 CTA 강조 ──────────────────── */
#idolGame .idol-btn-primary {
  background: linear-gradient(135deg, #ff5a9e 0%, #d040ac 50%, #aa28c0 100%) !important;
  box-shadow:
    0 4px 22px rgba(210,50,170,0.62),
    0 0 54px rgba(210,50,170,0.30),
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -2px 0 rgba(0,0,0,0.22) !important;
  animation: primaryBtnPulse 2.4s ease-in-out infinite !important;
}
@keyframes primaryBtnPulse {
  0%, 100% {
    box-shadow:
      0 4px 22px rgba(210,50,170,0.62),
      0 0 54px rgba(210,50,170,0.30),
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -2px 0 rgba(0,0,0,0.22);
  }
  50% {
    box-shadow:
      0 5px 30px rgba(210,50,170,0.85),
      0 0 80px rgba(210,50,170,0.48),
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -2px 0 rgba(0,0,0,0.22);
  }
}

/* ─── 6. 카테고리 상단 바 — 두꺼운 그라디언트 ───────────────── */
#idolGame .idol-cell.cell-shop-music::before {
  height: 6px !important;
  background: linear-gradient(90deg, #f50057, #e91e63, #ff4081) !important;
  box-shadow: 0 1px 6px rgba(233,30,99,0.55) !important;
}
#idolGame .idol-cell.cell-shop-media::before {
  height: 6px !important;
  background: linear-gradient(90deg, #aa00ff, #9c27b0, #ba68c8) !important;
  box-shadow: 0 1px 6px rgba(156,39,176,0.55) !important;
}
#idolGame .idol-cell.cell-shop-beauty::before {
  height: 6px !important;
  background: linear-gradient(90deg, #e91e63, #f06292, #ff80ab) !important;
  box-shadow: 0 1px 6px rgba(240,98,146,0.55) !important;
}
#idolGame .idol-cell.cell-shop-event::before {
  height: 6px !important;
  background: linear-gradient(90deg, #f57c00, #ff9800, #ffcc02) !important;
  box-shadow: 0 1px 6px rgba(255,152,0,0.55) !important;
}

/* ─── 7. 특수 칸 — 카테고리별 펄스 애니메이션 ───────────────── */
@keyframes startPulse {
  0%, 100% {
    border-color: rgba(200,160,40,0.60);
    box-shadow: 0 0 6px rgba(200,160,40,0.22);
  }
  50% {
    border-color: rgba(200,160,40,1.0);
    box-shadow: 0 0 18px rgba(200,160,40,0.65), inset 0 0 10px rgba(255,215,0,0.12);
  }
}
#idolGame .idol-cell.cell-start {
  animation: startPulse 3s ease-in-out infinite !important;
}

@keyframes gachaPulse {
  0%, 100% {
    border-color: rgba(160,80,220,0.50);
    box-shadow: 0 0 6px rgba(160,80,220,0.18);
  }
  50% {
    border-color: rgba(160,80,220,0.95);
    box-shadow: 0 0 20px rgba(160,80,220,0.60), inset 0 0 12px rgba(160,80,220,0.12);
  }
}
#idolGame .idol-cell.cell-gacha {
  animation: gachaPulse 2.2s ease-in-out infinite !important;
}

@keyframes eventBorderPulse {
  0%, 100% { border-color: rgba(220,100,170,0.50); }
  50%       {
    border-color: rgba(220,100,170,0.92);
    box-shadow: 0 0 12px rgba(220,100,170,0.38);
  }
}
#idolGame .idol-cell.cell-event {
  animation: eventBorderPulse 2.8s ease-in-out infinite !important;
}

/* ─── 8. 이동 하이라이트 칸 (grid 보드 — 미사용) ──────────────── */

/* ─── 9. 아이돌 선택 카드 — 선택 시 확실한 글로우 ───────────── */
#idolGame .idol-type-card[data-type="luna"].selected {
  box-shadow: 0 0 24px rgba(255,107,157,0.52), 0 0 52px rgba(255,107,157,0.24) !important;
}
#idolGame .idol-type-card[data-type="ddyobi"].selected {
  box-shadow: 0 0 24px rgba(255,149,0,0.52),   0 0 52px rgba(255,149,0,0.24)   !important;
}
#idolGame .idol-type-card[data-type="el"].selected {
  box-shadow: 0 0 24px rgba(192,132,252,0.52), 0 0 52px rgba(192,132,252,0.24) !important;
}
#idolGame .idol-type-card[data-type="ai"].selected {
  box-shadow: 0 0 24px rgba(34,211,238,0.52),  0 0 52px rgba(34,211,238,0.24)  !important;
}

/* ─── 10. 모바일 배경 — 스테이지 조명 분위기 ────────────────── */
@media (max-width: 600px) {
  #idolGame {
    background:
      radial-gradient(ellipse 80% 28% at 50% -2%, rgba(255,175,212,0.55) 0%, transparent 58%),
      radial-gradient(ellipse 55% 38% at 88% 22%, rgba(215,165,255,0.32) 0%, transparent 52%),
      radial-gradient(ellipse 50% 38% at 12% 68%, rgba(255,155,210,0.28) 0%, transparent 52%),
      linear-gradient(175deg, #fad2ea 0%, #f0d2f5 48%, #deccf5 100%) !important;
  }
}

/* ===== ISO 보드 컨테이너 =====
   SVG + 토큰 레이어가 모두 #idolBoardViewport 안에 절대 위치로 배치됨.
   카메라(translate + scale)는 여전히 #idolBoardViewport에 적용됨.
   ================================================================ */

/* 뷰포트 — 크기는 JS에서 동적으로 지정, 블록 박스 (flex 제거) */
#idolGame #idolBoardViewport {
  display: block !important;
  position: relative !important;
  /* width/height: JS idolRenderIsoBoard()가 inline style로 지정 */
  transform-origin: 50% 50%;
}

/* ISO SVG 보드 */
#idolGame #idolIsoBoardSvg {
  position: absolute;
  top:  0;
  left: 0;
  display: block;
}

/* 토큰 레이어 — ISO 보드 위에 정확히 겹침, 크기는 JS 동적 지정 */
#idolGame #idolTokenLayer {
  position: absolute !important;
  top:  0 !important;
  left: 0 !important;
  /* width/height: JS idolRenderIsoBoard()가 inline style로 지정 */
  inset: unset !important; /* 기존 inset:0 재정의 */
  pointer-events: none;
}

/* 기존 CSS 그리드 보드 숨기기 */
#idolGame .idol-board {
  display: none !important;
}

/* ── ISO 아이콘 — 둥실 이펙트 ─── */
@keyframes isoIconFloat {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-4px); }
}
/* isoIconGlow — 하단 업그레이드 섹션에 정의됨 */

#idolGame #idolIsoBoardSvg .iso-icon {
  transform-box:    fill-box;
  transform-origin: center;
  image-rendering:  auto;
}

/* 플레이어 위치 링 — 반짝임 애니메이션 */
#idolGame #idolIsoBoardSvg .iso-player-here {
  animation: isoRingPulse 1.6s ease-in-out infinite;
}
@keyframes isoRingPulse {
  0%, 100% { opacity: 0.50; }
  50%       { opacity: 1.00; }
}
/* isoStepFlash / iso-step-hl — 하단 업그레이드 섹션에 정의됨 */

/* ===== ISO 보드 중앙 패널 =====
   위치·크기: JS _idolUpdateCenterPanelPos() 가 inline style로 지정
   (left = HW*3, top = HH*3, w = HW*16, h = HH*16)
   =============================== */
#idolGame .idol-iso-center-panel,
#idolGame .idol-iso-center-overlay {
  position: absolute;
  /* 위치·크기: JS _idolUpdateCenterPanelPos() 가 inline style로 지정 */
  z-index: 5;   /* SVG(0) 위, 토큰레이어(20) 아래 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
  overflow: hidden;
}

/* ── 스코어보드 패널 ─────────────────────────── */
#idolGame .idol-iso-center-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--iso-hw, 40px) * 0.08);
  /* 다이아몬드 꼭짓점 잘리지 않도록 상하 패딩 */
  padding: 22% 18%;
}

/* ── 헤더: 타이틀 + 턴 배지 ─────────────────── */
.iso-cp-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: calc(var(--iso-hw, 40px) * 0.05);
}
.iso-cp-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--iso-hw, 40px) * 0.30);
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.90), 0 0 3px #000;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.iso-cp-turn-badge {
  font-size: calc(var(--iso-hw, 40px) * 0.22);
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.38);
  padding: 1px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* ── 턴 진행 바 ────────────────────────────── */
.iso-cp-progress {
  width: calc(var(--iso-hw, 40px) * 4.5);
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: calc(var(--iso-hw, 40px) * 0.06);
}
.iso-cp-prog-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff80c0, #ffcc00);
  border-radius: 2px;
  transition: width 0.6s ease;
  box-shadow: 0 0 6px rgba(255, 200, 100, 0.80);
}

/* ── 플레이어 행 ─────────────────────────────── */
.iso-cp-row {
  display: flex;
  align-items: center;
  gap: calc(var(--iso-hw, 40px) * 0.12);
  width: calc(var(--iso-hw, 40px) * 5.6);
  max-width: 250px;
  background: rgba(8, 4, 18, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 3px 8px 3px 5px;
  font-size: calc(var(--iso-hw, 40px) * 0.22);
  color: #e8e0f8;
  transition: transform 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.iso-cp-row.is-current {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--cp-accent, #ff80c0);
  border-width: 1.5px;
  transform: scaleX(1.05);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.14),
    0 0  6px var(--cp-accent, #ff80c0);
  color: #fff;
}
.iso-cp-row.is-bankrupt {
  opacity: 0.38;
  text-decoration: line-through;
}

.iso-cp-medal { min-width: calc(var(--iso-hw, 40px) * 0.38); font-size: calc(var(--iso-hw, 40px) * 0.34); text-align: center; }
.iso-cp-av    { font-size: calc(var(--iso-hw, 40px) * 0.34); line-height: 1; }

/* 이름 + 자금 + 명성 바 묶음 */
.iso-cp-mid   { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
.iso-cp-toprow { display: flex; justify-content: space-between; align-items: baseline; gap: 3px; }
.iso-cp-name  { font-size: calc(var(--iso-hw, 40px) * 0.22); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iso-cp-money { font-size: calc(var(--iso-hw, 40px) * 0.19); color: #a5f3a0; white-space: nowrap; flex-shrink: 0; }

/* 명성 바 */
.iso-cp-famewrap {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.iso-cp-famebar {
  height: 100%;
  background: var(--bar-clr, #ffd700);
  border-radius: 2px;
  transition: width 0.5s ease;
  box-shadow: 0 0 5px var(--bar-clr, #ffd700);
}

/* 명성 숫자 */
.iso-cp-fame  { font-size: calc(var(--iso-hw, 40px) * 0.22); color: #ffe082; white-space: nowrap; flex-shrink: 0; }

/* ── 가로모드 컴팩트 센터패널 ─────────────────── */
.iso-cp-compact-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--iso-hw, 40px) * 0.18);
  margin-bottom: calc(var(--iso-hw, 40px) * 0.12);
}
.iso-cp-compact-turn {
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--iso-hw, 40px) * 0.32);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 4px rgba(255,215,0,0.6);
  white-space: nowrap;
  flex-shrink: 0;
}
.iso-cp-compact-prog {
  flex: 1;
  max-width: calc(var(--iso-hw, 40px) * 3);
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.iso-cp-compact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--iso-hw, 40px) * 0.10);
  padding: calc(var(--iso-hw, 40px) * 0.06) calc(var(--iso-hw, 40px) * 0.15);
  font-size: calc(var(--iso-hw, 40px) * 0.26);
  line-height: 1.2;
  color: #e8e4f0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: calc(var(--iso-hw, 40px) * 0.15);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.iso-cp-compact-row.is-current {
  color: #fff;
  background: rgba(255,255,255,0.15);
  border: 1px solid var(--cp-accent, #ffd700);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cp-accent, #ffd700) 40%, transparent);
  text-shadow: 0 0 6px var(--cp-accent, #ffd700), 0 1px 4px rgba(0,0,0,0.8);
}
.iso-cp-compact-row.is-bankrupt {
  opacity: 0.3;
  text-decoration: line-through;
}
.iso-cp-compact-medal { flex-shrink: 0; }
.iso-cp-compact-av    { flex-shrink: 0; }
.iso-cp-compact-name  {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.iso-cp-compact-fame {
  color: #ffe082;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(255,215,0,0.5);
}

/* ── 센터 다이아몬드 턴 전용 표시 ─────────────── */
.iso-cp-turn-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: calc(var(--iso-hw, 40px) * 0.15);
}
.iso-cp-turn-label {
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--iso-hw, 40px) * 0.45);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 8px rgba(255,215,0,0.5);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── 코너 플레이어 카드 ──────────────────────── */
.idol-corner-cards {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.idol-corner-card {
  position: absolute;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 14px;
  background: rgba(10, 8, 22, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.10);
  color: #c8c4d4;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: auto;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  overflow: hidden;
  max-width: 180px;
}

.idol-corner-card.is-current {
  border-color: var(--cc-accent, #ffd700);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cc-accent, #ffd700) 40%, transparent),
              0 4px 16px rgba(0,0,0,0.55);
}
.idol-corner-card.is-current::after {
  content: '▶ 턴';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 8px;
  font-weight: 800;
  color: var(--cc-accent, #ffd700);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  letter-spacing: 0.02em;
}
.idol-corner-card.is-bankrupt {
  opacity: 0.3;
  filter: grayscale(1);
}

/* 모서리 위치 */
.idol-corner-top-left     { top: 6px;    left: 6px;   }
.idol-corner-top-right    { top: 6px;    right: 6px;  }
.idol-corner-bottom-left  { bottom: 6px; left: 6px;   }
.idol-corner-bottom-right { bottom: 6px; right: 6px;  }

/* 초상화 영역 */
.idol-cc-img-wrap {
  position: relative;
  width: 56px;
  min-height: 62px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,200,0,0.08), rgba(0,0,0,0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.idol-cc-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.idol-cc-portrait-fallback {
  font-size: 28px;
}
.idol-cc-rank {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.75);
  border: 1.5px solid var(--cc-accent, #ffd700);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

/* 정보 영역 */
.idol-cc-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px 10px;
  gap: 3px;
  min-width: 0;
}
.idol-cc-names {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.idol-cc-idol-name {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.idol-cc-player-name {
  font-size: 10px;
  color: #a8a0b8;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.idol-cc-stat-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}
.idol-cc-fame {
  color: #ffe082;
  text-shadow: 0 0 6px rgba(255,215,0,0.4);
}
.idol-cc-money {
  color: #8cf;
}
.idol-cc-stage {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* 모바일 — 원래 사이즈 유지 */
@media (max-width: 768px) {
  .idol-corner-card {
    max-width: 140px;
    border-radius: 10px;
    font-size: 11px;
  }
  .idol-cc-img-wrap {
    width: 40px;
    min-height: 46px;
  }
  .idol-cc-portrait-fallback { font-size: 22px; }
  .idol-cc-info { padding: 4px 6px; gap: 2px; }
  .idol-cc-idol-name { font-size: 11px; }
  .idol-cc-player-name { font-size: 9px; }
  .idol-cc-stat-row { font-size: 10px; gap: 5px; }
  .idol-cc-stage { font-size: 9px; }
  .idol-cc-rank { width: 16px; height: 16px; font-size: 9px; }
}

/* 가로모드: 액션패널(우상단)과 겹침 방지 */
@media (max-height: 500px) and (orientation: landscape) {
  .idol-corner-card {
    max-width: 120px;
    border-radius: 8px;
  }
  .idol-cc-img-wrap {
    width: 32px;
    min-height: 38px;
  }
  .idol-cc-info { padding: 2px 4px; gap: 1px; }
  .idol-cc-idol-name { font-size: 9px; }
  .idol-cc-player-name { font-size: 7px; }
  .idol-cc-stat-row { font-size: 8px; gap: 3px; }
  .idol-cc-stage { font-size: 7px; }
  .idol-cc-rank { width: 12px; height: 12px; font-size: 7px; }
  /* 우상단에 액션패널이 있으므로 우측 상단 카드를 좌측 중앙으로 이동 */
  .idol-corner-top-right {
    top: auto !important;
    right: auto !important;
    left: 6px !important;
    bottom: calc(50% + 4px) !important;
  }
  /* 좌하단 카드와 겹침 방지: 좌하단 좀 더 아래로 */
  .idol-corner-bottom-left {
    bottom: 4px !important;
    left: 6px !important;
  }
}

/* ── 오버라이드 패널 (이벤트 연출용) ─────────── */
#idolGame .idol-iso-center-overlay {
  background: rgba(4, 2, 14, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: calc(var(--iso-hw, 40px) * 0.32);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: isoCenterOverlayFadeIn 0.3s ease;
}
@keyframes isoCenterOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ════════════════════════════════════════════
   ISO 보드 비주얼 업그레이드 v2 — 무대 라이팅
   ════════════════════════════════════════════ */

/* ── 보드 래퍼 — 씬 배경이 비치도록 transparent */
#idolGame .idol-board-wrapper {
  background: transparent;
}

/* ── 무대 조명 — 핀스팟·사이드 라이트 레이어 */
#idolGame .idol-board-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* 상단 핀스팟 — 좁고 강한 금빛 핀 */
    radial-gradient(ellipse 22% 18% at 50% -2%, rgba(255, 230, 120, 0.75) 0%, rgba(255,200,60,0.10) 60%, transparent 80%),
    /* 좌측 사이드 라이트 — 보라/핑크 핀 */
    radial-gradient(ellipse 18% 65% at -4% 40%, rgba(220, 60, 255, 0.50) 0%, rgba(180,40,220,0.15) 50%, transparent 75%),
    /* 우측 사이드 라이트 — 시안 핀 */
    radial-gradient(ellipse 18% 65% at 104% 40%, rgba(40, 200, 255, 0.50) 0%, rgba(20,160,240,0.15) 50%, transparent 75%),
    /* 하단 필 라이트 — 핑크 글로우 */
    radial-gradient(ellipse 55% 18% at 50% 106%, rgba(255, 100, 180, 0.35) 0%, transparent 70%),
    /* 배경 앰비언트 (미묘한 보라빛) */
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(40, 20, 70, 0.80) 0%, transparent 100%);
}

/* ── SVG 보드 외곽 글로우 (경량화: single drop-shadow) */
#idolGame #idolIsoBoardSvg {
  filter: drop-shadow(0 4px 20px rgba(200, 120, 220, 0.55));
}

/* ── 보드 림 라이트 애니메이션 ─────────────── */
#idolGame #idolIsoBoardSvg .iso-rim-line {
  animation: isoRimPulse 3s ease-in-out infinite;
}
@keyframes isoRimPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1.00; }
}

/* ── 스파클 파티클 ─────────────────────────── */
#idolGame #idolIsoBoardSvg #iso-sparkles circle {
  transform-box:    fill-box;
  transform-origin: center;
}
@keyframes isoSparkle {
  0%,  85%, 100% { opacity: 0;    transform: scale(0);    }
  15%, 55%       { opacity: 1;    transform: scale(1);    }
  70%            { opacity: 0.60; transform: scale(0.70); }
}

/* ── 하단 스테이지 라이트 펄스 ──────────────── */
@keyframes isoStageLightPulse {
  0%, 100% { opacity: 0.4; transform: scaleX(1.0) scaleY(1.0); }
  50%      { opacity: 0.8; transform: scaleX(1.3) scaleY(1.4); }
}
#idolGame #idolIsoBoardSvg #iso-stage-lights ellipse {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── 코너 셀 펄스 글로우 ───────────────────── */
#idolGame #idolIsoBoardSvg .iso-corner-cell {
  animation: isoCornerPulse 2.8s ease-in-out infinite;
}
/* 코너마다 약간 다른 타이밍 */
#idolGame #idolIsoBoardSvg .iso-corner-cell:nth-child(1)  { animation-delay: 0s;    }
#idolGame #idolIsoBoardSvg .iso-corner-cell:nth-child(2)  { animation-delay: -0.7s; }
#idolGame #idolIsoBoardSvg .iso-corner-cell:nth-child(3)  { animation-delay: -1.4s; }
#idolGame #idolIsoBoardSvg .iso-corner-cell:nth-child(4)  { animation-delay: -2.1s; }

@keyframes isoCornerPulse {
  0%, 100% {
    filter: brightness(1.0) drop-shadow(0 0 3px rgba(255, 215, 60, 0.50));
  }
  50% {
    filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 215, 60, 1.00))
                              drop-shadow(0 0 18px rgba(255, 160, 40, 0.70));
  }
}

/* ── 셀 호버 효과 — 밝아지는 브라이트닝 ───── */
#idolGame #idolIsoBoardSvg .iso-cell:hover {
  filter: brightness(1.28) drop-shadow(0 -4px 8px rgba(255, 255, 255, 0.50));
  cursor: pointer;
  transition: filter 0.15s ease;
}
/* 코너는 hover 시 더 강조 */
#idolGame #idolIsoBoardSvg .iso-corner-cell:hover {
  filter: brightness(1.4) drop-shadow(0 -4px 12px rgba(255, 230, 100, 0.80));
  animation-play-state: paused;
}

/* ── 아이콘 후광 오브 애니메이션 ───────────── */
.iso-icon-glow {
  transform-box:    fill-box;
  transform-origin: center;
}
@keyframes isoGlowOrb {
  0%, 100% { opacity: 0.40; transform: scale(0.88); }
  50%       { opacity: 0.72; transform: scale(1.10); }
}

/* ── 아이콘 글로우 애니메이션 강화 ────────── */
@keyframes isoIconGlow {
  0%, 45%, 100% { filter: brightness(1.0) drop-shadow(0 2px 5px rgba(0,0,0,0.35)); }
  72%            { filter: brightness(1.55) drop-shadow(0 0 12px rgba(255, 220, 140, 1.00))
                                             drop-shadow(0 0 6px rgba(255, 255, 200, 0.80)); }
}

/* ── 센터 시머 (무대 바닥 빛 반사) ──────────  */
#idolGame #idolIsoBoardSvg .iso-center-shimmer {
  animation: isoCenterShimmer 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes isoCenterShimmer {
  0%, 100% { opacity: 0.18; transform: scaleX(1.00) scaleY(1.00); }
  50%       { opacity: 0.38; transform: scaleX(1.15) scaleY(1.20); }
}

/* ── 셀 활성화 (플레이어 통과 시 — 호버와 유사한 밝기 강조) */
#idolGame #idolIsoBoardSvg .iso-cell.iso-cell-active {
  filter: brightness(1.35) drop-shadow(0 -4px 10px rgba(255, 255, 255, 0.55));
  transition: filter 0.12s ease;
}

/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — 보드가 화면 최대한 차지하도록
   ═══════════════════════════════════════════════════════ */

/* ── 모바일 세로 (≤430px) ─────────────────────────────── */
@media (max-width: 430px) {
  /* 헤더 컴팩트 */
  #idolGame .idol-header {
    padding: 8px 10px !important;
    gap: 6px;
  }
  #idolGame .idol-header-title {
    font-size: 13px !important;
  }
  #idolGame .idol-turn-badge {
    font-size: 10px;
    padding: 2px 8px !important;
  }

  /* 자원 바 — 히어로 카드 숨기고 스탯만 한 줄 표시 */
  #idolGame .idol-resource-bar {
    padding: 4px 8px !important;
  }
  #idolGame .idol-res-hero {
    display: none !important;
  }
  #idolGame .idol-topdash {
    gap: 0 !important;
  }
  #idolGame .idol-res-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  #idolGame .idol-res-item {
    padding: 3px 2px;
    border-radius: 8px;
    gap: 0;
  }
  #idolGame .idol-res-icon {
    font-size: 12px;
  }
  #idolGame .idol-res-label {
    font-size: 8px;
  }
  #idolGame .idol-res-value {
    font-size: 12px;
  }

  /* 보드 래퍼 — 패딩 줄여 공간 확보 */
  #idolGame .idol-board-wrapper {
    padding: 4px 6px 2px !important;
  }

  /* 카메라 버튼 — 터치 영역 확대 */
  .idol-cam-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* 액션 패널 — 높이 제한 (터치 최소 공간 보장) */
  #idolGame .idol-action-panel {
    max-height: min(35vh, 280px) !important;
    min-height: 120px !important;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0)) !important;
  }
  #idolGame .idol-action-shell {
    gap: 6px;
  }
  #idolGame .idol-action-context {
    padding: 8px;
    gap: 6px;
  }
  #idolGame .idol-task-card {
    padding: 8px;
  }
  #idolGame .idol-task-card .idol-action-title {
    font-size: 13px;
    margin-bottom: 5px;
  }
  #idolGame .idol-task-card .idol-popup-sub {
    font-size: 11px;
    margin-bottom: 8px;
  }
  #idolGame .idol-btn,
  #idolGame .idol-choice-btn {
    min-height: 44px;
    font-size: 13px;
    padding: 8px 10px;
  }

  /* 팝업 — 패딩 축소 */
  .idol-popup {
    padding: 6px 12px 20px !important;
    max-width: 100%;
  }
  .idol-popup-title {
    font-size: 16px;
  }
  .idol-popup-sub {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .idol-choice-btn {
    padding: 10px 12px;
    font-size: 13px;
  }

  /* 가챠 — 이모지 축소 */
  .idol-gacha-reel {
    font-size: 40px;
    height: 58px;
  }
  .gacha-legend-content {
    padding: 20px;
  }
  .gacha-legend-emoji {
    font-size: 64px;
  }

  /* 엔딩 텍스트 모바일 맞춤 */
  .idol-ending-text {
    max-width: 90vw;
    font-size: 14px;
  }
  .idol-ending-emoji {
    font-size: 60px;
  }
  .idol-ending-title {
    font-size: 22px;
  }

  /* 결산 순위 — 인라인 스타일 오버라이드 */
  .idol-rank-list {
    max-width: 100% !important;
  }
  .idol-rank-row {
    gap: 8px;
    padding: 6px 10px;
  }
  .idol-rank-num {
    font-size: 14px !important;
    width: 20px !important;
  }
  .idol-rank-avatar {
    font-size: 18px !important;
  }
  .idol-rank-name {
    font-size: 12px !important;
  }
  .idol-rank-fame {
    font-size: 13px !important;
  }

  /* 아이돌 선택 카드 — 모바일: 뷰포트에 맞추기 */
  .idol-type-grid {
    gap: 6px;
  }
  .idol-type-img-wrap {
    aspect-ratio: 4 / 3;
  }
  .idol-type-desc {
    font-size: 8px;
    padding: 3px 5px 4px;
  }

  /* 주사위 3D */
  .idol-dice-3d-wrap {
    height: min(48vw, 200px);
  }
  .idol-dice-result-badge {
    font-size: 22px;
    margin-top: 12px;
  }

  /* 플레이어 미니 카드 — 좁은 화면 대응 */
  .idol-player-mini {
    min-width: 110px;
    max-width: 110px;
    padding: 5px;
    gap: 5px;
  }

  /* 보드 BOARD 라벨 숨기기 — 공간 절약 */
  #idolGame .idol-board-wrapper::before {
    display: none !important;
  }
}

/* ── 세로모드 공간 최적화: 보드 우선 ──── */
@media (max-height: 750px) {
  #idolGame .idol-header {
    padding: 4px 10px !important;
  }
  #idolGame .idol-header-title {
    font-size: 13px !important;
  }
  #idolGame .idol-resource-bar {
    padding: 3px 8px 2px !important;
  }
  #idolGame .idol-action-panel {
    max-height: min(32vh, 260px) !important;
    min-height: 110px !important;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0)) !important;
  }
  #idolGame .idol-board-wrapper {
    padding: 2px 4px 0 !important;
  }
}

/* ── 가로 모드 (높이 ≤500px) — 보드 풀스크린 + 액션 오버레이 ──── */
@media (max-height: 500px) and (orientation: landscape) {
  /* 그리드: 보드만 풀 1fr, 사이드바 컬럼 제거 */
  #idolGame.active {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }

  /* 헤더·리소스바·전광판 버튼 숨기기 */
  #idolGame .idol-header,
  #idolGame .idol-resource-bar,
  #idolGame > button[onclick*="idolEventScreenShow"] {
    display: none !important;
  }

  /* 보드: 풀스크린 */
  #idolGame .idol-board-wrapper {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    max-height: none !important;
    z-index: 2 !important;
    position: relative !important;
  }

  /* 줌 컨트롤: 좌상단, 작게 */
  #idolGame .idol-cam-controls {
    top: 4px !important;
    left: 4px !important;
    right: auto !important;
  }
  #idolGame .idol-cam-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
  }

  /* ── 액션패널 → 보드 위 우상단 플로팅 오버레이 ── */
  #idolGame .idol-action-panel {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: clamp(140px, 22vw, 200px) !important;
    min-height: 0 !important;
    max-height: calc(100% - 8px) !important;
    height: auto !important;
    z-index: 30 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(5, 7, 13, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 6px !important;
    overflow-y: auto !important;
    font-size: 11px !important;
    color: #e8e4f0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    scrollbar-width: none !important;
  }
  #idolGame .idol-action-panel::-webkit-scrollbar { display: none !important; }

  /* 사이드바 내 상세 설명 숨김 — 공간 절약 */
  #idolGame .idol-action-context {
    display: none !important;
  }

  /* 버튼/텍스트 축소 */
  #idolGame .idol-action-panel .idol-btn {
    padding: 5px 6px !important;
    font-size: 11px !important;
    min-height: 28px !important;
  }
  #idolGame .idol-action-panel .idol-action-title {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }
  #idolGame .idol-task-card {
    padding: 5px !important;
    border-radius: 8px !important;
  }

  /* 주사위 영역 컴팩트 */
  #idolGame .idol-dice-area {
    margin: 4px 0 !important;
    gap: 6px !important;
  }
  #idolGame .idol-dice {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
  }
  #idolGame .idol-dice-sum {
    font-size: 18px !important;
    min-width: 24px !important;
  }
}

/* ── 세로모드에서 화면 높이가 작을 때 (≤500px, 세로만) ──── */
@media (max-height: 500px) and (orientation: portrait) {
  #idolGame .idol-header {
    padding: 3px 10px !important;
  }
  #idolGame .idol-resource-bar {
    display: none !important;
  }
  #idolGame .idol-action-panel {
    max-height: min(15vh, 100px) !important;
  }
  #idolGame .idol-board-wrapper {
    padding: 1px 2px 0 !important;
  }
}

/* ── 초소형 폰 (≤360px width) ─────────────────────────── */
@media (max-width: 360px) {
  #idolGame .idol-header-title {
    font-size: 12px !important;
  }
  #idolGame .idol-res-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  #idolGame .idol-res-item {
    padding: 4px 3px;
  }
  #idolGame .idol-res-value {
    font-size: 12px;
  }
  .idol-popup {
    padding: 4px 10px 16px !important;
  }
  .idol-player-mini {
    min-width: 96px;
    max-width: 96px;
    padding: 4px;
    gap: 4px;
  }
  .idol-player-mini-name {
    font-size: 9px;
  }
}

/* ===== FX 티어 최적화 (모바일 퍼포먼스) ===== */

/* ── reduced + minimal 공통: SVG 필터 제거 + 상시 요소 backdrop-filter 제거 ── */
#idolGame.idol-fx-reduced #idolIsoBoardSvg,
#idolGame.idol-fx-minimal #idolIsoBoardSvg { filter: none !important; }

#idolGame.idol-fx-reduced .idol-btn::after,
#idolGame.idol-fx-minimal .idol-btn::after { display: none !important; }

#idolGame.idol-fx-reduced .idol-header,
#idolGame.idol-fx-minimal .idol-header {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: rgba(8, 10, 20, 0.92) !important;
}
#idolGame.idol-fx-reduced .idol-action-panel,
#idolGame.idol-fx-minimal .idol-action-panel {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: rgba(6, 8, 14, 0.92) !important;
}
#idolGame.idol-fx-reduced .idol-cam-btn,
#idolGame.idol-fx-minimal .idol-cam-btn {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: rgba(8, 8, 20, 0.92) !important;
}
#idolGame.idol-fx-reduced .iso-cp-row,
#idolGame.idol-fx-minimal .iso-cp-row {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: rgba(8, 4, 18, 0.85) !important;
}
#idolGame.idol-fx-reduced .idol-corner-card,
#idolGame.idol-fx-minimal .idol-corner-card {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: rgba(5, 7, 15, 0.92) !important;
}

/* ── reduced: 필터 애니메이션 제거, float만 유지 ── */
#idolGame.idol-fx-reduced .iso-corner-cell { animation: none !important; }
#idolGame.idol-fx-reduced .iso-center-shimmer { animation: none !important; }
#idolGame.idol-fx-reduced .iso-rim-line { animation: none !important; opacity: 0.7; }
#idolGame.idol-fx-reduced .idol-btn-primary { animation: none !important; }

/* ── minimal: 모든 애니메이션·트랜지션 제거 ── */
#idolGame.idol-fx-minimal * { animation-duration: 0s !important; transition-duration: 0s !important; }
#idolGame.idol-fx-minimal .idol-dice-overlay,
#idolGame.idol-fx-minimal .idol-overlay {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   페스티벌 · 타이머 · 아이템 · 전광판 · 가챠 레전드 · 진화 · 타인 땅
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   1. 페스티벌 오버레이 (.idol-festival-*)
   ─────────────────────────────────────────────── */
.idol-festival-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: radial-gradient(ellipse at center, #1a0030 0%, #0d0d1a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}

.idol-festival-title {
  font-size: 28px;
  font-weight: 900;
  color: #ffd700;
  text-shadow:
    0 0 12px rgba(255, 215, 0, 0.8),
    0 0 32px rgba(255, 215, 0, 0.4);
  animation: festivalTitleIn 0.6s ease-out both;
}
@keyframes festivalTitleIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.idol-festival-stage {
  width: 100%;
  max-width: 380px;
  min-height: 200px;
  background: linear-gradient(180deg, #2a1040, #15082a);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  padding: 12px;
}

.idol-festival-character {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  animation: festCharSlideIn 0.5s ease-out both;
}
.idol-festival-character img,
.idol-festival-character .idol-festival-char-emoji {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--accent, #c084fc);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
@keyframes festCharSlideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.idol-festival-items {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
}
.idol-festival-items > span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.idol-festival-score {
  font-size: 48px;
  font-weight: 900;
  color: #ffd700;
  text-align: center;
  animation: festScorePulse 0.4s ease-out;
}
@keyframes festScorePulse {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   }
}

.idol-festival-combo {
  color: #69f0ae;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  animation: comboFlash 0.5s ease-out;
}
@keyframes comboFlash {
  0%   { opacity: 0; transform: scale(1.2); background: rgba(105, 240, 174, 0.15); }
  50%  { opacity: 1; }
  100% { opacity: 0.7; transform: scale(1); background: transparent; }
}

.idol-festival-ranking {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.idol-festival-ranking > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
}
.idol-festival-ranking > div:nth-child(1) {
  background: rgba(255, 215, 0, 0.15);
  border-left: 4px solid #ffd700;
}
.idol-festival-ranking > div:nth-child(2) {
  border-left: 4px solid #c0c0c0;
}
.idol-festival-ranking > div:nth-child(3) {
  border-left: 4px solid #cd7f32;
}

.idol-festival-reward {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  color: #ffd700;
  font-weight: bold;
}

/* ───────────────────────────────────────────────
   2. 턴 타이머 UI (.idol-timer-*)
   ─────────────────────────────────────────────── */
.idol-timer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}

.idol-timer-bar {
  flex: 1;
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
}
.idol-timer-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: #22d3ee;
  transition: width 1s linear;
}
.idol-timer-bar-fill.warning {
  background: #ff9500;
  animation: timerPulse 1s ease-in-out infinite;
}
.idol-timer-bar-fill.danger {
  background: #ff4444;
  animation: timerPulse 0.5s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

.idol-timer-text {
  font-size: 14px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: #fff;
  min-width: 28px;
  text-align: right;
}

.idol-timer-extend-btn {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
  cursor: pointer;
  white-space: nowrap;
}
.idol-timer-extend-btn:active {
  background: rgba(255, 215, 0, 0.35);
}

/* ───────────────────────────────────────────────
   3. 아이템 슬롯 UI (.idol-item-*)
   ─────────────────────────────────────────────── */
.idol-item-bar {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  justify-content: center;
}

.idol-item-slot {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.idol-item-slot.filled {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.idol-item-slot .idol-item-emoji {
  font-size: 20px;
  line-height: 1;
}
.idol-item-slot .idol-item-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 38px;
  text-align: center;
}

.idol-item-shop-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.idol-item-shop-card {
  background: #1a1a2e;
  border-radius: 16px;
  padding: 20px;
  max-width: 340px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.idol-item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.idol-item-option {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-align: center;
  color: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.idol-item-option:hover,
.idol-item-option:active {
  border-color: rgba(255, 215, 0, 0.5);
  background: rgba(255, 215, 0, 0.05);
}

.idol-item-replace-overlay {
  position: fixed;
  inset: 0;
  z-index: 510;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}
.idol-item-replace-overlay .idol-item-replace-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ───────────────────────────────────────────────
   4. 전광판 노이즈 (.ies-noise / .ies-stat-text)
   ─────────────────────────────────────────────── */
.ies-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image:
    repeating-conic-gradient(
      rgba(255,255,255,0.03) 0% 25%,
      transparent 0% 50%
    );
  background-size: 4px 4px;
}

.ies-stat-text {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  white-space: nowrap;
  animation: iesTextPop 0.5s ease-out both;
}
@keyframes iesTextPop {
  0%   { transform: translateX(-50%) scale(0.5); opacity: 0; }
  70%  { transform: translateX(-50%) scale(1.1); opacity: 1; }
  100% { transform: translateX(-50%) scale(1);   opacity: 1; }
}

/* ───────────────────────────────────────────────
   5. 가챠 레전드 이펙트 (.idol-legend-*)
   ─────────────────────────────────────────────── */
.idol-legend-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3), rgba(0, 0, 0, 0.9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.idol-legend-diamond {
  font-size: 80px;
  animation: legendDiamondSpin 2s ease-in-out infinite;
}
@keyframes legendDiamondSpin {
  0%   { transform: rotate(0deg)   scale(1);   }
  25%  { transform: rotate(90deg)  scale(1.1); }
  50%  { transform: rotate(180deg) scale(1);   }
  75%  { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1);   }
}

.idol-legend-text {
  font-size: 40px;
  font-weight: 900;
  color: #ffd700;
  text-shadow:
    0 0 40px rgba(255, 215, 0, 0.8),
    0 0 80px rgba(255, 215, 0, 0.4);
  animation: legendSlam 0.6s ease-out both;
}
@keyframes legendSlam {
  0%   { transform: scale(0)   translateY(-20px); opacity: 0; }
  70%  { transform: scale(1.3) translateY(0);     opacity: 1; }
  100% { transform: scale(1)   translateY(0);     opacity: 1; }
}

.idol-legend-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd700;
  pointer-events: none;
  animation: legendParticle 1.2s ease-out both;
}
@keyframes legendParticle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform:
      translate(
        calc(var(--px, 0) * 1px),
        calc(var(--py, 0) * 1px)
      )
      scale(0.3);
    opacity: 0;
  }
}

/* ───────────────────────────────────────────────
   6. 진화 축하 화면 (.idol-evolution-*)
   ─────────────────────────────────────────────── */
.idol-evolution-overlay {
  position: fixed;
  inset: 0;
  z-index: 650;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: radial-gradient(ellipse, rgba(171, 71, 188, 0.3), rgba(0, 0, 0, 0.9));
}

.idol-evolution-stages {
  display: flex;
  align-items: center;
  gap: 16px;
}

.idol-evolution-stage-card {
  text-align: center;
  padding: 12px;
}
.idol-evolution-stage-card .emoji {
  font-size: 48px;
  display: block;
  margin-bottom: 6px;
}
.idol-evolution-stage-card .name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.idol-evolution-arrow {
  font-size: 32px;
  color: #ffd700;
  animation: evoArrowPulse 1s ease-in-out infinite;
}
@keyframes evoArrowPulse {
  0%   { transform: scale(0.8); opacity: 0.5; }
  50%  { transform: scale(1.2); opacity: 1;   }
  100% { transform: scale(0.8); opacity: 0.5; }
}

.idol-evolution-text {
  font-size: 24px;
  font-weight: 900;
  color: #ffd700;
  margin-top: 12px;
  text-shadow:
    0 0 16px rgba(255, 215, 0, 0.6),
    0 0 40px rgba(255, 215, 0, 0.3);
}

/* ───────────────────────────────────────────────
   7. 타인 땅 선택 UI (.idol-land-choice-*)
   ─────────────────────────────────────────────── */
.idol-land-choice-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.idol-land-fee-notice {
  font-size: 13px;
  color: #ff9500;
  padding: 6px 12px;
  background: rgba(255, 149, 0, 0.1);
  border-radius: 8px;
  text-align: center;
}

.idol-land-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.idol-land-choice-btn:active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
}

/* ───────────────────────────────────────────────
   8. FX 티어 분기 — 새 시스템 대응
   ─────────────────────────────────────────────── */

/* minimal: 모든 새 애니메이션 비활성화 */
.idol-fx-minimal .idol-festival-title,
.idol-fx-minimal .idol-festival-character,
.idol-fx-minimal .idol-festival-score,
.idol-fx-minimal .idol-festival-combo,
.idol-fx-minimal .idol-legend-diamond,
.idol-fx-minimal .idol-legend-text,
.idol-fx-minimal .idol-legend-particle,
.idol-fx-minimal .idol-evolution-arrow,
.idol-fx-minimal .ies-stat-text,
.idol-fx-minimal .idol-timer-bar-fill {
  animation: none !important;
}

/* reduced: 글로우/파티클/노이즈만 비활성화 */
.idol-fx-reduced .idol-legend-particle { display: none; }
.idol-fx-reduced .ies-noise { display: none; }


/* ═══════════════════════════════════════════════
   9. 가챠 릴 연출
   ═══════════════════════════════════════════════ */

.idol-gacha-overlay {
  font-family: inherit;
}

.idol-gacha-machine {
  background: linear-gradient(135deg, #1a1a2e, #0d0d1a);
  border: 2px solid #ffd700;
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 340px;
  width: min(340px, 90vw);
  text-align: center;
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.2),
    0 0 60px rgba(255, 215, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.idol-gacha-title {
  font-size: 20px;
  font-weight: 900;
  color: #ffd700;
  letter-spacing: 4px;
  margin-bottom: 20px;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

.idol-gacha-reel-box {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.idol-gacha-reel-slot {
  width: 60px;
  height: 60px;
  border: 2px solid #ffd70080;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.idol-gacha-reel-content {
  font-size: 32px;
  line-height: 1;
  display: block;
}

.idol-gacha-reel-content.idol-gacha-spinning {
  animation: idol-gacha-spin 0.1s linear infinite alternate;
}

.idol-gacha-reel-content.idol-gacha-stopped {
  animation: idol-gacha-bounce 0.35s ease-out forwards;
}

/* 등급 판정 */
.idol-gacha-grade-reveal {
  margin-top: 4px;
  font-weight: 900;
  letter-spacing: 2px;
}

.idol-gacha-grade-common {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  animation: idol-gacha-reward-fadein 0.5s ease-out forwards;
}

.idol-gacha-grade-hit {
  font-size: 24px;
  color: #ffd700;
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.8);
  animation: idol-gacha-hit-bounce 0.5s ease-out forwards;
}

/* 히트 플래시 (전체 화면) */
.idol-gacha-flash {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 10000;
  pointer-events: none;
  animation: idol-gacha-flash-anim 0.15s ease-out forwards;
}

/* 보상 텍스트 */
.idol-gacha-reward-text {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  animation: idol-gacha-reward-fadein 0.4s ease-out forwards;
}

/* minimal 티어: 가챠 애니메이션 비활성화 */
.idol-fx-minimal .idol-gacha-reel-content {
  animation: none !important;
}

/* reduced 티어: 플래시 비활성화 */
.idol-fx-reduced .idol-gacha-flash {
  display: none;
}


/* ═══════════════════════════════════════════════
   10. 스탯 변화 플로팅 텍스트
   ═══════════════════════════════════════════════ */

.idol-stat-float {
  position: absolute;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 900;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  transition: none;
}
.idol-stat-float.positive { color: #4cff8b; }
.idol-stat-float.negative { color: #ff4c4c; }
.idol-stat-float.animate {
  animation: idol-stat-float-up 1.1s ease-out forwards;
}

@keyframes idol-stat-float-up {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.8); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.1); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.9); }
}


/* ═══════════════════════════════════════════════
   11. 이벤트 카드 효과 플래시
   ═══════════════════════════════════════════════ */

.idol-event-effect-flash {
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.idol-event-effect-flash.positive {
  background: radial-gradient(ellipse at center, rgba(76,255,139,0.25) 0%, transparent 70%);
}
.idol-event-effect-flash.negative {
  background: radial-gradient(ellipse at center, rgba(255,76,76,0.25) 0%, transparent 70%);
}
.idol-event-effect-flash.active {
  opacity: 1;
  animation: idol-event-flash-pulse 0.5s ease-out forwards;
}

@keyframes idol-event-flash-pulse {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}


/* ═══════════════════════════════════════════════
   12. 수수료 코인 날아가기
   ═══════════════════════════════════════════════ */

.idol-rent-coin-fly {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 28px;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: none;
}
.idol-rent-coin-fly.fly {
  animation: idol-coin-fly 0.9s ease-out forwards;
}

@keyframes idol-coin-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  50%  { opacity: 1; transform: translate(calc(-50% + 60px), calc(-50% - 40px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + 100px), calc(-50% - 80px)) scale(0.5); }
}


/* ═══════════════════════════════════════════════
   13. 타이머 긴박감 연출
   ═══════════════════════════════════════════════ */

.idol-timer-vignette {
  position: absolute;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  box-shadow: inset 0 0 100px rgba(255, 0, 0, var(--vignette-opacity, 0));
  transition: box-shadow 0.25s ease;
}

.idol-timer-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: 900;
  z-index: 310;
  pointer-events: none;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  transition: color 0.2s ease;
}
.idol-countdown-bounce {
  animation: idol-countdown-pulse 0.3s ease-out;
}
@keyframes idol-countdown-pulse {
  0%   { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
}

.idol-timer-shake {
  animation: idol-shake 0.15s linear infinite;
}
@keyframes idol-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, 2px); }
  100% { transform: translate(1px, -2px); }
}

/* TIME OUT 오버레이 */
.idol-timeout-overlay {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.idol-timeout-overlay.active {
  opacity: 1;
}
.idol-timeout-text {
  font-size: 36px;
  font-weight: 900;
  color: #ff4444;
  text-shadow: 0 0 20px rgba(255, 68, 68, 0.6);
  animation: idol-timeout-slam 0.3s ease-out;
}
@keyframes idol-timeout-slam {
  0%   { transform: scale(2); opacity: 0; }
  60%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}


/* ═══════════════════════════════════════════════
   14. 턴 전환 배너
   ═══════════════════════════════════════════════ */

.idol-turn-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(20,20,30,0.92), rgba(30,30,50,0.92));
  border-bottom: 3px solid var(--banner-color, #ffd700);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
}
.idol-turn-banner.visible {
  transform: translateY(0);
  opacity: 1;
}
.idol-turn-banner-avatar {
  font-size: 24px;
}
.idol-turn-banner-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--banner-color, #ffd700);
}
.idol-turn-banner-label {
  font-size: 16px;
  color: rgba(255,255,255,0.8);
}


/* ═══════════════════════════════════════════════
   15. 감옥 진입 연출
   ═══════════════════════════════════════════════ */

.idol-jail-entry {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.idol-jail-entry.active {
  opacity: 1;
}
.idol-jail-emoji {
  font-size: 56px;
  animation: idol-jail-slam 0.4s ease-out;
}
.idol-jail-text {
  font-size: 24px;
  font-weight: 900;
  color: #ff6b6b;
  margin-top: 8px;
  animation: idol-jail-fadein 0.3s ease-out 0.2s both;
}
@keyframes idol-jail-slam {
  0%   { transform: scale(3); opacity: 0; }
  50%  { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes idol-jail-fadein {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.idol-jail-shake {
  animation: idol-shake 0.12s linear 3;
}


/* ═══════════════════════════════════════════════
   16. FX 티어 분기 — 새 연출들
   ═══════════════════════════════════════════════ */

/* minimal: 모든 새 연출 비활성화 */
.idol-fx-minimal .idol-stat-float,
.idol-fx-minimal .idol-event-effect-flash,
.idol-fx-minimal .idol-rent-coin-fly,
.idol-fx-minimal .idol-timer-vignette,
.idol-fx-minimal .idol-timer-countdown,
.idol-fx-minimal .idol-timeout-overlay,
.idol-fx-minimal .idol-jail-entry {
  display: none !important;
}
.idol-fx-minimal .idol-turn-banner {
  /* 배너는 minimal에서도 표시 (중요 정보) */
  transition-duration: 0.1s;
}

/* reduced: 흔들림/비그넷만 비활성화 */
.idol-fx-reduced .idol-timer-vignette { display: none; }
.idol-fx-reduced .idol-timer-shake,
.idol-fx-reduced .idol-jail-shake { animation: none !important; }


/* ═══════════════════════════════════════════════
   17. 페스티벌 v2 — 대규모 연출
   ═══════════════════════════════════════════════ */

/* ── 사전 예고 배너 ── */
.idol-prefest-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9990;
  text-align: center;
  padding: 14px 20px;
  background: linear-gradient(135deg, #1a0a2e, #2d1b69);
  color: #ffd700;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
  animation: fest-banner-slide 0.4s ease-out;
  pointer-events: none;
}
.idol-prefest-banner-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  font-weight: 400;
}

/* ── 좌우 분할 레이아웃 ── */
.fest-split-container {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.fest-card-area {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
}
.fest-combo-area {
  width: 55%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
  position: relative;
}

/* ── 플레이어 카드 ── */
.fest-player-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px 14px;
  width: 95%;
  max-width: 320px;
  text-align: center;
  animation: fest-slide-in-right 0.5s ease-out forwards;
  overflow-y: auto;
  max-height: 90vh;
}
.fest-player-card .fest-idol-img {
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffd700;
  margin: 0 auto 8px;
  display: block;
}
.fest-player-card .fest-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin: 0 auto 8px;
}
.fest-player-card .fest-idol-name {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}
.fest-player-card .fest-idol-type {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}
.fest-player-card .fest-idol-stage {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.fest-player-card .fest-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.fest-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.fest-stat-label { color: rgba(255,255,255,0.6); }
.fest-stat-val { color: #fff; font-weight: 700; }
.fest-player-card .fest-favor {
  font-size: 15px;
  color: #ff69b4;
  font-weight: 700;
  margin: 6px 0;
  padding: 6px;
  background: rgba(255,105,180,0.1);
  border-radius: 8px;
}
.fest-items-detail {
  margin-top: 8px;
  text-align: left;
}
.fest-items-title {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
  text-align: center;
}
.fest-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  margin-bottom: 3px;
}
.fest-item-name { color: #fff; font-weight: 600; flex-shrink: 0; }
.fest-item-combo { color: #69f0ae; font-size: 10px; margin-left: auto; }
.fest-items-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-top: 8px;
}
.fest-my-card {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

/* ── 콤보 조건 연출 ── */
.fest-combo-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
  text-align: center;
}
.fest-score-counter {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: #ffd700;
  margin-bottom: 12px;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}
.fest-combo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: fest-combo-slide-down 0.35s ease-out forwards;
  opacity: 0;
}
.fest-combo-item.fest-combo-zero {
  opacity: 0.35;
  filter: grayscale(0.8);
}
.fest-combo-emoji {
  font-size: 20px;
  flex-shrink: 0;
}
.fest-combo-desc {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.fest-combo-value {
  font-size: 14px;
  font-weight: 700;
  color: #ffd700;
  min-width: 36px;
  text-align: right;
}
.fest-combo-reaction {
  font-size: 12px;
  font-weight: 700;
  margin-left: 4px;
  animation: fest-reaction-pop 0.3s ease-out;
}
.fest-combo-reaction.good { color: #4fc3f7; }
.fest-combo-reaction.great { color: #ab47bc; }
.fest-combo-reaction.amazing { color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.6); }

.fest-total-score {
  font-size: 36px;
  font-weight: 900;
  color: #ffd700;
  text-align: center;
  margin-top: 16px;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  animation: fest-score-pop 0.4s ease-out;
}
.fest-rank-prediction {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

/* ── 스킵/닫기 UI ── */
.fest-skip-bar {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}
.fest-skip-btn, .fest-close-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fest-skip-btn:active, .fest-close-btn:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.95);
}
.fest-vote-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ── 순위 카드 ── */
.fest-rank-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.fest-rank-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fest-drop-in 0.4s ease-out forwards;
  opacity: 0;
}
.fest-rank-first {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
  border: 2px solid rgba(255, 215, 0, 0.5);
  animation: fest-drop-in 0.4s ease-out forwards, fest-gold-flash 2s ease-in-out infinite 0.5s;
}
.fest-rank-tie {
  animation: fest-wobble 0.5s ease-in-out 0.4s;
}
.fest-rank-medal {
  font-size: 28px;
  flex-shrink: 0;
}
.fest-rank-info {
  flex: 1;
  min-width: 0;
}
.fest-rank-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fest-rank-score {
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
}
.fest-rank-crown {
  font-size: 24px;
  animation: fest-crown-pulse 1s ease-in-out infinite;
}
.fest-rank-msg {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* ── 요약 모드 ── */
.fest-summary-container {
  width: 100%;
  max-width: 360px;
  padding: 0 16px;
}
.fest-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.fest-summary-medal { font-size: 20px; flex-shrink: 0; }
.fest-summary-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fest-summary-score {
  font-size: 14px;
  font-weight: 700;
  color: #ffd700;
}
.fest-summary-rewards {
  display: flex;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.fest-summary-rewards span {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── 순서 공개 ── */
.fest-order-list {
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
}
.fest-order-me {
  color: #ffd700;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.fest-name-preview {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  animation: fest-fade-in 0.3s ease-out;
}

/* ── 키프레임 ── */
@keyframes fest-banner-slide {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}
@keyframes fest-slide-in-right {
  0%   { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes fest-slide-out-left {
  0%   { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}
@keyframes fest-gold-flash {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
  50%      { box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.2); }
}
@keyframes fest-combo-slide-down {
  0%   { transform: translateY(-12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes fest-reaction-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes fest-drop-in {
  0%   { transform: translateY(-40px); opacity: 0; }
  60%  { transform: translateY(4px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes fest-crown-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
@keyframes fest-wobble {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}
@keyframes fest-score-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fest-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fest-gradient-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* FX 티어: minimal — 페스티벌 파티클/애니 비활성화 */
.idol-fx-minimal .fest-combo-item { animation: none; opacity: 1; }
.idol-fx-minimal .fest-rank-card { animation: none; opacity: 1; }
.idol-fx-minimal .fest-player-card { animation: none; }
.idol-fx-minimal .idol-prefest-banner { animation: none; }
/* FX 티어: reduced — 파티클만 비활성화 */
.idol-fx-reduced .idol-festival-particle { display: none; }

/* ===== �Ʒ� ��� ���� �������� ===== */
#idolGame .idol-train-stat-overlay {
  position: absolute;
  inset: 0;
  z-index: 430;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 28px);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.64) 72%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.18), rgba(6, 8, 16, 0.54));
  transition: opacity 0.18s ease;
}

#idolGame .idol-train-stat-overlay.is-visible {
  opacity: 1;
}

#idolGame .idol-train-stat-card {
  width: min(560px, 94vw);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: linear-gradient(160deg, rgba(12, 16, 28, 0.95), rgba(5, 8, 16, 0.96));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  text-align: center;
  padding: clamp(16px, 4vw, 28px) clamp(16px, 5vw, 34px);
}

#idolGame .idol-train-stat-title {
  font-size: clamp(16px, 2.8vw, 24px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: clamp(10px, 2.5vw, 16px);
}

#idolGame .idol-train-stat-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(8px, 2vw, 14px);
  margin-bottom: clamp(6px, 1.8vw, 10px);
}

#idolGame .idol-train-stat-emoji {
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1;
}

#idolGame .idol-train-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(44px, 10vw, 78px);
  font-weight: 900;
  line-height: 0.94;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.26);
}

#idolGame .idol-train-stat-label {
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 800;
  color: #f5f7ff;
}

#idolGame .idol-train-stat-sub {
  font-size: clamp(12px, 2.8vw, 18px);
  color: rgba(233, 240, 255, 0.86);
  letter-spacing: 0.01em;
}

#idolGame .idol-train-stat-card.tone-talent {
  border-color: rgba(0, 223, 255, 0.78);
  box-shadow: 0 0 28px rgba(0, 223, 255, 0.2), 0 18px 44px rgba(0, 0, 0, 0.46);
}
#idolGame .idol-train-stat-card.tone-talent .idol-train-stat-value,
#idolGame .idol-train-stat-card.tone-talent .idol-train-stat-label {
  color: #7df8ff;
}

#idolGame .idol-train-stat-card.tone-looks {
  border-color: rgba(255, 114, 196, 0.8);
  box-shadow: 0 0 28px rgba(255, 114, 196, 0.2), 0 18px 44px rgba(0, 0, 0, 0.46);
}
#idolGame .idol-train-stat-card.tone-looks .idol-train-stat-value,
#idolGame .idol-train-stat-card.tone-looks .idol-train-stat-label {
  color: #ff9bcf;
}

#idolGame .idol-train-stat-card.tone-fame {
  border-color: rgba(255, 208, 92, 0.84);
  box-shadow: 0 0 30px rgba(255, 208, 92, 0.22), 0 18px 44px rgba(0, 0, 0, 0.46);
}
#idolGame .idol-train-stat-card.tone-fame .idol-train-stat-value,
#idolGame .idol-train-stat-card.tone-fame .idol-train-stat-label {
  color: #ffe08f;
}

@media (max-width: 600px) {
  #idolGame .idol-train-stat-overlay {
    padding: 10px;
    background:
      radial-gradient(86% 72% at 50% 42%, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.52) 74%),
      linear-gradient(180deg, rgba(6, 8, 16, 0.10), rgba(6, 8, 16, 0.42));
  }

  #idolGame .idol-train-stat-card {
    width: min(96vw, 430px);
    border-radius: 18px;
    padding: 14px 14px 16px;
  }
}

/* Billboard tuner overlay */
#idolGame .idol-btuner-open-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 520;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(12, 18, 32, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#idolGame .idol-btuner-overlay {
  position: absolute;
  inset: 0;
  z-index: 760;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#idolGame .idol-btuner-card {
  width: min(460px, 96vw);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(11, 15, 28, 0.96), rgba(7, 10, 18, 0.97));
  box-shadow: 0 20px 48px rgba(0,0,0,0.44);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#idolGame .idol-btuner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#idolGame .idol-btuner-title {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

#idolGame .idol-btuner-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
}

#idolGame .idol-btuner-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

#idolGame .idol-btuner-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#idolGame .idol-btuner-field span {
  font-size: 11px;
  color: rgba(232, 241, 255, 0.88);
}

#idolGame .idol-btuner-field select {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 6px 8px;
}

#idolGame .idol-btuner-slider {
  display: grid;
  gap: 4px;
}

#idolGame .idol-btuner-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(240,246,255,0.92);
  font-size: 12px;
}

#idolGame .idol-btuner-slider-head b {
  font-family: 'Outfit', sans-serif;
  color: #ffe082;
}

#idolGame .idol-btuner-slider input[type="range"] {
  width: 100%;
}

#idolGame .idol-btuner-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

#idolGame .idol-btuner-actions .idol-btn {
  min-height: 42px;
  font-size: 12px;
}

@media (max-width: 560px) {
  #idolGame .idol-btuner-row {
    grid-template-columns: 1fr;
  }

  #idolGame .idol-btuner-actions {
    grid-template-columns: 1fr;
  }

  #idolGame .idol-btuner-open-btn {
    font-size: 11px;
    padding: 6px 8px;
  }
}