*{box-sizing:border-box;margin:0}html,body{width:100%;height:100%;overflow:hidden;background:#05020c;font-family:"Be Vietnam Pro",system-ui,sans-serif;color:#fff}
#c{position:fixed;left:var(--cx);top:var(--cy);width:var(--cW);height:var(--cH);display:block}
#hud{position:fixed;left:calc(var(--x) + var(--sx));top:var(--y);width:calc(var(--W) - 2*var(--sx));height:var(--H);pointer-events:none}
#hud::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(5,2,12,.55) 100%)}
#top{position:absolute;top:calc(2.4*var(--vh));left:calc(2*var(--vw));right:calc(2*var(--vw));display:flex;justify-content:space-between;align-items:center;z-index:2}
#brand{font-weight:900;font-size:calc(4.4*var(--vh));letter-spacing:.04em;font-style:italic;text-shadow:0 0 10px #ff2fa8,0 0 30px #ff2fa8aa}#brand span{color:#3ff0ff;text-shadow:0 0 10px #3ff0ff,0 0 30px #3ff0ffaa}
#live{background:rgba(10,4,24,.7);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);padding:calc(.8*var(--vh)) calc(1.6*var(--vh));border-radius:99px;font-size:calc(2.1*var(--vh));font-weight:700}#live i{display:inline-block;width:calc(1.2*var(--vh));height:calc(1.2*var(--vh));border-radius:50%;background:#ff3355;margin-right:calc(.7*var(--vh));box-shadow:0 0 10px #ff3355;animation:bl 1s infinite}
@keyframes bl{50%{opacity:.3}}
#ailabel{position:absolute;top:calc(9.4*var(--vh));left:calc(2*var(--vw));background:linear-gradient(90deg,rgba(63,240,255,.22),rgba(157,107,255,.22));border:1px solid rgba(63,240,255,.7);color:#dffcff;border-radius:99px;padding:calc(.5*var(--vh)) calc(1.4*var(--vh));font-size:calc(1.9*var(--vh));font-weight:800;z-index:2}
#howto{position:absolute;bottom:calc(7*var(--vh));left:0;right:0;text-align:center;font-size:calc(2*var(--vh));font-weight:600;color:#e8e2ff;text-shadow:0 2px 6px #000;z-index:2}#howto b{color:#ffd23f;font-weight:900}
#ticker{position:absolute;bottom:0;left:0;right:0;height:calc(5.4*var(--vh));background:linear-gradient(90deg,#ff2fa8,#7b2cff 50%,#18c6e0);overflow:hidden;display:flex;align-items:center;box-shadow:0 -4px 30px #7b2cff88;z-index:2}
#tk{white-space:nowrap;font-size:calc(2.3*var(--vh));font-weight:800;padding-left:100%;animation:tk 32s linear infinite}@keyframes tk{to{transform:translateX(-100%)}}
#tk span{margin-right:calc(5*var(--vh))}#tk em{font-style:normal;color:#fff6a8}
#feed{position:absolute;left:calc(1.4*var(--vw));bottom:calc(12*var(--vh));width:calc(22*var(--vw));display:flex;flex-direction:column;gap:calc(.6*var(--vh));z-index:2}
.fi{background:rgba(10,4,24,.72);backdrop-filter:blur(4px);border-left:4px solid #ff2fa8;padding:calc(.65*var(--vh)) calc(1.1*var(--vh));border-radius:0 10px 10px 0;font-size:calc(1.95*var(--vh));font-weight:500;animation:in .35s cubic-bezier(.2,1.4,.4,1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi b{font-weight:800;color:#ffd23f;margin-right:calc(.4*var(--vh))}.fi i{font-style:normal;color:#9ff9ff;font-weight:800}
.fi.gift{border-color:#ffd23f;background:linear-gradient(90deg,rgba(255,210,63,.28),rgba(10,4,24,.72))}.fi.join{border-color:#3ff0ff;opacity:.85}.fi.vA{border-color:#ff2fa8;box-shadow:inset 6px 0 12px -6px #ff2fa8}.fi.vB{border-color:#3ff0ff;box-shadow:inset 6px 0 12px -6px #3ff0ff}
@keyframes in{from{transform:translateX(-40px);opacity:0}}
#banner{position:absolute;bottom:calc(15*var(--vh));left:50%;transform:translate(-50%,30px) scale(.7);opacity:0;display:flex;align-items:center;gap:calc(2*var(--vh));padding:calc(1.4*var(--vh)) calc(4*var(--vh)) calc(1.4*var(--vh)) calc(1.6*var(--vh));border-radius:99px;
 background:linear-gradient(90deg,#ff2fa8,#ff8a3f 60%,#ffd23f);box-shadow:0 0 40px #ff2fa8aa,0 0 0 3px #fff3 inset;transition:.45s cubic-bezier(.2,1.5,.4,1);white-space:nowrap;z-index:3}
#banner.on{opacity:1;transform:translate(-50%,0) scale(1)}#banner .bi{font-size:calc(6*var(--vh));filter:drop-shadow(0 0 8px #fff8)}#banner b{display:block;font-size:calc(4.2*var(--vh));font-weight:900;line-height:1.05;text-shadow:0 2px 8px #0005}#banner small{display:block;font-size:calc(2.2*var(--vh));font-weight:700}
#banner.mega{background:linear-gradient(90deg,#7b2cff,#ff2fa8,#ffd23f,#3ff0ff);background-size:300% 100%;animation:mg 1.5s linear infinite}@keyframes mg{to{background-position:300% 0}}
body.portrait #feed{width:calc(62*var(--vw));bottom:calc(13*var(--vh))}body.portrait #brand{font-size:calc(3.1*var(--vh))}body.portrait #howto{font-size:calc(1.65*var(--vh));bottom:calc(6.4*var(--vh));padding:0 calc(5*var(--vw))}
body.portrait #banner{bottom:auto;top:57%;}body.portrait #banner b{font-size:calc(3*var(--vh))}body.portrait #banner small{font-size:calc(1.6*var(--vh))}body.portrait #banner .bi{font-size:calc(4.4*var(--vh))}
body.portrait #ailabel{top:calc(7*var(--vh));font-size:calc(1.5*var(--vh))}body.portrait .fi{font-size:calc(1.65*var(--vh))}body.portrait #live{font-size:calc(1.6*var(--vh))}body.portrait #tk{font-size:calc(1.9*var(--vh))}

#battle{position:absolute;top:calc(8.6*var(--vh));left:50%;transform:translateX(-50%);width:min(calc(92*var(--vw)),calc(78*var(--vh)));background:rgba(8,4,20,.82);border:2px solid rgba(255,255,255,.16);border-radius:calc(2.2*var(--vh));padding:calc(1*var(--vh)) calc(1.4*var(--vh)) calc(1.2*var(--vh));z-index:2;box-shadow:0 8px 30px #0008;opacity:0;transition:.3s}
#battle.on{opacity:1}#battle .bt{text-align:center;font-size:calc(1.6*var(--vh));font-weight:900;letter-spacing:.06em;color:#ffd23f}#battle .bt span{color:#bfefff;font-weight:700;letter-spacing:0}
#battle .br{display:flex;align-items:center;gap:calc(1*var(--vh));margin:calc(.6*var(--vh)) 0}#battle .bs{flex:1;display:flex;align-items:center;gap:calc(.8*var(--vh));min-width:0}#battle .B{justify-content:flex-end}
#battle em{font-style:normal;font-weight:900;font-size:calc(3.2*var(--vh));width:calc(4.4*var(--vh));height:calc(4.4*var(--vh));display:grid;place-items:center;border-radius:calc(1.2*var(--vh));flex:none}#battle .A em{background:#ff2fa8}#battle .B em{background:#22d8ec;color:#04202a}
#battle .bs b{font-size:calc(1.9*var(--vh));font-weight:800;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;min-width:0;flex:1}#battle .B b{text-align:right}
#battle .bs i{font-style:normal;font-weight:900;font-size:calc(2.6*var(--vh))}#battle .A i{color:#ff7ad0}#battle .B i{color:#7ff6ff}#battle .vs{font-weight:900;font-size:calc(2*var(--vh));color:#ffd23f;font-style:italic}
#battle .bar{position:relative;height:calc(2.8*var(--vh));border-radius:99px;overflow:hidden;display:flex;background:#222}#bfa{background:linear-gradient(90deg,#ff2fa8,#ff7ad0);transition:width .4s}#bfb{flex:1;background:linear-gradient(90deg,#9ff9ff,#22d8ec)}
#battle .bar span{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-size:calc(1.6*var(--vh));font-weight:900;color:#1a0630;padding:0 calc(1.2*var(--vh))}#bpb{right:0}
#battle.pa .A em,#battle.pb .B em{animation:pp .5s}@keyframes pp{40%{transform:scale(1.35)}}
#gcard{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;text-align:center;padding:calc(2.2*var(--vh)) calc(4*var(--vh)) calc(2*var(--vh));border-radius:calc(3*var(--vh));background:linear-gradient(160deg,#ff2fa8,#9d4bff 55%,#2fb8ff);border:3px solid #fff;box-shadow:0 0 0 6px #ffd23f88,0 20px 60px #000a;transition:.45s cubic-bezier(.2,1.6,.4,1);z-index:4;min-width:min(calc(70*var(--vw)),calc(44*var(--vh)))}
#gcard.on{opacity:1;transform:translate(-50%,-50%) scale(1)}#gcard.mega{background:linear-gradient(160deg,#ffd23f,#ff8a3f 40%,#ff2fa8 75%,#7b2cff)}
#gcard .gi{font-size:calc(6*var(--vh));line-height:1;filter:drop-shadow(0 4px 10px #0006);animation:gb .8s ease-in-out infinite alternate}@keyframes gb{to{transform:scale(1.12) rotate(6deg)}}
#gcard .gn{font-size:calc(3.6*var(--vh));font-weight:900;margin-top:calc(.8*var(--vh));text-shadow:0 2px 0 #0004;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(80*var(--vw))}#gcard .gg{font-size:calc(2.1*var(--vh));font-weight:800;opacity:.95}
#gcard .gv{display:inline-block;margin-top:calc(1.2*var(--vh));background:#fff;color:#2a1600;font-weight:900;font-size:calc(1.8*var(--vh));padding:calc(.6*var(--vh)) calc(1.6*var(--vh));border-radius:99px}
body.portrait #battle{top:calc(6.6*var(--vh));width:calc(94*var(--vw))}body.portrait #ailabel{top:auto;bottom:calc(10.6*var(--vh));left:auto;right:calc(3*var(--vw))}
#hud::after{background:radial-gradient(ellipse at center,transparent 65%,rgba(5,2,12,.35) 100%)}

#unmute{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;font:900 calc(3*var(--vh)) 'Be Vietnam Pro',system-ui;padding:calc(2*var(--vh)) calc(4*var(--vh));border:0;border-radius:99px;background:#ff2fa8;color:#fff;box-shadow:0 0 40px #ff2fa8;display:none;cursor:pointer}#unmute.on{display:block}
#np{position:absolute;right:calc(2*var(--vw));bottom:calc(11*var(--vh));z-index:3;max-width:calc(44*var(--vw));background:rgba(8,4,20,.82);border:2px solid rgba(255,210,63,.5);border-radius:calc(1.6*var(--vh));padding:calc(1*var(--vh)) calc(1.6*var(--vh));font-family:'Be Vietnam Pro',system-ui;color:#fff;opacity:0;transition:.3s}#np.on{opacity:1}
#np .l{font-size:calc(1.6*var(--vh));font-weight:900;color:#ffd23f}#np .t{font-size:calc(2.4*var(--vh));font-weight:900;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#np .t span{font-size:calc(1.5*var(--vh));background:#9d6bff;border-radius:99px;padding:calc(.2*var(--vh)) calc(.9*var(--vh));vertical-align:middle;margin-left:calc(.6*var(--vh))}
#np .ai{font-size:calc(1.5*var(--vh));color:#bfefff;font-weight:700;margin-top:calc(.3*var(--vh))}#np .q{font-size:calc(1.4*var(--vh));color:#e8e2ff;margin-top:calc(.3*var(--vh))}
body.portrait #np{max-width:calc(90*var(--vw));left:calc(5*var(--vw));bottom:calc(16*var(--vh))}
html{--vh:1vh;--vw:1vw;--x:0px;--y:0px;--W:100vw;--H:100vh;--sx:0px}
body.portrait #battle{width:100%;left:0;transform:none}body.portrait #np{left:0;right:0;max-width:none}body.portrait #howto{padding:0}
#howto,#ticker,#feed,#np,#battle,#top{max-width:100%}#tk{max-width:100%}

#guide{position:absolute;left:50%;top:calc(27*var(--vh));transform:translateX(-50%) scale(.9);width:calc(84*var(--vw));background:rgba(10,4,26,.9);border:3px solid #ffd23f;border-radius:calc(2.4*var(--vh));padding:calc(1.6*var(--vh)) calc(2*var(--vh));z-index:4;opacity:0;transition:opacity .5s,transform .5s;box-shadow:0 0 40px #ff2fa8aa}
#guide.on{opacity:1;transform:translateX(-50%) scale(1);animation:gpulse 1.6s ease-in-out infinite}
@keyframes gpulse{50%{box-shadow:0 0 70px #ffd23f,0 0 20px #ff2fa8;border-color:#ff7ad1}}
#guide .h{text-align:center;font-size:calc(3.6*var(--vh));font-weight:900;color:#ffd23f;letter-spacing:.06em;margin-bottom:calc(1*var(--vh));text-shadow:0 0 18px #ff2fa8}
#guide .s{display:flex;align-items:center;gap:calc(1.4*var(--vh));margin:calc(1*var(--vh)) 0;font-size:calc(2.9*var(--vh));font-weight:800;line-height:1.15;color:#fff}
#guide .s i{flex:none;width:calc(5*var(--vh));height:calc(5*var(--vh));border-radius:50%;background:linear-gradient(135deg,#ff2fa8,#7b2cff);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:calc(3*var(--vh))}
#guide .s b{color:#ffd23f}#guide .s small{font-size:calc(2.4*var(--vh));color:#bfefff;font-weight:700}
#reqn{position:absolute;left:50%;top:calc(23*var(--vh));transform:translateX(-50%);width:calc(88*var(--vw));background:rgba(8,4,20,.9);border:2px solid #18c6e0;border-radius:calc(1.8*var(--vh));padding:calc(1.2*var(--vh)) calc(1.6*var(--vh));z-index:4;font-size:calc(2.3*var(--vh));font-weight:800;opacity:0;transition:opacity .4s;text-align:center}
#reqn.on{opacity:1}#reqn em{color:#ffd23f;font-style:normal}#reqn small{display:block;font-size:calc(1.7*var(--vh));color:#bfefff;margin-top:calc(.6*var(--vh))}
#reqn .bar{height:calc(1.3*var(--vh));background:#ffffff22;border-radius:99px;margin-top:calc(.8*var(--vh));overflow:hidden}#reqn .bar span{display:block;height:100%;background:linear-gradient(90deg,#18c6e0,#ff2fa8);transition:width .5s linear}
#nudge{position:absolute;left:50%;top:calc(60*var(--vh));transform:translateX(-50%);width:calc(86*var(--vw));background:rgba(40,10,40,.92);border:2px solid #ff7ad1;border-radius:calc(1.6*var(--vh));padding:calc(1*var(--vh)) calc(1.4*var(--vh));font-size:calc(2*var(--vh));font-weight:700;text-align:center;z-index:4;opacity:0;transition:opacity .4s}
#nudge.on{opacity:1}#nudge b{color:#ffd23f}
body:not(.portrait) #guide{left:auto;right:calc(2*var(--vw));transform:none;width:calc(30*var(--vw));top:calc(24*var(--vh))}body:not(.portrait) #guide.on{transform:none}
body:not(.portrait) #reqn,body:not(.portrait) #nudge{width:calc(40*var(--vw))}

#combo{position:absolute;left:50%;top:calc(47*var(--vh));transform:translateX(-50%) scale(.6);font-size:calc(3.4*var(--vh));font-weight:900;color:#fff;text-shadow:0 0 14px #ff2fa8,0 3px 6px #000;white-space:nowrap;opacity:0;z-index:3;pointer-events:none}
#combo{transition:opacity .25s,transform .25s}#combo.on{opacity:1;transform:translateX(-50%) scale(1)}#combo em{font-style:normal;color:#ffd23f;font-size:1.5em}
@keyframes cpop{0%{opacity:0;transform:translateX(-50%) scale(.6)}12%{opacity:1;transform:translateX(-50%) scale(1.15)}25%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(calc(-4*var(--vh)))}}
body.portrait #feed{bottom:calc(29*var(--vh))}
#nudge{top:calc(53*var(--vh))}
/* v9 bar online */
#todo{position:absolute;left:50%;top:calc(7*var(--vh));transform:translateX(-50%);width:calc(92*var(--vw));text-align:center;z-index:4;background:linear-gradient(90deg,rgba(120,20,140,.92),rgba(20,90,170,.92));border:2px solid #fff6;border-radius:calc(1.6*var(--vh));padding:calc(.9*var(--vh)) calc(1.2*var(--vh));font-size:calc(2.3*var(--vh));font-weight:900;color:#fff;text-shadow:0 2px 4px #0008;opacity:0;transition:opacity .3s}
#todo.on{opacity:1}#todo b{color:#ffe14a}#todo u{text-decoration:none;color:#fff;background:#000a;border-radius:8px;padding:0 .4em;font-variant-numeric:tabular-nums}#todo small{display:block;font-size:.62em;font-weight:700;opacity:.85;margin-top:.2em}
#todo.gold{background:linear-gradient(90deg,#b8860b,#ffd23f,#b8860b);color:#2a1600;text-shadow:none;animation:tdp 1s infinite}#todo.gold b{color:#7a0040}
#todo.war{background:linear-gradient(90deg,#ff2fa8,#22d8ec)}#todo.heart{background:linear-gradient(90deg,#ff2f6d,#ff7ad0)}@keyframes tdp{50%{transform:translateX(-50%) scale(1.04)}}
#todo .pb{height:calc(1.2*var(--vh));background:#0006;border-radius:99px;margin-top:calc(.5*var(--vh));overflow:hidden}#todo .pb span{display:block;height:100%;background:#fff;transition:width .4s}
#battle{top:calc(13.2*var(--vh))!important}
#lb,#menu{position:absolute;top:calc(13.2*var(--vh));z-index:3;background:rgba(8,4,20,.8);border:2px solid rgba(255,210,63,.55);border-radius:calc(1.4*var(--vh));padding:calc(.6*var(--vh)) calc(.9*var(--vh));font-size:calc(1.45*var(--vh));color:#fff;opacity:0;transition:opacity .4s}
#lb{right:calc(2*var(--vw));width:calc(38*var(--vw))}#menu{left:calc(2*var(--vw));width:calc(44*var(--vw));border-color:rgba(63,240,255,.5)}
#lb.on,#menu.on{opacity:1}#lb .h,#menu .h{font-weight:900;color:#ffd23f;font-size:calc(1.5*var(--vh));margin-bottom:calc(.3*var(--vh))}#menu .h{color:#7ff6ff}#menu .h small{float:right;opacity:.7}
#lb .r,#menu .r{display:flex;align-items:center;gap:calc(.6*var(--vh));padding:calc(.15*var(--vh)) 0;white-space:nowrap}#lb .r b,#menu .r b{flex:1;overflow:hidden;text-overflow:ellipsis;font-weight:800}
#lb .r i,#menu .r i{font-style:normal;min-width:calc(2.6*var(--vh));text-align:center;font-weight:900}#menu .r i{background:#22d8ec;color:#04202a;border-radius:6px}
#lb .r em,#menu .r em{font-style:normal;font-size:.85em;color:#ffd23f;font-weight:900}#menu .r em{color:#bfefff;font-weight:600}#lb .r1 b{color:#ffe14a}
body:has(#battle.on) #lb,body:has(#battle.on) #menu{top:calc(29*var(--vh))}
body:not(.portrait) #lb,body:not(.portrait) #menu{width:calc(22*var(--vw))}body:not(.portrait) #todo{width:calc(50*var(--vw))}
/* v10: BÀI TIẾP THEO + portrait compaction */
#upn{position:absolute;right:calc(2*var(--vw));bottom:calc(30*var(--vh));width:calc(24*var(--vw));z-index:3;background:rgba(8,4,20,.82);border:2px solid rgba(255,79,192,.6);border-radius:calc(1.4*var(--vh));padding:calc(.6*var(--vh)) calc(.9*var(--vh));font-size:calc(1.45*var(--vh));color:#fff;opacity:0;transition:opacity .4s}
#upn.on{opacity:1}#upn .h{font-weight:900;color:#ff8fd6;margin-bottom:calc(.3*var(--vh))}
#upn .r{display:flex;align-items:center;gap:calc(.5*var(--vh));padding:calc(.15*var(--vh)) 0;white-space:nowrap}#upn .r i{font-style:normal;font-weight:900;min-width:calc(2.6*var(--vh));text-align:center;background:#ff4fc0;color:#2a0018;border-radius:6px}
#upn .r b{flex:1;overflow:hidden;text-overflow:ellipsis;font-weight:800}#upn .r em{font-style:normal;font-size:.85em;color:#ffd23f;max-width:40%;overflow:hidden;text-overflow:ellipsis}#upn .r.e{color:#ffe14a;font-weight:800;justify-content:center}
body.portrait #upn{width:calc(40*var(--vw));bottom:calc(28.5*var(--vh))}
body.portrait #feed{width:calc(54*var(--vw))!important}
body.portrait #lb,body.portrait #menu{font-size:calc(1.25*var(--vh));padding:calc(.4*var(--vh)) calc(.7*var(--vh))}
body.portrait #lb .r,body.portrait #menu .r{padding:0}
body.portrait #lb .r:nth-child(n+5){display:none}

body.portrait #upn{bottom:auto;top:calc(47*var(--vh));width:calc(36*var(--vw));height:auto}

#todo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(1.85*var(--vh));padding:calc(.6*var(--vh)) calc(1*var(--vh))}#todo small{display:inline;margin:0 0 0 .6em;font-size:.8em}