:root {
    --bg: #fff9f0;
    --card: #fff;
    --ink: #2b3a67;
    --mut: #667089;
    --bd: #e4e9f2;
    --c1: #ff6b6b;
    --c2: #3aafa9;
    --c3: #7c6bff;
    --c4: #4caf7d;
    --hl: #ffd166;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --bg: #161a2b;
        --card: #20263d;
        --ink: #eef1ff;
        --mut: #a9b1cb;
        --bd: #323a5a;
        --hl: #8a6d00
    }
}

:root[data-theme="dark"] {
    --bg: #161a2b;
    --card: #20263d;
    --ink: #eef1ff;
    --mut: #a9b1cb;
    --bd: #323a5a;
    --hl: #8a6d00
}

html {
    scroll-padding-top: env(safe-area-inset-top, 0px)
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 18px/1.6 system-ui, -apple-system, Verdana, sans-serif
}

header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    background: var(--card);
    border-bottom: 2px solid var(--bd);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 16px
}

header b {
    font-size: 22px;
    margin-right: 12px
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

nav button {
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    font-size: 16px;
    background: none;
    color: var(--ink);
    cursor: pointer
}

nav button.a {
    background: var(--c1);
    color: #fff;
    font-weight: 700
}

main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 16px 60px
}

h1 {
    font-size: 30px;
    margin: .2em 0
}

h2 {
    margin: .3em 0
}

h3 {
    margin: .2em 0
}

.mut {
    color: var(--mut)
}

i {
    color: var(--mut)
}

.hero {
    background: var(--card);
    border: 2px solid var(--bd);
    border-radius: 20px;
    padding: 28px
}

.btn,
.lnk,
.ic {
    font: inherit;
    cursor: pointer;
    border: 0;
    touch-action: manipulation;
    transition: transform .09s ease, filter .12s ease, box-shadow .12s ease
}

.btn {
    background: var(--c1);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 18px;
    margin: 4px 4px 4px 0
}

.btn.t {
    background: var(--c2)
}

.btn.p {
    background: var(--c3)
}

.btn.g {
    background: var(--c4)
}

.btn.s {
    background: #8a94a6
}

.lnk {
    background: none;
    color: var(--c1);
    text-decoration: underline
}

.ic {
    background: var(--c3);
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin: 14px 0
}

.g2 {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))
}

.card {
    background: var(--card);
    border: 2px solid var(--bd);
    border-radius: 16px;
    padding: 14px;
    color: var(--ink);
    font: inherit;
    text-align: center
}

button.card {
    cursor: pointer
}

button.card:hover,
button.card:focus-visible {
    border-color: var(--c3);
    outline: 3px solid var(--c3);
    outline-offset: 2px
}

button:not(:disabled):hover,
a.btn:hover,
summary:hover {
    filter: brightness(.96)
}

button:not(:disabled),
summary {
    touch-action: manipulation;
    transition: transform .09s ease, filter .12s ease, box-shadow .12s ease
}

button:not(:disabled):active,
a.btn:active,
summary:active {
    transform: translateY(2px) scale(.98);
    filter: brightness(.9)
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
    outline: 3px solid var(--c3);
    outline-offset: 2px
}

button:disabled {
    opacity: .48;
    filter: grayscale(.35);
    cursor: not-allowed
}

button[aria-pressed="true"],
button[aria-expanded="true"] {
    box-shadow: inset 0 0 0 2px currentColor
}

.card .big {
    display: block;
    font-size: 44px;
    font-weight: 800;
    color: var(--c1)
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0
}

.tabs button {
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    font-size: 16px;
    background: var(--bd);
    color: var(--ink);
    cursor: pointer
}

.tabs button.a {
    background: var(--c3);
    color: #fff;
    font-weight: 700
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}

.tile {
    display: inline-block;
    min-width: 56px;
    padding: 8px 12px;
    margin: 3px;
    border-radius: 12px;
    background: var(--c2);
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    text-align: center
}

.tile.on {
    background: var(--c1);
    transform: scale(1.15)
}

