/* Gilbert Knows — shared styles for learn/bite pages (tokens per DESIGN.md) */
:root{
  --orange: oklch(0.72 0.17 55);
  --orange-soft: oklch(0.95 0.045 65);
  --ink: oklch(0.22 0.01 55);
  --paper: oklch(0.985 0.008 85);
  --purple: oklch(0.55 0.2 315);
  --purple-soft: oklch(0.95 0.035 315);
  --blue: oklch(0.85 0.08 230);
  --blue-soft: oklch(0.96 0.025 230);
  --yellow: oklch(0.88 0.16 95);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-lift: 8px 8px 0 var(--ink);
  --shadow-press: 2px 2px 0 var(--ink);
  --ease-out: cubic-bezier(0.22,1,0.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;font-weight:600;font-size:19px;line-height:1.55;color:var(--ink);background:var(--paper);overflow-x:hidden}
h1,h2,h3{font-family:'Fredoka',sans-serif;line-height:1.1}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
::selection{background:var(--yellow)}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:8px}

.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.12rem;
  min-height:56px;padding:12px 28px;border-radius:999px;cursor:pointer;
  border:3px solid var(--ink);box-shadow:var(--shadow);color:var(--paper);
  background:var(--purple);text-decoration:none;
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.btn.orange{background:var(--orange)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lift)}
.btn:active{transform:translate(4px,4px);box-shadow:var(--shadow-press)}

/* top bar */
.topbar{display:flex;align-items:center;gap:14px;padding:18px 0}
.topbar .home{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.3rem}
.topbar .home img{width:46px}
.topbar .spacer{flex:1}
.stage-chip{font-family:'Fredoka',sans-serif;font-weight:600;background:var(--yellow);
  border:3px solid var(--ink);border-radius:999px;padding:8px 18px;cursor:pointer;
  box-shadow:var(--shadow-press);font-size:1rem;white-space:nowrap;flex-shrink:0}
@media (max-width:560px){
  .topbar .home{font-size:1.05rem;gap:8px}
  .topbar .home img{width:34px}
  .stage-chip{font-size:0.85rem;padding:6px 13px;border-width:2.5px}
}

/* speech bubble */
.gbubble{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:20px;
  padding:16px 22px;font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.12rem;
  box-shadow:var(--shadow-press)}
.gbubble::after{content:"";position:absolute;left:34px;bottom:-16px;width:22px;height:22px;
  background:var(--paper);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:rotate(55deg) skew(20deg)}

/* cards */
.card{background:var(--paper);border:3px solid var(--ink);border-radius:26px;box-shadow:var(--shadow);padding:26px}
.tag{display:inline-block;font-size:0.82rem;font-weight:900;letter-spacing:0.06em;text-transform:uppercase;
  padding:3px 13px;border-radius:999px;border:2.5px solid var(--ink)}
.tag.blue{background:var(--blue)} .tag.purple{background:var(--purple);color:var(--paper)}
.tag.yellow{background:var(--yellow)} .tag.orange{background:var(--orange)}

/* choice chips (shared by TRY engines + quiz) */
.chip{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.05rem;min-height:56px;
  padding:12px 20px;border-radius:18px;border:3px solid var(--ink);background:var(--paper);
  cursor:pointer;box-shadow:var(--shadow-press);
  transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),background .2s}
.chip:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.chip:active{transform:translate(2px,2px);box-shadow:none}
.chip.right{background:var(--yellow);animation:squish .38s var(--ease-out)}
.chip.wrong{animation:shake .4s var(--ease-out)}
.chip.done{background:var(--blue-soft);cursor:default;opacity:0.85}
.chip.picked{background:var(--purple);color:var(--paper)}
@keyframes squish{0%{transform:scale(1)}30%{transform:scale(1.1,0.86)}60%{transform:scale(0.95,1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-2deg)}75%{transform:translateX(7px) rotate(2deg)}}
@keyframes wobble{0%{transform:rotate(0)}30%{transform:rotate(-3deg) scale(1.05)}60%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.pop-in{animation:popin .3s var(--ease-out)}
@keyframes popin{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}

.confetti{position:fixed;width:14px;height:14px;border-radius:4px;z-index:99;pointer-events:none;top:0;left:0}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal.shown{opacity:1;transform:none}

footer.mini{background:var(--ink);color:var(--paper);text-align:center;padding:34px 20px;margin-top:80px;
  font-size:0.95rem}
footer.mini a{color:var(--yellow)}
footer.mini .worried{font-family:'Fredoka',sans-serif;font-size:1.05rem;margin-bottom:6px}

@media (prefers-reduced-motion:reduce){
  .pop-in,.chip.right,.chip.wrong{animation:none !important}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}