/* Clean Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* iOS Safari: remove tap highlight flash on all interactive elements */
    -webkit-tap-highlight-color: transparent;
}

/* Accessibility: Visible keyboard focus ring with smooth glow */
:focus-visible {
    outline: 2px solid var(--accent-color, #6366f1);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4);
    border-radius: 8px;
}

/* Skip focus ring for mouse/touch interactions while keeping keyboard nav */
:focus:not(:focus-visible) {
    outline: none;
}

:root {
    /* ----------------------------------------------------------------
       Clock Face Theme Tokens (overridden per body.theme-* class)
    ---------------------------------------------------------------- */
    --clock-face-bg: #FFFDE7;
    --bezel-color: #FFA000;
    --clock-num-color: #1e293b;
    --clock-num-cardinal-color: #e53935;

    /* Hand colors (overridden per theme) */
    --hour-hand: #E53935;
    --minute-hand: #1E88E5;
    --second-hand: #FDD835;

    /* ----------------------------------------------------------------
       UI Tokens - Overhauled for high-fidelity glassmorphism
    ---------------------------------------------------------------- */
    --card-title-color: #4f46e5;
    --dashed-border: rgba(255, 255, 255, 0.15);
    --status-bg: rgba(255, 255, 255, 0.05);
    --status-border: rgba(255, 255, 255, 0.15);
    --panel-bg: rgba(255, 255, 255, 0.04);
    --badge-color: #312e81;
    --badge-bg: rgba(224, 231, 255, 0.15);
    --badge-border: rgba(199, 210, 254, 0.25);

    /* Glassmorphism Color Palette */
    --bg-gradient: linear-gradient(160deg, #e0f2fe 0%, #e8eaf6 25%, #fef3c7 50%, #fde68a 75%, #fee2e2 100%);
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.15);
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --accent-color: #4f46e5;
    --accent-hover: #4338ca;
    --success-color: #10b981;

    /* Brand */
    --primary: #5C6BC0;
    --success: #43A047;
    --warning: #FB8C00;
    --danger: #E53935;
    
    /* Typography: Modern high-legibility fonts */
    --font-family: 'Outfit', 'Fredoka', 'Nunito', sans-serif;
    
    /* Overhauled Glow Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 8px 32px rgba(99,102,241,0.10), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(99,102,241,0.08);
    
    /* Border Radius */
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 36px;
    --radius-full: 9999px;
    
    /* === NEW TOKENS === */
    /* Glassmorphism deep blur */
    --glass-blur: 6px;
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);
    --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 100%);

    /* Premium glow accents */
    --glow-indigo: 0 0 20px rgba(99,102,241,0.35), 0 0 60px rgba(99,102,241,0.10);
    --glow-gold: 0 0 20px rgba(255,183,77,0.45), 0 0 60px rgba(255,183,77,0.15);
    --glow-blue: 0 0 20px rgba(2,136,209,0.35), 0 0 60px rgba(2,136,209,0.12);
    --glow-night: 0 0 30px rgba(26,35,126,0.5), 0 0 80px rgba(13,27,42,0.3);

    /* Sky layer z-indices */
    --z-sky: -1;
    --z-clouds: -1;
    --z-content: 1;

    /* Animation durations */
    --transition-sky: 90s linear;
    --transition-celestial: 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Max width */
    --max-width: 1280px;
}

body {
    font-family: var(--font-family);
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 16px;
    overflow-x: hidden;
}

/* App Container */
.app-container {
    width: 100%;
    max-width: var(--max-width);
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* Header styling */
.app-header {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.72) 0%,
        rgba(255,255,255,0.48) 60%,
        rgba(255,255,255,0.60) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.80);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s ease;
}

.title-container {
    text-align: center;
}

/* App title upgrade */
.app-title {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    /* Premium gradient text */
    background: linear-gradient(135deg, #312e81 0%, #4338ca 40%, #6366f1 70%, #818cf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* fallback */
    filter: drop-shadow(0 2px 4px rgba(99,102,241,0.20));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hindi title in gradient as well */
.app-title .hin-title {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.app-title .divider {
    color: #a5b4fc;
    -webkit-text-fill-color: #a5b4fc;
    font-size: 1.8rem;
    filter: none;
}

.tagline {
    font-family: 'Comfortaa', 'Nunito', sans-serif;
    font-size: 0.92rem;
    color: #6366f1;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: 8px;
}

/* Status Panel */
.status-panel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.55);
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Comfortaa', 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: var(--radius-full);
    padding: 7px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.6) inset;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease, color 0.3s ease;
    color: var(--text-secondary);
}

.status-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.7) inset;
}

.status-item .icon {
    font-size: 1.1rem;
}

/* Main Layout */
.app-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 992px) {
    .app-main {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

/* Section columns */
.clock-section, .control-settings-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Glass Panels Base */
.glass-panel, .card {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.12) 100%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.30) inset,
        var(--shadow-md),
        0 0 0 1px rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    padding: 24px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.3s ease;
}

.glass-panel:hover, .card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.40) inset,
        var(--shadow-lg),
        0 0 0 1px rgba(255,255,255,0.10);
}

.card-title {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--card-title-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}



/* Clock Card specific */
.clock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 24px;
    min-height: 400px;
    position: relative;
    /* Richer glassmorphism but highly transparent */
    background: linear-gradient(135deg,
        rgba(255,255,255,0.22) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.15) 100%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid rgba(255,255,255,0.26);
    /* Glass shine top-left edge highlight */
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.35) inset,
        1px 0 0 0 rgba(255,255,255,0.15) inset,
        var(--shadow-lg),
        0 0 0 1px rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
}

/* Tooltip for dragging active hand feedback */
.clock-tooltip {
    position: absolute;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #7dd3fc;
    border: 1.5px solid rgba(56,189,248,0.55);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.30),
        0 0 0 1px rgba(56,189,248,0.08),
        0 0 16px rgba(56,189,248,0.15);
    border-radius: 14px;
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-shadow: 0 0 6px rgba(56,189,248,0.4);
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    margin-top: -12px;
    padding: 8px 16px;
}

/* Pulse animation for the pointed-to hour number */
@keyframes hourNumberPulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
    }
}

.hour-number-pulsing {
    animation: hourNumberPulse 0.3s alternate infinite ease-in-out;
    fill: #ef4444 !important;
    font-weight: 900;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

/* iOS Safari: prevent callout menu on long-press for clock interaction area */
.clock-wrapper {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,0.15))
            drop-shadow(0 4px 8px rgba(0,0,0,0.10));
    transition: filter 0.5s ease;
}

/* Phase-specific clock glow */
body.theme-day .clock-wrapper {
    filter: drop-shadow(0 12px 30px rgba(255,183,77,0.18))
            drop-shadow(0 4px 10px rgba(0,0,0,0.12));
}
body.theme-night .clock-wrapper {
    filter: drop-shadow(0 12px 35px rgba(99,102,241,0.22))
            drop-shadow(0 4px 12px rgba(0,0,0,0.30));
}

