/* ============================================================
   크레이지 아케이드 문법의 테마. 두 레퍼런스 스샷(로비 방리스트, 대기방)에서
   그대로 뜬 값들이다:
   - 코발트 파랑 바닥 위에 로열블루 패널, 패널마다 하늘색 두꺼운 테두리
   - 버튼은 세로 그라데이션 알약 + 어두운 외곽선 + 윗면 광택
   - 액션은 노랑→주황 (준비 버튼), 보조는 보라, 상태 글자는 노랑 볼드
   - 텍스트 영역은 검남색 우물(채팅창), 리스트는 광택 컬러 바(유저 목록)
   - 흰 글자에는 얇은 어두운 외곽선
   먼저 똑같이 만들고, 콜로세움에 맞게 덜어내는 건 그 다음 단계다.
   ============================================================ */

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
}
/* 크아의 둥근 제목 글씨 역할. OFL이라 자체 서빙. */
@font-face {
    font-family: 'Jua';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/static/fonts/Jua-Regular.ttf') format('truetype');
}

:root {
    --font-game: 'Jua', 'Pretendard Variable', sans-serif;
    --font-sans: 'Pretendard Variable', Pretendard, -apple-system,
                 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', Consolas, 'D2Coding', monospace;

    /* 바닥과 패널 */
    --bg:           #16337e;   /* 코발트 바닥 */
    --bg-deep:      #102455;
    --panel:        #2e64ce;   /* 로열블루 패널 */
    --panel-hi:     #4f8ae8;   /* 패널 그라데이션 윗톤 */
    --panel-border: #8cd0f8;   /* 하늘색 테두리 */
    --edge:         #0b1c48;   /* 어두운 외곽선 */
    --well:         #0a1533;   /* 검남색 우물(채팅창) */

    /* 캔디 */
    --yellow:  #ffd400;
    --orange:  #ff9000;
    --purple:  #a44ae0;
    --green:   #2fbf3a;
    --red:     #f03b30;

    --text:     #ffffff;
    --text-dim: #b9d4f6;

    /* 옛 토큰을 쓰는 페이지가 남아 있어도 크아 값으로 렌더되게 물려둔다 */
    --surface: var(--panel);
    --line:    rgba(140, 208, 248, 0.45);
    --accent:  var(--yellow);
    --pos:     var(--green);
    --neg:     var(--red);
}

.num, .v, .rk, td.num, .stat .v { font-variant-numeric: tabular-nums; }

/* hidden 속성은 display를 명시한 컴포넌트(.ca-bar 같은)에도 이겨야 한다.
   오목·포커를 숨기는 방식이 전부 이 속성이라, 지면 숨김이 통째로 안 먹는다. */
[hidden] { display: none !important; }

/* ---------- 공용 부품 ---------- */

/* 바닥: 코발트 + 은은한 대각 패턴 (레퍼런스 바닥의 어두운 무늬) */
.ca-ground {
    background:
        repeating-linear-gradient(135deg,
            rgba(9, 24, 66, 0.13) 0 10px, rgba(9, 24, 66, 0) 10px 20px),
        radial-gradient(ellipse at 50% -10%, #2a55b4 0%, var(--bg) 55%, var(--bg-deep) 100%);
    background-attachment: fixed;
}

/* 패널: 하늘색 두꺼운 테두리 + 안쪽 어두운 선 + 파랑 그라데이션 면 */
.ca-panel {
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 42%, #2454b4 100%);
    border: 3px solid var(--panel-border);
    border-radius: 14px;
    box-shadow:
        inset 0 0 0 2px rgba(8, 22, 62, 0.55),
        0 4px 0 rgba(0, 0, 0, 0.28);
}

/* 우물: 채팅창처럼 파인 검남색 영역 */
.ca-well {
    background: var(--well);
    border: 2px solid #061027;
    border-radius: 10px;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55),
                0 1px 0 rgba(140, 208, 248, 0.35);
}

/* 알약 버튼: 세로 그라데이션 + 어두운 외곽선 + 윗면 광택 + 눌림 */
.ca-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-game);
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    padding: 9px 22px 10px;
    border-radius: 999px;
    border: 2px solid var(--edge);
    background: linear-gradient(180deg, #6aa6f4 0%, #3a74dc 48%, #2a5cc4 52%, #2050b0 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5),
                inset 0 -3px 0 rgba(0, 0, 0, 0.22),
                0 3px 0 rgba(0, 0, 0, 0.35);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.ca-btn:hover { filter: brightness(1.08); text-decoration: none; }
.ca-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.35); }

/* 준비 버튼: 노랑→주황, 큰 것 */
.ca-btn.ready {
    background: linear-gradient(180deg, #ffe764 0%, #ffc61e 46%, #ff9d00 54%, #f07800 100%);
    border-color: #7a3c00;
    text-shadow: 0 2px 0 rgba(122, 60, 0, 0.55);
}
.ca-btn.purple {
    background: linear-gradient(180deg, #cf8af6 0%, #ae5ae6 48%, #9a3fd8 52%, #8730c4 100%);
    border-color: #3c1064;
}
.ca-btn.green {
    background: linear-gradient(180deg, #7fe07f 0%, #3fc63f 48%, #2fb02f 52%, #219821 100%);
    border-color: #0d4a0d;
}
.ca-btn.red {
    background: linear-gradient(180deg, #ff8a7e 0%, #f4503f 48%, #e03426 52%, #c22417 100%);
    border-color: #5c0e06;
}
.ca-btn.big { font-size: 22px; padding: 13px 44px 15px; border-radius: 16px; }
.ca-btn.small { font-size: 12px; padding: 5px 14px 6px; }

/* 번호 칩: S01 스타일 — 노랑 바탕에 빨간 글씨 */
.ca-chip {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-game);
    background: linear-gradient(180deg, #ffef7a 0%, #ffd400 55%, #ffb400 100%);
    color: #e02525;
    border: 2px solid #8a5200;
    border-radius: 7px;
    padding: 1px 8px 2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.25);
    white-space: nowrap;
}

/* 광택 컬러 바: 로비 왼쪽 유저 목록의 그 줄 */
.ca-bar {
    display: flex; align-items: center; gap: 10px;
    border: 2px solid rgba(4, 12, 40, 0.6);
    border-radius: 9px;
    padding: 8px 12px;
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 46%,
        rgba(0, 0, 0, 0.10) 54%, rgba(0, 0, 0, 0.22) 100%);
    background-color: var(--panel);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* 흰 글자의 어두운 외곽선 (크아 텍스트 기본기) */
.ca-outline {
    text-shadow:
        -1px 0 0 rgba(6, 18, 52, 0.9), 1px 0 0 rgba(6, 18, 52, 0.9),
        0 -1px 0 rgba(6, 18, 52, 0.9), 0 2px 0 rgba(6, 18, 52, 0.9);
}

/* 상태 글자: WAITING의 노랑 볼드 */
.ca-status {
    font-family: var(--font-game);
    color: var(--yellow);
    text-shadow: 0 2px 0 rgba(60, 30, 0, 0.55);
    letter-spacing: 0.02em;
}