/* === Quizr Themes === */

/* ── Shared design tokens (spacing, radius, transitions) ── */
:root {
    /* ── Spacing scale ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* ── Border radius ── */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-pill: 999px;

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* ── Medal colors ── */
    --gold: #ffd700;
    --silver: #c0c0c0;
    --bronze: #cd7f32;

    /* ── Background ── */
    --bg-image: none;
    --bg-overlay: transparent;
    --bg-pattern: none;
    --bg-gradient: none;

    /* ── Surface treatment ── */
    --surface-blur: 0px;
    --surface-opacity: 1;
    --surface-shadow: none;

    /* ── Typography ── */
    --font-heading: 'Inter', 'SF Pro Display', system-ui, sans-serif;
    --font-body: 'Inter', 'SF Pro Display', system-ui, sans-serif;
    --heading-weight: 700;
    --heading-transform: uppercase;
    --heading-tracking: 2px;

    /* ── Radius overrides per skin ── */
    --skin-radius-sm: var(--radius-sm);
    --skin-radius-md: var(--radius-md);
    --skin-radius-pill: var(--radius-pill);

    /* ── Animation intensity ── */
    --anim-scale: 1;
    --glow-intensity: 1;
    --hover-lift: -2px;
}

/* ── Global scrollbar styling ── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Candy Pop (palette: candy | effect: none | bg: polka) ── */
:root,
[data-skin="candy"] {
    --bg-color: #1a1035; --surface-color: #261848; --surface-hover: #33205e; --surface-active: #3d2870;
    --text-color: #f0e6ff; --text-muted: #a893cc; --accent-color: #ff6ec7; --accent-glow: rgba(255,110,199,0.15);
    --danger-color: #ff5252; --warning-color: #ffe066; --success-color: #69f0ae; --info-color: #40c4ff; --border-color: #3d2870;
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='18' r='6' fill='%23ffd700' fill-opacity='0.2'/%3E%3Ccircle cx='0' cy='0' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='36' cy='0' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='0' cy='36' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='36' cy='36' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3C/svg%3E");
}

/* ── Immersive (palette: immersive | effect: none | bg: none) ── */
[data-skin="immersive"] {
    --bg-color: #101010; --surface-color: #1a1a1a; --surface-hover: #252525; --surface-active: #303030;
    --text-color: #d4d4d4; --text-muted: #808080; --accent-color: #a0a0a0; --accent-glow: rgba(160,160,160,0.12);
    --danger-color: #c06060; --warning-color: #c0a050; --success-color: #70a070; --info-color: #6090b0; --border-color: #303030;
}

/* ── Dark Terminal (palette: darkterminal | effect: sharp | bg: circuit) ── */
[data-skin="darkterminal"] {
    --bg-color: #121212; --surface-color: #1e1e1e; --surface-hover: #2a2a2a; --surface-active: #333;
    --text-color: #e0e0e0; --text-muted: #999; --accent-color: #ff9900; --accent-glow: rgba(255,153,0,0.12);
    --danger-color: #cf6679; --warning-color: #ffcc00; --success-color: #4caf50; --info-color: #5bc0de; --border-color: #333;
    --skin-radius-md: 2px; --skin-radius-sm: 0px; --heading-tracking: 3px; --glow-intensity: 1.3; --surface-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 60h30v-30h20v50h-10v20h40v-20h-10v-50h20v30h30' fill='none' stroke='%23ff9900' stroke-opacity='0.13' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='60' r='3' fill='%23ff9900' fill-opacity='0.16'/%3E%3Ccircle cx='60' cy='30' r='3' fill='%23ff9900' fill-opacity='0.16'/%3E%3Ccircle cx='50' cy='100' r='3' fill='%23ff9900' fill-opacity='0.16'/%3E%3Ccircle cx='110' cy='60' r='3' fill='%23ff9900' fill-opacity='0.16'/%3E%3Ccircle cx='80' cy='80' r='2' fill='%234caf50' fill-opacity='0.13'/%3E%3Cpath d='M0 110h25v-20h15' fill='none' stroke='%234caf50' stroke-opacity='0.1' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M85 0v25h20v15' fill='none' stroke='%234caf50' stroke-opacity='0.1' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── Neon (palette: neon | effect: none | bg: zigzag) ── */
[data-skin="neon"] {
    --bg-color: #0a0a0f; --surface-color: #12121c; --surface-hover: #1a1a2e; --surface-active: #222240;
    --text-color: #e0e0ff; --text-muted: #7a7aaa; --accent-color: #00ff88; --accent-glow: rgba(0,255,136,0.15);
    --danger-color: #ff3366; --warning-color: #ffee00; --success-color: #00ff88; --info-color: #00ccff; --border-color: #1e1e35;
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='40' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L10 0 L20 20 L30 0 L40 20' fill='none' stroke='%2300ff88' stroke-opacity='0.15' stroke-width='2'/%3E%3C/svg%3E");
}

/* ── Retro 80s (palette: retro | effect: none | bg: stripes) ── */
[data-skin="retro"] {
    --bg-color: #1a0a2e; --surface-color: #2d1650; --surface-hover: #3d2068; --surface-active: #4e2a80;
    --text-color: #f5e6ff; --text-muted: #b088d0; --accent-color: #ff2d95; --accent-glow: rgba(255,45,149,0.2);
    --danger-color: #ff1744; --warning-color: #ffe600; --success-color: #39ff14; --info-color: #00e5ff; --border-color: #4e2a80;
    --gold: #ffe600; --silver: #c0c0c0; --bronze: #ff8c00;
    --bg-gradient: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,64,129,0.12) 10px,rgba(255,64,129,0.12) 20px);
}

