/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Montserrat:wght@700&family=Orbitron:wght@700&family=Oswald:wght@700&family=Roboto:wght@700&family=Share+Tech+Mono&display=swap');

/* --- THEME DEFINITIONS (Colors) --- */
.theme-green { --primary: #2e7d32; --primary-hover: #1b5e20; --bg-main: #0b100b; --bg-panel: #161b16; --accent: #4caf50; --border: #1b5e20; --text-main: #e8f5e9; --text-muted: #a5d6a7; }
.theme-blue { --primary: #007bff; --primary-hover: #0056b3; --bg-main: #0b0d10; --bg-panel: #16181d; --accent: #3395ff; --border: #163a6b; --text-main: #e0f2fe; --text-muted: #94a3b8; }
.theme-purple { --primary: #9c27b0; --primary-hover: #7b1fa2; --bg-main: #0f0b10; --bg-panel: #1a161d; --accent: #e040fb; --border: #4a148c; --text-main: #f3e5f5; --text-muted: #ce93d8; }
.theme-red { --primary: #d32f2f; --primary-hover: #b71c1c; --bg-main: #100b0b; --bg-panel: #1d1616; --accent: #ff5252; --border: #7f1d1d; --text-main: #ffebee; --text-muted: #ef9a9a; }
.theme-orange { --primary: #e65100; --primary-hover: #bf360c; --bg-main: #100c0b; --bg-panel: #1d1816; --accent: #ff9800; --border: #7e3a0d; --text-main: #fff3e0; --text-muted: #ffcc80; }
.theme-yellow { --primary: #fbc02d; --primary-hover: #f9a825; --bg-main: #10100b; --bg-panel: #1d1d16; --accent: #ffeb3b; --border: #66600a; --text-main: #fffde7; --text-muted: #fff59d; }
.theme-pink { --primary: #c2185b; --primary-hover: #880e4f; --bg-main: #100b0d; --bg-panel: #1d1619; --accent: #ff4081; --border: #880e4f; --text-main: #fce4ec; --text-muted: #f48fb1; }
.theme-slate { --primary: #64748b; --primary-hover: #475569; --bg-main: #0f1115; --bg-panel: #181a20; --accent: #38bdf8; --border: #334155; --text-main: #f8fafc; --text-muted: #94a3b8; }
.theme-contrast { --primary: #ffffff; --primary-hover: #cccccc; --bg-main: #000000; --bg-panel: #000000; --accent: #00ff00; --border: #ffffff; --text-main: #ffffff; --text-muted: #dddddd; }

/* DEFAULT FALLBACK */
:root { --primary: #d4af37; --primary-hover: #b8962e; --bg-main: #111111; --bg-panel: #1e1e1e; --accent: #f1c40f; --border: #333333; --text-main: #ffffff; --text-muted: #aaaaaa; }

/* --- UPDATED CLOCK FONTS --- */
/* Targeted Elements:
   .clock-display  -> Main Clock
   .timer-val      -> Elapsed / Break Timers
   .stat-value     -> Player Count / Avg Stack
   .current-blinds -> Blinds under clock (Live Game)
   .current-ante   -> Ante under clock (Live Game)
   .preview-blinds -> Blinds (Admin Preview)
   .break-text     -> Break overlay text
   .winner-text    -> Winner announcement text
   #broadcastMsg   -> Broadcast overlay message
   .countdown-time -> Pre-start countdown timer
*/

.font-orbitron .clock-display,
.font-orbitron .timer-val,
.font-orbitron .stat-value,
.font-orbitron .current-blinds,
.font-orbitron .current-ante,
.font-orbitron .preview-blinds,
.font-orbitron .break-text,
.font-orbitron .winner-text,
.font-orbitron #broadcastMsg,
.font-orbitron .countdown-time {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 0;
}

.font-roboto .clock-display,
.font-roboto .timer-val,
.font-roboto .stat-value,
.font-roboto .current-blinds,
.font-roboto .current-ante,
.font-roboto .preview-blinds,
.font-roboto .break-text,
.font-roboto .winner-text,
.font-roboto #broadcastMsg,
.font-roboto .countdown-time {
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0;
}

.font-digital .clock-display,
.font-digital .timer-val,
.font-digital .stat-value,
.font-digital .current-blinds,
.font-digital .current-ante,
.font-digital .preview-blinds,
.font-digital .break-text,
.font-digital .winner-text,
.font-digital #broadcastMsg,
.font-digital .countdown-time {
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: -1px;
}

.font-oswald .clock-display,
.font-oswald .timer-val,
.font-oswald .stat-value,
.font-oswald .current-blinds,
.font-oswald .current-ante,
.font-oswald .preview-blinds,
.font-oswald .break-text,
.font-oswald .winner-text,
.font-oswald #broadcastMsg,
.font-oswald .countdown-time {
    font-family: 'Oswald', sans-serif !important;
    letter-spacing: 1px;
}

.font-montserrat .clock-display,
.font-montserrat .timer-val,
.font-montserrat .stat-value,
.font-montserrat .current-blinds,
.font-montserrat .current-ante,
.font-montserrat .preview-blinds,
.font-montserrat .break-text,
.font-montserrat .winner-text,
.font-montserrat #broadcastMsg,
.font-montserrat .countdown-time {
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -1px;
}

.font-lato .clock-display,
.font-lato .timer-val,
.font-lato .stat-value,
.font-lato .current-blinds,
.font-lato .current-ante,
.font-lato .preview-blinds,
.font-lato .break-text,
.font-lato .winner-text,
.font-lato #broadcastMsg,
.font-lato .countdown-time {
    font-family: 'Lato', sans-serif !important;
    letter-spacing: 0;
}

/* --- LANGUAGE SWITCHER (i18n) --- */
.csp-lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.csp-lang-globe {
    font-size: 0.95em;
    line-height: 1;
    opacity: 0.9;
}
.csp-lang-code {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
/* Compact toggle button (keeps nav actions visible on mobile) */
.csp-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-panel, #1e1e1e);
    color: var(--text-main, #fff);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    padding: 5px 9px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
}
.csp-lang-btn:hover,
.csp-lang-switcher.open .csp-lang-btn {
    border-color: var(--accent, #f1c40f);
}
.csp-lang-btn:focus {
    outline: none;
    border-color: var(--accent, #f1c40f);
}
/* Dropdown menu (appended to <body>, positioned via JS with position:fixed
   so it is never clipped by ancestors using overflow:hidden). */
.csp-lang-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    min-width: 160px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-panel, #1e1e1e);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    padding: 4px;
}
.csp-lang-menu[hidden] {
    display: none;
}
.csp-lang-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text-main, #fff);
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}
.csp-lang-option:hover {
    background: rgba(255, 255, 255, 0.08);
}
.csp-lang-option.active {
    color: var(--accent, #f1c40f);
    font-weight: 700;
}

/* --- CJK FONT FALLBACK --- */
/* Orbitron/Roboto/Oswald etc. lack Chinese/Japanese/Korean glyphs. When the UI
   language is one of these, fall back to system CJK fonts so text renders instead
   of showing tofu boxes. Applied via the <html lang="..."> attribute set by i18n.js. */
html[lang="zh-CN"] body,
html[lang="ja"] body,
html[lang="ko"] body {
    font-family: "PingFang SC", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Yu Gothic", "Meiryo", "Malgun Gothic", "Microsoft YaHei",
        "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR",
        "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
}
/* Ensure the big display elements (which force decorative Latin fonts) also fall
   back to CJK glyphs for these languages, overriding the per-font !important rules. */
html[lang="zh-CN"] .clock-display,
html[lang="zh-CN"] .break-text,
html[lang="zh-CN"] .winner-text,
html[lang="zh-CN"] .current-blinds,
html[lang="ja"] .clock-display,
html[lang="ja"] .break-text,
html[lang="ja"] .winner-text,
html[lang="ja"] .current-blinds,
html[lang="ko"] .clock-display,
html[lang="ko"] .break-text,
html[lang="ko"] .winner-text,
html[lang="ko"] .current-blinds {
    font-family: "PingFang SC", "Hiragino Sans", "Yu Gothic", "Meiryo",
        "Malgun Gothic", "Microsoft YaHei", "Noto Sans CJK SC",
        "Noto Sans CJK JP", "Noto Sans CJK KR", sans-serif !important;
}