/* Learning Cave — Cartoon Actions + Quizzes (2nd Grade) */
:root{
  --bg1:#59d4ff; --bg2:#7f5cff;
  --ink:#0b1220;
  --card: rgba(255,255,255,.20);
  --stroke: rgba(255,255,255,.34);
  --text: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.82);
  --good:#22e6a3;
  --warn:#ffd166;
  --bad:#ff5d5d;
  --shadow: 0 18px 42px rgba(0,0,0,.25);
  --r: 22px;
  --font: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; min-height:100vh;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(255,255,255,.26), transparent 58%),
    radial-gradient(820px 520px at 88% 16%, rgba(255,209,102,.20), transparent 55%),
    radial-gradient(820px 520px at 30% 88%, rgba(34,230,163,.18), transparent 55%),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  padding:14px;
}
a{color:inherit;text-decoration:none}
.app{width:min(1060px,100%); margin:0 auto;}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 10px 12px;
  border: 2px solid rgba(255,255,255,.32);
  background: rgba(0,0,0,.10);
  border-radius: 26px;
  box-shadow: var(--shadow);
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px}
.mascot{
  width:52px; height:52px; border-radius: 20px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.22);
  border:2px solid rgba(255,255,255,.28);
  font-size:1.45rem;
}
.brand b{font-size:1.16rem}
.brand small{display:block; margin-top:2px; color:var(--muted)}
.nav{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  border:2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color:var(--text);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:950;
}
.pill:hover{background: rgba(255,255,255,.18)}
.main{margin-top:14px; display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start}
@media (max-width: 940px){ .main{grid-template-columns: 1fr} }
.card{
  border:2px solid rgba(255,255,255,.30);
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-width:0;
}
.hd{padding:14px 14px 10px}
.h1{margin:0; font-size:1.55rem; font-weight:1000; letter-spacing:.2px}
.h2{margin:0; font-size:1.15rem; font-weight:1000}
.sub{margin:8px 0 0; color:var(--muted); line-height:1.28}
.bd{padding: 0 14px 14px}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px; min-width:0}
@media (max-width: 560px){ .grid2{grid-template-columns: 1fr} }
.tile{
  border:2px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 12px;
  min-width:0;
}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border:2px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.10);
  color: var(--muted);
  font-weight:1000;
}
.btn{
  border:none;
  border-radius: 18px;
  padding: 12px 14px;
  font-weight:1000;
  cursor:pointer;
  color: #102040;
  background: var(--warn);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.btn:hover{filter:brightness(1.02)}
.btn.ghost{
  background: rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.24);
  color: var(--text);
  box-shadow:none;
}
.btn.good{background: var(--good)}
.btn.bad{background: rgba(255,93,93,.95); color:#fff}
.small{font-size:.86rem; color: var(--muted)}
.feedback{margin-top:10px; min-height:28px; font-weight:1000}
.goodtxt{color:#c9fff0}
.badtxt{color:#ffe1e1}

/* Cartoon animations */
.wiggle{animation: wiggle 1.6s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.floaty{animation: floaty 3.2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pop{animation: pop .25s ease-out}
@keyframes pop{0%{transform:scale(.92)}100%{transform:scale(1)}}

/* Drag UI */
.dropzone{
  border:2px dashed rgba(255,255,255,.40);
  border-radius: 18px;
  padding: 10px;
  min-height: 54px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background: rgba(0,0,0,.06);
}
.dropzone.over{background: rgba(255,255,255,.12)}
.chip{
  padding:10px 12px;
  border-radius: 16px;
  border:2px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.16);
  font-weight:1000;
  user-select:none;
}
.draggable{cursor:grab}

/* Quiz */
.progress{
  height:12px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.08);
  overflow:hidden;
}
.progress > div{
  height:100%;
  width:0%;
  background: rgba(255,209,102,.98);
  transition: width .25s ease;
}
.option{
  width:100%;
  text-align:left;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.option.correct{ background: rgba(34,230,163,.92) !important; color:#0b1220 !important; }
.option.wrong{ background: rgba(255,93,93,.92) !important; color:#fff !important; }
canvas{max-width:380px; width:100%; height:auto;}

/* Extra responsive tweaks */
@media (max-width: 420px){
  body{ padding: 10px; }
  .top{ flex-wrap: wrap; }
  .nav{ flex-wrap: wrap; justify-content:flex-start; }
  .pill{ padding: 8px 10px; border-radius: 999px; }
  .card{ padding: 12px; border-radius: 18px; }
  .h1{ font-size: 1.65rem; }
}
@media (max-width: 340px){
  body{ padding: 8px; }
  .pill{ padding: 7px 9px; }
  .tag{ padding: 7px 10px; }
}