/* Public pages: landing, privacy, guardian consent, errors. Palette from kinx-site-temp. */
:root {
    --night: #1B1446;
    --night-deep: #120D33;
    --panel: #251C5C;
    --lilac: #B9A6FF;
    --signal: #DF002E;
    --paper: #F5F3FF;
    --muted: #A49FC9;
    --ok: #3DDC97;
    color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.site {
    background: var(--night-deep);
    color: var(--paper);
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex; flex-direction: column;
}
body.site > main { flex: 1; }
a { color: inherit; }
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
[hidden] { display: none !important; }

/* Header */
.site-header { padding: 1.25rem 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand img { height: 2.5rem; width: auto; display: block; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    background: var(--signal);
    color: #FFFFFF;
    border: 1px solid var(--signal);
    border-radius: 999px;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    cursor: pointer;
}
.btn:hover { background: #F0123F; border-color: #F0123F; }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: rgba(185, 166, 255, .08); color: var(--paper); border-color: rgba(185, 166, 255, .45); }
.btn.ghost:hover { background: rgba(185, 166, 255, .16); border-color: var(--lilac); }
/* Friendly, not alarming: for the guardian's Approve. */
.btn.calm { background: #5B3FD9; border-color: #5B3FD9; }
.btn.calm:hover { background: #6A50E6; border-color: #6A50E6; }
.btn.small { font-size: 0.9rem; padding: 0.55rem 1.1rem; }

/* Hero */
.hero {
    background: radial-gradient(circle at 80% 110%, #3A2A8F 0%, var(--night) 45%, var(--night-deep) 100%);
    padding: 4.5rem 0 5rem;
    border-bottom: 2px solid var(--panel);
}
.hero-logo { width: min(26rem, 85vw); height: auto; display: block; margin-bottom: 2rem; }
.hero h1 {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 8vw, 5.5rem);
    line-height: 0.95;
    max-width: 14ch;
    text-shadow: 0.05em 0.05em 0 var(--lilac);
}
.hero p { margin-top: 1.5rem; max-width: 36rem; font-size: 1.25rem; color: var(--paper); }
.hero .since { color: var(--signal); font-weight: 700; }
.actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Sections */
section { padding: 4.5rem 0; }
h2 {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 5vw, 2.75rem);
    line-height: 1;
    margin-bottom: 2rem;
}
.play-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 52rem) {
    .play-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.play-card {
    padding: 1.75rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(185, 166, 255, .10), rgba(185, 166, 255, .03) 60%);
    border: 1px solid rgba(185, 166, 255, .14);
    transition: border-color .2s, transform .2s;
}
.play-card:hover { border-color: rgba(185, 166, 255, .35); transform: translateY(-3px); }
.play-icon {
    display: grid; place-items: center;
    width: 3rem; height: 3rem;
    margin-bottom: 1.25rem;
    border-radius: 0.9rem;
    background: rgba(223, 0, 46, .14);
    color: #FF4D6D;
}
.play-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.play-grid h3 { font-size: 1.3rem; color: var(--paper); margin-bottom: 0.5rem; }
.play-grid p { color: var(--muted); line-height: 1.6; }

.visit { background: var(--night); border-top: 2px solid var(--panel); }
.visit-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 52rem) {
    .visit-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.visit-card {
    padding: 1.75rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(185, 166, 255, .10), rgba(185, 166, 255, .03) 60%);
    border: 1px solid rgba(185, 166, 255, .14);
}
.visit ul { list-style: none; }
.visit h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.visit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.visit-card-head h3 { margin-bottom: 0; }
.visit .big { font-size: 1.5rem; font-weight: 700; }

.status { font-size: 0.85rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; margin-right: 0.45rem; vertical-align: 0.05em; }
.status.open { color: var(--ok); background: rgba(61, 220, 151, .12); }
.status.closed { color: #FF4D6D; background: rgba(223, 0, 46, .14); }

.week li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; border-radius: 0.6rem; color: var(--muted); }
.week li span:last-child { text-align: right; color: var(--paper); }
.week li.today { background: rgba(185, 166, 255, .10); color: var(--paper); font-weight: 700; }

.contact { display: grid; gap: 0.5rem; }
.contact a {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.75rem; margin: 0 -0.75rem;
    border-radius: 0.9rem;
    text-decoration: none;
    font-size: 1.2rem; font-weight: 700;
    transition: background .15s;
}
.contact a:hover { background: rgba(185, 166, 255, .08); }
.contact small { display: block; font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-bottom: 0.1rem; }
.contact-icon {
    flex: none; display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 0.9rem;
    background: rgba(223, 0, 46, .14); color: #FF4D6D;
}
.contact-icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.site-footer { padding: 2rem 0; color: var(--muted); font-size: 0.9rem; border-top: 2px solid var(--panel); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.footer-links { display: flex; gap: 1.5rem; }

/* Simple text pages (privacy, consent, errors) */
.page { padding: 3rem 0 5rem; }
.page .wrap { max-width: 44rem; }
.page h1 {
    font-family: "Bungee", sans-serif; font-weight: 400;
    font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.05; margin-bottom: 1.5rem;
    text-shadow: 0.05em 0.05em 0 var(--lilac);
}
.page h2 { font-size: 1.35rem; margin: 2.25rem 0 0.75rem; }
.page p, .page li { color: var(--paper); margin-bottom: 0.9rem; }
.page ul { padding-left: 1.25rem; }
.page .muted, .muted { color: var(--muted); }

.panel {
    background: var(--night); border: 2px solid var(--panel);
    padding: 1.75rem; margin: 1.5rem 0;
}
.panel.signal { border-color: var(--lilac); box-shadow: 6px 6px 0 var(--panel); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 700; }

.check-row { display: flex; gap: 0.75rem; align-items: flex-start; margin: 1.5rem 0; cursor: pointer; }
.check-row input { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; accent-color: var(--signal); flex: none; }
.decide-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
.decide-row .btn { font-size: 1.05rem; }
.form-error { color: #FF6B86; font-weight: 700; margin-bottom: 1rem; }
.result-icon { font-family: "Bungee", sans-serif; font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.result-icon.ok { color: var(--ok); }
.result-icon.no { color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
    .btn, .play-card { transition: none; }
    .play-card:hover { transform: none; }
    html { scroll-behavior: auto; }
}