/* Hands drag styling & cursors */
.hand-group {
    cursor: pointer;
    touch-action: none;
}

/* Add active glow styling when a class "dragging" is present on hand-group */
.hand-group.dragging {
    filter:
        drop-shadow(0 0 8px currentColor)
        drop-shadow(0 0 20px currentColor)
        brightness(1.1);
    animation: dragPulse 0.5s infinite ease-in-out alternate;
    cursor: grabbing;
}

@keyframes dragPulse {
    from { filter: drop-shadow(0 0 6px currentColor) brightness(1.05); }
    to   { filter: drop-shadow(0 0 18px currentColor) drop-shadow(0 0 30px currentColor) brightness(1.15); }
}

/* Clock Legend styling */
.clock-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.legend-item {
    background: rgba(255,255,255,0.50);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: var(--radius-full);
    padding: 7px 14px;
    font-family: 'Comfortaa', 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.5) inset;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.legend-item.inactive {
    opacity: 0.38;
    background: rgba(220, 220, 220, 0.18);
    border-color: rgba(220, 220, 220, 0.25);
    box-shadow: none;
    transform: none;
}

.legend-item.inactive:hover {
    opacity: 0.60;
    transform: scale(1.03) translateY(-1px);
}

.legend-item:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.6) inset;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    flex-shrink: 0;
    display: inline-block;
}

.hour-color   { background: linear-gradient(135deg, #ef5350 0%, #E53935 100%); }
.minute-color { background: linear-gradient(135deg, #42A5F5 0%, #1E88E5 100%); }
.second-color { background: linear-gradient(135deg, #FFF176 0%, #FDD835 100%); border: 1px solid #c8a800; }

/* Digital Card specific */
.digital-container-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.digital-label {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

/* Real Digital Clock styling */
.digital-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 3rem; /* ~48px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #060d1a 0%, #0a1628 50%, #0d1f38 100%);
    border: 2px solid #1e3a5f;
    border-radius: 20px;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        inset 0 0 30px rgba(56,189,248,0.04),
        0 4px 20px rgba(0,0,0,0.25),
        0 0 0 1px rgba(56,189,248,0.08);
    padding: 18px 28px;
    color: #38bdf8; /* Sky 400 */
    margin: 16px 0;
    user-select: none;
    flex-wrap: wrap;
    position: relative;
}

/* Scanline effect — subtle depth */
.digital-display::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    pointer-events: none;
}

.digital-input, .digital-colon {
    /* Neon glow on the digits */
    text-shadow: 0 0 8px rgba(56,189,248,0.6), 0 0 20px rgba(56,189,248,0.25);
}

.digital-colon {
    text-shadow: 0 0 6px rgba(56,189,248,0.5), 0 0 16px rgba(56,189,248,0.2);
}

.digital-field-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 18px 0; /* Make room for absolute buttons */
}

.digital-input {
    font-family: 'Share Tech Mono', monospace;
    font-size: 3rem;
    width: 2ch;
    background: transparent;
    border: none;
    color: inherit;
    text-align: center;
    outline: none;
    padding: 0;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    caret-color: #38bdf8;
}

.digital-input:focus {
    background: rgba(56, 189, 248, 0.15);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4);
}

.digital-input.invalid-flash {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

.nudge-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    border: 1px solid #38bdf8;
    color: #38bdf8;
    font-size: 0.8rem;
    width: 44px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 10;
}

.nudge-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

.nudge-btn.up {
    top: -8px;
}

.nudge-btn.down {
    bottom: -8px;
}

/* Show on focus or touch */
.digital-field-container:focus-within .nudge-btn {
    opacity: 1;
    pointer-events: auto;
}

.digital-colon {
    font-size: 2.8rem;
    color: #38bdf8;
    transition: opacity 0.2s ease;
    padding-bottom: 4px;
}

.digital-colon.blinking {
    animation: colonBlink 1s infinite steps(2, start);
}

@keyframes colonBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ampm-toggle-container, .format-toggle-container {
    display: flex;
    align-items: center;
}

.ampm-btn, .format-btn {
    font-family: var(--font-family);
    font-size: 1.1rem;
    font-weight: 800;
    background: #1e293b;
    border: 2px solid #38bdf8;
    color: #38bdf8;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ampm-btn:hover, .format-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

/* Day Period Badge */
.day-period-container {
    margin-top: 4px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

.day-period-badge {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(12px);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.10),
        0 1px 0 rgba(255,255,255,0.55) inset;
    border: 1.5px solid rgba(255,255,255,0.60);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(135deg,
        rgba(224, 231, 255, 0.85) 0%,
        rgba(199, 210, 254, 0.65) 100%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--badge-color);
}

/* Settings Control Row */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--dashed-border);
}

.settings-control-row:last-child {
    border-bottom: none;
}

.control-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.toggle-btn {
    border-radius: var(--radius-full);
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(99,102,241,0.15), 0 1px 2px rgba(0,0,0,0.08);
    background: transparent;
    color: #6366f1;
    border: 2px solid #6366f1;
    cursor: pointer;
    min-height: 44px;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn.active {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 60%, #818cf8 100%);
    box-shadow: 0 4px 14px rgba(99,102,241,0.40), 0 1px 0 rgba(255,255,255,0.20) inset;
    color: white;
}

/* Bilingual Time In Words Card & Special Time Badge */
.time-in-words-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(255, 255, 255, 0.4);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-sm);
    margin-top: 12px;
}

.lang-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lang-section:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 12px;
}

.lang-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-secondary);
}

.lang-flag {
    font-size: 1.1rem;
}

.word-display {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    padding-left: 4px;
}

.word-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-left: 4px;
}

.row-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 90px;
}

.word-row.conversational .word-display {
    color: #4f46e5; /* Indigo accent */
    font-size: 1.15rem;
}

.word-row.formal .word-display {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
}

.word-row.other .word-display {
    color: #b45309; /* Warm brown/amber */
    font-style: italic;
    font-size: 1rem;
}

