/* ===================================================================
   Play & Learn — Kids Fun Zone  |  Global Stylesheet
   =================================================================== */

:root{
  --bg: #fef9f4;
  --card-bg: #ffffff;
  --ink: #2b2140;
  --ink-soft: #6b6180;

  --purple: #7c3aed;
  --purple-dark: #5b21b6;
  --pink: #ec4899;
  --orange: #f97316;
  --yellow: #eab308;
  --green: #22c55e;
  --teal: #06b6d4;
  --blue: #3b82f6;
  --red: #ef4444;

  --grad-hero: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f97316 100%);
  --grad-card: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --shadow-soft: 0 8px 24px rgba(124,58,237,0.14);
  --shadow-pop: 0 14px 34px rgba(124,58,237,0.22);

  --header-h: 64px;
  --tabbar-h: 68px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Baloo 2","Nirmala UI","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overscroll-behavior:none;
  -webkit-tap-highlight-color: transparent;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background: var(--pink); color:#fff; }

/* ---------- App shell ---------- */
#app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
#view{
  flex:1;
  padding: calc(var(--header-h) + 14px) 16px calc(var(--tabbar-h) + 24px);
  max-width:1100px;
  margin:0 auto;
  width:100%;
}
body.in-game #view{ padding:0; max-width:none; }

/* ---------- Top header ---------- */
#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(124,58,237,0.10);
  z-index: 100;
}
#topbar .brand{
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:18px; color:var(--purple-dark);
}
#topbar .brand .logo-dot{
  width:34px;height:34px;border-radius:50%;
  background:var(--grad-hero);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
#topbar .stats{ display:flex; align-items:center; gap:10px; }
.pill{
  display:flex; align-items:center; gap:5px;
  background:#f4f0ff; color:var(--purple-dark);
  border-radius:999px; padding:6px 11px; font-weight:700; font-size:13px;
  white-space:nowrap;
}
.pill.hearts{ background:#ffeef0; color:var(--red); }
.icon-btn{
  border:none; background:#f4f0ff; color:var(--purple-dark);
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:17px; transition: transform .15s ease, background .15s ease;
}
.icon-btn:active{ transform:scale(0.9); }
.icon-btn.off{ background:#f1f1f1; color:#999; }

/* ---------- Bottom tab bar ---------- */
#tabbar{
  position:fixed; bottom:0; left:0; right:0; height:var(--tabbar-h);
  background:#fff; border-top:1px solid rgba(124,58,237,0.10);
  display:flex; z-index:100;
  box-shadow: 0 -6px 20px rgba(124,58,237,0.08);
}
#tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size:11px; font-weight:700; color:var(--ink-soft);
}
#tabbar a .ti{ font-size:20px; }
#tabbar a.active{ color:var(--purple); }
body.in-game #tabbar, body.in-game #topbar{ display:none; }

/* ---------- Hero ---------- */
.hero{
  border-radius: var(--radius-lg);
  background: var(--grad-hero);
  color:#fff; padding:26px 22px; margin-bottom:20px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-pop);
}
.hero::after{
  content:""; position:absolute; right:-40px; top:-40px; width:180px;height:180px;
  background:rgba(255,255,255,0.14); border-radius:50%;
}
.hero h1{ margin:0 0 6px; font-size:26px; font-weight:800; }
.hero p{ margin:0; opacity:.95; font-size:14.5px; }
.hero .hero-stats{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.hero .hstat{
  background:rgba(255,255,255,0.18); border-radius:14px; padding:8px 12px;
  font-weight:700; font-size:13px; display:flex; gap:6px; align-items:center;
}

/* ---------- Section headings ---------- */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px; }
.section-head h2{ font-size:18px; margin:0; font-weight:800; color:var(--ink); }
.section-head .see-all{ font-size:13px; font-weight:700; color:var(--purple); }

/* ---------- Chip row (subjects) ---------- */
.chip-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid rgba(124,58,237,0.14);
  border-radius:16px; padding:10px 14px; font-weight:700; font-size:13.5px;
  box-shadow: var(--shadow-soft);
}
.chip .ci{ font-size:18px; }
.chip.active{ background:var(--grad-card); color:#fff; border-color:transparent; }

/* ---------- Game grid & cards ---------- */
.game-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px;
}
.game-card{
  background:var(--card-bg); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid rgba(124,58,237,0.06);
}
.game-card:active{ transform:scale(0.96); }
.game-card .thumb{
  height:92px; display:flex; align-items:center; justify-content:center;
  font-size:38px; background:var(--grad-card); color:#fff;
}
.game-card .body{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; flex:1; }
.game-card .title{ font-weight:800; font-size:13.5px; line-height:1.25; }
.game-card .subject{ font-size:11px; color:var(--ink-soft); font-weight:600; }
.game-card .stars{ font-size:12px; color:var(--yellow); }
.game-card .play-btn{
  margin-top:auto; border:none; background:var(--purple); color:#fff;
  border-radius:10px; padding:8px 0; font-weight:800; font-size:12.5px;
}

