/* Shared Clay UI skin for standalone language games. */
:root {
    --clay-bg-1: #fff7e9;
    --clay-bg-2: #ffeef7;
    --clay-bg-3: #edf7ff;
    --clay-surface: #fffdf8;
    --clay-line: #f2d8ba;
    --clay-ink: #32233a;
    --clay-pink: #ff5c9f;
    --clay-pink-dark: #d62972;
    --clay-purple: #7c5cff;
    --clay-gold: #ffd66b;
    --clay-sky: #9fd7ff;
    --clay-green: #26a96c;
    --clay-red: #d93d50;
    --clay-press: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 214, 107, 0.38), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(159, 215, 255, 0.42), transparent 30%),
        linear-gradient(135deg, var(--clay-bg-1) 0%, var(--clay-bg-2) 54%, var(--clay-bg-3) 100%) !important;
    color: var(--clay-ink);
}

body.game-english {
    --clay-bg-1: #eef8ff;
    --clay-bg-2: #e9f5ff;
    --clay-bg-3: #eafff6;
    --clay-line: #b8dffc;
    --clay-pink: #2f80ed;
    --clay-pink-dark: #1f5fb8;
    --clay-purple: #4f8cff;
    --clay-gold: #7bd6ff;
    --clay-sky: #77d4ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(47, 128, 237, 0.24), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(119, 212, 255, 0.46), transparent 30%),
        linear-gradient(135deg, var(--clay-bg-1) 0%, var(--clay-bg-2) 54%, var(--clay-bg-3) 100%) !important;
}

body.game-chinese {
    --clay-bg-1: #f7f0ff;
    --clay-bg-2: #fff0f8;
    --clay-bg-3: #fff8e7;
    --clay-line: #dcc7ff;
    --clay-pink: #8e5cf7;
    --clay-pink-dark: #6634c6;
    --clay-purple: #b45cff;
    --clay-gold: #ffd66b;
    --clay-sky: #d6c3ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(142, 92, 247, 0.24), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(255, 92, 159, 0.26), transparent 30%),
        linear-gradient(135deg, var(--clay-bg-1) 0%, var(--clay-bg-2) 54%, var(--clay-bg-3) 100%) !important;
}

button,
input,
textarea {
    font-family: var(--font);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 4px solid rgba(124, 92, 255, 0.35);
    outline-offset: 3px;
}

.btn-main,
.btn-sub,
.mode-tab,
.topic-tab,
.version-tab,
.grade-btn,
.topic-btn,
.wc-btn {
    min-height: 44px;
    border: 3px solid #fff !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    transition: transform 0.2s var(--clay-press), box-shadow 0.2s var(--clay-press), background 0.2s !important;
}

.btn-main,
.mode-tab.active,
.topic-tab.active,
.version-tab.active,
.grade-btn.active {
    background: linear-gradient(135deg, var(--clay-pink), #ff8dbb) !important;
    color: #fff !important;
    box-shadow: 0 7px 0 var(--clay-pink-dark), 0 14px 24px rgba(255, 92, 159, 0.26) !important;
}

.btn-sub,
.mode-tab,
.topic-tab,
.version-tab,
.grade-btn,
.wc-btn {
    background: var(--clay-surface) !important;
    border-color: var(--clay-line) !important;
    color: #6f6178 !important;
    box-shadow: 0 5px 0 rgba(240, 214, 181, 0.72) !important;
}

.btn-main:hover,
.btn-sub:hover,
.mode-tab:hover,
.topic-tab:hover,
.version-tab:hover,
.grade-btn:hover,
.topic-btn:hover,
.wc-btn:hover {
    transform: translateY(-3px) !important;
}

.btn-main:active,
.btn-sub:active,
.mode-tab:active,
.topic-tab:active,
.version-tab:active,
.grade-btn:active,
.topic-btn:active,
.wc-btn:active {
    transform: translateY(3px) !important;
}

.roster-title,
.settings-title,
.result-title,
.pk-result-title {
    color: var(--clay-ink) !important;
    font-weight: 900 !important;
    text-shadow: 0 4px 0 rgba(255, 255, 255, 0.78);
}

.mode-tabs,
.topic-tabs,
.settings-actions,
.single-header,
.pklk-header,
.result-box,
.pk-result-card {
    background: rgba(255, 253, 248, 0.88) !important;
    border: 3px solid var(--clay-line) !important;
    border-radius: 26px !important;
    box-shadow: 0 8px 0 rgba(240, 214, 181, 0.68), 0 18px 34px rgba(50, 35, 58, 0.1) !important;
}

.student-grid,
.builtin-grid,
.custom-area {
    background: rgba(255, 253, 248, 0.5);
    border-radius: 24px;
}

.stu-card,
.topic-btn,
.manual-input,
.custom-textarea,
.llk-card,
.pklk-card {
    background: var(--clay-surface) !important;
    border: 3px solid var(--clay-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 0 rgba(240, 214, 181, 0.72), 0 12px 22px rgba(50, 35, 58, 0.08) !important;
}

.stu-card.sel-p1,
.topic-btn.sel,
.wc-btn.active {
    border-color: var(--clay-purple) !important;
    background: #eee8ff !important;
    color: var(--clay-purple) !important;
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12), 0 6px 0 #c7b7ff !important;
}

.stu-card.sel-p2 {
    border-color: #ff9f43 !important;
    background: #fff3d8 !important;
    color: #a36300 !important;
    box-shadow: 0 0 0 4px rgba(255, 159, 67, 0.14), 0 6px 0 #ffd66b !important;
}

.llk-card.char-type,
.pklk-card.char-type {
    background: linear-gradient(135deg, var(--clay-pink), #ff8dbb) !important;
    border-color: #fff !important;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(214, 41, 114, 0.7);
    box-shadow: 0 7px 0 var(--clay-pink-dark), 0 14px 24px rgba(255, 92, 159, 0.26) !important;
}

.llk-card.py-type,
.pklk-card.py-type {
    background: linear-gradient(135deg, var(--clay-purple), var(--clay-sky)) !important;
    border-color: #fff !important;
    color: #fff !important;
    box-shadow: 0 7px 0 #5d4fd6, 0 14px 24px rgba(124, 92, 255, 0.22) !important;
}

.llk-card.sel,
.pklk-card.sel {
    border-color: #fff !important;
    box-shadow: 0 0 0 5px var(--clay-gold), 0 8px 0 #d88a00, 0 18px 32px rgba(255, 214, 107, 0.4) !important;
}

.s-stat-val,
.pklk-stat-val,
.bank-summary {
    color: var(--clay-pink-dark) !important;
}

.pklk-side.p1,
.pklk-side.p2,
#screenSingle,
#screenPKLLK {
    background:
        linear-gradient(rgba(255, 247, 233, 0.55), rgba(255, 239, 247, 0.58)),
        url('/assets/bg-llk.png') center/cover no-repeat !important;
}

.manual-input,
.custom-textarea {
    min-height: 44px;
    padding: 10px 14px;
    color: var(--clay-ink);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 720px) {
    .roster-title {
        font-size: 24px !important;
    }

    .builtin-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    }

    .settings-actions {
        flex-wrap: wrap;
        padding: 10px;
    }
}