/* Koorenny Games — Kids Zone shared styles */
:root{
  --bg:#fff8e8; --panel:#ffffff; --ink:#26304a; --ink2:#5d6785; --line:rgba(38,48,74,.14);
  --accent:#ff9f1c; --accent-d:#e07f00; --accent-soft:#ffe9c4;
  --good:#2fb457; --good-soft:#d8f5e1; --bad:#ef5b5b; --bad-soft:#fde0e0;
  --blue:#3b8cff; --pink:#ff6fae; --purple:#8a63e8; --teal:#1fbfae; --yellow:#ffd23f;
  --r:22px;
  color-scheme: light;
}
html[data-tier="little"]{--accent:#ff9f1c;--accent-d:#e07f00;--accent-soft:#ffe9c4;--bg:#fff8e8}
html[data-tier="explorers"]{--accent:#1fbfae;--accent-d:#0e9a8b;--accent-soft:#cdf5ef;--bg:#effcf9}
html[data-tier="adventurers"]{--accent:#7c5cf0;--accent-d:#5d3fd0;--accent-soft:#e4dcff;--bg:#f4f0ff}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:'Fredoka','Baloo 2','Nunito','Trebuchet MS',system-ui,sans-serif;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
h1,h2,h3,p{margin:0}

#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;max-width:1000px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}

/* top bar */
#kbar{display:flex;align-items:center;gap:8px;flex:none}
#kbar .title{flex:1;text-align:center;font-size:clamp(18px,4.6vw,26px);font-weight:700;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;background:var(--panel);border:2px solid var(--line);font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;box-shadow:0 3px 0 var(--line)}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.pill.off{opacity:.45}
#kstars{color:#c98600;min-width:70px}
#kstars.bump{animation:kbump .45s}

#kprompt{flex:none;min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:clamp(20px,5.4vw,30px);font-weight:600;padding:12px 4px 6px;line-height:1.2}
#kprompt .speak{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-size:20px;flex:none;box-shadow:0 3px 0 var(--accent-d)}
#kprompt .speak:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-d)}
#kdots{flex:none;display:flex;justify-content:center;gap:6px;min-height:14px;padding-bottom:4px}
#kdots i{width:12px;height:12px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
#kdots i.on{background:var(--accent);transform:scale(1.2)}
#kstage{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:6px 0 10px;gap:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 26px;border-radius:18px;background:var(--accent);color:#fff;font-weight:700;font-size:20px;box-shadow:0 5px 0 var(--accent-d);transition:transform .08s,box-shadow .08s;text-decoration:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-d)}
.btn.alt{background:var(--panel);color:var(--ink);box-shadow:0 5px 0 var(--line);border:2px solid var(--line)}
.btn.alt:active{box-shadow:0 1px 0 var(--line)}
.btn.good{background:var(--good);box-shadow:0 5px 0 #1f8a3f}
.btn.small{min-height:44px;font-size:16px;padding:0 18px;border-radius:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}

/* big answer choices */
.choices{display:grid;gap:14px;width:100%;max-width:760px;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
.choice{display:flex;align-items:center;justify-content:center;min-height:clamp(84px,18vh,150px);padding:10px;border-radius:var(--r);background:var(--panel);border:3px solid var(--line);box-shadow:0 6px 0 var(--line);font-size:clamp(34px,9vw,64px);font-weight:700;color:var(--ink);transition:transform .08s,box-shadow .08s,background .2s,border-color .2s;text-align:center;line-height:1.05}
.choice:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
.choice.right{background:var(--good-soft);border-color:var(--good);box-shadow:0 6px 0 var(--good);animation:kpop .5s}
.choice.wrong{background:var(--bad-soft);border-color:var(--bad);box-shadow:0 6px 0 var(--bad);animation:kshake .4s;pointer-events:none;opacity:.7}
.choice.sm{font-size:clamp(22px,5.4vw,36px);min-height:78px}

.card{background:var(--panel);border:3px solid var(--line);border-radius:var(--r);box-shadow:0 6px 0 var(--line);padding:14px}
.big-emoji{font-size:clamp(46px,12vw,92px);line-height:1}
.hidden{display:none!important}

/* overlay */
.overlay{position:fixed;inset:0;z-index:300;background:rgba(38,48,74,.45);display:flex;align-items:center;justify-content:center;padding:18px;animation:kfade .25s}
.overlay .sheet{background:var(--panel);border-radius:28px;padding:28px 24px;max-width:460px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 12px 0 rgba(0,0,0,.12);animation:kpop .5s}
.overlay h2{font-size:34px}
.overlay p{font-size:20px;color:var(--ink2)}
.overlay .big-emoji{font-size:76px}

/* level picker */
.picker{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%;max-width:520px}
.picker .opt{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 18px;border-radius:20px;background:var(--panel);border:3px solid var(--line);box-shadow:0 5px 0 var(--line);font-size:22px;font-weight:700}
.picker .opt small{display:block;font-size:14px;font-weight:500;color:var(--ink2)}
.picker .opt .em{font-size:38px;flex:none;width:52px;text-align:center}
.picker .opt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}
.picker .opt:hover{border-color:var(--accent)}

/* animations */
@keyframes kpop{0%{transform:scale(.7)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes kshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes kbump{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-4deg)}100%{transform:scale(1)}}
@keyframes kfade{from{opacity:0}to{opacity:1}}
@keyframes kfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.shake{animation:kshake .4s}
.pop{animation:kpop .45s}
.float{animation:kfloat 2.4s ease-in-out infinite}
canvas#kconf{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:290}
@media (prefers-reduced-motion: reduce){ .float,.shake,.pop{animation:none} }

@media (max-width:480px){
  #kbar{gap:6px}
  #kbar .title{display:none}
  #kbar .pill{min-width:44px}
  #kbar #kstars{margin-left:auto}
}