@font-face{font-family:Fredoka;src:url(assets/fredoka.woff) format("woff");font-weight:300 700;font-display:swap}
:root{--sun:#ffb703;--sun2:#ffd166;--cream:#fff7e3;--leaf:#2a9d4b;--leaf2:#8ccf5a;--berry:#e85d4a;--sky:#8fd3ff;--ink:#3b2a1a;--wood:#b9844f;--card:#fffdf6;--sh:0 6px 0 rgba(120,70,20,.18),0 10px 24px rgba(120,70,20,.15)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;position:fixed;inset:0;width:100%}
body{font-family:Fredoka,"Baloo 2",system-ui,sans-serif;color:var(--ink);background:linear-gradient(#bfe8ff 0%,#fff1c9 55%,#ffe2a8 100%);touch-action:manipulation}
body:before{content:"";position:fixed;inset:auto 0 0 0;height:22vh;background:repeating-linear-gradient(90deg,#d9a46b 0 46px,#c88f56 46px 50px);border-top:6px solid #a8733f;opacity:.55;z-index:0}
body:after{content:"";position:fixed;top:-12vmin;right:-12vmin;width:40vmin;height:40vmin;border-radius:50%;background:radial-gradient(circle,#fff6b0 0 35%,#ffd23f 36% 55%,rgba(255,210,63,0) 72%);animation:spin 40s linear infinite;z-index:0}
@keyframes spin{to{transform:rotate(360deg)}}
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px}
.title{font-weight:700;font-size:clamp(20px,3vw,28px);color:#8a4b12;flex:0 0 auto;letter-spacing:.3px}
.dots{flex:1;display:flex;justify-content:center;gap:10px}
.dots i{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--sun);transition:.35s}
.dots i.on{background:var(--sun);transform:scale(1.25)}
.dots i.done{background:var(--leaf);border-color:var(--leaf)}
.ibtn{width:54px;height:54px;border-radius:18px;border:0;background:#fff;color:#8a4b12;box-shadow:var(--sh);display:grid;place-items:center;cursor:pointer;text-decoration:none;flex:0 0 auto}
.ibtn svg{width:30px;height:30px}.ibtn .slash{display:none}.ibtn[aria-pressed=true] .slash{display:block}
.ibtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(120,70,20,.2)}
.guide{display:flex;align-items:center;gap:12px;padding:0 16px;min-height:96px}
.guide img{width:88px;height:88px;border-radius:50%;border:5px solid #fff;box-shadow:var(--sh);background:#fff;flex:0 0 auto;transition:transform .3s}
.guide img.talk{animation:bob .6s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-4px) rotate(-3deg)}}
.bubble{background:#fff;border-radius:22px;padding:12px 20px;font-size:clamp(19px,2.5vw,26px);font-weight:500;box-shadow:var(--sh);position:relative;max-width:820px;line-height:1.25}
.bubble:before{content:"";position:absolute;left:-12px;top:50%;margin-top:-10px;border:10px solid transparent;border-right:14px solid #fff;border-left:0}
.guide.hide{visibility:hidden}
#stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:10px 16px 18px;min-height:0}
.screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;animation:in .45s cubic-bezier(.2,.9,.3,1.2)}
.screen.out{animation:out .3s ease-in forwards}
@keyframes in{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes out{to{opacity:0;transform:translateY(-18px) scale(.98)}}
h1{margin:0;font-size:clamp(40px,7vw,72px);line-height:1;color:#c2410c;text-shadow:0 4px 0 #ffe08a,0 8px 18px rgba(160,80,0,.25);text-align:center}
h2{margin:0;font-size:clamp(24px,3.4vw,34px);color:#8a4b12;text-align:center}
.sub{font-size:clamp(18px,2.4vw,24px);text-align:center;margin:0;color:#6b4a2a}
.hero{width:min(70vw,520px);aspect-ratio:16/9;border-radius:32px;background:url(assets/hero.jpg) center/cover;border:8px solid #fff;box-shadow:var(--sh);animation:float 3.5s ease-in-out infinite alternate}
@keyframes float{to{transform:translateY(-8px) rotate(.8deg)}}
.btn{font:inherit;font-weight:700;font-size:clamp(24px,3.4vw,34px);border:0;border-radius:999px;padding:16px 46px;min-height:72px;background:linear-gradient(#ffcf4d,#ffa600);color:#5a2e00;box-shadow:0 7px 0 #c46f00,0 14px 24px rgba(160,80,0,.3);cursor:pointer;transition:transform .1s}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 #c46f00}
.btn.green{background:linear-gradient(#7fd66b,#2a9d4b);color:#fff;box-shadow:0 7px 0 #1c6e33,0 14px 24px rgba(20,90,40,.3)}
.btn.small{font-size:22px;padding:10px 26px;min-height:58px}
.row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background:var(--card);border-radius:26px;box-shadow:var(--sh);border:4px solid #fff;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .3s;font-weight:600;color:var(--ink);font-family:inherit}
.card:active{transform:scale(.96)}
.card.sel{outline:6px solid var(--sun);transform:scale(1.04)}
.card.good{background:#e3f8d8;border-color:var(--leaf)}
.card.done{opacity:.35;pointer-events:none}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.pop{animation:pop .4s}
@keyframes pop{50%{transform:scale(1.15)}}
/* round 1 */
.r1{display:grid;grid-template-columns:1fr minmax(240px,34%);gap:20px;width:100%;max-width:1000px;height:100%;align-items:center}
.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.item{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(16px,2vw,20px);touch-action:none;padding:6px}
.item svg{width:68%;height:auto;pointer-events:none}
.item.drag{position:fixed;z-index:50;pointer-events:none;transform:scale(1.1) rotate(-4deg);box-shadow:0 18px 30px rgba(0,0,0,.25)}
.item.ghost{visibility:hidden}
.pot{position:relative;display:flex;flex-direction:column;align-items:center;border-radius:30px;padding:10px;transition:.2s}
.pot.hot{background:rgba(255,255,255,.55);transform:scale(1.04)}
.pot svg{width:100%;max-height:52vh}
.got{display:flex;gap:8px;margin-top:4px;font-size:18px;font-weight:600}
.got span{background:#fff;border-radius:999px;padding:4px 12px;box-shadow:var(--sh);opacity:.35}
.got span.on{opacity:1;background:#e3f8d8}
/* match */
.match{display:grid;grid-template-columns:minmax(180px,30%) 1fr;gap:18px 26px;width:100%;max-width:980px}
.col{display:flex;flex-direction:column;gap:16px}
.part{display:flex;align-items:center;gap:12px;padding:10px 16px;font-size:26px;min-height:96px}
.part svg{width:70px;height:70px;flex:0 0 auto}
.job{padding:16px 22px;font-size:clamp(18px,2.3vw,23px);min-height:96px;text-align:left;font-weight:500;line-height:1.25}
/* sort */
.sort{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:900px}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%}
.bin{border:0;font:inherit;border-radius:30px;min-height:150px;font-size:clamp(26px,3.6vw,36px);font-weight:700;color:#fff;cursor:pointer;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px}
.bin small{font-size:18px;font-weight:500;opacity:.95}
.bin.in{background:linear-gradient(#5fc2ff,#2a7de1)}.bin.out{background:linear-gradient(#ffb24d,#e8590c)}
.bin:active{transform:translateY(4px)}
.bin .list{font-size:17px;font-weight:500;min-height:22px}
.sortcard{font-size:clamp(28px,4vw,40px);padding:22px 40px;display:flex;align-items:center;gap:16px;cursor:default}
.sortcard svg{width:76px;height:76px}
/* choice */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%;max-width:900px}
.choice{padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:clamp(20px,2.6vw,26px);min-height:200px}
.choice svg{width:min(150px,60%);height:auto}
.fact{background:#fff;border-radius:22px;padding:14px 22px;box-shadow:var(--sh);font-size:clamp(18px,2.3vw,22px);max-width:820px;text-align:center;line-height:1.3}
/* syllables */
.syl{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.syl button{font:inherit;font-weight:700;font-size:clamp(28px,4.4vw,44px);min-width:110px;min-height:100px;padding:10px 18px}
.word{font-size:clamp(34px,5.5vw,56px);font-weight:700;letter-spacing:1px;min-height:1.2em;color:var(--leaf)}
.word span{opacity:.18;transition:.3s}.word span.on{opacity:1}
/* order */
.order{display:flex;flex-direction:column;gap:12px;width:100%;max-width:760px}
.step{display:flex;align-items:center;gap:14px;padding:12px 18px;font-size:clamp(19px,2.4vw,24px);text-align:left;min-height:74px}
.step b{width:44px;height:44px;border-radius:50%;background:#ffe9b0;display:grid;place-items:center;flex:0 0 auto;font-size:22px}
.step.good b{background:var(--leaf);color:#fff}
/* finish */
.stars{display:flex;gap:10px}
.stars svg{width:min(15vw,100px);height:auto;opacity:.25;transform:scale(.6);transition:.5s cubic-bezier(.2,1.6,.4,1)}
.stars svg.on{opacity:1;transform:scale(1)}
.cert{width:min(92vw,620px);max-height:42vh;aspect-ratio:1.414;height:auto;border-radius:16px;box-shadow:var(--sh);background:#fff;object-fit:contain}
.namebox{font:inherit;font-size:24px;padding:10px 18px;border-radius:16px;border:3px solid var(--sun);min-height:58px;width:min(80vw,360px);text-align:center;-webkit-user-select:text;user-select:text;color:var(--ink)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.spark{position:absolute;width:14px;height:14px;border-radius:4px;animation:spark .9s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) rotate(260deg) scale(.3);opacity:0}}
.ripple{position:absolute;width:20px;height:20px;margin:-10px;border-radius:50%;border:4px solid #fff;animation:rip .5s ease-out forwards}
@keyframes rip{to{transform:scale(5);opacity:0}}
@media (orientation:portrait){
 .r1{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .pot{order:-1}.pot svg{max-height:22vh}.r1{gap:10px}.tray{gap:12px}.item{aspect-ratio:auto;min-height:150px}
 .match{grid-template-columns:1fr;gap:14px}.col.parts{flex-direction:row}.part{flex:1;flex-direction:column;font-size:22px;min-height:0;padding:10px}
 .choices{grid-template-columns:1fr}.choice{min-height:150px;flex-direction:row;justify-content:center}.choice svg{width:110px}
 .bin{min-height:190px}
}
@media (max-height:700px) and (orientation:landscape){.guide{min-height:76px}.guide img{width:66px;height:66px}.hero{width:min(40vw,330px)}}
#printCert{display:none}
@media print{#app,#fx{display:none!important}#printCert{display:block}#printCert img{width:100%}body,html{position:static;background:#fff}body:before,body:after{display:none}}