/* Special Time Animated Badge */
.special-time-badge {
    background: linear-gradient(135deg,
        #fef9c3 0%, #fef08a 30%, #facc15 70%, #eab308 100%);
    border: 2px solid rgba(234,179,8,0.6);
    border-radius: var(--radius-md);
    box-shadow:
        0 8px 24px rgba(234,179,8,0.30),
        0 2px 8px rgba(0,0,0,0.10),
        0 1px 0 rgba(255,255,255,0.5) inset;
    backdrop-filter: blur(8px);
    color: #78350f;
    padding: 12px 20px;
    margin-top: 16px;
    text-align: center;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    transform: translateY(20px) scale(0.9);
    opacity: 0;
    width: 100%;
}

.special-time-badge.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: badgePulse 0.6s ease-in-out 1;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.badge-title {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

.badge-subtitle {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Cards Placeholder Contents */
.card-content-placeholder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.placeholder-para {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-weight: 600;
}

.placeholder-para.hindi {
    font-weight: 500;
}

/* Footer styling */
.app-footer {
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    body {
        padding: 12px 6px;
    }
    
    .app-title {
        font-size: 1.8rem;
    }
    
    .status-panel {
        flex-direction: column;
        align-items: stretch;
    }
    
    .status-item {
        justify-content: center;
    }
    
    .digital-display {
        font-size: 2rem;
        padding: 8px 12px;
    }
    .digital-input {
        font-size: 2rem;
    }
    .digital-colon {
        font-size: 1.8rem;
    }

    /* Reduce card padding on mobile to optimize space usage */
    .glass-panel, .card {
        padding: 16px;
    }
    
    .clock-card {
        padding: 16px 12px;
        min-height: auto;
    }

    /* Wrap and stack settings controls on mobile */
    .settings-control-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 0;
    }
    
    .settings-control-row > .control-label {
        flex: 1 1 100%;
        margin-bottom: 2px;
    }
    
    .settings-control-row > .toggle-btn,
    .settings-control-row > .settings-select,
    .settings-control-row > .segmented-control,
    .settings-control-row > .custom-coordinates-inputs {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

    /* Stack bilingual word display labels on mobile to avoid horizontal squishing */
    .word-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    
    .row-label {
        min-width: unset !important;
        margin-bottom: 2px;
    }

    /* Increase height limit for quiz panel on mobile so options are fully visible without tiny scrolling */
    .quiz-panel {
        max-height: 85vh !important;
    }

    /* Hide text labels in timeline segments, leaving only emojis to prevent horizontal overflow */
    .segment-label .text-label {
        display: none !important;
    }
}

/* Control Buttons & Sync Status */
.controls-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.controls-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.control-btn {
    border-radius: var(--radius-full);
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-weight: 800;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    flex: 1;
    min-width: 140px;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                filter 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10),
                0 1px 0 rgba(255,255,255,0.25) inset;
    color: white;
}

.control-btn:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.12),
                0 1px 0 rgba(255,255,255,0.30) inset;
}

.control-btn:active {
    transform: scale(0.97) translateY(1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 3px rgba(0,0,0,0.20);
}

.play-btn {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
}
.play-btn.running {
    background: linear-gradient(135deg, #c2410c 0%, #f97316 50%, #fb923c 100%);
}
.sync-btn {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #818cf8 100%);
}

.sync-btn.loading .btn-icon {
    display: inline-block;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sync-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.4);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hands transitions */
#hour-hand, #minute-hand {
    transition: transform 0.2s ease;
}

#second-hand {
    transition: none;
}

/* Disable transitions entirely on all hands during active clock dragging */
.clock-dragging #hour-hand,
.clock-dragging #minute-hand,
.clock-dragging #second-hand,
.hand-group.dragging {
    transition: none !important;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1.5px solid rgba(56,189,248,0.5);
    border-radius: var(--radius-full);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.25),
        0 0 0 1px rgba(56,189,248,0.10),
        0 0 20px rgba(56,189,248,0.12);
    color: #7dd3fc;
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    text-shadow: 0 0 8px rgba(56,189,248,0.4);
    letter-spacing: 0.02em;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 800;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 9999;
    pointer-events: none;
    text-align: center;
}

.toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Settings Select Dropdown */
.settings-select {
    border: 1.5px solid rgba(99,102,241,0.50);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
    font-family: 'Comfortaa', 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 8px 12px;
    cursor: pointer;
    min-height: 40px;
    min-width: 140px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: #6366f1;
}

.settings-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18), 0 2px 8px rgba(0,0,0,0.06);
}

/* Segmented Control Tabs */
.segmented-control {
    display: flex;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(99,102,241,0.45);
    overflow: hidden;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.12), 0 1px 0 rgba(255,255,255,0.5) inset;
}

.segment-btn {
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #6366f1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    outline: none;
    min-height: 40px;
    flex: 1;
}

.segment-btn.active {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: white;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

.segment-btn:hover:not(.active) {
    background-color: rgba(99,102,241,0.08);
}

/* ============================================================================
   DAY/NIGHT SKY AND TIMELINE STYLES
   ============================================================================ */

/* Body Theme Classes */
/* ============================================================================
   CLOCK FACE THEMES (Section 22)
   Applied as body.theme-school / theme-space / theme-jungle / theme-ocean.
   Each theme overrides clock face, number, hand, and accent color variables.
   The day/night sky system continues running across all themes unchanged.
   ============================================================================ */

/* --- Theme 1: Classic School 🏫 (Default) --- */
body.theme-school {
    --clock-face-bg: #FFFDE7;            /* warm cream */
    --clock-num-color: #1A237E;          /* navy blue */
    --clock-num-cardinal-color: #E53935; /* red for 3/6/9/12 */
    --bezel-color: #FFA000;              /* warm gold bezel (overridden by day/night) */
    --hour-hand: #E53935;                /* red */
    --minute-hand: #1E88E5;              /* blue */
    --second-hand: #FDD835;              /* yellow */
}

/* --- Theme 2: Space 🚀 --- */
body.theme-space {
    --clock-face-bg: #0D1B3E;            /* dark navy */
    --clock-num-color: rgba(255,255,255,0.95); /* glowing white */
    --clock-num-cardinal-color: #90CAF9; /* bright blue for cardinal nums */
    --bezel-color: #5C35B5;              /* deep purple bezel */
    --hour-hand: #CFD8DC;                /* silver */
    --minute-hand: #90CAF9;              /* light blue */
    --second-hand: #E040FB;              /* neon purple */
}

/* Space theme: star-dot pattern on clock face (purely CSS) */
body.theme-space .clock-wrapper svg circle[r="175"] {
    fill: url(#spaceFacePattern);
}

/* Space glass-panel/UI overrides for readability on dark face */
body.theme-space .glass-panel {
    background: rgba(13, 27, 66, 0.72);
    border-color: rgba(90, 53, 181, 0.4);
}
body.theme-space .toggle-btn {
    border-color: #5C35B5;
    color: #90CAF9;
}
body.theme-space .toggle-btn.active {
    background: #5C35B5;
    color: white;
}
body.theme-space .segmented-control {
    border-color: #5C35B5;
}
body.theme-space .segment-btn {
    background: rgba(13,27,66,0.6);
    color: #90CAF9;
}
body.theme-space .segment-btn.active {
    background: #5C35B5;
    color: white;
}

/* --- Theme 3: Jungle 🌿 --- */
body.theme-jungle {
    --clock-face-bg: #F5F0E8;            /* cream */
    --clock-num-color: #4E342E;          /* earthy brown */
    --clock-num-cardinal-color: #2E7D32; /* dark forest green for 3/6/9/12 */
    --bezel-color: #558B2F;              /* leaf green bezel */
    --hour-hand: #388E3C;                /* forest green */
    --minute-hand: #5D4037;              /* warm brown */
    --second-hand: #E64A19;              /* orange-red */
}

body.theme-jungle .toggle-btn {
    border-color: #388E3C;
    color: #388E3C;
}
body.theme-jungle .toggle-btn.active {
    background: #388E3C;
    color: white;
}
body.theme-jungle .segmented-control {
    border-color: #388E3C;
}
body.theme-jungle .segment-btn {
    color: #388E3C;
}
body.theme-jungle .segment-btn.active {
    background: #388E3C;
    color: white;
}
body.theme-jungle .accent-color {
    color: #388E3C;
}

/* --- Theme 4: Ocean 🐠 --- */
body.theme-ocean {
    --clock-face-bg: #E0F7FA;            /* pale aqua */
    --clock-num-color: #00695C;          /* deep teal */
    --clock-num-cardinal-color: #F4511E; /* coral for 3/6/9/12 */
    --bezel-color: #00838F;              /* ocean teal bezel */
    --hour-hand: #FF7043;                /* coral/salmon */
    --minute-hand: #0277BD;              /* deep ocean blue */
    --second-hand: #00897B;              /* sea-green */
}

body.theme-ocean .toggle-btn {
    border-color: #00838F;
    color: #00695C;
}
body.theme-ocean .toggle-btn.active {
    background: #00838F;
    color: white;
}
body.theme-ocean .segmented-control {
    border-color: #00838F;
}
body.theme-ocean .segment-btn {
    color: #00695C;
}
body.theme-ocean .segment-btn.active {
    background: #00838F;
    color: white;
}

/* ============================================================================
   THEME SELECTOR BUTTON STYLES
   ============================================================================ */

.theme-selector {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.theme-btn {
    box-shadow:
        0 4px 10px rgba(0,0,0,0.12),
        0 1px 0 rgba(255,255,255,0.35) inset;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                border-color 0.15s ease;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid transparent;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.theme-btn:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.4) inset;
}

.theme-btn.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), var(--shadow-md);
    transform: scale(1.08);
}

