/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
    background: var(--surface);
    border-bottom: 3px solid var(--lav-200);
}

.masthead--sticky { position: sticky; top: 0; z-index: 50; }

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    flex-wrap: wrap;
}

.wordmark { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); }
.wordmark:hover { text-decoration: none; }

.wordmark__mark {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid var(--violet);
    box-shadow: 0 3px 0 var(--violet-d);
}

.wordmark__name {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.05;
    color: var(--heading);
}

.wordmark__tagline {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-mute);
}

.masthead__nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.crumb { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.crumb__divider { color: var(--lav-300); font-weight: 800; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--violet);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--violet-d);
    transition: transform 90ms ease, box-shadow 90ms ease, background 120ms ease;
}

.btn:hover { background: var(--violet-d); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--violet-d); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:active { transform: none; box-shadow: 0 4px 0 var(--violet-d); }

.btn--ghost {
    background: var(--surface);
    color: var(--violet-ink);
    box-shadow: 0 4px 0 var(--lav-200);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--violet-ink); }
.btn--ghost:active { box-shadow: 0 0 0 var(--lav-200); }

.btn--sun { background: var(--sun); color: #3d1a80; box-shadow: 0 4px 0 var(--sun-d); }
.btn--sun:hover { background: #ffcb5c; color: #3d1a80; }
.btn--sun:active { box-shadow: 0 0 0 var(--sun-d); }

.btn--mint { background: var(--mint); color: #04372a; box-shadow: 0 4px 0 var(--mint-d); }
.btn--mint:hover { background: #33dbac; color: #04372a; }
.btn--mint:active { box-shadow: 0 0 0 var(--mint-d); }

.btn--lg { font-size: 1.1rem; padding: 0.95rem 1.7rem; }
.btn--block { width: 100%; }

/* Icon-and-label button, used by the theme switch. */
.btn--icon { padding: 0.6rem 0.9rem; gap: 0.45rem; }
.btn--icon svg { width: 19px; height: 19px; flex: none; }

.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }



.link-back {
    background: var(--surface-2);
    border: 0;
    border-radius: var(--r-pill);
    padding: 0.45rem 0.9rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--violet-ink);
    cursor: pointer;
}
.link-back:hover { background: var(--lav-200); }

/* --------------------------------------------------------------------------
   Chips & badges
   -------------------------------------------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--heading);
    background: var(--surface);
    border: 2px solid var(--lav-200);
    border-radius: var(--r-pill);
    padding: 0.35rem 0.8rem;
}

/* Accent names match the "accent" column on a subject, so an admin choosing a
   colour in the editor drives all of these. */
.chip--violet { background: var(--surface-2); border-color: var(--lav-200); }
.chip--sun { background: var(--wash-sun); border-color: var(--wash-sun-line); }
.chip--mint { background: var(--wash-mint); border-color: var(--wash-mint-line); }
.chip--sky { background: var(--wash-sky); border-color: var(--wash-sky-line); }
.chip--coral { background: var(--wash-coral); border-color: var(--wash-coral-line); }

.subject {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--subject, var(--violet));
    border-radius: var(--r-pill);
    padding: 0.28rem 0.75rem;
}

.subject--violet { --subject: #6f45e0; }
.subject--mint   { --subject: #14a97f; }
.subject--sky    { --subject: #1c88df; }
.subject--coral  { --subject: #e04b3f; }
.subject--sun    { --subject: #b57f14; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--violet);
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.16) 0 26%, transparent 26%),
        radial-gradient(circle at 88% 78%, rgba(255, 193, 59, 0.28) 0 22%, transparent 22%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 2.25rem;
    box-shadow: var(--ledge-lg);
}

@media (min-width: 800px) { .hero { padding: 2.75rem 3rem; } }

[data-theme="dark"] .hero {
    background-color: #241a5c;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(139, 99, 248, 0.35) 0 26%, transparent 26%),
        radial-gradient(circle at 88% 78%, rgba(255, 193, 59, 0.2) 0 22%, transparent 22%);
}

.hero h1, .hero h2 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, 0.9); }
.hero .eyebrow { background: rgba(255, 255, 255, 0.18); color: #fff; }
.hero .chip { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: #fff; }

/* Confetti squares floating in the hero corners. */
.hero__confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__confetti i {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    opacity: 0.9;
}

.hero__confetti i:nth-child(1) { background: var(--sun); top: 18%; right: 12%; transform: rotate(18deg); }
.hero__confetti i:nth-child(2) { background: var(--mint); top: 62%; right: 26%; transform: rotate(-12deg); border-radius: 50%; }
.hero__confetti i:nth-child(3) { background: var(--bubble); top: 30%; right: 34%; width: 10px; height: 10px; }
.hero__confetti i:nth-child(4) { background: #fff; bottom: 16%; left: 8%; width: 10px; height: 10px; border-radius: 50%; opacity: 0.7; }
.hero__confetti i:nth-child(5) { background: var(--sun); bottom: 30%; left: 22%; width: 8px; height: 8px; transform: rotate(30deg); }

/* --------------------------------------------------------------------------
   Panels & cards
   -------------------------------------------------------------------------- */

.panel {
    position: relative;
    background: var(--surface);
    border: 3px solid var(--lav-200);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    box-shadow: var(--ledge);
}

@media (min-width: 700px) { .panel { padding: 2.25rem; } }

.panel--quiet { background: var(--surface-2); border-color: var(--lav-200); }
.panel--pop { border-color: var(--violet); box-shadow: 0 8px 0 var(--violet-d); }

.panel__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1.25rem;
    border-bottom: 3px dotted var(--lav-200);
}

.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 3px solid var(--lav-200);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    box-shadow: var(--ledge);
    text-align: left;
    overflow: hidden;
}

/* Colour band across the top of every module card. */
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 8px;
    background: var(--band, var(--lav-300));
}

.card--violet { --band: var(--violet); }
.card--mint   { --band: var(--mint); }
.card--sky    { --band: var(--sky); }
.card--coral  { --band: var(--coral); }
.card--sun    { --band: var(--sun); }

.card > * { position: relative; }

.card--link { cursor: pointer; transition: transform 110ms ease, box-shadow 110ms ease, border-color 110ms ease; }
.card--link:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: 0 12px 0 rgba(90, 37, 201, 0.18); }
.card--link:active { transform: translateY(0); box-shadow: var(--ledge); }

/* The five "ways to learn" cards on the About page. These aren't links, so
   they get their own hover: a springy lift with the card's accent colour
   bleeding through as a soft glow, plus a slight icon lean. */
.eco-card {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 200ms ease, border-color 200ms ease;
}

.eco-card:hover {
    transform: translateY(-7px);
    border-color: var(--violet);
    box-shadow: 0 14px 0 rgba(90, 37, 201, 0.16), 0 22px 44px rgba(112, 56, 232, 0.14);
}

.eco-card:hover .card__icon {
    transform: rotate(-6deg) scale(1.12);
}

.eco-card .card__icon { transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); }

