/* styles.css — shared look for all Kids Learning Games.
 * Game-specific tweaks: scope under #app or a game class to avoid collisions. */
:root { --gap: 10px; --navy:#2d2d44; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; font-family:'Comic Sans MS','Segoe UI',system-ui,sans-serif; }
body {
  min-height:100vh; background:linear-gradient(160deg,#8ec5fc,#e0c3fc);
  display:flex; flex-direction:column; align-items:center; color:var(--navy);
  overflow-x:hidden;
}
#app { width:100%; flex:1; display:flex; flex-direction:column; }
h1 { margin:14px 12px 4px; padding:0 60px; font-size:clamp(20px,5.4vw,38px); text-shadow:1px 2px 0 #fff6; text-align:center; }
.tagline { margin:2px 12px 14px; font-size:clamp(15px,4vw,20px); font-weight:bold; opacity:.85; text-align:center; }
.footer { font-size:11px; opacity:.6; margin:10px 0; text-align:center; }

/* ---- Buttons ---- */
button { font-family:inherit; cursor:pointer; border:none; }
.btn {
  border-radius:16px; padding:10px 16px; font-size:clamp(14px,3.6vw,17px);
  font-weight:bold; background:#ff8fab; color:#fff; box-shadow:0 3px 0 #d46a86;
  transition:transform .06s;
}
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 #d46a86; }
.btn.alt { background:#4dabf7; box-shadow:0 3px 0 #2b87c9; }
.btn.small { padding:7px 12px; font-size:13px; }
.btn.back { margin:18px 0; background:#fff; color:var(--navy); box-shadow:0 3px 0 #bbb; }

/* ---- Top bar (global help/home/mute) ---- */
#topbar { position:fixed; top:8px; right:10px; display:flex; gap:8px; z-index:16; }
.icon-btn {
  width:44px; height:44px; border-radius:50%; background:#ffffffdd; font-size:20px;
  box-shadow:0 2px 6px #0003; transition:transform .1s;
}
.icon-btn:active { transform:translateY(2px); }
#helpBtn { background:#fff3bf; }

/* ---- Chips / HUD ---- */
.bar { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; padding:6px 10px; width:100%; max-width:720px; }
.chip { background:#ffffffcc; border-radius:20px; padding:6px 14px; font-weight:bold; font-size:clamp(13px,3.5vw,17px); box-shadow:0 2px 6px #0002; }

/* ---- Screens ---- */
.screen { display:none; flex-direction:column; align-items:center; width:100%; }
.screen.active { display:flex; }
/* Menu screens (home / category) center in the available space so content
   doesn't cling to the top on tall phones. */
.screen:has(.menu) { flex:1; justify-content:center; }

/* ---- Home / category tiles ---- */
.menu { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; width:100%; max-width:460px; padding:8px 16px; }
.tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:22px 10px; border-radius:22px; background:#fff; color:var(--navy);
  box-shadow:0 6px 0 #cbb8e6,0 8px 18px #0002; aspect-ratio:1/1; text-align:center;
  opacity:0; animation:tileIn .45s ease forwards;
}
.tile:nth-child(1){animation-delay:.04s} .tile:nth-child(2){animation-delay:.10s}
.tile:nth-child(3){animation-delay:.16s} .tile:nth-child(4){animation-delay:.22s}
.tile:nth-child(5){animation-delay:.28s} .tile:nth-child(6){animation-delay:.34s}
.tile:active { transform:translateY(3px); box-shadow:0 3px 0 #cbb8e6,0 4px 10px #0002; }
.tileIcon { font-size:clamp(38px,12vw,60px); line-height:1; }
.tileName { font-size:clamp(15px,4.4vw,20px); font-weight:bold; }
.tileSub { font-size:12px; opacity:.6; font-weight:bold; }
.tile.soon { opacity:.55; filter:grayscale(.4); box-shadow:0 6px 0 #bbb,0 8px 18px #0001; animation:none; }
@keyframes tileIn { from{opacity:0; transform:translateY(18px) scale(.92);} to{opacity:1; transform:translateY(0) scale(1);} }

/* ---- Teacher speech bubble (shared) ---- */
.teacher { min-height:34px; margin:8px 12px; padding:10px 16px; max-width:640px; background:#fff9; border-radius:18px; font-size:clamp(15px,4vw,20px); text-align:center; font-weight:bold; box-shadow:0 2px 8px #0001; }

/* ---- Memory board / cards (memory game; reusable card flip) ---- */
.board { display:grid; gap:var(--gap); padding:12px; width:100%; max-width:640px; margin:0 auto; }
.card { position:relative; aspect-ratio:1/1; border-radius:16px; cursor:pointer; transform-style:preserve-3d; transition:transform .4s; }
.card .face { position:absolute; inset:0; border-radius:16px; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; font-size:min(11vw,52px); box-shadow:0 4px 10px #0003; user-select:none; }
.card .back { background:#fff; }
.card .front { background:#ffd166; transform:rotateY(180deg); background-image:radial-gradient(circle at 30% 25%,#fff6,transparent 45%); }
.card.flipped { transform:rotateY(180deg); }
.card.matched .front { animation:pop .5s ease; background:#a0e8af; }
.card.locked { pointer-events:none; }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* ---- Big option buttons (language/math answer choices) ---- */
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:14px; width:100%; max-width:520px; padding:12px; }
.choice {
  border-radius:20px; background:#fff; color:var(--navy); font-weight:bold;
  font-size:clamp(20px,7vw,34px); padding:20px 10px; box-shadow:0 5px 0 #cbb8e6,0 6px 14px #0002;
  min-height:80px; display:flex; align-items:center; justify-content:center; text-align:center;
}
.choice:active { transform:translateY(3px); box-shadow:0 2px 0 #cbb8e6; }
.choice.correct { background:#a0e8af; box-shadow:0 5px 0 #6fbf87; animation:pop .5s ease; }
.choice.wrong { background:#ffb3b3; box-shadow:0 5px 0 #d98282; }
.prompt { font-size:clamp(48px,20vw,120px); text-align:center; margin:6px 0; line-height:1; }

/* ---- Overlay / win panel (shared) ---- */
#overlay { position:fixed; inset:0; background:#0007; display:none; align-items:center; justify-content:center; z-index:10; }
#overlay.show { display:flex; }
.panel { background:#fff; border-radius:24px; padding:24px; max-width:340px; text-align:center; box-shadow:0 10px 40px #0005; }
.panel h2 { margin:0 0 10px; font-size:26px; }
.panel .stars { font-size:38px; margin:8px 0; }
.modes { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:6px 0; }

/* ---- Confetti ---- */
.confetti { position:fixed; top:-20px; font-size:22px; pointer-events:none; z-index:9; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(105vh) rotate(360deg); opacity:.3; } }

/* ---- Onboarding / how-to-play guide ---- */
#guide { position:fixed; inset:0; background:#0007; backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:14; padding:16px; }
#guide.show { display:flex; animation:fadeIn .25s ease; }
.guidePanel {
  background:linear-gradient(160deg,#fff,#f3ecff); border-radius:26px; padding:22px 20px 20px;
  max-width:400px; width:100%; text-align:center; box-shadow:0 14px 50px #0006;
  animation:popIn .35s cubic-bezier(.2,1.3,.5,1);
}
.guidePanel h2 { margin:0 0 2px; font-size:clamp(20px,5.5vw,26px); }
.guideSub { font-weight:bold; color:#8158c9; margin-bottom:14px; font-size:clamp(14px,4vw,18px); }
.guideStep {
  display:flex; align-items:flex-start; gap:12px; text-align:left; background:#fff;
  border-radius:16px; padding:11px 13px; margin:9px 0; box-shadow:0 3px 10px #0001;
  opacity:0; animation:slideUp .4s ease forwards;
}
.guideNum {
  flex:none; width:26px; height:26px; border-radius:50%; background:#ff8fab; color:#fff;
  font-size:14px; font-weight:bold; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 #d46a86; margin-top:1px;
}
.guideIcon { flex:none; font-size:24px; width:30px; text-align:center; line-height:1.3; }
.guideText { font-size:clamp(14px,3.8vw,17px); font-weight:bold; line-height:1.25; }
.guideGo { margin-top:16px; font-size:clamp(16px,4.6vw,20px); padding:13px 26px; background:#4caf50; box-shadow:0 4px 0 #3a8a3d; }
@keyframes slideUp { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes popIn { from{opacity:0; transform:scale(.8);} to{opacity:1; transform:scale(1);} }