/* =========================================================
   Jiwa — stylesheet
   Layout philosophy:
     · Every .bar is a fixed-height flex row that CANNOT shrink.
     · Every .screen is a flex column: bar on top (auto),
       content below (flex:1, scrollable).
     · Content is capped to a centered 1080px column on wide
       screens so it never stretches absurdly on desktop.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#EFEBFF;
  --ink:#241C4A;
  --muted:#6B6390;
  --card:#FFFFFF;
  --brand:#5B4BFF;
  --brand2:#8B7CFF;
  --good:#22C55E;
  --bad:#FF7A7A;
  --radius:26px;
  --bar-h:72px;
  --maxw:1080px;
  --shadow:0 8px 22px rgba(60,40,140,.10);
  --shadow-lg:0 18px 44px rgba(60,40,140,.18);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
body{
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Baloo 2","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0;}
input{font-family:inherit;}

/* ---------- Fatal / loading ---------- */
.fatal{
  height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:40px;text-align:center;
}
.fatal h1{font-size:48px;margin:0;font-weight:900;color:var(--brand);}
.fatal p{color:var(--muted);max-width:420px;font-weight:700;}

#app{position:fixed;inset:0;overflow:hidden;}
.loading{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;
}
.spinner{
  width:64px;height:64px;border-radius:50%;
  border:7px solid #D8D2F2;border-top-color:var(--brand);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   SCREENS — flex column: bar (auto) + content (flex:1)
   ========================================================= */
.screen{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;
  padding:calc(12px + var(--safe-t)) 18px calc(12px + var(--safe-b));
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.screen.active{display:flex;animation:fadeUp .28s ease both;}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* =========================================================
   TOP BAR — bulletproof
   ========================================================= */
.bar{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:12px;

  flex:0 0 auto;      /* never shrinks */
  min-height:var(--bar-h);
  height:auto;

  width:100%;
  max-width:var(--maxw);
  margin:0 auto 14px;

  overflow:visible;   /* never clips children */
  padding:0;
}

.bar .spacer{flex:1 1 auto;min-width:0;}

/* ---------- Greeting (avatar + text) ---------- */
.greet{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1 1 auto;
  min-width:0;        /* allows children to ellipsis */
  overflow:visible;
}

.greet .av{
  width:60px;
  height:60px;
  flex:0 0 60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:32px;
  line-height:1;
  background:linear-gradient(135deg,#FFD93D,#FF9F43); /* overridden inline */
  box-shadow:var(--shadow);
}

.greet-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:1 1 auto;
  gap:2px;
  overflow:visible;
}

.greet-text .h1,
.bar .h1{
  font-size:clamp(20px, 3.2vw, 34px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.2;           /* room for ascenders/descenders */
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.greet-text .h2,
.bar .h2{
  font-size:clamp(18px, 2.6vw, 26px);
  font-weight:800;
  line-height:1.2;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.greet-text .sub,
.bar .sub{
  font-size:clamp(12px, 1.5vw, 16px);
  font-weight:700;
  color:var(--muted);
  line-height:1.3;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* ---------- Right-side actions (pill + icons) ---------- */
.bar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;      /* never shrinks */
}

/* ---------- Icon buttons ---------- */
.icon-btn{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:16px;
  background:var(--card);
  display:grid;
  place-items:center;
  font-size:24px;
  line-height:1;
  box-shadow:var(--shadow);
  transition:transform .12s ease;
  overflow:hidden;
}
.icon-btn:active{transform:scale(.92);}

/* ---------- Pill (star counter) ---------- */
.pill{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--card);
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  font-size:18px;
  line-height:1;
  min-height:52px;
  box-shadow:var(--shadow);
  flex:0 0 auto;
  white-space:nowrap;
}
.pill .ico{font-size:20px;line-height:1;}

/* ---------- Progress dots ---------- */
.dots-row{display:flex;gap:9px;align-items:center;flex:0 0 auto;}
.dots-row i{
  width:14px;height:14px;border-radius:50%;
  background:#D8D2F2;
  transition:all .25s;
}
.dots-row i.on{background:var(--brand);transform:scale(1.15);}
.dots-row i.ok{background:var(--good);}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.h1{font-size:clamp(26px,4.4vw,40px);font-weight:900;letter-spacing:-.02em;margin:0;line-height:1.2;}
.h2{font-size:clamp(20px,3vw,28px);font-weight:800;margin:0;line-height:1.25;}
.sub{color:var(--muted);font-weight:700;font-size:17px;margin:4px 0 0;line-height:1.35;}

/* =========================================================
   PROFILE SCREEN
   ========================================================= */
#screen-profiles{justify-content:space-between;align-items:center;}
.center{
  flex:1 1 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;gap:8px;
}
.logo{
  font-size:clamp(48px,9vw,84px);
  font-weight:900;
  letter-spacing:-.04em;
  background:linear-gradient(135deg,#5B4BFF,#FF6B9D 55%,#FFD93D);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  line-height:1.05;
}
.profile-grid{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  margin:26px 0 10px;max-width:820px;
}
.profile-card{
  width:150px;padding:20px 12px;border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .15s ease;
}
.profile-card:active{transform:scale(.95);}
.profile-card .av{
  width:82px;height:82px;border-radius:50%;
  display:grid;place-items:center;font-size:42px;line-height:1;
}
.profile-card .nm{font-weight:900;font-size:19px;line-height:1.2;}
.profile-card .st{font-size:14px;color:var(--muted);font-weight:800;}

/* =========================================================
   HOME — subject grid
   ========================================================= */
.subject-grid{
  flex:1 1 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-bottom:10px;
  display:grid;
  gap:18px;
  align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
@media(min-width:900px){
  .subject-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
}

.subject{
  position:relative;
  border-radius:var(--radius);
  padding:22px 20px;
  min-height:160px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transition:transform .15s ease;
  text-align:left;
}
.subject:active{transform:scale(.96);}
.subject .emoji{font-size:46px;line-height:1;}
.subject .name{font-size:23px;font-weight:900;letter-spacing:-.01em;line-height:1.15;}
.subject .lvl{
  font-size:13px;font-weight:900;
  background:rgba(255,255,255,.28);
  padding:4px 12px;border-radius:999px;
  align-self:flex-start;
  margin-top:4px;
}
.subject::after{
  content:"";position:absolute;right:-40px;top:-40px;
  width:130px;height:130px;border-radius:50%;
  background:rgba(255,255,255,.15);
}
.subject .dots{display:flex;gap:5px;margin-top:6px;}
.subject .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);}
.subject .dots i.on{background:#fff;}

/* =========================================================
   ACTIVITY
   ========================================================= */
#screen-activity{gap:0;}

.prompt-card{
  flex:0 0 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto 16px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  display:flex;align-items:center;gap:16px;
}
.prompt-card .txt{
  font-size:clamp(20px,3.2vw,30px);
  font-weight:900;
  flex:1 1 auto;
  min-width:0;
  line-height:1.25;
}
.speak-btn{
  width:62px;height:62px;flex:0 0 62px;
  border-radius:20px;background:#F0EDFF;
  display:grid;place-items:center;font-size:28px;line-height:1;
  transition:transform .12s;
}
.speak-btn:active{transform:scale(.9);}

.stage{
  flex:1 1 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  min-height:150px;
  padding:6px 0 18px;
}
.e-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;}
.e-row .e{font-size:clamp(34px,6vw,58px);line-height:1;animation:pop .35s ease both;}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.big-emoji{font-size:clamp(76px,14vw,140px);line-height:1;animation:pop .35s ease both;}
.op{font-size:clamp(32px,5vw,52px);font-weight:900;color:var(--brand);margin:0 6px;line-height:1;}
.visual-group{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px;}

.options{
  flex:0 0 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr);
  padding-bottom:6px;
}
.options.cols-3{grid-template-columns:repeat(3,1fr);}
@media(min-width:760px){
  .options{grid-template-columns:repeat(4,1fr);}
  .options.cols-3{grid-template-columns:repeat(3,1fr);}
}
.opt{
  min-height:96px;
  border-radius:24px;
  background:var(--card);
  box-shadow:var(--shadow);
  font-size:clamp(30px,5vw,46px);
  font-weight:900;
  display:grid;place-items:center;
  padding:10px;
  transition:transform .12s ease,background .2s,box-shadow .2s;
  border:4px solid transparent;
  line-height:1;
}
.opt:active{transform:scale(.94);}
.opt.emoji{font-size:clamp(44px,8vw,72px);}
.opt.correct{background:#DFFCE7;border-color:var(--good);animation:bounce .45s ease;}
.opt.wrong{background:#FFEAEA;border-color:var(--bad);opacity:.55;}
.opt.hintme{animation:pulse 1s ease infinite;}
@keyframes bounce{
  0%{transform:scale(1)}
  35%{transform:scale(1.12)}
  70%{transform:scale(.96)}
  100%{transform:scale(1)}
}
@keyframes pulse{
  0%,100%{box-shadow:var(--shadow)}
  50%{box-shadow:0 0 0 8px rgba(91,75,255,.25)}
}
.shake{animation:shake .4s;}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(6px)}
}

/* =========================================================
   REWARD
   ========================================================= */
.reward-wrap{
  flex:1 1 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;gap:14px;
  padding:20px 0;
}
.trophy{font-size:clamp(80px,16vw,150px);line-height:1;animation:bounce .8s ease;}
.star-big{font-size:clamp(38px,7vw,64px);font-weight:900;color:#F5A623;line-height:1.1;}
.sticker-show{
  width:140px;height:140px;border-radius:36px;
  background:linear-gradient(135deg,#FFD93D,#FF9F43);
  display:grid;place-items:center;font-size:74px;line-height:1;
  box-shadow:var(--shadow-lg);
  animation:bounce .7s ease;
}
.btn{
  padding:18px 44px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:var(--shadow-lg);
  transition:transform .12s;
  display:inline-block;
  line-height:1.15;
}
.btn:active{transform:scale(.95);}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
.btn.small{padding:12px 26px;font-size:17px;}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* =========================================================
   STICKERS
   ========================================================= */
.sticker-grid{
  flex:1 1 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:14px;
  padding-bottom:20px;
}
.sticker-cell{
  aspect-ratio:1;
  border-radius:24px;
  background:var(--card);
  box-shadow:var(--shadow);
  display:grid;place-items:center;
  font-size:46px;line-height:1;
}
.sticker-cell.locked{
  background:#E4DFF6;
  color:#B9B1D8;
  font-size:30px;
  box-shadow:none;
}

/* =========================================================
   PARENT
   ========================================================= */
#parentBody{
  flex:1 1 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
}
.panel{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  margin-bottom:16px;
}
.panel h3{margin:0 0 12px;font-size:19px;font-weight:900;line-height:1.25;}
.stat-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;font-weight:800;font-size:16px;
  gap:12px;
}
.stat-row + .stat-row{border-top:1px solid #F0EDFF;}
.stat-row span:last-child{text-align:right;}
.bar-track{height:12px;border-radius:999px;background:#F0EDFF;overflow:hidden;margin-top:6px;}
.bar-track i{display:block;height:100%;border-radius:999px;transition:width .5s ease;}
.subj-line{margin-bottom:14px;}
.subj-line .lbl{display:flex;justify-content:space-between;font-weight:800;font-size:15px;gap:12px;}

/* ---------- Parent gate ---------- */
.gate{
  flex:1 1 auto;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:18px;text-align:center;
}
.gate input{
  width:200px;
  padding:16px;
  border-radius:18px;
  border:3px solid #D8D2F2;
  background:#fff;
  font-size:30px;
  font-weight:900;
  text-align:center;
  color:var(--ink);
  outline:none;
}
.gate input:focus{border-color:var(--brand);}

/* ---------- Toggle ---------- */
.toggle{
  width:60px;height:34px;flex:0 0 60px;
  border-radius:999px;background:#D8D2F2;
  position:relative;transition:background .2s;
  cursor:pointer;
}
.toggle.on{background:var(--good);}
.toggle::after{
  content:"";position:absolute;top:3px;left:3px;
  width:28px;height:28px;border-radius:50%;
  background:#fff;transition:transform .2s;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.toggle.on::after{transform:translateX(26px);}

/* =========================================================
   CONFETTI
   ========================================================= */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:99;overflow:hidden;}
.conf{position:absolute;width:12px;height:12px;border-radius:3px;animation:fall linear forwards;}
@keyframes fall{
  from{transform:translateY(-12vh) rotate(0deg);opacity:1}
  to{transform:translateY(112vh) rotate(720deg);opacity:.9}
}

/* =========================================================
   SMALL SCREENS
   ========================================================= */
@media (max-width: 640px){
  :root{--bar-h:64px;}
  .screen{padding-left:14px;padding-right:14px;}
  .icon-btn{width:48px;height:48px;flex:0 0 48px;font-size:22px;border-radius:14px;}
  .pill{font-size:16px;padding:8px 14px;min-height:48px;}
  .greet .av{width:52px;height:52px;flex:0 0 52px;font-size:28px;}
  .greet{gap:10px;}
  .bar{gap:8px;}
}

@media (max-width: 400px){
  .greet-text .sub{display:none;} /* hide tagline on tiny phones */
  /* =========================================================
   STAGE CHIP (home screen)
   ========================================================= */
.stage-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  color:#fff;
  font-weight:900;
  font-size:14px;
  padding:6px 14px;
  border-radius:999px;
  margin:0 auto 14px;
  max-width:var(--maxw);
  width:max-content;
  box-shadow:var(--shadow);
}

/* =========================================================
   ADD-CHILD MODAL
   ========================================================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(36,28,74,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:80;
  padding:20px;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.modal.open{display:flex;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:26px 24px;
  width:100%;
  max-width:560px;
  max-height:92vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.field-label{
  font-weight:900;
  font-size:15px;
  color:var(--ink);
  margin-top:8px;
}

.modal-input{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:3px solid #D8D2F2;
  background:#fff;
  font-size:20px;
  font-weight:800;
  color:var(--ink);
  outline:none;
}
.modal-input:focus{border-color:var(--brand);}

.stage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin-top:4px;
}
.stage-option{
  background:#F7F4FF;
  border:3px solid transparent;
  border-radius:20px;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:transform .12s ease,border-color .18s,background .18s;
  cursor:pointer;
  text-align:center;
}
.stage-option:active{transform:scale(.96);}
.stage-option.selected{
  border-color:var(--brand);
  background:#EFEBFF;
}
.stage-emoji{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  font-size:28px;line-height:1;
  box-shadow:var(--shadow);
}
.stage-name{font-weight:900;font-size:15px;line-height:1.15;}
.stage-ages{font-size:12px;font-weight:800;color:var(--muted);}

.modal-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:16px;
  flex-wrap:wrap;
}
@media (max-width:480px){
  .modal-actions{justify-content:stretch;}
  .modal-actions .btn{flex:1 1 auto;padding:16px 20px;font-size:18px;}
}
}
/* =========================================================
   STAGE CHIP (home screen)
   ========================================================= */
.stage-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  color:#fff;
  font-weight:900;
  font-size:14px;
  padding:6px 14px;
  border-radius:999px;
  margin:0 auto 14px;
  max-width:var(--maxw, 1080px);
  width:max-content;
  box-shadow:0 8px 22px rgba(60,40,140,.10);
}

/* =========================================================
   ADD-CHILD MODAL
   ========================================================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(36,28,74,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:80;
  padding:20px;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.modal.open{display:flex;animation:jiwaFadeIn .2s ease;}
@keyframes jiwaFadeIn{from{opacity:0}to{opacity:1}}

.modal-card{
  background:#FFFFFF;
  border-radius:26px;
  box-shadow:0 18px 44px rgba(60,40,140,.18);
  padding:26px 24px;
  width:100%;
  max-width:560px;
  max-height:92vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#241C4A;
}

.field-label{
  font-weight:900;
  font-size:15px;
  color:#241C4A;
  margin-top:8px;
}

.modal-input{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:3px solid #D8D2F2;
  background:#fff;
  font-size:20px;
  font-weight:800;
  color:#241C4A;
  outline:none;
}
.modal-input:focus{border-color:#5B4BFF;}

.stage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin-top:4px;
}
.stage-option{
  background:#F7F4FF;
  border:3px solid transparent;
  border-radius:20px;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:transform .12s ease,border-color .18s,background .18s;
  cursor:pointer;
  text-align:center;
}
.stage-option:active{transform:scale(.96);}
.stage-option.selected{
  border-color:#5B4BFF;
  background:#EFEBFF;
}
.stage-emoji{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  font-size:28px;line-height:1;
  box-shadow:0 8px 22px rgba(60,40,140,.10);
}
.stage-name{font-weight:900;font-size:15px;line-height:1.15;color:#241C4A;}
.stage-ages{font-size:12px;font-weight:800;color:#6B6390;}

.modal-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:16px;
  flex-wrap:wrap;
}
@media (max-width:480px){
  .modal-actions{justify-content:stretch;}
  .modal-actions .btn{flex:1 1 auto;padding:16px 20px;font-size:18px;}
}