/* --------------------------------------------------
   기본: 디자인 토큰, 리셋, 글꼴
   콘셉트: 밤의 카드 테이블 — 어두운 바탕 위에 밝은 카드, 오름(초록▲)/내림(빨강▼), 차례는 금색
   가볍게: 웹폰트 없음(시스템 글꼴), 그림자 최소, 블러 없음
   -------------------------------------------------- */

:root {
    /* 바탕과 면 */
    --bg: #0f1420;
    --surface: #161d2d;
    --surface-2: #1d2639;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);

    /* 글자 */
    --text: #e9edf6;
    --muted: #8e99b2;

    /* 의미 색 */
    --accent: #8b6cff;          /* 브랜드·주요 버튼 */
    --accent-strong: #7656f5;
    --up: #2fd486;              /* 오름차순 ▲ */
    --down: #ff6380;            /* 내림차순 ▼ */
    --gold: #ffc93d;            /* 내 차례·선택 */

    /* 카드 앞면 */
    --card-face: #f6f3ec;
    --card-ink: #1b2233;

    /* 형태 */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --tap: 44px;                /* 최소 터치 크기 */
    --app-max: 1100px;

    /* 노치·홈 바 영역 */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100dvh;
    background:
        radial-gradient(120% 60% at 50% 0%, #1a2440 0%, transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', 'Malgun Gothic',
                 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;   /* 모바일 탭 시 회색 상자 제거 */
    overscroll-behavior-y: none;
}

button, input {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    touch-action: manipulation;   /* 더블탭 확대 지연 제거 */
}

h1, h2, h3, p {
    margin: 0;
}

/* 숫자는 폭이 같은 글꼴 숫자로 (카드·장수가 흔들리지 않게) */
.pile-value, .hand-card, .seat-count, .count-pill, #deck-count, .chip {
    font-variant-numeric: tabular-nums;
}

/* 움직임 줄이기 설정을 존중 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}