:root{
  --pink:#ff8fb1; --pink-d:#ff6d9c; --cream:#fff7f0; --mint:#8ed9c0;
  --sky:#8ecbff; --sun:#ffd166; --purple:#b892ff; --ink:#4a3f55; --card:#fff;
  --shadow:0 8px 0 rgba(0,0,0,.08),0 14px 24px rgba(120,80,120,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Comic Sans MS','Baloo 2',system-ui,sans-serif;
  background:linear-gradient(180deg,#eef6ff 0%,#f3f0ff 45%,#fff0f6 100%);
  color:var(--ink);line-height:1.55;overflow-x:hidden}
h1,h2,h3{font-weight:800;letter-spacing:.5px}
.wrap{max-width:920px;margin:0 auto;padding:0 18px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:3px dashed var(--purple);display:flex;align-items:center;justify-content:space-between;padding:8px 16px;flex-wrap:wrap;gap:6px}
.brand{font-size:1.05rem;font-weight:800;color:var(--purple);display:flex;align-items:center;gap:6px}
.brand a{color:var(--purple);text-decoration:none}
.scorebox{display:flex;gap:10px;align-items:center;font-weight:800}
.scorebox .pill{background:var(--sun);padding:4px 12px;border-radius:20px;box-shadow:0 3px 0 rgba(0,0,0,.12);font-size:.95rem}
.hero{text-align:center;padding:26px 16px 6px}
.hero h1{font-size:1.9rem;color:var(--purple);text-shadow:2px 2px 0 #fff,4px 4px 0 rgba(184,146,255,.3)}
.hero p{font-size:1.05rem;margin-top:8px}
.mascots{display:flex;justify-content:center;gap:10px;margin:4px 0}
.mascots svg{width:96px;height:96px}
.bounce{animation:bounce 2.2s ease-in-out infinite}
.bounce2{animation:bounce 2.2s ease-in-out .5s infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 6px}
.nav a{text-decoration:none;color:var(--ink);background:#fff;padding:8px 14px;border-radius:20px;font-weight:700;font-size:.9rem;box-shadow:0 4px 0 rgba(0,0,0,.1);border:2px solid var(--purple)}
.nav a:hover{transform:translateY(-2px);background:var(--purple);color:#fff}
section{padding:20px 0}
.card{background:var(--card);border-radius:24px;padding:22px;box-shadow:var(--shadow);border:3px solid #e7dcff;margin:16px 0}
.card.mint{border-color:#c5efe3;background:#f5fffb}
.card.sky{border-color:#cfe8ff;background:#f4fbff}
.card.sun{border-color:#ffeec0;background:#fffdf3}
.card.pink{border-color:#ffe0ec;background:#fff7fb}
.sec-title{display:flex;align-items:center;gap:10px;font-size:1.4rem;color:var(--purple);margin-bottom:6px}
.sec-title .emoji{font-size:1.6rem}
.sec-sub{color:#7a6b85;margin:0 2px 6px}
p{margin:8px 0}
.progwrap{background:#efe6ff;border-radius:20px;height:22px;overflow:hidden;margin:10px 0;border:2px solid #ddccf5}
.progbar{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--pink));transition:width .5s;border-radius:20px}
.q{background:#fff;border:3px solid #e7dcff;border-radius:18px;padding:16px;margin:14px 0;box-shadow:0 5px 0 rgba(0,0,0,.05)}
.q .qhead{font-weight:800;display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.q .qhead .num{background:var(--pink);color:#fff;border-radius:50%;min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;flex:0 0 auto}
.qprompt{font-size:1.05rem;font-weight:700}
.bignote{display:flex;justify-content:center;margin:10px 0}
.bignote .inline-note svg{height:74px}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:center}
.opt{cursor:pointer;background:#fff;border:2px solid var(--sky);border-radius:14px;padding:8px 14px;font-weight:800;font-size:1.05rem;transition:.15s;user-select:none;display:flex;align-items:center;justify-content:center;min-width:56px}
.opt:hover{background:var(--sky);color:#fff}
.opt.noteopt .inline-note svg{height:42px}
.opt:hover .inline-note{color:#fff}
.opt.correct{background:var(--mint);border-color:var(--mint);color:#fff;animation:pop .3s}
.opt.correct .inline-note{color:#fff}
.opt.wrong{background:#ffb3c1;border-color:#ffb3c1;color:#fff;animation:shake .3s}
.opt.locked{pointer-events:none;opacity:.7}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fb{margin-top:10px;font-weight:700;min-height:22px;text-align:center}
.fb.ok{color:#22a37f}.fb.no{color:#e0567a}
.inline-note{display:inline-flex;align-items:center;vertical-align:middle;color:var(--ink)}
.inline-note svg{height:46px;width:auto}
.plus{color:var(--purple);margin:0 4px;font-size:1.5rem;font-weight:800}
.addrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin:6px 0}
.fillrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;font-weight:700;font-size:1.05rem}
.blank{font-family:inherit;font-size:1.1rem;font-weight:800;border:2px solid var(--sky);border-radius:12px;padding:6px 8px;width:74px;text-align:center;color:var(--ink);background:#fff}
.blank:focus{outline:none;border-color:var(--purple)}
.checkbtn{cursor:pointer;background:var(--mint);color:#fff;border:none;border-radius:12px;padding:7px 16px;font-weight:800;font-family:inherit;box-shadow:0 3px 0 #63c3a6}
.checkbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #63c3a6}
.qstars{text-align:right;font-weight:800;color:var(--pink-d);margin:2px 0}
.donebox{text-align:center;font-weight:800;color:var(--purple);font-size:1.25rem;display:none;margin-top:10px}
/* golden rules list */
.rules{counter-reset:none;margin:10px 0}
.rulecard{display:flex;gap:12px;align-items:flex-start;background:#fff;border:3px solid #e7dcff;border-radius:16px;padding:12px 14px;margin:10px 0;box-shadow:0 4px 0 rgba(0,0,0,.05)}
.rulecard .rn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.rulecard .rt{font-weight:700}
.rulecard.ex{border-color:#ffe0b8;background:#fffaf2}
.rulecard.ex .rn{background:var(--sun);color:var(--ink)}
.tag{display:inline-block;background:var(--purple);color:#fff;border-radius:12px;padding:1px 9px;font-size:.78rem;font-weight:800;margin-bottom:6px}
.tsgrid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.ts{background:#fff;border:2px solid #cfe8ff;border-radius:12px;padding:8px 12px;text-align:center;font-weight:800;min-width:78px;box-shadow:0 3px 0 rgba(0,0,0,.05)}
.ts small{display:block;color:#7a6b85;font-weight:700;font-size:.72rem;margin-top:2px}
.ts .sig{font-size:1.3rem;color:var(--purple);line-height:1}
/* stacked time signature (no slash) */
.tsig{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:.8;font-weight:800;vertical-align:middle;margin:0 3px;color:var(--purple)}
.tsig>span{display:block;font-size:.92em;padding:0 1px}
.ts .tsig{font-size:1.35rem}
/* 3-bar grouping picker */
.barpick{margin-top:8px}
.baropt{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid #e7dcff;border-radius:16px;padding:10px 12px;margin:12px 0;cursor:pointer;transition:.15s}
.baropt:hover{border-color:var(--sky);background:#f7fcff}
.baropt .barwrap{flex:1;min-width:0;display:flex;align-items:center}
.barsvg{width:100%;height:auto;max-height:86px}
.baropt .tick{flex:0 0 auto;width:28px;height:28px;border:2px solid var(--sky);border-radius:7px;position:relative;background:#fff}
.barpick .locked{pointer-events:none}
.baropt.correct{border-color:var(--mint);background:#f2fffb}
.baropt.correct .tick{background:var(--mint);border-color:var(--mint)}
.baropt.correct .tick::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem}
.baropt.wrong{border-color:#ffb3c1;background:#fff5f7}
.baropt.wrong .tick{border-color:#ff8fb1}
.whytxt{font-weight:600;color:#6a5b78;font-size:.92rem}
.footer{text-align:center;padding:26px 16px 50px;color:#a58fb0;font-weight:700}
.footer a{color:var(--purple)}
.confetti{position:fixed;top:-10px;width:10px;height:16px;z-index:99;border-radius:2px;pointer-events:none}
@media(max-width:520px){.hero h1{font-size:1.4rem}.mascots svg{width:78px;height:78px}}