:root {
    --ink: #2d3350;
    --ink-soft: #6a6f8e;
    --paper: #fffdf7;
    --a: #4aa8f0;
    --a-dark: #2a82c8;
    --b: #ff9a3c;
    --b-dark: #d9741a;
    --both: #8a5cd6;
    --good: #2fbf71;
    --bad: #ff6b6b;
    --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; }

body {
    font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
    color: var(--ink);
    background: linear-gradient(175deg, #d9f1ff 0%, #effaff 45%, #f3fbe9 100%);
    min-height: 100vh;
    padding: 56px 14px 60px;
    font-size: 1.15rem;
    line-height: 1.45;
}

main { max-width: 640px; margin: 0 auto; display: grid; gap: 1.2rem; }

.topbar {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    gap: 8px;
    justify-content: center;
}
.chip {
    font-family: inherit;
    border: 2px solid #fff;
    cursor: pointer;
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    padding: .3rem .9rem;
    box-shadow: 0 3px 10px rgba(50, 80, 110, .13);
}

.title { text-align: center; }
.title h1 { font: clamp(2.4rem, 8vw, 3.4rem)/1.05 'Fredoka One', sans-serif; color: var(--a-dark); }
.title h1 span { color: var(--b); }
.title p { color: var(--ink-soft); }

.card {
    background: var(--paper);
    border: 4px solid #fff;
    border-radius: 26px;
    box-shadow: var(--shadow);
    padding: 1.2rem 1.3rem 1.4rem;
    display: grid;
    gap: .7rem;
}

h2 { font: 1.45rem 'Fredoka One', sans-serif; display: flex; align-items: center; gap: .5rem; }
.num {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--a); color: #fff; font-size: 1.1rem;
    box-shadow: 0 3px 0 var(--a-dark);
}
.stars { margin-left: auto; color: #ffc93c; letter-spacing: 2px; font-size: 1.3rem; }

.c-a { color: var(--a-dark); }
.c-b { color: var(--b-dark); }
.c-both { color: var(--both); }
.story { font-size: 1.25rem; }
.note { color: var(--ink-soft); }

/* ---------- the diagram ---------- */
.venn {
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 5.4;
    margin: .3rem 0;
}
.ring {
    position: absolute;
    top: 13%;
    width: 54%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 4px solid;
    mix-blend-mode: multiply;
}
.ring.a { left: 4%; background: rgba(74, 168, 240, .28); border-color: var(--a); }
.ring.b { right: 4%; background: rgba(255, 154, 60, .32); border-color: var(--b); }

.tag {
    position: absolute;
    top: 0;
    font: clamp(.95rem, 3.6vw, 1.2rem) 'Fredoka One', sans-serif;
}
.tag.a { left: 8%; color: var(--a-dark); }
.tag.b { right: 8%; color: var(--b-dark); text-align: right; }

.spot {
    position: absolute;
    top: 58%;
    transform: translate(-50%, -50%);
    text-align: center;
    font: clamp(1.8rem, 8vw, 2.8rem)/1 'Fredoka One', sans-serif;
    transition: transform .25s;
}
.spot.left { left: 21%; color: var(--a-dark); }
.spot.mid { left: 50%; color: var(--both); }
.spot.right { left: 79%; color: var(--b-dark); }
.spot small { display: block; font: 700 clamp(.85rem, 3.2vw, 1.05rem)/1.15 'Baloo 2', sans-serif; }
.spot.pop { animation: pop .5s ease-out; }
@keyframes pop { 40% { transform: translate(-50%, -50%) scale(1.35); } }

/* ---------- worked steps ---------- */
.step {
    background: #f1f8ff;
    border-radius: 18px;
    padding: .7rem 1rem;
    min-height: 5.2em;
}
.step .big { font: 1.4rem 'Fredoka One', sans-serif; }
.step .dots { color: var(--ink-soft); font-size: .95rem; }

.watch {
    background: #fff4e0;
    border-left: 6px solid var(--b);
    border-radius: 12px;
    padding: .6rem .9rem;
}

/* ---------- buttons and inputs ---------- */
.row { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.btn {
    font: 1.1rem 'Fredoka One', sans-serif;
    color: #fff;
    background: var(--good);
    border: none;
    border-radius: 999px;
    padding: .55rem 1.3rem;
    box-shadow: 0 4px 0 #23965a;
    cursor: pointer;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #23965a; }
.btn.soft { background: #fff; color: var(--ink); box-shadow: 0 4px 0 #d6d9e8; border: 2px solid #e6e8f2; }
.btn:disabled { opacity: .4; cursor: default; }

input {
    width: 2.1em;
    font: inherit;
    font-size: clamp(1.4rem, 6vw, 2rem);
    text-align: center;
    color: inherit;
    background: #fff;
    border: 3px dashed currentColor;
    border-radius: 14px;
    padding: .1em 0;
}
input:focus { outline: none; border-style: solid; box-shadow: 0 0 0 4px rgba(74, 168, 240, .25); }
input.ok { border: 3px solid var(--good); background: #e6f8ee; }
input.no { border: 3px solid var(--bad); background: #ffecec; animation: shake .35s; }
@keyframes shake { 25% { translate: -5px; } 75% { translate: 5px; } }

.total {
    justify-self: center;
    font: 1.6rem 'Fredoka One', sans-serif;
    display: flex; align-items: center; gap: .5rem;
}
.total input { color: var(--ink); }

.hint { background: #f1f8ff; border-radius: 14px; padding: .5rem .9rem; min-height: 2.6em; }
.hint.win { background: #e6f8ee; }

/* ---------- animation ---------- */
.ring { transition: box-shadow .3s, filter .3s; }
.ring.glow { box-shadow: 0 0 0 8px rgba(255, 201, 60, .55); animation: glow 1s ease-in-out 2; }
@keyframes glow { 50% { box-shadow: 0 0 0 14px rgba(255, 201, 60, .25); } }
.spot.lit { animation: lit .45s ease-out; }
@keyframes lit { 40% { transform: translate(-50%, -50%) scale(1.5); filter: drop-shadow(0 0 8px #ffc93c); } }

/* kids walk in from the bottom to their part of the diagram */
.kids { position: absolute; inset: 0; pointer-events: none; }
.kid {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    line-height: 1;
    animation: walk-in .7s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes walk-in { from { left: 50%; top: 108%; opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
.kid i { position: absolute; right: -.35em; bottom: -.2em; font-size: .5em; font-style: normal; white-space: nowrap; }
.count { margin-right: auto; align-self: center; font: 1.25rem 'Fredoka One', sans-serif; color: var(--both); }

.extotal { text-align: center; font: 1.8rem 'Fredoka One', sans-serif; min-height: 1.3em; }
.extotal b { color: var(--good); display: inline-block; animation: lit .5s ease-out; }

.confetti {
    position: fixed;
    top: -20px;
    width: 10px;
    height: 14px;
    border-radius: 3px;
    z-index: 50;
    pointer-events: none;
    animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
    .spot.pop, .spot.lit, input.no, .ring.glow, .extotal b { animation: none; }
    .kid { animation: none; }
    .confetti { display: none; }
}