/* ================================================================
   COUNTDOWN TIMERS (Space Timers, 18 October 2026)
   Shared by the hub (page-countdown-timers.php, /countdown-timer/) and
   each timer page (page-countdown-timer.php, /countdown-timer/moon/).
   Built on the shared sim framework (ss-sim.css); st- is these pages.
   ================================================================ */

/* a compact title, so the whole timer (Start included) fits on the
   first screen of a 1920x1080 classroom TV */
.st-page .st-hero { padding: 1.2rem 0 0; text-align: center; }
.st-page .st-kicker {
    margin: 0 0 .2rem; font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: var(--sim-accent);
}
.st-page .st-kicker a { color: inherit; text-decoration: none; }
.st-page .st-kicker a:hover, .st-page .st-kicker a:focus-visible { text-decoration: underline; }
/* the Moon timer's own separator: a waxing crescent, lit on the right */
.st-page .st-sep {
    display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.2em; margin: 0 .6em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 3a9 9 0 0 1 0 18a15 15 0 0 0 0-18z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 3a9 9 0 0 1 0 18a15 15 0 0 0 0-18z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.st-page .st-title { margin: 0 0 .3rem; font-family: 'Space Grotesk', sans-serif; font-size: 2.3rem; font-weight: 700; line-height: 1.05; color: var(--sim-text); }
/* the first section after the title sits closer to it */
.st-page .ss-sim-section.st-first { padding-top: 1rem; }
.st-page .st-sub { max-width: 820px; margin: 0 auto 1rem; padding: 0 1rem; font-size: 1.05rem; line-height: 1.5; color: var(--sim-text-muted); }

/* the timer's frame: as wide as the content, but never taller than the
   screen under the header (two nested caps instead of min(), which old
   TV browsers do not know) */
.st-page .st-frame-outer { max-width: var(--content-w, 1520px); margin: 0 auto; padding: 0 1.5rem; }
.st-page .st-frame-inner { max-width: calc((100vh - 320px) * 16 / 9); margin: 0 auto; }
.st-page .st-frame {
    position: relative; padding-bottom: 56.25%; overflow: hidden; background: #000;
    border: 1px solid rgba(var(--sim-frame), .28); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.st-page .st-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.st-page .st-under { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: .7rem; font-size: .88rem; color: var(--sim-dim-bright); }
.st-page .st-under span { margin: 0 0 .3rem; }
.st-page .st-under b { color: var(--sim-active); font-weight: 600; }
.st-page kbd { padding: 1px 7px; border: 1px solid rgba(247, 250, 252, .35); border-radius: 5px; font: 600 .82rem Inter, sans-serif; color: var(--sim-text); }

/* cards in a grid */
.st-page .st-grid { display: grid; gap: 1rem; margin: 1rem auto 0; text-align: left; }
.st-page .st-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 980px; }
.st-page .st-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1180px; }
.st-page .st-grid-4 { grid-template-columns: repeat(4, 1fr); max-width: 1180px; }
.st-page .st-card {
    padding: 1.3rem 1.4rem; border-radius: 14px;
    background: var(--glass-bg); border: 1px solid rgba(var(--sim-frame), .16);
}
.st-page .st-card h3 { margin: 0 0 .45rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--sim-text); }
.st-page .st-card p { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--sim-text-muted); }
.st-page .st-card .st-num { margin: 0 0 .3rem; font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--sim-active); }

/* the hub's timer cards: a picture on top, words underneath. The Moon
   card is a link; timers still to come are dimmed, with a drawn sphere
   standing in for their picture. */
