/* CSS Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100vh; 
    height: 100dvh;
    overflow: hidden;
    color-scheme: dark;
}

/* Dark neutral base variables for Setup and Basic theme */
:root {
    --bg: #111111;
    --fg: #eeeeee;
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --border-color: #555555;
}

body {
    transition: background 0.3s ease, color 0.3s ease;
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--fg);
}

/* View Containers */
.view-container {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.view-container.active {
    display: flex;
}

/* Clock View Global Properties */
#clock-view {
    cursor: pointer; /* Indicates the entire screen is clickable */
}

/* Setup / Configuration Screen */
#setup-view {
    justify-content: center;
    align-items: center;
    padding: 2rem;
    overflow-y: auto;
}

.setup-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 450px;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.8;
}

.form-group input[type="text"], 
.form-group input[type="date"], 
.form-group select {
    font-family: inherit;
    font-size: 1.1rem;
    padding: 0.8rem;
    background: #1a1a1a;
    color: inherit;
    border: 2px solid var(--border-color);
    border-radius: 0;
    outline: none;
    transition: all 0.2s;
}

.form-group input:focus, 
.form-group select:focus {
    border-color: var(--fg);
    background: #222;
}

.time-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-input-wrapper input[type="number"] {
    font-family: inherit;
    font-size: 1.1rem;
    padding: 0.8rem;
    background: #1a1a1a;
    color: inherit;
    border: 2px solid var(--border-color);
    border-radius: 0;
    outline: none;
    text-align: center;
    width: 4rem;
    transition: all 0.2s;
}

.time-input-wrapper input[type="number"]:focus {
    border-color: var(--fg);
    background: #222;
}

.time-input-wrapper input[type=number]::-webkit-inner-spin-button, 
.time-input-wrapper input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.time-input-wrapper input[type=number] {
    -moz-appearance: textfield;
}

.time-separator {
    font-size: 1.5rem;
    font-weight: bold;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.submit-btn {
    flex: 1;
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1.2rem;
    background: var(--fg);
    color: var(--bg);
    border: 2px solid var(--fg);
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
}

.submit-btn:hover {
    opacity: 0.8;
}

.secondary-btn {
    background: transparent;
    color: var(--fg);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

#theme-mount {
    width: 100%;
    height: 100%;
}


/* =========================================================
   THEME: BASIC
   ========================================================= */
body.theme-basic {
    --bg: #121212;
    --fg: #f5f5f5;
    --border-color: #444444;
}

.basic-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.basic-title {
    flex: 0 1 auto;
    text-align: center;
    padding: 4vh 2vw 2vh 2vw;
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg);
}

.basic-clock {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-content: center;
}

.basic-box {
    flex: 1 1 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.basic-box:last-child { border-right: none; }

.basic-val {
    font-size: clamp(3rem, 12vw, 15rem);
    line-height: 1;
    font-weight: 900;
    color: var(--fg);
}

.basic-lbl {
    font-size: clamp(1rem, 3vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #999;
    margin-top: 1vh;
}

@media (max-width: 900px) {
    .basic-box { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .basic-box:nth-child(2) { border-right: none; }
}
@media (max-width: 500px) {
    .basic-box { flex: 1 1 100%; border-right: none; }
}


/* =========================================================
   THEME: NERDY
   ========================================================= */
body.theme-nerdy {
    --bg: #000000;
    --fg: #00ff00;
    --border-color: #00ff00;
    --font: "Courier recursive", Courier, monospace;
}

.nerdy-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nerdy-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; opacity: 0.4;
}

.nerdy-content {
    position: relative;
    z-index: 2; 
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
}

.nerdy-title {
    font-size: clamp(2rem, 8vw, 6rem);
    color: #ff00ff;
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2vh;
    letter-spacing: 0.1em;
}

.nerdy-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; padding: 2vw; gap: 2vw;
}

.nerdy-box {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(0, 50, 0, 0.3); border: 1px solid #00ff00;
    border-radius: 10px; padding: 2vh 0; box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.2);
}

.nerdy-val {
    font-size: clamp(2.5rem, 10vw, 12rem);
    color: #00ff00; text-shadow: 0 0 10px #00ff00; line-height: 1;
}

.nerdy-lbl {
    font-size: clamp(1rem, 2.5vw, 2rem);
    color: #ffff00; text-shadow: 0 0 5px #ffff00; margin-top: 10px; text-transform: lowercase;
}

@media (max-width: 900px) { .nerdy-grid { grid-template-columns: repeat(2, 1fr); gap: 4vw; } }
@media (max-width: 500px) { .nerdy-grid { grid-template-columns: 1fr; gap: 2vw; } }


/* =========================================================
   THEME: VAPORWAVE
   ========================================================= */
body.theme-vaporwave {
    --bg: #1d0233; --fg: #00ffff; --border-color: #ff00ba;
    --font: "Trebuchet MS", sans-serif;
}

