/* =========================================================================
   App-specific styles - Interactive Clock ("Time Teacher")
   Brand-aligned twilight theme (pink/purple) with an animated day/night sky.
   Desktop-first: fills the 1200px container, sits in a stable ~800px-high box,
   clocks side-by-side on desktop and stacked on mobile. Focus mode fills the
   browser WINDOW. Collapsible panels never reflow the page (locked min-height).
   ========================================================================= */

:root {
    /* Brand-aligned twilight theme */
    --theme-primary: #8B5FBF;          /* twilight purple (header bar) */
    --theme-primary-light: #9e78e8;    /* site soft purple */
    --theme-primary-dark: #6B4A9E;
    --theme-secondary-accent: #ff85a2; /* site pink */
    --theme-text-on-primary: #ffffff;

    --app-bg-page: #F3EEFC;            /* soft lavender behind the card */

    /* Clock card surface (animated between these via JS) */
    --surface-night-top: #140e29;
    --surface-night-bottom: #231541;

    /* Text on the dark card */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.72);

    /* Accents */
    --accent: #d5c8ff;                 /* lavender */
    --accent-glow: rgba(213, 200, 255, 0.45);
    --accent-soft: rgba(158, 120, 232, 0.16);
    --rose: #ff85a2;                   /* pink */

    /* Clock face */
    --clock-face: rgba(20, 12, 38, 0.9);
    --clock-border: rgba(213, 200, 255, 0.3);
    --hour-hand: #ff85a2;              /* pink */
    --minute-hand: #ffffff;
    --tick-major: rgba(213, 200, 255, 0.75);
    --tick-minor: rgba(255, 255, 255, 0.32);
    --number-color: rgba(213, 200, 255, 0.92);

    /* Digital */
    --digit-bg: rgba(20, 12, 38, 0.6);
    --digit-border: rgba(158, 120, 232, 0.3);

    /* Collapsible panels */
    --panel-bg: rgba(255, 255, 255, 0.08);
    --panel-border: rgba(213, 200, 255, 0.42);
}

/* Soft lavender behind the app card (first .page-section in <main>) */
main > .page-section:first-of-type {
    background-color: var(--app-bg-page);
}

/* ── APP CONTAINER ──────────────────────────────────────────────────────── */
.app-container {
    border: 1px solid rgba(158, 120, 232, 0.35);
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--surface-night-bottom);
    color: var(--text-primary);
    text-align: left;
    max-width: 100%;                 /* fill the 1200px .container */
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;   /* don't animate size - avoids face stretch on focus */
    box-shadow: 0 18px 50px rgba(40, 22, 70, 0.22);
    -webkit-tap-highlight-color: transparent;
}

.app-header {
    display: grid;
    grid-template-columns: 1fr 13fr 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    background-color: var(--theme-primary);
    color: var(--theme-text-on-primary);
    border-bottom: 1px solid var(--theme-primary-dark);
}
.app-header-title { grid-column: 2; text-align: center; padding: 0 1rem; }
.app-header h2 {
    font-size: 1.2rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Focus-mode toggle (wired by main.js) */
.app-header .btn-icon { justify-self: end; }
.btn-icon {
    background: transparent;
    border: none;
    color: var(--theme-text-on-primary);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.btn-icon:hover { background: rgba(255, 255, 255, 0.16); }
.btn-icon .fa-compress { display: none; }
.app-container.is-focused .btn-icon .fa-expand { display: none; }
.app-container.is-focused .btn-icon .fa-compress { display: inline-flex; }

/* ── CLOCK SURFACE (animated day/night background) ──────────────────────── */
.clock-surface {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--surface-night-top), var(--surface-night-bottom));
    transition: background 1s ease;
}

