:root{--ink:#f4fbff;--dark:#0c1734;--panel:#172a55;--cyan:#4ce1df;--gold:#ffc844;--red:#ff5c61}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--dark);color:var(--ink);font-family:"Arial Rounded MT Bold","Noto Sans Thai",Tahoma,sans-serif}button{font:inherit;touch-action:manipulation}.shell{min-height:100dvh;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 30%,#244b75 0 12%,transparent 40%),linear-gradient(165deg,#0b1732,#102c4c 55%,#102c42)}.shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(#57e7e522 1px,transparent 1px),linear-gradient(90deg,#57e7e522 1px,transparent 1px);background-size:35px 35px}.top{position:relative;z-index:2;min-height:72px;margin:12px auto;width:min(1500px,calc(100% - 24px));display:grid;grid-template-columns:1fr minmax(220px,1fr) 1fr;align-items:center;gap:16px;padding:10px 18px;border:2px solid #4ce1df88;background:#0d1c3ddd;box-shadow:0 0 25px #4ce1df30;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}.brand{font-weight:900;font-size:clamp(16px,1.8vw,25px)}.brand em{color:var(--gold);font-style:normal}.top-center{text-align:center;font-weight:900}.meter{height:11px;margin-top:5px;border-radius:99px;background:#091126;overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,#ff5864,#ffbf39,#4ce19d);transition:.3s}.tools{display:flex;justify-content:flex-end;align-items:center;gap:8px}.tools button{width:46px;height:46px;border:2px solid #58dfe5;border-radius:12px;color:white;background:#1d3970;cursor:pointer}.content{position:relative;z-index:1;width:min(1480px,calc(100% - 28px));margin:auto;padding:clamp(14px,2.5vw,32px)}.intro{text-align:center;margin:16px auto 26px}.intro small,.section-tag{color:var(--cyan);font-weight:900;letter-spacing:.1em}.intro h1{margin:4px 0;font-size:clamp(32px,5vw,66px);text-shadow:0 4px #081023,0 0 25px #4ce1df55}.intro p{color:#b8cbea}.boss-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.5vw,20px);padding-bottom:28px}.boss{position:relative;min-height:174px;padding:18px;border:2px solid var(--accent);border-radius:20px;color:white;text-align:left;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 38%,#142653),#111e40 70%);box-shadow:inset 0 0 25px #ffffff0c,0 7px 0 color-mix(in srgb,var(--accent) 45%,#071127);cursor:pointer;overflow:hidden}.boss:hover{transform:translateY(-3px);filter:brightness(1.12)}.boss .icon{position:absolute;right:8px;bottom:-4px;font-size:clamp(58px,6vw,90px);filter:drop-shadow(0 5px 0 #0005)}.boss small{color:#dceaff}.boss h2{position:relative;margin:5px 0;font-size:clamp(18px,2vw,26px);max-width:72%}.boss p{position:relative;margin:0;color:#d8e9ff;font-size:13px;max-width:68%;line-height:1.35}.boss.done:after{content:"✓ พิชิตแล้ว";position:absolute;top:9px;right:9px;padding:5px 8px;border-radius:10px;background:#2bd077;color:#072c21;font-size:11px;font-weight:900}.battle{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(480px,1.7fr) minmax(260px,.8fr);gap:clamp(12px,2vw,26px);min-height:calc(100dvh - 118px)}.boss-stage,.question,.answers{border:2px solid #4ce1df66;border-radius:24px;background:#14274edd;box-shadow:inset 0 0 35px #4ce1df0b,0 8px 24px #0004}.boss-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px}.boss-stage .monster{font-size:clamp(100px,15vw,220px);filter:drop-shadow(0 10px 0 #0005)}.boss-stage h2{margin:12px 0 2px}.hp{width:100%;height:16px;margin:10px 0;border:2px solid #fff5;border-radius:99px;background:#080e20;overflow:hidden}.hp i{display:block;height:100%;background:linear-gradient(90deg,#ff515c,#ffae35);transition:.35s}.question{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(24px,4vw,54px)}.question h1{margin:14px 0;font-size:clamp(28px,4vw,58px);line-height:1.25}.visual{font-size:clamp(26px,3.5vw,48px);letter-spacing:5px;line-height:1.4}.hint{color:#a8c5e2;line-height:1.6}.answers{display:flex;flex-direction:column;justify-content:center;gap:13px;padding:clamp(16px,2.5vw,30px)}.answers button{min-height:72px;border:2px solid #75ebee;border-radius:16px;color:#163452;background:linear-gradient(#f8ffff,#c9f4f3);box-shadow:0 6px 0 #348ca7;font-size:clamp(20px,2.2vw,31px);font-weight:900;cursor:pointer}.answers button:hover{filter:brightness(1.08);transform:translateY(-2px)}.feedback{min-height:50px;display:grid;place-items:center;padding:8px;text-align:center;color:#c4d9ef}.overlay{position:fixed;z-index:100;inset:0;display:none;place-items:center;padding:20px;background:#071128ee}.overlay.show{display:grid}.overlay article{width:min(580px,94vw);padding:clamp(28px,5vw,55px);text-align:center;border:3px solid var(--cyan);border-radius:28px;background:#152b55;box-shadow:0 0 45px #4ce1df55}.overlay h1{font-size:clamp(32px,6vw,58px);margin:10px}.overlay p{line-height:1.6;color:#c7dbf3}.overlay a,.primary{display:inline-block;border:0;border-radius:15px;padding:15px 28px;color:#17233d;background:linear-gradient(#ffe46e,#ffae28);box-shadow:0 6px 0 #bd6816;text-decoration:none;font-weight:900;cursor:pointer}.big-icon{font-size:clamp(70px,12vw,120px)}
@media(max-width:1100px){.boss-grid{grid-template-columns:repeat(3,1fr)}.battle{grid-template-columns:.75fr 1.45fr}.answers{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr)}.feedback{grid-column:1/-1}.answers button{min-height:62px}}
@media(max-width:720px){.shell{overflow:auto}.top{grid-template-columns:1fr auto}.top-center{grid-row:2;grid-column:1/-1}.brand span{display:none}.content{width:calc(100% - 16px);padding:10px}.boss-grid{grid-template-columns:repeat(2,1fr);gap:10px}.boss{min-height:150px;padding:13px}.boss p{display:none}.battle{grid-template-columns:1fr}.boss-stage{min-height:190px}.boss-stage .monster{font-size:100px}.question{min-height:280px}.answers{grid-column:auto;grid-template-columns:repeat(2,1fr);position:sticky;bottom:7px;z-index:3}.feedback{grid-column:1/-1}.answers button{min-height:58px}}
@media(max-width:420px){.boss-grid{grid-template-columns:1fr}.boss{min-height:132px}.boss .icon{font-size:70px}.question h1{font-size:29px}}
@media(max-height:500px) and (orientation:landscape){.top{min-height:54px;margin:5px auto;padding:5px 12px}.top-center{grid-row:auto;grid-column:auto}.tools button{width:40px;height:40px}.content{padding:6px}.intro{margin:5px auto 10px}.intro p{display:none}.intro h1{font-size:30px}.boss-grid{grid-template-columns:repeat(5,1fr);gap:7px}.boss{min-height:110px;padding:9px}.boss h2{font-size:15px}.boss p{display:none}.boss .icon{font-size:48px}.battle{grid-template-columns:180px 1fr 250px;min-height:calc(100dvh - 66px);gap:8px}.boss-stage{padding:8px}.boss-stage .monster{font-size:72px}.boss-stage h2{font-size:16px}.question{padding:12px}.question h1{font-size:25px}.visual{font-size:23px}.hint{font-size:12px}.answers{grid-column:auto;display:flex;position:static;padding:9px;gap:7px}.answers button{min-height:48px;font-size:19px}.feedback{font-size:11px;min-height:30px}}
.lives{padding:7px 10px;border:1px solid #ff7a80;border-radius:12px;background:#481d35;white-space:nowrap}