/* ── Future (palette: future | effect: glass | bg: seigaiha) ── */
[data-skin="future"] {
    --bg-color: #0b0e1a; --surface-color: #131929; --surface-hover: #1c2540; --surface-active: #253158;
    --text-color: #d0d8f0; --text-muted: #6878a0; --accent-color: #5ef0e6; --accent-glow: rgba(94,240,230,0.12);
    --danger-color: #ff4569; --warning-color: #f0c040; --success-color: #5ef0a8; --info-color: #5eb8f0; --border-color: #1e2a48;
    --gold: #e8d44d; --silver: #a8b8d8; --bronze: #c08050;
    --surface-blur: 14px; --surface-opacity: 0.55; --surface-shadow: 0 4px 30px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.06); --skin-radius-md: 12px; --skin-radius-sm: 6px; --glow-intensity: 1.2; --hover-lift: -3px;
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='80' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3Ccircle cx='0' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3Ccircle cx='80' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3C/svg%3E");
}

/* ── Neon Light (palette: neon-inv | effect: none | bg: checkerboard) ── */
[data-skin="neon-inv"] {
    --bg-color: #eef0ff; --surface-color: #dde2f5; --surface-hover: #ccd2ea; --surface-active: #bbc2e0;
    --text-color: #0a0a1a; --text-muted: #5a5a80; --accent-color: #00cc6e; --accent-glow: rgba(0,204,110,0.12);
    --danger-color: #cc2952; --warning-color: #ccbb00; --success-color: #00cc6e; --info-color: #00a3cc; --border-color: #b5bcd8;
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' fill='%23ffffff' fill-opacity='0.08'/%3E%3Crect x='20' y='20' width='20' height='20' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
}

/* ── Focus (palette: focus | effect: none | bg: none) ── */
[data-skin="focus"] {
    --bg-color: #180e08; --surface-color: #221408; --surface-hover: #2c1a0a; --surface-active: #36210c;
    --text-color: #f5e8c8; --text-muted: #b89060; --accent-color: #d4882a; --accent-glow: rgba(212,136,42,0.15);
    --danger-color: #c85050; --warning-color: #e0b030; --success-color: #70a858; --info-color: #60a0b8; --border-color: #382112;
}

/* ── Hip-Hop (palette: hiphop | effect: none | bg: polka) ── */
[data-skin="hiphop"] {
    --bg-color: #0a0806; --surface-color: #161006; --surface-hover: #221900; --surface-active: #2e2200;
    --text-color: #f5e8b0; --text-muted: #c8a020; --accent-color: #ffd700; --accent-glow: rgba(255,215,0,0.15);
    --danger-color: #cc3333; --warning-color: #ffa500; --success-color: #50c050; --info-color: #50a0c8; --border-color: #2e2200;
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='18' r='6' fill='%23ffd700' fill-opacity='0.2'/%3E%3Ccircle cx='0' cy='0' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='36' cy='0' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='0' cy='36' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='36' cy='36' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3C/svg%3E");
}

/* ── Sunrise (palette: sunrise | effect: none | bg: none) ── */
[data-skin="sunrise"] {
    --bg-color: #f0f0f0; --surface-color: #e6e6e6; --surface-hover: #dadada; --surface-active: #d0d0d0;
    --text-color: #303030; --text-muted: #808080; --accent-color: #ff9900; --accent-glow: rgba(255,153,0,0.12);
    --danger-color: #c06060; --warning-color: #c0a050; --success-color: #70a070; --info-color: #6090b0; --border-color: #d0d0d0;
}

/* ── Focus Day (palette: focus-day | effect: none | bg: none) ── */
[data-skin="focus-day"] {
    --bg-color: #f5efe8; --surface-color: #efe5d8; --surface-hover: #e8dac8; --surface-active: #e0d0b8;
    --text-color: #36210c; --text-muted: #8a6840; --accent-color: #d4882a; --accent-glow: rgba(212,136,42,0.15);
    --danger-color: #c85050; --warning-color: #c09030; --success-color: #5a8a48; --info-color: #4888a0; --border-color: #e0d0b8;
}