.wb {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.wb .tiles {
    display: flex;
    flex-wrap: nowrap;
    width: 100%
}

.wb .tiles .tile {
    flex: 0 1 62px;
    min-width: 0;
    padding: 8px 4px
}

.wb.done .tile {
    background: var(--c4)
}

textarea {
    width: 100%;
    min-height: 240px;
    font: inherit;
    font-size: 19px;
    padding: 14px;
    border-radius: 14px;
    border: 2px solid var(--bd);
    background: var(--card);
    color: var(--ink)
}

.view {
    background: var(--card);
    border: 2px solid var(--bd);
    border-radius: 14px;
    padding: 16px;
    min-height: 200px;
    max-height: 55vh;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 20px;
    line-height: 1.9
}

.view span {
    cursor: pointer;
    border-radius: 5px
}

.view span:hover {
    background: var(--bd)
}

.view span.on {
    background: var(--hl)
}

.look {
    background: var(--card);
    border: 2px solid var(--c3);
    border-radius: 14px;
    padding: 14px;
    margin-top: 12px
}

.look .lw {
    font-size: 26px;
    color: var(--c1)
}

.look input,
.rate {
    font: inherit;
    padding: 8px;
    border-radius: 10px;
    border: 2px solid var(--bd);
    background: var(--card);
    color: var(--ink)
}

.drop {
    display: block;
    border: 3px dashed var(--c2);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    background: var(--card)
}

.wc {
    text-align: left
}

.wc p {
    margin: .2em 0
}

.ok {
    background: var(--c4) !important;
    color: #fff
}

.no {
    background: #8a94a6 !important;
    color: #fff
}

[hidden] {
    display: none !important
}

.vbox {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 14px
}

.vbox select {
    font: inherit;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 2px solid var(--bd);
    background: var(--card);
    color: var(--ink)
}

.vbox .vaction {
    font-size: 13px;
    padding: 6px 10px;
    margin: 0
}

.help-lead {
    max-width: 70ch;
    color: var(--mut)
}

.action-status {
    min-height: 1.6em;
    font-weight: 650
}

.help-actions {
    margin: 12px 0 20px
}

.help-sections {
    border-top: 1px solid var(--bd)
}

.help-sections details {
    border-bottom: 1px solid var(--bd);
    padding: 12px 4px
}

.help-sections summary {
    cursor: pointer;
    font-size: 19px;
    font-weight: 750;
    padding: 4px 0
}

.help-sections details> :not(summary) {
    max-width: 78ch
}

.guide-list {
    padding-left: 22px
}

.guide-list li {
    margin: 10px 0
}

.guide-list strong {
    display: block
}

.tour-dialog {
    width: min(560px, calc(100vw - 32px));
    border: 2px solid var(--bd);
    border-radius: 16px;
    padding: 24px;
    background: var(--card);
    color: var(--ink)
}

.vm-row {
    justify-content: space-between;
    border-top: 1px solid var(--bd);
    padding: 10px 0
}

.vm-row .vm-name {
    flex: 1 1 180px;
    font-weight: 700
}

.tour-dialog::backdrop {
    background: rgb(20 28 48 / 52%)
}

.tour-dialog h2 {
    margin-top: 0
}

.tour-progress {
    color: var(--mut);
    font-size: 15px
}

.tour-actions {
    justify-content: space-between;
    margin-top: 18px
}

.rstate {
    min-width: 120px;
    font-weight: 700
}

@media (prefers-reduced-motion: reduce) {

    button:not(:disabled),
    summary,
    .btn,
    .lnk,
    .ic {
        transition: none
    }

    button:not(:disabled):active,
    a.btn:active,
    summary:active {
        transform: none
    }
}

button:disabled {
    opacity: .55;
    cursor: not-allowed
}

/* Phonics cards: label / words separation */
.ph-card {
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.ph-cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: anywhere
}

.ph-lbl {
    font-weight: 800;
    color: var(--c3);
    letter-spacing: .02em
}

.ph-card[data-tag="long"] .ph-lbl {
    color: var(--c2)
}

.ph-words {
    color: var(--mut)
}

.ph-hint {
    color: var(--mut);
    font-size: 13px;
    line-height: 1.3
}

/* Practice sentences */
.ph-sent {
    margin-top: 22px
}

.ph-row {
    background: var(--card);
    border: 2px solid var(--bd);
    border-radius: 14px;
    padding: 8px 12px;
    margin: 8px 0
}

.ph-line {
    font-size: 20px
}

.ph-line mark {
    background: var(--hl);
    color: inherit;
    border-radius: 5px;
    padding: 0 3px;
    font-weight: 800
}

/* Reader look-up widget */
.look p {
    margin: .3em 0
}

/* Custom phonics cards */
.ph-tools {
    margin: 8px 0
}

.cform {
    text-align: left;
    margin: 10px 0;
    display: grid;
    gap: 10px
}

.cform label {
    display: grid;
    gap: 4px;
    font-weight: 700;
    font-size: 16px
}

.cform input,
.cform select {
    font: inherit;
    padding: 8px;
    border-radius: 10px;
    border: 2px solid var(--bd);
    background: var(--card);
    color: var(--ink);
    max-width: 420px
}

.ph-wrap {
    position: relative;
    min-width: 0;
    height: 100%
}

.ph-wrap>.card {
    width: 100%;
    height: 100%
}

.ph-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--bd);
    color: var(--ink);
    cursor: pointer;
    font-size: 14px;
    line-height: 1
}

