/* Kids Corner shared base styles.
   Loaded by every game via <link rel="stylesheet" href="../shared/kids-base.css">.
   Games set their own --accent on :root and add game-specific styles after this.
   Deploys are atomic (public/ syncs whole), but treat changes here as touching
   every game: smoke-test all of them. */

:root{
  --ink:#3B2A4A;
  --ink-soft:#7A6690;
  --cream:#FFF7EC;
  --card:#FFFFFF;
  --good:#37B24D;
  --bad:#F03E3E;
  --accent:#7C5CFF;
  --shadow: 0 6px 0 rgba(59,42,74,.14), 0 12px 24px rgba(59,42,74,.12);
  --radius: 22px;
  font-size:16px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
               "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(60vw 60vw at 12% 8%,  #FFE0EC 0%, transparent 60%),
    radial-gradient(55vw 55vw at 88% 12%, #DCF0FF 0%, transparent 60%),
    radial-gradient(70vw 70vw at 50% 100%,#E6FBE0 0%, transparent 60%),
    var(--cream);
  background-attachment: fixed;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: clamp(12px, 3vw, 28px);
  overflow-x:hidden;
}

button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }

/* ---------- chunky buttons ---------- */
.btn{
  background:var(--card);
  border-radius:999px;
  padding:.75rem 1.4rem;
  font-weight:800;
  font-size:clamp(1rem, 2.4vw, 1.2rem);
  box-shadow:0 5px 0 rgba(59,42,74,.16);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(59,42,74,.16); }
.btn.primary{
  background:linear-gradient(180deg,#7C5CFF,#6A45F5);
  color:#fff;
  box-shadow:0 6px 0 #4B2FBF, 0 14px 26px rgba(106,69,245,.35);
  padding:.95rem 2rem;
  font-size:clamp(1.1rem, 3vw, 1.45rem);
}
.btn.primary:active{ transform:translateY(5px); box-shadow:0 1px 0 #4B2FBF; }
.btn.ghost{ background:rgba(255,255,255,.7); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn:disabled:active{ transform:none; }
.btn:focus-visible, .icon-btn:focus-visible, .choice:focus-visible, .kc-back:focus-visible{
  outline:4px solid var(--accent); outline-offset:3px;
}

/* ---------- screens ---------- */
.screen{ width:100%; max-width:860px; display:none; animation:fadeUp .35s ease both; }
/* auto margins centre vertically without the overflow clipping that
   justify-content:center causes when content is taller than the viewport */
.screen.active{ display:block; margin-block:auto; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* ---------- hero ---------- */
.hero{ text-align:center; margin: clamp(8px,4vh,48px) 0 clamp(18px,4vh,34px); }
.hero h1{
  margin:0;
  font-size:clamp(2.2rem, 9vw, 4rem);
  line-height:1.05;
  letter-spacing:-.02em;
  text-shadow: 0 3px 0 rgba(255,255,255,.9), 0 8px 18px rgba(59,42,74,.14);
}
.hero p{ margin:.6rem 0 0; font-size:clamp(1rem,3.2vw,1.25rem); color:var(--ink-soft); font-weight:700; }

/* ---------- back to all games (injected by KC.initBackLink) ---------- */
.kc-back{
  display:inline-flex; align-items:center;
  min-height:44px;
  background:rgba(255,255,255,.85);
  border-radius:999px;
  padding:.45rem 1.05rem;
  font-weight:800; font-size:.95rem;
  color:var(--ink-soft);
  text-decoration:none;
  box-shadow:0 3px 0 rgba(59,42,74,.1);
  transition:transform .12s ease, box-shadow .12s ease;
}
.kc-back:hover{ color:var(--ink); }
.kc-back:active{ transform:translateY(3px); box-shadow:none; }

/* ---------- copyright (injected by KC.initBackLink) ---------- */
.kc-copy{
  margin:clamp(18px,4vh,30px) 0 0;
  text-align:center;
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-soft);
  opacity:.55;
}

/* ---------- level select ---------- */
.levels{ display:grid; gap:clamp(12px,2.5vw,18px); grid-template-columns:1fr; }
@media (min-width:640px){ .levels{ grid-template-columns:repeat(3,1fr); } }

.level-card{
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  padding:1.1rem 1.2rem;
  display:flex; align-items:center; gap:1rem;
  text-align:left;
  box-shadow:var(--shadow);
  border:4px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
@media (min-width:640px){ .level-card{ flex-direction:column; text-align:center; padding:1.4rem 1rem; gap:.5rem; } }
.level-card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.level-card:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(59,42,74,.14); }
.level-emoji{ font-size:clamp(2.2rem,7vw,3rem); line-height:1; filter:drop-shadow(0 3px 3px rgba(0,0,0,.12)); }
.level-name{ font-size:clamp(1.15rem,3.6vw,1.4rem); font-weight:900; color:var(--accent); }
.level-desc{ font-size:.95rem; font-weight:700; color:var(--ink-soft); }
.level-stars{ margin-top:.15rem; font-size:1rem; letter-spacing:2px; }
.level-stars .off{ opacity:.22; }

.try-pill{
  position:absolute; top:-10px; right:12px;
  background:linear-gradient(180deg,#FFD43B,#FCC419);
  color:#7A5200;
  font-size:.72rem; font-weight:900;
  padding:.28rem .6rem; border-radius:999px;
  box-shadow:0 3px 0 rgba(122,82,0,.25);
  animation:tryPillPop .4s ease both;
}
@keyframes tryPillPop{ from{transform:scale(0) rotate(-10deg)} to{transform:none} }

/* ---------- play top bar ---------- */
.topbar{ display:flex; align-items:center; gap:.5rem; margin-bottom:clamp(10px,2.5vh,18px); flex-wrap:wrap; }
.pill{
  background:rgba(255,255,255,.85);
  border-radius:999px; padding:.45rem .9rem;
  font-weight:800; font-size:.95rem;
  box-shadow:0 3px 0 rgba(59,42,74,.1);
  display:flex; align-items:center; gap:.35rem;
}
.spacer{ flex:1; }
.icon-btn{ width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.85);
           box-shadow:0 3px 0 rgba(59,42,74,.1); font-size:1.25rem; display:grid; place-items:center; }
.icon-btn:active{ transform:translateY(3px); box-shadow:none; }
@media (max-width:440px){
  .topbar{ gap:.35rem; flex-wrap:nowrap; }
  .pill{ padding:.4rem .6rem; font-size:.82rem; white-space:nowrap; }
  .icon-btn{ width:38px; height:38px; flex:0 0 38px; font-size:1.1rem; }
  /* long level names don't fit next to the pills at phone width —
     games wrap the name in <span class="hide-sm"> so the emoji stands in */
  .pill .hide-sm{ display:none; }
}

/* ---------- playfield ---------- */
.stage{
  background:rgba(255,255,255,.55);
  border:3px dashed rgba(124,92,255,.28);
  border-radius:28px;
  padding:clamp(12px,3vw,22px);
  backdrop-filter: blur(2px);
  max-width:620px;
  margin-inline:auto;
}

.prompt{
  text-align:center;
  font-size:clamp(1.15rem,4vw,1.6rem);
  font-weight:900;
  margin:clamp(14px,3vh,22px) 0 clamp(8px,2vh,14px);
  min-height:1.4em;
}
.prompt small{ display:block; font-size:.62em; font-weight:800; color:var(--ink-soft); margin-top:.25rem; }

.center{ text-align:center; }
.hidden{ display:none !important; }

/* ---------- answer tiles ---------- */
.tray{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(8px,2.2vw,14px); }
.choice{
  position:relative;
  width:clamp(72px, 18vw, 104px);
  aspect-ratio:1/1;
  border-radius:20px;
  background:var(--card);
  box-shadow: inset 0 0 0 4px #EFE9FF, 0 5px 0 rgba(59,42,74,.14);
  font-size:clamp(2.1rem, 9vw, 3.2rem);
  line-height:1;
  display:grid; place-items:center;
  transition: transform .12s ease, box-shadow .18s ease, opacity .25s ease;
}
.choice:active{ transform:translateY(4px); box-shadow: inset 0 0 0 4px #EFE9FF, 0 1px 0 rgba(59,42,74,.14); }
.choice.correct{
  box-shadow: inset 0 0 0 5px var(--good), 0 5px 0 rgba(59,42,74,.14);
  background:#EBFBEE;
  animation:cheer .5s ease;
  cursor:default;
}
.choice.correct::after{ content:"✅"; position:absolute; top:-10px; right:-8px; font-size:1.3rem; }
@keyframes cheer{ 0%{transform:scale(1)} 45%{transform:scale(1.22) rotate(6deg)} 100%{transform:scale(1)} }
.choice.wrong{ animation:shake .45s ease; box-shadow: inset 0 0 0 5px var(--bad), 0 5px 0 rgba(59,42,74,.14); background:#FFF0F0; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px) rotate(-4deg)} 40%{transform:translateX(9px) rotate(4deg)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.tray.locked .choice{ pointer-events:none; }
.tray.locked .choice:not(.correct){ opacity:.35; }

@keyframes pop{ 0%{transform:scale(.3) rotate(-12deg)} 60%{transform:scale(1.12) rotate(4deg)} 100%{transform:none} }

/* ---------- win ---------- */
.win{ text-align:center; }
.win-stars{ font-size:clamp(2.2rem,10vw,3.4rem); letter-spacing:.1em; }
.win-stars .off{ opacity:.2; }
.win-stars span{ display:inline-block; animation:star .6s ease both; }
.win-stars span:nth-child(2){ animation-delay:.15s } .win-stars span:nth-child(3){ animation-delay:.3s }
@keyframes star{ from{transform:scale(0) rotate(-90deg); opacity:0} to{transform:none; opacity:1} }
.actions{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:clamp(10px,2.5vh,18px); }
.win-note{ font-weight:800; color:var(--ink-soft); margin-top:.6rem; }

/* ---------- confetti (container injected by kids-core.js) ---------- */
#kc-confetti{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:200; }
#kc-confetti .bit{ position:absolute; width:11px; height:15px; border-radius:3px; will-change:transform,opacity; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(110vh) rotate(720deg); opacity:.15 } }

/* ---------- Wiggle Break overlay (injected by kids-core.js) ---------- */
.kc-break{
  position:fixed; inset:0; z-index:100;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.7rem,2vh,1.1rem);
  padding:24px; text-align:center;
  background:
    radial-gradient(60vw 60vw at 12% 8%,  #FFE0EC 0%, transparent 60%),
    radial-gradient(55vw 55vw at 88% 12%, #DCF0FF 0%, transparent 60%),
    radial-gradient(70vw 70vw at 50% 100%,#E6FBE0 0%, transparent 60%),
    var(--cream);
}
.kc-break.active{ display:flex; animation:fadeUp .35s ease both; }
.kc-break__hero{ font-size:clamp(3rem,10vw,4rem); line-height:1; animation:kcBounce 1.3s ease-in-out infinite; }
.kc-break__intro{ font-weight:900; font-size:clamp(1.25rem,4.5vw,1.7rem); }
.kc-break__card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.3rem 1.5rem; max-width:440px;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
}
.kc-break__icon{ font-size:clamp(2.6rem,9vw,3.4rem); line-height:1; animation:kcBounce 1s ease-in-out infinite; }
.kc-break__text{ font-size:clamp(1.05rem,3.6vw,1.35rem); font-weight:800; }
.kc-break__wait{ color:var(--ink-soft); font-weight:800; min-height:1.4em; }
.kc-break__done{ opacity:0; pointer-events:none; transition:opacity .5s ease; }
.kc-break__done.show{ opacity:1; pointer-events:auto; }
@keyframes kcBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* keep last */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}