/* ── Neon Cyber (palette: neon | effect: cyber | bg: isometric) ── */
[data-skin="neon-cyber"] {
    --bg-color: #0a0a0f; --surface-color: #12121c; --surface-hover: #1a1a2e; --surface-active: #222240;
    --text-color: #e0e0ff; --text-muted: #7a7aaa; --accent-color: #00ff88; --accent-glow: rgba(0,255,136,0.15);
    --danger-color: #ff3366; --warning-color: #ffee00; --success-color: #00ff88; --info-color: #00ccff; --border-color: #1e1e35;
    --surface-blur: 12px; --surface-opacity: 0.7; --surface-shadow: 0 0 20px rgba(0,255,136,0.06),inset 0 1px 0 rgba(255,255,255,0.04); --skin-radius-sm: 0px; --skin-radius-md: 2px; --glow-intensity: 2; --anim-scale: 1.5; --heading-tracking: 4px;
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 26 L30 52 L0 26Z' fill='none' stroke='%2358a6ff' stroke-opacity='0.13' stroke-width='1'/%3E%3Cpath d='M30 0 L30 52 M0 26 L60 26' fill='none' stroke='%2358a6ff' stroke-opacity='0.06' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* ── Soft Glass (palette: soft-glass | effect: rounded | bg: checkerboard) ── */
[data-skin="soft-glass"] {
    --bg-color: #e8eaf6; --surface-color: rgba(255,255,255,0.55); --surface-hover: rgba(255,255,255,0.7); --surface-active: rgba(255,255,255,0.85);
    --text-color: #1a1a2e; --text-muted: #5a5a80; --accent-color: #6c63ff; --accent-glow: rgba(108,99,255,0.12);
    --danger-color: #e53935; --warning-color: #f9a825; --success-color: #43a047; --info-color: #1e88e5; --border-color: rgba(255,255,255,0.35);
    --skin-radius-md: 16px; --skin-radius-sm: 8px; --glow-intensity: 0.5; --hover-lift: -3px; --surface-blur: 16px; --surface-opacity: 0.55; --surface-shadow: 0 4px 30px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.6);
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' fill='%23ffffff' fill-opacity='0.08'/%3E%3Crect x='20' y='20' width='20' height='20' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
}

/* ── Arcade (palette: arcade | effect: arcade | bg: halftone) ── */
[data-skin="arcade"] {
    --bg-color: #0a0018; --surface-color: #1a0830; --surface-hover: #250c42; --surface-active: #301055;
    --text-color: #f0e8ff; --text-muted: #9080b8; --accent-color: #ff4081; --accent-glow: rgba(255,64,129,0.2);
    --danger-color: #ff1744; --warning-color: #ffea00; --success-color: #76ff03; --info-color: #40c4ff; --border-color: #301055;
    --heading-tracking: 3px; --skin-radius-md: 8px; --glow-intensity: 1.5; --anim-scale: 1.5; --hover-lift: -3px;
    --bg-gradient: radial-gradient(circle at 50% 50%,transparent 0%,transparent 20%,rgba(0,0,0,0.3) 100%);
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23ff4081' fill-opacity='0.25'/%3E%3C/svg%3E");
}

/* ── Frosted Dark (palette: frosted-dark | effect: glass | bg: spiral) ── */
[data-skin="frosted-dark"] {
    --bg-color: #0f0f1a; --surface-color: #1a1a2e; --surface-hover: #232340; --surface-active: #2c2c52;
    --text-color: #d8d8f0; --text-muted: #7878a0; --accent-color: #a78bfa; --accent-glow: rgba(167,139,250,0.12);
    --danger-color: #f87171; --warning-color: #fbbf24; --success-color: #34d399; --info-color: #60a5fa; --border-color: rgba(255,255,255,0.06);
    --surface-blur: 14px; --surface-opacity: 0.55; --surface-shadow: 0 4px 30px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.06); --skin-radius-md: 12px; --skin-radius-sm: 6px; --glow-intensity: 1.2; --hover-lift: -3px;
    --bg-gradient: repeating-conic-gradient(from 0deg at 50% 50%,rgba(167,139,250,0.15) 0deg 5deg,transparent 5deg 10deg);
}

/* ── Ripple (palette: ripple | effect: glass | bg: seigaiha) ── */
[data-skin="ripple"] {
    --bg-color: #061525; --surface-color: #0a2a4a; --surface-hover: #0e3560; --surface-active: #124076;
    --text-color: #c8e6f5; --text-muted: #6a9ab8; --accent-color: #00b4d8; --accent-glow: rgba(0,180,216,0.15);
    --danger-color: #ef5350; --warning-color: #ffb74d; --success-color: #4db6ac; --info-color: #4fc3f7; --border-color: #0e3560;
    --surface-blur: 14px; --surface-opacity: 0.55; --surface-shadow: 0 4px 30px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.06); --skin-radius-md: 12px; --skin-radius-sm: 6px; --glow-intensity: 1.2; --hover-lift: -3px;
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='80' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3Ccircle cx='0' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3Ccircle cx='80' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3C/svg%3E");
}

