:root {
    --ink: #2d3350;
    --ink-soft: #6a6f8e;
    --paper: #fffdf7;
    --leaf: #4cc27a;
    --leaf-dark: #2f9a5a;
    --sky: #4aa8f0;
    --sky-dark: #2a82c8;
    --sun: #ffc93c;
    --sun-dark: #e0a400;
    --coral: #ff7a6b;
    --pink: #ff6fa8;
    --pink-dark: #d94a85;
    --grey: #e6e8f2;
    --grey-dark: #b9bdd3;
    --good: #2fbf71;
    --shadow: 0 6px 0 rgba(0, 0, 0, .07), 0 12px 26px rgba(50, 80, 110, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { min-height: 100%; }

body {
    font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
    color: var(--ink);
    background: linear-gradient(175deg, #d9f1ff 0%, #effaff 45%, #f3fbe9 100%);
    padding: 64px 14px 60px;
    overflow-x: hidden;
}

.grass {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 100% at 20% 100%, #c6efb4 0 55%, transparent 56%),
        radial-gradient(110% 100% at 85% 100%, #b2e59c 0 50%, transparent 51%);
    opacity: .85;
}

/* ---------- top bar ---------- */
.topbar {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 40;
}

.chip {
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    background: rgba(255, 255, 255, .92);
    border: 2px solid #fff;
    border-radius: 999px;
    padding: .35rem .85rem;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(50, 80, 110, .13);
    transition: transform .12s;
}

.chip:hover { transform: translateY(-2px); }
.chip.starcount { cursor: default; }
.chip .s { color: var(--sun); margin-right: .3rem; }
.home-link { text-decoration: none; white-space: nowrap; }
body.at-start .topbar > :not(.home-link) { display: none; }

/* ---------- screens and cards ---------- */
.screen {
    display: none;
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.screen.active { display: block; animation: rise .35s ease-out; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.card {
    background: var(--paper);
    border-radius: 28px;
    box-shadow: var(--shadow);
    border: 4px solid #fff;
    padding: 1.4rem 1.4rem 1.6rem;
}

.start-card { text-align: center; }

.game-title {
    font-family: 'Fredoka One', 'Baloo 2', sans-serif;
    font-size: clamp(2.2rem, 7vw, 3.2rem);
    line-height: 1.05;
    color: var(--sky-dark);
    margin-top: .4rem;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .06);
}

.game-title span { color: var(--pink); }

.tagline { color: var(--ink-soft); font-size: 1.1rem; margin: .4rem 0 1rem; }
.tagline b { color: var(--ink); }

.how-to { display: grid; gap: .6rem; text-align: left; margin-bottom: 1.2rem; }

.how-step {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: #f1f8ff;
    border-radius: 18px;
    padding: .55rem .9rem;
}

.how-num {
    flex: 0 0 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sky);
    color: #fff;
    font: 1.2rem 'Fredoka One', sans-serif;
    box-shadow: 0 3px 0 var(--sky-dark);
}

.how-num.star { background: var(--sun); box-shadow: 0 3px 0 var(--sun-dark); }

.pick-title { font: 1.4rem 'Fredoka One', sans-serif; color: var(--ink); margin-bottom: .6rem; }

.levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
}

.level {
    font-family: inherit;
    text-align: left;
    background: #fff;
    border: 3px solid var(--grey);
    border-radius: 20px;
    padding: .7rem .9rem .8rem;
    cursor: pointer;
    transition: transform .12s, border-color .12s;
    color: var(--ink);
}

.level:hover { transform: translateY(-3px); border-color: var(--lc, var(--sky)); }
.level .lname { font: 1.25rem 'Fredoka One', sans-serif; color: var(--lc, var(--sky-dark)); }
.level .ldesc { font-size: .92rem; color: var(--ink-soft); line-height: 1.3; }
.level .lstars { color: var(--sun); font-size: 1.1rem; letter-spacing: 2px; margin-top: .2rem; }
.level .lstars .off { color: var(--grey-dark); }

/* ---------- playing ---------- */
.progress {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: .8rem;
}

.progress i {
    width: 34px;
    height: 34px;
    border-radius: 42%;
    background: var(--grey);
    display: grid;
    place-items: center;
    font: .95rem 'Fredoka One', sans-serif;
    color: #fff;
    font-style: normal;
}

.progress i.now { background: var(--sky); box-shadow: 0 0 0 4px rgba(74, 168, 240, .25); }
.progress i.good { background: var(--leaf); }
.progress i.tried { background: var(--sun); }

.problem-top { display: flex; align-items: center; gap: .7rem; }
.emoji { font-size: 2.2rem; line-height: 1; }
.pnum { font: 1.05rem 'Fredoka One', sans-serif; color: var(--ink-soft); }

.story { font-size: 1.35rem; line-height: 1.5; margin: .5rem 0 1rem; }
.story b { color: var(--sky-dark); }

.ask { font-weight: 700; color: var(--ink-soft); margin-bottom: .35rem; }

.answer-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.answer {
    font: 2rem 'Fredoka One', sans-serif;
    width: 140px;
    padding: .2rem .7rem;
    border: 3px solid var(--grey-dark);
    border-radius: 16px;
    color: var(--ink);
    background: #fff;
    text-align: center;
    outline: none;
}

.answer:focus { border-color: var(--sky); }
.answer.right { border-color: var(--good); background: #eafbf1; }
.answer.wrong { border-color: var(--coral); animation: shake .4s; }

@keyframes shake {
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

.btn {
    font: 1.1rem 'Fredoka One', sans-serif;
    border: 0;
    border-radius: 16px;
    padding: .6rem 1.1rem;
    cursor: pointer;
    color: #fff;
    transition: transform .1s;
}

.btn:active { transform: translateY(2px); }
.btn.go { background: var(--leaf); box-shadow: 0 4px 0 var(--leaf-dark); }
.btn.soft { background: var(--sun); color: #5a4300; box-shadow: 0 4px 0 var(--sun-dark); }
.btn.blue { background: var(--sky); box-shadow: 0 4px 0 var(--sky-dark); }
.btn.big { font-size: 1.3rem; padding: .7rem 1.6rem; }
.btn:disabled { opacity: .45; cursor: default; }

.feedback { min-height: 1.6rem; margin-top: .6rem; font-size: 1.1rem; line-height: 1.4; }
.feedback.good { color: var(--leaf-dark); font-weight: 700; }
.feedback.bad { color: #c94a3d; }
.feedback .work {
    display: block;
    margin-top: .3rem;
    padding: .45rem .7rem;
    border-radius: 12px;
    background: #f1f8ff;
    color: var(--ink);
    font-weight: 600;
}

.step + .step { margin-top: 1.1rem; padding-top: 1rem; border-top: 2px dashed var(--grey); }

/* sentence builder */
.sentence {
    min-height: 54px;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    padding: .45rem .6rem;
    border-bottom: 3px solid var(--grey-dark);
    margin-bottom: .7rem;
}

.tiles { display: flex; flex-wrap: wrap; gap: .45rem; }

.word {
    font: 700 1.15rem 'Baloo 2', sans-serif;
    padding: .25rem .8rem;
    border-radius: 12px;
    border: 2px solid var(--grey-dark);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 3px 0 var(--grey-dark);
}

.word { touch-action: none; user-select: none; -webkit-user-select: none; }
.word.used { visibility: hidden; }
.word.lifted { opacity: .35; }
.word.ghost { position: fixed; z-index: 100; pointer-events: none; transform: rotate(-3deg) scale(1.06); box-shadow: 0 10px 22px rgba(50, 80, 110, .28); border-color: var(--sky); }
.word.ph { border: 2px dashed var(--sky); background: #eef7ff; color: transparent; box-shadow: none; }
.sentence .word { border-color: var(--sky); box-shadow: 0 3px 0 var(--sky-dark); }
.sentence.done .word { border-color: var(--leaf); box-shadow: 0 3px 0 var(--leaf-dark); cursor: default; }

.next-row { margin-top: 1.2rem; text-align: right; }

/* result */
.result-card { text-align: center; }
.result-card h2 { font: 2.2rem 'Fredoka One', sans-serif; color: var(--sky-dark); margin-top: .4rem; }
.big-stars { font-size: 3rem; letter-spacing: 6px; color: var(--sun); margin: .3rem 0; }
.big-stars .off { color: var(--grey); }
.result-card p { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 1rem; }
.result-btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }


/* ---------- hero ring and the watch button ---------- */
.hero { width: 210px; height: 210px; margin: 0 auto -6px; }
.watch { margin: 0 auto 1.3rem; display: block; }

/* ---------- show your work ---------- */
.ways { display: inline-flex; background: var(--grey); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: .7rem; }
.way {
    font: 1rem 'Fredoka One', sans-serif;
    border: 0;
    border-radius: 999px;
    padding: .3rem 1rem;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}
.way.on { background: #fff; color: var(--pink-dark); box-shadow: 0 2px 6px rgba(50, 80, 110, .15); }

.work {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .35rem .5rem;
    margin-bottom: .8rem;
}
.wbox { display: flex; flex-direction: column; align-items: center; }
.wbox label { font-size: .85rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; margin-top: .1rem; }
.wbox input {
    font: 1.8rem 'Fredoka One', sans-serif;
    width: 86px;
    padding: .1rem .3rem;
    border: 3px solid var(--grey-dark);
    border-radius: 14px;
    color: var(--ink);
    background: #fff;
    text-align: center;
    outline: none;
}
.wbox.ans input { width: 104px; border-color: var(--pink); }
.wbox input:focus { border-color: var(--sky); }
.wbox input.right { border-color: var(--good); background: #eafbf1; }
.wbox input.wrong { border-color: var(--coral); animation: shake .4s; }
.op { font: 1.8rem 'Fredoka One', sans-serif; color: var(--ink-soft); padding-top: .2rem; white-space: nowrap; }
.op.fixed { color: var(--ink); }

/* ---------- show me ---------- */
.show-card { margin-top: 1rem; }
.show-title { font: 1.2rem 'Fredoka One', sans-serif; margin-bottom: .5rem; }
.stepno {
    display: inline-block;
    font: 700 .85rem 'Baloo 2', sans-serif;
    color: #fff;
    background: var(--pink);
    border-radius: 999px;
    padding: .05rem .6rem;
    margin-right: .3rem;
    vertical-align: 2px;
}
.show-body { font-size: 1.2rem; line-height: 1.5; }
.show-body b { color: var(--pink-dark); }
.stage { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.ringhost { flex: 1 1 280px; max-width: 360px; aspect-ratio: 1; margin: 0 auto; }
.ringhost svg, .hero svg { width: 100%; height: 100%; overflow: visible; }
.tally { flex: 0 1 200px; display: grid; gap: .5rem; margin: 0 auto; }
.tally > div {
    background: #fff4f9;
    border: 2px solid #ffd3e6;
    border-radius: 16px;
    padding: .35rem .8rem;
    font-weight: 700;
    color: var(--ink-soft);
    line-height: 1.2;
}
.tally > div.t2 { background: #effaf3; border-color: #c4ecd3; }
.tally b { display: block; font: 2rem 'Fredoka One', sans-serif; color: var(--pink-dark); }
.tally .t2 b { color: var(--leaf-dark); }
.tally .sum { display: block; font-size: .95rem; color: var(--ink); min-height: 1.2em; word-break: break-word; }
.tally b.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.25); } }

.live { min-height: 3em; margin: .3rem 0 .1rem; }
.after > * { animation: rise .4s ease-out both; }
.after > *:nth-child(2) { animation-delay: .25s; }
.after > *:nth-child(3) { animation-delay: .5s; }
.sline { margin: .15rem 0; }
.eq { margin-top: .4rem; font: 2rem 'Fredoka One', sans-serif; color: var(--ink); }
.eq b { color: var(--leaf-dark); }
.stepnav { display: flex; justify-content: space-between; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }

/* ring pieces (SVG) */
.node { transition: transform .5s; }
.node .halo { fill: #fff; stroke: var(--grey); stroke-width: 3; transition: fill .2s, stroke .2s; }
.node.on .halo { fill: #fff0f6; stroke: var(--pink); stroke-width: 5; }
.node.done .halo { fill: #eef1f7; }
.node .face { transform-box: fill-box; transform-origin: center; }
.node .face.bounce { animation: hugbounce .45s; }
@keyframes hugbounce { 40% { transform: scale(1.28) rotate(-8deg); } 70% { transform: scale(.95); } }
.node .nm { font: 700 15px 'Baloo 2', sans-serif; fill: var(--ink); paint-order: stroke; stroke: #fffdf7; stroke-width: 4px; }

.hl {
    stroke: var(--pink);
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition-property: stroke-dashoffset, stroke, opacity;
    transition-timing-function: ease-out;
    opacity: .75;
}
.hl.drawn { stroke-dashoffset: 0; }
.hl.again { animation: again .7s; }
@keyframes again { 0%, 100% { stroke: var(--pink); } 30%, 70% { stroke: var(--sun-dark); stroke-width: 9; opacity: 1; } }
.hl.glow { stroke: var(--leaf); opacity: 1; }
.hl.old { stroke: #c9cde0; opacity: .6; }

.tok { transition: transform .45s cubic-bezier(.5, -.4, .5, 1.4), opacity .3s; }
.tok text { transform-box: fill-box; transform-origin: center; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop { from { transform: scale(0); } }
.tok.gone { opacity: 0; }
.badge circle { fill: #fff; stroke: var(--leaf); stroke-width: 3; }
.badge { transform-box: fill-box; }
.say text { font: 800 15px 'Baloo 2', sans-serif; fill: var(--sun-dark); paint-order: stroke; stroke: #fff; stroke-width: 5px; animation: sayfade 1s ease-out both; }
@keyframes sayfade { 0% { opacity: 0; transform: translateY(6px); } 20%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }

/* add-down number tiles and their pair arcs */
.ntiles { display: flex; gap: 3px; margin: 1.6rem 0 .4rem; flex-wrap: nowrap; justify-content: center; position: relative; }
.nt {
    flex: 1 1 0;
    max-width: 46px;
    min-width: 0;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    border: 2px solid var(--grey-dark);
    font: clamp(.7rem, 2.6vw, 1.1rem) 'Fredoka One', sans-serif;
    color: var(--ink);
    transition: background .25s, border-color .25s, transform .25s, color .25s;
}
.nt.in { animation: pop .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.nt.p { color: #fff; transform: translateY(-4px); }
.nt.mid { background: var(--sun); border-color: var(--sun-dark); color: #5a4300; transform: translateY(-4px); }
.pairs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; min-height: 2.2rem; }
.pairs span { border-radius: 999px; padding: .05rem .7rem; color: #fff; font: 1rem 'Fredoka One', sans-serif; animation: pop .3s both; }
.pairs span.m { background: var(--sun); color: #5a4300; }

/* pattern table */
.ptab { border-collapse: collapse; margin: .4rem 0 .7rem; font-size: 1.1rem; }
.ptab th, .ptab td { padding: .2rem .7rem; text-align: center; border-bottom: 2px solid var(--grey); }
.ptab th { font: .95rem 'Fredoka One', sans-serif; color: var(--ink-soft); }
.ptab tr { animation: rise .35s ease-out both; }

/* result */
.big-hug { font-size: 4.5rem; display: inline-block; animation: wiggle 1.4s ease-in-out infinite; }
@keyframes wiggle { 50% { transform: translateY(-6px) rotate(6deg); } }

@media (max-width: 560px) {
    body { padding: 58px 8px 50px; }
    .card { border-radius: 22px; padding: 1.1rem 1rem 1.3rem; }
    .story { font-size: 1.2rem; }
    .btn { font-size: 1rem; padding: .55rem .9rem; }
    .work { gap: .3rem .3rem; }
    .wbox input { width: 56px; font-size: 1.35rem; border-width: 2px; padding: .1rem; }
    .wbox.ans input { width: 64px; }
    .wbox label { font-size: .72rem; }
    .op { font-size: 1.25rem; }
    .tally { flex-basis: 100%; grid-template-columns: 1fr 1fr; }
    .eq { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hl, .tok, .node { transition-duration: 0s !important; }
}
.ntiles.many { flex-wrap: wrap; }
.ntiles.many .nt { flex: 0 0 34px; }

/* the tap-to-continue button inside Show me */
.gate { min-height: 3.2rem; }
.gate-btn { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-3px); box-shadow: 0 7px 0 var(--leaf-dark); } }