/* ====== 공용 디자인 토큰 & 기본 ====== */
:root {
  --bg: #14122b;
  --bg2: #241f4d;
  --bg3: #0d0b1f;
  --panel: rgba(255, 255, 255, 0.07);
  --panel2: rgba(255, 255, 255, 0.13);
  --panel3: rgba(255, 255, 255, 0.2);
  --line: rgba(255, 255, 255, 0.16);
  --line2: rgba(255, 255, 255, 0.28);
  --text: #f7f6ff;
  --muted: rgba(244, 243, 255, 0.74);
  --muted2: rgba(244, 243, 255, 0.55);
  --accent: #ff5f6d;
  --accent-2: #ff8a65;           /* accent 그라데이션 끝 색 */
  --accent2: #ffc371;
  --gold: #ffd166;
  --silver: #d9dcea;
  --bronze: #e3a26f;
  --good: #47e0a5;
  --bad: #ff5f6d;
  --info: #4facfe;
  --purple: #a66cff;
  --btn: #5b5be6;
  --me: #5b5be6;
  --pc: #8a8aff;                 /* 플레이어 컬러 기본값 */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.45);
  --focus: 0 0 0 4px rgba(255, 195, 113, 0.95), 0 0 0 9px rgba(255, 195, 113, 0.28);
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --font: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 700px at 15% -5%, rgba(166, 108, 255, .28), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(255, 95, 109, .18), transparent 55%),
    radial-gradient(1200px 800px at 20% 0%, var(--bg2), var(--bg) 60%);
  background-color: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button:focus { outline: none; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus); }
input { font-family: inherit; }
input::placeholder { color: var(--muted2); }
.hidden { display: none !important; }
::selection { background: rgba(255, 195, 113, .35); }

/* ---- 스크롤바 (다크) ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); background-clip: padding-box; border: 2px solid transparent; }

/* ---- 공용 버튼 ---- */
.btn {
  border: 1px solid var(--line2); background: var(--panel2); color: var(--text);
  border-radius: 14px; padding: .55em 1.1em; font-size: 1em; font-weight: 800; line-height: 1.2;
  min-height: 2.6em; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .1s var(--ease-pop), background .15s, box-shadow .15s, filter .15s;
}
.btn:hover { background: var(--panel3); }
.btn:active { transform: translateY(2px) scale(.98); box-shadow: none; }
.btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; box-shadow: 0 4px 18px rgba(255, 95, 109, .45), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-accent:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--panel); }
.btn-sm { padding: .35em .7em; font-size: .82em; min-height: 2.2em; border-radius: 10px; }
.btn-lg { padding: .75em 1.5em; font-size: 1.35em; border-radius: 18px; min-height: 2.6em; }

/* ====== 애니메이션 ====== */
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-12px); } 40% { transform: translateX(12px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes countPop { 0% { transform: scale(2.2); opacity: 0; filter: blur(6px); } 35% { transform: scale(.92); opacity: 1; filter: blur(0); } 55% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .0), 0 0 30px rgba(255, 209, 102, .25); } 50% { box-shadow: 0 0 0 4px rgba(255, 209, 102, .25), 0 0 50px rgba(255, 209, 102, .5); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes timerBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.h-shake { animation: shake .4s; }
.pulse { animation: pulse .35s var(--ease-pop); }

/* ====== 공용 토스트/플래시 ====== */
.ui-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: rgba(10, 8, 30, .92); border: 1px solid var(--line2); color: #fff; padding: 14px 20px; border-radius: 14px; font-size: 16px; font-weight: 700; opacity: 0; transition: .25s var(--ease-pop); z-index: 1000; max-width: 90vw; text-align: center; box-shadow: var(--shadow); }
.ui-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ui-flash { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .85; }

/* ====== 접근성: 모션 최소화 ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}