/* ---------- Buttons / generic ---------- */
.btn{
  border:none; border-radius:14px; padding:12px 18px; font-weight:800; font-size:14px;
  background:var(--purple); color:#fff; box-shadow:var(--shadow-soft);
}
.btn.secondary{ background:#f4f0ff; color:var(--purple-dark); box-shadow:none; }
.btn.block{ width:100%; }
.btn.green{ background:var(--green); }
.btn.orange{ background:var(--orange); }

/* ---------- Cards / panels ---------- */
.panel{
  background:#fff; border-radius:var(--radius-md); padding:16px;
  box-shadow:var(--shadow-soft); margin-bottom:14px;
}
.row-between{ display:flex; align-items:center; justify-content:space-between; }
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stat-box{ background:#f8f6ff; border-radius:14px; padding:14px; text-align:center; }
.stat-box .num{ font-size:22px; font-weight:800; color:var(--purple-dark); }
.stat-box .lbl{ font-size:12px; color:var(--ink-soft); font-weight:700; }

/* ---------- Settings ---------- */
.setting-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 4px; border-bottom:1px solid #f1eefc;
}
.setting-row:last-child{ border-bottom:none; }
.setting-row .lbl{ font-weight:700; font-size:14px; }
.setting-row .sub{ font-size:12px; color:var(--ink-soft); font-weight:500; }
.switch{ position:relative; width:46px; height:26px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0; background:#e2ddf5; border-radius:999px; transition:.2s;
}
.slider::before{
  content:""; position:absolute; width:20px;height:20px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 2px 5px rgba(0,0,0,.2);
}
input:checked + .slider{ background:var(--purple); }
input:checked + .slider::before{ transform:translateX(20px); }
input[type=range]{ width:100%; accent-color:var(--purple); }

/* ---------- Achievements ---------- */
.ach-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.ach-card{
  background:#fff; border-radius:16px; padding:14px; text-align:center;
  box-shadow:var(--shadow-soft); opacity:.45;
}
.ach-card.unlocked{ opacity:1; }
.ach-card .ai{ font-size:30px; margin-bottom:6px; }
.ach-card .an{ font-weight:800; font-size:12.5px; }
.ach-card .ad{ font-size:10.5px; color:var(--ink-soft); margin-top:2px; }

/* ---------- Game player ---------- */
#game-frame-wrap{ position:fixed; inset:0; background:#000; z-index:50; display:flex; flex-direction:column; }
#game-header{
  height:52px; background:rgba(20,10,40,0.92); color:#fff;
  display:flex; align-items:center; justify-content:space-between; padding:0 10px;
  flex:0 0 auto;
}
#game-header .left, #game-header .right{ display:flex; align-items:center; gap:6px; }
#game-header .gname{ font-weight:800; font-size:13px; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#game-header .icon-btn{ background:rgba(255,255,255,0.14); color:#fff; width:34px;height:34px; }
#game-frame{ flex:1; border:none; width:100%; background:#fff; }

/* ---------- Pause overlay ---------- */
#pause-overlay{
  position:fixed; inset:0; background:rgba(30,10,60,0.85); z-index:60;
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  color:#fff; text-align:center; backdrop-filter: blur(4px);
}
#pause-overlay.show{ display:flex; }
#pause-overlay h2{ font-size:26px; margin:0; }
#pause-overlay .btn{ width:220px; }

/* ---------- Toast ---------- */
#toast-stack{ position:fixed; top:72px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:#2b2140; color:#fff; padding:10px 18px; border-radius:14px;
  font-weight:700; font-size:13.5px; box-shadow:0 10px 24px rgba(0,0,0,.25);
  animation: toast-in .25s ease, toast-out .3s ease 2.4s forwards;
}
@keyframes toast-in{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }
@keyframes toast-out{ to{opacity:0; transform:translateY(-8px);} }

/* ---------- Level-complete / celebration ---------- */
.celebrate{
  position:fixed; inset:0; background:rgba(30,10,60,0.9); z-index:70;
  display:none; align-items:center; justify-content:center;
}
.celebrate.show{ display:flex; }
.celebrate .card{
  background:#fff; border-radius:26px; padding:30px 26px; text-align:center; width:min(360px,88vw);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.celebrate .emoji{ font-size:48px; }
.celebrate h2{ margin:10px 0 4px; color:var(--purple-dark); }

/* ---------- misc ---------- */
.empty-state{ text-align:center; padding:40px 10px; color:var(--ink-soft); }
.empty-state .ee{ font-size:44px; margin-bottom:10px; }
.small{ font-size:12px; color:var(--ink-soft); }
.center{ text-align:center; }
.mt8{ margin-top:8px; } .mt14{ margin-top:14px; } .mt20{ margin-top:20px; }

@media (min-width: 720px){
  .game-grid{ grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); }
}