.ph-x:hover,
.ph-x:focus-visible {
    background: var(--c1);
    color: #fff;
    outline: none
}

/* Free book resources */
.res {
    text-align: left;
    margin: 14px 0;
    border-color: var(--c2)
}

a.btn {
    display: inline-block;
    text-decoration: none
}

.btn.gut {
    background: linear-gradient(135deg, var(--c3), var(--c2))
}
/* ---------- Kid-friendly phonics: pictures, colours, mascot, grown-up guide, game ---------- */
:root {
    --k1: #ffe3e3;
    --k2: #dff5f3;
    --k3: #ece8ff;
    --k4: #e2f5ea;
    --k5: #fff1cc
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --k1: #3a2530;
        --k2: #1f3a3a;
        --k3: #2c2750;
        --k4: #203a2c;
        --k5: #3d3520
    }
}

:root[data-theme="dark"] {
    --k1: #3a2530;
    --k2: #1f3a3a;
    --k3: #2c2750;
    --k4: #203a2c;
    --k5: #3d3520
}

/* each card gets a soft colour of its own */
.grid>.ph-card:nth-child(5n+1) { background: var(--k1) }
.grid>.ph-card:nth-child(5n+2) { background: var(--k2) }
.grid>.ph-card:nth-child(5n+3) { background: var(--k3) }
.grid>.ph-card:nth-child(5n+4) { background: var(--k4) }
.grid>.ph-card:nth-child(5n) { background: var(--k5) }

.ph-card { border-radius: 22px }

.ph-pic {
    font-size: 40px;
    line-height: 1.1
}

.ph-card:active .ph-pic { animation: kid-bounce .4s ease }

.tabs .ticon { margin-right: 6px }

.kid-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: var(--k5);
    border-color: var(--hl);
    margin: 10px 0
}

.kid-start>div { flex: 1 1 220px }

.kid-owl {
    font-size: 40px;
    line-height: 1
}

.kid-mascot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0
}

.kid-bubble {
    position: relative;
    margin: 0;
    background: var(--card);
    border: 2px solid var(--c3);
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 20px;
    font-weight: 700
}

.kid-bar { margin: 6px 0 }

.kid-btn {
    font-size: 18px;
    padding: 12px 20px
}

.kid-btn.play {
    background: linear-gradient(135deg, var(--c1), #ff9f43);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .15)
}

.kid-stars {
    font-weight: 700;
    font-size: 18px
}

.guide-dlg { max-height: 88vh }

.gd-voice { margin: 4px 0 8px }

.gd-auto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    cursor: pointer
}

.gd-auto input { width: 20px; height: 20px }

.gd-sec {
    border-radius: 12px;
    padding: 0 8px;
    transition: background .2s
}

.gd-sec.reading { background: var(--k5) }

.gd-play {
    border: 0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background: var(--k2);
    font-size: 16px;
    cursor: pointer;
    vertical-align: middle;
    touch-action: manipulation
}

.gd-sec h3 {
    margin-top: 14px;
    color: var(--c3)
}

/* the game */
.game-dlg {
    width: min(640px, calc(100vw - 24px));
    max-height: 92vh;
    border: 4px solid var(--c3);
    border-radius: 28px;
    padding: 18px;
    background: var(--card);
    color: var(--ink);
    text-align: center;
    overflow: auto
}

.game-dlg::backdrop { background: rgba(43, 58, 103, .55) }

.ghead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.ghead h2 {
    font-size: 22px;
    text-align: left
}

.gclose {
    position: static;
    width: 44px;
    height: 44px;
    font-size: 20px
}

.gstars {
    font-size: 34px;
    letter-spacing: 4px
}

.gstar.on { animation: kid-pop .5s ease }

.gprompt {
    font-size: 24px;
    font-weight: 800;
    margin: 8px 0
}

.gpic {
    font-size: 96px;
    line-height: 1.1
}

.gword {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--c3)
}

.gtiles {
    display: flex;
    justify-content: center;
    margin: 6px 0
}

.gchoices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin: 16px 0 6px
}

.gchoice {
    min-height: 120px;
    border: 4px solid var(--bd);
    border-radius: 24px;
    background: var(--k3);
    color: var(--ink);
    font: inherit;
    font-size: 56px;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation
}

.gchoices.pics .gchoice { font-size: 72px }
.gchoice:nth-child(2) { background: var(--k2) }
.gchoice:nth-child(3) { background: var(--k5) }

.gchoice.right {
    border-color: var(--c4);
    background: var(--k4);
    animation: kid-pop .5s ease
}

