:root{
  --pink:#ff8fc0; --pink2:#ffc2e0; --purple:#a97ae0; --purple2:#d6c2ff; --ink:#4b2a73; --mint:#8fe3c0; --sun:#ffd34d;
  --card:rgba(255,255,255,.88);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:"Trebuchet MS","Segoe UI","Comic Sans MS",system-ui,sans-serif; color:var(--ink);
  background:#e9d8ff url(../assets/background.jpg) center/cover no-repeat fixed;
  -webkit-user-select:none; user-select:none;
}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,214,240,.18));pointer-events:none}
#sparkles{position:fixed;inset:0;pointer-events:none;z-index:0}
.sp{position:absolute;color:#fff;text-shadow:0 0 8px #ff9ed2,0 0 14px #b78cff;animation:twinkle 4s ease-in-out infinite;opacity:0}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(40deg)}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:50}
.cf{position:absolute;animation:burst 1.2s ease-out forwards;transform:translate(-50%,-50%)}
@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 90px)) scale(1.3) rotate(220deg)}}
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;overflow:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent}
button:focus-visible,.region:focus-visible{outline:4px solid #ffd34d;outline-offset:2px}
.em{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}

/* ---- top bar ---- */
.hud{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;gap:10px;flex:0 0 auto}
.hudr{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{background:var(--card);border-radius:999px;padding:8px 16px;font-weight:800;font-size:18px;box-shadow:0 3px 0 rgba(169,122,224,.35),0 6px 14px rgba(120,80,180,.15)}
button.chip:hover{transform:translateY(-2px)} button.chip:active{transform:translateY(1px)}
.chip.auto{display:flex;gap:6px;align-items:center;cursor:pointer;font-size:16px}
.chip.auto input{width:20px;height:20px;accent-color:#ff6fa8}

/* ---- menu ---- */
.menu{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 20px}
.hero{display:flex;align-items:flex-end;justify-content:center;gap:10px;flex:0 0 auto;margin-top:-4px}

.bubble{background:#fff;border-radius:28px;padding:14px 20px;font-size:clamp(17px,2vw,23px);font-weight:700;max-width:520px;position:relative;box-shadow:0 6px 0 rgba(169,122,224,.35),0 10px 24px rgba(120,80,180,.2);margin-bottom:70px;display:flex;gap:10px;align-items:flex-start}
.bubble::after{content:"";position:absolute;right:-16px;bottom:30px;border:14px solid transparent;border-left-color:#fff;border-right:0}
.bubble p{margin:0}
.meerkat-stage{height:clamp(160px,28vh,290px);display:flex;align-items:flex-end}
.meerkat{height:100%;width:auto;filter:drop-shadow(0 10px 12px rgba(100,50,150,.3));transform-origin:50% 100%}
.meerkat.bounce{animation:bounce 2.2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-1.5deg) scale(1,1)}45%{transform:translateY(-16px) rotate(1.5deg) scale(.99,1.02)}55%{transform:translateY(-16px) rotate(1.5deg)}90%{transform:translateY(0) rotate(-1deg) scale(1.02,.98)}}
.meerkat.cheer{animation:cheer .9s ease}
@keyframes cheer{0%{transform:translateY(0)}25%{transform:translateY(-34px) rotate(-6deg)}50%{transform:translateY(0) rotate(5deg)}75%{transform:translateY(-18px) rotate(-3deg)}100%{transform:translateY(0)}}
.meerkat.wiggle{animation:wiggle .7s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
.speaker{background:linear-gradient(#fff,#ffe3f2);border-radius:50%;width:48px;height:48px;min-width:48px;font-size:22px;box-shadow:0 3px 0 rgba(169,122,224,.45)}
.speaker:hover{transform:scale(1.08)} .speaker:active{transform:scale(.95)}
.islands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,20px);width:min(940px,100%);padding-bottom:8px}
.island{--c:#ffc2e0;background:radial-gradient(circle at 30% 20%,#fff 0,var(--c) 70%);border-radius:36px 36px 46px 46px;padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:clamp(100px,16vh,150px);
  box-shadow:0 8px 0 rgba(120,80,180,.3),0 14px 24px rgba(120,80,180,.2),inset 0 -8px 14px rgba(255,255,255,.5);border:4px solid #fff;animation:float 4s ease-in-out infinite;transition:transform .15s}
.island:nth-child(2n){animation-delay:-1.2s}.island:nth-child(3n){animation-delay:-2.4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.island:hover{transform:scale(1.05) rotate(-1deg);animation-play-state:paused}
.island:active{transform:scale(.97)}
.island .ic{font-size:clamp(34px,5.5vh,52px);font-family:"Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1.1}
.island .tt{font-weight:900;font-size:clamp(18px,2.4vw,24px)}
.island .sb{font-size:clamp(12px,1.4vw,15px);font-weight:600;opacity:.85}
.stars{font-size:26px;letter-spacing:2px}
.star{color:rgba(120,80,180,.25);text-shadow:none}.star.on{color:#ffc400;text-shadow:0 0 8px #ffe680;animation:starpop .6s ease backwards}
.star.on:nth-child(2){animation-delay:.15s}.star.on:nth-child(3){animation-delay:.3s}
@keyframes starpop{0%{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.4) rotate(10deg)}100%{transform:scale(1)}}
.foot{text-align:center;padding:6px 0 14px;flex:0 0 auto}
.roamers{position:fixed;left:0;right:0;bottom:0;height:0;pointer-events:none;z-index:2}
.roam{position:absolute;bottom:10px}
.roam img{height:clamp(70px,13vh,120px);animation:hop 1.8s ease-in-out infinite}
.r0{left:1.5%}.r1{right:1.5%}.r2{left:11%;bottom:34vh}.r3{right:11%;bottom:36vh}.r4{left:4%;bottom:56vh}
.r1 img,.r3 img{transform:scaleX(-1)}
.r1 img{animation-delay:-.5s}.r2 img{animation-delay:-1s}.r3 img{animation-delay:-.3s}
@keyframes hop{0%,100%{translate:0 0}40%{translate:0 -18px}}
@media (max-width:1150px){.roamers{display:none}}

/* ---- buttons ---- */
.btn{border-radius:999px;padding:12px 28px;font-weight:900;font-size:clamp(18px,2vw,24px);background:linear-gradient(#fff,#ffe3f2);box-shadow:0 5px 0 rgba(169,122,224,.5),0 10px 18px rgba(120,80,180,.2);border:3px solid #fff}
.btn.go{background:linear-gradient(#ffb3d6,#ff7fb8);color:#fff;text-shadow:0 2px 0 rgba(160,40,100,.35)}
.btn.secondary{background:linear-gradient(#fff,#efe3ff)}
.btn.tiny{font-size:14px;padding:6px 14px;opacity:.7}
.btn:hover:not(:disabled){transform:translateY(-3px)} .btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 rgba(169,122,224,.5)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}

/* ---- question screen ---- */
.round{flex:1;display:flex;flex-direction:column;padding:0 16px 14px;min-height:0;gap:8px;width:min(1100px,100%);margin:0 auto}
.rtop{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border-radius:22px;padding:8px 16px;font-weight:900}
.rtitle{font-size:20px}.score{font-size:22px;color:#c77a00;transition:transform .2s}.score.pop{animation:starpop .5s ease}
.dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dot{width:16px;height:16px;border-radius:50%;background:rgba(169,122,224,.25);display:block}
.dot.done{background:linear-gradient(#ffd34d,#ffb300)}.dot.now{background:var(--pink);box-shadow:0 0 0 4px rgba(255,143,192,.4);animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.25)}}
.rbody{flex:1;display:flex;gap:14px;min-height:0;align-items:stretch}
.guide{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;width:clamp(120px,17vw,210px);flex:0 0 auto}
.guide .meerkat{height:clamp(150px,30vh,280px)}
.helper{background:var(--card);border-radius:20px;padding:4px 14px 6px;display:flex;align-items:center;gap:6px;font-weight:900;box-shadow:0 4px 0 rgba(169,122,224,.4)}
.helper .hs{height:46px}.helper:hover{transform:translateY(-2px)}
.sq{height:84px;width:auto;filter:drop-shadow(0 4px 5px rgba(100,50,150,.25))}
.sq.hs{height:44px}.sq.inl{height:36px;vertical-align:middle}.sq.big{height:150px}
.sq.shadow{filter:brightness(0) opacity(.18)}
.qcard{flex:1;align-self:flex-start;max-height:100%;min-width:0;background:var(--card);border-radius:30px;padding:14px 22px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 0 rgba(169,122,224,.3),0 16px 32px rgba(120,80,180,.2);border:4px solid #fff;overflow:auto}
.qtop{display:flex;justify-content:space-between;font-weight:800;font-size:15px;opacity:.75}
.topic{background:var(--c,#ffc2e0);border-radius:999px;padding:2px 12px}
.prompt{display:flex;gap:12px;align-items:center}
.prompt p{margin:0;font-size:clamp(20px,2.6vw,30px);font-weight:900;line-height:1.25;flex:1}
.visual{display:flex;justify-content:center;align-items:center;padding:2px 0}
.bignums{font-size:clamp(26px,4.4vw,46px);font-weight:900;letter-spacing:2px;text-align:center;background:linear-gradient(#fff,#fdeaff);border-radius:22px;padding:8px 22px;border:3px dashed var(--purple2)}
.bignums .comma{margin-right:4px}
.gap{display:inline-block;min-width:1.3em;background:var(--pink2);border-radius:14px;color:#c41f77;animation:pulse 1.6s infinite}
.clockwrap svg{filter:drop-shadow(0 6px 8px rgba(100,50,150,.25))}
.clockwrap.small svg{display:block}
.shapewrap svg{filter:drop-shadow(0 6px 8px rgba(100,50,150,.25))}
.rhymebase{display:flex;align-items:center;gap:14px;font-size:44px}
.rhymebase .big{font-size:76px}
.em.big{font-size:76px;line-height:1}
.scenario{display:flex;align-items:center;gap:16px;font-size:clamp(20px,2.4vw,28px)}
.thennow{display:flex;align-items:center;gap:18px;font-weight:800}
.thennow div{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:22px;padding:8px 20px}
.thennow small{font-size:15px;color:#8a5ac8}.thennow .arrow{font-size:34px;background:none;padding:0}
.stage-pic{display:flex;justify-content:center;align-items:center;min-height:70px}.stage-pic .em{font-size:60px}
.worldmap{width:min(700px,100%);max-height:34vh;height:auto;filter:drop-shadow(0 6px 8px rgba(100,50,150,.25))}
.region{transition:filter .2s,transform .2s}
.worldmap .region[tabindex]{cursor:pointer}
.worldmap .region[tabindex]:hover{filter:brightness(1.12) saturate(1.2)}
.region.hl{stroke:#e0357f;stroke-width:2.4;animation:glow 1.1s ease-in-out infinite alternate}
@keyframes glow{to{filter:brightness(1.12) drop-shadow(0 0 4px #fff)}}
.region.oopsr{opacity:.55}
.maphelp{text-align:center;margin:0;font-weight:800;opacity:.7}

/* answers */
.answers{display:grid;gap:12px;margin-top:2px}
.answers.choice{grid-template-columns:repeat(2,minmax(0,1fr))}
.answers.choice.clockopts{grid-template-columns:repeat(3,minmax(0,1fr))}
.answers.choice.bigtwo{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{background:linear-gradient(#fff,#f4e9ff);border:4px solid #fff;border-radius:26px;min-height:clamp(56px,9vh,90px);padding:8px 12px;font-weight:900;font-size:clamp(22px,2.8vw,34px);box-shadow:0 6px 0 rgba(169,122,224,.45),0 10px 16px rgba(120,80,180,.15);display:flex;align-items:center;justify-content:center;transition:transform .12s}
.opt:hover:not(:disabled){transform:translateY(-3px) scale(1.02);background:linear-gradient(#fff,#ffe3f2)}
.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 rgba(169,122,224,.45)}
.oh{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;line-height:1.1}
.oh small{display:block;width:100%;font-size:.6em;opacity:.7;font-weight:700}
.timeopts .oh,.answers.timeopts .oh{flex-direction:column;gap:0}
.opt .em{font-size:1.3em}
.bigtwo .opt{min-height:clamp(80px,13vh,120px);font-size:clamp(26px,3.4vw,40px)}
.opt.right{background:linear-gradient(#d6ffe9,#8fe3c0);border-color:#fff;animation:ok .6s ease}
@keyframes ok{40%{transform:scale(1.1)}}
.opt.oops{background:linear-gradient(#fff3d6,#ffe0a8);opacity:.85;transform:scale(.97)}
.opt.faded{opacity:.25}
.opt:disabled{cursor:default}
/* ordering */
.slots{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.slot{min-width:84px;min-height:84px;border-radius:22px;background:rgba(255,255,255,.7);border:4px dashed var(--purple2);font-size:clamp(24px,3.2vw,38px);font-weight:900;display:flex;align-items:center;justify-content:center;padding:4px 14px;transition:transform .12s}
.slot .n{opacity:.3;font-size:30px}
.slot.filled{background:#fff;border:4px solid var(--purple2);box-shadow:0 5px 0 rgba(169,122,224,.4)}
.slot.lockedok{background:linear-gradient(#d6ffe9,#aef0cf);border-color:#6fd9a5}
.slot .itm{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.pool{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.card{min-width:84px;min-height:70px;border-radius:22px;background:linear-gradient(#fff,#ffe3f2);border:4px solid #fff;font-size:clamp(24px,3.2vw,38px);font-weight:900;padding:6px 16px;box-shadow:0 6px 0 rgba(169,122,224,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .12s}
.card:hover:not(:disabled){transform:translateY(-3px) rotate(-1deg)}
.card.used{visibility:hidden}
.card small,.slot small{font-size:15px;font-weight:800;opacity:.75}
.order.words .slot{min-width:56px;min-height:60px;font-size:clamp(20px,2.4vw,30px);padding:4px 12px}
.order.words .card{min-height:56px;font-size:clamp(20px,2.4vw,30px)}
.order.cards .slot{min-width:120px;min-height:130px}.order.cards .card{min-width:120px;min-height:130px}
.orow{text-align:center;margin-top:4px}
/* feedback */
.fb{min-height:0}
.fb.show{animation:slidein .35s ease}
@keyframes slidein{from{opacity:0;transform:translateY(10px)}}
.msg{border-radius:22px;padding:10px 16px;font-size:clamp(16px,1.9vw,22px);font-weight:700;line-height:1.35}
.msg span{font-weight:600;opacity:.9}
.msg.good{background:linear-gradient(#e4fff1,#c8f5de)}
.msg.oops{background:linear-gradient(#fff6e0,#ffe9bd)}
.msg.soft{background:linear-gradient(#f1e6ff,#e2d1ff)}
.msg.hint{background:linear-gradient(#fff,#ffe9f6);border:3px dashed var(--pink)}
.fb .btn{display:block;margin:10px auto 0}

/* ---- result ---- */
.result{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px 16px;min-height:0}
.rcard{background:var(--card);border-radius:36px;border:5px solid #fff;padding:18px 28px 20px;text-align:center;width:min(640px,100%);box-shadow:0 10px 0 rgba(169,122,224,.35),0 20px 40px rgba(120,80,180,.25);max-height:100%;overflow:auto}
.rcard h2{margin:0;font-size:clamp(26px,3.6vw,40px)}
.bigstars .star{font-size:clamp(50px,9vh,76px)}
.rmsg{font-size:clamp(18px,2.2vw,24px);font-weight:800;margin:4px 0}.rscore{margin:4px 0 8px;font-size:clamp(16px,1.9vw,20px)}
.reward{background:linear-gradient(#fff,#ffe9f6);border-radius:26px;padding:8px 16px 10px;margin:6px 0 12px;border:3px dashed var(--pink)}
.rw-label{font-weight:900}.rw-sq{animation:hop 1.6s ease-in-out infinite}.rw-name{font-size:28px;font-weight:900}
.new{background:var(--sun);border-radius:999px;font-size:15px;padding:2px 10px;vertical-align:middle;animation:pulse 1s infinite;display:inline-block}
.rw-fact{font-weight:600;opacity:.85}
.rbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rbtns .btn{font-size:clamp(15px,1.7vw,20px);padding:10px 20px}
.meerkat-stage.side{height:clamp(200px,52vh,420px)}
@media (max-width:900px){.meerkat-stage.side{display:none}}

/* ---- collection ---- */
.coll{flex:1;padding:0 20px 16px;text-align:center;overflow:auto;width:min(1100px,100%);margin:0 auto}
.coll h2{margin:0;font-size:clamp(26px,3.4vw,40px);text-shadow:0 2px 0 #fff}
.csub{font-weight:800;font-size:18px;background:var(--card);display:inline-block;border-radius:999px;padding:4px 18px;margin:8px 0}
.csub.small{font-size:14px;opacity:.8}
.sgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:6px 0 12px}
.scard{background:rgba(255,255,255,.6);border-radius:24px;padding:8px 8px 10px;border:3px solid #fff}
.scard.have{background:var(--card);box-shadow:0 5px 0 rgba(169,122,224,.35)}
.scard .sq{height:clamp(70px,13vh,110px)}.scard.have .sq{animation:hop 2.4s ease-in-out infinite}
.sn{font-weight:900;font-size:20px}.x{background:var(--sun);border-radius:999px;font-size:13px;padding:1px 8px}.sf{font-size:13px;font-weight:600;opacity:.85;min-height:2.6em}
.cfoot{display:flex;gap:14px;justify-content:center;align-items:center}
@media (max-width:1000px){.sgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){
  .islands{grid-template-columns:repeat(2,1fr)}.sgrid{grid-template-columns:repeat(2,1fr)}
  .rbody{flex-direction:column}.guide{flex-direction:row;width:100%;justify-content:space-between}.guide .meerkat{height:100px}
  .answers.choice.clockopts{grid-template-columns:repeat(2,1fr)}
}
@media (max-height:640px){.guide .meerkat{height:110px}.meerkat-stage{height:150px}.bubble{margin-bottom:40px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}

.chip.logo{font-size:22px;color:#c2358a;background:linear-gradient(#fff,#ffe3f2)}