/* Quiz Pop Kids — colors taken from the video build (ep02/work/build.py); fonts per style guide */
@font-face{font-family:"Fredoka";src:url(fonts/Fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Lilita One";src:url(fonts/LilitaOne.ttf) format("truetype");font-display:swap}
:root{
  --light:#14AAFF;--dark:#005AC8;           /* current sunburst pair, changes per question */
  --star:#FFCD00;--star-edge:#C85A00;--gold:#FFD700;
  --badge-a:#FF466E;--badge-b:#288CFF;
  --ok:#28C850;--bad:#F0323C;--ink:#281446;--sub:#EB1E28;
  --white:#fff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow-x:hidden}
body{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;color:var(--white);background:var(--dark)}
#bg{position:fixed;inset:0;z-index:-1;transition:background .4s;
  background:
   radial-gradient(circle at 50% 2px,rgba(255,255,255,.12) 2px,transparent 3px) 0 0/48px 48px,
   repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.10) 0 7.5deg,transparent 7.5deg 15deg),
   radial-gradient(circle at 50% 45%,var(--light) 0%,var(--dark) 85%)}
main{max-width:560px;margin:0 auto;min-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.shadow{text-shadow:0 4px 0 rgba(20,10,40,.55),0 0 2px var(--ink)}
h1,h2,.title{font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;margin:0;letter-spacing:.5px}
button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}
.logo{text-align:center;margin:8px 0 18px}
.logo .star{width:84px;height:84px;margin:0 auto 4px}
.logo h1{font-size:44px;line-height:1}
.logo h1 span{color:var(--star)}
.logo p{margin:6px 0 0;font-size:18px;opacity:.95}
.ep-list{display:flex;flex-direction:column;gap:14px}
.ep{display:flex;align-items:center;gap:14px;width:100%;min-height:96px;padding:14px 18px;border-radius:28px;background:#fff;color:var(--ink);text-align:left;box-shadow:0 8px 0 rgba(0,0,0,.25);transition:transform .1s}
.ep:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.ep .emo{font-size:40px;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;flex:none}
.ep .t{font-family:"Lilita One";font-size:24px;line-height:1.1}
.ep .s{font-size:15px;font-weight:500;opacity:.75;margin-top:4px}
.ep .best{margin-left:auto;font-size:18px;white-space:nowrap}
.linkbtn{margin:22px auto 0;background:rgba(255,255,255,.2);color:#fff;padding:14px 26px;border-radius:999px;font-size:18px;min-height:52px}
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.icon-btn{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ink);font-size:26px;display:grid;place-items:center;box-shadow:0 5px 0 rgba(0,0,0,.25);flex:none}
.icon-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.qnum{position:relative;width:64px;height:64px;flex:none}
.qnum svg{position:absolute;inset:0}
.qnum b{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;padding-top:4px;-webkit-text-stroke:3px var(--star-edge);paint-order:stroke fill}
.progress{flex:1;height:14px;border-radius:9px;background:rgba(0,0,0,.25);overflow:hidden}
.progress i{display:block;height:100%;background:var(--star);border-radius:9px;transition:width .3s}
.question{font-family:"Lilita One";font-size:30px;line-height:1.15;text-align:center;margin:10px 4px 6px;min-height:70px;display:flex;align-items:center;justify-content:center}
.wordcard{text-align:center;margin:4px 0 2px}
.wordcard .w{font-family:"Lilita One";font-size:46px;color:var(--star);letter-spacing:2px}
.wordcard .m{font-size:18px;font-weight:500;background:rgba(0,0,0,.2);border-radius:16px;padding:8px 12px;display:inline-block;margin-top:4px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.choice{position:relative;background:#fff;border-radius:26px;padding:8px;box-shadow:0 8px 0 rgba(0,0,0,.28);transition:transform .15s,filter .3s;color:var(--ink);display:flex;flex-direction:column}
.choice:active{transform:scale(.97)}
.choice img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:19px;display:block;background:#ddd}
.choice .badge{position:absolute;top:-8px;left:-8px;width:50px;height:50px;border-radius:50%;border:5px solid #fff;display:grid;place-items:center;font-size:26px;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.choice[data-k=A] .badge{background:var(--badge-a)}
.choice[data-k=B] .badge{background:var(--badge-b)}
.choice .pill{margin:8px auto 2px;padding:4px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:19px;min-height:34px;display:flex;align-items:center}
.choice .mark{position:absolute;top:50%;left:50%;width:96px;height:96px;margin:-56px 0 0 -48px;border-radius:50%;border:7px solid #fff;display:grid;place-items:center;font-size:54px;color:#fff;transform:scale(0);box-shadow:0 6px 0 rgba(0,0,0,.25)}
.choice.right .mark{background:var(--ok);animation:pop .45s cubic-bezier(.3,1.8,.5,1) forwards}
.choice.wrong .mark{background:var(--bad);animation:pop .45s cubic-bezier(.3,1.8,.5,1) forwards}
.choice.right{animation:bounce .7s .2s}
.choice.dim img,.choice.dim .pill{filter:saturate(.3) brightness(.7)}
.locked .choice{pointer-events:none}
@keyframes pop{to{transform:scale(1)}}
@keyframes bounce{0%,100%{transform:scale(1)}30%{transform:scale(1.07)}60%{transform:scale(.97)}}
.feedback{margin-top:18px;text-align:center;min-height:120px}
.feedback .big{font-family:"Lilita One";font-size:34px}
.feedback .fact{font-size:18px;font-weight:500;background:rgba(0,0,0,.22);border-radius:18px;padding:10px 14px;margin-top:8px}
.hint{text-align:center;font-size:20px;margin-top:16px;opacity:.95}
.bigbtn{display:block;width:100%;min-height:72px;margin-top:16px;border-radius:999px;background:var(--star);color:var(--ink);font-family:"Lilita One";font-size:28px;box-shadow:0 7px 0 var(--star-edge)}
.bigbtn:active{transform:translateY(4px);box-shadow:0 3px 0 var(--star-edge)}
.bigbtn.alt{background:#fff;box-shadow:0 7px 0 rgba(0,0,0,.25)}
.result{text-align:center;margin-top:20px}
.result h2{font-size:42px}
.stars{display:flex;justify-content:center;gap:6px;margin:18px 0 6px}
.stars svg{width:84px;height:84px;transform:scale(0);animation:pop .5s cubic-bezier(.3,1.8,.5,1) forwards}
.stars svg:nth-child(2){animation-delay:.25s;width:104px;height:104px;margin-top:-16px}
.stars svg:nth-child(3){animation-delay:.5s}
.score{font-size:30px;margin:8px 0}
.credits{color:var(--ink);background:#fff;border-radius:24px;padding:16px;font-weight:500;font-size:14px;line-height:1.4}
.credits h3{font-family:"Lilita One";font-weight:400;font-size:22px;margin:12px 0 6px}
.credits ul{padding-left:18px;margin:0}
.credits a{color:#005AC8;word-break:break-all}