/* ============================================================
   Shape Garden - learn the area of shapes
   Garden palette: leaf green, soil brown, sun yellow, berry pink,
   sky blue and lavender.  Shapes are mint, answers are leaf green.
   ============================================================ */

:root {
    --leaf: #3fae6b;
    --leaf-dark: #23854b;
    --mint: #c9f0d6;
    --mint-2: #a5e3bb;
    --soil: #9b6a43;
    --soil-light: #f3e3cf;
    --sun: #ffc93c;
    --sun-dark: #dda21a;
    --berry: #e2577f;
    --berry-dark: #b93a60;
    --sky: #4aa3df;
    --sky-dark: #2a7bb3;
    --lav: #8d78d6;
    --lav-dark: #6650b5;
    --ink: #2f3a33;
    --ink-soft: #66756b;
    --paper: #fffef8;
    --good: #35c26b;
    --bad: #ef6461;
    --shadow: 0 6px 0 rgba(0, 0, 0, .08), 0 12px 26px rgba(50, 90, 60, .15);
}

* {
    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, #c6ecff 0%, #e3f6ff 38%, #eefbe6 70%, #dff3cf 100%);
    padding: 64px 14px 40px;
    overflow-x: hidden;
}

/* drifting clouds */
.sky {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.sky::before,
.sky::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 38px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 26px -14px 0 4px #fff, 58px 2px 0 -6px #fff, -6px 4px 0 -4px #fff;
    opacity: .65;
    animation: drift 70s linear infinite;
    top: 7%;
    left: -300px;
}

.sky::after {
    top: 36%;
    animation: drift2 100s linear infinite;
    animation-delay: -40s;
}

@keyframes drift {
    to {
        transform: translateX(calc(100vw + 340px));
    }
}

@keyframes drift2 {
    to {
        transform: translateX(calc(100vw + 340px)) scale(.7);
    }
}

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

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

.chip:hover {
    transform: translateY(-2px);
}

.chip.starcount {
    cursor: default;
    color: var(--soil);
}

.chip .s {
    color: var(--sun);
    margin-right: .3rem;
}

.chip.off {
    opacity: .45;
}

body.at-start .topbar {
    display: none;
}

body.at-start {
    padding-top: 20px;
}

/* ---------------- screens ---------------- */
.screen {
    display: none;
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
    animation: fadeUp .35s ease both;
}

.screen.active {
    display: block;
}

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

.card {
    background: var(--paper);
    border-radius: 28px;
    padding: 1.6rem 1.5rem 1.8rem;
    box-shadow: var(--shadow);
    text-align: center;
}

.start-card {
    max-width: 580px;
    margin: 0 auto;
}

.game-title {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(2.2rem, 8vw, 3.3rem);
    line-height: 1;
    color: var(--leaf-dark);
    letter-spacing: 1px;
    margin: .2rem 0 .5rem;
}

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

.tagline {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin-bottom: 1.2rem;
    line-height: 1.45;
}

.how-to {
    display: grid;
    gap: .7rem;
    text-align: left;
    margin: 0 auto 1.4rem;
    max-width: 440px;
}

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

.how-step p {
    font-size: .98rem;
    line-height: 1.35;
}

.how-num {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--sky);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: 'Fredoka One', cursive;
    font-size: 1.3rem;
}

.how-num.star {
    background: var(--sun);
}

.how-num.tile-ico {
    background: var(--mint-2);
    box-shadow: inset 0 0 0 3px var(--leaf);
}

.tiny-note {
    font-size: .8rem;
    color: #9fb0a4;
    margin-top: .8rem;
}

/* ---------------- buttons ---------------- */
.btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    background: var(--leaf);
    border: none;
    border-radius: 999px;
    padding: .7rem 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--leaf-dark);
    transition: transform .1s, box-shadow .1s, filter .15s;
    touch-action: manipulation;
}

.btn:hover {
    filter: brightness(1.06);
}

.btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--leaf-dark);
}

.btn-huge {
    font-size: 1.5rem;
    padding: .85rem 2.6rem;
    background: var(--berry);
    box-shadow: 0 5px 0 var(--berry-dark);
}

.btn-huge:active {
    box-shadow: 0 1px 0 var(--berry-dark);
}

.btn-big {
    font-size: 1.12rem;
    padding: .75rem 1.7rem;
}