body.theme-school .theme-btn[data-theme="school"].active { border-color: #1A237E; box-shadow: 0 0 0 3px rgba(26,35,126,0.3); }
body.theme-space  .theme-btn[data-theme="space"].active  { border-color: #5C35B5; box-shadow: 0 0 0 3px rgba(92,53,181,0.35); }
body.theme-jungle .theme-btn[data-theme="jungle"].active { border-color: #388E3C; box-shadow: 0 0 0 3px rgba(56,142,60,0.3); }
body.theme-ocean  .theme-btn[data-theme="ocean"].active  { border-color: #00838F; box-shadow: 0 0 0 3px rgba(0,131,143,0.3); }

/* Body theme classes */
body.theme-night {
    --text-primary: #E8EAF6;
    --text-secondary: #C5CAE9;
    --card-bg: rgba(13, 27, 42, 0.08);
    --card-border: rgba(255, 255, 255, 0.08);
    --clock-face-bg: #1E2A4A;
    --clock-num-color: #ffffff;
    --clock-num-cardinal-color: #ff5252;
    --card-title-color: #818cf8;
    --dashed-border: rgba(255, 255, 255, 0.05);
    --status-bg: rgba(13, 27, 42, 0.10);
    --status-border: rgba(255, 255, 255, 0.08);
    --panel-bg: rgba(13, 27, 42, 0.06);
    --badge-color: #e0e7ff;
    --badge-bg: rgba(99, 102, 241, 0.10);
    --badge-border: rgba(99, 102, 241, 0.15);
}

body.theme-night .glass-panel,
body.theme-night .card {
    background: linear-gradient(135deg,
        rgba(13,27,66,0.10) 0%,
        rgba(10,20,50,0.02) 50%,
        rgba(15,30,70,0.05) 100%);
    border: 1px solid rgba(99,122,255,0.10);
    box-shadow:
        0 1px 0 0 rgba(120,140,255,0.04) inset,
        var(--shadow-lg),
        0 0 30px rgba(99,102,241,0.01);
}

body.theme-night .app-header {
    background: linear-gradient(135deg,
        rgba(13,27,66,0.12) 0%,
        rgba(10,20,50,0.04) 100%);
    border-color: rgba(99,122,255,0.10);
}

body.theme-night .app-title {
    background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 40%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-night .status-item {
    background: rgba(13,27,66,0.10);
    border-color: rgba(120,140,255,0.08);
    color: #c5cae9;
}

body.theme-day {
    --text-primary: #212121;
    --text-secondary: #475569;
    --card-bg: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.16);
    --clock-face-bg: #FFFDE7;
    --clock-num-color: #1e293b;
    --clock-num-cardinal-color: #e53935;
    --card-title-color: #4338ca;
    --dashed-border: rgba(0, 0, 0, 0.03);
    --status-bg: rgba(255, 255, 255, 0.05);
    --status-border: rgba(255, 255, 255, 0.15);
    --panel-bg: rgba(255, 255, 255, 0.04);
    --badge-color: #312e81;
    --badge-bg: rgba(224, 231, 255, 0.10);
    --badge-border: rgba(199, 210, 254, 0.15);
}

/* Sky Background & Celestial Elements */
.sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-sky);
    pointer-events: none;
    overflow: hidden;
    transition: background var(--transition-sky);
}

/* Sky Phase Gradients */
.sky.phase-dawn {
    background: linear-gradient(180deg,
        #0D0F2B 0%, #1A237E 15%, #3949AB 30%,
        #C2185B 50%, #E91E63 65%,
        #FF7043 80%, #FF8A65 92%, #FFC896 100%);
    --sky-moon-shadow: #0D0F2B;
}
.sky.phase-morning {
    background: linear-gradient(180deg,
        #1565C0 0%, #1976D2 12%, #42A5F5 30%,
        #64B5F6 50%, #B3E5FC 75%, #FFF8E1 100%);
}
.sky.phase-afternoon {
    background: linear-gradient(180deg,
        #0277BD 0%, #0288D1 20%,
        #29B6F6 50%, #81D4FA 78%, #E1F5FE 100%);
}
.sky.phase-evening {
    background: linear-gradient(180deg,
        #BF360C 0%, #E64A19 15%, #FF7043 30%,
        #FF8A65 48%, #CE93D8 65%, #9C27B0 82%, #4A148C 100%);
}
.sky.phase-dusk {
    background: linear-gradient(180deg,
        #1A0533 0%, #311B92 20%, #4A148C 40%,
        #6A1B9A 55%, #E64A19 72%, #FF7043 88%, #FF8A65 100%);
    --sky-moon-shadow: #1A0533;
}
.sky.phase-night {
    background: linear-gradient(180deg,
        #020A18 0%, #040D1F 15%, #060F26 30%,
        #0A1628 50%, #0D1B2A 70%, #112030 85%, #162438 100%);
    --sky-moon-shadow: #020A18;
}

/* Atmospheric glow overlay */
.sky-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 30s ease;
    mix-blend-mode: screen;
    z-index: var(--z-clouds);
}

.sky.phase-morning .sky-glow {
    background: radial-gradient(ellipse 80% 40% at 20% 85%,
        rgba(255, 235, 100, 0.18) 0%, transparent 70%);
}
.sky.phase-afternoon .sky-glow {
    background: radial-gradient(ellipse 60% 30% at 50% 100%,
        rgba(100, 200, 255, 0.08) 0%, transparent 70%);
}
.sky.phase-evening .sky-glow {
    background: radial-gradient(ellipse 90% 50% at 75% 90%,
        rgba(255, 120, 50, 0.22) 0%, transparent 65%);
    opacity: 1;
}
.sky.phase-dusk .sky-glow {
    background: radial-gradient(ellipse 100% 60% at 70% 100%,
        rgba(230, 80, 30, 0.25) 0%, transparent 55%),
                radial-gradient(ellipse 60% 30% at 30% 100%,
        rgba(155, 30, 160, 0.15) 0%, transparent 60%);
}
.sky.phase-dawn .sky-glow {
    background: radial-gradient(ellipse 80% 50% at 20% 100%,
        rgba(255, 120, 80, 0.28) 0%, transparent 60%);
}
.sky.phase-night .sky-glow {
    background: radial-gradient(ellipse 50% 30% at 50% 5%,
        rgba(100, 120, 220, 0.08) 0%, transparent 70%);
}

/* Horizon band */
.horizon-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18%;
    pointer-events: none;
    transition: opacity 30s ease, background 30s ease;
    z-index: var(--z-clouds);
}
.sky.phase-morning .horizon-band {
    background: linear-gradient(to top, rgba(255,248,200,0.25) 0%, transparent 100%);
}
.sky.phase-afternoon .horizon-band {
    background: linear-gradient(to top, rgba(180,230,255,0.12) 0%, transparent 100%);
}
.sky.phase-evening .horizon-band {
    background: linear-gradient(to top, rgba(255,100,30,0.18) 0%, transparent 100%);
}
.sky.phase-night .horizon-band {
    background: linear-gradient(to top, rgba(10,20,60,0.4) 0%, transparent 100%);
}
.sky.phase-dawn .horizon-band,
.sky.phase-dusk .horizon-band {
    background: linear-gradient(to top, rgba(255,80,30,0.20) 0%, transparent 100%);
}

/* Cloud Layer Containers */
.cloud-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 20s ease;
    z-index: var(--z-clouds);
}

/* Hide clouds at night and dusk */
.sky.phase-night .cloud-layer,
.sky.phase-dusk .cloud-layer { opacity: 0.05; }

/* Subtle clouds at dawn */
.sky.phase-dawn .cloud-layer { opacity: 0.3; }

/* Full clouds in day phases */
.sky.phase-morning .cloud-layer,
.sky.phase-afternoon .cloud-layer,
.sky.phase-evening .cloud-layer { opacity: 1; }

/* Individual cloud shape using layered box-shadows for volume */
.cloud {
    position: absolute;
    border-radius: 50%;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* ---- FAR LAYER — small, translucent, very slow ---- */
.cloud-far {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(1px);
    filter: blur(2px);
}

.cloud-far.c1 {
    width: 180px; height: 55px;
    top: 8%; left: -200px;
    border-radius: 60px 80px 60px 40px;
    box-shadow:
        60px -18px 0 rgba(255,255,255,0.4),
        110px -8px 0 rgba(255,255,255,0.35),
        30px -10px 0 rgba(255,255,255,0.3);
    animation: cloudDriftFar 220s linear infinite;
    animation-delay: -60s;
}
.cloud-far.c2 {
    width: 220px; height: 60px;
    top: 18%; left: -240px;
    border-radius: 50px 70px 50px 50px;
    box-shadow:
        80px -22px 0 rgba(255,255,255,0.35),
        140px -10px 0 rgba(255,255,255,0.30),
        40px -14px 0 rgba(255,255,255,0.28);
    animation: cloudDriftFar 260s linear infinite;
    animation-delay: -120s;
}
.cloud-far.c3 {
    width: 160px; height: 45px;
    top: 6%; left: -180px;
    border-radius: 40px 60px 40px 40px;
    box-shadow:
        55px -15px 0 rgba(255,255,255,0.32),
        95px -5px 0 rgba(255,255,255,0.28);
    animation: cloudDriftFar 190s linear infinite;
    animation-delay: -90s;
}
.cloud-far.c4 {
    width: 200px; height: 50px;
    top: 22%; left: -220px;
    border-radius: 55px 75px 55px 45px;
    box-shadow:
        70px -20px 0 rgba(255,255,255,0.38),
        120px -8px 0 rgba(255,255,255,0.33);
    animation: cloudDriftFar 240s linear infinite;
    animation-delay: -150s;
}

/* ---- MID LAYER — medium, moderate opacity ---- */
.cloud-mid {
    background: rgba(255, 255, 255, 0.62);
    filter: blur(0.5px);
}

.cloud-mid.c1 {
    width: 260px; height: 75px;
    top: 12%; left: -280px;
    border-radius: 80px 100px 80px 60px;
    box-shadow:
        90px -28px 0 rgba(255,255,255,0.55),
        160px -12px 0 rgba(255,255,255,0.50),
        50px -18px 0 rgba(255,255,255,0.45),
        200px -5px 0 rgba(255,255,255,0.40);
    animation: cloudDriftMid 150s linear infinite;
    animation-delay: -30s;
}
.cloud-mid.c2 {
    width: 300px; height: 80px;
    top: 28%; left: -320px;
    border-radius: 70px 110px 70px 60px;
    box-shadow:
        100px -30px 0 rgba(255,255,255,0.52),
        180px -14px 0 rgba(255,255,255,0.48),
        60px -20px 0 rgba(255,255,255,0.44);
    animation: cloudDriftMid 180s linear infinite;
    animation-delay: -80s;
}
.cloud-mid.c3 {
    width: 230px; height: 65px;
    top: 10%; left: -250px;
    border-radius: 65px 90px 65px 55px;
    box-shadow:
        80px -24px 0 rgba(255,255,255,0.48),
        140px -10px 0 rgba(255,255,255,0.44);
    animation: cloudDriftMid 165s linear infinite;
    animation-delay: -110s;
}

/* ---- NEAR LAYER — large, opaque, fastest ---- */
.cloud-near {
    background: rgba(255, 255, 255, 0.75);
}

.cloud-near.c1 {
    width: 380px; height: 95px;
    top: 14%; left: -400px;
    border-radius: 90px 130px 90px 70px;
    box-shadow:
        130px -38px 0 rgba(255,255,255,0.70),
        230px -18px 0 rgba(255,255,255,0.65),
        80px -25px 0 rgba(255,255,255,0.60),
        290px -8px 0 rgba(255,255,255,0.55),
        340px -3px 0 rgba(255,255,255,0.48);
    animation: cloudDriftNear 100s linear infinite;
    animation-delay: -40s;
}
.cloud-near.c2 {
    width: 340px; height: 85px;
    top: 32%; left: -360px;
    border-radius: 80px 115px 80px 65px;
    box-shadow:
        115px -32px 0 rgba(255,255,255,0.68),
        200px -16px 0 rgba(255,255,255,0.63),
        70px -22px 0 rgba(255,255,255,0.58),
        260px -7px 0 rgba(255,255,255,0.52);
    animation: cloudDriftNear 120s linear infinite;
    animation-delay: -70s;
}

/* Evening-tinted clouds */
.sky.phase-evening .cloud-mid,
.sky.phase-evening .cloud-near {
    background: rgba(255, 200, 160, 0.60);
    box-shadow: none;
    filter: none;
}
.sky.phase-evening .cloud-far {
    background: rgba(255, 180, 140, 0.40);
}
.sky.phase-dawn .cloud-mid,
.sky.phase-dawn .cloud-near {
    background: rgba(255, 210, 180, 0.45);
}

/* Cloud drift keyframes */
@keyframes cloudDriftFar {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 280px)); }
}
@keyframes cloudDriftMid {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 380px)); }
}
@keyframes cloudDriftNear {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 500px)); }
}