.gchoice.wiggle { animation: kid-wiggle .45s ease }

.gchoice:disabled:not(.right) { opacity: .35 }

.gfeedback {
    min-height: 1.6em;
    font-size: 24px;
    font-weight: 800;
    color: var(--c4)
}

.gsticker {
    font-size: 110px;
    line-height: 1.1;
    animation: kid-pop .7s ease
}

.gend { justify-content: center }

.gconfetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.conf {
    position: absolute;
    top: -40px;
    font-size: 28px;
    animation: kid-fall 2.6s linear forwards
}

@keyframes kid-bounce {
    50% { transform: translateY(-8px) scale(1.1) }
}

@keyframes kid-pop {
    0% { transform: scale(.6) }
    60% { transform: scale(1.15) }
    100% { transform: scale(1) }
}

@keyframes kid-wiggle {
    20%, 60% { transform: translateX(-10px) rotate(-3deg) }
    40%, 80% { transform: translateX(10px) rotate(3deg) }
}

@keyframes kid-fall {
    to { transform: translateY(110vh) rotate(540deg) }
}

@media (prefers-reduced-motion: reduce) {
    .ph-card:active .ph-pic,
    .gstar.on,
    .gchoice.right,
    .gchoice.wiggle,
    .gsticker { animation: none }
}

@media(max-width:599px) {
    .gchoice { min-height: 96px; font-size: 44px }
    .gchoices.pics .gchoice { font-size: 56px }
    .gpic { font-size: 80px }
}

/* letters stay easy to read on every pastel card */
.ph-card .big { color: var(--ink) }

.gword mark {
    background: var(--hl);
    color: inherit;
    border-radius: 6px;
    padding: 0 4px
}

@media(max-width:599px) {
    .gchoices {
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        gap: 10px
    }
}

/* ---------- Topic map: groups, stickers, word chips and the interactive topic pages ---------- */
.kid-shelf {
    margin: 6px 0;
    font-size: 17px
}

.kid-shelf .stk {
    font-size: 24px;
    letter-spacing: 2px
}

/* group bar: one row that scrolls sideways on phones, wraps on wide screens */
.pgroups {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    margin: 8px 0 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch
}

@media(min-width:900px) {
    .pgroups { flex-wrap: wrap; overflow: visible }
}

.pgroup {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    width: 190px;
    padding: 10px 12px;
    border: 3px solid var(--bd);
    border-radius: 18px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    touch-action: manipulation
}

.pgroup:nth-child(4n+1) { background: var(--k1) }
.pgroup:nth-child(4n+2) { background: var(--k2) }
.pgroup:nth-child(4n+3) { background: var(--k3) }
.pgroup:nth-child(4n) { background: var(--k4) }

.pgroup.a {
    border-color: var(--c3);
    box-shadow: 0 4px 0 var(--c3)
}

.pg-icon {
    grid-row: span 2;
    font-size: 32px;
    line-height: 1
}

.pg-name {
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2
}

.pg-meta {
    color: var(--mut);
    font-size: 13px
}

.ph-sub {
    font-size: 20px;
    margin: 18px 0 0
}

.grid.g3 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) }
.grid.g4 { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) }

.split {
    color: var(--c1);
    font-weight: 800;
    padding: 0 2px
}

mark {
    background: var(--hl);
    color: inherit;
    border-radius: 5px;
    padding: 0 2px
}

/* anything that lights up while it is being said */
.chip.on,
.grp-h.on,
.sbox.on,
.pair-w.on {
    outline: 4px solid var(--hl);
    outline-offset: 2px
}

/* group of chips under a tappable header */
.groups {
    display: grid;
    gap: 14px;
    margin: 14px 0
}

@media(min-width:700px) {
    .groups.cols { grid-template-columns: 1fr 1fr }
}

.grp {
    background: var(--card);
    border: 2px solid var(--bd);
    border-radius: 20px;
    padding: 12px;
    min-width: 0
}

.grp-h {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 14px;
    background: var(--k3);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation
}

.grp:nth-child(3n+2) .grp-h { background: var(--k2) }
.grp:nth-child(3n) .grp-h { background: var(--k5) }

.grp-big {
    font-size: 30px;
    font-weight: 800;
    min-width: 48px;
    text-align: center
}

.grp-tx {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.grp-t { font-size: 18px }

.grp-sub {
    color: var(--mut);
    font-size: 14px
}

.grp-play { font-size: 22px }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 6px 14px;
    border: 2px solid var(--bd);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation
}

.chip-pic { font-size: 26px }

.chip-sub {
    color: var(--mut);
    font-weight: 600;
    font-size: 15px
}

