:root {
    --bg-color: #fdfcf8;
    --surface-color: #ffffff;
    --surface-light: #f7f5ef;
    --text-primary: #1d3153;
    --text-secondary: #4a6491;
    --accent-color: #26456b;
    --success-color: #1a6b47;
    --error-color: #dc3545;
    --border-color: rgba(47, 74, 114, 0.2);
    
    --card-bg: #ffffff;
    --card-border: 2px solid rgba(47, 74, 114, 0.15);
    --card-shadow: 0 4px 12px rgba(47, 74, 114, 0.08);
    --card-border-radius: 8px;
    --active-card-border: 2px solid #2f4a72;
    --body-bg-image: none;
    
    --game-container-bg: transparent;
    --game-container-border: none;
    --game-container-shadow: none;
    
    --timeline-line-color: rgba(47, 74, 114, 0.2);
    --timeline-dot-color: #2f4a72;
    
    --drop-target-border: 2px dashed rgba(47, 74, 114, 0.3);
    --drop-target-bg: rgba(47, 74, 114, 0.05);
    --drop-target-active-bg: rgba(47, 74, 114, 0.15);
    
    --primary-btn: #26456b;
    --primary-btn-hover: #33578a;
    --primary-btn-text: #ffffff;
    
    --modal-overlay: rgba(29, 49, 83, 0.6);
    --modal-bg: #fdfcf8;
    --modal-border: 1px solid rgba(47, 74, 114, 0.2);
    
    --font-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    --transition-snappy: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The site stylesheet scrolls the page smoothly, but dragging a card nudges
   the page a few pixels every frame near the top or bottom, and animating
   each nudge left the page lagging behind the card and the slot highlight
   lagging behind the page. The original Timeline had no smooth scrolling. */
html { scroll-behavior: auto; }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    background-image: var(--body-bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
}

input {
    user-select: auto;
    -webkit-user-select: auto;
}

/* Typography Utilities */
.serif-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
}

.logo {
    display: flex;
    overflow: hidden;
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.logo .letter {
    display: inline-block;
    transform: translateX(20px);
    opacity: 0;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    padding: 0.25rem;
    transition: transform 0.2s;
}

.icon-btn:active {
    transform: scale(0.9);
}

/* Main Layout */
.game-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
    width: 92%;
    background: var(--game-container-bg);
    border: var(--game-container-border);
    border-radius: 20px;
    box-shadow: var(--game-container-shadow);
}

.category-display {
    text-align: center;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeIn 1s ease forwards 1s; /* fade in after logo */
}

.category-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    font-weight: 700;
}

#category-name {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text-primary);
    margin-top: 0.25rem;
}

/* Timeline */
.timeline-area {
    position: relative;
    padding: 1rem 0 6rem; /* Extra bottom padding so users can scroll the bottom card up */
}

.timeline-area::-webkit-scrollbar {
    display: none;
}

.timeline {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
    background: #1c2b3b;
    z-index: 0;
}

/* Finished for the day: no drop targets, so the timeline ends with its last
   card instead of trailing a line into empty space. */
.timeline-area.is-complete {
    padding-bottom: 1rem;
}
.timeline-area.is-complete .timeline-card:last-child {
    margin-bottom: 0;
}

/* Drop Targets for Timeline */
.drop-target {
    height: 2rem;
    margin: -1rem auto;
    width: 90%;
    max-width: 350px;
    z-index: 10;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.drop-target.has-card {
    height: auto;
    padding: 1rem 0;
    margin: 0 auto;
}
.drop-target.active-hover {
    height: 120px;
    background: rgba(90, 139, 184, 0.1);
    border: 1px dashed #5a8bb8;
    box-shadow: inset 0 0 15px rgba(90, 139, 184, 0.2);
}

/* Cards (3D Flips) */
.timeline-card {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 350px;
    margin: 0 auto 1.5rem auto;
    perspective: 1000px;
    cursor: grab;
}

.card-inner {
    position: relative;
    width: 100%;
    min-height: 100px;
    text-align: center;
    transition: transform 0.6s var(--transition-snappy);
    transform-style: preserve-3d;
    display: grid;
}

.timeline-card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    grid-area: 1 / 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: var(--card-border-radius);
    background: var(--card-bg);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
}

