:root{--ink:#24324c;--muted:#6f7d94;--blue:#2f80ed;--pink:#ff5e96;--purple:#7657e8;--green:#42bd78;--yellow:#ffd65c;--card:#fff;--bg:#f4f9ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Tahoma,"Noto Sans Thai",sans-serif;color:var(--ink);background:linear-gradient(#ddf4ff 0,#fff7e5 44%,#eefbff 100%);min-height:100vh}
button,a,input,select{font:inherit}button{cursor:pointer}
.sky{background:linear-gradient(#78cfff,#cfefff);position:relative;overflow:hidden}.sky:before{content:"☁️   ☁️        ☁️";position:absolute;top:12px;left:4%;font-size:45px;opacity:.72;white-space:pre}.sky:after{content:"🌈";position:absolute;right:12%;top:26px;font-size:108px;opacity:.5}
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);box-shadow:0 3px 18px #5073a51e;backdrop-filter:blur(12px)}
.nav{max-width:1220px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:9px 14px;gap:12px}.brand img{width:min(300px,43vw);display:block}.navlinks{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.navlinks button{border:0;background:#fff;border-radius:14px;padding:10px 12px;font-weight:900;color:#52627c}.navlinks button:hover{background:#eff5ff}.profile{border:0;border-radius:999px;background:#eef0ff;padding:10px 13px;font-weight:900;color:#6251c8}
.wrap{max-width:1220px;margin:auto;padding:18px 14px 48px}.page{display:none}.page.active{display:block}
.hero{position:relative;overflow:hidden;border-radius:32px;padding:32px;background:linear-gradient(135deg,#63bfff,#7b69ee 55%,#ef7eca);color:#fff;box-shadow:0 18px 42px #4f67a633}.hero h1{font-size:39px;margin:0 0 8px;text-shadow:0 3px 0 #4759a944}.hero p{font-size:17px;line-height:1.7;max-width:720px}.hero .kids{position:absolute;right:40px;bottom:0;font-size:106px;filter:drop-shadow(0 9px 7px #314c6d55)}.hero .rainbow{position:absolute;right:230px;top:15px;font-size:105px;opacity:.45}.heroBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.btn{border:0;border-radius:17px;padding:13px 18px;font-weight:900}.primary{background:#ffd458;color:#59420d}.white{background:#fff;color:#5c56b5}.purple{background:#6e5be8;color:#fff}.soft{background:#eef2f8;color:#54647c}.danger{background:#ff628e;color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.stat{background:#fff;border-radius:20px;padding:15px;box-shadow:0 8px 24px #58739d19}.stat b{font-size:23px;display:block}.stat span{font-size:13px;color:var(--muted)}
.sectionTitle{font-size:24px;margin:26px 0 12px}.quickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.quick{border:0;background:#fff;border-radius:25px;padding:20px;text-align:left;box-shadow:0 10px 26px #4f64891c;min-height:155px}.quick .art{font-size:47px}.quick h3{margin:9px 0 5px}.quick p{margin:0;color:var(--muted);line-height:1.5}
.catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}.cat{border:0;border-radius:22px;padding:13px 9px;min-height:148px;box-shadow:0 8px 23px #4e608419;position:relative;overflow:hidden;background:#fff}.cat:before{content:"";position:absolute;inset:0;opacity:.15;background:linear-gradient(135deg,#ff71a5,#5fa9ff)}.cat .icon{font-size:44px;position:relative}.cat strong,.cat small{display:block;position:relative}.cat strong{font-size:15px;margin-top:8px}.cat small{font-size:11px;color:#6d7b90;margin-top:5px}.cat .tag{position:absolute;top:7px;left:7px;background:#fff;border-radius:999px;padding:4px 7px;font-size:11px;font-weight:900}
.panel{background:#fff;border-radius:28px;padding:22px;box-shadow:0 14px 36px #4d628620}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.level{border:2px solid #e5e8f3;background:#fff;border-radius:22px;padding:24px;text-align:center}.level .icon{font-size:48px}.level strong{display:block;font-size:21px;margin:8px}
.quizStage{display:grid;grid-template-columns:180px minmax(0,1fr) 220px;gap:14px;align-items:start}.side,.quizCard{background:#fff;border-radius:24px;box-shadow:0 10px 28px #45607e1c}.side{padding:16px}.quizCard{padding:20px;border:5px solid #ffe7f0}.subjectBanner{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:14px}.wood{background:#fff1c7;border:4px solid #c98242;border-radius:18px;padding:10px 18px;font-weight:900;font-size:22px}.qcounter{background:#fff9e6;border:3px solid #ffc44f;border-radius:17px;padding:9px 16px;font-weight:900}.quizHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.question{font-size:27px;font-weight:900;line-height:1.55}.speaker{border:0;width:54px;height:54px;border-radius:50%;background:#ff6f9b;color:white;font-size:24px}.visual{font-size:48px;letter-spacing:7px;text-align:center;background:#f9fbff;border:2px dashed #d8e0f0;border-radius:20px;padding:18px;margin:12px 0;white-space:pre-line}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.choice{border:3px solid #e4e8f2;border-radius:20px;background:#fff;padding:17px;font-weight:900;font-size:20px;min-height:72px}.choice.correct{border-color:#39b970;background:#eafff2;color:#167243}.choice.wrong{border-color:#ee6876;background:#fff0f1;color:#a52d3a}.explain{display:none;margin-top:15px;border-radius:18px;background:#f3f7ff;padding:15px;font-weight:800;line-height:1.6}.explain.show{display:block}.quizActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.progressRing{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#55c271 var(--pct,0%),#edf1f5 0);margin:10px auto}.progressRing>div{width:82px;height:82px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;font-weight:900}.miniList{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.bubble{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eef1f7;font-weight:900;font-size:12px}.bubble.done{background:#4ac17c;color:#fff}.bubble.now{outline:4px solid #ffd34f}.mascot{font-size:58px;text-align:center}.tip{background:#e9f8ff;border-radius:17px;padding:12px;line-height:1.5;font-weight:800;font-size:13px}.scorebox{margin-top:10px;background:#fff3f7;border-radius:17px;padding:12px;text-align:center}.scorebox b{font-size:24px;color:#ee4c85}
.dashboard{display:grid;grid-template-columns:2fr 1fr;gap:15px}.card{background:#fff;border-radius:24px;padding:19px;box-shadow:0 10px 28px #45617f18}.skill{margin:12px 0}.skillHead{display:flex;justify-content:space-between;font-weight:800}.skillbar{height:11px;background:#edf0f5;border-radius:999px;overflow:hidden;margin-top:5px}.skillbar i{height:100%;display:block;background:linear-gradient(90deg,#47c589,#5a7be8)}.rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.reward{background:#f9fbff;border-radius:16px;padding:12px;text-align:center}.reward .m{font-size:35px}.rankitem{display:grid;grid-template-columns:46px 1fr 80px;gap:8px;align-items:center;padding:11px 0;border-bottom:1px solid #edf0f5}
.adzone{margin:22px auto 0;background:#fffafd;border:2px dashed #9b7ce7;border-radius:18px;min-height:105px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#7259c7;position:relative}.adzone:before{content:"AD";position:absolute;left:10px;top:8px;background:#f0ebff;color:#7259c7;border-radius:6px;padding:2px 6px;font-size:10px;font-weight:900}.adzone small{color:#7e8799;margin-top:5px}
.footer{background:#176bb8;color:#fff;text-align:center;padding:23px 12px}.footer a{color:#fff;margin:0 7px;text-decoration:none}.modal{display:none;position:fixed;inset:0;background:#26354d88;z-index:99;align-items:center;justify-content:center;padding:16px}.modal.show{display:flex}.modalbox{background:#fff;border-radius:25px;padding:22px;width:min(480px,100%)}.field{margin:12px 0}.field label{display:block;font-weight:900;margin-bottom:6px}.field input,.field select{width:100%;padding:12px;border:2px solid #dfe5ef;border-radius:13px}
.simpleTop{background:#fff;box-shadow:0 3px 16px #4e608419}.simpleNav{max-width:1000px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px}.simpleNav img{width:min(320px,68vw)}.simpleNav a{background:#eef0ff;padding:10px 13px;border-radius:14px;text-decoration:none;color:#6554c7;font-weight:900}.content{max-width:900px;margin:22px auto;background:#fff;border-radius:26px;padding:24px;box-shadow:0 10px 28px #45617f18}.content p,.content li{line-height:1.8;color:#53627a}.notice{background:#fff8d9;border-radius:16px;padding:13px;line-height:1.6}
@media(max-width:980px){.catgrid{grid-template-columns:repeat(4,1fr)}.quizStage{grid-template-columns:1fr}.side{display:none}.dashboard{grid-template-columns:1fr}.navlinks{display:none}}
@media(max-width:700px){.quickgrid{grid-template-columns:repeat(2,1fr)}.catgrid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:30px}.hero .kids{font-size:70px;opacity:.28}.hero .rainbow{display:none}.choices{grid-template-columns:1fr}.levels{grid-template-columns:1fr}.question{font-size:22px}}
@media(max-width:430px){.wrap{padding:11px 9px 36px}.hero{padding:22px 17px;border-radius:23px}.quickgrid{grid-template-columns:1fr}.brand img{width:235px}.profile{font-size:12px;padding:8px}.cat{min-height:135px}.quizCard{padding:14px}.wood{font-size:18px;padding:8px 12px}.qcounter{font-size:13px}.visual{font-size:37px}}

.choiceWrap{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:8px;align-items:stretch}
.choiceWrap .choice{width:100%;display:flex;align-items:center;justify-content:flex-start;text-align:left}
.choiceNum{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#edf2ff;margin-right:10px}
.choiceText{min-width:0;word-break:break-word}
.choiceAudio{border:0;border-radius:16px;background:#eaf6ff;font-size:22px;min-height:52px;color:#286ca8}
.choiceAudio:active{transform:scale(.96)}
.choiceAudio:disabled{opacity:.5}
@media(max-width:700px){.choiceWrap{grid-template-columns:minmax(0,1fr) 48px}.choiceAudio{font-size:20px}}

.hero{
  background-image:linear-gradient(90deg,rgba(42,117,211,.72),rgba(126,82,224,.58),rgba(245,100,158,.44)),url("assets/graphics/hero-school.svg");
  background-size:cover;background-position:center;
}
.hero .kids,.hero .rainbow{display:none!important}
.catGraphic{width:88px;height:88px;object-fit:contain;display:block;margin:2px auto 6px;position:relative;filter:drop-shadow(0 6px 6px rgba(51,70,110,.12))}
.questionGraphic{width:min(210px,55vw);height:auto;display:block;margin:auto;filter:drop-shadow(0 8px 7px rgba(50,70,100,.16))}
.answerGraphic{width:78px;height:78px;object-fit:contain;flex:0 0 78px;margin-right:8px}
.choiceWrap .choice{min-height:106px}
.choiceText{font-size:19px}
@media(max-width:700px){.answerGraphic{width:62px;height:62px;flex-basis:62px}.catGraphic{width:76px;height:76px}.choiceWrap .choice{min-height:92px}}

/* PREMIUM VISUAL LAYER */
body{
  background:
  radial-gradient(circle at 15% 8%,rgba(255,255,255,.85),transparent 20%),
  linear-gradient(180deg,#dff5ff 0%,#fff5d8 52%,#e9f7df 100%);
}
.premiumHero{
  min-height:430px;
  padding:0;
  background-image:url("assets/premium/hero-scene.svg");
  background-size:cover;
  background-position:center;
  border:4px solid rgba(255,255,255,.8);
  overflow:hidden;
}
.premiumHero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,81,151,.55) 0%,rgba(51,69,164,.18) 45%,transparent 68%)}
.heroOverlay{position:relative;z-index:3;width:min(700px,62%);padding:44px 44px 34px;color:#fff;text-shadow:0 3px 0 rgba(43,62,120,.28)}
.heroKicker{display:inline-block;background:rgba(255,255,255,.92);color:#4563ba;padding:9px 15px;border-radius:999px;font-weight:900;text-shadow:none;margin-bottom:10px}
.premiumHero h1{font-size:58px;line-height:1.02;margin:5px 0 12px;font-weight:900}.premiumHero h1 span{color:#ffd64f}
.premiumHero p{font-size:18px;max-width:600px}
.heroBtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:600px}
.heroBtn{font-size:16px;color:#fff;border:3px solid rgba(255,255,255,.72);box-shadow:0 8px 0 rgba(39,58,105,.17),0 10px 26px rgba(38,54,96,.22)}
.heroBtn.yellow{background:linear-gradient(#ffc84f,#ff9d24)}.heroBtn.blue{background:linear-gradient(#4daaf6,#2476d8)}.heroBtn.green{background:linear-gradient(#65ce65,#33a946)}.heroBtn.purple2{background:linear-gradient(#a678f2,#7854cf)}
.homeSplit{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start;margin-top:12px}
.homeMain{min-width:0}.homeSidebar{display:flex;flex-direction:column;gap:14px}
.sidePanel{background:#fff;border-radius:25px;padding:16px;box-shadow:0 10px 25px rgba(61,82,119,.16);border:3px solid #fff}
.sidePanel h3{margin:0 0 12px;padding:11px 13px;border-radius:16px;color:#fff}
.missionPanel h3{background:linear-gradient(90deg,#ff6f95,#ff9e6d)}.statPanel h3{background:linear-gradient(90deg,#438be9,#6866e4)}.rankingPanel h3{background:linear-gradient(90deg,#7d52d7,#a254db)}
.missionRow{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;margin:9px 0 5px}.missionBar{height:10px;background:#edf0f5;border-radius:999px;overflow:hidden}.missionBar i{display:block;height:100%;background:linear-gradient(90deg,#ff718e,#ffb03c);border-radius:999px}
.statMini,.rankMini{display:flex;justify-content:space-between;gap:10px;padding:9px 4px;border-bottom:1px solid #edf0f4;font-size:13px}.rankMini b{color:#5a59ca}
.quickgrid{grid-template-columns:repeat(4,1fr)}
.quick{border:3px solid #fff;background:linear-gradient(180deg,#fff,#fff9ec);box-shadow:0 10px 0 #e6ebf3,0 12px 28px rgba(69,86,118,.16);transition:transform .15s}.quick:hover{transform:translateY(-4px)}
.catgrid{grid-template-columns:repeat(6,1fr)}
.cat{padding:6px;background:linear-gradient(180deg,#fff,#fffdf7);border:3px solid #fff;box-shadow:0 8px 0 #dfe7f1,0 12px 24px rgba(53,72,110,.14);overflow:visible;min-height:190px}
.cat:before{display:none}.catGraphic{width:100%;height:125px;object-fit:contain;margin:0 auto}.cat strong{font-size:15px;margin:3px 8px}.cat small{margin:3px 8px 8px}.cat .tag{z-index:3;top:-7px;left:-5px;background:linear-gradient(#ff6b91,#ed3d6b);color:#fff;box-shadow:0 4px 9px rgba(93,45,78,.18)}
.stats .stat{border:3px solid #fff;background:linear-gradient(180deg,#fff,#fffaf0);box-shadow:0 8px 0 #e6edf6,0 12px 24px rgba(55,76,113,.12)}
.adzone{background:linear-gradient(90deg,#f7edff,#fff8ff);border:3px dashed #a67be7;box-shadow:0 7px 20px rgba(92,74,144,.1)}
/* quiz visual polish */
.quizStage{background:linear-gradient(180deg,#fff9e9,#f6fff1);padding:10px;border-radius:28px}
.quizCard{border:5px solid #ffd7e5;box-shadow:0 12px 0 #f5dbe5,0 18px 34px rgba(57,75,112,.18);background:linear-gradient(180deg,#fff,#fffdf7)}
.side{border:4px solid #fff;box-shadow:0 10px 0 #e6edf4,0 15px 28px rgba(61,80,115,.15)}
.choiceWrap{background:transparent}.choiceWrap .choice{border:4px solid #e4e8f4;box-shadow:0 7px 0 #edf0f6;background:linear-gradient(180deg,#fff,#fffaf6);border-radius:22px}
.choiceWrap .choice.correct{box-shadow:0 7px 0 #c8ead4}.choiceWrap .choice.wrong{box-shadow:0 7px 0 #f2c8ce}
.choiceAudio{border:3px solid #fff;box-shadow:0 6px 0 #d9eaf7;background:linear-gradient(#e9f7ff,#cfeeff)}
.questionGraphic,.answerGraphic{filter:drop-shadow(0 8px 10px rgba(43,62,97,.18))}
@media(max-width:1020px){.homeSplit{grid-template-columns:1fr}.homeSidebar{display:grid;grid-template-columns:repeat(3,1fr)}.catgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.premiumHero{min-height:390px;background-position:58% center}.heroOverlay{width:100%;padding:28px 20px;background:linear-gradient(90deg,rgba(34,75,152,.72),rgba(77,73,171,.38),transparent)}.premiumHero h1{font-size:42px}.heroBtns{grid-template-columns:1fr 1fr}.homeSidebar{grid-template-columns:1fr}.catgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.premiumHero h1{font-size:34px}.heroKicker{font-size:12px}.heroBtns{grid-template-columns:1fr}.catGraphic{height:105px}.cat{min-height:168px}}

/* Real generated graphics layer */
.premiumHero{
  background-image:linear-gradient(90deg,rgba(20,79,150,.25),rgba(78,78,170,.08),rgba(255,255,255,.02)),url("assets/real/hero-real.jpg")!important;
  background-size:cover!important;
  background-position:center!important;
  min-height:410px!important;
}
.heroOverlay{background:linear-gradient(90deg,rgba(31,86,157,.60),rgba(55,65,155,.28),transparent 72%);border-radius:28px}
.catGraphic{
  border-radius:20px;
  box-shadow:0 6px 18px rgba(49,71,106,.15);
  width:100%!important;height:126px!important;object-fit:cover!important;
}
.answerGraphic.realGraphic{
  border-radius:18px;
  width:96px!important;height:96px!important;object-fit:cover!important;
  box-shadow:0 6px 16px rgba(54,70,105,.18)
}
.footer{background-image:linear-gradient(rgba(21,102,177,.88),rgba(21,102,177,.88)),url("assets/real/footer-real.jpg");background-size:cover;background-position:center}

.choiceAudio{cursor:pointer!important;opacity:1!important}
.choiceAudio:disabled{opacity:1!important}
.explain.show{font-size:18px;border:3px solid #e5ebf8}

/* Final illustrated art direction */
.premiumHero,.hero{
  background-image:linear-gradient(90deg,rgba(24,75,150,.18),rgba(92,61,170,.06),transparent),url("assets/illustrated/hero-school.jpg")!important;
  background-size:cover!important;
  background-position:center!important;
  min-height:470px!important;
}
.heroOverlay{background:linear-gradient(90deg,rgba(27,75,150,.62) 0%,rgba(62,68,166,.28) 48%,transparent 73%);border-radius:28px}
.catGraphic{
  width:100%!important;height:150px!important;object-fit:cover!important;
  border-radius:22px!important;
  box-shadow:0 10px 24px rgba(50,70,110,.18)!important;
}
.cat{min-height:218px!important;background:linear-gradient(180deg,#fff,#fffdf5)!important}
.answerGraphic.illustratedGraphic{
  width:96px!important;height:96px!important;object-fit:cover!important;
  border-radius:20px!important;
  box-shadow:0 7px 17px rgba(50,70,105,.18)!important;
}
.quizStage,.quizCard{background:linear-gradient(180deg,#fffef9,#fff8ec)!important}
.quizStage:before{
  content:"";display:block;position:absolute;inset:0;
  background:url("assets/illustrated/schoolyard.jpg") center/cover no-repeat;
  opacity:.08;pointer-events:none;border-radius:28px
}
.quizStage{position:relative;overflow:hidden}
.footer{background:linear-gradient(180deg,#1d76bf,#145c9d)!important}
@media(max-width:700px){
 .premiumHero,.hero{min-height:370px!important;background-position:55% center!important}
 .catGraphic{height:120px!important}
 .cat{min-height:190px!important}
 .answerGraphic.illustratedGraphic{width:76px!important;height:76px!important}
}

/* ===== FINAL CUTE UI 2026 ===== */
.srOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand img{width:min(320px,44vw);height:92px;object-fit:contain;border-radius:22px}
.hero,.premiumHero{
  background-image:url("assets/finalart/hero.jpg")!important;
  background-size:cover!important;background-position:center!important;
  min-height:385px!important;border:5px solid #fff!important;
  box-shadow:0 14px 0 rgba(91,157,215,.12),0 22px 40px rgba(48,91,132,.16)!important
}
.heroOverlay{height:100%;display:flex;align-items:flex-end;padding:0 26px 25px!important;background:linear-gradient(180deg,transparent 54%,rgba(29,76,143,.18) 100%)!important;width:100%!important}
.heroOverlay>*:not(.heroBtns){display:none!important}
.heroBtns{width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important}
.heroBtn{min-height:62px!important;border-radius:20px!important;font-size:18px!important;text-shadow:none!important}
.catgrid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important;align-items:stretch}
.cat{padding:0!important;min-height:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:hidden!important;border-radius:24px!important;transition:.18s transform,.18s filter}
.cat:hover{transform:translateY(-4px);filter:brightness(1.02)}
.catGraphic{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:24px!important;display:block!important;box-shadow:0 10px 22px rgba(53,74,111,.16)!important}
.quizStage{background:linear-gradient(145deg,#fffbea,#effff6)!important;border:4px solid rgba(255,255,255,.9)!important;box-shadow:0 18px 36px rgba(50,84,112,.12)!important}
.quizCard{border:5px solid #ffd5e5!important;background:linear-gradient(180deg,#fff,#fffdf7)!important}
.question{font-size:30px!important;color:#26334d!important}
.quizHead>div:first-child>div:first-child{color:#f25385!important;background:#fff1f5;display:inline-block;padding:7px 12px;border-radius:999px}
.visual{background:linear-gradient(180deg,#eef9ff,#fff)!important;border:3px dashed #cfe0ef!important}
.choices{gap:14px!important}
.choiceWrap{grid-template-columns:minmax(0,1fr) 62px!important}
.choiceWrap .choice{
  border:4px solid #e1e8f3!important;border-radius:24px!important;min-height:112px!important;
  box-shadow:0 8px 0 #e9eef5!important;background:linear-gradient(180deg,#fff,#fffaf5)!important;
  transition:.15s transform,.15s border-color
}
.choiceWrap .choice:active{transform:translateY(3px)}
.choiceWrap .choice.correct{border-color:#48bd73!important;background:#eafff1!important;box-shadow:0 8px 0 #cfeeda!important}
.choiceWrap .choice.wrong{border-color:#f06c80!important;background:#fff0f3!important;box-shadow:0 8px 0 #f4cbd3!important}
.choiceAudio{
  border-radius:20px!important;border:3px solid #fff!important;background:linear-gradient(#e9f8ff,#ccefff)!important;
  box-shadow:0 7px 0 #c5e2f4!important;font-size:25px!important;opacity:1!important
}
.choiceAudio:disabled{opacity:1!important}
.choiceNum{width:40px!important;height:40px!important;flex-basis:40px!important;font-size:20px!important;background:#eef2ff!important}
.choiceText{font-size:22px!important}
.balloonArt{
  --balloon:#ff5c6c;display:inline-block;width:72px;height:86px;border-radius:52% 52% 48% 48%;
  background:radial-gradient(circle at 33% 25%,rgba(255,255,255,.8) 0 10%,transparent 11%),var(--balloon);
  box-shadow:inset -8px -10px 0 rgba(0,0,0,.08),0 7px 13px rgba(58,73,110,.14);position:relative;flex:0 0 72px;margin-right:10px
}
.balloonArt:after{content:"";position:absolute;left:34px;top:83px;width:3px;height:28px;background:#7f7f8c}
.numberArt{
  display:grid;place-items:center;width:78px;height:78px;border-radius:22px;
  background:linear-gradient(145deg,#fff1a7,#ffd451);color:#e47823;font-size:38px;font-weight:900;
  box-shadow:0 7px 0 #e6b933;flex:0 0 78px;margin-right:10px
}
.answerGraphic{width:94px!important;height:94px!important;object-fit:contain!important;border-radius:18px!important}
.explain.show{display:flex!important;gap:6px;flex-direction:column;border:0!important;border-radius:20px!important;padding:15px 18px!important;font-size:18px!important}
.explain.good{background:#eafff2!important;color:#177346!important;box-shadow:inset 0 0 0 3px #bfead0}
.explain.retry{background:#fff4df!important;color:#8b5a16!important;box-shadow:inset 0 0 0 3px #ffe0a5}
.explain b{font-size:21px}.explain span{line-height:1.55}
.quizMascot{width:112px;height:112px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 10px;border:5px solid #fff;box-shadow:0 8px 18px rgba(48,78,113,.15)}
.tip{background:linear-gradient(145deg,#e9f8ff,#f5fdff)!important;border:2px solid #d5edf8!important}
.adzone{min-height:120px!important;background:linear-gradient(90deg,#f9efff,#fff9ef)!important;border:3px dashed #a97ce9!important;margin-top:25px!important}
@media(max-width:1050px){
  .catgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .heroBtns{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:700px){
  .brand img{width:225px;height:72px}
  .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .hero,.premiumHero{min-height:300px!important}
  .heroBtns{grid-template-columns:1fr 1fr!important}
  .heroBtn{font-size:14px!important;min-height:54px!important}
  .choiceWrap{grid-template-columns:minmax(0,1fr) 52px!important}
  .choiceWrap .choice{min-height:98px!important}
  .choiceText{font-size:19px!important}
  .balloonArt{width:58px;height:68px;flex-basis:58px}.balloonArt:after{left:28px;top:65px}
  .numberArt{width:62px;height:62px;flex-basis:62px;font-size:30px}
}

/* ===== CLEAN QUIZ PATCH: no cropped/superimposed artwork ===== */
#quiz .quizStage{
  background:linear-gradient(180deg,#fffdf4 0%,#f4fff5 100%)!important;
  overflow:visible!important;
}
#quiz .quizStage:before{display:none!important;content:none!important;background:none!important}
#quiz .quizCard{
  position:relative;z-index:1;background:#fff!important;
  border:5px solid #ffd7e5!important;
}
#quiz .side{position:relative;z-index:1;background:#fff!important}
#quiz .visual{
  background:linear-gradient(180deg,#f4fbff,#fff)!important;
  border:3px dashed #cbddeb!important;
  min-height:115px;display:flex;align-items:center;justify-content:center;
  overflow:hidden
}
#quiz .questionGraphic{max-width:100%;max-height:210px;object-fit:contain}
#quiz .choice{
  display:flex!important;align-items:center!important;gap:14px!important;
  min-width:0!important;overflow:hidden!important;text-align:left!important
}
#quiz .answerGraphic.cleanGraphic{
  width:82px!important;height:82px!important;object-fit:contain!important;
  flex:0 0 82px!important;border-radius:16px!important;
  background:#fff!important;box-shadow:none!important
}
#quiz .choiceText{
  min-width:0!important;word-break:normal!important;overflow-wrap:break-word!important;
  white-space:normal!important;line-height:1.35!important;
  writing-mode:horizontal-tb!important;text-orientation:mixed!important
}
#quiz .choices{align-items:stretch}
#quiz .choiceWrap{min-width:0}
#quiz .choiceNum{flex:0 0 40px!important}
@media(max-width:760px){
 #quiz .choices{grid-template-columns:1fr!important}
 #quiz .answerGraphic.cleanGraphic{width:68px!important;height:68px!important;flex-basis:68px!important}
 #quiz .choiceWrap .choice{min-height:90px!important}
}

/* ===== V14 EXACT REFERENCE HOME ===== */
body.homeReferenceMode{
  background:#eaf8ff!important;
}
body.homeReferenceMode .topbar,
body.homeReferenceMode .footer{
  display:none!important;
}
body.homeReferenceMode .wrap{
  max-width:none!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
}
#home.page.active{
  padding:0!important;
  margin:0!important;
  max-width:none!important;
  background:#eaf8ff!important;
}
.v14ReferenceHome{
  position:relative;
  width:min(100%,1536px);
  margin:0 auto;
  line-height:0;
  background:#79ccf5;
  overflow:hidden;
}
.v14HomeImage{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
.v14Hotspot{
  position:absolute;
  z-index:5;
  border:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
  cursor:pointer;
  border-radius:18px;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.v14Hotspot:hover{
  background:rgba(255,255,255,.10)!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.65)!important;
}
.v14Hotspot:active{
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.92)!important;
  transform:scale(.985);
}

/* top nav positions, based on 1536×1024 approved reference */
.top-home{left:27.2%;top:1.8%;width:9%;height:10.5%}
.top-practice{left:36.4%;top:1.8%;width:10.2%;height:10.5%}
.top-daily{left:46.7%;top:1.8%;width:9.3%;height:10.5%}
.top-mock{left:56.1%;top:1.8%;width:9.8%;height:10.5%}
.top-score{left:66%;top:1.8%;width:11%;height:10.5%}
.top-rank{left:77.2%;top:1.8%;width:7%;height:10.5%}

/* main action cards */
.main-daily{left:3.3%;top:49.6%;width:23.8%;height:10.1%}
.main-practice{left:28%;top:49.6%;width:21.7%;height:10.1%}
.main-mock{left:50.2%;top:49.6%;width:21.1%;height:10.1%}
.main-mistakes{left:72%;top:49.6%;width:23.3%;height:10.1%}

/* subject cards */
.cat-1{left:3.3%;top:67.1%;width:7.8%;height:9.2%}
.cat-2{left:11.2%;top:67.1%;width:7.2%;height:9.2%}
.cat-3{left:18.6%;top:67.1%;width:7.2%;height:9.2%}
.cat-4{left:26%;top:67.1%;width:7.2%;height:9.2%}
.cat-5{left:33.4%;top:67.1%;width:7.2%;height:9.2%}
.cat-6{left:40.8%;top:67.1%;width:7.1%;height:9.2%}

.cat-7{left:3.3%;top:77.5%;width:7.8%;height:9.4%}
.cat-8{left:11.2%;top:77.5%;width:7.2%;height:9.4%}
.cat-9{left:18.6%;top:77.5%;width:7.2%;height:9.4%}
.cat-10{left:26%;top:77.5%;width:7.2%;height:9.4%}
.cat-11{left:33.4%;top:77.5%;width:7.2%;height:9.4%}

.progress-report{left:54.8%;top:84.2%;width:11.6%;height:4.2%}
.new-player{left:6.3%;top:91.4%;width:16%;height:6.4%}
.delete-player{left:24.7%;top:91.4%;width:16.7%;height:6.4%}

.v14HomeAd{
  width:min(calc(100% - 24px),970px)!important;
  margin:16px auto 24px!important;
  min-height:100px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  background:#faf4ff!important;
  border:3px dashed #a985df!important;
  color:#7453b7!important;
  border-radius:18px!important;
}

@media(max-width:700px){
  .v14ReferenceHome{
    width:100%;
  }
  .v14Hotspot{
    border-radius:10px;
  }
  .v14HomeAd{
    width:calc(100% - 14px)!important;
    min-height:82px!important;
    margin:10px auto 16px!important;
  }
}

/* V21: persistent bottom ad area on quiz page */
.quizAdzone{display:flex!important;min-height:120px;margin:26px auto 10px;max-width:970px;border:2px dashed #70a9ff;border-radius:22px;background:rgba(255,255,255,.92);align-items:center;justify-content:center;flex-direction:column;gap:5px;color:#52627b;box-sizing:border-box}
.quizAdzone b{font-size:clamp(18px,2vw,28px);color:#334155}.quizAdzone small{font-size:14px;text-align:center;padding:0 14px}
@media(max-width:700px){.quizAdzone{min-height:100px;margin:18px 12px 8px;border-radius:18px}}