/* Sun - Dramatic Upgrade */
.sun {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    /* Layered radial: pure white core → golden yellow → warm amber → transparent halo */
    background: radial-gradient(circle,
        #FFFFFF 0%, #FFFFF0 12%,
        #FFF9C4 28%, #FFF176 44%,
        #FFD54F 60%, #FFCA28 74%,
        #FFA726 88%, rgba(255,167,38,0) 100%);
    /* Three-layer glow: close/tight, medium corona, wide atmospheric */
    box-shadow:
        0 0 0px  10px rgba(255,210,50, 0.30),
        0 0 20px 20px rgba(255,183,77, 0.28),
        0 0 50px 40px rgba(255,152,0,  0.18),
        0 0 100px 70px rgba(255,120,0, 0.08),
        0 0 160px 100px rgba(255,90,0, 0.04);
    transform: translate(-50%, -50%);
    transition: left var(--transition-celestial), top var(--transition-celestial);
    /* Subtle breathing animation */
    animation: sunPulse 8s ease-in-out infinite;
    z-index: var(--z-clouds);
}

/* Sun ray spikes: CSS only using pseudo-elements */
.sun::before {
    content: '';
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255,236,100,0.08) 6deg, transparent 12deg,
        transparent 18deg, rgba(255,236,100,0.08) 24deg, transparent 30deg,
        transparent 36deg, rgba(255,236,100,0.08) 42deg, transparent 48deg,
        transparent 54deg, rgba(255,236,100,0.08) 60deg, transparent 66deg,
        transparent 72deg, rgba(255,236,100,0.08) 78deg, transparent 84deg,
        transparent 90deg, rgba(255,236,100,0.08) 96deg, transparent 102deg,
        transparent 108deg, rgba(255,236,100,0.08) 114deg, transparent 120deg,
        transparent 126deg, rgba(255,236,100,0.08) 132deg, transparent 138deg,
        transparent 144deg, rgba(255,236,100,0.08) 150deg, transparent 156deg,
        transparent 162deg, rgba(255,236,100,0.08) 168deg, transparent 174deg,
        transparent 180deg, rgba(255,236,100,0.08) 186deg, transparent 192deg,
        transparent 198deg, rgba(255,236,100,0.08) 204deg, transparent 210deg,
        transparent 216deg, rgba(255,236,100,0.08) 222deg, transparent 228deg,
        transparent 234deg, rgba(255,236,100,0.08) 240deg, transparent 246deg,
        transparent 252deg, rgba(255,236,100,0.08) 258deg, transparent 264deg,
        transparent 270deg, rgba(255,236,100,0.08) 276deg, transparent 282deg,
        transparent 288deg, rgba(255,236,100,0.08) 294deg, transparent 300deg,
        transparent 306deg, rgba(255,236,100,0.08) 312deg, transparent 318deg,
        transparent 324deg, rgba(255,236,100,0.08) 330deg, transparent 336deg,
        transparent 342deg, rgba(255,236,100,0.08) 348deg, transparent 354deg,
        transparent 360deg
    );
    animation: sunRayRotate 30s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* Inner shimmer disc */