/* ── Hexagon (palette: hexagon | effect: sharp | bg: isometric) ── */
[data-skin="hexagon"] {
    --bg-color: #0d1117; --surface-color: #161b22; --surface-hover: #1c2330; --surface-active: #222b3e;
    --text-color: #c9d1d9; --text-muted: #6e7681; --accent-color: #58a6ff; --accent-glow: rgba(88,166,255,0.12);
    --danger-color: #f85149; --warning-color: #d29922; --success-color: #3fb950; --info-color: #58a6ff; --border-color: #21262d;
    --skin-radius-md: 2px; --skin-radius-sm: 0px; --heading-tracking: 3px; --glow-intensity: 1.3; --surface-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 26 L30 52 L0 26Z' fill='none' stroke='%2358a6ff' stroke-opacity='0.13' stroke-width='1'/%3E%3Cpath d='M30 0 L30 52 M0 26 L60 26' fill='none' stroke='%2358a6ff' stroke-opacity='0.06' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* ── Splatter (palette: splatter | effect: arcade | bg: halftone) ── */
[data-skin="splatter"] {
    --bg-color: #0e0e14; --surface-color: #1a1a24; --surface-hover: #24242e; --surface-active: #2e2e3a;
    --text-color: #f0eef5; --text-muted: #8a88a0; --accent-color: #ff3c78; --accent-glow: rgba(255,60,120,0.18);
    --danger-color: #ff4444; --warning-color: #ffcc00; --success-color: #44dd66; --info-color: #44bbff; --border-color: #2a2a38;
    --heading-tracking: 3px; --skin-radius-md: 8px; --glow-intensity: 1.5; --anim-scale: 1.5; --hover-lift: -3px;
    --bg-gradient: radial-gradient(circle at 50% 50%,transparent 0%,transparent 20%,rgba(0,0,0,0.3) 100%);
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23ff4081' fill-opacity='0.25'/%3E%3C/svg%3E");
}

/* ── Sunburst (palette: sunburst | effect: none | bg: sunburst) ── */
[data-skin="sunburst"] {
    --bg-color: #1a0a08; --surface-color: #2a1410; --surface-hover: #3a1e18; --surface-active: #4a2820;
    --text-color: #f5e8d8; --text-muted: #c09070; --accent-color: #ff4422; --accent-glow: rgba(255,68,34,0.18);
    --danger-color: #ff3333; --warning-color: #ffaa00; --success-color: #55bb44; --info-color: #44aadd; --border-color: #4a2820;
    --bg-gradient: repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,68,34,0.15) 0deg 10deg,transparent 10deg 20deg);
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMIZABLE LAYERS — palette, effect, background
   These override the base skin when a user mixes & matches.
   ══════════════════════════════════════════════════════════════ */