.btn-small {
    font-size: .9rem;
    padding: .5rem 1rem;
}

.btn-ghost {
    background: #fff;
    color: var(--leaf-dark);
    box-shadow: 0 4px 0 #cfe8d6;
}

.btn-ghost:active {
    box-shadow: 0 1px 0 #cfe8d6;
}

.btn[hidden] {
    display: none;
}

.btn-row {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.btn-row.center {
    justify-content: center;
}

/* ---------------- map ---------------- */
.screen-title {
    font-family: 'Fredoka One', cursive;
    text-align: center;
    color: var(--leaf-dark);
    font-size: 1.8rem;
}

.screen-sub {
    text-align: center;
    color: var(--ink-soft);
    margin-bottom: 1.2rem;
}

.world {
    background: rgba(255, 255, 255, .5);
    border-radius: 26px;
    padding: .9rem;
    margin-bottom: 1.2rem;
    border: 3px solid rgba(255, 255, 255, .8);
}

.world-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 .3rem .8rem;
}

.world-head h3 {
    font-family: 'Fredoka One', cursive;
    font-size: 1.35rem;
    line-height: 1.1;
}

.world-head p {
    font-size: .88rem;
    color: var(--ink-soft);
}

.wnum {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: 'Fredoka One', cursive;
    font-size: 1.4rem;
}

.wstars {
    margin-left: auto;
    font-weight: 800;
    color: var(--soil);
    white-space: nowrap;
}

.w1 .wnum { background: var(--leaf); }
.w2 .wnum { background: var(--sun-dark); }
.w3 .wnum { background: var(--sky); }
.w4 .wnum { background: var(--lav); }
.w5 .wnum { background: var(--berry); }
.w1 .world-head h3 { color: var(--leaf-dark); }
.w2 .world-head h3 { color: #b07a07; }
.w3 .world-head h3 { color: var(--sky-dark); }
.w4 .world-head h3 { color: var(--lav-dark); }
.w5 .world-head h3 { color: var(--berry-dark); }

.map {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .8rem;
}

.lvl {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    text-align: left;
    background: var(--paper);
    border: 3px solid transparent;
    border-radius: 20px;
    padding: .75rem .9rem 1.6rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    box-shadow: var(--shadow);
    transition: transform .13s, border-color .13s;
}

.lvl:hover {
    transform: translateY(-3px);
    border-color: var(--sun);
}

.lvl.locked {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(.6);
}

.lvl.locked:hover {
    transform: none;
    border-color: transparent;
}

.lvl-badge {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #eef8f0;
}

.bsvg {
    width: 38px;
    height: 38px;
    display: block;
}

.bsvg * { stroke-linejoin: round; }
.bsvg .b0 { fill: #fff; stroke: #9cb3a3; stroke-width: 2; stroke-dasharray: 3 2; }
.bsvg .b1 { fill: var(--mint-2); stroke: var(--leaf-dark); stroke-width: 2; }
.bsvg .b2 { fill: #ffe08a; stroke: #c48c0c; stroke-width: 2; }
.bsvg .b3 { fill: #a9dcff; stroke: var(--sky-dark); stroke-width: 2; }
.bsvg .b3o { fill: none; stroke: var(--sky-dark); stroke-width: 2.5; }
.bsvg .b4 { fill: #d8cdfb; stroke: var(--lav-dark); stroke-width: 2; }
.bsvg .bw { fill: #fff; stroke: var(--lav-dark); stroke-width: 2; }
.bsvg .bl { stroke: var(--leaf-dark); stroke-width: 1; fill: none; opacity: .6; }
.bsvg .bl2 { stroke: #c0d0c4; stroke-width: 1; fill: none; }
.bsvg .bd { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2 2; fill: none; }
.bsvg .bd2 { stroke: var(--soil); stroke-width: 4; stroke-linecap: round; }
.bsvg .br { stroke: var(--berry); stroke-width: 3; stroke-linecap: round; }
.bsvg .bk { fill: var(--ink); }

/* CSS padlock for locked levels */
.lock {
    position: relative;
    display: block;
    width: 17px;
    height: 13px;
    border-radius: 3px;
    background: #8a9a8f;
    margin-top: 6px;
}

.lock::before {
    content: '';
    position: absolute;
    left: 3px;
    top: -9px;
    width: 11px;
    height: 11px;
    border: 3px solid #8a9a8f;
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    box-sizing: border-box;
}

.lvl-txt h3 {
    font-size: 1.02rem;
    line-height: 1.15;
}

.lvl-txt p {
    font-size: .8rem;
    color: var(--ink-soft);
    line-height: 1.25;
}

.lvl-stars {
    position: absolute;
    right: .7rem;
    bottom: .35rem;
    font-size: .85rem;
    letter-spacing: 1px;
    color: #dde3de;
}

.lvl-stars b {
    color: var(--sun);
}

/* ---------------- game + explore layout ---------------- */
.game-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto .8rem;
    padding: 0 .3rem;
    flex-wrap: wrap;
}

.lvl-name {
    font-family: 'Fredoka One', cursive;
    color: var(--leaf-dark);
    font-size: 1.25rem;
}

.lvl-name .tag {
    display: inline-block;
    background: var(--sun);
    color: #fff;
    border-radius: 999px;
    padding: 0 .6rem;
    font-size: .9rem;
    vertical-align: middle;
}

.dots {
    display: flex;
    gap: .35rem;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 2px #cfe8d6;
}

.dot.good {
    background: var(--good);
    box-shadow: none;
}

.dot.miss {
    background: var(--sun);
    box-shadow: none;
}

.dot.now {
    transform: scale(1.3);
    box-shadow: inset 0 0 0 3px var(--leaf);
}

.play-area {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.2rem;
    background: var(--paper);
    border-radius: 28px;
    padding: 1.2rem;
    box-shadow: var(--shadow);
    align-items: start;
}

.fig-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
}

.fig-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* never taller than the screen leaves room for: no scrolling to reach the controls */
    max-height: max(240px, calc(100vh - 250px));
    max-height: max(240px, calc(100dvh - 250px));
    background: #fbfdf9;
    border: 2px solid #e5efe7;
    border-radius: 20px;
    overflow: hidden;
}

svg.fig {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.controls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .8rem;
    align-items: center;
    justify-content: center;
}

.ctl-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
    justify-content: center;
}

.slider {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f2f8f3;
    border-radius: 999px;
    padding: .3rem .8rem;
    font-weight: 700;
    font-size: .92rem;
    flex: 1 1 200px;
    min-width: 0;
    max-width: 300px;
    height: 40px;
}

.slider .sl-name {
    white-space: nowrap;
    color: var(--ink-soft);
}

/* range inputs: draw our own track and thumb so every browser (Safari
   included) gets the same modest size instead of its native control */
.slider input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    width: 100%;
    min-width: 60px;
    max-width: 220px;
    height: 22px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.slider input[type=range]:focus {
    outline: none;
}

.slider input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: #cfe8d6;
}

.slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--leaf);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.slider input[type=range]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #cfe8d6;
}