.sun::after {
    content: '';
    position: absolute;
    top: 15%; left: 15%;
    width: 35%; height: 35%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 100%);
    animation: sunShimmer 4s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% { box-shadow:
        0 0 0   10px rgba(255,210,50, 0.30),
        0 0 20px 20px rgba(255,183,77, 0.28),
        0 0 50px 40px rgba(255,152,0,  0.18),
        0 0 100px 70px rgba(255,120,0, 0.08); }
    50% { box-shadow:
        0 0 0   14px rgba(255,210,50, 0.36),
        0 0 28px 26px rgba(255,183,77, 0.32),
        0 0 70px 55px rgba(255,152,0,  0.22),
        0 0 130px 90px rgba(255,120,0, 0.10); }
}

@keyframes sunRayRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes sunShimmer {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 0.9; transform: scale(1.15); }
}

/* Moon Container positioned by JS */
.moon-container {
    position: absolute;
    width: 90px;
    height: 90px;
    transform: translate(-50%, -50%);
    transition: left var(--transition-celestial), top var(--transition-celestial), opacity 2s ease;
    opacity: 0;
    pointer-events: none;
    animation: moonFloat 9s ease-in-out infinite;
    z-index: var(--z-clouds);
}

.sky.phase-dawn .moon-container,
.sky.phase-dusk .moon-container,
.sky.phase-night .moon-container {
    opacity: 1;
}

/* Full moon disc */
.moon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    /* Soft yellowish-white moonlight */
    background: radial-gradient(circle at 35% 35%,
        #FFFFFF 0%, #FFFEF0 20%,
        #FFF9E3 40%, #FFF5CC 65%,
        #FFF0A0 85%, #FFE866 100%);
    /* Layered moon glow */
    box-shadow:
        0 0 0   6px  rgba(255, 248, 200, 0.25),
        0 0 18px 12px rgba(255, 240, 150, 0.20),
        0 0 40px 25px rgba(255, 220, 100, 0.12),
        0 0 80px 50px rgba(255, 200, 80,  0.06),
        0 0 140px 80px rgba(200, 180, 100, 0.04);
}