/* ── Palette layer (colors only) ── */
[data-palette="candy"]       { --bg-color:#1a1035; --surface-color:#261848; --surface-hover:#33205e; --surface-active:#3d2870; --text-color:#f0e6ff; --text-muted:#a893cc; --accent-color:#ff6ec7; --accent-glow:rgba(255,110,199,0.15); --danger-color:#ff5252; --warning-color:#ffe066; --success-color:#69f0ae; --info-color:#40c4ff; --border-color:#3d2870; }
[data-palette="immersive"]   { --bg-color:#101010; --surface-color:#1a1a1a; --surface-hover:#252525; --surface-active:#303030; --text-color:#d4d4d4; --text-muted:#808080; --accent-color:#a0a0a0; --accent-glow:rgba(160,160,160,0.12); --danger-color:#c06060; --warning-color:#c0a050; --success-color:#70a070; --info-color:#6090b0; --border-color:#303030; }
[data-palette="darkterminal"]{ --bg-color:#121212; --surface-color:#1e1e1e; --surface-hover:#2a2a2a; --surface-active:#333; --text-color:#e0e0e0; --text-muted:#999; --accent-color:#ff9900; --accent-glow:rgba(255,153,0,0.12); --danger-color:#cf6679; --warning-color:#ffcc00; --success-color:#4caf50; --info-color:#5bc0de; --border-color:#333; }
[data-palette="neon"]        { --bg-color:#0a0a0f; --surface-color:#12121c; --surface-hover:#1a1a2e; --surface-active:#222240; --text-color:#e0e0ff; --text-muted:#7a7aaa; --accent-color:#00ff88; --accent-glow:rgba(0,255,136,0.15); --danger-color:#ff3366; --warning-color:#ffee00; --success-color:#00ff88; --info-color:#00ccff; --border-color:#1e1e35; }
[data-palette="retro"]       { --bg-color:#1a0a2e; --surface-color:#2d1650; --surface-hover:#3d2068; --surface-active:#4e2a80; --text-color:#f5e6ff; --text-muted:#b088d0; --accent-color:#ff2d95; --accent-glow:rgba(255,45,149,0.2); --danger-color:#ff1744; --warning-color:#ffe600; --success-color:#39ff14; --info-color:#00e5ff; --border-color:#4e2a80; }
[data-palette="future"]      { --bg-color:#0b0e1a; --surface-color:#131929; --surface-hover:#1c2540; --surface-active:#253158; --text-color:#d0d8f0; --text-muted:#6878a0; --accent-color:#5ef0e6; --accent-glow:rgba(94,240,230,0.12); --danger-color:#ff4569; --warning-color:#f0c040; --success-color:#5ef0a8; --info-color:#5eb8f0; --border-color:#1e2a48; }
[data-palette="neon-inv"]    { --bg-color:#eef0ff; --surface-color:#dde2f5; --surface-hover:#ccd2ea; --surface-active:#bbc2e0; --text-color:#0a0a1a; --text-muted:#5a5a80; --accent-color:#00cc6e; --accent-glow:rgba(0,204,110,0.12); --danger-color:#cc2952; --warning-color:#ccbb00; --success-color:#00cc6e; --info-color:#00a3cc; --border-color:#b5bcd8; }
[data-palette="focus"]       { --bg-color:#180e08; --surface-color:#221408; --surface-hover:#2c1a0a; --surface-active:#36210c; --text-color:#f5e8c8; --text-muted:#b89060; --accent-color:#d4882a; --accent-glow:rgba(212,136,42,0.15); --danger-color:#c85050; --warning-color:#e0b030; --success-color:#70a858; --info-color:#60a0b8; --border-color:#382112; }
[data-palette="hiphop"]      { --bg-color:#0a0806; --surface-color:#161006; --surface-hover:#221900; --surface-active:#2e2200; --text-color:#f5e8b0; --text-muted:#c8a020; --accent-color:#ffd700; --accent-glow:rgba(255,215,0,0.15); --danger-color:#cc3333; --warning-color:#ffa500; --success-color:#50c050; --info-color:#50a0c8; --border-color:#2e2200; }
[data-palette="sunrise"]     { --bg-color:#f0f0f0; --surface-color:#e6e6e6; --surface-hover:#dadada; --surface-active:#d0d0d0; --text-color:#303030; --text-muted:#808080; --accent-color:#ff9900; --accent-glow:rgba(255,153,0,0.12); --danger-color:#c06060; --warning-color:#c0a050; --success-color:#70a070; --info-color:#6090b0; --border-color:#d0d0d0; }
[data-palette="focus-day"]   { --bg-color:#f5efe8; --surface-color:#efe5d8; --surface-hover:#e8dac8; --surface-active:#e0d0b8; --text-color:#36210c; --text-muted:#8a6840; --accent-color:#d4882a; --accent-glow:rgba(212,136,42,0.15); --danger-color:#c85050; --warning-color:#c09030; --success-color:#5a8a48; --info-color:#4888a0; --border-color:#e0d0b8; }
[data-palette="soft-glass"]  { --bg-color:#e8eaf6; --surface-color:rgba(255,255,255,0.55); --surface-hover:rgba(255,255,255,0.7); --surface-active:rgba(255,255,255,0.85); --text-color:#1a1a2e; --text-muted:#5a5a80; --accent-color:#6c63ff; --accent-glow:rgba(108,99,255,0.12); --danger-color:#e53935; --warning-color:#f9a825; --success-color:#43a047; --info-color:#1e88e5; --border-color:rgba(255,255,255,0.35); }
[data-palette="frosted-dark"]{ --bg-color:#0f0f1a; --surface-color:#1a1a2e; --surface-hover:#232340; --surface-active:#2c2c52; --text-color:#d8d8f0; --text-muted:#7878a0; --accent-color:#a78bfa; --accent-glow:rgba(167,139,250,0.12); --danger-color:#f87171; --warning-color:#fbbf24; --success-color:#34d399; --info-color:#60a5fa; --border-color:rgba(255,255,255,0.06); }
[data-palette="ripple"]      { --bg-color:#061525; --surface-color:#0a2a4a; --surface-hover:#0e3560; --surface-active:#124076; --text-color:#c8e6f5; --text-muted:#6a9ab8; --accent-color:#00b4d8; --accent-glow:rgba(0,180,216,0.15); --danger-color:#ef5350; --warning-color:#ffb74d; --success-color:#4db6ac; --info-color:#4fc3f7; --border-color:#0e3560; }
[data-palette="arcade"]      { --bg-color:#0a0018; --surface-color:#1a0830; --surface-hover:#250c42; --surface-active:#301055; --text-color:#f0e8ff; --text-muted:#9080b8; --accent-color:#ff4081; --accent-glow:rgba(255,64,129,0.2); --danger-color:#ff1744; --warning-color:#ffea00; --success-color:#76ff03; --info-color:#40c4ff; --border-color:#301055; }
[data-palette="hexagon"]     { --bg-color:#0d1117; --surface-color:#161b22; --surface-hover:#1c2330; --surface-active:#222b3e; --text-color:#c9d1d9; --text-muted:#6e7681; --accent-color:#58a6ff; --accent-glow:rgba(88,166,255,0.12); --danger-color:#f85149; --warning-color:#d29922; --success-color:#3fb950; --info-color:#58a6ff; --border-color:#21262d; }
[data-palette="splatter"]    { --bg-color:#0e0e14; --surface-color:#1a1a24; --surface-hover:#24242e; --surface-active:#2e2e3a; --text-color:#f0eef5; --text-muted:#8a88a0; --accent-color:#ff3c78; --accent-glow:rgba(255,60,120,0.18); --danger-color:#ff4444; --warning-color:#ffcc00; --success-color:#44dd66; --info-color:#44bbff; --border-color:#2a2a38; }
[data-palette="sunburst"]    { --bg-color:#1a0a08; --surface-color:#2a1410; --surface-hover:#3a1e18; --surface-active:#4a2820; --text-color:#f5e8d8; --text-muted:#c09070; --accent-color:#ff4422; --accent-glow:rgba(255,68,34,0.18); --danger-color:#ff3333; --warning-color:#ffaa00; --success-color:#55bb44; --info-color:#44aadd; --border-color:#4a2820; }

/* ── Effect layer (surface treatment, animations) ── */
[data-effect="none"]     { --surface-blur:0px; --surface-opacity:1; --surface-shadow:none; --skin-radius-sm:var(--radius-sm); --skin-radius-md:var(--radius-md); --glow-intensity:1; --anim-scale:1; --hover-lift:-2px; --heading-tracking:2px; --font-heading:'Inter','SF Pro Display',system-ui,sans-serif; }
[data-effect="glass"]    { --surface-blur:14px; --surface-opacity:0.55; --surface-shadow:0 4px 30px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.06); --skin-radius-md:12px; --skin-radius-sm:6px; --glow-intensity:1.2; --hover-lift:-3px; }
[data-effect="cyber"]    { --surface-blur:12px; --surface-opacity:0.7; --surface-shadow:0 0 20px rgba(0,255,136,0.06),inset 0 1px 0 rgba(255,255,255,0.04); --skin-radius-sm:0px; --skin-radius-md:2px; --glow-intensity:2; --anim-scale:1.5; --heading-tracking:4px; }
[data-effect="arcade"]   { --heading-tracking:3px; --skin-radius-md:8px; --glow-intensity:1.5; --anim-scale:1.5; --hover-lift:-3px; }
[data-effect="rounded"]  { --skin-radius-md:16px; --skin-radius-sm:8px; --glow-intensity:0.5; --hover-lift:-3px; --surface-blur:16px; --surface-opacity:0.55; --surface-shadow:0 4px 30px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.6); }
[data-effect="sharp"]    { --skin-radius-md:2px; --skin-radius-sm:0px; --heading-tracking:3px; --glow-intensity:1.3; --surface-shadow:0 1px 3px rgba(0,0,0,0.3); }


/* ── Background layer (gradient + pattern) ── */
[data-bg="none"]         { --bg-gradient:none; --bg-pattern:none; }
[data-bg="sunburst"]     { --bg-gradient:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,68,34,0.15) 0deg 10deg,transparent 10deg 20deg); --bg-pattern:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); }
[data-bg="checkerboard"] { --bg-gradient:none; --bg-pattern:url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' fill='%23ffffff' fill-opacity='0.08'/%3E%3Crect x='20' y='20' width='20' height='20' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E"); }
[data-bg="stripes"]      { --bg-gradient:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,64,129,0.12) 10px,rgba(255,64,129,0.12) 20px); --bg-pattern:none; }
[data-bg="polka"]        { --bg-gradient:none; --bg-pattern:url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='18' r='6' fill='%23ffd700' fill-opacity='0.2'/%3E%3Ccircle cx='0' cy='0' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='36' cy='0' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='0' cy='36' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3Ccircle cx='36' cy='36' r='4' fill='%23ffd700' fill-opacity='0.12'/%3E%3C/svg%3E"); }
[data-bg="zigzag"]       { --bg-gradient:none; --bg-pattern:url("data:image/svg+xml,%3Csvg width='40' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L10 0 L20 20 L30 0 L40 20' fill='none' stroke='%2300ff88' stroke-opacity='0.15' stroke-width='2'/%3E%3C/svg%3E"); }
[data-bg="tartan"]       { --bg-gradient:none; --bg-pattern:url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='15' x2='30' y2='15' stroke='%23ff2d95' stroke-opacity='0.1' stroke-width='2'/%3E%3Cline x1='15' y1='0' x2='15' y2='30' stroke='%23ff2d95' stroke-opacity='0.1' stroke-width='2'/%3E%3Cline x1='0' y1='5' x2='30' y2='5' stroke='%2300e5ff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cline x1='0' y1='25' x2='30' y2='25' stroke='%2300e5ff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cline x1='5' y1='0' x2='5' y2='30' stroke='%2300e5ff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cline x1='25' y1='0' x2='25' y2='30' stroke='%2300e5ff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E"); }
[data-bg="spiral"]       { --bg-gradient:repeating-conic-gradient(from 0deg at 50% 50%,rgba(167,139,250,0.15) 0deg 5deg,transparent 5deg 10deg); --bg-pattern:none; }
[data-bg="seigaiha"]     { --bg-gradient:none; --bg-pattern:url("data:image/svg+xml,%3Csvg width='80' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3Ccircle cx='0' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3Ccircle cx='80' cy='40' r='10' fill='none' stroke='%235ef0e620' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='18' fill='none' stroke='%235ef0e615' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='26' fill='none' stroke='%235ef0e610' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='34' fill='none' stroke='%235ef0e60a' stroke-width='0.8'/%3E%3C/svg%3E"); }
[data-bg="circuit"]      { --bg-gradient:none; --bg-pattern:url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 60h30v-30h20v50h-10v20h40v-20h-10v-50h20v30h30' fill='none' stroke='%23ff9900' stroke-opacity='0.13' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='60' r='3' fill='%23ff9900' fill-opacity='0.16'/%3E%3Ccircle cx='60' cy='30' r='3' fill='%23ff9900' fill-opacity='0.16'/%3E%3Ccircle cx='50' cy='100' r='3' fill='%23ff9900' fill-opacity='0.16'/%3E%3Ccircle cx='110' cy='60' r='3' fill='%23ff9900' fill-opacity='0.16'/%3E%3Ccircle cx='80' cy='80' r='2' fill='%234caf50' fill-opacity='0.13'/%3E%3Cpath d='M0 110h25v-20h15' fill='none' stroke='%234caf50' stroke-opacity='0.1' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M85 0v25h20v15' fill='none' stroke='%234caf50' stroke-opacity='0.1' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-bg="halftone"]     { --bg-gradient:radial-gradient(circle at 50% 50%,transparent 0%,transparent 20%,rgba(0,0,0,0.3) 100%); --bg-pattern:url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23ff4081' fill-opacity='0.25'/%3E%3C/svg%3E"); }
[data-bg="isometric"]    { --bg-gradient:none; --bg-pattern:url("data:image/svg+xml,%3Csvg width='60' height='52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 26 L30 52 L0 26Z' fill='none' stroke='%2358a6ff' stroke-opacity='0.13' stroke-width='1'/%3E%3Cpath d='M30 0 L30 52 M0 26 L60 26' fill='none' stroke='%2358a6ff' stroke-opacity='0.06' stroke-width='0.5'/%3E%3C/svg%3E"); }

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: var(--bg-pattern), var(--bg-gradient), var(--bg-image);
    background-size: auto, cover, cover;
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: scroll;
    color: var(--text-color);
    height: 100%;
    min-height: 100vh;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* === Typography === */

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-tracking);
    color: var(--text-color);
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

h1:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

p { line-height: 1.6; }

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--text-color);
}

/* === Buttons === */

button, .btn {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 12px 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    text-align: center;
    border-radius: var(--skin-radius-md);
    transition: all var(--transition-normal);
}

button:hover, .btn:hover {
    background: var(--accent-color);
    color: var(--bg-color);
}

button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

button.danger, .btn-danger {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

button.danger:hover, .btn-danger:hover {
    background: var(--danger-color);
    color: var(--bg-color);
}

button.warning, .btn-warning {
    border-color: var(--warning-color);
    color: var(--warning-color);
}

button.warning:hover, .btn-warning:hover {
    background: var(--warning-color);
    color: var(--bg-color);
}

/* === Auth UI === */

.auth-user-name {
    color: var(--text-color);
    font-weight: 500;
    text-decoration: none;
}

.auth-user-name:hover {
    color: var(--accent-color);
}

.auth-signin {
    background: none;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 8px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background var(--transition-normal), color var(--transition-normal);
}

.auth-signin:hover {
    background: var(--accent-color);
    color: var(--bg-color);
}

.auth-signin:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* === Surface Panels === */

.surface-panel {
    background: color-mix(in srgb, var(--surface-color) calc(var(--surface-opacity) * 100%), transparent);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: var(--skin-radius-md);
    backdrop-filter: blur(var(--surface-blur));
    -webkit-backdrop-filter: blur(var(--surface-blur));
    box-shadow: var(--surface-shadow);
}

/* === Name & Input Fields === */

.name-input,
.code-input {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px 14px;
    font-family: inherit;
    font-size: 1rem;
    width: 100%;
    max-width: 300px;
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}

.name-input:focus,
.code-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.name-input::placeholder,
.code-input::placeholder {
    color: var(--text-muted);
}

.name-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-color);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 8px 16px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: var(--radius-md);
    user-select: none;
}

.name-badge::before {
    content: '●';
    font-size: 0.6rem;
}

.name-field {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
}

.name-prompt-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.name-prompt-panel {
    text-align: center;
}

/* === Join Forms === */

.join-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* Host name panel on PlayModeSelect */
.host-name-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

/* === Utility === */

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-success { color: var(--success-color); }

/* === Secondary & Utility Buttons (shared) === */

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 10px 20px;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
    background: transparent;
}

.btn-primary {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: var(--bg-color);
    font-weight: bold;
}

.btn-primary:hover {
    background: transparent;
    color: var(--accent-color);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* === Tag Badge (shared) === */

.tag-badge {
    display: inline-block;
    background: var(--border-color);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
}

/* === Pager (shared) === */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: 20px 0;
}

.page-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* === Reduced Motion (global) === */

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

/* === Splash Entrance Animations (global — CSS isolation unreliable in MAUI WebView) === */

/* ── 1. Logo container: starts small + rotated, scales up with glow burst ── */
.splash-logo {
    color: var(--accent-color);
    margin-bottom: var(--space-sm);
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
    filter: drop-shadow(0 0 0px transparent);
    animation: logoEntrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

@keyframes logoEntrance {
    50% {
        opacity: 1;
        transform: scale(1.15) rotate(4deg);
        filter: drop-shadow(0 0 40px var(--accent-glow));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 20px var(--accent-glow));
    }
}

/* ── SVG stroke draws itself ── */
.logo-path {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: drawStroke 1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

@keyframes drawStroke {
    to { stroke-dashoffset: 0; }
}

/* ── dot slams in with overshoot ── */
.logo-dot {
    fill: currentColor;
    stroke: none;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    animation: dotSlam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards;
}

@keyframes dotSlam {
    40% {
        opacity: 1;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── 2. Brand letters stagger up with rotation ── */
.splash-brand {
    overflow: hidden;
}

.splash-brand .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(110%) rotateX(50deg);
    animation: letterRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes letterRise {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* ── 3. Subtitle blurs into focus ── */
.splash-entrance .subtitle {
    opacity: 0;
    filter: blur(10px);
    animation: focusIn 0.7s ease-out 1.2s forwards;
}

@keyframes focusIn {
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* ── 4. Content spring slide-up ── */
.splash-entrance .anim-slide-up {
    opacity: 0;
    transform: translateY(40px);
    animation: springUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes springUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Blazor Infrastructure === */

.blazor-error-boundary {
    background: var(--danger-color);
    padding: 1rem;
    color: var(--bg-color);
    font-family: inherit;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    background: var(--danger-color);
    color: var(--bg-color);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--accent-color);
}

.invalid {
    outline: 1px solid var(--danger-color);
}

.validation-message {
    color: var(--danger-color);
}

/* ── Native app: prevent body scroll when keyboard animates ── */

html.native-app,
html.native-app body {
    overflow: hidden;
}

/* Native app shell uses fixed viewport anchoring so keyboard resize is stable */
body.native-app .app-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-height, 100dvh);
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

html[data-keyboard="open"] body.native-app .app-shell {
    padding-bottom: 0;
}

body.native-app .main-content {
    min-height: 0;
    overflow-y: auto;
}

/* Create page: pin composer above tab bar / keyboard */
body.native-app .chat-container {
    height: auto;
    flex: 1;
    min-height: 0;
}

body.native-app .chat-messages {
    padding-bottom: 92px;
}

html[data-keyboard="open"] body.native-app .chat-messages {
    padding-bottom: 16px;
}

body.native-app .chat-input-area {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--bg-color);
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

html[data-keyboard="open"] body.native-app .chat-input-area {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

/* ── Keyboard-open: constrain app shell so flex children shrink properly (web only) ── */

html[data-keyboard="open"] body:not(.native-app) .app-shell {
    min-height: 0;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
}

html[data-keyboard="open"] body:not(.native-app) {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ── Keyboard-open: hide tab bar to reclaim space ── */

html[data-keyboard="open"] .bottom-tab-bar {
    display: none !important;
}

/* ── Immersive mode: hide tab bar during gameplay ── */

.app-shell.immersive .bottom-tab-bar {
    display: none !important;
}

/* ── Reconnecting overlay ── */

.reconnecting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 0.75rem;
    pointer-events: none;
}

.reconnecting-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-color, #222);
    color: var(--warning-color, #f0ad4e);
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.loader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ── Subtle content-reveal utility ── */

.fade-in {
    animation: fade-in-subtle var(--transition-normal) ease-out both;
}

@keyframes fade-in-subtle {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}