/* --- THEME VARIABLES & BASE STYLES --- */
:root {
    --bg-color: #fffacd; /* Lemon Chiffon */
    --container-bg: #fff8dc; /* Cornsilk */
    --text-color-main: #333;
    --text-color-primary: #b8860b; /* DarkGoldenrod */
    --text-color-secondary: #8b4513; /* SaddleBrown */
    --text-color-tertiary: #a0522d; /* Sienna */
    --clock-bg: #eee8aa; /* PaleGoldenrod */
    --clock-text: #cd853f; /* Peru */
    --glow-color-main: #ffd700; /* Gold */
    --glow-color-secondary: #ffA500; /* Orange */
    --button-bg: #daa520; /* Goldenrod */
    --button-hover-bg: #b8860b;
    --box-shadow-color: rgba(0, 0, 0, 0.15);
    --body-background: var(--bg-color);
}

.theme-dark {
    --bg-color: #0d122b;
    --container-bg: #16213e;
    --text-color-primary: #fbc02d;
    --text-color-secondary: #ffcc80;
    --text-color-tertiary: #ffab91;
    --clock-bg: #0f3460;
    --clock-text: #e94560;
    --glow-color-main: #ffee58;
    --glow-color-secondary: #ffa726;
    --button-bg: #533483;
    --button-hover-bg: #2f224f;
    --box-shadow-color: rgba(47, 34, 79, 0.5);
    --body-background: linear-gradient(180deg, #1a1a2e 0%, #0d122b 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--body-background);
    color: var(--text-color-main);
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; text-align: center; padding: 15px; overflow: hidden;
    transition: background 0.5s ease, color 0.5s ease;
    image-rendering: auto;
}

.container {
    background-color: var(--container-bg);
    padding: 20px 30px; border-radius: 15px;
    box-shadow: 0 8px 30px var(--box-shadow-color);
    max-width: 90vw; width: 500px;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
    border: 1px solid transparent;
}

/* --- TEXT & CLOCK STYLES --- */
.static-time { font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 700; color: var(--text-color-primary); margin-bottom: 15px; transition: text-shadow 0.5s ease, font-weight 0.5s ease, transform 0.5s ease, color 0.5s ease; }
.zone-label { font-size: clamp(1.2rem, 4vw, 1.8rem); color: var(--text-color-secondary); margin-bottom: 10px; font-weight: 500; min-height: 1.5em; transition: opacity 0.5s ease; }
.clock { font-family: 'Courier New', Courier, monospace; font-size: clamp(2.5rem, 8vw, 4rem); font-weight: bold; color: var(--clock-text); background-color: var(--clock-bg); padding: 10px 20px; border-radius: 10px; display: inline-block; min-width: 250px; margin: 10px 0; transition: opacity 0.5s ease, background-color 0.5s ease, color 0.5s ease; }
.status-text { font-size: clamp(0.9rem, 3vw, 1.1rem); color: var(--text-color-tertiary); margin-top: 15px; min-height: 1.2em; }
.switching { opacity: 0; }

/* --- MODERN EFFECTS & ANIMATIONS --- */
.static-time.glowing { font-weight: 900; color: var(--glow-color-main); text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px var(--glow-color-main), 0 0 20px var(--glow-color-secondary), 0 0 35px var(--glow-color-secondary); animation: pulseGlow 1.5s infinite alternate; }
@keyframes pulseGlow { from { transform: scale(1); } to { transform: scale(1.03); } }
.static-time.preparing { text-shadow: 0 0 3px rgba(255, 255, 255, 0.6), 0 0 6px var(--glow-color-main); font-weight: 800; }
#sparklesContainer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 10; }
.sparkle { position: absolute; width: 6px; height: 6px; background-color: gold; border-radius: 50%; box-shadow: 0 0 10px gold, 0 0 20px yellow; animation: sparkle-anim 1.5s ease-out forwards; opacity: 0; }
@keyframes sparkle-anim { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 50% { transform: scale(1.5) rotate(180deg); opacity: 1; } 100% { transform: scale(0) rotate(360deg); opacity: 0; } }

/* --- UI CONTROLS --- */
.ui-controls { position: fixed; top: 15px; right: 15px; display: flex; gap: 10px; z-index: 20; }
.ui-button { background: var(--button-bg); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.5rem; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: all 0.3s ease; }
.ui-button:hover { background-color: var(--button-hover-bg); transform: scale(1.1); }
.audio-prompt { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; z-index: 1000; opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease; }
.audio-prompt.hidden { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }


body.style-retro { background: #000; font-family: 'Press Start 2P', cursive; image-rendering: pixelated; }
body.style-retro::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 2px); pointer-events: none; }
body.style-retro .container { background-color: transparent; border: none; box-shadow: none; }
body.style-retro #mainContainer { border-image-source: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 H24 V24 H0 Z" stroke="white" stroke-width="4" /></svg>'); border-image-slice: 8; border-image-repeat: repeat; border-style: solid; border-width: 8px; padding: 30px; }
body.style-retro .static-time { color: #fff; text-shadow: 2px 2px #f7d51d, 4px 4px #e76e55; }
body.style-retro .static-time.glowing { color: #fff; animation: blink-retro 0.5s steps(2, start) infinite; }
@keyframes blink-retro { to { text-shadow: 2px 2px #e76e55, 4px 4px #92cc41; } }
body.style-retro .zone-label { color: #92cc41; }
body.style-retro .clock { color: #f7d51d; background: transparent; padding: 0; }
body.style-retro .status-text { color: #209cee; }
body.style-retro #sparklesContainer, body.style-retro .audio-prompt { display: none; } /* <-- OK to hide these */
 
body.style-retro .ui-button {
    background-color: #212529;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 0;
    width: 48px;
    height: 48px;
    font-size: 1.8rem;
    box-shadow: none;
}
body.style-retro .ui-button:hover {
    background-color: #92cc41; 
    color: #212529;
    transform: translateY(-2px); 
}
a#ssijmt_link {
    text-decoration: none;
    color: inherit;
    cursor: url('clock_cursor.cur'), auto;
}

@media (max-width: 600px) { html { font-size: 14px; } .container { padding: 15px 20px; width: 90vw; max-width: none; } }
@media (max-width: 400px) { html { font-size: 12px; } .clock { min-width: 200px; padding: 8px 15px; } .ui-button { width: 35px; height: 35px; font-size: 1.3rem; } }