:root {
    --glow-color: #06b6d4;
    --bg-color: #050505;
    --text-color: #ffffff;
    --panel-bg: rgba(10, 10, 10, 0.85);
    --border-color: rgba(255, 255, 255, 0.15);
    --accent-color: #f59e0b;
    --card-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

/* ========================================
   BASE STYLES (must come before themes)
   ======================================== */

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    overflow: hidden;
    transition: background 0.5s ease;
}

.hud-panel { position: absolute; z-index: 10; pointer-events: none; }
.time-display { top: 40px; left: 40px; text-align: left; }
.huge-time { font-family: 'Tenor Sans', sans-serif; font-size: 72px; line-height: 1; letter-spacing: -1px; }
.date-display { font-family: 'Playfair Display', serif; font-style: italic; font-size: 24px; color: var(--text-color); opacity: 0.7; margin-top: 12px; }

.legend-key {
    position: absolute;
    bottom: 100px;
    left: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}
.key-group {
    display: flex;
    gap: 16px;
}
.key-item { display: flex; align-items: center; gap: 6px; font-size: 9px; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; }
.key-dot { width: 5px; height: 5px; border-radius: 50%; }

.info-icon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    opacity: 0.5;
    text-decoration: none;
    z-index: 100;
}

#tooltip {
    position: fixed;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 16px;
    color: var(--text-color);
    pointer-events: none;
    display: none;
    z-index: 1000;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    max-width: 280px;
}

#tooltip h3 { font-family: 'Tenor Sans', sans-serif; font-size: 14px; margin-bottom: 8px; color: var(--accent-color); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; }
#tooltip .content { font-size: 12px; line-height: 1.5; opacity: 0.8; }

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.year-progress {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 16px;
}