/* blend cards: picture appears once the word is blended */
.wb-reveal {
    font-size: 40px;
    line-height: 1;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.wb-word { font-size: 24px }
.wb.seen .wb-reveal { animation: kid-pop .5s ease }
.wb.oral .tile { background: var(--c3) }

/* sound boxes */
.sbox-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.sb-top {
    display: flex;
    align-items: center;
    gap: 10px
}

.sb-pic { font-size: 48px }
.sb-word { font-size: 26px }

.sboxes {
    display: flex;
    justify-content: center;
    gap: 6px
}

.sbox {
    width: 56px;
    height: 56px;
    border: 3px dashed var(--c2);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 26px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.sbox.full {
    border-style: solid;
    background: var(--k2)
}

.sbox.ask {
    border-style: solid;
    border-color: var(--c1);
    background: var(--hl)
}

.sb-count {
    margin: 0;
    font-weight: 800;
    color: var(--c4);
    min-height: 1.4em
}

/* clap, onset, swap, builder and magic-e cards */
.clap,
.onset,
.swap,
.build,
.magic,
.sight {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0
}

.clap-w {
    font-size: 22px;
    font-weight: 800
}

.beats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center
}

.beat {
    font-size: 26px;
    color: var(--c2)
}

.beat.on {
    color: var(--c1);
    transform: scale(1.4)
}

.part {
    padding: 4px 10px;
    border-radius: 10px;
    background: var(--k2);
    font-size: 22px;
    font-weight: 800
}

.part.on {
    background: var(--c1);
    color: #fff
}

.tile.rime { background: var(--c3) }
.tile.new { background: var(--c1); animation: kid-pop .5s ease }
.tile.affix { background: var(--c3) }

.onset.done,
.swap.done,
.build.done,
.sight.done {
    outline: none;
    border-color: var(--c4);
    background: var(--k4)
}

.swap-pics {
    display: flex;
    align-items: center;
    gap: 10px
}

.swap-arrow {
    font-size: 26px;
    color: var(--c1)
}

.build-parts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center
}

.build-parts .tile {
    font-size: 22px;
    min-width: 0
}

.plus,
.eq {
    font-size: 24px;
    font-weight: 800;
    color: var(--mut);
    padding: 0 4px
}

.magic .e-tile {
    display: none;
    background: var(--c1)
}

.magic.long .e-tile {
    display: inline-block;
    animation: kid-pop .5s ease
}

.magic.long .tiles .tile:nth-child(2) { background: var(--c3) }

/* minimal pairs */
.pair {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.pair-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding: 10px;
    border: 3px solid var(--bd);
    border-radius: 18px;
    background: var(--k3);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation
}

.pair-w+.vs+.pair-w { background: var(--k2) }

.pair-t {
    font-size: 26px;
    font-weight: 800
}

.vs {
    font-weight: 800;
    color: var(--mut)
}

/* word families */
.fam-bar button { font-weight: 800 }

.fam {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--k5)
}

.fam-pic {
    font-size: 84px;
    line-height: 1.1
}

.fam .tiles .tile { font-size: 44px }

.tiles.done .tile { background: var(--c4) }

.fam-w {
    font-size: 30px;
    font-weight: 800
}

.fam-help { margin: 0 }

.fam-onsets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px
}

.fam-on {
    width: 60px;
    height: 60px;
    border: 3px solid var(--bd);
    border-radius: 16px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 30px;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation
}

.fam-on.a {
    border-color: var(--c1);
    background: var(--hl)
}

/* tricky words */
.sight-w {
    font-size: 30px;
    font-weight: 800
}

.heart { font-size: 16px }

/* dictation, decode steps */
.dict {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

.dict-ans {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 8px
}

.decode-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
    counter-reset: dstep
}

.decode-steps li {
    counter-increment: dstep;
    background: var(--k4);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700
}

.decode-steps li::before {
    content: counter(dstep) ". ";
    color: var(--c4)
}

/* sentences and stories: every word can be tapped */
.ph-pic.sm { font-size: 30px }

.wd {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    padding: 0 1px;
    border-radius: 6px;
    cursor: pointer;
    touch-action: manipulation
}

.wd:hover,
.wd:focus-visible { background: var(--hl) }

.ph-line.on,
.story-l.on,
.flu-s.on {
    outline: none;
    background: var(--hl);
    border-radius: 8px
}

.story {
    text-align: left;
    margin: 14px 0
}

.story-h {
    display: flex;
    align-items: center;
    gap: 12px
}

.story-h h2 { margin: 0 }

.story-pic { font-size: 44px }

.story-l {
    font-size: 24px;
    line-height: 1.5;
    margin: 6px 0;
    padding: 0 4px
}

/* word flash cards */
.flash {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--k3)
}

