[hidden]{display:none!important}
.screen{padding:26px 0}
.eyebrow{font-family:var(--hz);color:var(--teal);font-size:22px}
h1{font-size:clamp(30px,4.6vw,46px);font-weight:800;line-height:1.1;margin-top:4px}
.lead{color:var(--muted);max-width:40em;margin:10px 0 0}
.panel{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:20px;margin-top:20px;display:grid;gap:14px}
.panel h2{font-size:16px;font-weight:800}
.how{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px}
.how b{color:var(--ink)}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted);font-size:14px}
.zh{font-family:var(--kai)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.bo-bar{margin-top:22px;padding:14px 18px;border-radius:18px;background:var(--lav-s);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:15px}
.bo-bar b{font-weight:400;color:var(--lav);font-size:19px}.bo-bar a{color:var(--lav);font-weight:700;font-size:14.5px}
/* bản đồ ải */
.ai{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:center;border:2px solid var(--line);border-radius:18px;padding:14px 16px;background:var(--ground)}
.ai.on{border-color:var(--teal);background:var(--teal-s)}
.ai .no{font-family:var(--hz);font-size:30px;color:var(--teal);grid-row:span 2}
.ai b{font-size:17px}.ai .zh{font-size:22px}
.ai .st{display:flex;gap:2px}
.ai.off{opacity:.55}
.huys{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.huy{display:flex;gap:8px;align-items:center;background:var(--ground);border-radius:12px;padding:8px 12px;font-size:13.5px}
.huy .lli{width:26px;height:26px;flex:none;color:var(--faint)}
.huy.got{background:var(--butter-s)}.huy.got .lli{color:var(--butter)}
.huy b{display:block}.huy .zh{font-size:18px}
.mons{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.mons div{background:var(--ground);border-radius:14px;padding:6px;text-align:center;font-size:12.5px;font-weight:700}
.mons svg{width:72px;height:72px}
/* chọn sách, huy hiệu theo bài */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:var(--ground);color:var(--ink);font:inherit;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;text-align:left}
.chip[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-s);color:var(--teal)}
.chip small{font-weight:400;color:var(--muted);margin-left:6px}
.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0;border-top:1px solid var(--line)}
.hrow b{font-size:13px;color:var(--muted);min-width:48px}
.hb{display:inline-flex;align-items:center;gap:4px;background:var(--ground);border-radius:99px;padding:3px 10px 3px 6px;font-size:15px;color:var(--faint)}
.hb .lli{width:18px;height:18px}.hb.got{background:var(--butter-s);color:var(--butter)}.hb .zh{font-size:17px}
/* chơi */
#play{padding:12px 0 20px;user-select:none;-webkit-user-select:none}
.hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:800;font-size:15px}
.hud .hearts{display:flex;gap:2px}.hud .hearts .lli{width:26px;height:26px}
.hud .xu{display:flex;align-items:center;gap:4px;color:var(--butter)}.hud .xu .lli{width:22px;height:22px}
.hud .combo{color:var(--peach);display:flex;align-items:center;gap:2px}
.hud .sp{margin-left:auto}
.hud button{border:0;background:var(--ground2);color:var(--ink);font:inherit;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer}
.pips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.pips i{display:block;height:6px;border-radius:99px;background:var(--ground2)}
.pips i.on{background:var(--teal)}.pips i.done{background:var(--mint)}
/* đấu trường */
.arena{position:relative;height:clamp(190px,34vw,270px);margin-top:10px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,var(--c1),var(--c2));--c1:#b9c8ff;--c2:#e9e1ff;transition:background .4s}
.arena[data-st="1"]{--c1:#ffc7b8;--c2:#ffe9d2}
.arena[data-st="2"]{--c1:#a9e4e4;--c2:#e1f6f0}
.arena[data-st="3"]{--c1:#e9a3a8;--c2:#ffd9b5}
.arena[data-st="6"]{--c1:#b8e8c9;--c2:#e6f7d9}
.arena[data-st="4"]{--c1:#c9b8ff;--c2:#f5d8ee}
:root[data-theme="dark"] .arena{filter:brightness(.72)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .arena{filter:brightness(.72)}}
.arena .gr{position:absolute;left:0;right:0;bottom:0;height:26%;background:repeating-linear-gradient(90deg,#7e6fb8 0 28px,#6f61a8 28px 56px);opacity:.5}
.arena .cl{position:absolute;width:90px;height:26px;border-radius:99px;background:rgba(255,255,255,.7);animation:drift 26s linear infinite}
.arena .cl.b{top:30px;left:-100px}.arena .cl.c{top:70px;left:-100px;animation-duration:38s;animation-delay:-14s;width:60px}
@keyframes drift{to{transform:translateX(900px)}}
.hero,.mon{position:absolute;bottom:14%}
.hero{left:4%;width:clamp(70px,16vw,112px)}
.mon{right:4%;width:clamp(78px,18vw,128px);transform:translateX(calc(var(--ap,0) * -1px))}
.mon.boss{width:clamp(100px,24vw,168px)}
.hero svg,.mon svg{display:block;width:100%;height:auto;overflow:visible}
.hero .hx,.mon .mx{animation:bob 1.6s ease-in-out infinite}
.mon .mx{animation-delay:-.6s}
@keyframes bob{50%{transform:translateY(-6px)}}
.hero .hx.hurt{animation:hurt .5s}
@keyframes hurt{20%{transform:translateX(-14px) rotate(-8deg);filter:brightness(2)}60%{transform:translateX(8px) rotate(4deg)}}
.hero .hx.jump{animation:jump .45s}
@keyframes jump{40%{transform:translate(26px,-18px) rotate(6deg)}}
.mon .mx.hit{animation:mhit .45s}
@keyframes mhit{20%{transform:translateX(16px) scale(.92);filter:brightness(3)}60%{transform:translateX(-6px)}}
.mon .mx.dead{animation:dead .9s forwards}
@keyframes dead{30%{transform:rotate(-14deg) scale(1.1)}100%{transform:translateY(90px) rotate(60deg) scale(.4);opacity:0}}
.mon .mx.spawn{animation:spawn .6s}
@keyframes spawn{from{transform:translateY(-120px) scale(.4);opacity:0}}
.mhp{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:min(70%,360px);display:grid;gap:3px;justify-items:center}
.mhp .nm{font-weight:800;font-size:13px;color:#2B2E45;background:rgba(255,255,255,.8);border-radius:99px;padding:2px 12px}
.mhp .nm .zh{font-family:var(--hz);font-weight:400;margin-right:6px;font-size:15px}
.mhp .bar{width:100%;height:14px;border-radius:99px;background:rgba(43,46,69,.25);overflow:hidden;border:2px solid rgba(255,255,255,.85)}
.mhp .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e0545f,#f08a5d);border-radius:99px;transition:width .4s}
.tbar{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(43,46,69,.22)}
.tbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--teal),var(--mint));transform-origin:left}
.tbar.low i{background:var(--coral)}
.banner{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:4px;background:rgba(43,46,69,.62);color:#fff;z-index:5;animation:ban 1.3s forwards}
.banner .zh{font-family:var(--hz);font-size:clamp(34px,8vw,60px);line-height:1.1}
.banner b{font-size:clamp(15px,3.4vw,20px)}
.banner small{opacity:.85;font-size:14px}
@keyframes ban{0%{opacity:0;transform:scale(1.2)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
.fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.fx .shot{position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--coral);font-family:var(--hz);font-size:28px;box-shadow:0 0 0 4px var(--butter),0 0 18px 6px rgba(255,200,60,.8)}
.fx .dmg{position:absolute;font-weight:800;font-size:22px;color:#fff;text-shadow:0 2px 0 #E0545F,0 0 8px #E0545F;animation:up .9s forwards}
@keyframes up{to{transform:translateY(-46px);opacity:0}}
.fx .sp{position:absolute;width:18px;height:18px;color:var(--butter)}
.arena.shake{animation:shk .4s}
@keyframes shk{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,2px)}}
.arena.flash::after{content:"";position:absolute;inset:0;background:var(--coral);opacity:.35;animation:fl .4s forwards}
@keyframes fl{to{opacity:0}}
/* thẻ câu hỏi */
.card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:18px;margin-top:12px;display:grid;gap:12px}
.prompt{font-weight:800;color:var(--teal);font-size:14.5px}
.vibig{font-size:19px;font-weight:700}
.who{display:inline-block;background:var(--lav-s);color:var(--lav);font-weight:800;font-size:13px;padding:3px 10px;border-radius:99px}
.speech{position:relative;background:var(--lav-s);border-radius:18px;padding:12px 16px;display:grid;gap:6px;justify-items:start}
.speech::before{content:"";position:absolute;right:46px;top:-10px;border:10px solid transparent;border-top:0;border-bottom-color:var(--lav-s)}
.qzh{font-family:var(--kai);font-size:clamp(26px,5vw,36px);line-height:1.3}
.ansrow{min-height:64px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-radius:16px;background:var(--ground2);padding:8px 12px;font-family:var(--kai);font-size:28px}
.ansrow .p{color:var(--muted)}.ansrow .ph{color:var(--faint);font-family:var(--vi);font-size:14px}
.bank{display:flex;flex-wrap:wrap;gap:10px;min-height:56px}
.tile{font-family:var(--kai);font-size:clamp(22px,4.4vw,30px);line-height:1;padding:11px 16px;border-radius:14px;border:0;background:var(--sky);color:#fff;cursor:pointer;box-shadow:0 5px 0 #2569ad;transition:transform .08s}
.ansrow .tile{background:var(--teal);box-shadow:0 5px 0 #0f6f77}
.tile:active{transform:translateY(4px);box-shadow:0 1px 0 #2569ad}
.tile.ok{background:var(--mint);box-shadow:0 5px 0 #1f7a58}
.tile.no{background:var(--coral);box-shadow:0 5px 0 #a93944;animation:shk .4s}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;text-align:left;font-family:var(--kai);font-size:clamp(20px,4vw,26px);padding:12px 16px;border-radius:16px;border:0;background:var(--sky);color:#fff;box-shadow:0 5px 0 #2569ad;cursor:pointer}
.opt:active{transform:translateY(4px);box-shadow:0 1px 0 #2569ad}
.opt .kn{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.28);font:800 13px var(--vi)}
.opt.ok{background:var(--mint);box-shadow:0 5px 0 #1f7a58}
.opt.no{background:var(--coral);box-shadow:0 5px 0 #a93944;animation:shk .4s}
.opts.row{grid-template-columns:repeat(3,1fr)}
.opts.row .opt{justify-content:center;font-size:34px}.opts.row .kn{display:none}
.blank{display:inline-block;min-width:1.6em;border-bottom:4px solid var(--teal);text-align:center;color:var(--teal);animation:blk 1s infinite}
@keyframes blk{50%{border-color:transparent}}
.fb{border-radius:16px;padding:12px 16px;display:grid;gap:4px;font-size:15px;margin-top:12px}
.fb.ok{background:var(--mint-s)}.fb.no{background:var(--coral-s)}
.fb .res{font-weight:800;font-size:16px}
.fb .zh{font-size:24px;line-height:1.3}
.fb .vi{font-style:italic}.fb .py{color:var(--teal);font-weight:700;font-size:14px}
.fb .gr{font-size:13.5px;color:var(--muted)}.fb .gr a{color:var(--teal);font-weight:700}
.spk2{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--ground2);color:var(--ink);font:inherit;font-weight:700;padding:7px 12px;border-radius:99px;cursor:pointer;width:max-content}
/* kết thúc */
.stars{display:flex;gap:4px}.stars .lli{width:44px;height:44px}
.rank{font-weight:800;font-size:20px;color:var(--peach)}
.rank .zh{font-family:var(--hz);font-weight:400;font-size:24px;margin-right:8px}
.review{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.review li{background:var(--ground);border-radius:12px;padding:8px 12px;display:grid}
.review .zh{font-size:22px;line-height:1.25}
.review .py{color:var(--teal);font-weight:700;font-size:13px}
.review a{font-size:13px;color:var(--teal);font-weight:700}
.newhuy{color:var(--butter);font-weight:800}
.xuBig{display:flex;align-items:center;gap:8px;font-size:30px;font-weight:800;color:var(--butter)}.xuBig .lli{width:34px;height:34px}
@media (max-width:640px){.tile{padding:10px 12px}.ansrow,.bank{gap:6px}.ai{grid-template-columns:auto 1fr}.ai .st{grid-column:2}.opts.row .opt{font-size:30px}}
.sent{display:flex;flex-wrap:wrap;gap:2px;font-family:var(--kai);font-size:clamp(26px,5vw,36px);line-height:1.2}
.sent .p{padding:4px 2px}
.tok{font:inherit;padding:4px 6px;border-radius:10px;border:0;background:transparent;color:inherit;cursor:pointer}
.tok:hover:not(:disabled){background:rgba(60,140,220,.18)}
.tok.sel{background:var(--sky);color:#fff}
.tok.bad{background:var(--coral);color:#fff;animation:shk .4s}
.tok.gd{background:var(--mint);color:#fff}