.now-summary {
    font-family: 'Montserrat', sans-serif;
    margin-top: 16px;
    max-width: 320px;
}
.now-summary #now-meta {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.85;
}
.now-summary #next-event {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.55;
    margin-top: 4px;
}
/* Plain-language "now" note written server-side by Claude; fades in once loaded. */
.cosmic-summary {
    margin-top: 12px;
    max-width: 320px;
    font-size: 11px;
    font-style: italic;
    line-height: 1.5;
    color: var(--text-color);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.cosmic-summary.visible { opacity: 0.68; }

.info-popup {
    position: fixed;
    bottom: 80px;
    right: 30px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 16px 20px;
    border-radius: 8px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    min-width: 160px;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(10px);
}

.info-popup.visible {
    opacity: 1;
    pointer-events: auto;
}

.info-popup-title {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 12px;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.info-popup a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 11px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.info-popup a:hover {
    opacity: 1;
}

.info-icon:hover {
    opacity: 1;
}

/* ========================================
   THEME OVERRIDES (must come after base)
   ======================================== */

/* --- THEME: GLASSMORPHISM --- */
body.theme-glass {
    --bg-color: #1a1c2c;
    --panel-bg: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.2);
    background: radial-gradient(circle at top right, #2b2e4a, #1a1c2c);
}
/* --- THEME: SKEUOMORPHISM --- */
body.theme-skeuo {
    --bg-color: #222;
    --text-color: #eee;
    background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #222 10px, #222 20px);
}
body.theme-skeuo .huge-time {
    text-shadow: 2px 2px 0px #000, -1px -1px 0px rgba(255,255,255,0.2);
}
body.theme-skeuo #tooltip,
body.theme-skeuo .info-popup {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border: 2px solid #444;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.5);
    border-radius: 4px;
}
body.theme-skeuo .info-icon {
    background: linear-gradient(145deg, #333, #222);
    border: 2px solid #555;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* --- THEME: SKEUOMORPHISM BRASS --- */
body.theme-skeuo-brass {
    --bg-color: #1a1408;
    --text-color: #f4d794;
    --accent-color: #d4a84b;
    --glow-color: #b8860b;
    --panel-bg: linear-gradient(145deg, #2a2010, #1a1408);
    --border-color: #8b7355;
    background: radial-gradient(ellipse at center, #2a1f0f 0%, #1a1408 70%);
}
body.theme-skeuo-brass .huge-time {
    color: #f4d794;
    text-shadow: 2px 2px 0px #0a0806, -1px -1px 0px rgba(244,215,148,0.3),
                 0 0 20px rgba(212,168,75,0.3);
    font-weight: 400;
}
body.theme-skeuo-brass .date-display {
    color: #c9a656;
    opacity: 1;
}
body.theme-skeuo-brass #tooltip,
body.theme-skeuo-brass .info-popup {
    background: linear-gradient(145deg, #2a2010, #1a1408);
    border: 2px solid #8b7355;
    box-shadow: inset 0 1px 0 rgba(244,215,148,0.15), 0 4px 12px rgba(0,0,0,0.6);
    border-radius: 4px;
    color: #f4d794;
}
body.theme-skeuo-brass .info-icon {
    background: linear-gradient(145deg, #3a2a15, #2a1f0f);
    border: 2px solid #8b7355;
    box-shadow: inset 0 1px 0 rgba(244,215,148,0.15);
    color: #d4a84b;
}
body.theme-skeuo-brass .key-item {
    color: #c9a656;
}

/* --- THEME: SKEUOMORPHISM CHROME --- */
body.theme-skeuo-chrome {
    --bg-color: #1a1d21;
    --text-color: #e8ecf0;
    --accent-color: #5dadec;
    --glow-color: #4a9edd;
    --panel-bg: linear-gradient(145deg, #2a2e33, #1a1d21);
    --border-color: #5a6570;
    background: radial-gradient(ellipse at center, #252a30 0%, #1a1d21 70%);
}
body.theme-skeuo-chrome .huge-time {
    color: #e8ecf0;
    text-shadow: 2px 2px 0px #0a0b0c, -1px -1px 0px rgba(255,255,255,0.25),
                 0 0 15px rgba(93,173,236,0.2);
    font-weight: 400;
}
body.theme-skeuo-chrome .date-display {
    color: #8899aa;
    opacity: 1;
}
body.theme-skeuo-chrome #tooltip,
body.theme-skeuo-chrome .info-popup {
    background: linear-gradient(145deg, #2a2e33, #1a1d21);
    border: 2px solid #5a6570;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.5),
                inset 0 -1px 0 rgba(0,0,0,0.3);
    border-radius: 4px;
    color: #e8ecf0;
}
body.theme-skeuo-chrome .info-icon {
    background: linear-gradient(145deg, #3a4048, #2a2e33);
    border: 2px solid #5a6570;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    color: #5dadec;
}
body.theme-skeuo-chrome .key-item {
    color: #8899aa;
}

/* --- THEME: SKEUOMORPHISM COCKPIT --- */
body.theme-skeuo-cockpit {
    --bg-color: #0d0d0a;
    --text-color: #33ff33;
    --accent-color: #ff6600;
    --glow-color: #33ff33;
    --panel-bg: linear-gradient(145deg, #1a1a14, #0d0d0a);
    --border-color: #3a3a2a;
    background: #0d0d0a;
}
body.theme-skeuo-cockpit .huge-time {
    color: #33ff33;
    text-shadow: 0 0 10px rgba(51,255,51,0.8), 0 0 20px rgba(51,255,51,0.4),
                 2px 2px 0px #000;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 4px;
}
body.theme-skeuo-cockpit .date-display {
    color: #ff6600;
    font-family: 'Courier New', monospace;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(255,102,0,0.6);
    opacity: 1;
}
body.theme-skeuo-cockpit #tooltip,
body.theme-skeuo-cockpit .info-popup {
    background: linear-gradient(145deg, #1a1a14, #0d0d0a);
    border: 2px solid #3a3a2a;
    box-shadow: inset 0 1px 0 rgba(51,255,51,0.1), 0 4px 12px rgba(0,0,0,0.7),
                0 0 20px rgba(51,255,51,0.05);
    border-radius: 2px;
    color: #33ff33;
    font-family: 'Courier New', monospace;
}
body.theme-skeuo-cockpit .info-icon {
    background: linear-gradient(145deg, #252520, #1a1a14);
    border: 2px solid #3a3a2a;
    box-shadow: inset 0 1px 0 rgba(51,255,51,0.1);
    color: #33ff33;
    border-radius: 2px;
}
body.theme-skeuo-cockpit .key-item {
    color: #33ff33;
    font-family: 'Courier New', monospace;
}

/* --- THEME: SKEUOMORPHISM BRONZE --- */
body.theme-skeuo-bronze {
    --bg-color: #1a1612;
    --text-color: #cd9b6a;
    --accent-color: #8b5a2b;
    --glow-color: #cd9b6a;
    --panel-bg: linear-gradient(145deg, #2a221a, #1a1612);
    --border-color: #6b4423;
    background: radial-gradient(ellipse at center, #2a201a 0%, #1a1612 70%);
}
body.theme-skeuo-bronze .huge-time {
    color: #cd9b6a;
    text-shadow: 3px 3px 0px #0a0806, -1px -1px 0px rgba(205,155,106,0.4),
                 0 0 15px rgba(139,90,43,0.3);
}
body.theme-skeuo-bronze .date-display {
    color: #a67c52;
    opacity: 1;
}
body.theme-skeuo-bronze #tooltip,
body.theme-skeuo-bronze .info-popup {
    background: linear-gradient(145deg, #2a221a, #1a1612);
    border: 2px solid #6b4423;
    box-shadow: inset 0 2px 0 rgba(205,155,106,0.2), inset 0 -2px 0 rgba(0,0,0,0.3), 0 6px 16px rgba(0,0,0,0.6);
    border-radius: 6px;
    color: #cd9b6a;
}
body.theme-skeuo-bronze .info-icon {
    background: linear-gradient(145deg, #3a2e22, #2a221a);
    border: 2px solid #6b4423;
    color: #cd9b6a;
}
body.theme-skeuo-bronze .key-item { color: #a67c52; }

/* --- THEME: SKEUOMORPHISM COPPER --- */
body.theme-skeuo-copper {
    --bg-color: #1a110f;
    --text-color: #e8a87c;
    --accent-color: #b87333;
    --glow-color: #e8a87c;
    --panel-bg: linear-gradient(145deg, #2a1a16, #1a110f);
    --border-color: #8b4513;
    background: radial-gradient(ellipse at center, #2a1814 0%, #1a110f 70%);
}
body.theme-skeuo-copper .huge-time {
    color: #e8a87c;
    text-shadow: 2px 2px 0px #0a0504, -1px -1px 0px rgba(232,168,124,0.35),
                 0 0 25px rgba(184,115,51,0.4);
}
body.theme-skeuo-copper .date-display {
    color: #cd7f50;
    opacity: 1;
}
body.theme-skeuo-copper #tooltip,
body.theme-skeuo-copper .info-popup {
    background: linear-gradient(145deg, #2a1a16, #1a110f);
    border: 2px solid #8b4513;
    box-shadow: inset 0 1px 0 rgba(232,168,124,0.25), 0 5px 15px rgba(0,0,0,0.5);
    border-radius: 4px;
    color: #e8a87c;
}
body.theme-skeuo-copper .info-icon {
    background: linear-gradient(145deg, #3a2620, #2a1a16);
    border: 2px solid #8b4513;
    color: #b87333;
}
body.theme-skeuo-copper .key-item { color: #cd7f50; }

/* --- THEME: SKEUOMORPHISM TITANIUM --- */
body.theme-skeuo-titanium {
    --bg-color: #14171a;
    --text-color: #c8d0d8;
    --accent-color: #6a7a8a;
    --glow-color: #8899aa;
    --panel-bg: linear-gradient(145deg, #252a30, #14171a);
    --border-color: #4a5560;
    background: linear-gradient(135deg, #1a1e22 0%, #14171a 50%, #1a2025 100%);
}
body.theme-skeuo-titanium .huge-time {
    color: #c8d0d8;
    text-shadow: 2px 2px 0px #08090a, -1px -1px 0px rgba(200,208,216,0.2);
}
body.theme-skeuo-titanium .date-display {
    color: #8090a0;
    opacity: 1;
}
body.theme-skeuo-titanium #tooltip,
body.theme-skeuo-titanium .info-popup {
    background: linear-gradient(145deg, #252a30, #14171a);
    border: 1px solid #4a5560;
    box-shadow: inset 0 1px 0 rgba(200,208,216,0.1), inset 0 -1px 0 rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.5);
    border-radius: 3px;
    color: #c8d0d8;
}
body.theme-skeuo-titanium .info-icon {
    background: linear-gradient(145deg, #303840, #252a30);
    border: 1px solid #4a5560;
    color: #6a7a8a;
}
body.theme-skeuo-titanium .key-item { color: #8090a0; }

/* --- THEME: SKEUOMORPHISM ROSE GOLD --- */
body.theme-skeuo-rosegold {
    --bg-color: #1a1416;
    --text-color: #f0c8c8;
    --accent-color: #b76e79;
    --glow-color: #e8b4b8;
    --panel-bg: linear-gradient(145deg, #2a2024, #1a1416);
    --border-color: #8b5a62;
    background: radial-gradient(ellipse at center, #251a1e 0%, #1a1416 70%);
}
body.theme-skeuo-rosegold .huge-time {
    color: #f0c8c8;
    text-shadow: 2px 2px 0px #0a0808, -1px -1px 0px rgba(240,200,200,0.3),
                 0 0 20px rgba(183,110,121,0.25);
}
body.theme-skeuo-rosegold .date-display {
    color: #d4a0a8;
    opacity: 1;
}
body.theme-skeuo-rosegold #tooltip,
body.theme-skeuo-rosegold .info-popup {
    background: linear-gradient(145deg, #2a2024, #1a1416);
    border: 2px solid #8b5a62;
    box-shadow: inset 0 1px 0 rgba(240,200,200,0.2), 0 6px 16px rgba(0,0,0,0.5);
    border-radius: 8px;
    color: #f0c8c8;
}
body.theme-skeuo-rosegold .info-icon {
    background: linear-gradient(145deg, #3a2c32, #2a2024);
    border: 2px solid #8b5a62;
    color: #b76e79;
}
body.theme-skeuo-rosegold .key-item { color: #d4a0a8; }

/* --- THEME: SKEUOMORPHISM GUNMETAL --- */
body.theme-skeuo-gunmetal {
    --bg-color: #121416;
    --text-color: #9ca3ab;
    --accent-color: #5a6268;
    --glow-color: #6c757d;
    --panel-bg: linear-gradient(145deg, #22262a, #121416);
    --border-color: #3a3e42;
    background: #121416;
}
body.theme-skeuo-gunmetal .huge-time {
    color: #9ca3ab;
    text-shadow: 3px 3px 0px #060708, -1px -1px 0px rgba(156,163,171,0.15);
}
body.theme-skeuo-gunmetal .date-display {
    color: #6c757d;
    opacity: 1;
}
body.theme-skeuo-gunmetal #tooltip,
body.theme-skeuo-gunmetal .info-popup {
    background: linear-gradient(145deg, #22262a, #121416);
    border: 2px solid #3a3e42;
    box-shadow: inset 0 1px 0 rgba(156,163,171,0.08), inset 0 -2px 0 rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.6);
    border-radius: 2px;
    color: #9ca3ab;
}
body.theme-skeuo-gunmetal .info-icon {
    background: linear-gradient(145deg, #2e3438, #22262a);
    border: 2px solid #3a3e42;
    color: #5a6268;
    border-radius: 2px;
}
body.theme-skeuo-gunmetal .key-item { color: #6c757d; }

/* --- THEME: SKEUOMORPHISM PLATINUM --- */
body.theme-skeuo-platinum {
    --bg-color: #f0f2f5;
    --text-color: #3a3e42;
    --accent-color: #8899aa;
    --glow-color: #b8c4d0;
    --panel-bg: linear-gradient(145deg, #ffffff, #e8ecf0);
    --border-color: #c0c8d0;
    background: linear-gradient(145deg, #f8fafc, #e8ecf0);
}
body.theme-skeuo-platinum .huge-time {
    color: #3a3e42;
    text-shadow: 1px 1px 0px #ffffff, -1px -1px 0px rgba(0,0,0,0.1),
                 2px 2px 4px rgba(0,0,0,0.1);
}
body.theme-skeuo-platinum .date-display {
    color: #6a7a8a;
    opacity: 1;
}
body.theme-skeuo-platinum #tooltip,
body.theme-skeuo-platinum .info-popup {
    background: linear-gradient(145deg, #ffffff, #e8ecf0);
    border: 1px solid #c0c8d0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 6px;
    color: #3a3e42;
}
body.theme-skeuo-platinum .info-icon {
    background: linear-gradient(145deg, #ffffff, #e8ecf0);
    border: 1px solid #c0c8d0;
    color: #6a7a8a;
}
body.theme-skeuo-platinum .key-item { color: #6a7a8a; }

/* --- THEME: SKEUOMORPHISM OBSIDIAN --- */
body.theme-skeuo-obsidian {
    --bg-color: #0a0a0c;
    --text-color: #e0e0e8;
    --accent-color: #6a5acd;
    --glow-color: #8070e0;
    --panel-bg: linear-gradient(145deg, #18181c, #0a0a0c);
    --border-color: #2a2a35;
    background: linear-gradient(135deg, #0c0c10 0%, #0a0a0c 50%, #0e0e14 100%);
}
body.theme-skeuo-obsidian .huge-time {
    color: #e0e0e8;
    text-shadow: 2px 2px 0px #000, -1px -1px 0px rgba(224,224,232,0.1),
                 0 0 30px rgba(106,90,205,0.3);
}
body.theme-skeuo-obsidian .date-display {
    color: #8080a0;
    opacity: 1;
}
body.theme-skeuo-obsidian #tooltip,
body.theme-skeuo-obsidian .info-popup {
    background: linear-gradient(145deg, #18181c, #0a0a0c);
    border: 1px solid #2a2a35;
    box-shadow: inset 0 1px 0 rgba(224,224,232,0.05), 0 8px 24px rgba(0,0,0,0.7),
                0 0 40px rgba(106,90,205,0.1);
    border-radius: 4px;
    color: #e0e0e8;
}
body.theme-skeuo-obsidian .info-icon {
    background: linear-gradient(145deg, #22222a, #18181c);
    border: 1px solid #2a2a35;
    color: #6a5acd;
}
body.theme-skeuo-obsidian .key-item { color: #8080a0; }

/* --- THEME: SKEUOMORPHISM AMBER --- */
body.theme-skeuo-amber {
    --bg-color: #1a1408;
    --text-color: #ffd280;
    --accent-color: #ff9500;
    --glow-color: #ffb84d;
    --panel-bg: linear-gradient(145deg, #2a2010, #1a1408);
    --border-color: #996300;
    background: radial-gradient(ellipse at center, #2a1f10 0%, #1a1408 70%);
}
body.theme-skeuo-amber .huge-time {
    color: #ffd280;
    text-shadow: 2px 2px 0px #0a0804, -1px -1px 0px rgba(255,210,128,0.4),
                 0 0 30px rgba(255,149,0,0.4);
}
body.theme-skeuo-amber .date-display {
    color: #ffaa33;
    opacity: 1;
    text-shadow: 0 0 10px rgba(255,170,51,0.3);
}
body.theme-skeuo-amber #tooltip,
body.theme-skeuo-amber .info-popup {
    background: linear-gradient(145deg, #2a2010, #1a1408);
    border: 2px solid #996300;
    box-shadow: inset 0 1px 0 rgba(255,210,128,0.2), 0 6px 20px rgba(0,0,0,0.5),
                0 0 30px rgba(255,149,0,0.1);
    border-radius: 8px;
    color: #ffd280;
}
body.theme-skeuo-amber .info-icon {
    background: linear-gradient(145deg, #3a2a15, #2a2010);
    border: 2px solid #996300;
    color: #ff9500;
}
body.theme-skeuo-amber .key-item { color: #ffaa33; }

/* --- THEME: SKEUOMORPHISM JADE --- */
body.theme-skeuo-jade {
    --bg-color: #0a1410;
    --text-color: #88d8b0;
    --accent-color: #00a86b;
    --glow-color: #50c878;
    --panel-bg: linear-gradient(145deg, #142820, #0a1410);
    --border-color: #1a5040;
    background: radial-gradient(ellipse at center, #102018 0%, #0a1410 70%);
}
body.theme-skeuo-jade .huge-time {
    color: #88d8b0;
    text-shadow: 2px 2px 0px #040806, -1px -1px 0px rgba(136,216,176,0.3),
                 0 0 20px rgba(0,168,107,0.3);
}
body.theme-skeuo-jade .date-display {
    color: #50c878;
    opacity: 1;
}
body.theme-skeuo-jade #tooltip,
body.theme-skeuo-jade .info-popup {
    background: linear-gradient(145deg, #142820, #0a1410);
    border: 2px solid #1a5040;
    box-shadow: inset 0 2px 0 rgba(136,216,176,0.15), inset 0 -1px 0 rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.5);
    border-radius: 6px;
    color: #88d8b0;
}
body.theme-skeuo-jade .info-icon {
    background: linear-gradient(145deg, #1e3830, #142820);
    border: 2px solid #1a5040;
    color: #00a86b;
}
body.theme-skeuo-jade .key-item { color: #50c878; }

/* --- THEME: SKEUOMORPHISM ONYX --- */
body.theme-skeuo-onyx {
    --bg-color: #0a0a0a;
    --text-color: #d4af37;
    --accent-color: #ffd700;
    --glow-color: #d4af37;
    --panel-bg: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    --border-color: #333333;
    background: #0a0a0a;
}
body.theme-skeuo-onyx .huge-time {
    color: #d4af37;
    text-shadow: 2px 2px 0px #000, -1px -1px 0px rgba(212,175,55,0.3),
                 0 0 25px rgba(255,215,0,0.3);
}
body.theme-skeuo-onyx .date-display {
    color: #b8960c;
    opacity: 1;
}
body.theme-skeuo-onyx #tooltip,
body.theme-skeuo-onyx .info-popup {
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    border: 2px solid #d4af37;
    box-shadow: inset 0 1px 0 rgba(212,175,55,0.15), 0 6px 20px rgba(0,0,0,0.7),
                0 0 20px rgba(212,175,55,0.1);
    border-radius: 0;
    color: #d4af37;
}
body.theme-skeuo-onyx .info-icon {
    background: linear-gradient(145deg, #252525, #1a1a1a);
    border: 2px solid #d4af37;
    color: #ffd700;
    border-radius: 0;
}
body.theme-skeuo-onyx .key-item { color: #b8960c; }

/* --- THEME: SWISS DESIGN --- */
body.theme-swiss {
    --bg-color: #f0f0f0;
    --text-color: #000;
    --accent-color: #d52b1e;
    --glow-color: #000;
    --panel-bg: #fff;
    --border-color: rgba(0, 0, 0, 0.2);
}
body.theme-swiss .huge-time {
    color: #000;
    font-weight: 700;
    text-shadow: none;
}
body.theme-swiss .date-display {
    color: #d52b1e;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 1;
}
body.theme-swiss #tooltip,
body.theme-swiss .info-popup {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #000;
}
/* --- THEME: NEUMORPHISM (original) --- */
body.theme-neu {
    --bg-color: #e0e5ec;
    --text-color: #444;
    --glow-color: #a3b1c6;
    --panel-bg: #e0e5ec;
    --border-color: transparent;
}
body.theme-neu #tooltip,
body.theme-neu .info-popup {
    background: #e0e5ec;
    box-shadow: 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);
    border: none;
    color: #444;
}

/* --- THEME: SWISS RAILWAY --- */
body.theme-swiss-railway {
    --bg-color: #ffffff;
    --text-color: #000000;
    --accent-color: #ff0000;
    --glow-color: #000000;
    --panel-bg: #ffffff;
    --border-color: #000000;
}
body.theme-swiss-railway .huge-time {
    color: #000;
    font-weight: 700;
    text-shadow: none;
    letter-spacing: 2px;
}
body.theme-swiss-railway .date-display {
    color: #666;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 1;
}
body.theme-swiss-railway #tooltip,
body.theme-swiss-railway .info-popup {
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    color: #000;
    box-shadow: none;
}
body.theme-swiss-railway .info-icon {
    border: 2px solid #000;
    border-radius: 0;
    color: #000;
}
body.theme-swiss-railway .key-item {
    color: #000;
}

/* --- THEME: SWISS POSTER --- */
body.theme-swiss-poster {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --accent-color: #ff3b30;
    --glow-color: #ff3b30;
    --panel-bg: #000000;
    --border-color: #ff3b30;
}
body.theme-swiss-poster .huge-time {
    color: #fff;
    font-weight: 700;
    text-shadow: none;
    font-size: 80px;
}
body.theme-swiss-poster .date-display {
    color: #ff3b30;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 1;
}
body.theme-swiss-poster #tooltip,
body.theme-swiss-poster .info-popup {
    background: #000;
    border: 3px solid #ff3b30;
    border-radius: 0;
    color: #fff;
    box-shadow: none;
}
body.theme-swiss-poster .info-icon {
    border: 3px solid #ff3b30;
    border-radius: 0;
    color: #fff;
}

/* --- THEME: NEUMORPHISM LIGHT --- */
body.theme-neu-light {
    --bg-color: #e0e5ec;
    --text-color: #444;
    --accent-color: #6d5dfc;
    --glow-color: #a3b1c6;
    --panel-bg: #e0e5ec;
    --border-color: transparent;
}
body.theme-neu-light .huge-time {
    color: #444;
    text-shadow: 2px 2px 4px rgba(163,177,198,0.8), -2px -2px 4px rgba(255,255,255,0.9);
}
body.theme-neu-light .date-display {
    color: #666;
    opacity: 1;
}
body.theme-neu-light #tooltip,
body.theme-neu-light .info-popup {
    background: #e0e5ec;
    box-shadow: 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5);
    border: none;
    border-radius: 15px;
    color: #444;
}
body.theme-neu-light .info-icon {
    background: #e0e5ec;
    box-shadow: 5px 5px 10px rgba(163,177,198,0.6), -5px -5px 10px rgba(255,255,255,0.5);
    border: none;
    color: #444;
}
body.theme-neu-light .key-item {
    color: #444;
}

/* --- THEME: NEUMORPHISM DARK --- */
body.theme-neu-dark {
    --bg-color: #2d2d3a;
    --text-color: #e0e0e0;
    --accent-color: #7c6aef;
    --glow-color: #1a1a24;
    --panel-bg: #2d2d3a;
    --border-color: transparent;
}
body.theme-neu-dark .huge-time {
    color: #e0e0e0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5), -2px -2px 4px rgba(60,60,80,0.3);
}
body.theme-neu-dark .date-display {
    color: #aaa;
    opacity: 1;
}
body.theme-neu-dark #tooltip,
body.theme-neu-dark .info-popup {
    background: #2d2d3a;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -8px -8px 16px rgba(60,60,80,0.2);
    border: none;
    border-radius: 15px;
    color: #e0e0e0;
}
body.theme-neu-dark .info-icon {
    background: #2d2d3a;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.4), -5px -5px 10px rgba(60,60,80,0.2);
    border: none;
    color: #e0e0e0;
}

/* --- THEME: GLASSMORPHISM FROST --- */
body.theme-glass-frost {
    --bg-color: #dfe6e9;
    --text-color: #2d3436;
    --accent-color: #0984e3;
    --glow-color: #74b9ff;
    --panel-bg: rgba(255, 255, 255, 0.25);
    --border-color: rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
body.theme-glass-frost .huge-time {
    color: #2d3436;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
body.theme-glass-frost .date-display {
    color: #636e72;
    opacity: 1;
}
body.theme-glass-frost #tooltip,
body.theme-glass-frost .info-popup {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    color: #2d3436;
}
body.theme-glass-frost .info-icon {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #2d3436;
}
body.theme-glass-frost .key-item {
    color: #2d3436;
}

/* --- THEME: GLASSMORPHISM AURORA --- */
body.theme-glass-aurora {
    --bg-color: #0f0f23;
    --text-color: #ffffff;
    --accent-color: #00d9ff;
    --glow-color: #00d9ff;
    --panel-bg: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
body.theme-glass-aurora::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 217, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 0, 128, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
    animation: aurora-shift 20s ease-in-out infinite;
}
@keyframes aurora-shift {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
body.theme-glass-aurora .huge-time {
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}
body.theme-glass-aurora .date-display {
    color: #00d9ff;
    opacity: 0.8;
}
body.theme-glass-aurora #tooltip,
body.theme-glass-aurora .info-popup {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #fff;
}
body.theme-glass-aurora .info-icon {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #00d9ff;
}

/* --- THEME: ART DECO --- */
body.theme-artdeco {
    --bg-color: #0a0a0a;
    --text-color: #d4af37;
    --accent-color: #ffd700;
    --glow-color: #d4af37;
    --panel-bg: rgba(10, 10, 10, 0.95);
    --border-color: #d4af37;
    background:
        linear-gradient(135deg, transparent 24%, rgba(212,175,55,0.03) 25%, rgba(212,175,55,0.03) 26%, transparent 27%),
        linear-gradient(225deg, transparent 24%, rgba(212,175,55,0.03) 25%, rgba(212,175,55,0.03) 26%, transparent 27%),
        #0a0a0a;
    background-size: 60px 60px;
}
body.theme-artdeco .huge-time {
    color: #d4af37;
    font-weight: 400;
    text-shadow: 0 0 30px rgba(212,175,55,0.5), 2px 2px 0 #000;
    letter-spacing: 4px;
}
body.theme-artdeco .date-display {
    color: #ffd700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 4px;
    opacity: 0.9;
}
body.theme-artdeco #tooltip,
body.theme-artdeco .info-popup {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 2px solid #d4af37;
    border-radius: 0;
    color: #d4af37;
    box-shadow: 0 0 20px rgba(212,175,55,0.2), inset 0 0 40px rgba(212,175,55,0.05);
}
body.theme-artdeco #tooltip::before,
body.theme-artdeco .info-popup::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    border: 1px solid rgba(212,175,55,0.3);
    pointer-events: none;
}
body.theme-artdeco .info-icon {
    background: #0a0a0a;
    border: 2px solid #d4af37;
    border-radius: 0;
    color: #d4af37;
}
body.theme-artdeco .theme-picker-toggle,
body.theme-artdeco .export-button {
    border-radius: 0;
    border: 2px solid #d4af37;
}
body.theme-artdeco .key-item { color: #d4af37; letter-spacing: 2px; }
body.theme-artdeco .time-travel-container {
    border-radius: 0;
    border: 2px solid #d4af37;
}
body.theme-artdeco .time-travel-btn {
    border-radius: 0;
    border: 1px solid #d4af37;
}

/* --- THEME: SYNTHWAVE --- */
body.theme-synthwave {
    --bg-color: #0d001a;
    --text-color: #ff00ff;
    --accent-color: #00ffff;
    --glow-color: #ff00ff;
    --panel-bg: rgba(13, 0, 26, 0.9);
    --border-color: rgba(255,0,255,0.5);
    background:
        linear-gradient(180deg, #0d001a 0%, #1a0033 50%, #0d001a 100%),
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,0,255,0.03) 50px, rgba(255,0,255,0.03) 51px);
}
body.theme-synthwave::before {
    content: '';
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 40%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255,0,255,0.1) 100%),
        repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(0,255,255,0.1) 80px, rgba(0,255,255,0.1) 81px);
    pointer-events: none;
    z-index: -1;
}
body.theme-synthwave .huge-time {
    color: #ff00ff;
    text-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff, 0 0 60px rgba(255,0,255,0.5);
    font-weight: 700;
}
body.theme-synthwave .date-display {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
    font-style: normal;
    opacity: 1;
}
body.theme-synthwave #tooltip,
body.theme-synthwave .info-popup {
    background: rgba(13, 0, 26, 0.95);
    border: 1px solid rgba(255,0,255,0.5);
    border-radius: 0;
    color: #ff00ff;
    box-shadow: 0 0 30px rgba(255,0,255,0.3), inset 0 0 20px rgba(0,255,255,0.1);
}
body.theme-synthwave .info-icon {
    background: rgba(13, 0, 26, 0.95);
    border: 1px solid rgba(255,0,255,0.5);
    border-radius: 0;
    color: #00ffff;
}
body.theme-synthwave .theme-picker-toggle,
body.theme-synthwave .export-button {
    border-radius: 0;
    border: 1px solid rgba(255,0,255,0.5);
    box-shadow: 0 0 15px rgba(255,0,255,0.3);
}
body.theme-synthwave .key-item { color: #ff00ff; }
body.theme-synthwave .time-travel-container {
    border-radius: 0;
    border: 1px solid rgba(255,0,255,0.5);
    box-shadow: 0 0 20px rgba(255,0,255,0.2);
}
body.theme-synthwave .time-travel-btn {
    border-radius: 0;
    border: 1px solid rgba(0,255,255,0.5);
}
body.theme-synthwave #timeScrubber::-webkit-slider-thumb {
    background: #00ffff;
    box-shadow: 0 0 15px #00ffff;
}

/* --- THEME: BRUTALIST --- */
body.theme-brutalist {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --accent-color: #ffffff;
    --glow-color: #ffffff;
    --panel-bg: #1a1a1a;
    --border-color: #ffffff;
    background: #1a1a1a;
}
body.theme-brutalist .huge-time {
    color: #ffffff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 8px;
    text-shadow: none;
}
body.theme-brutalist .date-display {
    color: #808080;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    opacity: 1;
}
body.theme-brutalist #tooltip,
body.theme-brutalist .info-popup {
    background: #1a1a1a;
    border: 3px solid #ffffff;
    border-radius: 0;
    color: #ffffff;
    box-shadow: 6px 6px 0 #ffffff;
}
body.theme-brutalist .info-icon {
    background: #1a1a1a;
    border: 3px solid #ffffff;
    border-radius: 0;
    color: #ffffff;
}
body.theme-brutalist .theme-picker-toggle,
body.theme-brutalist .export-button {
    border-radius: 0;
    border: 3px solid #ffffff;
    box-shadow: 4px 4px 0 #ffffff;
}
body.theme-brutalist .theme-picker-toggle:hover,
body.theme-brutalist .export-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #ffffff;
}
body.theme-brutalist .key-item {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 2px;
}
body.theme-brutalist .time-travel-container {
    border-radius: 0;
    border: 3px solid #ffffff;
    box-shadow: 4px 4px 0 #ffffff;
}
body.theme-brutalist .time-travel-btn {
    border-radius: 0;
    border: 2px solid #ffffff;
}
body.theme-brutalist #timeScrubber {
    background: #ffffff;
    height: 6px;
}
body.theme-brutalist #timeScrubber::-webkit-slider-thumb {
    background: #1a1a1a;
    border: 3px solid #ffffff;
    border-radius: 0;
    width: 16px;
    height: 16px;
}

/* --- THEME: WABI-SABI --- */
body.theme-wabisabi {
    --bg-color: #faf8f5;
    --text-color: #4a4a4a;
    --accent-color: #8b7355;
    --glow-color: #8b7355;
    --panel-bg: rgba(250, 248, 245, 0.95);
    --border-color: rgba(139, 115, 85, 0.3);
    background:
        radial-gradient(ellipse at 30% 20%, rgba(139,115,85,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(107,142,107,0.05) 0%, transparent 50%),
        #faf8f5;
}
body.theme-wabisabi .huge-time {
    color: #4a4a4a;
    font-weight: 300;
    text-shadow: none;
    letter-spacing: 2px;
}
body.theme-wabisabi .date-display {
    color: #8b7355;
    font-weight: 400;
    opacity: 0.8;
}
body.theme-wabisabi #tooltip,
body.theme-wabisabi .info-popup {
    background: #faf8f5;
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 2px;
    color: #4a4a4a;
    box-shadow: 0 4px 20px rgba(139, 115, 85, 0.1);
}
body.theme-wabisabi .info-icon {
    background: #faf8f5;
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 50%;
    color: #8b7355;
}
body.theme-wabisabi .theme-picker-toggle,
body.theme-wabisabi .export-button {
    border: 1px solid rgba(139, 115, 85, 0.3);
    background: #faf8f5;
}
body.theme-wabisabi .key-item {
    color: #6b6b6b;
}
body.theme-wabisabi .time-travel-container {
    border-radius: 2px;
    border: 1px solid rgba(139, 115, 85, 0.3);
    background: #faf8f5;
}
body.theme-wabisabi .time-travel-btn {
    border: 1px solid rgba(139, 115, 85, 0.3);
    color: #8b7355;
}
body.theme-wabisabi #timeScrubber {
    background: rgba(139, 115, 85, 0.2);
}
body.theme-wabisabi #timeScrubber::-webkit-slider-thumb {
    background: #8b7355;
    box-shadow: none;
}
body.theme-wabisabi .theme-picker-panel {
    background: #faf8f5;
}

/* --- THEME: TERMINAL --- */
body.theme-terminal {
    --bg-color: #0a0f0a;
    --text-color: #00ff00;
    --accent-color: #00ff00;
    --glow-color: #00ff00;
    --panel-bg: rgba(10, 15, 10, 0.95);
    --border-color: rgba(0, 255, 0, 0.4);
    background: #0a0f0a;
}
body.theme-terminal::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 0, 0.03) 2px,
        rgba(0, 255, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}
body.theme-terminal .huge-time {
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    text-shadow: 0 0 10px #00ff00, 0 0 20px rgba(0,255,0,0.5);
    letter-spacing: 4px;
}
body.theme-terminal .date-display {
    color: #00dd00;
    font-family: 'Courier New', monospace;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 1;
    text-shadow: 0 0 8px rgba(0,255,0,0.5);
}
body.theme-terminal #tooltip,
body.theme-terminal .info-popup {
    background: rgba(10, 15, 10, 0.98);
    border: 1px solid rgba(0, 255, 0, 0.5);
    border-radius: 0;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
}
body.theme-terminal .info-icon {
    background: rgba(10, 15, 10, 0.98);
    border: 1px solid rgba(0, 255, 0, 0.5);
    border-radius: 0;
    color: #00ff00;
}
body.theme-terminal .theme-picker-toggle,
body.theme-terminal .export-button {
    border-radius: 0;
    border: 1px solid rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}
body.theme-terminal .key-item {
    color: #00ff00;
    font-family: 'Courier New', monospace;
}
body.theme-terminal .time-travel-container {
    border-radius: 0;
    border: 1px solid rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.15);
}
body.theme-terminal .time-travel-btn {
    border-radius: 0;
    border: 1px solid rgba(0, 255, 0, 0.5);
}
body.theme-terminal #timeScrubber {
    background: rgba(0, 255, 0, 0.2);
}
body.theme-terminal #timeScrubber::-webkit-slider-thumb {
    background: #00ff00;
    box-shadow: 0 0 10px #00ff00;
    border-radius: 0;
}
body.theme-terminal .theme-picker-panel {
    font-family: 'Courier New', monospace;
}
body.theme-terminal .year-progress {
    font-family: 'Courier New', monospace;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

.theme-picker-toggle {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 44px;
    height: 44px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: pointer;
    z-index: 100;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, background 0.3s ease;
}

.theme-picker-toggle:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,0.1);
}

.export-button {
    position: absolute;
    top: 100px;
    right: 40px;
    width: 44px;
    height: 44px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: pointer;
    z-index: 100;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, background 0.3s ease;
}

.export-button:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,0.1);
}

/* Live-rings toggle: stacks below the export button, matching the FAB language.
   Dims when the live + space rings are hidden. */
.live-rings-toggle {
    position: absolute;
    top: 160px;
    right: 40px;
    width: 44px;
    height: 44px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: pointer;
    z-index: 100;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}
.live-rings-toggle:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,0.1);
}
.live-rings-toggle.dimmed { opacity: 0.4; }

/* Compact swatch popover anchored under the palette button, not a full slide-out. */
.theme-picker-panel {
    position: fixed;
    top: 88px;
    right: 30px;
    width: 300px;
    max-height: min(72vh, 560px);
    background: var(--panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0 16px 50px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-picker-panel.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.theme-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.theme-picker-header span {
    font-family: 'Tenor Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
}

.theme-picker-header i {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.theme-picker-header i:hover {
    opacity: 1;
}

.theme-thumbnails {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

/* A theme is a small disc: its background, with an accent dot at its center. */
.theme-swatch {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.theme-swatch:hover { transform: scale(1.14); }
.theme-swatch.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}
.theme-swatch-dot {
    width: 40%;
    height: 40%;
    border-radius: 50%;
}

/* Custom Scrollbar for Theme Picker */
.theme-thumbnails::-webkit-scrollbar { width: 4px; }
.theme-thumbnails::-webkit-scrollbar-track { background: transparent; }
.theme-thumbnails::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

.theme-thumb {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease;
}

.theme-thumb:hover {
    transform: translateY(-3px);
}

.theme-thumb-preview {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.theme-thumb.active .theme-thumb-preview {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px var(--accent-color);
}

.theme-thumb-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    opacity: 0.7;
}

.theme-thumb.active .theme-thumb-label {
    opacity: 1;
    color: var(--accent-color);
}

/* Mini Clock Preview in Thumbnails */
.mini-clock {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    border: 4px solid currentColor;
    opacity: 0.6;
    position: relative;
}

.mini-clock::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    background: currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.time-travel-container {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
    border-radius: 8px;
}

/* Desktop only: center the timeline and cap its width so it stops spanning the
   whole bottom edge and colliding with the info button. Tablet/mobile keep
   their own layouts (max-width rules below). */
@media (min-width: 1025px) {
    /* Desktop: collapse the timeline behind a small clock toggle (bottom-center).
       At rest the scrubber is gone; tap the toggle to reveal it above the icon. */
    .time-travel-toggle {
        display: flex;
        top: auto; right: auto;
        bottom: 30px; left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 40px;
    }
    .time-travel-container {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 160px));
        bottom: 84px;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    body.tt-open .time-travel-container {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}

/* Collapsed time-travel trigger. Hidden on desktop (the bar shows there);
   revealed as a corner FAB on phones so the timeline isn't always present. */
.time-travel-toggle {
    position: fixed;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    backdrop-filter: blur(10px);
    color: var(--text-color);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.time-travel-toggle:hover { opacity: 0.9; }
body.tt-open .time-travel-toggle { opacity: 0.9; color: var(--accent-color); }

.time-travel-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.time-travel-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.time-travel-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.1);
    transform: scale(1.1);
}

.time-travel-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    opacity: 1;
}

.time-travel-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-color);
    opacity: 0.6;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
}

#timeScrubber {
    flex-grow: 1;
    cursor: pointer;
    accent-color: var(--accent-color);
    height: 4px;
    background: rgba(255,255,255,0.15);
    appearance: none;
    -webkit-appearance: none;
    border-radius: 2px;
}

#timeScrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent-color);
}

#timeScrubber::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    border: none;
}

.zoom-display {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-color);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 20px;
    z-index: 100;
    backdrop-filter: blur(10px);
    cursor: help;
    transition: opacity 0.3s ease;
}

/* Only show the magnifier readout once actually zoomed; the permanent
   "FULL VIEW" pill was clutter and collided with the theme button. */
.zoom-display.zoomed { opacity: 0.5; pointer-events: auto; }

.zoom-display.zoomed:hover {
    opacity: 0.8;
}

/* ========================================
   MOBILE STYLES
   ======================================== */

/* Tablet breakpoint */
@media (max-width: 1024px) {
    .huge-time { font-size: 56px; }
    .date-display { font-size: 20px; }
    .time-display { top: 30px; left: 30px; }
    .theme-picker-toggle { top: 30px; right: 30px; }
    .export-button { top: 90px; right: 30px; }
    .legend-key { bottom: 90px; left: 20px; }
    .time-travel-container { left: 20px; right: 20px; }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    /* Typography */
    .huge-time {
        font-size: 36px;
        letter-spacing: -0.5px;
    }
    body.theme-swiss-poster .huge-time { font-size: 36px; }
    body.theme-brutalist .huge-time { letter-spacing: 4px; }
    body.theme-artdeco .huge-time { letter-spacing: 2px; }

    .date-display {
        font-size: 14px;
        margin-top: 8px;
    }

    /* The 4-decimal year-progress readout is noise on a small screen. */
    .year-progress { display: none; }

    /* Time display - centered at top */
    .time-display {
        top: 15px;
        left: 15px;
        right: 15px;
        text-align: center;
    }

    /* Center the summary box itself (text-align only centers its contents). */
    .now-summary {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 12px;
    }

    /* Theme selector */
    /* Theme picker button - bottom left */
    .theme-picker-toggle {
        top: auto;
        bottom: 25px;
        left: 25px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Export + live-rings toggle hidden on phones (top-right is the HUD's). */
    .export-button,
    .live-rings-toggle {
        display: none;
    }

    /* Time travel collapses behind a center FAB; the bar slides up when opened
       so the timeline isn't present constantly. */
    .time-travel-toggle {
        display: flex;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .time-travel-container {
        left: 15px;
        right: 15px;
        bottom: 80px;
        padding: 10px 12px;
        gap: 8px;
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    body.tt-open .time-travel-container {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .time-travel-controls {
        gap: 6px;
    }

    .time-travel-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .time-travel-label {
        min-width: 60px;
        font-size: 9px;
    }

    #timeScrubber {
        height: 6px;
    }

    #timeScrubber::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }

    /* Theme picker panel - full screen on mobile */
    /* Phones: the palette button sits bottom-left, so drop the popover as a
       bottom sheet rather than a top-right anchor. */
    .theme-picker-panel {
        top: auto;
        bottom: 84px;
        left: 15px;
        right: 15px;
        width: auto;
        max-height: 56vh;
        padding: 16px;
        transform-origin: bottom center;
        transform: translateY(10px) scale(0.98);
    }
    .theme-thumbnails { grid-template-columns: repeat(5, 1fr); }

    .theme-thumbnails {
        gap: 12px;
    }

    .theme-thumb-preview {
        border-radius: 8px;
    }

    /* Legend - hidden on mobile */
    .legend-key {
        display: none;
    }

    /* Info popup and icon */
    .info-popup {
        bottom: 70px;
        right: 15px;
        left: 15px;
        min-width: auto;
        padding: 12px 16px;
    }

    .info-icon {
        bottom: 25px;
        right: 25px;
        width: 32px;
        height: 32px;
    }

    /* Zoom display — hidden on phones: scroll-to-zoom needs a wheel, so the pill
       is permanently "FULL VIEW" clutter that overlaps the time readout. */
    .zoom-display {
        display: none;
    }

    /* Tooltip - fixed at bottom on mobile */
    #tooltip {
        max-width: none;
        padding: 12px 16px;
        border-radius: 8px;
    }

    #tooltip h3 {
        font-size: 12px;
        margin-bottom: 6px;
        padding-bottom: 4px;
    }

    #tooltip .content {
        font-size: 11px;
    }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
    .huge-time {
        font-size: 28px;
    }
    body.theme-swiss-poster .huge-time { font-size: 28px; }

    .date-display {
        font-size: 12px;
    }

    .year-progress {
        font-size: 7px;
    }

    .time-display {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .time-travel-container {
        left: 10px;
        right: 10px;
        bottom: 70px;
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .time-travel-controls {
        order: 1;
    }

    .time-travel-label {
        order: 2;
        min-width: 50px;
    }

    #timeScrubber {
        order: 3;
        width: 100%;
        flex-basis: 100%;
        margin-top: 4px;
    }

    .time-travel-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .theme-picker-toggle,
    .info-icon {
        width: 36px;
        height: 36px;
        bottom: 20px;
    }

    .theme-picker-toggle {
        left: 15px;
    }

    .info-icon {
        right: 15px;
    }

    .info-popup {
        left: 10px;
        right: 10px;
        bottom: 65px;
    }

    .zoom-display {
        top: 10px;
        right: 10px;
        padding: 4px 8px;
        font-size: 7px;
    }

    /* Theme picker adjustments for small screens */
    .theme-picker-panel {
        padding: 15px;
    }

    .theme-picker-header span {
        font-size: 14px;
    }

    .theme-thumbnails {
        gap: 10px;
    }

    .theme-thumb-label {
        font-size: 8px;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .time-display {
        top: 10px;
        left: 10px;
        text-align: left;
    }

    .huge-time {
        font-size: 32px;
    }

    .date-display {
        font-size: 12px;
    }

    .time-travel-container {
        bottom: 10px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 60%;
        max-width: 400px;
    }

    .theme-picker-toggle {
        top: 10px;
        bottom: auto;
        right: 10px;
        left: auto;
    }

    .info-icon {
        bottom: 10px;
        right: 10px;
    }

    .zoom-display {
        top: 10px;
        right: 60px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    .theme-picker-toggle,
    .export-button,
    .info-icon,
    .time-travel-toggle,
    .time-travel-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .theme-thumb {
        min-height: 80px;
    }

    #timeScrubber::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

}

/* Notch / home-indicator safe areas: nudge the fixed chrome clear of insets
   on devices that report them (no effect where insets are 0). */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .time-display {
            top: calc(15px + env(safe-area-inset-top));
            left: calc(15px + env(safe-area-inset-left));
            right: calc(15px + env(safe-area-inset-right));
        }
        .theme-picker-toggle {
            bottom: calc(25px + env(safe-area-inset-bottom));
            left: calc(25px + env(safe-area-inset-left));
        }
        .info-icon {
            bottom: calc(25px + env(safe-area-inset-bottom));
            right: calc(25px + env(safe-area-inset-right));
        }
        .time-travel-container {
            bottom: calc(80px + env(safe-area-inset-bottom));
        }
        .zoom-display {
            top: calc(15px + env(safe-area-inset-top));
            right: calc(15px + env(safe-area-inset-right));
        }
    }
    @media (max-width: 768px) and (orientation: landscape) {
        .time-display {
            top: calc(10px + env(safe-area-inset-top));
            left: calc(10px + env(safe-area-inset-left));
        }
        .theme-picker-toggle {
            top: calc(10px + env(safe-area-inset-top));
            right: calc(10px + env(safe-area-inset-right));
            bottom: auto;
            left: auto;
        }
        .info-icon {
            bottom: calc(10px + env(safe-area-inset-bottom));
            right: calc(10px + env(safe-area-inset-right));
        }
    }
}

/* Short viewports (landscape phones). These are WIDER than 768px, so they miss
   every max-width breakpoint and inherit the desktop layout crammed into ~390px
   of height: the legend, export button, zoom pill and corner controls then pile
   onto the slider bar. Keying off height gives them a genuine compact layout.
   This block is intentionally LAST so it wins over the @supports landscape rules
   above; safe-area insets are folded in here via env() with 0px fallbacks. */
@media (max-height: 520px) {
    .legend-key { display: none; }
    .zoom-display { display: none; }
    .export-button { display: none; }
    .cosmic-summary { display: none; } /* HUD is tight in landscape; skip the note */

    .time-display {
        top: calc(8px + env(safe-area-inset-top, 0px));
        left: calc(12px + env(safe-area-inset-left, 0px));
        right: auto;
        text-align: left;
    }
    .huge-time { font-size: 30px; letter-spacing: -0.5px; }
    .date-display { font-size: 12px; margin-top: 4px; }
    .year-progress { display: none; }
    .now-summary { margin-top: 8px; max-width: 230px; margin-left: 0; margin-right: 0; }
    .now-summary #now-meta { font-size: 11px; }
    .now-summary #next-event { font-size: 10px; }

    /* Landscape has horizontal room, so keep the compact bar always visible and
       drop the collapse FAB (which the portrait block introduces). */
    .time-travel-toggle { display: none; }

    /* Bottom bar: centered and width-limited so the corner buttons stay clear. */
    .time-travel-container,
    body.tt-open .time-travel-container {
        left: 50%; right: auto;
        transform: translateX(-50%);
        width: min(64%, 420px);
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 8px 12px; gap: 8px;
        opacity: 1;
        pointer-events: auto;
    }
    .theme-picker-toggle {
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: calc(12px + env(safe-area-inset-left, 0px));
        right: auto;
        width: 40px; height: 40px; font-size: 16px;
    }
    .info-icon {
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        left: auto;
    }
}

/* ---- Ring guide overlay (first-run onboarding + reopenable reference) ----
   Theme-neutral dark glass so it reads on all 29 themes. Built by app.js from
   the rings array, so the colour dots match the active theme. */
.guide-overlay {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 18, 0.72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 0.3s ease;
}
.guide-overlay.visible { opacity: 1; }
.guide-overlay[hidden] { display: none; }
.guide-card {
    position: relative;
    width: min(440px, 100%);
    max-height: min(82vh, 660px);
    overflow-y: auto;
    background: rgba(10, 16, 30, 0.97);
    border: 1px solid rgba(120, 180, 230, 0.22);
    border-radius: 16px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
    padding: 28px 26px 22px;
    color: #e8f0fb;
    font-family: 'Montserrat', sans-serif;
}
.guide-close {
    position: absolute; top: 12px; right: 14px;
    width: 40px; height: 40px;
    background: none; border: none; color: #8fa6c4;
    font-size: 26px; line-height: 1; cursor: pointer;
}
.guide-close:hover { color: #e8f0fb; }
.guide-title {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: 400; font-size: 26px; letter-spacing: 0.5px; margin: 0 0 10px;
}
.guide-intro { font-size: 13px; line-height: 1.55; color: #aebfd6; margin: 0 0 18px; }
.guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guide-list li { display: flex; gap: 11px; align-items: flex-start; }
.guide-dot { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 6px rgba(255,255,255,0.18); }
.guide-text { display: flex; flex-direction: column; gap: 2px; }
.guide-name { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #cdd9ec; font-weight: 600; }
.guide-desc { font-size: 12px; line-height: 1.45; color: #93a6c2; }
.guide-foot {
    display: flex; gap: 18px; justify-content: center;
    margin-top: 20px; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px; letter-spacing: 0.5px;
}
.guide-foot a { color: #8fb6e6; text-decoration: none; }
.guide-foot a:hover { color: #cfe2ff; }
@media (max-width: 480px) {
    .guide-card { padding: 24px 20px 18px; border-radius: 14px; }
    .guide-title { font-size: 23px; }
}

/* Desktop time-travel toggle: must come after the base `display:none` rule
   (source order) to actually show on wide screens. Bottom-center; the scrubber
   reveals above it on tap. */
@media (min-width: 1025px) {
    .time-travel-toggle {
        display: flex;
        top: auto; right: auto;
        bottom: 30px; left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 40px;
    }
}