/* ── SKY BANNER ─────────────────────────────────────────────────────────── */
.sky-banner {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(213, 200, 255, 0.12);
}
.sky-gradient { position: absolute; inset: 0; transition: background 1s ease; }
.stars-container { position: absolute; inset: 0; transition: opacity 1s ease; }

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: twinkle 2s ease-in-out infinite alternate;
}
@keyframes twinkle {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

.celestial-body { position: absolute; }
.sun {
    width: 56px; height: 56px; top: 20px;
    background: radial-gradient(circle, #fff8e1 0%, #ffcc80 40%, #ff9800 100%);
    border-radius: 50%;
    box-shadow: 0 0 50px 20px rgba(255, 200, 100, 0.3), 0 0 100px 40px rgba(255, 170, 70, 0.15);
}
.sun-rays {
    position: absolute; inset: -18px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 200, 0.12) 0%, transparent 70%);
    animation: pulse-rays 4s ease-in-out infinite;
}
@keyframes pulse-rays {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.4); opacity: 1; }
}
.moon {
    width: 46px; height: 46px; top: 25px;
    background: radial-gradient(circle at 35% 35%, #faf5e4 0%, #e8ddc0 50%, #c8bb9a 100%);
    border-radius: 50%;
    box-shadow: 0 0 35px 12px rgba(250, 240, 220, 0.2), 0 0 70px 25px rgba(250, 240, 220, 0.08);
}
.moon-crater { position: absolute; background: rgba(0, 0, 0, 0.06); border-radius: 50%; }
.moon-crater:nth-child(1) { width: 9px; height: 9px; top: 11px; left: 14px; }
.moon-crater:nth-child(2) { width: 6px; height: 6px; top: 23px; left: 26px; }
.moon-crater:nth-child(3) { width: 4px; height: 4px; top: 9px;  left: 28px; }
.ground {
    position: absolute; bottom: 0; width: 100%; height: 45px;
    transition: background 1s ease;
    border-radius: 50% 50% 0 0 / 22px 22px 0 0;
}
.cloud { position: absolute; background: rgba(255, 255, 255, 0.55); border-radius: 50px; transition: opacity 1s ease; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.cloud-1 { width: 80px; height: 25px; top: 45px; animation: cloud-drift 28s linear infinite; }
.cloud-1::before { width: 35px; height: 35px; top: -18px; left: 12px; }
.cloud-1::after  { width: 28px; height: 28px; top: -10px; left: 42px; }
.cloud-2 { width: 60px; height: 20px; top: 85px; opacity: 0.4; animation: cloud-drift 38s linear infinite; animation-delay: -12s; }
.cloud-2::before { width: 28px; height: 28px; top: -14px; left: 10px; }
.cloud-2::after  { width: 22px; height: 22px; top: -8px;  left: 32px; }
@keyframes cloud-drift { 0% { left: -120px; } 100% { left: calc(100% + 120px); } }

/* ── RANDOM-TIME CONTROL ────────────────────────────────────────────────── */
.controls { display: flex; justify-content: center; padding: 22px 20px 0; flex-shrink: 0; }
.random-btn {
    background: rgba(139, 95, 191, 0.82);
    border: 1.5px solid rgba(213, 200, 255, 0.55);
    color: #ffffff;
    padding: 11px 26px;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    transition: all 0.3s ease;
    user-select: none;
}
.random-btn:hover {
    background: rgba(139, 95, 191, 0.95);
    border-color: rgba(213, 200, 255, 0.8);
    transform: scale(1.05);
    box-shadow: 0 0 26px rgba(158, 120, 232, 0.35);
}
.random-btn:active { transform: scale(0.97); }
.dice-icon { width: 20px; height: 20px; }

/* ── MAIN: two columns (digital | analog), compact height ───────────────── */
.app-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    justify-items: center;
    gap: 24px;
    padding: 20px 24px 28px;
    min-height: 300px;               /* guard: collapsing a panel can't reflow the page */
}

/* ── COLLAPSIBLE PANELS ─────────────────────────────────────────────────── */
.panel {
    flex: 0 0 auto;
    max-width: 340px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    backdrop-filter: blur(20px);
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.panel-header {
    display: flex; align-items: center; justify-content: center;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(213, 200, 255, 0.15);
    cursor: pointer; user-select: none; gap: 8px;
}
.panel-header:hover { background: rgba(158, 120, 232, 0.1); }
.panel-icon { width: 22px; height: 22px; opacity: 0.8; color: var(--accent); }
.collapse-arrow { width: 16px; height: 16px; opacity: 0.6; transition: transform 0.3s ease; margin-left: auto; color: var(--accent); }
.panel.collapsed .collapse-arrow { transform: rotate(-90deg); }
.panel-body { overflow: hidden; transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.3s ease; max-height: 600px; opacity: 1; }
.panel.collapsed .panel-body { max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; }

/* ── ANALOG CLOCK ───────────────────────────────────────────────────────── */
.analog-clock-container { padding: 24px; display: flex; align-items: center; justify-content: center; }
.analog-clock {
    width: 234px; height: 234px;     /* one value drives the whole analog clock */
    border-radius: 50%;
    background: var(--clock-face);
    border: 2px solid var(--clock-border);
    position: relative;
    box-shadow: 0 0 50px rgba(158, 120, 232, 0.1), inset 0 0 30px rgba(0, 0, 0, 0.22);
    touch-action: none;
}
.clock-tick { position: absolute; left: 50%; top: 0; transform-origin: center bottom; }
.clock-tick.major { width: 2.5px; margin-left: -1.25px; height: 16px; background: var(--tick-major); border-radius: 2px; }
.clock-tick.minor { width: 1px;   margin-left: -0.5px;  height: 8px;  background: var(--tick-minor); border-radius: 1px; }
.clock-number {
    position: absolute; font-family: inherit; font-weight: 700;
    color: var(--number-color);
    transform: translate(-50%, -50%);   /* centre on the JS point; size-independent */
    white-space: nowrap; user-select: none;
    /* font-size set in JS, proportional to the clock radius */
}
.hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-radius: 6px; cursor: grab; z-index: 10; }
.hand:active { cursor: grabbing; }
/* Hand & hitbox lengths are % of the clock height, so they track its size */
.hand-hour { width: 5px; margin-left: -2.5px; height: 26%; background: linear-gradient(to top, var(--hour-hand), rgba(255,133,162,0.8)); box-shadow: 0 0 14px rgba(255,133,162,0.5); z-index: 11; }
.hand-minute { width: 3px; margin-left: -1.5px; height: 36.5%; background: linear-gradient(to top, var(--minute-hand), rgba(255,255,255,0.7)); box-shadow: 0 0 10px rgba(255,255,255,0.3); z-index: 12; }
.hand-hitbox { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; cursor: grab; z-index: 20; }
.hand-hitbox:active { cursor: grabbing; }
.hitbox-hour   { width: 30px; margin-left: -15px; height: 30%; }
.hitbox-minute { width: 26px; margin-left: -13px; height: 40%; }
.clock-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: var(--rose); border-radius: 50%; z-index: 15; box-shadow: 0 0 10px var(--accent-glow); }

