/* ===== 디자인 · 레트로 노래방 (차분한 버전) =====
   style.css 위에 덮어쓰는 테마. 크림 종이 톤 + 얇은 잉크 외곽선, 그림자는 큰 패널에만 살짝. */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;500;700&display=swap');
:root {
  --bg: #f6f1e4; --panel: #fffcf5; --panel2: #f9f3e3; --border: #d9cfb8;
  --text: #2d2a25; --muted: #786f5f; --accent: #d9603f; --yellow: #f6dc8c;
  --good: #2e8b57; --warn: #a97a1c; --bad: #c4452f;
  --ink: #4a4338;
}
body { font-family: 'Noto Sans KR', -apple-system, sans-serif; background: var(--bg); }
h1, .countdown { font-family: 'Black Han Sans', sans-serif; font-weight: 400 !important; }
h1 { font-size: 30px; letter-spacing: .5px; color: var(--text); }

.stage, .topbar, .card, .live-history {
  border: 1px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 rgba(74, 67, 56, .18);
}
.setup-col, .theme-scroll { border: 1px solid var(--border); border-radius: 10px; box-shadow: none; }
.setup-col { background: var(--panel2); }

button { border: 1px solid var(--border); border-radius: 8px; background: #fff; font-weight: 500; }
button:hover:not(:disabled) { background: #fffaf0; border-color: var(--ink); }
.team-select button.active, .diff-select button.active, .setup-tabs button.active, .mode-select button.active,
.team-select button.active:hover:not(:disabled), .diff-select button.active:hover:not(:disabled),
.setup-tabs button.active:hover:not(:disabled), .mode-select button.active:hover:not(:disabled) {
  background: var(--yellow); border-color: var(--ink); color: var(--text);
}
.diff-select button.active span { color: var(--muted); }
.btn-accent, .clip-btn.playing, .next-main,
.btn-accent:hover:not(:disabled), .next-main:hover:not(:disabled), .clip-btn.playing:hover:not(:disabled) {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
#start-btn { font-size: 18px; font-weight: 700; padding: 13px 52px; border-radius: 10px; box-shadow: 0 2px 0 #b54b2e; }
.next-main { box-shadow: 0 2px 0 #b54b2e; }
@keyframes nextPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
.clip-btn.used { border-color: var(--ink); }

.disc {
  background: repeating-radial-gradient(circle at center, #34312c 0 5px, #282622 5px 10px);
  border: 3px solid #2a2722; box-shadow: 0 4px 14px rgba(60, 50, 30, .22);
}
.disc::after { background: var(--accent); border: 2px solid var(--yellow); width: 20px; height: 20px; }

input[type=text], input[type=number] { background: #fff; border: 1px solid var(--border); border-radius: 8px; }
input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(217, 96, 63, .15); }

.countdown { color: var(--text); text-shadow: 3px 3px 0 var(--yellow); }
.clip-score { color: var(--accent); }

.player-card { border: 1px solid var(--border); border-radius: 999px; box-shadow: none; }
.player-card.me { border-color: var(--ink); background: #fff7dd; box-shadow: none; }
.player-card .me-tag { color: var(--accent); }
.team-chip { border: 1px solid var(--border); box-shadow: none; }
.team-chip.current { border-color: var(--ink); box-shadow: none; }

#skip-btn { color: var(--bad); border-color: #e3b3a8; background: #fff; }
#skip-btn:hover:not(:disabled), #skip-btn.voting { background: #fdf0ec; border-color: var(--bad); }

.room-code { border: 1px dashed var(--ink); color: var(--text); background: #fff7dd; border-radius: 6px; }
.footer-link { border-color: var(--border); }