.card-front {
    /* Event text side */
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    justify-content: center;
    color: var(--text-primary);
}
.card-front.correct {
    border-color: var(--success-color);
}
.card-back.wrong, .card-front.wrong {
    border-color: var(--error-color);
}

.card-back.wrong-permanent {
    border-color: var(--error-color) !important;
}

.card-back {
    /* Year side */
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}
.card-back .year {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-color);
}
.card-back .event-text {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: center;
    font-weight: 400;
    color: var(--text-primary);
}
.card-back.correct-year .year {
    color: var(--success-color);
}
.card-back.incorrect-year .year {
    color: var(--error-color);
}

/* Active Card Area */
.active-card-area {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 20;
}

.deck-counter {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.active-card-container {
    width: 100%;
    min-height: 120px;
    position: relative;
    perspective: 1000px;
}

.active-card-container.game-over {
    height: auto;
    min-height: 0;
    padding-bottom: 0.5rem;
}

.active-card {
    width: 90%;
    max-width: 350px;
    min-height: 100px;
    background: var(--card-bg);
    border: var(--active-card-border);
    border-radius: var(--card-border-radius);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    cursor: grab;
    box-shadow: 0 0 20px rgba(90, 139, 184, 0.4), 0 8px 30px rgba(0,0,0,0.6);
    touch-action: none;
    z-index: 100;
    transition: box-shadow 0.2s, transform 0.2s;
    margin: 0 auto;
}

.active-card:active {
    cursor: grabbing;
    transform: scale(1.02);
}

.active-card.dragging {
    opacity: 0.95;
    box-shadow: 0 0 30px rgba(90, 139, 184, 0.6), 0 15px 40px rgba(0,0,0,0.7);
    position: fixed;
    pointer-events: none;
    margin: 0 auto !important;
}

/* Controls */
#confirm-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 200;
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: 0.5rem;
}

@keyframes slideUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#confirm-container.hidden {
    display: none;
}

.primary-btn {
    background: var(--text-primary);
    color: var(--bg-color);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 2rem;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    width: 100%;
    max-width: 300px;
}

.primary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.primary-btn:not(:disabled):active {
    transform: scale(0.97);
}

.secondary-btn {
    background: var(--surface-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.2s;
}

.secondary-btn:active {
    background: var(--border-color);
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal {
    background: var(--modal-bg);
    border: var(--modal-border);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    width: 90%;
    max-width: 440px;
    position: fixed;
    top: 5vh; left: 50%;
    transform: translateX(-50%) scale(1);
    z-index: 1000;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
    /* `top` is animated too, so the keyboard-lift shift below glides instead
       of snapping between two positions. */
    transition: transform 0.3s var(--transition-snappy), top 0.3s var(--transition-snappy), opacity 0.3s;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
}

.modal.hidden {
    transform: translateX(-50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
}

.modal-title {
    font-family: var(--font-sans);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
}

.score-circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.score-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid transparent;
    background: linear-gradient(var(--surface-color), var(--surface-color)) padding-box,
                linear-gradient(135deg, #38bdf8, #fbbf24) border-box;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.4), inset 0 0 20px rgba(56, 189, 248, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-circle span {
    font-family: var(--font-sans);
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.time-stat {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-secondary);
}

.section-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0.5rem 0.5rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.5rem;
}

.modal-btn {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 2rem;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
    width: 100%;
    text-align: center;
}

.modal-btn.primary {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: 1px solid #38bdf8;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.5);
}

.modal-btn.primary:active {
    transform: scale(0.97);
}

.modal-btn.outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.modal-btn.outline:active:not(:disabled) {
    background: rgba(255,255,255,0.05);
}

.modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.modal input {
    width: 100%;
    padding: 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    outline: none;
}
.modal input:focus {
    border-color: var(--text-primary);
}

.setting-group {
    margin-bottom: 1.5rem;
}

.setting-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.results {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 1.25rem;
}

.leaderboard-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(128,128,128,0.05);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-primary);
}