.slider input[type=range]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--mint-2);
}

.slider input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--leaf);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.slider input[type=range]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(63, 174, 107, .35);
}

.slider .sl-val {
    min-width: 2.2em;
    text-align: right;
    color: var(--leaf-dark);
    font-family: 'Fredoka One', cursive;
}

.seg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #eef5f0;
    padding: 4px;
    border-radius: 999px;
}

.seg-b {
    font-family: inherit;
    font-weight: 700;
    font-size: .9rem;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    padding: .4rem .85rem;
    border-radius: 999px;
    cursor: pointer;
}

.seg-b.on {
    background: #fff;
    color: var(--leaf-dark);
    box-shadow: 0 2px 6px rgba(40, 80, 60, .15);
}

.ask-col {
    display: flex;
    flex-direction: column;
}

.mascot-row {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    margin-bottom: .8rem;
}

.mascot-holder {
    flex: 0 0 64px;
    width: 64px;
    height: 70px;
}

.mascot-holder.big {
    width: 120px;
    height: 130px;
    margin: 0 auto .3rem;
}

.bubble {
    flex: 1;
    position: relative;
    background: #eef8f0;
    border-radius: 16px 16px 16px 4px;
    padding: .6rem .85rem;
    font-size: .98rem;
    line-height: 1.38;
    min-height: 44px;
}

.bubble.pop {
    animation: pop .32s;
}

@keyframes pop {
    0% { transform: scale(.92); }
    60% { transform: scale(1.03); }
}

.bubble.good {
    background: #e2f8e9;
}

.bubble.bad {
    background: #fff1e6;
}

