/* Cloud Nine: pastel pink & white, playful, emoji-forward */
:root{
  --ground:#FFF6FA;
  --card:#FFFFFF;
  --pink:#F9B8D4;
  --pink-deep:#E56CA5;
  --pink-soft:#FDE7F1;
  --ink:#533B4D;
  --muted:#A28D9C;
  --mint:#C9EEDD;
  --mint-deep:#4EA57F;
  --lavender:#E3D5F7;
  --butter:#FFF0BF;
  --sky:#CBE7FA;
  --good:#4EA57F;
  --good-soft:#DFF3E9;
  --bad:#E2705C;
  --bad-soft:#FBE4DF;
  --chart-pink:#D64D8E;
  --chart-blue:#3B6FD4;
  --shadow:0 4px 14px rgba(229,108,165,.14), 0 12px 34px rgba(229,108,165,.10);
  --radius:22px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Nunito",Verdana,system-ui,sans-serif;font-size:16px;line-height:1.55;
  padding-bottom:70px;
}
h1,h2,h3,.logo{font-family:"Baloo 2","Nunito",sans-serif}
h1{font-size:clamp(24px,4vw,34px);margin:0;font-weight:800}
a{color:var(--pink-deep)}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pink-deep);outline-offset:2px}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);padding:10px 20px;
  border-bottom:3px solid var(--pink-soft);
}
.logo{font-size:22px;font-weight:800;text-decoration:none;color:var(--ink)}
.logo .heart{font-size:16px}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.mainnav a{
  text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;
  padding:7px 11px;border-radius:999px;
}
.mainnav a:hover{background:var(--pink-soft)}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}
@media (max-width:700px){
  .topbar{padding:10px 12px;gap:8px}
  .mainnav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .mainnav a{flex:none;font-size:13.5px;padding:6px 9px}
}
.xp-pill{
  background:var(--butter);border-radius:999px;padding:6px 12px;
  font-weight:800;font-size:14px;
}
.logout{text-decoration:none;font-size:18px}

/* ---------- ticker ---------- */
.ticker{
  overflow:hidden;background:var(--pink-deep);color:#fff;
  padding:8px 0;white-space:nowrap;
}
.ticker-track{display:inline-block;animation:tickerScroll 45s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{font-weight:700;font-size:14.5px;padding:0 10px}
.ticker-dot{opacity:.6;font-size:12px}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto}
  .ticker-track{animation:none}
}

.page{max-width:1060px;margin:0 auto;padding:22px 20px}
.section-title{font-size:20px;margin:26px 0 12px}

/* ---------- login ---------- */
.login-wrap{display:grid;place-items:center;min-height:80vh}
.login-card{
  background:var(--card);border-radius:28px;box-shadow:var(--shadow);
  padding:38px 42px;max-width:420px;width:100%;text-align:center;
}
.login-clouds{font-size:34px;letter-spacing:8px}
.login-card h1{font-size:38px;color:var(--pink-deep)}
.login-sub{color:var(--muted);margin-top:4px}
.login-error{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:8px;font-weight:700}
.login-card form{display:flex;flex-direction:column;gap:8px;text-align:left;margin-top:12px}
.login-card label{font-weight:800;font-size:14px}
.login-card input{
  font:inherit;padding:11px 14px;border:2px solid var(--pink);border-radius:14px;background:#fff;color:var(--ink);
}

/* ---------- buttons ---------- */
.btn-big{
  background:var(--pink-deep);color:#fff;border:none;border-radius:16px;
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:17px;
  padding:12px 20px;margin-top:10px;transition:transform .08s ease;
}
.btn-big:hover{transform:translateY(-2px) scale(1.02)}
.btn-quiet{
  background:var(--card);color:var(--muted);border:2px solid var(--pink-soft);
  border-radius:16px;font-weight:700;padding:10px 16px;
}