.st-page .st-timers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1180px; margin: 1.6rem auto 0; text-align: left; }
.st-page .st-timer {
    display: block; overflow: hidden; border-radius: 14px; text-decoration: none;
    background: var(--glass-bg); border: 1px solid rgba(var(--sim-frame), .16);
}
.st-page a.st-timer { transition: border-color .2s ease, transform .2s ease; }
.st-page a.st-timer:hover, .st-page a.st-timer:focus-visible { border-color: var(--sim-active); transform: translateY(-2px); }
.st-page .st-timer-pic { position: relative; padding-bottom: 56.25%; overflow: hidden; background: #000; }
.st-page .st-timer-pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.st-page .st-timer-body { padding: 1rem 1.15rem 1.15rem; }
.st-page .st-timer-tag { display: inline-block; margin: 0 0 .45rem; padding: 2px 9px; border-radius: 20px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.st-page .st-timer-tag.is-ready { background: rgba(250, 219, 103, .18); color: var(--sim-active); }
.st-page .st-timer-tag.is-soon { background: rgba(247, 250, 252, .1); color: var(--sim-dim-bright); }
.st-page .st-timer h3 { margin: 0 0 .35rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--sim-text); }
.st-page .st-timer p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--sim-text-muted); }
.st-page .st-timer-go { display: inline-block; margin-top: .7rem; font-size: .9rem; font-weight: 600; color: var(--sim-active); }
.st-page .st-timer.is-soon { opacity: .7; }
.st-page .st-sphere { position: absolute; top: 50%; left: 50%; width: 42%; padding-bottom: 42%; margin: -21% 0 0 -21%; border-radius: 50%; }
.st-page .st-sphere-sun { background: radial-gradient(circle at 40% 38%, #fff4c2 0%, #ffc94d 30%, #f08a1c 62%, #b8460c 100%); box-shadow: 0 0 40px rgba(255, 170, 60, .45); }
.st-page .st-sphere-mars { background: radial-gradient(circle at 38% 36%, #f0b48a 0%, #c8693c 40%, #8a3a1c 75%, #4a1c0e 100%); }
.st-page .st-sphere-saturn { width: 34%; padding-bottom: 34%; margin: -17% 0 0 -17%; background: radial-gradient(circle at 40% 36%, #fbefc9 0%, #e3c27e 45%, #a8803e 80%, #6a4e22 100%); }
.st-page .st-sphere-saturn::after {
    content: ""; position: absolute; top: 38%; left: -32%; width: 164%; height: 24%;
    border: 3px solid rgba(232, 208, 150, .75); border-radius: 50%; transform: rotate(-12deg);
}

/* the strips of cards: the cards, grid and outline buttons are the site's
   own (style.css); only spacing and the puzzle card's icon and level tag
   are here, as on the Moon page (moon.css) */
.st-page .st-pick-grid { margin-top: 1.5rem; text-align: left; }
.st-page .st-strip-cta { margin-top: 1.5rem; text-align: center; }
.st-page .st-puzzles .sspz-fp-card .sspz-card-icon {
    position: absolute; right: -12px; bottom: -12px; height: 90%; aspect-ratio: 1 / 1; width: auto;
    opacity: .65; pointer-events: none; z-index: 0; transition: transform .25s ease, opacity .25s ease;
}
.st-page .st-puzzles .sspz-fp-card:hover .sspz-card-icon { opacity: .32; transform: scale(1.05); }
.st-page .st-puzzles .sspz-fp-body { position: relative; z-index: 1; }
.st-page .st-puzzles .sspz-fp-chip {
    display: inline-block; margin-top: .5rem; padding: 2px 9px; border-radius: 20px;
    font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.st-page .st-puzzles .sspz-fp-chip-spark     { background: rgba(74, 159, 212, .18); color: var(--nebula-turquoise, #4A9FD4); }
.st-page .st-puzzles .sspz-fp-chip-charge    { background: rgba(226, 144, 0, .18);  color: var(--amber, #E29000); }
.st-page .st-puzzles .sspz-fp-chip-supernova { background: rgba(205, 90, 36, .20);  color: var(--supernova-orange, #CD5A24); }

/* a strip with fewer than three cards: centre them rather than leave a
   gap on the right. The site's grid has 12 columns and each card spans
   4 (6 on tablets, all 12 on phones, where nothing needs moving). */
@media (min-width: 1025px) {
    .st-page .st-pick-grid.st-count-2 > :first-child { grid-column: 3 / span 4; }
    .st-page .st-pick-grid.st-count-1 > :first-child { grid-column: 5 / span 4; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .st-page .st-pick-grid.st-count-1 > :first-child { grid-column: 4 / span 6; }
}

/* sharing: the same button as the Moon page (moon.css), opening the
   site's share pop-up (ss-share-modal.php) */
.st-page .st-share { margin: 2rem auto 0; text-align: center; }
.st-page .st-share-btn {
    display: inline-flex; align-items: center; gap: .7em; padding: 1em 2.2em;
    border: 0; border-radius: 999px; background: var(--sim-active); color: #14110a;
    font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer; box-shadow: 0 0 0 0 rgba(var(--sim-frame), 0);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.st-page .st-share-btn:hover, .st-page .st-share-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(var(--sim-frame), .35); background: #ffe58a; }
.st-page .st-share-btn .ss-share-open-icon { width: 19px; height: 19px; }
.st-page .st-share-note { margin: .7rem 0 0; font-size: 1rem; color: var(--sim-dim); }

@media (max-width: 1000px) {
    .st-page .st-grid-3, .st-page .st-grid-4, .st-page .st-timers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .st-page .st-grid-2, .st-page .st-grid-3, .st-page .st-grid-4, .st-page .st-timers { grid-template-columns: 1fr; }
    .st-page .st-title { font-size: 2rem; }
    .st-page .st-frame-outer { padding: 0 1rem; }
    .st-page .st-under { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .st-page a.st-timer, .st-page .st-share-btn, .st-page .st-puzzles .sspz-fp-card .sspz-card-icon { transition: none; }
    .st-page a.st-timer:hover, .st-page .st-share-btn:hover, .st-page .st-puzzles .sspz-fp-card:hover .sspz-card-icon { transform: none; }
}