.soft {
    color: var(--ink-soft);
    font-weight: 500;
}

.note {
    background: #fffaea;
    border: 2px dashed #f0d79a;
    border-radius: 16px;
    padding: .75rem .95rem;
    font-size: 1.02rem;
    line-height: 1.55;
    min-height: 3rem;
}

.note:empty {
    display: none;
}

.note .hl {
    background: var(--sun);
    color: #fff;
    border-radius: 6px;
    padding: 0 .3rem;
}

.fsheet {
    margin: .4rem 0 0 1.1rem;
}

.ctab {
    border-collapse: collapse;
    margin: .2rem 0 .4rem;
    font-size: .95rem;
}

.ctab th,
.ctab td {
    border: 1.5px solid #ecd9a6;
    padding: .15rem .55rem;
    text-align: center;
}

.ctab th {
    background: #fff3cc;
    font-size: .85rem;
}

.prompt {
    font-family: 'Fredoka One', cursive;
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: .7rem;
}

.prompt .soft {
    font-family: 'Baloo 2', sans-serif;
    font-size: .95rem;
}

.stepno {
    display: inline-block;
    background: var(--lav);
    color: #fff;
    border-radius: 999px;
    padding: 0 .55rem;
    font-size: .8rem;
    vertical-align: middle;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
}

.pi-note {
    display: inline-block;
    background: #e7f3ff;
    color: var(--sky-dark);
    border-radius: 8px;
    padding: 0 .45rem;
    font-size: .85rem;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    white-space: nowrap;
}

.steps-done {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .6rem;
    font-family: 'Fredoka One', cursive;
    color: var(--leaf-dark);
}

.steps-done:empty {
    display: none;
}

.done-line.shown {
    color: var(--soil);
}

.c-r { color: var(--berry); }
.c-d { color: var(--sky-dark); }
.c-full { color: var(--leaf-dark); }
.c-part { color: #c48c0c; }
.c-a { color: var(--sky-dark); }
.c-b { color: var(--berry); }
.c-i { color: var(--lav-dark); }
.c-in { color: var(--leaf-dark); }
.c-out { color: var(--berry); }

.fr sup,
.fr sub {
    font-size: .72em;
}

/* answers: number pad + display */
.entry {
    font-family: 'Fredoka One', cursive;
    font-size: 1.9rem;
    background: #f4faf5;
    border: 3px solid var(--mint-2);
    border-radius: 16px;
    padding: .2rem .9rem;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .6rem;
}

.entry .ph {
    color: #c5d4c9;
}

.entry .val {
    color: var(--ink);
}

.entry .unit {
    font-size: 1.05rem;
    color: var(--ink-soft);
}

.pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    max-width: 300px;
}

.key {
    font-family: 'Fredoka One', cursive;
    font-size: 1.45rem;
    padding: .45rem 0;
    border: none;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 3px 0 #d3e6d8, inset 0 0 0 2px #e4f1e7;
    cursor: pointer;
    touch-action: manipulation;
}

.key:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #d3e6d8, inset 0 0 0 2px #e4f1e7;
}

.key.del {
    color: var(--berry);
}