/* Crescent shadow — overlaps the moon to cut out a crescent */
.moon::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 18px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--sky-moon-shadow, #0D1B2A);
    transition: background 60s linear;
    /* Very subtle inner gradient to make shadow feel atmospheric */
    background-image: radial-gradient(circle at 40% 40%,
        rgba(0,0,0,0.08) 0%, transparent 70%);
}

/* Crater textures (soft subtle dots) */
.moon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(circle 4px at 28% 45%, rgba(200,190,150,0.18) 0%, transparent 100%),
        radial-gradient(circle 3px at 55% 30%, rgba(200,190,150,0.14) 0%, transparent 100%),
        radial-gradient(circle 5px at 40% 65%, rgba(200,190,150,0.12) 0%, transparent 100%),
        radial-gradient(circle 2px at 65% 55%, rgba(200,190,150,0.10) 0%, transparent 100%);
    pointer-events: none;
}

@keyframes moonFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px) rotate(-2deg); }
    33%       { transform: translate(-50%, -50%) translateY(-8px) rotate(1deg); }
    66%       { transform: translate(-50%, -50%) translateY(-4px) rotate(-1deg); }
}

/* Twinkling Stars */
.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: var(--z-clouds);
}

.sky.phase-night .stars-container,
.sky.phase-dusk .stars-container,
.sky.phase-dawn .stars-container {
    opacity: 1;
}

.star {
    position: absolute;
    border-radius: 50%;
    background: white;
    /* Vary color slightly — some warm, some cool */
    animation: twinkle 3s ease-in-out infinite;
    will-change: opacity, transform;
}

@keyframes twinkle {
    0%  { opacity: 0.15; transform: scale(0.8); }
    40% { opacity: 0.90; transform: scale(1.2); box-shadow: 0 0 3px 1px rgba(255,255,255,0.5); }
    60% { opacity: 0.70; transform: scale(1.0); }
    100%{ opacity: 0.15; transform: scale(0.8); }
}

/* Shooting stars */
.shooting-star {
    position: absolute;
    width: 120px;
    height: 2px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 60%, white 100%);
    border-radius: 2px;
    transform: rotate(-30deg);
    opacity: 0;
    animation: shootingStar 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shootingStar {
    0%   { opacity: 0; transform: rotate(-30deg) translateX(0); }
    5%   { opacity: 1; }
    30%  { opacity: 0; transform: rotate(-30deg) translateX(300px); }
    100% { opacity: 0; transform: rotate(-30deg) translateX(300px); }
}

/* Show shooting stars only at night / dusk / dawn */
.sky:not(.phase-night):not(.phase-dusk):not(.phase-dawn) .shooting-star {
    display: none;
}


/* Timeline Card */
.timeline-card {
    margin-top: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeline-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    text-align: center;
}

.timeline-container {
    position: relative;
    width: 100%;
}

.timeline-bar {
    position: relative;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    height: 40px;
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.12),
        0 2px 8px rgba(0,0,0,0.08),
        0 1px 0 rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.5);
}

.timeline-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #f87171 0%, #ef4444 50%, #dc2626 100%);
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.6),
        0 0 10px rgba(239,68,68,0.7),
        0 0 20px rgba(239,68,68,0.3);
    width: 5px;
    pointer-events: none;
    transform: translateX(-50%);
    transition: left 0.1s ease-out;
}

/* Timeline segments get subtle gloss */
.timeline-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.timeline-segment::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 100%);
    pointer-events: none;
}

.timeline-segment.morning {
    background: linear-gradient(180deg, #42A5F5 0%, #FFA000 100%);
}
.timeline-segment.afternoon {
    background: linear-gradient(180deg, #0288D1 0%, #29B6F6 100%);
}
.timeline-segment.evening {
    background: linear-gradient(180deg, #FF7043 0%, #CE93D8 100%);
}
.timeline-segment.night-start,
.timeline-segment.night-end {
    background: linear-gradient(180deg, #1A237E 0%, #0D1B2A 100%);
}

.timeline-ticks {
    position: relative;
    height: 20px;
    width: 100%;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .segment-label {
        font-size: 0.6rem;
    }
}

/* Reduced Motion Support — covers all animations as required by WCAG 2.1 */
@media (prefers-reduced-motion: reduce) {
    /* Sky & celestial transitions */
    .sky { transition: none; }
    .sun { transition: none !important; animation: none !important; }
    .sun::before { animation: none !important; }
    .sun::after  { animation: none !important; }
    .moon-container { transition: none !important; animation: none !important; }
    .moon { animation: none !important; }
    .star { animation: none !important; }
    .cloud { animation: none !important; }
    .shooting-star { display: none !important; }

    /* Card interactions */
    .card:hover { transform: none; }
    .card { transition: none; }

    /* Clock hands — remove smooth transitions so they jump discretely */
    #hour-hand, #minute-hand { transition: none; }
    .hand-group.dragging { animation: none !important; filter: drop-shadow(0 0 8px currentColor) !important; }
    @keyframes dragPulse { from, to { filter: drop-shadow(0 0 8px currentColor); } }

    /* Digital clock colon blink */
    .digital-colon.blinking { animation: none; opacity: 1; }

    /* Special time badge pop */
    .special-time-badge { transition: none; }
    .special-time-badge.show { animation: none; transform: none; }

    /* Teach mode & quiz animations */
    .clock-wrapper svg.teach-highlight-seconds #clock-ticks line { animation: none; }
    .number-pop { animation: none; }
    .clock-card.shake { animation: none; }
    .pulse-hand-hint line { animation: none; }

    /* Routine & quiz panel transitions */
    .routine-panel { transition: none !important; }
    .routine-panel-overlay { transition: none !important; }
    .quiz-panel { transition: none !important; }
    .quiz-panel-overlay { transition: none !important; }

    /* Theme button hover */
    .theme-btn { transition: none; }
    .theme-btn:hover { transform: none; }
    .theme-btn.active { transform: none; }

    /* Legend item hover */
    .legend-item:hover { transform: none; }
}


/* ============================================================================
   DAILY ROUTINE PANEL & COMPACT LABEL STYLES
   ============================================================================ */

.routine-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.routine-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.routine-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 100%;
    max-width: 500px;
    height: 80vh;
    background: linear-gradient(160deg,
        rgba(255,255,255,0.72) 0%,
        rgba(255,255,255,0.55) 100%);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.75);
    border-bottom: none;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    z-index: 1001;
    box-shadow:
        0 -12px 40px rgba(0,0,0,0.15),
        0 -1px 0 rgba(255,255,255,0.8),
        0 1px 0 rgba(255,255,255,0.6) inset;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.routine-panel.open {
    transform: translate(-50%, 0);
}

.routine-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1.5px dashed var(--dashed-border);
}

.routine-panel-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--card-title-color);
    margin: 0;
}

.routine-panel-close {
    background: var(--status-bg);
    border: 1px solid var(--status-border);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
    outline: none;
}

