/* tv.o3o.vn — I'm the Builder. Thiết kế cho bé ~6 tuổi: nút thật to, chữ thật rõ, iPad/iPhone-first. */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#eef6ff;color:#1f2733;font-size:19px;line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom);-webkit-user-select:none;user-select:none;
}
button{font:inherit;cursor:pointer;touch-action:manipulation;border:0;background:none;color:inherit}
.scr{display:none}
.scr.open{display:block}
.wrap{max-width:660px;margin:0 auto;padding:12px 14px 26px}
.hidden{display:none !important}

/* ---------------- thanh trên: sao + tiến độ ---------------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  background:linear-gradient(160deg,#1b62c9,#2f8ae0);color:#fff;
  padding:calc(8px + env(safe-area-inset-top)) 14px 10px;
}
.topbar .lvl{font-size:15px;font-weight:700;opacity:.95}
.topbar .sp{flex:1}
.star-chip{
  display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 14px;
  font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;position:relative
}
.icon-btn{
  width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.45);font-size:20px;display:grid;place-items:center
}
.icon-btn:active{background:rgba(255,255,255,.34)}

/* ---------------- trang chủ ---------------- */
.hero-title{text-align:center;padding:14px 10px 4px}
.hero-title h1{font-size:32px;letter-spacing:-.5px;color:#14396f;line-height:1.1}
.hero-title p{font-size:16px;color:#4a6285;margin-top:6px}
.house-card{background:#fff;border-radius:22px;padding:10px;box-shadow:0 6px 20px rgba(20,57,111,.12);overflow:hidden}
.house-card svg{width:100%;height:auto;display:block;border-radius:16px}
.house-cap{text-align:center;font-size:16px;font-weight:700;color:#14396f;padding:8px 4px 2px}

.big-btn{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:#fff;border:3px solid #cfe0f7;border-radius:20px;padding:16px 18px;margin:12px 0;
  box-shadow:0 4px 14px rgba(20,57,111,.08)
}
.big-btn:active{transform:scale(.98);background:#f4f9ff}
.big-btn .bi{font-size:34px;flex:0 0 auto}
.big-btn b{display:block;font-size:21px;color:#14396f}
.big-btn small{display:block;font-size:15px;color:#5b73a0}
.big-btn.go{background:linear-gradient(160deg,#1f9d4d,#37c96b);border-color:#1f9d4d;color:#fff}
.big-btn.go b,.big-btn.go small{color:#fff}
.big-btn.locked{opacity:.5}

/* ---------------- LEARN: thẻ từ vựng ---------------- */
.learn-head{text-align:center;padding:6px 8px 10px}
.learn-head h2{font-size:26px;color:#14396f}
.learn-head p{font-size:16px;color:#4a6285;margin-top:4px}
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:430px){.wcards{grid-template-columns:1fr}}
.wcard{
  background:#fff;border:3px solid #dbe8fa;border-radius:20px;padding:12px 12px 14px;text-align:center;
  box-shadow:0 4px 12px rgba(20,57,111,.07)
}
.wcard:active{transform:scale(.98)}
.wcard.done{border-color:#37c96b;background:#f4fff8}
.wcard svg{width:96px;height:96px;display:block;margin:0 auto}
.wcard .en{display:block;font-size:24px;font-weight:900;color:#14396f;margin-top:6px}
.wcard .vi{display:block;font-size:17px;color:#4a6285}
.wcard .tap{display:block;font-size:14px;color:#8aa0c0;margin-top:4px}

/* ---------------- PLAY: cảnh + câu hỏi + 3 đáp án ---------------- */
.stage{
  background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 6px 20px rgba(20,57,111,.12);position:relative
}
.stage svg{width:100%;height:auto;display:block}
.qbar{display:flex;align-items:center;gap:10px;margin:14px 0 6px}
.qbar .qtxt{flex:1;font-size:20px;font-weight:800;color:#14396f}
.listen{
  flex:0 0 auto;background:#eaf3ff;border:3px solid #b9d6f7;color:#1b62c9;
  border-radius:16px;padding:10px 16px;font-size:18px;font-weight:800;min-height:52px
}
.listen:active{background:#d8eaff}

.opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:8px}
@media (max-width:520px){.opts{grid-template-columns:1fr;gap:12px}}
.opt{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:#fff;border:4px solid #cfe0f7;border-radius:20px;padding:12px 8px 14px;
  min-height:150px;box-shadow:0 4px 14px rgba(20,57,111,.08);position:relative
}
@media (max-width:520px){
  .opt{flex-direction:row;justify-content:flex-start;gap:14px;min-height:96px;padding:10px 14px;text-align:left}
  .opt svg{width:74px;height:74px}
  .opt .lbl{text-align:left}
}
.opt svg{width:88px;height:88px;display:block}
.opt .key{
  position:absolute;top:-14px;left:-8px;width:38px;height:38px;border-radius:50%;
  background:#1b62c9;color:#fff;font-size:20px;font-weight:900;display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(0,0,0,.2)
}
@media (max-width:520px){.opt .key{position:static;flex:0 0 auto}}
.opt .lbl{font-size:20px;font-weight:800;color:#14396f;line-height:1.2}
.opt:active{transform:scale(.98)}
.opt.correct{border-color:#1f9d4d;background:#effdf4;animation:pop .45s ease}
.opt.wrong{border-color:#e0534a;background:#fff2f1;animation:shake .4s ease}
.opt[disabled]{opacity:.96}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.fb{margin-top:12px;border-radius:18px;padding:14px 16px;font-size:19px;font-weight:800;display:none}
.fb.show{display:block;animation:pop .4s ease}
.fb.good{background:#effdf4;border:3px solid #37c96b;color:#137a3c}
.fb.bad{background:#fff2f1;border:3px solid #e0534a;color:#a8322b}
.fb small{display:block;font-size:16px;font-weight:600;margin-top:4px;opacity:.9}
.next-btn{
  width:100%;margin-top:12px;background:linear-gradient(160deg,#1f9d4d,#37c96b);color:#fff;
  border-radius:20px;padding:16px;font-size:21px;font-weight:900;min-height:60px
}
.next-btn:active{transform:scale(.98)}

/* sao bay lên khi đúng */
.fly{position:absolute;right:14px;top:8px;font-size:28px;font-weight:900;color:#f7b500;
  text-shadow:0 2px 6px rgba(0,0,0,.25);pointer-events:none;animation:fly 1.1s ease-out forwards}
@keyframes fly{0%{opacity:0;transform:translateY(8px) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1.25)}}

/* ---------------- kết quả level ---------------- */
.res{background:#fff;border-radius:22px;padding:18px;text-align:center;box-shadow:0 6px 20px rgba(20,57,111,.12)}
.res .big{font-size:34px;font-weight:900;color:#137a3c}
.res .sub{font-size:18px;color:#4a6285;margin-top:6px}
.res .row{display:flex;justify-content:space-between;font-size:18px;padding:8px 4px;border-top:2px dashed #e2eaf6;margin-top:10px}
.res .row b{font-weight:900;color:#14396f}

/* ---------------- overlay ngôi sao ---------------- */
.pop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(12,32,64,.6);
  opacity:0;transition:opacity .25s;pointer-events:none;text-align:center;padding:20px}
.pop.go{opacity:1}
.pop .em{font-size:96px;animation:zoomIn 2s ease-out forwards}
.pop .t{color:#fff;font-size:27px;font-weight:900;margin-top:8px}
.pop .s{color:#ffe89a;font-size:19px;margin-top:6px}
@keyframes zoomIn{0%{transform:scale(.3) rotate(-25deg)}35%{transform:scale(1.25) rotate(8deg)}55%{transform:scale(1)}100%{transform:scale(1)}}

/* ---------------- trang phụ huynh ---------------- */
.pcard{background:#fff;border-radius:20px;padding:16px;margin:12px 0;box-shadow:0 4px 14px rgba(20,57,111,.08)}
.pcard h3{font-size:20px;color:#14396f;margin-bottom:8px}
.pcard label{display:block;font-size:15px;color:#4a6285;margin:10px 0 4px;font-weight:700}
.pcard input{width:100%;font-size:20px;padding:12px 14px;border:3px solid #dbe8fa;border-radius:14px;background:#fbfdff}
.pcard textarea{width:100%;font-size:14px;padding:12px;border:3px solid #dbe8fa;border-radius:14px;min-height:88px;font-family:ui-monospace,Menlo,Consolas,monospace}
.prow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pbtn{flex:1 1 auto;min-width:130px;background:#eaf3ff;border:3px solid #b9d6f7;color:#1b62c9;
  border-radius:14px;padding:13px;font-size:17px;font-weight:800;min-height:52px}
.pbtn.warn{background:#fff2f1;border-color:#f0b7b2;color:#a8322b}
.pbtn.ok{background:#effdf4;border-color:#9ae0b6;color:#137a3c}
.pbtn:active{transform:scale(.98)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:2px dashed #e2eaf6}
.sw span{font-size:17px;font-weight:700;color:#14396f}
.sw b{font-size:16px;padding:8px 14px;border-radius:999px;background:#eaf3ff;color:#1b62c9;border:2px solid #b9d6f7}
.hist{font-size:15px;color:#4a6285;padding:6px 0;border-top:1px dashed #e2eaf6}
.note{font-size:14.5px;color:#7b8ca8;margin-top:8px;line-height:1.5}

/* =========================================================================
   HOẠT ẢNH CẢNH — trạng thái đầu (ẩn) → chạy khi khung có .play-ok / .play-bad
   ========================================================================= */
.stage .found,.stage .pour,.stage .joe-thumb,.stage .roof-fall,.stage .add-bags,
.stage .count-new,.stage .dust,.stage .drop-hat,.stage .sparkle,.stage .hole,
.stage .bp-glow{opacity:0}
.stage .frame rect{opacity:0}

/* điểm xoay/thu phóng tính theo CHÍNH phần tử (fill-box) — không phải góc khung hình */
.stage .bed{transform-box:fill-box;transform-origin:100% 100%}   /* bản lề đuôi thùng xe */
.stage .boom{transform-box:fill-box;transform-origin:0% 55%}     /* khớp cần máy xúc */
.stage .jhand{transform-box:fill-box;transform-origin:30% 90%}   /* cổ tay cầm búa */
.stage .jbody{transform-box:fill-box;transform-origin:50% 100%}  /* Joe lắc đầu quanh chân */
.stage .found,.stage .joe-thumb{transform-box:fill-box;transform-origin:50% 100%}
.stage .ab,.stage .count-new,.stage .dust,.stage .sparkle,.stage .drop-hat,
.stage .roof-fall{transform-box:fill-box;transform-origin:50% 50%}
.house .hl{transform-box:fill-box;transform-origin:50% 100%}

/* ----- ĐÚNG ----- */
.play-ok .truck{animation:truckIn 1.1s cubic-bezier(.22,.9,.25,1) both}
.play-ok .bed{animation:bedTip 1s ease-in-out .9s both}
.play-ok .pour{animation:showFade .35s linear 1.25s both}
.play-ok .found{animation:growUp .7s ease-out 1.5s both}
.play-ok .joe-idle{animation:hide .01s linear 1.9s both}
.play-ok .joe-thumb{animation:thumbUp .6s ease-out 1.9s both}
.play-ok .frame .f1{animation:beamDrop .5s ease-out .2s both}
.play-ok .frame .f2{animation:beamDrop .5s ease-out .55s both}
.play-ok .frame .f3{animation:beamDrop .5s ease-out .9s both}
.play-ok .frame .f4{animation:beamSlide .55s ease-out 1.3s both}
.play-ok .boom{animation:dig 1.5s ease-in-out both}
.play-ok .hole{animation:showFade .4s linear .9s both}
.play-ok .dust{animation:puff 1.1s ease-out .95s both}
.play-ok .add-bags{opacity:1}
.play-ok .ab1{animation:bagIn .45s ease-out .15s both}
.play-ok .ab2{animation:bagIn .45s ease-out .35s both}
.play-ok .ab3{animation:bagIn .45s ease-out .55s both}
.play-ok .ab4{animation:bagIn .45s ease-out .75s both}
.play-ok .ab5{animation:bagIn .45s ease-out .95s both}
.play-ok .count-box{animation:hide .01s linear 1.4s both}
.play-ok .count-new{animation:popIn .5s ease-out 1.4s both}
.play-ok .drop-hat{animation:hatDrop .8s cubic-bezier(.3,1.4,.5,1) .25s both}
.play-ok .sparkle{animation:twinkle 1s ease-out 1s both}
.play-ok .bp-glow{animation:glow 1.4s ease-in-out .2s both}
.play-ok .jhand{animation:hammerTap .35s ease-in-out 3 both}

/* ----- SAI ----- */
.play-bad .roof-fall{animation:roofFall 1.1s cubic-bezier(.5,0,.9,.4) both}
.play-bad .jbody{animation:headShake .7s ease-in-out .4s both}

@keyframes truckIn{0%{transform:translateX(-190px)}100%{transform:translateX(0)}}
@keyframes bedTip{0%{transform:rotate(0)}60%{transform:rotate(26deg)}100%{transform:rotate(26deg)}}
@keyframes showFade{0%{opacity:0}100%{opacity:1}}
@keyframes hide{to{opacity:0}}
@keyframes growUp{0%{opacity:0;transform:translateY(16px) scaleY(.3)}100%{opacity:1;transform:none}}
@keyframes thumbUp{0%{opacity:0;transform:translateY(10px) scale(.9)}60%{opacity:1;transform:translateY(-4px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes beamDrop{0%{opacity:0;transform:translateY(-70px)}70%{opacity:1;transform:translateY(4px)}100%{opacity:1;transform:none}}
@keyframes beamSlide{0%{opacity:0;transform:translateX(-90px)}100%{opacity:1;transform:none}}
@keyframes dig{0%{transform:rotate(0)}35%{transform:rotate(24deg)}60%{transform:rotate(24deg)}100%{transform:rotate(-6deg)}}
@keyframes puff{0%{opacity:0;transform:scale(.4)}40%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.5) translateY(-16px)}}
@keyframes bagIn{0%{opacity:0;transform:translate(-40px,-30px) rotate(-20deg)}100%{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes hatDrop{0%{opacity:0;transform:translateY(-120px) rotate(-30deg)}70%{opacity:1;transform:translateY(0) rotate(0)}85%{transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes twinkle{0%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1)}}
@keyframes glow{0%{opacity:0}40%{opacity:.9}100%{opacity:.55}}
@keyframes hammerTap{0%,100%{transform:rotate(0)}50%{transform:rotate(-26deg)}}
@keyframes roofFall{0%{opacity:1;transform:translateY(-30px) rotate(0)}
  70%{opacity:1;transform:translateY(92px) rotate(6deg)}
  80%{transform:translateY(84px) rotate(-3deg)}100%{opacity:1;transform:translateY(92px) rotate(2deg)}}
@keyframes headShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}

/* ---------------- ngôi nhà tích luỹ: lớp bật dần ---------------- */
.house .hl{opacity:0}
.house .hl.on{opacity:1}
.house .hl.grow{animation:growUp .8s ease-out both}
.house .flag{transform-origin:left center;animation:wave 2.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:skewY(0)}50%{transform:skewY(-3deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s !important;animation-delay:0s !important}
}