.flash-w {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.2;
    padding: 4px 12px;
    border-radius: 16px
}

.flash-w.done {
    outline: none;
    background: var(--k4)
}

.flash-pic {
    font-size: 64px;
    min-height: 1.1em;
    line-height: 1.1
}

.flash-btns { justify-content: center }

/* fluency */
.flu { text-align: left }

.flu-text {
    font-size: 24px;
    line-height: 1.7
}

.flu-s.turn {
    outline: 3px dashed var(--c3);
    outline-offset: 2px;
    border-radius: 8px
}

.flu-clock {
    font-size: 40px;
    font-weight: 800;
    color: var(--c3);
    min-height: 1.2em;
    font-variant-numeric: tabular-nums
}

.flu-res {
    font-size: 18px;
    font-weight: 700
}

/* game additions */
.gstory {
    text-align: left;
    background: var(--k5);
    border-radius: 16px;
    padding: 10px 14px;
    font-size: 19px;
    line-height: 1.5
}

.gstory p { margin: 4px 0 0 }

.gtext {
    display: block;
    font-size: 44px;
    font-weight: 800;
    margin: 4px 0
}

.gtext.long {
    font-size: 26px;
    line-height: 1.4
}

.gboxes,
.spell-boxes { margin: 10px 0 }

.gchoices.words .gchoice {
    min-height: 84px;
    font-size: 28px;
    padding: 8px
}

.gch-main { display: block }

.gch-sub {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--mut)
}

.gchoice.reading { border-color: var(--hl) }

.gchoice.used {
    visibility: hidden
}

.spell-pool {
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr))
}

.spell-pool .gchoice {
    min-height: 76px;
    font-size: 40px
}

.gword .gw mark { padding: 0 4px }

@media(max-width:599px) {
    .pgroup { width: 170px }
    .sbox { width: 48px; height: 48px; font-size: 22px }
    .fam-pic { font-size: 64px }
    .fam .tiles .tile { font-size: 36px }
    .flash-w { font-size: 48px }
    .story-l, .flu-text { font-size: 21px }
    .gtext { font-size: 36px }
    .gchoices.words .gchoice { font-size: 22px }
}

@media (prefers-reduced-motion: reduce) {
    .wb.seen .wb-reveal,
    .tile.new,
    .magic.long .e-tile { animation: none }
    .beat.on { transform: none }
}

/* ---------- Sign up / Log in gate ---------- */
:root {
    --ag-accent: #6a55f0;
    --ag-accent-2: #4f3dd1;
    --ag-ring: rgba(106, 85, 240, .16);
    --ag-backdrop-a: #eef0fb;
    --ag-backdrop-b: #f7f3fb;
    --ag-shadow: 0 1px 2px rgba(19, 22, 43, .06), 0 24px 48px -16px rgba(19, 22, 43, .18);
    --ag-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --ag-accent: #8a7bff;
        --ag-accent-2: #7260f0;
        --ag-ring: rgba(138, 123, 255, .22);
        --ag-backdrop-a: #11132a;
        --ag-backdrop-b: #15101f;
        --ag-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 48px -16px rgba(0, 0, 0, .6);
    }
}

:root[data-theme="dark"] {
    --ag-accent: #8a7bff;
    --ag-accent-2: #7260f0;
    --ag-ring: rgba(138, 123, 255, .22);
    --ag-backdrop-a: #11132a;
    --ag-backdrop-b: #15101f;
    --ag-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 48px -16px rgba(0, 0, 0, .6);
}

#authGate {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    font-family: var(--ag-font);
    background:
        radial-gradient(1100px 520px at 12% -10%, var(--ag-backdrop-a), transparent 60%),
        radial-gradient(900px 460px at 110% 10%, var(--ag-backdrop-b), transparent 55%),
        var(--bg);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 48px
}

.ag-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(min-width:900px) {
    .ag-shell { flex-direction: row; align-items: stretch }
}

.ag-panel {
    border-radius: 24px;
    border: 1px solid var(--bd);
    box-shadow: var(--ag-shadow)
}

/* ---- brand panel ----
   flex-basis stays "auto" in the default stacked (column) layout: a bare "40%" there
   would be read as a HEIGHT, clipping the affirmations widget and review card below it
   via overflow:hidden. The row-only override below must come AFTER this base rule in
   the file — same specificity, so source order decides, and a media query doesn't win
   on its own. */
.ag-brand {
    flex: 0 0 auto;
    background: linear-gradient(160deg, var(--ag-accent) 0%, var(--ag-accent-2) 100%);
    color: #fff;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    overflow: hidden
}

@media(min-width:900px) {
    .ag-brand { flex: 0 0 40% }
}