/* ── DIGITAL CLOCK (one value - container font-size - drives it) ─────────── */
.digital-clock-container { padding: 26px 32px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 34px; }
.digit-group { display: flex; gap: 5px; }
.digit {
    width: 1.42em; height: 2.1em;
    background: var(--digit-bg);
    border: 1px solid var(--digit-border);
    border-radius: 0.37em;
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', monospace;
    font-size: 1em;
    color: var(--text-primary);
    text-shadow: 0 0 18px var(--accent-glow);
    position: relative; overflow: hidden;
}
.digit::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(213,200,255,0.1); }
.digit-separator { font-family: 'DM Mono', monospace; font-size: 1em; color: var(--rose); line-height: 2.1em; animation: blink-colon 2.5s ease-in-out infinite; }
@keyframes blink-colon { 0%, 40%, 60%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* =========================================================================
   FOCUS MODE - fill the browser WINDOW (desktop). Pattern matches the
   other seven apps; main.js toggles .is-focused + body.focus-mode-active.
   ========================================================================= */
body.focus-mode-active { overflow: hidden; }
body.focus-mode-active .site-header,
body.focus-mode-active .footer,
body.focus-mode-active main > *:not(#app-section-wrapper) { display: none; }
body.focus-mode-active #app-section-wrapper { padding: 0; background-color: transparent; }
body.focus-mode-active #app-section-wrapper .container { max-width: none; padding: 0; }

.app-container.is-focused {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 2000;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.app-container.is-focused .clock-surface { flex: 1; min-height: 0; }
.app-container.is-focused .app-main { flex: 1; min-height: 0; align-content: start; overflow-y: auto; }
.app-container.is-focused .sky-banner { height: 200px; }
.app-container.is-focused .analog-clock { width: 252px; height: 252px; }
.app-container.is-focused .digital-clock-container { font-size: 36px; }

/* ── RESPONSIVE (desktop-first; scale DOWN) ─────────────────────────────── */
@media (max-width: 768px) {
    .app-container { height: auto; }
    .app-main { grid-template-columns: 1fr; gap: 18px; padding: 22px 16px 28px; }
    .sky-banner { height: 180px; }
    .sun { width: 45px; height: 45px; }
    .moon { width: 38px; height: 38px; }
    .analog-clock { width: 208px; height: 208px; }
    .analog-clock-container { padding: 18px; }
    .digital-clock-container { padding: 18px 20px; font-size: 31px; }

    /* Focus mode on mobile: flow normally, just fill at least one window */
    body.focus-mode-active { overflow: auto; }
    .app-container.is-focused {
        position: static;
        height: auto;
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: visible;
    }
    .app-container.is-focused .sky-banner { height: 180px; }
    .app-container.is-focused .analog-clock { width: 216px; height: 216px; }
    .app-container.is-focused .digital-clock-container { font-size: 31px; }
}

@media (max-width: 480px) {
    .sky-banner { height: 150px; }
    .sun { width: 38px; height: 38px; }
    .sun-rays { inset: -10px; }
    .moon { width: 32px; height: 32px; }
    .moon-crater:nth-child(1) { width: 7px; height: 7px; top: 8px;  left: 10px; }
    .moon-crater:nth-child(2) { width: 5px; height: 5px; top: 17px; left: 19px; }
    .moon-crater:nth-child(3) { width: 3px; height: 3px; top: 7px;  left: 20px; }
    .analog-clock { width: 180px; height: 180px; }
    .analog-clock-container { padding: 14px; }
    .digital-clock-container { padding: 14px; gap: 4px; font-size: 25px; }
    .digit-group { gap: 3px; }
    .random-btn { padding: 10px 22px; font-size: 0.95rem; }
    .app-header h2 { font-size: 1.05rem; }
}