.leaderboard-item .left-col {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.leaderboard-item .rank {
    width: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.leaderboard-item .right-col {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.leaderboard-item.is-me {
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
}

.leaderboard-item.is-me strong {
    color: var(--accent-color);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideLetters {
    to { transform: translateX(0); opacity: 1; }
}

/* Animating card sliding into position correctly */
.animating-slide {
    transition: transform 0.8s var(--transition-snappy) !important;
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: var(--text-primary);
    color: var(--bg-color);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s var(--transition-snappy), opacity 0.3s;
}

.toast.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}

/* The site-wide update toast (js/ui.js) shares the .toast class name but is
   hidden by an off-screen transform, not .hidden. The rule above would pin it
   on screen, so restore its own open/closed states here. */
#update-toast {
    transform: translate(-50%, 200%);
    z-index: 10000;
}
#update-toast[data-open="true"] {
    transform: translate(-50%, 0);
}

.input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.input-row input {
    flex: 1;
}
.icon-action-btn {
    background: var(--surface-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.icon-action-btn:hover {
    background: var(--border-color);
}
/* Lift the modal above the on-screen keyboard, but only on touch devices.
   On a mouse/desktop this fired on every field focus (and again on blur,
   300ms later), so the dialog bounced up and down whenever you used it. */
@media (pointer: coarse) {
    .modal.keyboard-up {
        top: 10px !important;
        transform: translateX(-50%) scale(1) !important;
    }
}

/* =========================================
   THEMES
   ========================================= */

/* The default theme, The Seasons, is the :root token set above sitting on
   the site's seasonal backdrop. Glass Light is that same token set on the
   flat off-white page Timeline started with; css/themes.css turns the
   seasonal wash and particles off for it, so nothing else is needed here
   beyond a page colour that matches. */
html.theme-glass-light {
    --bg-color: #f7f9fc;
    --surface-light: #eef4ff;
}

html.theme-elegant-dark {
    --bg-color: #1a1512;
    --surface-color: #241b15;
    --surface-light: #2f231b;
    --border-color: #4a382b;
    --body-bg-image: url('./images/bg_elegant_dark.jpg');
    --text-primary: #e8dcc5;
    --text-secondary: #a39581;
    --accent-color: #f2e2aa;
    --card-bg: rgba(58, 44, 32, 0.9);
    --card-border: 2px solid #b89947;
    --card-border-radius: 4px;
    --card-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
    --active-card-border: 2px dashed #b89947;
    --game-container-bg: rgba(26, 21, 18, 0.85);
    --game-container-border: 1px solid #4a382b;
    --game-container-shadow: none;
    --modal-bg: var(--surface-color);
    --modal-border: 1px solid var(--border-color);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html.theme-elegant-dark .timeline-card:nth-child(even) .card-front,
html.theme-elegant-dark .timeline-card:nth-child(even) .card-back {
    background: rgba(44, 58, 32, 0.9);
    border-color: #7b8e5c;
}
html.theme-elegant-dark .timeline-card:nth-child(3n) .card-front,
html.theme-elegant-dark .timeline-card:nth-child(3n) .card-back {
    background: rgba(58, 32, 32, 0.9);
    border-color: #8e5c5c;
}

html.theme-elegant-light {
    --bg-color: #fbf8f1;
    --surface-color: #f0e8d9;
    --surface-light: #e4d8c3;
    --border-color: #d4c5b0;
    --body-bg-image: url('./images/bg_elegant_light.jpg');
    --text-primary: #3e3328;
    --text-secondary: #8a7a69;
    --accent-color: #1a1512;
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: 1px solid #d4c5b0;
    --card-border-radius: 8px;
    --card-shadow: 0 4px 15px rgba(212, 197, 176, 0.4);
    --active-card-border: 2px dashed #b89947;
    --game-container-bg: rgba(251, 248, 241, 0.85);
    --game-container-border: 1px solid #d4c5b0;
    --game-container-shadow: none;
    --modal-bg: var(--surface-color);
    --modal-border: 1px solid var(--border-color);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html.theme-elegant-light .card-front::before,
html.theme-elegant-light .card-back::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    border: 1px solid rgba(184, 153, 71, 0.3);
    border-radius: 4px;
    pointer-events: none;
}

html.theme-steampunk {
    --bg-color: #211c19;
    --surface-color: #2b2521;
    --surface-light: #362e29;
    --border-color: #4d3928;
    --body-bg-image: url('./images/bg_steampunk.jpg');
    --text-primary: #d1bfae;
    --text-secondary: #8c7e73;
    --accent-color: #e6a86c;
    --card-bg: linear-gradient(to bottom, rgba(74, 51, 32, 0.95), rgba(45, 28, 16, 0.95));
    --card-border: 3px solid #b36e3c;
    --card-border-radius: 2px;
    --card-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.5);
    --active-card-border: 2px dashed #b36e3c;
    --game-container-bg: rgba(33, 28, 25, 0.85);
    --game-container-border: 1px solid #4d3928;
    --game-container-shadow: none;
    --modal-bg: var(--surface-color);
    --modal-border: 1px solid var(--border-color);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
html.theme-steampunk .card-front::after,
html.theme-steampunk .card-back::after {
    content: '⚙';
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 24px;
    color: #b36e3c;
    text-shadow: 1px 1px 2px #000;
}
html.theme-steampunk .card-back {
    border-bottom: 1px dashed #b36e3c;
}

/* Classic: Timeline as it first looked on timeline-74i.pages.dev — the
   Glass Dark theme, in its own faces, Cormorant Garamond and Inter, served
   from this site (css/fonts.css). */
html.theme-classic {
    --bg-color: #080b10;
    --surface-color: #121822;
    --surface-light: #1d2d3e;
    --border-color: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-color: #e2e8f0;
    --success-color: #10b981;
    --error-color: #ef4444;
    --card-bg: linear-gradient(180deg, #1d2d3e 0%, #0d151e 100%);
    --card-border: 1px solid #2d455f;
    --card-shadow: 0 6px 20px rgba(0,0,0,0.5);
    --card-border-radius: 12px;
    --active-card-border: 1px solid #5a8bb8;
    --game-container-bg: linear-gradient(180deg, #101623 0%, #0b0f17 100%);
    --game-container-border: 1px solid #1c2636;
    --game-container-shadow: 0 10px 30px rgba(0,0,0,0.5);
    --timeline-line-color: #2d455f;
    --timeline-dot-color: #5a8bb8;
    --drop-target-border: 1px dashed #5a8bb8;
    --drop-target-bg: rgba(90, 139, 184, 0.08);
    --drop-target-active-bg: rgba(90, 139, 184, 0.2);
    --primary-btn: #1d2d3e;
    --primary-btn-hover: #2d455f;
    --primary-btn-text: #f8fafc;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-bg: linear-gradient(180deg, #1d222b 0%, #10141a 100%);
    --modal-border: 1px solid #2d3748;
    --font-serif: 'Cormorant Garamond', var(--font-display);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html.theme-classic .timeline-line { background: #2d455f; }

/* Wordle: white page, near-black type, grey borders, green and yellow. */
html.theme-wordle {
    --bg-color: #ffffff;
    --surface-color: #ffffff;
    --surface-light: #f6f7f8;
    --border-color: #d3d6da;
    --text-primary: #1a1a1b;
    --text-secondary: #787c7e;
    --accent-color: #6aaa64;
    --success-color: #6aaa64;
    --card-bg: #ffffff;
    --card-border: 2px solid #d3d6da;
    --card-border-radius: 0px;
    --card-shadow: none;
    --active-card-border: 2px solid #6aaa64;
    --game-container-bg: transparent;
    --game-container-border: none;
    --game-container-shadow: none;
    --timeline-line-color: #d3d6da;
    --timeline-dot-color: #c9b458;
    --drop-target-border: 2px dashed #787c7e;
    --drop-target-bg: rgba(211, 214, 218, 0.3);
    --drop-target-active-bg: rgba(106, 170, 100, 0.2);
    --primary-btn: #6aaa64;
    --primary-btn-hover: #5c9a56;
    --primary-btn-text: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: #ffffff;
    --modal-border: 1px solid #d3d6da;
    --font-sans: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html.theme-wordle .timeline-line { background: #d3d6da; }
html.theme-wordle .timeline-card .card-front,
html.theme-wordle .timeline-card .card-back { font-weight: 600; }

/* Botanical Sketchbook: parchment, brown ink, Georgia, sage and mustard. */
html.theme-botanical {
    --bg-color: #f4ecd8;
    --surface-color: #ebdcb8;
    --surface-light: #f4ecd8;
    --border-color: #bda881;
    --text-primary: #3b2f2f;
    --text-secondary: #7a6a5a;
    --accent-color: #6b7a58;
    --success-color: #6b7a58;
    --card-bg: #fbf6ea;
    --card-border: 1px solid #bda881;
    --card-border-radius: 2px;
    --card-shadow: 0 3px 10px rgba(59, 47, 47, 0.15);
    --active-card-border: 2px dashed #8b9c73;
    --game-container-bg: transparent;
    --game-container-border: none;
    --game-container-shadow: none;
    --timeline-line-color: #bda881;
    --timeline-dot-color: #d4b35e;
    --drop-target-border: 2px dashed #bda881;
    --drop-target-bg: rgba(217, 194, 152, 0.25);
    --drop-target-active-bg: rgba(139, 156, 115, 0.25);
    --primary-btn: #8b9c73;
    --primary-btn-hover: #7a8a63;
    --primary-btn-text: #fbf6ea;
    --modal-overlay: rgba(59, 47, 47, 0.55);
    --modal-bg: #f4ecd8;
    --modal-border: 1px solid #bda881;
    --font-sans: Georgia, "Times New Roman", serif;
    --font-serif: Georgia, "Times New Roman", serif;
}
html.theme-botanical .timeline-line { background: #bda881; }
html.theme-botanical .card-front::before,
html.theme-botanical .card-back::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    border: 1px solid rgba(189, 168, 129, 0.5);
    border-radius: 2px;
    pointer-events: none;
}

html.theme-new-yorker {
    --bg-color: #171b26;
    --surface-color: #f7f3ec;
    --surface-light: #ece7dc;
    --border-color: #2b2b2b;
    --body-bg-image: url('./images/bg_new_yorker_dark.jpg');
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --accent-color: #d1b46a;
    --card-bg: rgba(244, 227, 169, 0.95);
    --card-border: 2px solid #2b2b2b;
    --card-border-radius: 12px;
    --card-shadow: 0 4px 6px rgba(0,0,0,0.4);
    --active-card-border: 2px dashed #2b2b2b;
    --game-container-bg: url('./images/bg_new_yorker_paper.jpg');
    --game-container-border: 1px solid #2b2b2b;
    --game-container-shadow: 0 8px 30px rgba(0,0,0,0.5);
    --modal-bg: var(--surface-color);
    --modal-border: 2px solid var(--border-color);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

html.theme-new-yorker .app-header {
    background: var(--surface-color);
    border-bottom: 2px solid var(--border-color);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

@font-face {
    font-family: 'NewYorker';
    src: url('/fonts/NewYorker.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html.theme-new-yorker .app-header .logo {
    font-family: 'NewYorker', var(--font-sans);
    letter-spacing: 2px;
    font-weight: normal;
    font-size: 1.5rem;
}

html.theme-new-yorker .category-display {
    background: url('/images/bg_new_yorker_paper.jpg') center/cover;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
}

html.theme-new-yorker #next-countdown {
    display: inline-block;
    background: url('/images/bg_ny_ribbon_wide.jpg') center/100% 100% no-repeat;
    mix-blend-mode: multiply;
    padding: 15px 45px;
    margin-top: 10px;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 250px;
}

html.theme-new-yorker #category-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2rem;
}

html.theme-new-yorker .timeline-card .card-front,
html.theme-new-yorker .timeline-card .card-back {
    border-radius: 12px;
    position: relative;
    border: var(--card-border);
}

html.theme-new-yorker .timeline-card .card-front::before,
html.theme-new-yorker .timeline-card .card-front::after,
html.theme-new-yorker .timeline-card .card-back::before,
html.theme-new-yorker .timeline-card .card-back::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 16px;
    background: #d4a373;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    top: 50%;
    transform: translateY(-50%);
}

html.theme-new-yorker .timeline-card .card-front::before,
html.theme-new-yorker .timeline-card .card-back::before {
    left: -10px;
}

html.theme-new-yorker .timeline-card .card-front::after,
html.theme-new-yorker .timeline-card .card-back::after {
    right: -10px;
}

html.theme-new-yorker .timeline-card:nth-child(4n+1) .card-front,
html.theme-new-yorker .timeline-card:nth-child(4n+1) .card-back {
    background: rgba(244, 227, 169, 0.95);
}
html.theme-new-yorker .timeline-card:nth-child(4n+2) .card-front,
html.theme-new-yorker .timeline-card:nth-child(4n+2) .card-back {
    background: rgba(239, 186, 192, 0.95);
}
html.theme-new-yorker .timeline-card:nth-child(4n+3) .card-front,
html.theme-new-yorker .timeline-card:nth-child(4n+3) .card-back {
    background: rgba(181, 218, 227, 0.95);
}
html.theme-new-yorker .timeline-card:nth-child(4n+4) .card-front,
html.theme-new-yorker .timeline-card:nth-child(4n+4) .card-back {
    background: rgba(181, 227, 203, 0.95);
}

html.theme-new-yorker .timeline-line {
    background: var(--border-color);
    width: 2px;
}

html.theme-new-yorker .primary-btn {
    border-radius: 20px;
    border: 2px solid var(--border-color);
    background: rgba(244, 227, 169, 0.95);
    color: var(--text-primary);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

html.theme-new-yorker .icon-btn svg {
    opacity: 0;
}
html.theme-new-yorker #dashboard-btn {
    background: url('./images/icon_ny_compass.jpg') center/cover no-repeat;
    mix-blend-mode: multiply;
}
html.theme-new-yorker #about-btn {
    background: url('./images/icon_ny_info.jpg') center/cover no-repeat;
    mix-blend-mode: multiply;
}
html.theme-new-yorker #settings-btn {
    background: url('./images/icon_ny_gear.jpg') center/cover no-repeat;
    mix-blend-mode: multiply;
}

/* --- Dashboard & Custom Calendar --- */
#dashboard-modal {
    background: var(--bg-color); /* Match dark background */
}

.custom-calendar-container {
    background: var(--surface-color); /* A bit lighter than bg, like #1e222d */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 320px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.calendar-header .icon-btn {
    color: var(--text-primary);
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 10px;
}

.calendar-weekdays span {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 600;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 4px;
}

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition-snappy);
    border: 1px solid transparent;
}

.calendar-day:hover:not(.empty) {
    background: rgba(255, 255, 255, 0.1);
}

.calendar-day.selected {
    background-color: #63b3ed; /* Flatpickr teal/blue */
    color: #fff;
    border-color: #63b3ed;
    font-weight: bold;
}

.calendar-day.today {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.calendar-day.empty {
    cursor: default;
}

/* Dashboard Puzzle Display */
.puzzle-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.puzzle-category-title {
    color: #63b3ed;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.75rem;
}

.event-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.event-item:last-child {
    border-bottom: none;
}

.event-year {
    font-weight: bold;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-right: 15px;
    min-width: 50px;
    text-align: center;
}

.event-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Dashboard Leaderboard Table */
#leaderboard-content table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

#leaderboard-content th {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    font-weight: 600;
}

#leaderboard-content td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* Offline Banner & Notice Box */
.offline-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(234, 88, 12, 0.15);
    border: 1px solid rgba(234, 88, 12, 0.4);
    color: #fdba74;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-sans);
    text-align: center;
    border-radius: 20px;
    margin: 0.5rem auto 0 auto;
    max-width: 90%;
    width: max-content;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.offline-banner.online-restored {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.offline-banner.hidden {
    display: none !important;
}

.offline-notice-box {
    background: rgba(234, 88, 12, 0.12);
    border: 1px solid rgba(234, 88, 12, 0.3);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-family: var(--font-sans);
    transition: all 0.3s ease;
}

.offline-notice-box.hidden {
    display: none !important;
}

.offline-notice-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fdba74;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.offline-notice-box p {
    color: var(--text-secondary);
    font-size: 0.825rem;
    line-height: 1.4;
    margin: 0;
}