.ag-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 220px at 85% -10%, rgba(255, 255, 255, .16), transparent 60%);
    pointer-events: none
}

.ag-brand-top { display: flex; flex-direction: column; gap: 22px }
.ag-brand-mark { display: flex; align-items: center; gap: 10px; position: relative }

.ag-brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, .28)
}

.ag-brandname { font-family: var(--ag-font); font-weight: 700; font-size: 17px; letter-spacing: -.01em }
.ag-brand h1 { font-family: var(--ag-font); font-size: clamp(22px, 3.4vw, 27px); font-weight: 700; letter-spacing: -.01em; margin: 0; position: relative }
.ag-tag { opacity: .86; margin-top: 12px; font-size: 14.5px; line-height: 1.6; position: relative; max-width: 100% }

/* ---- positive affirmations widget: grows to fill the panel's middle space ---- */
.ag-affirm {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 0;
    position: relative;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    padding: 28px 26px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, backdrop-filter .25s ease, background .25s ease
}

.ag-affirm:hover {
    transform: scale(1.015);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 0 44px rgba(255, 255, 255, .22)
}

.ag-affirm-content { display: flex; flex-direction: column; align-items: center; gap: 10px }
.ag-affirm-content.out { animation: ag-affirm-out .2s ease forwards }
.ag-affirm-content.in { animation: ag-affirm-in .32s ease forwards }
@keyframes ag-affirm-out { to { opacity: 0; transform: translateY(-10px) scale(.97) } }
@keyframes ag-affirm-in { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: translateY(0) scale(1) } }

.ag-affirm-emoji { font-size: 30px; line-height: 1; animation: ag-affirm-bounce 2.4s ease-in-out infinite }
@keyframes ag-affirm-bounce { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

.ag-affirm-text { font-family: var(--ag-font); font-size: 15.5px; font-weight: 600; line-height: 1.5; margin: 0 }
.ag-affirm-author { font-size: 12px; font-weight: 500; opacity: .75; margin: 2px 0 0 }

.ag-affirm-btn {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(100deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .14) 60%, rgba(255, 255, 255, .14) 100%);
    background-size: 240% 100%;
    animation: ag-affirm-shimmer 3.4s linear infinite;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 9px 18px;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease
}

@keyframes ag-affirm-shimmer { 0% { background-position: 180% 0 } 100% { background-position: -80% 0 } }
.ag-affirm-btn:hover { filter: brightness(1.12) }
.ag-affirm-btn:active { transform: scale(.96) }

@media (prefers-reduced-motion:reduce) {
    .ag-affirm, .ag-affirm:hover { transition: none; transform: none }
    .ag-affirm-emoji, .ag-affirm-btn, .ag-affirm-content.out, .ag-affirm-content.in { animation: none }
}

/* ---- review / trust card ---- */
.ag-proof {
    position: relative;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    padding: 18px 20px
}

.ag-stars { display: flex; gap: 3px; color: #ffd166 }
.ag-stars svg { width: 15px; height: 15px }
.ag-proof p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; opacity: .9; max-width: 38ch }

/* ---- auth card ---- */
.ag-authwrap { flex: 1; display: flex; min-width: 0 }
.ag-card { width: 100%; background: var(--card); padding: 38px 36px; text-align: left }

.ag-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ag-font);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 22px;
    color: var(--ink)
}

.ag-logo-mark { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; background: var(--ag-accent); color: #fff; border: 0 }

.ag-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--k3);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px
}

.ag-tabs button {
    font: inherit;
    font-family: var(--ag-font);
    font-weight: 600;
    font-size: 14px;
    border: 0;
    background: none;
    color: var(--mut);
    border-radius: 9px;
    padding: 10px 0;
    cursor: pointer;
    touch-action: manipulation
}

.ag-tabs button.a { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 22, 43, .1) }

.ag-form { display: flex; flex-direction: column; gap: 16px }
.ag-formtitle { font-family: var(--ag-font); font-size: 20px; margin: 0 0 4px; color: var(--ink) }
.ag-formsub { color: var(--mut); font-size: 13.5px; margin: 0 0 6px }

.ag-field { display: flex; flex-direction: column; gap: 6px }
.ag-field label { font-size: 13px; font-weight: 500; color: var(--ink) }

.ag-field input[type="text"], .ag-field input[type="email"], .ag-field input[type="password"] {
    font: inherit;
    font-size: 14.5px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1.5px solid var(--bd);
    background: var(--card);
    color: var(--ink);
    width: 100%;
    transition: border-color .12s ease, box-shadow .12s ease
}

.ag-field input:focus-visible { outline: none; border-color: var(--ag-accent); box-shadow: 0 0 0 4px var(--ag-ring) }

