/* ===== Game page base ===== */

:root {
    --loading: oklch(0.6 0.1 180);
    --dnd-accent: oklch(0.72 0.12 65);
    --rebirth-accent: oklch(0.65 0.18 340);
    --message-ai-bg: var(--glass-05);
    --message-ai-text: var(--text-primary);
    --game-accent: var(--accent-start);
}

body.page-game {
    transition: background 0.6s ease;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    --scroll-track: transparent;
    --scroll-thumb: oklch(0.98 0.008 60 / 0.14);
    --scroll-thumb-hover: oklch(0.98 0.008 60 / 0.32);
    --scroll-size: 5px;
}

body.page-game::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

body.page-game > main,
body.page-game > footer,
body.page-game .page-content > main,
body.page-game .page-content > footer {
    position: relative;
    z-index: 1;
}

body.page-rebirth[class*="theme-"]:not(.theme-neutral)::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--mood-glow);
}

/* ===== Rebirth neutral (creator) ===== */

body.theme-neutral {
    --loading: oklch(0.6 0.1 340);
}

/* ===== Rebirth world themes ===== */

body.theme-dushi {
    --accent-start: oklch(0.62 0.12 250);
    --accent-end: oklch(0.52 0.08 270);
    --bg-start: oklch(0.16 0.03 260);
    --bg-mid: oklch(0.17 0.04 255);
    --bg-end: oklch(0.18 0.05 250);
    --loading: oklch(0.62 0.12 250);
    --game-accent: oklch(0.62 0.12 250);
    --mood-glow: radial-gradient(ellipse 80% 50% at 20% 80%, oklch(0.5 0.1 250 / 0.12), transparent 60%);
}

body.theme-chuanyue {
    --accent-start: oklch(0.62 0.2 300);
    --accent-end: oklch(0.72 0.14 85);
    --bg-start: oklch(0.15 0.05 300);
    --bg-mid: oklch(0.16 0.06 290);
    --bg-end: oklch(0.17 0.07 280);
    --loading: oklch(0.62 0.2 300);
    --game-accent: oklch(0.62 0.2 300);
    --mood-glow: radial-gradient(circle at 75% 25%, oklch(0.65 0.18 300 / 0.15), transparent 45%),
                 radial-gradient(circle at 15% 70%, oklch(0.72 0.14 85 / 0.08), transparent 40%);
}

body.theme-xiuxian {
    --accent-start: oklch(0.68 0.16 155);
    --accent-end: oklch(0.55 0.12 180);
    --bg-start: oklch(0.14 0.04 155);
    --bg-mid: oklch(0.15 0.05 160);
    --bg-end: oklch(0.16 0.06 165);
    --loading: oklch(0.68 0.16 155);
    --game-accent: oklch(0.68 0.16 155);
    --mood-glow: radial-gradient(ellipse 60% 40% at 50% 0%, oklch(0.6 0.12 155 / 0.18), transparent 70%);
}

body.theme-kehuan {
    --accent-start: oklch(0.75 0.15 195);
    --accent-end: oklch(0.6 0.2 260);
    --bg-start: oklch(0.12 0.04 260);
    --bg-mid: oklch(0.13 0.05 250);
    --bg-end: oklch(0.14 0.06 240);
    --loading: oklch(0.75 0.15 195);
    --game-accent: oklch(0.75 0.15 195);
    --mood-glow: radial-gradient(circle at 90% 10%, oklch(0.7 0.15 195 / 0.2), transparent 35%),
                 radial-gradient(circle at 10% 90%, oklch(0.6 0.2 260 / 0.12), transparent 35%);
}

body.theme-mori {
    --accent-start: oklch(0.68 0.16 45);
    --accent-end: oklch(0.45 0.1 30);
    --bg-start: oklch(0.16 0.04 45);
    --bg-mid: oklch(0.17 0.05 40);
    --bg-end: oklch(0.18 0.06 35);
    --loading: oklch(0.68 0.16 45);
    --game-accent: oklch(0.68 0.16 45);
    --mood-glow: radial-gradient(ellipse 100% 60% at 50% 100%, oklch(0.5 0.12 40 / 0.2), transparent 55%);
}

body.theme-gudai {
    --accent-start: oklch(0.72 0.14 75);
    --accent-end: oklch(0.55 0.12 35);
    --bg-start: oklch(0.17 0.04 55);
    --bg-mid: oklch(0.18 0.05 50);
    --bg-end: oklch(0.19 0.06 45);
    --loading: oklch(0.72 0.14 75);
    --game-accent: oklch(0.72 0.14 75);
    --mood-glow: radial-gradient(circle at 30% 40%, oklch(0.65 0.12 75 / 0.12), transparent 50%);
}

/* Rebirth AI message per-theme glow */
body[class*="theme-"].page-rebirth:not(.theme-neutral) .message.ai .message-text {
    border-color: var(--glass-22);
    box-shadow: 0 0 24px oklch(0 0 0 / 0.12);
}

/* ===== DND tabletop theme ===== */