.routine-panel-close:hover {
    transform: scale(1.1);
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.routine-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

.routine-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--status-bg);
    border: 2px solid var(--status-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    user-select: none;
    min-height: 64px;
}

.routine-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-title-color);
}

.routine-card.active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.10);
    box-shadow:
        0 0 0 1px rgba(245,158,11,0.25),
        0 4px 16px rgba(245,158,11,0.20);
}

.routine-emoji {
    font-size: 2.2rem;
}

.routine-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.routine-time {
    font-size: 0.85rem;
    font-weight: 800;
    color: #f59e0b;
}

.routine-names {
    display: flex;
    flex-direction: column;
}

.routine-en {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
}

.routine-hi {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.now-badge {
    background: #f59e0b;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.compact-routine-container {
    margin-top: 4px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

.compact-routine-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-secondary);
    background: var(--status-bg);
    border: 1.5px solid var(--status-border);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Reduced motion slide-up overrides */
@media (prefers-reduced-motion: reduce) {
    .routine-panel {
        transition: none !important;
    }
    .routine-panel-overlay {
        transition: none !important;
    }
}

/* ============================================================================
   TEACH ME MODE STYLES
   ============================================================================ */

/* SVG Highlights in Teach Me Mode */
.clock-wrapper svg.teach-highlight-hours #clock-numbers text {
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.85));
    fill: #f59e0b !important;
    font-weight: 900;
    transition: fill 0.3s ease, filter 0.3s ease;
}

.clock-wrapper svg.teach-highlight-minutes #clock-ticks line {
    stroke: #3b82f6 !important;
    filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.85));
    transition: stroke 0.3s ease, filter 0.3s ease;
}

.clock-wrapper svg.teach-highlight-seconds #clock-ticks line {
    animation: teachSecondTickPulse 1s infinite alternate;
}

@keyframes teachSecondTickPulse {
    0% { stroke: #94a3b8; filter: none; }
    100% { stroke: #facc15; filter: drop-shadow(0 0 4px #facc15); }
}

/* Specific hand highlights during drag */
.clock-wrapper svg #hour-hand.teach-hand-glow line {
    stroke: #f59e0b !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.9));
}
.clock-wrapper svg #minute-hand.teach-hand-glow line {
    stroke: #3b82f6 !important;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.9));
}
.clock-wrapper svg #second-hand.teach-hand-glow line {
    stroke: #facc15 !important;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.9));
}

/* Number zoom pop keyframes */
@keyframes numberZoomPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.number-pop {
    animation: numberZoomPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
}

/* Number Zoom Tooltip */
.number-tooltip {
    position: absolute;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2.5px solid #6366f1;
    color: #e8eaf6;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    z-index: 2000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translate(-50%, -100%);
    margin-top: -12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .clock-wrapper svg.teach-highlight-seconds #clock-ticks line {
        animation: none !important;
    }
    .number-pop {
        animation: none !important;
    }
}

/* ============================================================================
   QUIZ PANEL & INTERACTIVE STYLES
   ============================================================================ */

.quiz-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.quiz-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.quiz-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 100%;
    max-width: 500px;
    height: auto;
    max-height: 48vh;
    background: linear-gradient(160deg,
        rgba(255,255,255,0.72) 0%,
        rgba(255,255,255,0.55) 100%);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.75);
    border-bottom: none;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    z-index: 1001;
    box-shadow:
        0 -12px 40px rgba(0,0,0,0.15),
        0 -1px 0 rgba(255,255,255,0.8),
        0 1px 0 rgba(255,255,255,0.6) inset;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-panel.open {
    transform: translate(-50%, 0);
}

.quiz-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1.5px dashed var(--dashed-border);
}

.quiz-panel-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--card-title-color);
    margin: 0;
}

.quiz-panel-close {
    background: var(--status-bg);
    border: 1px solid var(--status-border);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
    outline: none;
}

.quiz-panel-close:hover {
    transform: scale(1.1);
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.quiz-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
}

/* Difficulty Selector grid */
.difficulty-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 12px 0;
}

.difficulty-btn {
    padding: 10px 0;
    border-radius: var(--radius-sm);
    border: 2px solid var(--status-border);
    background: var(--status-bg);
    color: var(--text-primary);
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.difficulty-btn.active {
    background: #f59e0b;
    border-color: #d97706;
    color: white;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

/* MCQ option list */
.mcq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.mcq-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--status-border);
    background: var(--status-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s, border-color 0.2s;
}

.mcq-option-btn:hover {
    transform: translateY(-2px);
    border-color: #f59e0b;
}

.mcq-badge {
    background: #37474F;
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
}

/* Answer verification cards */
.feedback-card {
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.feedback-card.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid #10b981;
    color: #10b981;
}

.feedback-card.wrong {
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid #ef4444;
    color: #ef4444;
}

.feedback-card.close-enough {
    background: rgba(245, 158, 11, 0.15);
    border: 2px solid #f59e0b;
    color: #d97706;
}

/* End of round Star rating */
.quiz-stars-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 2.8rem;
    margin: 16px 0;
    filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.25));
}

.quiz-star.active {
    color: #fbbf24; /* yellow-400 */
    filter: drop-shadow(0 0 6px rgba(251,191,36,0.7));
}
.quiz-star.inactive {
    color: #cbd5e1; /* slate-300 */
}

/* Clock shake animation keyframes */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-12px); }
  40%      { transform: translateX(12px); }
  60%      { transform: translateX(-10px); }
  80%      { transform: translateX(10px); }
}

.clock-card.shake {
  animation: shake 0.5s ease-in-out;
}

/* Pulsing red hint for incorrect hands */
@keyframes handHintPulse {
    0% { filter: drop-shadow(0 0 4px #ef4444); opacity: 1; }
    100% { filter: drop-shadow(0 0 16px #ef4444); opacity: 0.6; }
}

.pulse-hand-hint line {
    animation: handHintPulse 0.8s infinite alternate !important;
    stroke: #ef4444 !important;
}

/* Scroll and Overflow Polish */
.routine-panel-content, .quiz-panel-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.3) transparent;
}
.routine-panel-content::-webkit-scrollbar, .quiz-panel-content::-webkit-scrollbar {
    width: 5px;
}
.routine-panel-content::-webkit-scrollbar-track, .quiz-panel-content::-webkit-scrollbar-track {
    background: transparent;
}
.routine-panel-content::-webkit-scrollbar-thumb, .quiz-panel-content::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.30);
    border-radius: 10px;
}
.routine-panel-content::-webkit-scrollbar-thumb:hover, .quiz-panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,0.50);
}

@media (prefers-reduced-motion: reduce) {
    .clock-card.shake {
        animation: none !important;
    }
    .pulse-hand-hint line {
        animation: none !important;
    }
    .quiz-panel {
        transition: none !important;
    }
    .quiz-panel-overlay {
        transition: none !important;
    }
}