/* Kidzi game frame — shared by every game page */
#ga{background:var(--surface);border:3px solid var(--line);border-radius:32px;padding:16px 16px 22px;display:flex;flex-direction:column;gap:16px;max-width:560px;width:100%;margin-inline:auto}
#ga .gbar{display:flex;justify-content:flex-end;gap:8px}
#ga .icon-btn{border:2px solid var(--line);background:var(--bg);color:var(--ink);width:46px;height:46px;border-radius:50%;font-size:1.25rem;cursor:pointer;display:grid;place-items:center}
#ga .start,#ga .end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-block:6px 10px}
#ga .start .hero-emo{font-size:5rem;line-height:1.1}
#ga .start p{color:var(--soft);font-size:1.1rem;max-width:34ch}
#ga .bestline{font-size:.95rem;color:var(--soft);min-height:1.4em}
#ga .startbtn{font-size:1.4rem;padding:14px 44px}
#gPlay{display:flex;flex-direction:column;gap:16px}
#ga .progress{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
#ga .dot{width:22px;height:22px;font-size:.8rem;display:grid;place-items:center;color:var(--line)}
#ga .dot.done{color:var(--saffron)} #ga .dot.miss{color:var(--soft)} #ga .dot.now{transform:scale(1.25)}
#ga .card{background:var(--bg);border-radius:26px;padding:16px 16px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
#ga .question{font-size:1.2rem;font-weight:700;color:var(--soft);text-align:center;margin:0;padding-inline:44px}
#ga .prompt{cursor:pointer;user-select:none;display:flex;justify-content:center;width:100%}
#ga .prompt.pop{animation:gpop .5s ease}
#ga .emo{font-size:clamp(5rem,24vw,7.5rem);line-height:1.15}
#ga .count-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;max-width:330px;font-size:clamp(2.2rem,10vw,3rem);line-height:1.2;padding-block:8px}
#ga .reveal{font-size:clamp(1.8rem,8vw,2.4rem);font-weight:800;min-height:1.4em;display:flex;align-items:center;gap:10px;text-align:center}
#ga .reveal small{font-size:.7em;color:var(--soft)}
#ga .reveal .first{color:var(--rose)}
#ga .reveal.hidden{visibility:hidden}
#ga .chip{display:inline-block;width:.9em;height:.9em;border-radius:50%;border:2px solid var(--line)}
#ga .speak{position:absolute;inset-inline-end:10px;top:10px}
#ga .tiles{display:flex;justify-content:center;gap:clamp(8px,4vw,22px)}
#ga .tile{border:0;padding:0;background:none;cursor:pointer;width:clamp(88px,26vw,122px);aspect-ratio:1;max-width:100%;border-radius:22px}
#ga .star{width:100%;height:100%;display:grid;place-items:center;clip-path:polygon(100% 50%,85.36% 64.64%,85.36% 85.36%,64.64% 85.36%,50% 100%,35.36% 85.36%,14.64% 85.36%,14.64% 64.64%,0% 50%,14.64% 35.36%,14.64% 14.64%,35.36% 14.64%,50% 0%,64.64% 14.64%,85.36% 14.64%,85.36% 35.36%);color:#fff;font-weight:800;font-size:clamp(2.4rem,10vw,3.4rem);line-height:1;transition:transform .15s ease}
#ga .tile:nth-child(1) .star{background:var(--btn)} #ga .tile:nth-child(2) .star{background:var(--clay)} #ga .tile:nth-child(3) .star{background:var(--mint)}
#ga .tile:hover .star{transform:rotate(22.5deg)}
#ga .tile.wrong .star{background:var(--line);color:var(--soft);animation:gshake .4s}
#ga .tile.right .star{background:var(--saffron);color:var(--on-sun);animation:gspin .7s ease}
#ga .box{width:100%;height:100%;display:grid;place-items:center;background:var(--bg);border:3px solid var(--line);border-radius:22px;padding:12%;transition:transform .15s ease,border-color .15s}
#ga .tile:hover .box{border-color:var(--majorelle);transform:translateY(-3px)}
#ga .tile.wrong .box{opacity:.35;animation:gshake .4s}
#ga .tile.right .box{border-color:var(--saffron);border-width:5px;animation:gpop .5s ease}
#ga .swatch{width:100%;height:100%;border-radius:50%;border:3px solid var(--line)}
#ga .emo-sm{font-size:clamp(2.8rem,12vw,4rem);line-height:1}
#ga .tile[disabled]{cursor:default}
#ga .feedback{text-align:center;font-size:1.35rem;font-weight:800;min-height:1.6em;margin:0}
#ga .feedback.good{color:var(--mint)} #ga .feedback.try{color:var(--rose)}
/* memory */
#ga .moves{text-align:center;color:var(--soft);font-weight:700}
#ga .mgrid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:10px;max-width:440px;width:100%;margin-inline:auto}
#ga .mcard{aspect-ratio:1;border:0;border-radius:18px;cursor:pointer;position:relative;padding:0;font:inherit;background:var(--btn);color:#fff;transition:transform .25s ease}
#ga .mcard .back{font-size:1.8rem;color:var(--saffron)}
#ga .mcard .face{display:none;font-size:clamp(2rem,10vw,3rem);line-height:1}
#ga .mcard.up{background:var(--bg);box-shadow:inset 0 0 0 3px var(--line);animation:gpop .3s ease}
#ga .mcard.up .back{display:none} #ga .mcard.up .face{display:block}
#ga .mcard.matched{box-shadow:inset 0 0 0 4px var(--mint);cursor:default}
#ga .end .big{font-size:4.5rem;line-height:1}
#ga .end h2{font-size:2rem}
#ga .end p{font-size:1.2rem;color:var(--soft)}
#ga .endstars{font-size:1.5rem;letter-spacing:2px;color:var(--saffron);word-break:break-all}
#ga .end .btn{min-width:220px}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
.confetti i{position:absolute;top:-20px;width:12px;height:12px;border-radius:2px;animation:gfall 2.4s linear forwards}
.game-top{display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center}
.game-top h1{font-size:clamp(1.9rem,6vw,2.8rem)}
.game-top p{color:var(--soft);font-size:1.1rem;max-width:56ch}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;list-style:none;padding:0!important}
.items li{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:6px 12px;display:flex;gap:10px;align-items:center;min-width:0}
.items b{color:var(--majorelle);font-size:1.25rem;min-width:1.2em}
.items .sw{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none}
.items svg{width:28px;height:28px;flex:none}
@keyframes gpop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes gshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes gspin{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(45deg)}100%{transform:scale(1) rotate(90deg)}}
@keyframes gfall{to{transform:translateY(110vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){#ga *{animation:none!important;transition:none!important}}
#ga .eq{font-size:clamp(2.6rem,12vw,3.6rem);font-weight:800;padding-block:10px;display:flex;align-items:center;gap:12px;justify-content:center;font-variant-numeric:tabular-nums}
#ga .swatch-big{display:inline-block;width:clamp(52px,16vw,72px);height:clamp(52px,16vw,72px);border-radius:50%;border:3px solid var(--line)}
#ga .bl{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
#ga .bi{font-size:clamp(2rem,9vw,2.8rem)}
#ga .bl small{font-size:.85rem;font-weight:700;color:var(--soft)}
#ga .t-box .tile:only-child,#ga .tiles.t-box:has(> .tile:nth-child(2):last-child) .tile{width:clamp(120px,36vw,160px)}
#ga .word{font-size:clamp(1.15rem,5vw,1.6rem);font-weight:800;color:var(--ink);line-height:1.15;text-align:center;overflow-wrap:anywhere}
#ga .word-big{font-size:clamp(2.6rem,12vw,3.6rem);font-weight:800;color:var(--majorelle);padding-block:18px;line-height:1.2}
#ga .clockface{width:clamp(170px,52vw,220px);height:auto;color:#1b2240;margin-block:6px}
#ga .pizza{width:clamp(170px,50vw,210px);height:auto;margin-block:6px}
#ga .frac{display:inline-flex;flex-direction:column;align-items:center;font-weight:800;line-height:1.05;font-size:clamp(1.5rem,6.5vw,2rem);color:var(--ink)}
#ga .frac>span:first-child{border-bottom:3px solid currentColor;padding:0 .25em}
#ga .reveal .frac{font-size:.8em}
#ga .word.num{font-size:clamp(1.5rem,6.5vw,2rem)}
#ga .eq.seq{font-size:clamp(1.8rem,8.5vw,2.6rem)}
#ga .sentence{font-size:clamp(1.3rem,5.5vw,1.7rem);font-weight:700;text-align:center;line-height:1.5;padding:16px 6px;color:var(--ink)}
#ga .sentence small{color:var(--soft);font-size:.8em}
#ga .sentence .blank{color:var(--majorelle);letter-spacing:2px}
#ga .reveal b{color:var(--majorelle)}
#ga .reveal .rs{font-size:.62em;line-height:1.4}
/* text answers (spelling, verbs, words, times): wide boxes, one line, never cut a word */
#ga .tiles.t-text{gap:10px}
#ga .tiles.t-text .tile{aspect-ratio:auto;width:auto;flex:1 1 0;min-width:0;max-width:220px;min-height:clamp(74px,20vw,96px)}
#ga .tiles.t-text .box{padding:8px 6px}
#ga .word{white-space:nowrap;overflow-wrap:normal;word-break:keep-all;max-width:100%}
/* long words on small screens: answers stacked, full width, big text */
#ga .tiles.t-text.t-stack{flex-direction:column;align-items:center;gap:8px}
#ga .tiles.t-text.t-stack .tile{width:100%;max-width:340px;flex:none;min-height:60px}
#ga .tiles.t-text .tile{display:flex}
#ga .tiles.t-text .box{flex:1;height:auto}
#ga .tiles.t-text.t-stack .tile{min-height:64px}
#ga .tiles.t-text.t-stack .word{font-size:1.55rem}