body.page-dnd {
    --loading: oklch(0.72 0.12 65);
    --dnd-accent: oklch(0.72 0.12 65);
    --game-accent: var(--dnd-accent);
    --accent-start: oklch(0.72 0.12 65);
    --accent-end: oklch(0.58 0.1 45);
    --bg-start: oklch(0.22 0.04 55);
    --bg-mid: oklch(0.21 0.035 50);
    --bg-end: oklch(0.2 0.03 45);
    --message-ai-bg: oklch(0.92 0.03 85 / 0.12);
    --message-ai-text: oklch(0.95 0.02 85);
    --scroll-thumb: oklch(0.72 0.12 65 / 0.32);
    --scroll-thumb-hover: oklch(0.78 0.14 65 / 0.58);
    font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body.page-dnd footer {
    border-top: 1px solid var(--glass-10);
}

body.page-dnd .status-bar,
body.page-dnd .status-bar-toggle,
body.page-dnd .status-items,
body.page-dnd .status-item {
    display: none;
}

body.page-dnd .panel-empty {
    color: var(--glass-40);
}

body.page-dnd .form-hint--error {
    color: var(--error);
    margin-top: var(--space-1);
}

body.page-rebirth footer {
    border-top: 1px solid var(--glass-10);
}

body.page-rebirth .status-bar,
body.page-rebirth .status-bar-toggle,
body.page-rebirth .status-items,
body.page-rebirth .status-item {
    display: none;
}

body.page-dnd::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
    background-image:
        linear-gradient(60deg, oklch(0.98 0.02 85 / 0.04) 25%, transparent 25%),
        linear-gradient(-60deg, oklch(0.98 0.02 85 / 0.04) 25%, transparent 25%);
    background-size: 28px 48px;
}

body.page-dnd .ai-header-left h1,
body.page-dnd .creator-header h2 {
    font-family: "IM Fell English", "Noto Serif SC", serif;
    font-weight: 400;
    letter-spacing: 0.5px;
}

body.page-dnd .message.ai .message-text {
    font-family: "IM Fell English", "Noto Serif SC", serif;
    background: var(--message-ai-bg);
    color: var(--message-ai-text);
    border-color: oklch(0.75 0.06 65 / 0.25);
    border-left: 3px solid oklch(0.72 0.12 65 / 0.6);
    border-radius: var(--radius-xs) var(--radius-md) var(--radius-md) var(--radius-xs);
    box-shadow: inset 0 1px 0 oklch(0.98 0.02 85 / 0.08), 0 4px 16px oklch(0 0 0 / 0.15);
    line-height: 1.75;
}

body.page-dnd .roll-results {
    border-left-color: oklch(0.72 0.12 65);
}

body.page-dnd .empty-state .icon {
    animation: diceRoll 2s ease-in-out infinite;
}

@keyframes diceRoll {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-12deg) scale(1.05); }
    75% { transform: rotate(12deg) scale(1.05); }
}

body.page-rebirth .empty-state .icon {
    animation: chapterPulse 2.5s ease-in-out infinite;
}

@keyframes chapterPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.08); }
}

/* ===== DND header status pills ===== */

.header-status {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--glass-08);
    border: 1px solid var(--glass-10);
    border-radius: 50px;
    padding: 2px;
    flex-shrink: 0;
}

.header-status-item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: var(--text-xs);
    color: var(--glass-70);
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.header-status-item:hover {
    background: var(--glass-10);
    color: var(--text-primary);
}

.header-status-item .s-icon { font-size: 12px; line-height: 1; }
.header-status-item .s-value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.header-status-item .s-label { color: var(--glass-40); font-size: 10px; }

.page-dnd .status-panel-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .page-dnd .status-panel-content {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 640px) {
    .page-dnd .status-panel-content { grid-template-columns: 1fr; }
    .header-status-item--secondary { display: none; }
}

/* ===== DND roll results ===== */

.roll-results {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--glass-05);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-start);
}

.roll-result {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.roll-result .roll-detail { font-size: var(--text-sm); color: var(--glass-75); }
.roll-result .roll-detail strong { color: var(--text-primary); font-weight: 700; }
.roll-result .roll-result-icon { margin-left: auto; font-size: var(--text-md); }
.roll-result.roll-success { border-left-color: oklch(0.6 0.15 150); }
.roll-result.roll-success .roll-result-icon { color: oklch(0.6 0.15 150); }
.roll-result.roll-fail { border-left-color: oklch(0.4 0.15 30); }
.roll-result.roll-fail .roll-result-icon { color: oklch(0.5 0.15 30); }

@media (max-width: 640px) {
    .roll-result { flex-wrap: wrap; }
}

/* ===== DND ability form ===== */

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.form-row .full-width { grid-column: 1 / -1; }

.half-elf-select {
    min-width: 140px;
    min-height: 44px;
    flex: 1 1 150px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--glass-12);
    border-radius: var(--radius-sm);
    background: var(--glass-05);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
}

.half-elf-select:focus {
    outline: none;
    border-color: var(--accent-start);
    box-shadow: 0 0 0 3px oklch(0.6 0.12 250 / 0.18);
}

.ability-scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.ability-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--glass-05);
    border: 1px solid var(--glass-08);
    border-radius: var(--radius-sm);
}

.ability-row label { font-size: var(--text-sm); color: var(--glass-60); }
.ability-row input {
    width: 72px;
    min-height: 44px;
    padding: var(--space-1);
    text-align: center;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--glass-05);
    border: 1px solid var(--glass-12);
    border-radius: var(--radius-sm);
}

.ability-row input:focus {
    outline: none;
    border-color: var(--accent-start);
    box-shadow: 0 0 0 3px oklch(0.6 0.12 250 / 0.18);
}

.ability-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--glass-05);
    border: 1px solid var(--glass-08);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--glass-60);
}

.ability-total .total-warning { color: var(--error); display: none; }
.ability-total .total-warning.visible { display: inline; }

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .ability-row { padding: var(--space-3); }
    .ability-row input { width: 68px; }
}