/* ============ Rayan's Science Lab — design system ============ */
:root{
  --ink:#0f172a; --ink2:#334155; --muted:#64748b; --line:#e2e8f0;
  --bg:#f6f8ff; --card:#ffffff;
  --blue:#2563eb; --blue-t:#e0ecff;
  --teal:#0d9488; --teal-t:#ccfbf1;
  --orange:#ea580c; --orange-t:#ffedd5;
  --purple:#7c3aed; --purple-t:#ede9fe;
  --green:#16a34a; --green-t:#dcfce7;
  --red:#dc2626; --red-t:#fee2e2;
  --yellow:#f59e0b; --yellow-t:#fef3c7;
  --pink:#db2777;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 18px 50px rgba(15,23,42,.16);
  --r:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12% 8%, #e0ecff 0, transparent 38%),
                   radial-gradient(circle at 88% 6%, #ccfbf1 0, transparent 34%),
                   radial-gradient(circle at 80% 92%, #ffedd5 0, transparent 36%);
  background-attachment:fixed;
  min-height:100vh;
}
h1,h2,h3,h4,.display{font-family:'Baloo 2',system-ui,sans-serif;margin:0;line-height:1.12;font-weight:800}
h1{font-size:clamp(28px,5vw,46px)}
h2{font-size:clamp(22px,3.4vw,32px)}
h3{font-size:clamp(18px,2.4vw,23px)}
p{margin:0 0 12px;line-height:1.6}
a{color:var(--blue)}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:14px}
.tiny{font-size:12.5px}
.center{text-align:center}
.hide{display:none !important}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
  background:rgba(255,255,255,.82);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:'Baloo 2';font-weight:800;font-size:20px}
.brand .logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--teal));
  display:grid;place-items:center;color:#fff;font-size:20px;box-shadow:var(--shadow)}
.spacer{flex:1}