.ag-pwrow { position: relative; display: flex }
.ag-pwrow input { padding-right: 42px }

.ag-eye {
    position: absolute;
    right: 3px;
    top: 3px;
    bottom: 3px;
    width: 36px;
    border: 0;
    background: none;
    color: var(--mut);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ag-eye:hover { color: var(--ink); background: var(--k3) }
.ag-eye svg { width: 18px; height: 18px }

.ag-roletiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }

.ag-roletile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 12px;
    border: 1.5px solid var(--bd);
    border-radius: 14px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    min-width: 0;
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease
}

.ag-roletile:hover { transform: translateY(-1px) }

.ag-roletile .ag-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--k3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ag-accent)
}

.ag-roletile .ag-ic svg { width: 18px; height: 18px }
.ag-roletile .ag-lbl { font-size: 12.5px; font-weight: 600; text-align: left; line-height: 1.25 }
.ag-roletile[aria-pressed="true"] { border-color: var(--ag-accent); box-shadow: 0 0 0 4px var(--ag-ring) }
.ag-roletile[aria-pressed="true"] .ag-ic { background: var(--ag-accent); color: #fff }

.ag-rowline { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--mut) }
.ag-note { font-size: 12px; color: var(--mut); background: var(--k2); border: 1px solid var(--bd); border-radius: 8px; padding: 6px 10px; margin: -4px 0 0 }
.ag-err { font-size: 12px; color: #d1483f; font-weight: 600; min-height: 14px; margin: 0 }

.ag-divider { display: flex; align-items: center; gap: 12px; color: var(--mut); font-size: 12px }
.ag-divider::before, .ag-divider::after { content: ""; flex: 1; height: 1px; background: var(--bd) }

.ag-btn-primary {
    font: inherit;
    font-weight: 600;
    font-size: 14.5px;
    color: #fff;
    background: linear-gradient(160deg, var(--ag-accent), var(--ag-accent-2));
    border: 0;
    border-radius: 11px;
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(19, 22, 43, .06), 0 8px 20px -8px rgba(106, 85, 240, .55);
    transition: filter .12s ease, transform .08s ease;
    touch-action: manipulation
}

.ag-btn-primary:hover { filter: brightness(1.04) }
.ag-btn-primary:active { transform: translateY(1px) }

.ag-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: #1f1f1f;
    background: #fff;
    border: 1.5px solid #dadce0;
    border-radius: 11px;
    padding: 11px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .12s ease, border-color .12s ease
}

.ag-google:hover { background: #f7f8f8; border-color: #c7cad3 }
.ag-google svg { width: 18px; height: 18px }
.ag-switch { text-align: center; font-size: 13.5px; color: var(--mut); margin: 0 }

.ag-setupwarn {
    font-size: 13px;
    color: var(--mut);
    background: var(--k2);
    border-radius: 10px;
    padding: 10px;
    margin: 16px 0 0
}

.ag-setupwarn.ag-note-warn { color: #d1483f; background: var(--k1) }

.ag-badge { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 14px }

@media (prefers-reduced-motion:reduce) {
    .ag-roletile, .ag-btn-primary, .ag-google { transition: none }
}

/* ---------- Mobile: compact the hero and auth gate (desktop/tablet layout untouched above) ---------- */
@media (max-width:599px) {
    /* align-items:center (set above for desktop/tablet) centers an overflowing flex item and
       clips its START side inaccessibly — on a short phone viewport the auth gate's content is
       much taller than the screen, so centering left the logo/heading/tag unreachable above the
       fold. Mobile needs top alignment instead, so the whole thing is reachable by scrolling down. */
    #authGate { align-items: flex-start; padding-block: 16px }
    .ag-shell { gap: 12px }

    .ag-brand { padding: 22px 20px; gap: 14px }
    .ag-brand-top { gap: 14px }
    .ag-brand h1 { font-size: 20px }
    .ag-tag { margin-top: 6px; font-size: 13.5px }

    .ag-affirm { padding: 16px 16px; gap: 10px }
    .ag-affirm-emoji { font-size: 24px }
    .ag-affirm-text { font-size: 14px }
    .ag-proof { padding: 14px 16px }
    .ag-proof p { font-size: 12.5px }

    .ag-card { padding: 22px 18px }
    .ag-logo { margin-bottom: 14px }
    .ag-tabs { margin-bottom: 16px }
    .ag-form { gap: 12px }
    .ag-formtitle { font-size: 18px }
    .ag-formsub { margin-bottom: 2px }

    .ag-roletiles { gap: 6px }
    .ag-roletile { padding: 10px 6px; gap: 6px }

    .hero { padding: 18px }
    .hero h1 { font-size: 24px }
}