.vapor-container {
    position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
    background: linear-gradient(to bottom, #05012a 0%, #3a005c 50%, #1d0233 100%);
}

.vapor-grid-bg {
    position: absolute; bottom: 0; left: -50%; width: 200%; height: 50%;
    background-image: linear-gradient(rgba(0, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.3) 1px, transparent 1px);
    background-size: 40px 40px; transform: perspective(500px) rotateX(60deg); animation: vaporGridMove 2s linear infinite; z-index: 1;
}

@keyframes vaporGridMove {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
}

.vapor-content {
    position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; width: 100%;
}

.vapor-title {
    flex: 0 1 auto; text-align: center; padding: 5vh 2vw; font-size: clamp(2rem, 8vw, 6rem);
    color: #ff00ba; text-transform: uppercase; font-style: italic; letter-spacing: 0.2em;
    text-shadow: 3px 3px 0px #00ffff, -2px -2px 0px #4200ff;
}

.vapor-clock {
    flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; justify-content: space-around; padding: 0 2vw;
}

.vapor-box { display: flex; flex-direction: column; align-items: center; }

.vapor-val {
    font-size: clamp(3rem, 10vw, 14rem); color: #00ffff; font-style: italic; text-shadow: 4px 4px 0px #ff00ba; letter-spacing: -2px;
}

.vapor-lbl {
    font-size: clamp(1rem, 3vw, 2.5rem); color: #ff00ba; font-weight: bold; text-transform: uppercase;
    background: #000; padding: 5px 15px; border: 2px solid #00ffff; margin-top: -10px; z-index: 3;
}

@media (max-width: 900px) { .vapor-clock { flex-wrap: wrap; } .vapor-box { flex: 1 1 50%; padding: 2vh 0; } }
@media (max-width: 500px) { .vapor-box { flex: 1 1 100%; } }


/* =========================================================
   THEME: SPACE (Modern Artemis/SLS Liftoff)
   ========================================================= */
body.theme-space {
    --bg: #03040b; --fg: #ffffff; --border-color: #4a4e69;
    --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.space-container {
    position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;
    background: linear-gradient(to bottom, #010205 0%, #060919 100%);
    overflow: hidden; 
}

/* Pure CSS Starfield */
.space-stars {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 50px 70px, rgba(255,255,255,0.6), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 120px 140px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 180px 40px, rgba(255,255,255,0.7), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 240px 190px, rgba(255,255,255,0.5), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 300px 90px, rgba(255,255,255,0.8), rgba(0,0,0,0));
    background-repeat: repeat; background-size: 350px 350px;
    animation: starsDrift 60s linear infinite;
}

@keyframes starsDrift {
    0% { transform: translateY(0); }
    100% { transform: translateY(350px); }
}

.space-content {
    position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; width: 100%;
}

.space-title {
    flex: 0 1 auto; text-align: center; padding: 4vh 2vw 2vh 2vw; font-size: clamp(1.8rem, 6vw, 4rem);
    color: #ffffff; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 300;
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
}

.space-clock {
    flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-content: center; width: 100%; justify-content: space-evenly;
}

.space-box {
    flex: 1 1 25%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0.5rem 0;
}

/* Base Responsive Container for Rockets */
.space-value-container {
    position: relative;
    width: 100%;
    height: 26em; /* Scale headroom */
    font-size: clamp(0.5rem, 3.5vw, 1.2rem);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Pure CSS Rocket Drawing (Artemis/SLS Inspired, White Core) */
.rocket {
    width: 4em; /* Core Width */
    height: 18em;
    position: absolute;
    bottom: 6em; /* Resting pad position */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.rocket-nose {
    width: 4em; height: 5em;
    background: linear-gradient(to right, #999 0%, #e0e0e0 40%, #e0e0e0 60%, #999 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    position: relative; z-index: 2;
}

.rocket-fuselage {
    width: 4em; height: 12em;
    background: linear-gradient(to right, #999 0%, #e0e0e0 40%, #e0e0e0 60%, #999 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding-top: 1.5em; /* Shift window down slightly */
    position: relative; z-index: 2;
}

/* Round Glass Window for Digits */
.rocket-window {
    width: 3.2em; height: 3.2em;
    background: #bbdefb; border: 0.25em solid #546e7a; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0.1em 0.1em 0.3em rgba(0,0,0,0.4), 0 0.2em 0.3em rgba(0,0,0,0.2);
    overflow: hidden;
}

.space-val-text {
    font-size: 1.6em; font-weight: 900; color: #1a237e;
    font-family: 'Courier New', Courier, monospace; letter-spacing: -0.05em; margin-right: -0.05em;
    line-height: 1; text-shadow: none;
}

/* Black Letter Label directly on the fuselage */
.space-unit-text {
    font-size: 1.8em; color: #111; font-weight: 900; 
    margin-top: 0.6em; text-transform: uppercase;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: 0;
}

/* Side SRB Boosters */
.rocket-booster-left, .rocket-booster-right {
    width: 1.4em; height: 14em; 
    position: absolute; bottom: 1.5em; z-index: 3;
    border-radius: 50% 50% 0 0 / 15% 15% 0 0;
}

.rocket-booster-left {
    left: -1.1em; 
    background: linear-gradient(to right, #777 0%, #fff 60%, #ccc 100%);
    box-shadow: inset 0 1.5em 0 #222; /* Black nosecone tip */
}

.rocket-booster-right {
    right: -1.1em; 
    background: linear-gradient(to right, #ccc 0%, #fff 40%, #777 100%);
    box-shadow: inset 0 1.5em 0 #222; /* Black nosecone tip */
}

.rocket-exhaust {
    width: 2.5em; height: 1em;
    background: linear-gradient(to right, #111, #444, #111);
    border-radius: 0 0 0.5em 0.5em; position: relative; z-index: 2;
}

/* Dynamic Flame */
.rocket-flame {
    width: 5em; height: 0; /* Hidden initially */
    background: linear-gradient(to bottom, #ffffff 0%, #ffea00 20%, #ff2a00 80%, transparent 100%);
    position: absolute; top: 18em; border-radius: 50% 50% 20% 20%;
    transform-origin: top; z-index: 1; filter: blur(2px); opacity: 0;
}

/* --- SPACE ANIMATIONS --- */

/* Initial Load - Spawns instantly without delay */
.rocket.initial-rocket {
    transform: translateY(0); opacity: 1;
}

/* =========================================
   STANDARD LAUNCH (Minutes, Hours, Days)
   ========================================= */
/* New Rocket rolling up onto the pad.
   Liftoff starts at 1.5s (end of rumble).
   1 second into liftoff = 2.5s delay. */
.rocket.new-rocket {
    animation: fadeInRocket 0.8s 2.5s ease-out both;
}

/* Old Rocket Liftoff Sequence (Rumble + Slow Heavy Liftoff) */
.rocket.launch {
    animation: rumble 1.5s linear, liftoff 2s 1.5s ease-in forwards;
    z-index: 50; /* Keeps launching rocket in front */
}

/* Engine Ignition and continuous burning */
.rocket.launch .rocket-flame {
    animation: ignite 1.5s forwards, flameFlicker 0.1s 1.5s infinite alternate;
}

/* =========================================
   FAST-TRACK LAUNCH (Seconds Only)
   ========================================= */
/* Shoots off instantly with high velocity to clear the pad.
   Snaps to full brightness/opacity to simulate a powered-up state. */
.rocket.launch-fast {
    animation: liftoffFast 2s ease-in forwards;
    z-index: 50; /* Keeps launching rocket in front of the sliding one */
}

.rocket.launch-fast .rocket-flame {
    animation: igniteFast 2s forwards;
}

/* Arrives right behind the old rocket, sliding in from the right.
   Keeps a darker/transparent appearance to stay out of focus.
   Duration: 0.9s. Delay: 0.1s. Total = 1.0s (fills the tick gap) */
.rocket.new-rocket-fast {
    animation: slideInRocketRight 0.9s 0.1s ease-out both;
    z-index: 10; /* Stays behind the launching rocket */
}


/* =========================================
   ANIMATION KEYFRAMES
   ========================================= */
@keyframes fadeInRocket {
    0% { transform: translateY(5em); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideInRocketRight {
    0% { transform: translateX(8em); opacity: 0; filter: brightness(0.6); }
    15% { opacity: 0.6; filter: brightness(0.6); }
    100% { transform: translateX(0); opacity: 0.6; filter: brightness(0.6); }
}

@keyframes rumble {
    0%, 100% { transform: translate(0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-0.15em, 0.1em); }
    20%, 40%, 60%, 80% { transform: translate(0.15em, -0.1em); }
}

@keyframes liftoff {
    0% { transform: translateY(0); }
    100% { transform: translateY(-120vh); }
}

@keyframes liftoffFast {
    0% { transform: translateY(0); opacity: 1; filter: brightness(1); }
    100% { transform: translateY(-120vh); opacity: 1; filter: brightness(1); }
}

@keyframes ignite {
    0% { height: 0; opacity: 0; }
    30% { height: 2em; opacity: 0.8; }
    100% { height: 12em; opacity: 1; }
}

@keyframes igniteFast {
    0% { height: 0; opacity: 0; }
    20% { height: 6em; opacity: 1; }
    100% { height: 12em; opacity: 1; }
}

@keyframes flameFlicker {
    0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
    100% { transform: scaleY(1.05) scaleX(1.05); opacity: 1; }
}