.choices {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.opt {
    font-family: inherit;
    font-weight: 700;
    font-size: 1.08rem;
    text-align: left;
    padding: .6rem 1rem;
    border-radius: 16px;
    border: 3px solid #e1efe4;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: transform .1s, border-color .1s;
}

.opt:hover {
    border-color: var(--sun);
}

.opt.yes {
    border-color: var(--good);
    background: #e6f9ec;
}

.opt.no {
    border-color: var(--bad);
    background: #fdeceb;
    opacity: .7;
    animation: shake .3s;
}

.opt.dim {
    opacity: .45;
}

@keyframes shake {
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ============================================================
   SVG FIGURE STYLES
   ============================================================ */
.fig text {
    font-family: 'Fredoka One', 'Trebuchet MS', sans-serif;
    pointer-events: none;
}

.gridline {
    stroke: #dfe9e1;
    stroke-width: 1;
}

.grid.on .gridline {
    stroke: rgba(40, 110, 70, .22);
}

.grid.soil .gridline {
    stroke: #d9c3a9;
}

.gdot {
    fill: #9fb1a5;
}

.shape {
    fill: var(--mint);
    stroke: var(--leaf-dark);
    stroke-width: 3;
    stroke-linejoin: round;
}

.shape.tri,
.shape.tA,
.half {
    fill: #ffe7a0;
    stroke: #c48c0c;
}

.shape.tri2 {
    fill: #ffd16a;
    stroke: #c48c0c;
}

.half {
    fill: #ffd16a;
    stroke-width: 0;
    opacity: .7;
}

.shape.tB {
    fill: #ffc9d8;
    stroke: var(--berry-dark);
}

.shape.para,
.shape.trap,
.shape.kite {
    fill: #ffe7a0;
    stroke: #c48c0c;
}

.shape.para2 {
    fill: #ffc9d8;
    stroke: var(--berry-dark);
}

.shape.trap2 {
    fill: #ffc9d8;
    stroke: var(--berry-dark);
    transition: opacity .2s;
}

.shape.circ {
    fill: #bfe4ff;
    stroke: var(--sky-dark);
}

.shape.circ.pizza {
    fill: #ffdc8a;
    stroke: #d38a2a;
    stroke-width: 6;
}

.shape.circ.wheel {
    fill: #e3f1fb;
    stroke: #4b5a66;
    stroke-width: 7;
}

.shape.circ.pond {
    fill: #a6dcf5;
}

.shape.ring,
.shape.sector {
    fill: #d8cdfb;
    stroke: var(--lav-dark);
}

.shape.ell {
    fill: #bfe4ff;
    stroke: var(--sky-dark);
}

.shape.ngon,
.shape.poly,
.shape.latt {
    fill: #d8cdfb;
    stroke: var(--lav-dark);
}

.shape.latt {
    fill: rgba(216, 205, 251, .75);
}

.shape.star {
    fill: #ffd7e3;
    stroke: var(--berry-dark);
}

.shape.sq {
    fill: var(--mint);
}

.edge {
    stroke: var(--leaf-dark);
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
}

.edge.build {
    stroke: var(--lav-dark);
    stroke-dasharray: 6 5;
}

.edgeonly {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.cellfill {
    fill: var(--mint);
}

.cellline {
    fill: none;
    stroke: rgba(35, 133, 75, .3);
    stroke-width: 1;
}

.ghost {
    fill: none;
    stroke: #8aa095;
    stroke-width: 2;
    stroke-dasharray: 7 6;
}

.ghostc {
    fill: none;
    stroke: #b7c6bd;
    stroke-width: 2;
    stroke-dasharray: 7 6;
}

.ghostpoly {
    fill: none;
    stroke: var(--berry);
    stroke-width: 2;
    stroke-dasharray: 7 6;
}

.lbl {
    font-size: 17px;
    fill: var(--ink);
    paint-order: stroke;
    stroke: #fbfdf9;
    stroke-width: 5px;
    stroke-linejoin: round;
}

.lbl.big {
    font-size: 24px;
}

.lbl.small {
    font-size: 14px;
}

.lbl.tiny {
    font-size: 11px;
    fill: var(--ink-soft);
}

.lbl.soft {
    font-size: 14px;
    fill: var(--ink-soft);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
}

.lbl.q {
    fill: var(--berry);
    font-size: 22px;
}

.lbl.h {
    fill: var(--berry-dark);
}

.lbl.r,
.lbl.r2 {
    fill: var(--berry-dark);
}

.lbl.dd,
.lbl.c,
.lbl.d {
    fill: var(--sky-dark);
}

.lbl.ang {
    fill: var(--lav-dark);
}

.lbl.decoy {
    fill: #8a8f8b;
    font-size: 15px;
}

.hline {
    stroke: var(--berry);
    stroke-width: 2.5;
    stroke-dasharray: 6 5;
    fill: none;
}

.rmark {
    fill: none;
    stroke: var(--berry);
    stroke-width: 2;
}

.diag {
    stroke: var(--ink);
    stroke-width: 2;
    stroke-dasharray: 5 5;
    fill: none;
}

.spoke {
    stroke: rgba(102, 80, 181, .45);
    stroke-width: 1.5;
}

.rline {
    stroke: var(--berry);
    stroke-width: 4;
    stroke-linecap: round;
}

.rline.b {
    stroke: var(--lav-dark);
}

.dline {
    stroke: var(--sky-dark);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 2 7;
}

.mystery {
    stroke: var(--berry);
    stroke-width: 6;
    stroke-linecap: round;
}

.centre {
    fill: var(--ink);
}

.corner-dot {
    fill: var(--bad);
    stroke: #fff;
    stroke-width: 2;
    pointer-events: none;
}

.vdot {
    fill: var(--lav-dark);
    pointer-events: none;
}

.bdot {
    fill: var(--berry);
    stroke: #fff;
    stroke-width: 2;
    pointer-events: none;
}

.idot {
    fill: var(--lav-dark);
    stroke: #fff;
    stroke-width: 2;
    pointer-events: none;
}

.dothit {
    fill: transparent;
    cursor: pointer;
}

.dothit:hover {
    fill: rgba(141, 120, 214, .15);
}

/* Tilekins */
.tk-body {
    fill: var(--mint-2);
    stroke: var(--leaf-dark);
    stroke-width: 2;
}

.tk.r1 .tk-body {
    fill: #b8ebc9;
}

.tk.sq .tk-body {
    fill: #bfe9cf;
}

.tk.sprout .tk-body {
    fill: #8fdcaa;
}

.tk-eye {
    fill: var(--ink);
}

.tk-mouth {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.tilekin.tappable {
    cursor: pointer;
}

.tilekin.marked .tk-body {
    fill: var(--sun);
    stroke: var(--sun-dark);
}

.tilekin.marked .tk-eye,
.tilekin.marked .tk-mouth {
    opacity: 0;
}

.tnum {
    font-size: 16px;
    fill: #fff;
    font-family: 'Fredoka One', sans-serif;
    paint-order: stroke;
    stroke: var(--sun-dark);
    stroke-width: 3px;
}

.selbox {
    fill: none;
    stroke: var(--leaf-dark);
    stroke-width: 3;
}

.hit {
    fill: transparent;
    cursor: crosshair;
}

.partA {
    fill: rgba(74, 163, 223, .35);
    stroke: var(--sky-dark);
    stroke-width: 2;
}

.partB {
    fill: rgba(226, 87, 127, .3);
    stroke: var(--berry-dark);
    stroke-width: 2;
}

.gap {
    fill: rgba(255, 201, 60, .35);
    stroke: var(--sun-dark);
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

.cfull {
    fill: rgba(63, 174, 107, .5);
}

.cpart {
    fill: rgba(255, 201, 60, .55);
}

.rsq {
    fill: rgba(255, 140, 50, .35);
    stroke: #e07a1f;
    stroke-width: 3;
}

.puddle {
    fill: rgba(74, 163, 223, .45);
    stroke: var(--sky-dark);
    stroke-width: 3;
}

.circ-line {
    fill: none;
    stroke: var(--sky-dark);
    stroke-width: 3.5;
}

.wedge {
    stroke: #fff;
    stroke-width: 1;
    stroke-linejoin: round;
}

.wedge.wa {
    fill: #ffcf66;
}

.wedge.wb {
    fill: #f59a7a;
}

.fan {
    stroke: var(--lav-dark);
    stroke-width: 2;
}

.fan.f0 { fill: #d8cdfb; }
.fan.f1 { fill: #ffe7a0; }
.fan.f2 { fill: #c9f0d6; }

.pb {
    stroke: #fff;
    stroke-width: 3;
    stroke-linejoin: round;
}

.pb.tri { fill: #8fd6a8; }
.pb.rhom { fill: #7fb7f0; }
.pb.trap { fill: #f2866f; }
.pb.hexa { fill: #ffd166; }
.pb.hl { fill: var(--sun); }
.pb.trap.hl { fill: var(--sun); }

.inpoly {
    fill: rgba(63, 174, 107, .25);
    stroke: var(--leaf-dark);
    stroke-width: 2.5;
}

.inpoly.thin {
    stroke-width: 1;
}

.outpoly {
    fill: rgba(226, 87, 127, .12);
    stroke: var(--berry);
    stroke-width: 2.5;
}

.outside {
    stroke: #fff;
    stroke-width: 1;
    opacity: .35;
}

.inside {
    stroke: #fff;
    stroke-width: 1;
}

.o1 { fill: #7fb7f0; }
.o2 { fill: #f2a35e; }
.o3 { fill: #8fd6a8; }
.o4 { fill: #c3a6ff; }

.hole {
    fill: #fbfdf9;
    stroke: var(--lav-dark);
    stroke-width: 3;
}

.angarc {
    fill: none;
    stroke: var(--lav-dark);
    stroke-width: 2.5;
}

.shade {
    fill: #f5a3bd;
    stroke: var(--berry-dark);
    stroke-width: 3;
}

.cutout {
    fill: #fbfdf9;
    stroke: var(--berry-dark);
    stroke-width: 2.5;
}

.corners {
    fill: rgba(255, 201, 60, .5);
}

.ground {
    stroke: var(--soil);
    stroke-width: 3;
}

.ruler {
    stroke: var(--soil);
    stroke-width: 1.5;
}

.trail {
    stroke: var(--berry);
    stroke-width: 6;
    stroke-linecap: round;
}

.paint {
    fill: var(--berry);
    stroke: #fff;
    stroke-width: 2;
}

/* ---------------- Tess the mascot ---------------- */
.tess {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.t-tile { fill: var(--leaf); }
.t-q.a { fill: #9be3b4; }
.t-q.b { fill: #7fd6a0; }
.t-eye { fill: #26332b; }
.t-glint { fill: #fff; }
.t-cheek { fill: #ff9fb8; opacity: .8; }
.t-mouth { fill: none; stroke: #26332b; stroke-width: 3.5; stroke-linecap: round; }
.t-foot { fill: var(--soil); }
.t-stem { fill: none; stroke: #2f8a4c; stroke-width: 4; stroke-linecap: round; }
.t-leaf { fill: #58c77e; stroke: #2f8a4c; stroke-width: 2; }
.t-leaf.b { fill: #8fdc6f; }

.tess-sprout {
    transform-origin: 60px 30px;
    animation: sway 3s ease-in-out infinite;
}

@keyframes sway {
    50% { transform: rotate(7deg); }
}

.t-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: blink 5s infinite;
}

@keyframes blink {
    0%, 95%, 100% { transform: scaleY(1); }
    97% { transform: scaleY(.1); }
}

.mascot-holder.happy .tess {
    animation: hop .6s ease;
}

.mascot-holder.think .tess {
    animation: tilt .6s ease;
}

@keyframes hop {
    30% { transform: translateY(-14px) rotate(-4deg); }
    60% { transform: translateY(0) scale(1.04, .95); }
}

@keyframes tilt {
    30% { transform: rotate(-9deg); }
    70% { transform: rotate(6deg); }
}

/* ---------------- overlay reward ---------------- */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 50, 30, .5);
    display: none;
    place-items: center;
    z-index: 60;
    padding: 1rem;
}

.overlay.show {
    display: grid;
}

.reward-card {
    background: var(--paper);
    border-radius: 28px;
    padding: 1.8rem 1.6rem;
    text-align: center;
    max-width: 420px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    animation: rise .4s cubic-bezier(.2, 1.4, .5, 1) both;
}

@keyframes rise {
    from {
        transform: scale(.7) translateY(30px);
        opacity: 0;
    }
}

.reward-stars {
    font-size: 2.6rem;
    letter-spacing: 6px;
    color: #e2e8e3;
    margin-bottom: .3rem;
}

.reward-stars b {
    color: var(--sun);
    display: inline-block;
    animation: starpop .45s both;
}

.reward-stars b:nth-child(2) { animation-delay: .16s; }
.reward-stars b:nth-child(3) { animation-delay: .32s; }

@keyframes starpop {
    from { transform: scale(0) rotate(-90deg); }
    70% { transform: scale(1.3) rotate(10deg); }
}

.reward-card h2 {
    font-family: 'Fredoka One', cursive;
    color: var(--leaf-dark);
    font-size: 1.5rem;
}

.reward-card p {
    color: var(--ink-soft);
    margin: .4rem 0 .3rem;
}

/* ---------------- confetti ---------------- */
.confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 70;
}

.conf {
    position: absolute;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    animation: fall linear forwards;
}

.conf.leaf {
    border-radius: 0 10px 0 10px;
    width: 14px;
}

@keyframes fall {
    to { transform: translateY(110vh) rotate(720deg); }
}

/* ---------------- small screens ---------------- */
@media (max-width: 820px) {
    .play-area {
        grid-template-columns: 1fr;
        padding: .9rem;
    }

    .prompt {
        font-size: 1.1rem;
    }

    body {
        padding: 58px 10px 30px;
    }

    .lvl-name {
        font-size: 1.05rem;
    }

    .pad {
        max-width: 420px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01s !important;
        animation-iteration-count: 1 !important;
    }
}

.csmall {
    fill: rgba(255, 201, 60, .16);
}

.slider .sl-val {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .slider {
        flex-basis: 100%;
        max-width: none;
    }

    .slider input[type=range] {
        min-width: 0;
        max-width: none;
    }
}

/* ---------------- step bar: Learn > How > Explore > Quiz ---------------- */
.stepbar {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-wrap: wrap;
}

.sb {
    font-family: inherit;
    font-weight: 800;
    font-size: .85rem;
    border: none;
    background: rgba(255, 255, 255, .75);
    color: var(--ink-soft);
    border-radius: 999px;
    padding: .2rem .7rem .2rem .25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.sb i {
    font-style: normal;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e3eee6;
    font-size: .75rem;
}

.sb.done i {
    background: var(--mint-2);
    color: var(--leaf-dark);
}

.sb.on {
    background: var(--leaf);
    color: #fff;
}

.sb.on i {
    background: #fff;
    color: var(--leaf-dark);
}

.sb-sep {
    color: #a9bcae;
    font-weight: 800;
}

.btn-row.tight {
    margin-top: 0;
    gap: .5rem;
}

/* ---------------- learn / how cards ---------------- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
}

.chip-p {
    font-family: inherit;
    font-weight: 700;
    font-size: .92rem;
    border: 2px solid #dbeadf;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: .3rem .8rem;
    cursor: pointer;
}

.chip-p.on {
    background: var(--sun);
    border-color: var(--sun-dark);
    color: #5a3d00;
}

.ls-h {
    font-family: 'Fredoka One', cursive;
    color: var(--leaf-dark);
    font-size: 1.2rem;
    margin: .2rem 0 .4rem;
}

.props {
    list-style: none;
    display: grid;
    gap: .45rem;
}

.props li {
    position: relative;
    background: #f4faf5;
    border-radius: 12px;
    padding: .45rem .7rem .45rem 2rem;
    line-height: 1.4;
}

.props li::before {
    content: '';
    position: absolute;
    left: .7rem;
    top: .85rem;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--leaf);
}

.formula {
    background: #fffaea;
    border: 2px dashed #f0d79a;
    border-radius: 16px;
    padding: .6rem .9rem;
    margin-bottom: .8rem;
}

.f-words {
    line-height: 1.4;
}

.f-sym {
    font-family: 'Fredoka One', cursive;
    font-size: 1.45rem;
    color: var(--berry-dark);
    margin-top: .2rem;
}

.wsteps {
    margin: 0 0 .7rem 1.4rem;
    display: grid;
    gap: .35rem;
    line-height: 1.45;
}

.wsteps li::marker {
    font-family: 'Fredoka One', cursive;
    color: var(--lav-dark);
}

.pop-in {
    animation: fadeUp .3s ease both;
}

/* diagram parts that can light up */
[data-part] {
    cursor: pointer;
    transition: opacity .15s;
}

.side-hl {
    stroke: transparent;
    stroke-width: 12;
    stroke-linecap: round;
    fill: none;
}

.arc-hl {
    fill: none;
    stroke: transparent;
    stroke-width: 12;
}

.lit,
.lit * {
    stroke: #ff9f1c !important;
}

line.lit,
polyline.lit,
path.arc-hl.lit {
    stroke-width: 7 !important;
    opacity: .85;
}

polygon.lit,
rect.lit,
circle.lit,
path.lit,
g.lit rect,
g.lit circle,
g.lit polygon {
    stroke-width: 5 !important;
}

text.lit {
    fill: #d97706 !important;
    stroke: #fff !important;
    stroke-width: 5px !important;
    font-size: 22px;
}

.tickm,
.parmark {
    stroke: var(--ink);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
}

.rmark.big {
    stroke-width: 2.5;
}

.dimln {
    stroke: var(--berry);
    stroke-width: 3;
}

.unitbox {
    fill: none;
    stroke: var(--berry);
    stroke-width: 4;
}

.cornring {
    fill: none;
    stroke: transparent;
    stroke-width: 3;
}

.vdot2 {
    fill: var(--lav-dark);
    stroke: #fff;
    stroke-width: 2;
}

.circ-edge {
    fill: none;
    stroke: transparent;
    stroke-width: 10;
}