/* ---------- dashboard hero ---------- */
.hero{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;
}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.hero>div{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px}
.hero-day{font-family:"Baloo 2",sans-serif;font-size:30px;font-weight:800;color:var(--pink-deep)}
.hero-full{color:var(--muted);font-weight:700}
.hero-clock{font-family:"Baloo 2",sans-serif;font-size:44px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.hero-weather{text-align:center}
.wx-emoji{font-size:44px}
.wx-temp{font-family:"Baloo 2",sans-serif;font-size:34px;font-weight:800}
.wx-short{color:var(--muted);font-weight:700}
.wx-link{font-weight:800;font-size:14px;text-decoration:none;display:inline-block;margin-top:6px}
.hero-streak{text-align:center}
.streak-big{font-family:"Baloo 2",sans-serif;font-size:40px;font-weight:800}
.streak-label{color:var(--muted);font-weight:700}
.level-chip{background:var(--lavender);border-radius:999px;padding:6px 12px;font-weight:800;font-size:13.5px;margin-top:10px;display:inline-block}

.today-events{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.event-chip{background:var(--butter);border-radius:999px;padding:7px 14px;font-weight:800;font-size:14px}

/* ---------- quest cards ---------- */
.quest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.quest-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;text-decoration:none;color:var(--ink);
  border:3px solid transparent;transition:transform .1s ease;
  display:flex;flex-direction:column;gap:4px;
}
.quest-card:hover{transform:translateY(-3px)}
.quest-card.done{border-color:var(--mint-deep);background:linear-gradient(180deg,#fff, var(--good-soft))}
.qc-emoji{font-size:38px}
.qc-subject{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.qc-title{font-family:"Baloo 2",sans-serif;font-size:20px;font-weight:800}
.qc-tag{color:var(--muted);font-size:14px}
.qc-status{margin-top:8px;font-weight:800;font-size:14px;color:var(--pink-deep)}
.quest-card.done .qc-status{color:var(--mint-deep)}
.weather-card{background:linear-gradient(180deg,#fff,var(--sky))}

.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media (max-width:640px){.row-2{grid-template-columns:1fr}}
.mini-banner{
  border-radius:var(--radius);padding:18px 22px;text-decoration:none;color:var(--ink);
  font-size:16px;font-weight:700;box-shadow:var(--shadow);
}
.arcade-banner{background:var(--lavender)}
.cal-banner{background:var(--mint)}

/* ---------- unit pages ---------- */
.unit-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.unit-emoji{
  font-size:44px;background:var(--card);border-radius:24px;box-shadow:var(--shadow);
  width:84px;height:84px;display:grid;place-items:center;flex:none;
}
.unit-crumb{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.unit-tag{color:var(--muted);margin:2px 0 0;font-weight:700}
.cal-nav{margin-left:auto;display:flex;gap:8px}
.cal-arrow{font-size:22px;text-decoration:none;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:8px 12px}

.unit-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 14px}
.utab{
  background:var(--card);border:2px solid var(--pink-soft);color:var(--ink);
  border-radius:999px;font-weight:800;font-size:15px;padding:9px 16px;
}
.utab.active{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.upanel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px}
.learn-p,.reading-p{max-width:68ch;font-size:16.5px}
.learn-nudge{font-weight:800;color:var(--pink-deep)}
.reading-title{margin-top:0}

.video-note{color:var(--muted);font-weight:700;margin-top:0}
.video-list{display:grid;gap:10px}
.video-card{
  background:var(--pink-soft);border-radius:16px;padding:14px 18px;
  font-weight:800;text-decoration:none;color:var(--ink);
}
.video-card:hover{background:var(--pink)}
.video-done{font-weight:800;color:var(--mint-deep)}

/* ---------- quiz engine ---------- */
.quiz-box{margin-top:6px}
.qq-count{font-weight:800;color:var(--muted);font-size:14px}
.qq-question{font-family:"Baloo 2",sans-serif;font-size:21px;font-weight:800;margin:8px 0 14px}
.qq-choices{display:grid;gap:10px;max-width:560px}
.qq-choice{
  text-align:left;background:var(--ground);border:2px solid var(--pink-soft);
  border-radius:14px;padding:12px 16px;font-weight:700;font-size:15.5px;color:var(--ink);
}
.qq-choice:hover{border-color:var(--pink-deep)}
.qq-choice.right{background:var(--good-soft);border-color:var(--good)}
.qq-choice.wrong{background:var(--bad-soft);border-color:var(--bad)}
.qq-feedback{font-weight:800;margin-top:12px;min-height:1.4em}
.qq-score{font-family:"Baloo 2",sans-serif;font-size:24px;font-weight:800}
.qq-next{margin-top:8px}

/* ---------- weather station ---------- */
.wx-now{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 26px;margin-top:18px}
.wx-now-main{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wx-now-emoji{font-size:54px}
.wx-now-temp{font-family:"Baloo 2",sans-serif;font-size:46px;font-weight:800}
.wx-now-desc{font-weight:800}
.wx-now-desc small{color:var(--muted)}
.wx-strip{display:flex;gap:10px;margin-top:16px;overflow-x:auto;padding-bottom:6px}
.wx-period{
  background:var(--sky);border-radius:16px;padding:10px 12px;text-align:center;
  min-width:86px;flex:none;
}
.wx-period.night{background:var(--lavender)}
.wxp-name{font-size:11.5px;font-weight:800;color:var(--ink)}
.wxp-emoji{font-size:24px}
.wxp-temp{font-weight:800}

.obs-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 26px}
.obs-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.obs-label{font-weight:800;min-width:150px;max-width:220px}
.obs-sub{font-weight:700;font-size:11.5px;color:var(--muted)}
.obs-choices{display:flex;gap:8px;flex-wrap:wrap}
.obs-choices button{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:22px;background:var(--ground);border:2px solid var(--pink-soft);
  border-radius:14px;padding:8px 12px;
}
.obs-choices button small{font-size:11px;font-weight:800;color:var(--muted)}
.obs-choices button.sel{border-color:var(--pink-deep);background:var(--pink-soft)}
.temp-stepper{display:flex;align-items:center;gap:10px}
.temp-stepper button{font-size:18px;background:var(--pink-soft);border:none;border-radius:12px;padding:8px 12px}
.temp-val{font-family:"Baloo 2",sans-serif;font-size:26px;font-weight:800;min-width:80px;text-align:center;font-variant-numeric:tabular-nums}

.chart-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 26px;position:relative}
.chart-sub{color:var(--muted);font-weight:700;margin-top:0}
.chart-wrap{width:100%;overflow-x:auto}
.chart-tip{
  position:absolute;background:var(--ink);color:#fff;font-size:13px;font-weight:700;
  border-radius:10px;padding:6px 10px;pointer-events:none;white-space:nowrap;
}

/* ---------- arcade ---------- */
.arcade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:18px}
.arcade-card{
  background:var(--card);border:3px solid var(--lavender);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;text-align:center;display:flex;flex-direction:column;gap:6px;
  transition:transform .1s ease;color:var(--ink);
}
.arcade-card:hover{transform:translateY(-3px) rotate(-1deg)}
.ac-emoji{font-size:40px}
.ac-title{font-family:"Baloo 2",sans-serif;font-size:19px;font-weight:800}
.ac-blurb{color:var(--muted);font-size:14px;font-weight:700}
.game-stage{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-top:20px}
.game-head{display:flex;justify-content:space-between;align-items:center;font-family:"Baloo 2",sans-serif;font-size:20px;font-weight:800}
.game-close{background:var(--pink-soft);border:none;border-radius:12px;font-weight:800;padding:8px 12px}
#gameArea{margin-top:14px}
.mem-grid{display:grid;grid-template-columns:repeat(4,minmax(60px,90px));gap:10px;justify-content:center}
.mem-card{
  aspect-ratio:1;font-size:30px;border-radius:14px;border:none;
  background:var(--pink);display:grid;place-items:center;
}
.mem-card.flip{background:var(--ground);border:2px solid var(--pink-soft)}
.mem-card.won{background:var(--good-soft)}
.game-msg{text-align:center;font-family:"Baloo 2",sans-serif;font-size:20px;font-weight:800;margin-top:12px}
.cloud-sky{
  position:relative;height:340px;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--sky),#fff);
}
.cloud-b{position:absolute;font-size:34px;background:none;border:none;transition:transform .1s}
.cloud-b:hover{transform:scale(1.15)}
.simon-grid{display:grid;grid-template-columns:repeat(2,110px);gap:12px;justify-content:center}
.simon-pad{font-size:40px;border-radius:18px;border:none;padding:18px;background:var(--ground);border:2px solid var(--pink-soft)}
.simon-pad.lit{background:var(--butter);transform:scale(1.06)}
.bubble-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.bubble{
  aspect-ratio:1;border-radius:50%;border:none;background:var(--sky);font-size:16px;
}
.bubble.popped{background:var(--ground);box-shadow:inset 0 2px 5px rgba(83,59,77,.15)}

/* ---------- calendar ---------- */
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:20px;
}
.cal-head{text-align:center;font-weight:800;color:var(--muted);font-size:13px}
.cal-cell{
  background:var(--card);border-radius:14px;box-shadow:var(--shadow);
  min-height:86px;padding:8px;position:relative;display:flex;flex-direction:column;gap:4px;
}
.cal-cell.empty{background:transparent;box-shadow:none}
.cal-cell.today{border:3px solid var(--pink-deep)}
.cal-num{font-weight:800;font-size:13px;color:var(--muted)}
.cal-cell.today .cal-num{color:var(--pink-deep)}
.cal-event{
  font-size:11.5px;font-weight:800;background:var(--butter);border-radius:8px;
  padding:2px 6px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-add{
  position:absolute;right:6px;bottom:6px;border:none;background:var(--pink-soft);
  color:var(--pink-deep);font-weight:800;border-radius:8px;width:22px;height:22px;
  line-height:1;font-size:14px;opacity:0;
}
.cal-cell:hover .cal-add,.cal-add:focus-visible{opacity:1}
@media (max-width:640px){
  .cal-grid{gap:4px}
  .cal-cell{min-height:64px;padding:5px}
  .cal-add{opacity:1}
}
.event-form{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;margin-top:16px}
.ef-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.emoji-row{display:flex;gap:4px;flex-wrap:wrap}
.emoji-row button{font-size:20px;background:var(--ground);border:2px solid transparent;border-radius:10px;padding:5px 7px}
.emoji-row button.sel{border-color:var(--pink-deep);background:var(--pink-soft)}
#efTitle{font:inherit;font-weight:700;padding:10px 14px;border:2px solid var(--pink);border-radius:12px;flex:1;min-width:180px}

.classes-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px}
.class-row{
  display:grid;grid-template-columns:64px 1.4fr 1.2fr 90px 90px;gap:8px;align-items:center;
  margin-bottom:8px;
}
@media (max-width:640px){.class-row{grid-template-columns:48px 1fr 1fr 64px 74px}}
.class-head-row{font-weight:800;color:var(--muted);font-size:13px}
.class-row input{
  font:inherit;font-weight:700;padding:8px 10px;border:2px solid var(--pink-soft);
  border-radius:10px;width:100%;color:var(--ink);background:#fff;
}
.class-btns{display:flex;gap:4px}
.class-btns button{border:none;background:var(--ground);border-radius:8px;font-size:15px;padding:6px 8px}
.class-btns button:hover{background:var(--pink-soft)}
.class-hint{color:var(--muted);font-weight:700;font-size:13.5px}

/* ---------- progress ---------- */
.level-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 28px;margin-top:18px}
.level-now{font-family:"Baloo 2",sans-serif;font-size:24px;font-weight:800}
.xp-bar{background:var(--pink-soft);border-radius:999px;height:18px;margin:12px 0 6px;overflow:hidden}
.xp-fill{background:var(--pink-deep);height:100%;border-radius:999px}
.xp-nums{font-weight:800;color:var(--muted);font-size:14px}
.level-ladder{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ladder-step{
  background:var(--ground);border-radius:999px;padding:5px 11px;font-weight:800;font-size:13px;
  opacity:.45;
}
.ladder-step.reached{background:var(--butter);opacity:1}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.badge{
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:16px;
  text-align:center;display:flex;flex-direction:column;gap:2px;
}
.badge.locked{opacity:.55}
.badge-emoji{font-size:30px}
.badge-title{font-weight:800}
.badge-desc{color:var(--muted);font-size:12.5px;font-weight:700}
.year-map{display:grid;gap:10px}
.ym-month{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:14px 18px}
.ym-month.current{border:3px solid var(--pink-deep)}
.ym-label{font-weight:800;font-family:"Baloo 2",sans-serif}
.ym-units{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.ym-unit{background:var(--ground);border-radius:999px;padding:4px 11px;font-weight:800;font-size:13px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-weight:800;border-radius:999px;
  padding:12px 22px;box-shadow:var(--shadow);z-index:60;font-size:15px;
}