/* 1rem = 1/40 chiều cao màn hình ngang 16:9 -> khóa bằng --bvh-rem để khi bật bàn phím ảo trên APK không bị thu nhỏ màn hình */
html{font-size:var(--bvh-rem,calc(min(max(100vw,100vh)*0.5625,min(100vw,100vh))/40))}
:root{--ink:#3b3355}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{height:100%;overflow:hidden}
body{font-family:'Baloo 2','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',system-ui,sans-serif;color:var(--ink);font-size:1.8rem;background:#8fd0ff}
#app{position:fixed;inset:0;overflow:hidden;background:linear-gradient(180deg,#8fd0ff,#c5e8ff 55%,#fff6d6)}
button{font-family:inherit;cursor:pointer;color:inherit}
button:disabled{opacity:.35;pointer-events:none}
/* Chữ viết thường theo mẫu chữ trường học Việt Nam */
.hw{font-family:'Playwrite VN',cursive;font-weight:400;line-height:1.15;display:inline-block;vertical-align:middle}
.hw.hw-desc{transform:translateY(-24%);display:inline-block}
.emo{display:inline-block;line-height:1}
/* ---------- nền ---------- */
.bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sun{position:absolute;top:2rem;right:3rem;width:6rem;height:6rem;border-radius:50%;background:radial-gradient(circle,#fff3a0 0 40%,#ffd43b 41%);box-shadow:0 0 3rem 1.2rem rgba(255,220,80,.55)}
.cloud{position:absolute;height:3rem;background:#fff;border-radius:3rem;opacity:.9;animation:drift linear infinite}
.cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:4rem;height:4rem;left:16%;top:-2rem}
.cloud::after{width:3rem;height:3rem;right:18%;top:-1.4rem}
@keyframes drift{from{left:-15rem}to{left:110%}}
.hill{position:absolute;border-radius:50%}
.h1{width:60%;height:14rem;left:-10%;bottom:-8rem;background:#8ce99a}
.h2{width:60%;height:15rem;right:-12%;bottom:-8rem;background:#69db7c}
.h3{width:120%;height:11rem;left:-10%;bottom:-8rem;background:#b2f2bb}
/* ---------- màn hình ---------- */
.screen{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;gap:1rem;padding:1.2rem 2rem 1.4rem;overflow-y:auto;overflow-x:hidden}
.screen.active{display:flex;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.btn{border:none;font-weight:800;font-size:2.2rem;color:#fff;padding:.5rem 2rem;border-radius:1.4rem;background:#40c057;box-shadow:0 .4rem 0 #2f9e44;transition:transform .1s;white-space:nowrap}
.btn:active{transform:translateY(.3rem);box-shadow:0 .1rem 0 #2f9e44}
.btn.orange{background:#ff922b;box-shadow:0 .4rem 0 #d9480f}
.btn.blue{background:#4dabf7;box-shadow:0 .4rem 0 #1971c2}
.btn.purple{background:#9775fa;box-shadow:0 .4rem 0 #6741d9}
.btn.gray{background:#adb5bd;box-shadow:0 .4rem 0 #868e96}
.btn.red{background:#fa5252;box-shadow:0 .4rem 0 #c92a2a}
.btn.sm{font-size:1.6rem;padding:.2rem 1.2rem;border-radius:1rem}
.icon-btn{width:4.6rem;height:4.6rem;border:none;border-radius:1.4rem;background:#fff;font-size:2.4rem;box-shadow:0 .4rem 0 #b7c7e6;flex-shrink:0}
.icon-btn:active{transform:translateY(.25rem);box-shadow:0 .15rem 0 #b7c7e6}
.panel{background:rgba(255,255,255,.93);border-radius:2rem;padding:.9rem 1.4rem;box-shadow:0 .5rem 0 rgba(80,110,180,.18)}
.panel h3{font-size:2rem;margin-bottom:.4rem;text-align:center}
/* avatar + mũ */
.avw{position:relative;display:inline-block;line-height:1}
.avw .hat{position:absolute;left:50%;top:-.42em;transform:translateX(-50%) rotate(-8deg);font-size:.55em;font-style:normal;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}
/* ---------- chào mừng ---------- */
.wgrid{flex:1;display:grid;grid-template-columns:2fr 3fr;gap:2rem;align-items:center}
.wleft{text-align:center}
.logo{font-size:6rem;font-weight:800;line-height:1;color:#fff;text-shadow:0 .4rem 0 #ff6fa8,0 .8rem 0 rgba(0,0,0,.12)}
.logo span:nth-child(1){color:#ffe066}.logo span:nth-child(3){color:#b2f2bb}
.mascot{font-size:9rem;animation:bounce 1.6s ease-in-out infinite;filter:drop-shadow(0 .6rem .5rem rgba(0,0,0,.15))}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1rem)}}
.wright{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.name-input{width:100%;font-family:inherit;font-size:2.8rem;font-weight:800;text-align:center;padding:.1rem;border:.3rem solid #ffd8a8;border-radius:1.4rem;outline:none;color:var(--ink);user-select:text;-webkit-user-select:text}
.name-input:focus{border-color:#ff922b}
.ages{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.age{border:.3rem solid transparent;border-radius:1.6rem;padding:.1rem;background:#fff4e6;box-shadow:0 .4rem 0 #ffd8a8;font-size:2.4rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:.8rem;transition:transform .15s}
.age b{font-size:3.4rem}
.age.sel{border-color:#ff922b;background:#ffe8cc;transform:scale(1.04)}
.avatars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.5rem}
.av{border:.3rem solid transparent;border-radius:1.2rem;background:#e7f5ff;font-size:2.8rem;line-height:1.3;box-shadow:0 .35rem 0 #bfe0fb;transition:transform .15s;min-width:0}
.av.sel{border-color:#4dabf7;transform:scale(1.12);background:#d0ebff}
.err{color:#e03131;text-align:center;font-weight:700;min-height:2rem;font-size:1.8rem}
.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* ---------- trang chủ ---------- */
.topbar{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.me{display:flex;flex-shrink:0;align-items:center;gap:.8rem;background:#fff;border-radius:3rem;padding:.3rem 1.4rem .3rem .3rem;box-shadow:0 .4rem 0 #b7c7e6;min-width:0}
.me .meface{width:4.4rem;height:4.4rem;border-radius:50%;background:#fff3bf;display:grid;place-items:center;font-size:3rem;flex-shrink:0}
.me .nm{font-size:2.2rem;font-weight:800;line-height:1}
.me .ag{font-size:1.4rem;font-weight:700;color:#868e96}
.star-pill{background:#fff;border-radius:3rem;padding:.4rem 1.2rem;font-size:2.2rem;font-weight:800;box-shadow:0 .4rem 0 #b7c7e6;color:#f08c00;white-space:nowrap}
.spacer{flex:1}
.bubble{position:relative;background:#fff;border-radius:1.6rem;padding:.5rem 1.4rem;font-size:2rem;font-weight:700;box-shadow:0 .4rem 0 rgba(80,110,180,.18);line-height:1.25}
.bubble::before{content:'';position:absolute;left:-1rem;top:50%;margin-top:-.8rem;border:.8rem solid transparent;border-right:1.1rem solid #fff;border-left:0}
.greet{display:flex;align-items:center;gap:1rem}
.greet .g-av{font-size:5.5rem;animation:bounce 2s ease-in-out infinite}
.zones{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;min-height:0;padding-bottom:.6rem}
.zone{position:relative;border:none;border-radius:2.4rem;padding:1rem;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;overflow:hidden;transition:transform .12s;text-align:center}
.zone:active{transform:translateY(.4rem) scale(.98)}
.zone .ze{font-size:6rem;width:10rem;height:10rem;border-radius:3rem;background:rgba(255,255,255,.28);display:grid;place-items:center;animation:bounce 2.4s ease-in-out infinite}
.zone h2{font-size:3rem;line-height:1.05;text-shadow:0 .2rem 0 rgba(0,0,0,.15)}
.zone p{font-size:1.5rem;font-weight:600;opacity:.95;line-height:1.2}
.zone::after{content:'';position:absolute;right:-3rem;top:-3rem;width:10rem;height:10rem;border-radius:50%;background:rgba(255,255,255,.15)}
.z-letters{background:linear-gradient(160deg,#ff8cc6,#ff5e9c);box-shadow:0 .6rem 0 #d6336c}
.z-numbers{background:linear-gradient(160deg,#ffc078,#ff922b);box-shadow:0 .6rem 0 #e8590c}
.z-english{background:linear-gradient(160deg,#74c0fc,#4c6ef5);box-shadow:0 .6rem 0 #364fc7}
.z-rewards{background:linear-gradient(160deg,#b197fc,#845ef7);box-shadow:0 .6rem 0 #5f3dc4}
/* ---------- khu trò chơi ---------- */
.ztitle{flex:1;text-align:center;font-size:3rem;font-weight:800;color:#fff;text-shadow:0 .25rem 0 rgba(0,0,0,.18)}
.topbar .ztitle{font-size:2.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.4rem;padding-bottom:1rem}
.gcard{border:none;background:#fff;border-radius:2rem;padding:1rem .6rem;box-shadow:0 .6rem 0 #c5d3f0;display:flex;flex-direction:column;align-items:center;gap:.2rem;animation:fadeIn .4s both}
.gcard:active{transform:translateY(.3rem);box-shadow:0 .3rem 0 #c5d3f0}
.gcard .gi{width:8rem;height:8rem;border-radius:2.2rem;display:grid;place-items:center;font-size:5rem}
.gcard .gn{font-size:2rem;font-weight:800;line-height:1.1;text-align:center;min-height:4.4rem;display:flex;align-items:center}
.gcard .gs{font-size:2rem;color:#dee2e6;letter-spacing:.2rem;line-height:1}
.gcard .gs b{color:#fab005}
.tag5{font-size:1.2rem;font-weight:800;background:#ffe066;color:#a05a00;border-radius:1rem;padding:0 .8rem}
/* ---------- màn chơi ---------- */
.gtop{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.gprompt{flex:1;display:flex;align-items:center;gap:.8rem;min-width:0}
.pav{font-size:4.4rem;transition:transform .2s}
.pav.jump{animation:jump .6s}
.pav.nope{animation:shake .5s}
@keyframes jump{30%{transform:translateY(-1.6rem) rotate(-10deg)}60%{transform:translateY(0) rotate(8deg)}}
.dots{display:flex;gap:.5rem;align-items:center}
.dots i{width:1.6rem;height:1.6rem;border-radius:50%;background:rgba(255,255,255,.7);border:.25rem solid #fff;transition:all .3s}
.dots i.done{background:#ffd43b;border-color:#fab005}
.dots i.cur{transform:scale(1.3);border-color:#4dabf7}
.dots .prog{font-size:2rem;font-weight:800;background:#fff;border-radius:2rem;padding:0 1rem;box-shadow:0 .3rem 0 #b7c7e6}
.play{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;min-height:0}
.row{display:flex;gap:2rem;align-items:center;justify-content:center;flex-wrap:wrap}
.split{display:flex;gap:2rem;align-items:center;justify-content:center;width:100%;height:100%}
.optcol{display:flex;flex-direction:column;gap:1.2rem}
.opt{background:#fff;border:.4rem solid transparent;border-radius:2rem;box-shadow:0 .6rem 0 #c5d3f0;font-weight:800;display:flex;align-items:center;justify-content:center;transition:transform .12s;overflow:hidden}
.opt:active{transform:translateY(.3rem);box-shadow:0 .3rem 0 #c5d3f0}
.opt.num{width:9.5rem;height:9.5rem;font-size:6rem}
.optcol .opt.num{width:8.6rem;height:8.6rem;font-size:5.6rem}
.optcol .opt.num.big{width:11rem;height:11rem;font-size:7rem}
.zi{font-size:5rem;line-height:1;font-weight:800}
.hw.zi{font-size:4.2rem;font-weight:400}
.ztitle .zi{font-size:3rem}
.sea.many .fish{zoom:.8}
.meadow.few .item{font-size:7.5rem}
.opt.num.big{width:12rem;height:12rem;font-size:7.5rem}
.opt.letter{width:11rem;height:11rem;background:#fff8e1;box-shadow:0 .6rem 0 #e0b97a}
.opt.letter .hw{font-size:5.5rem}
.opt.letter .hw.hw-desc{font-size:4.2rem;transform:translateY(-24%)}
.opt.pic{width:14rem;height:14rem;font-size:9.5rem}
.opt.pic img,.pcard img,.bb img,.wchip img,.nwPrev img{width:90%;height:90%;object-fit:contain;border-radius:1rem;pointer-events:none}
.opt.correct,.basket.correct,.pcard.correct{background:#d3f9d8!important;border-color:#40c057!important}
.correct{animation:pop2 .5s}
.hint{animation:glow 1s ease-in-out infinite!important;border-color:#ffd43b!important}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,200,0,.95)}50%{box-shadow:0 0 0 1.4rem rgba(255,200,0,0)}}
.shake{animation:shake .45s!important}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-1rem) rotate(-4deg)}40%{transform:translateX(1rem) rotate(4deg)}60%{transform:translateX(-.6rem)}80%{transform:translateX(.6rem)}}
@keyframes pop2{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
/* bảng phấn kiểu lớp học */
.chalk{position:relative;background:radial-gradient(ellipse at 30% 20%,#3f7d4f,#2a5736);border:.9rem solid #b07a4a;border-radius:1.6rem;box-shadow:0 .6rem 0 #7a4f2a,inset 0 0 2rem rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;padding:1rem 2.5rem;min-width:22.5rem;min-height:23rem;overflow:hidden}
.chalk .hw{font-size:12.5rem;line-height:1.15;text-shadow:0 0 .4rem rgba(255,255,255,.35)}
.chalk .hw.hw-desc{font-size:8.8rem;transform:translateY(-28%);line-height:1.05}
.chalk.small{min-width:0;min-height:0;padding:.5rem 2.4rem;flex-direction:column}
.chalk.small .emo{font-size:8rem}
.chalk.small .hw{font-size:5rem}
.blank{display:inline-block;min-width:4rem;color:#ffe066;border-bottom:.35rem dashed #ffe066;line-height:1;text-align:center;font-weight:800}
.pcard{background:#fff;border:.4rem solid transparent;border-radius:2rem;box-shadow:0 .6rem 0 #c5d3f0;padding:1rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:18rem;min-height:18rem}
.pcard .emo{font-size:10rem}
.pcard .pimg{width:16rem;height:14rem;display:grid;place-items:center;font-size:11rem}
.pcard .hw{font-size:3.6rem}
.en-word{font-size:6rem;font-weight:800;color:#364fc7;line-height:1}
.vi-word{font-size:2.6rem;font-weight:700;color:#868e96}
.learn{display:flex;align-items:center;justify-content:center;gap:2.4rem}
.navb{width:6.5rem;height:6.5rem;border-radius:50%;border:none;background:#fff;font-size:3rem;color:#4dabf7;box-shadow:0 .5rem 0 #b7c7e6}
.navb.go{background:#ff922b;color:#fff;box-shadow:0 .5rem 0 #d9480f;animation:pulse 1.6s infinite}
/* sân khấu trò chơi động */
.stage{position:absolute;inset:0;border-radius:2rem;overflow:hidden}
.stage.balloon{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.4))}
.balloon-i{position:absolute;width:10rem;height:15rem;border:none;background:none;animation:rise var(--d) linear infinite}
@keyframes rise{from{top:100%}to{top:-45%}}
.bb{--c:#ff6b6b;position:relative;width:10rem;height:12rem;border-radius:50% 50% 47% 47%/55% 55% 45% 45%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.7) 0 9%,transparent 10%),var(--c);box-shadow:inset -1rem -1.2rem 0 rgba(0,0,0,.12);display:grid;place-items:center;color:#fff;animation:sway 2.4s ease-in-out infinite;border:.3rem solid transparent}
.bb::before{content:'';position:absolute;bottom:-.9rem;left:50%;transform:translateX(-50%);border-left:.8rem solid transparent;border-right:.8rem solid transparent;border-bottom:1rem solid var(--c)}
.bb::after{content:'';position:absolute;top:100%;left:50%;width:.2rem;height:4rem;margin-top:.1rem;background:rgba(80,80,100,.45)}
.bb .hw{font-size:5rem;text-shadow:0 .2rem 0 rgba(0,0,0,.2)}
.bb .numl{font-size:6rem;text-shadow:0 .3rem 0 rgba(0,0,0,.2)}
.bb .emo{font-size:5.5rem}
.bb img{width:7rem;height:7rem;border-radius:50%;background:#fff;object-fit:cover}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.balloon-i.popped .bb{animation:popb .35s forwards!important}
@keyframes popb{to{transform:scale(1.8);opacity:0}}
.stage.sea{background:linear-gradient(180deg,#a5d8ff 0%,#4dabf7 35%,#1c7ed6 100%)}
.sea .weed{position:absolute;bottom:-1rem;font-size:4.5rem;opacity:.85;animation:sway 3s ease-in-out infinite}
.bubl{position:absolute;bottom:-2rem;width:1.2rem;height:1.2rem;border-radius:50%;border:.2rem solid rgba(255,255,255,.7);animation:bub linear infinite}
@keyframes bub{to{bottom:110%}}
.fish{position:absolute;width:15rem;height:9rem;border:none;background:none;animation:swimR var(--d) linear infinite}
.fish.l{animation-name:swimL;transform:scaleX(-1)}
@keyframes swimR{from{left:-16rem}to{left:100%}}
@keyframes swimL{from{left:100%}to{left:-16rem}}
.fin{position:absolute;inset:0;animation:wob 1.2s ease-in-out infinite}
@keyframes wob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6rem)}}
.ftail{position:absolute;left:0;top:1.8rem;border-top:2.6rem solid transparent;border-bottom:2.6rem solid transparent;border-left:4rem solid var(--c);filter:brightness(.9)}
.fbody{position:absolute;left:3rem;top:0;width:12rem;height:9rem;background:var(--c);border-radius:55% 45% 45% 55%/50%;box-shadow:inset -.6rem -.9rem 0 rgba(0,0,0,.12);border:.3rem solid transparent}
.feye{position:absolute;right:1.4rem;top:2rem;width:1.8rem;height:1.8rem;border-radius:50%;background:radial-gradient(circle at 60% 50%,#222 0 38%,#fff 40%)}
.flab{position:absolute;left:3.2rem;top:0;width:9rem;height:9rem;display:grid;place-items:center;color:#fff}
.fish.l .flab{transform:scaleX(-1)}
.flab .hw{font-size:4.6rem;text-shadow:0 .2rem 0 rgba(0,0,0,.25);line-height:1.15}
.flab .hw.hw-desc{font-size:3.5rem;transform:translateY(-26%)}
.flab .numl{font-size:5.5rem;text-shadow:0 .25rem 0 rgba(0,0,0,.25)}
.flab .emo{font-size:5rem}
.flab img{width:6.5rem;height:6.5rem;border-radius:50%;background:#fff;object-fit:cover}
.fish.caught .fin{animation:caught .9s forwards}
@keyframes caught{40%{transform:translateY(-6rem) rotate(-20deg) scale(1.2)}100%{transform:translateY(-40rem) rotate(30deg);opacity:0}}
.stage.mole{background:linear-gradient(180deg,#b2f2bb,#69db7c)}
.holes{position:absolute;inset:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:1rem 3.5rem;padding:.5rem 2rem}
.hole{position:relative;width:16.5rem;height:14.5rem}
.pit{position:absolute;bottom:0;left:0;right:0;height:4.8rem;border-radius:50%;background:radial-gradient(ellipse,#2b1d10 55%,#7a5230 57%,#7a5230 75%,transparent 77%)}
.win{position:absolute;left:0;right:0;bottom:2.2rem;height:14rem;overflow:hidden}
.mole-i{position:absolute;left:50%;bottom:0;transform:translate(-50%,110%);transition:transform .25s;border:none;background:none;display:flex;flex-direction:column;align-items:center;width:100%}
.mole-i.up{transform:translate(-50%,0)}
.sign{background:#fff8e1;border:.3rem solid #b07a4a;border-radius:1.2rem;width:95%;min-width:11rem;max-width:15.5rem;min-height:6.2rem;display:grid;place-items:center;padding:.4rem .8rem;box-shadow:0 .35rem 0 #7a4f2a;word-break:break-word;text-align:center}
.sign .hw{font-size:3.6rem;color:#d6336c;line-height:1.15}
.sign .hw.hw-desc{font-size:2.8rem;transform:translateY(-24%)}
.sign .numl{font-size:4.2rem;color:#e8590c}
.sign .emo{font-size:4.2rem}
.sign .qt{font-size:1.75rem!important;color:#183153}
.sign img{width:5.4rem;height:5.4rem;object-fit:contain}
.mface{font-size:5.6rem;line-height:1}
.hammer{position:absolute;font-size:6rem;animation:hit .4s forwards;pointer-events:none}
@keyframes hit{from{transform:translate(-30%,-90%) rotate(-60deg)}to{transform:translate(-30%,-60%) rotate(20deg)}}
.numl{font-weight:800;font-family:'Baloo 2',sans-serif}
/* đếm */
.meadow{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:.6rem;background:rgba(255,255,255,.75);border-radius:2rem;padding:1.2rem;flex:1;max-width:60rem;min-height:14rem;border:.35rem dashed #8ce99a}
.item{position:relative;border:none;background:none;font-size:4.8rem;line-height:1.1;animation:popIn .4s both}
.meadow.many .item{font-size:3.6rem}
.item i{position:absolute;bottom:-.4rem;right:-.4rem;background:#4dabf7;color:#fff;font-style:normal;font-size:1.6rem;font-weight:800;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;border:.2rem solid #fff}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.bignum{font-size:13rem;font-weight:800;line-height:1;color:#fff;text-shadow:0 .5rem 0 #ff922b,0 .9rem 0 rgba(0,0,0,.12);text-align:center;border-radius:2rem}
.bignum small{display:block;font-size:3rem;text-shadow:0 .25rem 0 #ff922b}
.bunny{position:relative;font-size:10rem;line-height:1}
.need{position:absolute;top:-.6rem;right:-2rem;background:#ff922b;color:#fff;font-size:3.4rem;font-weight:800;width:5.4rem;height:5.4rem;border-radius:50%;display:grid;place-items:center;border:.35rem solid #fff}
.plate{width:20rem;min-height:9rem;background:#fff;border-radius:50%/40%;box-shadow:inset 0 -.7rem 0 #e9ecef,0 .5rem 0 #ced4da;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:.8rem 1.6rem}
.counter{font-size:4rem;font-weight:800;color:#e8590c;background:#fff;border-radius:1.6rem;padding:0 1.4rem;box-shadow:0 .4rem 0 #ffd8a8}
.pile{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:.3rem;background:rgba(160,110,60,.25);border-radius:2rem;padding:1rem;width:30rem;min-height:12rem}
.carrot{border:none;background:none;font-size:4.4rem;transition:transform .15s}
.plate .carrot{font-size:3rem}
.basket{border:.4rem solid transparent;background:#fff;border-radius:2rem;box-shadow:0 .6rem 0 #c5d3f0;width:26rem;min-height:22rem;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:.2rem;padding:1rem;font-size:4rem}
/* lật thẻ */
.memory{display:grid;gap:1.2rem}
.mcard{border:none;background:none;perspective:60rem;width:9.5rem;height:12.5rem}
.mcard .inner{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.mcard.flip .inner{transform:rotateY(180deg)}
.mf{position:absolute;inset:0;border-radius:1.4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mf.back{background:repeating-linear-gradient(45deg,#ff8cc6 0 1rem,#ff6fa8 1rem 2rem);color:#fff;font-size:4.4rem;font-weight:800;box-shadow:0 .5rem 0 #d6336c}
.mf.front{background:#fff;transform:rotateY(180deg);box-shadow:0 .5rem 0 #c5d3f0;color:#d6336c}
.mf.front .hw{font-size:4.6rem}
.mf.front .emo{font-size:4.6rem}
.mf.front .hw.wd{font-size:1.7rem;color:var(--ink)}
.mcard.ok .front{background:#d3f9d8;color:#2f9e44}
/* màu */
.paint{border:.45rem solid #fff;width:12rem;height:12rem;box-shadow:0 .6rem 0 rgba(0,0,0,.15),inset -.8rem -1rem 0 rgba(0,0,0,.12),inset .8rem .8rem 0 rgba(255,255,255,.25)}
.paint:nth-child(4n+1){border-radius:46% 54% 42% 58%/52% 44% 56% 48%}
.paint:nth-child(4n+2){border-radius:58% 42% 55% 45%/45% 58% 42% 55%}
.paint:nth-child(4n+3){border-radius:42% 58% 48% 52%/56% 46% 54% 44%}
.paint:nth-child(4n+4){border-radius:52% 48% 60% 40%/42% 54% 46% 58%}
/* nói */
.mic{width:11rem;height:11rem;border-radius:50%;border:none;background:linear-gradient(135deg,#ff8787,#fa5252);color:#fff;font-size:5.5rem;box-shadow:0 .6rem 0 #c92a2a}
.mic.rec{animation:recp 1s ease-in-out infinite}
@keyframes recp{0%,100%{box-shadow:0 .6rem 0 #c92a2a,0 0 0 0 rgba(250,82,82,.6)}50%{box-shadow:0 .6rem 0 #c92a2a,0 0 0 2.4rem rgba(250,82,82,0)}}
.mic-status{font-size:2rem;font-weight:700;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;max-width:24rem}
.mic-status small{font-size:1.4rem;color:#868e96}
/* ---------- phần thưởng ---------- */
.rgrid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.rbox{background:#fff;border-radius:2.6rem;padding:1.6rem;box-shadow:0 .8rem 0 rgba(80,110,180,.25);text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}
.rbox h2{font-size:4.4rem;color:#ff5e9c;line-height:1.1}
.rstars{font-size:7rem;line-height:1}
.rs{display:inline-block;color:#dee2e6;transform:scale(0);animation:starIn .5s forwards}
.rs.on{color:#fcc419;text-shadow:0 .35rem 0 #f08c00}
@keyframes starIn{60%{transform:scale(1.4) rotate(20deg)}100%{transform:scale(1)}}
.rbtns{display:flex;flex-direction:column;gap:1rem;width:100%}
.chest-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:26rem}
.chest{font-size:13rem;border:none;background:none;animation:wiggle 1s ease-in-out infinite;line-height:1}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) scale(1.06)}75%{transform:rotate(8deg) scale(1.06)}}
.chest-tip{font-size:2.4rem;font-weight:800;color:#fff;text-shadow:0 .2rem 0 rgba(0,0,0,.2)}
.rays{position:absolute;left:50%;top:50%;margin:-11rem 0 0 -11rem;width:22rem;height:22rem;border-radius:50%;background:repeating-conic-gradient(rgba(255,215,0,.45) 0 12deg,transparent 12deg 24deg);animation:spinCenter 8s linear infinite;-webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 25%,transparent 70%);pointer-events:none;z-index:0}
@keyframes spinCenter{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.new-st{position:relative;font-size:12rem;line-height:1;animation:grow .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes grow{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1)}}
.prize-t{position:relative;font-size:2.4rem;font-weight:800;color:#fff;text-shadow:0 .2rem 0 rgba(0,0,0,.25);text-align:center}
/* thanh chuyển tab phần thưởng */
#rewards{padding:.5rem 1.4rem .6rem;overflow:hidden;max-width:100vw;box-sizing:border-box;gap:.4rem}
#rewards .topbar{gap:.6rem;flex-shrink:0}
#rewards .rbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;max-width:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column}
.tabs.rtabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem;width:100%;max-width:100%;box-sizing:border-box;flex-shrink:0;padding:.1rem 0}
.tabs.rtabs::-webkit-scrollbar{display:none}
.tabs.rtabs .tab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.3rem;padding:.35rem .2rem;border-radius:1.1rem;display:flex;align-items:center;justify-content:center;text-align:center;gap:.2rem;min-width:0;width:100%;box-sizing:border-box}
/* tủ đồ */
.wardrobe{display:grid;grid-template-columns:22rem 1fr;gap:2rem;flex:1;min-height:0}
.wbox{background:rgba(255,255,255,.9);border-radius:2rem;padding:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;overflow-y:auto}
.wbox h3{font-size:2.2rem}
.bigav{font-size:10rem;margin-top:3rem}
.hats{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.8rem;width:100%;max-height:46rem;overflow-y:auto;padding-right:.4rem}
.hatb{border:.3rem solid transparent;border-radius:1.2rem;background:#f3f0ff;font-size:3.2rem;padding:.2rem;line-height:1.2;position:relative}
.hatb small{display:block;font-size:1.2rem;font-weight:800;color:#7950f2}
.hatb.lock{filter:grayscale(1);opacity:.5}
.hatb.on{border-color:#7950f2;background:#e5dbff}
.stk-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.8rem;width:100%}
.stk{aspect-ratio:1;border-radius:1.4rem;background:#f3f0ff;display:grid;place-items:center;font-size:3.6rem}
.stk.no{filter:grayscale(1) brightness(1.6);opacity:.35}
/* ---------- góc bố mẹ ---------- */
.tabs{display:flex;gap:.8rem;flex-wrap:wrap;flex-shrink:0}
.tab{border:none;border-radius:1.4rem;padding:.4rem 1.6rem;font-size:2rem;font-weight:800;background:rgba(255,255,255,.6)}
.tab.on{background:#fff;box-shadow:0 .4rem 0 #b7c7e6;color:#4c6ef5}
.pbody{background:rgba(255,255,255,.95);border-radius:2rem;padding:1.2rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.prow{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.ptxt{font-size:1.7rem;color:#495057}
.chip{border:.25rem solid #e9ecef;background:#fff;border-radius:1.2rem;padding:0 1rem;font-size:1.8rem;font-weight:700}
.chip .hw{font-size:2.2rem}
.chip.on{border-color:#40c057;background:#ebfbee}
.lgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:.8rem}
.ltile{position:relative;border:.3rem solid #e9ecef;border-radius:1.4rem;background:#fff;height:7rem;display:grid;place-items:center}
.ltile .hw{font-size:3.4rem;color:#adb5bd}
.ltile i{position:absolute;top:-.6rem;right:-.6rem;width:2.4rem;height:2.4rem;border-radius:50%;background:#40c057;color:#fff;font-size:1.4rem;font-style:normal;display:none;place-items:center}
.ltile.on{border-color:#40c057;background:#ebfbee}
.ltile.on .hw{color:#2b8a3e}
.ltile.on i{display:grid}
.cat h4{font-size:2rem;display:flex;align-items:center;gap:1rem;margin-bottom:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.wchip{display:flex;align-items:center;gap:.4rem;border:.25rem solid #e9ecef;background:#fff;border-radius:1.4rem;padding:.1rem .8rem .1rem .3rem;font-size:1.8rem;font-weight:700;position:relative}
.wchip .wp{width:3.4rem;height:3.4rem;display:grid;place-items:center;font-size:2.6rem}
.wchip.on{border-color:#40c057;background:#ebfbee}
.wchip .del{margin-left:.4rem;color:#fa5252;font-weight:800}
.addbox{border:.3rem dashed #74c0fc;border-radius:1.6rem;padding:1rem;display:flex;flex-direction:column;gap:.8rem;background:#f8fbff}
.addbox h4{font-size:2.1rem}
.tin{font-family:inherit;font-size:2rem;padding:.3rem 1rem;border:.25rem solid #d0ebff;border-radius:1rem;outline:none;user-select:text;-webkit-user-select:text;min-width:18rem;flex:1}
.tin:focus{border-color:#4dabf7}
.nwPrev{width:9rem;height:9rem;border-radius:1.4rem;background:#fff;border:.25rem solid #d0ebff;display:grid;place-items:center;font-size:6rem;flex-shrink:0;color:#ced4da}
.imgres{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.imgres button{border:.3rem solid #e9ecef;border-radius:1rem;background:#fff;aspect-ratio:1;overflow:hidden;padding:0}
.imgres img{width:100%;height:100%;object-fit:cover}
.imgres button.on{border-color:#40c057}
.numsel .btn{font-size:3rem;padding:.4rem 2.6rem}
.numsel .btn.cur{outline:.4rem solid #ffd43b}
/* ---------- modal & hiệu ứng ---------- */
.modal{position:fixed;inset:0;z-index:100005;background:rgba(40,30,70,.55);display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.show{display:flex}
.mbox{background:#fff;border-radius:2.2rem;padding:1.2rem 1.6rem;width:42rem;max-width:92vw;max-height:94vh;overflow-y:auto;text-align:center;display:flex;flex-direction:column;gap:.8rem;animation:fadeIn .3s;box-sizing:border-box}
.mbox h3{font-size:2.4rem}
#fx{position:fixed;inset:0;z-index:100010;pointer-events:none;overflow:hidden}
.spark{position:absolute;font-size:2.6rem;animation:spark .8s ease-out forwards}
@keyframes spark{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2);opacity:0}}
.fly{position:absolute;font-size:4rem;transform:translate(-50%,-50%) scale(1.4);transition:left .8s cubic-bezier(.5,-.3,.7,1),top .8s cubic-bezier(.5,-.3,.7,1),transform .8s}
.conf{position:absolute;top:-2rem;width:1rem;height:1.6rem;border-radius:.3rem;animation:fall linear forwards}
@keyframes fall{to{top:110%;transform:rotate(800deg) translateX(5rem)}}
.combo{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:4.4rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff922b,#f03e3e);padding:.4rem 2.4rem;border-radius:3rem;box-shadow:0 .5rem 0 #c92a2a;animation:comboA 1.5s forwards;white-space:nowrap}
@keyframes comboA{0%{transform:translate(-50%,-50%) scale(0)}20%{transform:translate(-50%,-50%) scale(1.2)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}
.toast{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);background:#343a40;color:#fff;font-size:1.8rem;font-weight:700;padding:.6rem 1.6rem;border-radius:1.4rem;animation:fadeIn .3s}
/* điện thoại cầm dọc: xếp lại cho vừa */
@media (orientation:portrait){
 .wgrid,.rgrid,.wardrobe{grid-template-columns:1fr}
 .zones{grid-template-columns:1fr 1fr}
 .lgrid{grid-template-columns:repeat(6,1fr)}
 .split,.learn{flex-direction:column}
}