/* ---------- xp / streak chips ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:2px solid var(--line);
  border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px;box-shadow:var(--shadow)}
.chip.xp{border-color:#fde68a;background:#fffbeb;color:#b45309}
.chip.streak{border-color:#fecaca;background:#fff1f2;color:#be123c}
.chip.level{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}

/* ---------- buttons ---------- */
.btn{appearance:none;border:0;cursor:pointer;font-family:'Baloo 2';font-weight:700;font-size:17px;
  padding:13px 26px;border-radius:14px;background:var(--blue);color:#fff;
  box-shadow:0 5px 0 #1d4ed8, var(--shadow); transition:transform .08s ease, box-shadow .08s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #1d4ed8}
.btn.green{background:var(--green);box-shadow:0 5px 0 #15803d, var(--shadow)}
.btn.green:active{box-shadow:0 1px 0 #15803d}
.btn.teal{background:var(--teal);box-shadow:0 5px 0 #0f766e, var(--shadow)}
.btn.teal:active{box-shadow:0 1px 0 #0f766e}
.btn.orange{background:var(--orange);box-shadow:0 5px 0 #c2410c, var(--shadow)}
.btn.orange:active{box-shadow:0 1px 0 #c2410c}
.btn.ghost{background:#fff;color:var(--ink2);border:2px solid var(--line);box-shadow:var(--shadow)}
.btn.ghost:active{transform:translateY(2px)}
.btn.sm{font-size:15px;padding:9px 18px;border-radius:11px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);border:1px solid rgba(15,23,42,.05)}
.card.pad-lg{padding:28px}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:28px;padding:34px;color:#fff;
  background:linear-gradient(135deg,#1d4ed8 0%,#0d9488 100%);box-shadow:var(--shadow-lg)}
.hero h1{font-size:clamp(30px,5.4vw,52px)}
.hero p{opacity:.95;max-width:62ch}
.hero .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.22;background:#fff}
.hero .b1{width:220px;height:220px;right:-50px;top:-70px}
.hero .b2{width:150px;height:150px;right:120px;bottom:-80px}
.floaty{animation:floaty 4.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- chapter cards ---------- */
.chapter{position:relative;display:block;text-decoration:none;color:inherit;border-radius:24px;padding:24px;
  background:#fff;box-shadow:var(--shadow);border:2px solid transparent;transition:.16s;overflow:hidden}
.chapter:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.chapter .emoji{font-size:40px;line-height:1}
.chapter .bar{height:12px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:14px}
.chapter .bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .6s cubic-bezier(.2,.9,.3,1)}
.chapter.locked{opacity:.62}
.chapter.c-forces{border-color:#bfdbfe}
.chapter.c-matter{border-color:#99f6e4}
.badge-pill{display:inline-block;border-radius:999px;padding:3px 12px;font-weight:800;font-size:12.5px}
.b-blue{background:var(--blue-t);color:#1d4ed8}
.b-teal{background:var(--teal-t);color:#0f766e}
.b-green{background:var(--green-t);color:#15803d}
.b-orange{background:var(--orange-t);color:#c2410c}
.b-purple{background:var(--purple-t);color:#6d28d9}
.b-red{background:var(--red-t);color:#b91c1c}
.b-grey{background:#f1f5f9;color:#475569}

/* ---------- mission list ---------- */
.mission{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:#fff;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;border:2px solid transparent;transition:.15s}
.mission:hover{transform:translateX(3px);border-color:var(--blue-t)}
.mission .num{flex:0 0 46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-family:'Baloo 2';font-weight:800;font-size:20px;background:var(--blue-t);color:#1d4ed8}
.mission.done .num{background:var(--green-t);color:var(--green)}

/* ---------- lesson player ---------- */
.player{max-width:820px;margin:0 auto;padding:16px 18px 120px}
.progress-top{position:sticky;top:64px;z-index:30;background:#f6f8ff;border-bottom:1px solid var(--line);
  padding:12px 0 10px;margin:0 -18px 10px;padding-left:18px;padding-right:18px}
.pbar{height:14px;border-radius:999px;background:#e2e8f0;overflow:hidden;box-shadow:inset 0 2px 4px rgba(15,23,42,.08)}
.pbar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f59e0b,#16a34a);transition:width .45s cubic-bezier(.2,.9,.3,1)}
.slide{animation:slidein .35s cubic-bezier(.2,.9,.3,1)}
@keyframes slidein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.q{font-family:'Baloo 2';font-weight:700;font-size:clamp(20px,3vw,27px);line-height:1.25;margin-bottom:6px}
.opts{display:grid;gap:12px;margin-top:16px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;width:100%;cursor:pointer;
  background:#fff;border:2.5px solid var(--line);border-radius:16px;padding:15px 18px;font-size:17px;
  font-family:inherit;color:inherit;transition:.14s;box-shadow:0 3px 0 rgba(15,23,42,.06)}
.opt:hover:not(.locked){border-color:#bfdbfe;transform:translateX(3px)}
.opt .key{flex:0 0 32px;height:32px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;font-weight:800;color:var(--ink2)}
.opt.correct{border-color:var(--green);background:var(--green-t);animation:pop .3s}
.opt.correct .key{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:var(--red-t);animation:shake .4s}
.opt.wrong .key{background:var(--red);color:#fff}
.opt.locked{cursor:default}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

.feedback{margin-top:16px;border-radius:16px;padding:16px 18px;font-size:16px;animation:slidein .3s}
.feedback.ok{background:var(--green-t);border:2px solid #86efac}
.feedback.no{background:var(--red-t);border:2px solid #fca5a5}
.feedback b{font-family:'Baloo 2';font-size:18px}

.footer-bar{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:14px 18px;z-index:35}
.footer-bar .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;max-width:820px}

/* concept card */
.concept-art{border-radius:18px;background:linear-gradient(180deg,#f8fbff,#eef4ff);padding:14px;margin:6px 0 14px;text-align:center}
.concept-art svg{max-width:100%;height:auto}
.keyline{background:var(--yellow-t);border:2px solid #fcd34d;border-radius:16px;padding:14px 16px;margin-top:12px}
.keyline .lbl{font-family:'Baloo 2';font-weight:800;color:#b45309;font-size:14px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- drag & drop sort ---------- */
.bank{display:flex;flex-wrap:wrap;gap:10px;min-height:62px;padding:12px;border-radius:16px;background:#fff;border:2.5px dashed var(--line)}
.tile{cursor:grab;user-select:none;background:#fff;border:2.5px solid var(--blue-t);border-radius:13px;padding:10px 14px;font-weight:700;
  box-shadow:0 3px 0 rgba(15,23,42,.07);touch-action:none;font-size:15px}
.tile.dragging{opacity:.55;transform:scale(1.04)}
.tile.placed-ok{border-color:var(--green);background:var(--green-t)}
.tile.placed-no{border-color:var(--red);background:var(--red-t);animation:shake .4s}
.buckets{display:grid;gap:12px;margin-top:14px}
.bucket{border-radius:18px;padding:14px;border:3px dashed #cbd5e1;background:#fff;min-height:96px;transition:.15s}
.bucket.over{border-color:var(--blue);background:var(--blue-t);transform:scale(1.01)}
.bucket h4{font-size:16px;margin-bottom:8px}
.bucket .drop{display:flex;flex-wrap:wrap;gap:8px;min-height:42px}

/* ---------- sims ---------- */
.sim{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow);border:1px solid var(--line)}
.sim .controls{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:12px}
.sim label{font-weight:800;font-size:14px;color:var(--ink2);display:flex;flex-direction:column;gap:6px}
input[type=range]{accent-color:var(--blue);width:190px}
select,input[type=text],input[type=password]{font-family:inherit;font-size:16px;padding:11px 14px;border-radius:12px;
  border:2.5px solid var(--line);background:#fff;color:inherit}
select:focus,input:focus{outline:3px solid #bfdbfe;outline-offset:1px;border-color:var(--blue)}
.readout{font-family:'Baloo 2';font-weight:800;font-size:22px}

/* ---------- toast + confetti ---------- */
#toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-24px);z-index:80;opacity:0;pointer-events:none;
  transition:.28s;background:#0f172a;color:#fff;padding:12px 22px;border-radius:999px;font-weight:800;box-shadow:var(--shadow-lg)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:70}

/* ---------- parent dashboard ---------- */
table.data{width:100%;border-collapse:collapse;font-size:15px}
table.data th,table.data td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
table.data th{font-family:'Baloo 2';font-size:15px;color:var(--ink2)}
.meter{height:11px;border-radius:999px;background:#eef2f7;overflow:hidden;min-width:110px}
.meter span{display:block;height:100%;border-radius:999px}
.stat{background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.stat .n{font-family:'Baloo 2';font-weight:800;font-size:34px;line-height:1}
.bars{display:flex;gap:7px;align-items:flex-end;height:90px;margin-top:10px}
.bars div{flex:1;background:linear-gradient(180deg,#60a5fa,#2563eb);border-radius:7px 7px 3px 3px;min-height:4px;position:relative}
.bars div span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}

@media (max-width:620px){
  .hero{padding:24px;border-radius:22px}
  .card{padding:18px}
  .topbar .wrap{height:58px}
  .btn{padding:12px 20px;font-size:16px}
  .player{padding-bottom:140px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}


/* ---- v4: depth, motion, life ---- */
.card{box-shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.09)}
.concept-art{box-shadow:inset 0 2px 10px rgba(15,23,42,.06);border:1px solid rgba(15,23,42,.05)}
.concept-art svg{filter:drop-shadow(0 4px 10px rgba(15,23,42,.10))}
.sim{box-shadow:0 1px 2px rgba(15,23,42,.05), 0 10px 26px rgba(15,23,42,.08)}
.slide{animation:slidein .4s cubic-bezier(.2,.9,.3,1)}
.opt{backface-visibility:hidden}
.opt:hover:not(.locked){box-shadow:0 6px 0 rgba(15,23,42,.08);transform:translateX(4px) translateY(-1px)}
.opt.correct{box-shadow:0 0 0 4px rgba(22,163,74,.16), 0 6px 0 rgba(15,23,42,.08)}
.chapter{background:linear-gradient(180deg,#fff,#fbfdff)}
.chapter:hover .bar span{filter:brightness(1.08)}
.hero{background:linear-gradient(135deg,#1d4ed8 0%,#0ea5e9 45%,#0d9488 100%)}
.hero::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 18% 120%, rgba(255,255,255,.22), transparent 45%),
  radial-gradient(circle at 85% -20%, rgba(255,255,255,.25), transparent 42%);pointer-events:none}
.stat{background:linear-gradient(180deg,#fff,#fbfdff)}
.stat .n{background:linear-gradient(135deg,#1d4ed8,#0d9488);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge-pill{box-shadow:0 1px 0 rgba(15,23,42,.06)}
.tile{transition:transform .12s, box-shadow .12s}
.tile:active{transform:scale(1.06)}
.bucket{transition:transform .15s, border-color .15s, background .15s}
button:focus-visible,.opt:focus-visible{outline:3px solid #2563eb;outline-offset:3px}