.card--locked { background: var(--surface-2); box-shadow: none; border-style: dashed; }
.card--locked .card__title { color: var(--ink-soft); }

.card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--surface-2);
    color: var(--violet-ink);
    margin: 0.4rem 0 0.9rem;
}

.card__icon svg { width: 26px; height: 26px; }
.card--mint .card__icon  { background: var(--wash-mint); color: var(--mint-d); }
.card--sky .card__icon   { background: var(--wash-sky); color: var(--sky-d); }
.card--coral .card__icon { background: var(--wash-coral); color: var(--coral-d); }
.card--sun .card__icon   { background: var(--wash-sun); color: var(--sun-d); }

.card__title { font-size: 1.25rem; margin: 0 0 0.5rem; line-height: 1.2; color: var(--ink); }
.card__body { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 1.25rem; }

.card__foot {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 3px dotted var(--lav-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--violet-ink);
}

.card__arrow {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    font-size: 1rem;
}

.card--link:hover .card__arrow { background: var(--sun); color: #3d1a80; }

/* Subject and topic cards share .card, so nothing extra is needed here: the
   home page shows one card per subject, and a subject page shows one card per
   topic, both in a .card-grid. */

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field + .field { margin-top: 1rem; }

.field label {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--heading);
    margin-bottom: 0.35rem;
}

.field input,
.field textarea {
    width: 100%;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg);
    border: 3px solid var(--lav-200);
    border-radius: var(--r);
    padding: 0.75rem 0.9rem;
    transition: border-color 120ms ease, background 120ms ease;
}

.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); font-weight: 500; }

.field input:focus,
.field textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--violet);
}

.field textarea { resize: vertical; min-height: 90px; }

.field select {
    width: 100%;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg);
    border: 3px solid var(--lav-200);
    border-radius: var(--r);
    padding: 0.7rem 0.8rem;
    cursor: pointer;
}

.field select:focus { outline: none; border-color: var(--violet); background: var(--surface); }

.field__hint { margin: 0.3rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-mute); }

.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }

@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 560px) { .field-row .field + .field { margin-top: 0; } }

/* Checkbox with its label on one line. */
.checkline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    font-family: var(--display);
    font-weight: 700;
    color: var(--heading);
    cursor: pointer;
}

.checkline input { width: 20px; height: 20px; accent-color: var(--violet); cursor: pointer; }

.form-actions { margin-top: 1.5rem; }

.form-actions--split {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 1.25rem;
    border-top: 3px dotted var(--lav-200);
}

/* Log in / Sign up toggle, shaped like a game switch. */
.switch {
    display: flex;
    gap: 0.35rem;
    background: var(--surface-2);
    border-radius: var(--r-pill);
    padding: 0.35rem;
    margin-bottom: 1.5rem;
}

.switch__tab {
    flex: 1;
    border: 0;
    background: transparent;
    border-radius: var(--r-pill);
    padding: 0.6rem 0.5rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.switch__tab:hover { color: var(--violet-ink); }
.switch__tab.is-active { background: var(--surface); color: var(--violet-ink); box-shadow: 0 3px 0 var(--lav-200); }

.message {
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--r);
    padding: 0.8rem 1rem;
    margin-bottom: 1.15rem;
    border: 3px solid var(--lav-200);
    background: var(--surface-2);
    color: var(--heading);
}

.message--error { border-color: var(--wash-coral-line); background: var(--wash-coral); color: var(--bad-d); }
.message--success { border-color: var(--wash-mint-line); background: var(--wash-mint); color: var(--good-d); }

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.video {
    background: var(--surface);
    border: 3px solid var(--lav-200);
    border-radius: var(--r-lg);
    padding: 0.6rem;
    box-shadow: var(--ledge);
}

.video__frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: var(--r);
    overflow: hidden;
    background: #14224a;
}

.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The embedded Math Mansion game. Tall, framed like a panel, capped so it
   never eats more than the viewport height on a big screen. */
.game-embed {
    border: 3px solid var(--lav-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--ledge);
    background: #14224a;
    height: min(72vh, 720px);
}

.game-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.video__caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink-mute);
    padding: 0.6rem 0.4rem 0.15rem;
}