/* =====================================================================
   botc-theme.css — BOTC(Blood on the Clocktower) 스타일 전면 리스킨
   ---------------------------------------------------------------------
   컨셉: 밤하늘 + 양피지 + 잉크 + 밀랍/금장
   로드 순서: game.css / botc.css / 뷰 인라인 스타일보다 우선해야 하는
   규칙은 `html body` 접두사로 특이도를 확보한다.
   ===================================================================== */

:root {
    --botc-night-deep: #07080f;
    --botc-night:      #0c0f1e;
    --botc-parch:      #e6d3a3;
    --botc-parch-dark: #c9ae74;
    --botc-parch-dim:  #8f7a4e;
    --botc-ink:        #2b2118;
    --botc-crimson:    #8e1f1f;
    --botc-crimson-hi: #c03030;
    --botc-gold:       #c9a227;
    --botc-gold-hi:    #ecd27a;
    --botc-display:    'Song Myung', 'Nanum Myeongjo', 'IM Fell English SC', serif;
    --botc-body-font:  'Gowun Batang', 'Nanum Myeongjo', serif;
}

/* ── 밤하늘: 별 + 비네트 ──────────────────────────────────────────── */
html body.db-play-screen::before,
html body.db-codex-page::before,
html body.db-ranking-page::before,
html body.db-start-page::before,
html body.db-auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 15% 12%, #cdd8ff 60%, transparent),
        radial-gradient(1.5px 1.5px at 32% 6%, #fff 60%, transparent),
        radial-gradient(1px 1px at 50% 15%, #cdd8ff 60%, transparent),
        radial-gradient(1px 1px at 68% 8%, #fff 60%, transparent),
        radial-gradient(1.5px 1.5px at 85% 18%, #dfe6ff 60%, transparent),
        radial-gradient(1px 1px at 8% 30%, #aebcf0 60%, transparent),
        radial-gradient(1px 1px at 93% 35%, #aebcf0 60%, transparent),
        radial-gradient(1px 1px at 25% 45%, #cdd8ff 60%, transparent),
        radial-gradient(1.5px 1.5px at 60% 38%, #dfe6ff 60%, transparent),
        radial-gradient(1px 1px at 78% 55%, #aebcf0 60%, transparent);
    animation: botc-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes botc-twinkle {
    from { opacity: .3; }
    to   { opacity: .9; }
}

/* ── 서체 ─────────────────────────────────────────────────────────── */
html body .db-title,
html body #db-result-title,
html body .codex-topbar-title,
html body #db-topbar-header .fw-bold,
html body .db-stat-badge,
html body #db-btn-openall,
html body #db-btn-kill,
html body #db-btn-truth,
html body #db-btn-retry {
    font-family: var(--botc-display) !important;
    font-weight: 400 !important;
}

/* =====================================================================
   토큰 — 양피지 동전
   ===================================================================== */

/* 뒷면: 어두운 가죽 + 금 이중 링 */
html body .db-token-back {
    background:
        radial-gradient(circle at 35% 28%, #2e2436 0%, #191220 60%, #0e0a14 100%) !important;
    border-color: #3d2f22 !important;
    box-shadow:
        0 4px 10px rgba(0,0,0,.6),
        inset 0 0 0 2.5px rgba(201,162,39,.35),
        inset 0 0 18px rgba(0,0,0,.7) !important;
}
html body .db-token-back i {
    color: rgba(201,162,39,.75) !important;
    font-family: 'IM Fell English SC', serif;
    text-shadow: 0 0 8px rgba(201,162,39,.4);
}

/* 앞면: 양피지 */
html body .db-token-front {
    background:
        radial-gradient(circle at 32% 26%, #f2e3b7 0%, #e0c98d 55%, #c4a86b 100%) !important;
    border-color: #9c8050 !important;
    box-shadow:
        0 4px 10px rgba(0,0,0,.6),
        inset 0 0 0 2px rgba(120,90,40,.35),
        inset 0 -6px 14px rgba(120,90,40,.3);
}
html body .db-token-front .db-art-ic {
    width: 54%;
    height: 54%;
    margin-top: -2%;
    display: block;
    --tk-acc: #e0c98d;
}
html body .db-token-front.db-token-front-art .db-art-token {
    width: 100%;
    height: 100%;
    filter: none;
}
html body .db-token-front .db-tname {
    background: linear-gradient(180deg, rgba(30,21,12,.82), rgba(18,12,6,.85)) !important;
    color: var(--botc-parch) !important;
    font-family: var(--botc-body-font) !important;
    letter-spacing: .02em;
}

/* 자리 번호: 밀랍 소인 */
html body .db-token-num {
    background: #1c1408 !important;
    color: var(--botc-gold-hi) !important;
    border: 1px solid rgba(201,162,39,.55) !important;
    font-family: var(--botc-body-font) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
}

/* 선택/힌트 글로우 — 금빛 */
html body .db-token.selectable .db-token-face {
    border-color: var(--botc-gold) !important;
    box-shadow: 0 0 0 3px rgba(201,162,39,.2), 0 0 14px rgba(236,210,122,.35) !important;
}
html body .db-token.selected .db-token-face {
    border-color: #f6ecc9 !important;
    box-shadow: 0 0 0 4px rgba(236,210,122,.3), 0 0 24px rgba(236,210,122,.8) !important;
}

/* ── 작은 아트 아이콘 공통 ─────────────────────────────────────────── */
.db-art-ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.14em;
}
/* 어두운 배경 컨텍스트: 강조색을 어두운 잉크로 → 실루엣 유지 */
html body .db-role-chip .db-art-ic,
html body .db-log-slot .db-art-ic,
html body .db-ab-ic .db-art-ic {
    --tk-acc: #15100a;
}
html body .db-role-chip .db-art-ic { width: 1.05em; height: 1.05em; }
html body .db-ab-ic .db-art-ic { width: 1.3em; height: 1.3em; }

/* 도감 토큰 */
.db-art-token {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.55));
}

/* =====================================================================
   버튼 — 가죽 + 금장 / 처형은 진홍 밀랍
   ===================================================================== */
html body #db-btn-openall {
    background: linear-gradient(180deg, #3f2f14, #241a0a) !important;
    border: 1px solid rgba(201,162,39,.55) !important;
    color: var(--botc-parch) !important;
    letter-spacing: .12em !important;
    box-shadow: 0 0 14px rgba(201,162,39,.14), inset 0 1px 0 rgba(236,210,122,.2) !important;
    text-shadow: none !important;
}
html body #db-btn-openall:hover,
html body #db-btn-openall:focus {
    background: linear-gradient(180deg, #52401e, #302410) !important;
    border-color: rgba(236,210,122,.7) !important;
    color: #f4e6bc !important;
}

html body #db-btn-kill,
html body #db-btn-retry {
    background: linear-gradient(180deg, #a32626, #6e1414) !important;
    border: 1px solid rgba(212,160,74,.6) !important;
    color: #f6e8c4 !important;
    letter-spacing: .14em !important;
    box-shadow: 0 0 18px rgba(163,38,38,.35), inset 0 1px 0 rgba(255,220,160,.25) !important;
}
html body #db-btn-kill:hover,
html body #db-btn-kill:focus,
html body #db-btn-retry:hover {
    background: linear-gradient(180deg, #b93030, #7e1a1a) !important;
    border-color: rgba(236,210,122,.75) !important;
    color: #fdf3d9 !important;
}

html body #db-btn-truth {
    background: linear-gradient(180deg, #232a4a, #141830) !important;
    border: 1px solid rgba(140,160,230,.45) !important;
    color: #cdd5f2 !important;
    letter-spacing: .1em !important;
}

html body #db-hub-ability {
    background: linear-gradient(180deg, #3f2f14, #241a0a) !important;
    border: 1px solid rgba(201,162,39,.55) !important;
    color: var(--botc-gold-hi) !important;
}
html body #db-hub-ability:hover,
html body #db-hub-ability:focus {
    background: linear-gradient(180deg, #52401e, #302410) !important;
    border-color: rgba(236,210,122,.7) !important;
    color: #f4e6bc !important;
}

/* =====================================================================
   상단바 — 낡은 목재/가죽
   ===================================================================== */
html body #db-topbar {
    background: linear-gradient(180deg, #1c1410 0%, #120d09 100%) !important;
    border-bottom: 1px solid rgba(201,162,39,.3) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
}
html body #db-topbar::after {
    background: linear-gradient(90deg, transparent, rgba(201,162,39,.5), transparent) !important;
}
html body #db-topbar-actions .btn {
    color: var(--botc-parch-dark);
}
html body #db-topbar-actions .btn:hover {
    color: var(--botc-gold-hi);
}

/* 역할 정보 칩 */
html body .db-info-chip {
    border-color: rgba(201,162,39,.28) !important;
    background: rgba(201,162,39,.07) !important;
    font-family: var(--botc-body-font);
}
html body .db-info-chip.evil {
    border-color: rgba(192,48,48,.45) !important;
    background: rgba(142,31,31,.16) !important;
}
html body .db-role-chip {
    font-family: var(--botc-body-font);
}

/* 보드 중앙 글로우 — 금빛 촛불 */
html body #db-board::before {
    background: radial-gradient(ellipse 58% 58% at 50% 50%, rgba(201,162,39,.08) 0%, transparent 70%) !important;
}

/* 통계 배지 */
html body .db-stat-badge {
    letter-spacing: .08em !important;
    border: 1px solid rgba(201,162,39,.25);
}

/* =====================================================================
   정보 로그 — 양피지 두루마리 "마을 연대기"
   ===================================================================== */
html body #db-log-wrap {
    border-top: 2px solid #9c8050 !important;
    background:
        radial-gradient(ellipse at 30% 0%, rgba(255,250,230,.28), transparent 60%),
        linear-gradient(165deg, #e9d7a8 0%, #d9c284 55%, #c8ad72 100%) !important;
    box-shadow: 0 -4px 14px rgba(0,0,0,.45), inset 0 0 30px rgba(140,105,50,.22) !important;
    color: #2b2118 !important;
}
html body #db-log-wrap .fw-bold {
    font-family: var(--botc-display) !important;
    letter-spacing: .08em;
    color: #4a3617 !important;
}
html body #db-log-wrap [data-i18n="log_warn"] {
    color: #8a6a33 !important;
    opacity: 1 !important;
}
html body .db-log-slot {
    font-family: var(--botc-body-font);
    background: rgba(255,250,230,.38) !important;
    color: #2b2118 !important;
    border-left: 3px solid rgba(138,106,51,.4) !important;
    border-bottom: 1px dashed rgba(90,66,26,.22);
}
html body .db-log-slot.has-info { border-left-color: #8a6f3f !important; }
html body .db-log-slot.has-kill {
    border-left-color: #8e1f1f !important;
    background: rgba(142,31,31,.10) !important;
}
html body .db-log-slot .text-body-secondary { color: #8a6a33 !important; }
html body .db-log-num { color: #6b5127 !important; }
html body #db-log-list {
    scrollbar-color: rgba(90,66,26,.4) transparent !important;
}
@keyframes db-log-flash {
    0%   { background: rgba(201,162,39,.45); }
    100% { background: rgba(255,250,230,.38); }
}

/* =====================================================================
   패널/모달 — 어두운 가죽 장정
   ===================================================================== */
html body #db-note-panel,
html body #db-settings-panel,
html body #db-action-hub {
    background: linear-gradient(160deg, #1c1512 0%, #0f0b08 100%) !important;
    border-color: rgba(201,162,39,.35) !important;
    box-shadow: 0 12px 50px rgba(0,0,0,.75), 0 0 30px rgba(201,162,39,.05) !important;
}
html body #db-ability-modal .modal-content {
    background: linear-gradient(160deg, #1c1512 0%, #0f0b08 100%) !important;
    border: 1px solid rgba(201,162,39,.35) !important;
    color: var(--botc-parch) !important;
}
html body #db-ability-modal .modal-header {
    border-bottom-color: rgba(201,162,39,.2) !important;
}

/* =====================================================================
   SweetAlert2 — 봉인된 서신(양피지)
   ===================================================================== */
html body .swal2-popup {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(255,250,230,.3), transparent 55%),
        linear-gradient(160deg, #eddcae 0%, #dcc588 55%, #c9ae74 100%) !important;
    border: 1px solid #9c8050 !important;
    border-radius: 6px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.7), inset 0 0 34px rgba(140,105,50,.22) !important;
    color: var(--botc-ink) !important;
    font-family: var(--botc-body-font) !important;
}
html body .swal2-title {
    color: #241a10 !important;
    font-family: var(--botc-display) !important;
    font-weight: 400 !important;
    letter-spacing: .04em;
}
html body .swal2-html-container {
    color: #5a4527 !important;
}
html body .swal2-icon {
    border-color: #8a6f3f !important;
    color: #8a6f3f !important;
}
html body .swal2-icon.swal2-question {
    border-color: #8a6f3f !important;
    color: #6b5127 !important;
}
html body .swal2-confirm {
    background: linear-gradient(180deg, #8e2222, #5c1111) !important;
    border: 1px solid rgba(212,160,74,.6) !important;
    color: #f6e8c4 !important;
    border-radius: 3px !important;
    font-family: var(--botc-body-font) !important;
    letter-spacing: .1em;
    box-shadow: 0 2px 10px rgba(142,31,31,.35) !important;
}
html body .swal2-cancel,
html body .swal2-deny {
    background: transparent !important;
    border: 1px solid rgba(90,66,26,.55) !important;
    color: #5a4527 !important;
    border-radius: 3px !important;
    font-family: var(--botc-body-font) !important;
    letter-spacing: .1em;
}

/* =====================================================================
   캐릭터 도감 — 실물 토큰 그리드
   ===================================================================== */
html body .codex-card.codex-card-art {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px !important;
    transition: transform .22s;
}
html body .codex-card.codex-card-art:hover {
    transform: scale(1.07) rotate(-2deg);
    background: transparent !important;
}
html body .codex-card.codex-card-art .codex-card-name {
    margin-top: 4px;
    color: var(--botc-parch-dim);
    font-family: var(--botc-body-font);
    font-size: .68rem;
}
html body .codex-topbar {
    background: linear-gradient(180deg, #1c1410 0%, #120d09 100%) !important;
    border-bottom: 1px solid rgba(201,162,39,.3) !important;
}
html body .codex-group-title {
    font-family: var(--botc-display) !important;
    letter-spacing: .12em;
}
/* 상세 모달 내 아트 아이콘 */
html body .codex-detail-ic .db-art-ic,
html body .codex-box-title .db-art-ic {
    --tk-acc: #15100a;
}
/* 상세 모달 초상 — 양피지 토큰으로 대체 */
html body .codex-detail-portrait.codex-portrait-art {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
html body .codex-detail-portrait.codex-portrait-art .db-art-token {
    width: 100%;
    height: 100%;
}

/* =====================================================================
   특수효과 — 밤 전환: "마을 사람들이 눈을 감는다" (눈꺼풀 연출, play2)
   ===================================================================== */
html body #db-game-screen.db-night::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1400;
    box-sizing: border-box;
    background: transparent;
    border-top: 0vh solid #04060d;
    border-bottom: 0vh solid #04060d;
    animation: botc-eyes-close 2.6s cubic-bezier(.6,.05,.35,1) forwards;
}
@keyframes botc-eyes-close {
    0% {
        border-top-width: 0vh; border-bottom-width: 0vh;
        background-color: transparent;
        opacity: 1; visibility: visible;
    }
    32% {
        border-top-width: 51vh; border-bottom-width: 51vh;
        background-color: rgba(4,6,13,.6);
    }
    58% {
        border-top-width: 51vh; border-bottom-width: 51vh;
        background-color: rgba(4,6,13,.6);
    }
    92% {
        border-top-width: 0vh; border-bottom-width: 0vh;
        background-color: transparent;
        opacity: 1;
    }
    100% {
        border-top-width: 0vh; border-bottom-width: 0vh;
        opacity: 0; visibility: hidden;
    }
}

/* =====================================================================
   특수효과 — 처형/사망 배너: 잉크 도장
   ===================================================================== */
html body .db-banner-text {
    font-family: var(--botc-display) !important;
    font-weight: 400 !important;
    letter-spacing: .14em !important;
    border-radius: 5px;
    transform: rotate(-4deg);
    box-shadow: 0 10px 34px rgba(0,0,0,.65);
}
html body .db-banner-evil {
    color: #e4f2d8 !important;
    background: linear-gradient(160deg, rgba(46,84,34,.94), rgba(26,52,20,.94)) !important;
    border: 3px solid rgba(150,200,120,.65);
    text-shadow: 0 0 14px rgba(150,200,120,.4) !important;
}
html body .db-banner-good {
    color: #f4d8d8 !important;
    background: linear-gradient(160deg, rgba(142,31,31,.94), rgba(84,16,16,.94)) !important;
    border: 3px solid rgba(220,120,120,.65);
    text-shadow: 0 0 14px rgba(192,48,48,.5) !important;
}
html body .db-banner-special {
    color: #e6d3a3 !important;
    background: linear-gradient(160deg, rgba(63,47,20,.94), rgba(36,26,10,.94)) !important;
    border: 3px solid rgba(201,162,39,.6);
}

/* =====================================================================
   모바일 UX — 토큰 확대
   ===================================================================== */
@media (max-width: 400px) {
    :root { --db-ts: 60px; }
}
@media (min-width: 401px) and (max-width: 576px) {
    :root { --db-ts: 66px; }
}

/* =====================================================================
   결과 화면
   ===================================================================== */
html body .db-result-win .db-title {
    background: linear-gradient(135deg, #f4e6bc, #ecd27a, #c9a227) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 18px rgba(236,210,122,.35));
}
html body .db-result-lose .db-title,
html body .db-result-lost .db-title {
    background: linear-gradient(135deg, #e8a0a0, #c03030, #8e1f1f) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 18px rgba(192,48,48,.35));
}