/* Looky Kids demo shell — shared comic-pop base for every kids' demo.
   Game-specific styles live in each game's own <style> block. */
:root{
  --sun:#FFD934; --orange:#FF6B00; --blue:#3F6DF6; --pink:#FF2E91;
  --green:#22C55E; --purple:#6C32FF; --ink:#171717; --paper:#FFF8E7;
  --line:3px solid var(--ink);
  --shadow:0 6px 0 var(--ink);
  --shadow-sm:0 4px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden;min-height:100%}
body{
  font-family:-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(var(--sun) 2.5px, transparent 2.5px);
  background-size:26px 26px;
  display:flex;flex-direction:column;align-items:center;
  user-select:none;-webkit-user-select:none;
}
button{font-family:inherit;color:var(--ink);cursor:pointer}

/* header (injected by shell.js) */
.ks-top{width:100%;max-width:760px;display:flex;align-items:center;gap:10px;padding:14px 14px 6px;flex-wrap:wrap}
.ks-logo{
  font-weight:900;font-size:clamp(17px,4.4vw,24px);letter-spacing:-1px;
  background:#fff;border:var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
  padding:6px 14px;line-height:1.1;cursor:pointer;white-space:nowrap
}
.ks-logo b{color:var(--orange)} .ks-logo i{color:var(--blue);font-style:normal}
.ks-pill{
  margin-left:auto;font-weight:900;font-size:14px;background:#fff;border:var(--line);
  border-radius:999px;padding:8px 14px;box-shadow:var(--shadow-sm);white-space:nowrap
}
.ks-pill.low{background:var(--pink);color:#fff}
.ks-pill.free{background:var(--green);color:#fff}
.ks-sound{border:var(--line);background:#fff;border-radius:999px;width:42px;height:42px;
  font-size:20px;box-shadow:var(--shadow-sm);flex:0 0 auto}

/* stage card */
.stage{
  width:min(94vw,760px);margin:10px 0 30px;background:#fff;border:var(--line);
  border-radius:24px;box-shadow:var(--shadow);padding:clamp(14px,4vw,30px);
  text-align:center;position:relative;overflow:hidden
}

/* mascot */
.buddy{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.face{
  width:clamp(64px,15vw,92px);height:clamp(64px,15vw,92px);border:var(--line);border-radius:50%;
  background:var(--blue);display:flex;align-items:center;justify-content:center;
  font-size:clamp(32px,8vw,48px);box-shadow:var(--shadow-sm);flex:0 0 auto
}
.bubble{
  background:var(--sun);border:var(--line);border-radius:16px;box-shadow:var(--shadow-sm);
  padding:10px 16px;font-weight:900;font-size:clamp(14px,3.8vw,18px);max-width:440px
}
@keyframes bop{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.face.happy{animation:bop .5s ease 2}

/* shared game bits */
h1{font-size:clamp(24px,6vw,36px);font-weight:900;letter-spacing:-1.5px;margin-bottom:4px}
.sub{font-weight:700;color:#555;margin-bottom:16px;font-size:clamp(13px,3.4vw,15px)}
.hud{display:flex;justify-content:space-between;font-weight:900;margin-bottom:12px;font-size:15px;gap:8px;flex-wrap:wrap}
.q{font-size:clamp(30px,8vw,52px);font-weight:900;letter-spacing:-1px;margin:8px 0 4px;min-height:1.2em}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ans{
  border:var(--line);border-radius:18px;background:#fff;font-size:clamp(20px,5.5vw,34px);
  font-weight:900;padding:clamp(12px,3.4vw,20px);box-shadow:var(--shadow-sm);transition:transform .1s
}
.ans:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ans.good{background:var(--green);color:#fff}
.ans.bad{background:var(--pink);color:#fff;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.levels{display:grid;gap:14px}
.lvl{
  display:flex;align-items:center;gap:14px;text-align:left;border:var(--line);border-radius:18px;
  padding:13px 16px;font-size:clamp(16px,4.2vw,20px);font-weight:900;box-shadow:var(--shadow-sm);
  transition:transform .1s;background:#fff
}
.lvl:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.lvl .em{font-size:clamp(26px,6.5vw,34px)}
.lvl small{display:block;font-weight:700;font-size:clamp(11px,3vw,13px);opacity:.75}
.big-btn{
  display:inline-block;border:var(--line);border-radius:18px;background:var(--orange);color:#fff;
  font-size:clamp(16px,4.6vw,22px);font-weight:900;padding:13px 24px;box-shadow:var(--shadow-sm);
  text-decoration:none;margin:6px;cursor:pointer
}
.big-btn.alt{background:#fff;color:var(--ink)}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.stars{font-size:clamp(42px,12vw,66px);margin:10px 0}
.quit{margin-top:16px;border:none;background:none;font-weight:900;color:#999;text-decoration:underline;font-size:14px;cursor:pointer}
.foot{margin-top:16px;font-size:12px;font-weight:700;color:#777}
.foot a{color:var(--blue)}
/* countdown bar */
.tbar{height:14px;border:var(--line);border-radius:99px;overflow:hidden;background:#fff;margin:10px auto 0;max-width:420px}
.tbar span{display:block;height:100%;background:var(--green);transition:width .2s linear}
.tbar.hot span{background:var(--pink)}

/* confetti */
.confetti{position:absolute;top:-10px;font-size:22px;pointer-events:none;animation:fall 1.3s linear forwards;z-index:5}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:.4}}

/* time-up overlay */
.ks-gate{position:fixed;inset:0;background:rgba(23,23,23,.72);display:none;align-items:center;
  justify-content:center;padding:18px;z-index:50}
.ks-gate.on{display:flex}
.ks-gate-card{background:#fff;border:var(--line);border-radius:24px;box-shadow:var(--shadow);
  max-width:440px;width:100%;padding:28px 22px;text-align:center}
.ks-gate-card h2{font-size:clamp(22px,5.6vw,30px);font-weight:900;letter-spacing:-1px;margin:8px 0}
.ks-gate-card p{font-weight:700;color:#555;margin-bottom:14px;font-size:15px}

@media (prefers-reduced-motion: reduce){
  .face.happy,.ans.bad{animation:none}
  .confetti{display:none}
}