:root{
  --night:#18203a; --night2:#212b4d; --line:#34406b; --steel:#9aa6c2; --paper:#eef0f6;
  --fox:#f2711c; --fox2:#ff9a4d; --leaf:#4fbf6a; --chakra:#3fa9f5; --blood:#e04848;
  --q1:#b8bfcc; --q2:#5fcf73; --q3:#4aa3ff; --q4:#b26bff; --q5:#ff9a2e; --q6:#ff4f6d;
  --r:10px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--night);color:var(--paper);font:15px/1.5 "Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--fox2);outline-offset:2px}
h1,h2,h3{margin:0;line-height:1.2}
.display{font-family:Bungee,"Be Vietnam Pro",system-ui,sans-serif;font-weight:400;letter-spacing:.5px}
.muted{color:var(--steel)}
.btn{background:var(--night2);border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;font-weight:600}
.btn:hover{border-color:var(--steel)}
.btn.go{background:var(--fox);border-color:var(--fox);color:#1a0d02}
.btn.go:hover{background:var(--fox2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:13px}
#app{min-height:100%;display:flex;flex-direction:column}

/* ---------- start ---------- */
.start{max-width:880px;margin:0 auto;padding:28px 16px 40px}
.start h1{font-size:clamp(30px,6vw,52px);line-height:1.05}
.start .lead{margin:10px 0 22px;max-width:60ch}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pick{background:var(--night2);border:2px solid transparent;border-radius:var(--r);padding:8px;text-align:center}
.pick img{width:100%;aspect-ratio:3/4;object-fit:contain;object-position:bottom;display:block}
.pick.on{border-color:var(--fox)}
.namebox{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.namebox input{flex:1;min-width:180px;background:var(--night2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--paper);font:inherit}

/* ---------- shell ---------- */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:8px 16px;background:rgba(24,32,58,.96);border-bottom:1px solid var(--line)}
.top .who{display:flex;align-items:center;gap:10px;min-width:0}
.top .who img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#000;border:2px solid var(--fox)}
.top .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .res{margin-left:auto;display:flex;gap:14px;font-weight:600;white-space:nowrap}
.coin::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:#e8c35a;margin-right:6px;box-shadow:inset -2px -2px 0 #b8902d}
main.view{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:14px 16px 90px}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(6,1fr);background:var(--night2);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs button{position:relative;background:none;border:0;padding:10px 2px 12px;font-size:13px;color:var(--steel);border-top:3px solid transparent;white-space:nowrap}
nav.tabs button.on{color:var(--paper);border-top-color:var(--fox)}
.secthead{display:flex;align-items:baseline;gap:10px;margin:4px 0 12px;flex-wrap:wrap}
.secthead h2{font-size:20px}

/* ---------- campaign ---------- */
.maps{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:thin}
.maps button{flex:none;background:var(--night2);border:1px solid var(--line);border-radius:20px;padding:6px 14px;white-space:nowrap}
.maps button.on{background:var(--paper);color:var(--night);border-color:var(--paper);font-weight:700}
.maps button.lock{opacity:.4}
.path{position:relative;display:grid;gap:10px}
.stage{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--night2);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.stage .boss{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#0c1022;border:2px solid var(--line)}
.stage.done .boss{border-color:var(--leaf)}
.stage.next{border-color:var(--fox)}
.stage.next .boss{border-color:var(--fox)}
.stage.lock{opacity:.45}
.stage h3{font-size:16px}
.stage p{margin:2px 0 0;font-size:13px;color:var(--steel);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stage .acts{display:flex;flex-direction:column;gap:6px;align-items:stretch}

/* ---------- heroes ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.card{position:relative;background:var(--night2);border:1px solid var(--line);border-radius:var(--r);padding:6px;text-align:center;overflow:hidden}
.card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#0c1022;display:block}
.card .nm{font-weight:600;font-size:13px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .lv{font-size:12px;color:var(--steel)}
.card .in{position:absolute;top:8px;left:8px;background:var(--fox);color:#1a0d02;font-size:11px;font-weight:800;border-radius:6px;padding:1px 6px}
.qb{border-bottom:3px solid var(--q2)}
.q1{color:var(--q1)}.q2{color:var(--q2)}.q3{color:var(--q3)}.q4{color:var(--q4)}.q5{color:var(--q5)}.q6{color:var(--q6)}
.bq1{border-color:var(--q1)!important}.bq2{border-color:var(--q2)!important}.bq3{border-color:var(--q3)!important}.bq4{border-color:var(--q4)!important}.bq5{border-color:var(--q5)!important}.bq6{border-color:var(--q6)!important}

.detail{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:18px;align-items:start}
.detail .portrait{width:100%;background:radial-gradient(circle at 50% 70%,#2c3866,#141a31);border-radius:14px;display:block;aspect-ratio:3/4;object-fit:contain;object-position:bottom}
.detail h2{font-size:24px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px 16px;margin:12px 0;font-variant-numeric:tabular-nums}
.stats div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:3px 0}
.sk{padding:8px 0;border-top:1px solid var(--line)}
.sk b{color:var(--fox2)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.slot{background:var(--night);border:1px dashed var(--line);border-radius:var(--r);min-height:64px;display:flex;align-items:center;gap:8px;padding:6px;font-size:12px;text-align:left}
.slot img{width:44px;height:44px;object-fit:contain;flex:none}
.slot.full{border-style:solid}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bar{height:8px;background:#0c1022;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--chakra)}

/* ---------- formation ---------- */
.form{display:grid;grid-template-columns:1fr minmax(240px,320px);gap:18px;align-items:start}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:linear-gradient(90deg,transparent 0 32.5%,rgba(255,255,255,.04) 32.5% 67.5%,transparent 67.5%),var(--night2);border:1px solid var(--line);border-radius:14px;padding:10px}
.cell{aspect-ratio:1;border:1px dashed var(--line);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.18);font-size:12px;color:var(--steel);padding:4px;text-align:center}
.cell img{width:70%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.cell.sel{border:2px solid var(--fox);color:var(--paper)}
.cell.full{border-style:solid;color:var(--paper)}
.rowlab{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:12px;color:var(--steel);margin-top:6px}
.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.pool .card img{aspect-ratio:1}

/* ---------- tavern ---------- */
.tavern{display:grid;grid-template-columns:minmax(220px,1fr) 1.2fr;gap:18px;align-items:center;background:radial-gradient(circle at 20% 30%,#3a2a1c,var(--night2) 70%);border:1px solid var(--line);border-radius:16px;padding:18px}
.tavern h2{font-size:26px}
.reveal{text-align:center}
.reveal img{width:min(260px,70vw);aspect-ratio:3/4;object-fit:contain;object-position:bottom}
.reveal.pop img{animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ---------- bag ---------- */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.item{display:flex;gap:8px;align-items:center;background:var(--night2);border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);padding:6px 8px;text-align:left;font-size:13px}
.item img{width:42px;height:42px;object-fit:contain;flex:none;background:#0c1022;border-radius:6px}
.item b{display:block;font-size:13px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:20;background:rgba(6,9,20,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:var(--night2);border:1px solid var(--line);border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:18px}
.modal h3{font-size:20px;margin-bottom:8px}

/* ---------- battle ---------- */
.battle{position:fixed;inset:0;z-index:30;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center}
.battle canvas{width:100vw;height:auto;max-height:100vh;max-width:calc(100vh * 16 / 9);display:block;touch-action:manipulation}
.battle .ctl{position:absolute;top:max(8px,env(safe-area-inset-top));right:10px;display:flex;gap:6px}
.battle .ctl .btn{background:rgba(20,26,49,.8)}
.result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,9,20,.6)}
.result .box{background:var(--night2);border:1px solid var(--line);border-radius:16px;padding:20px 22px;max-width:420px;width:calc(100% - 32px);text-align:center}
.result h2{font-size:34px}
.result .win{color:var(--fox2)}
.result .lose{color:var(--steel)}
.drops{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.drops .item{min-width:0}
.rotate{display:none;color:var(--steel);font-size:13px;margin-top:8px}
@media (orientation:portrait){.rotate{display:block}}

#toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--paper);color:var(--night);padding:8px 14px;border-radius:20px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;max-width:90vw;text-align:center}
#toast.on{opacity:1}

@media (max-width:720px){
  .detail,.form,.tavern{grid-template-columns:1fr}
  .detail .portrait{max-width:240px;margin:0 auto}
  .stage{grid-template-columns:46px 1fr}
  .stage .boss{width:46px;height:46px}
  .stage .acts{grid-column:1/-1;flex-direction:row;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- v2 ---------- */
.gem::before{content:"";display:inline-block;width:10px;height:10px;transform:rotate(45deg);background:#ffd36b;margin-right:7px;box-shadow:inset -2px -2px 0 #c9962a}
.dot{position:absolute;top:6px;right:calc(50% - 30px);width:8px;height:8px;border-radius:50%;background:var(--fox)}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.hubbtn{position:relative;text-align:left;background:var(--night2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.hubbtn b{font-size:17px}.hubbtn .dot{top:12px;right:12px}
.hubbtn:hover{border-color:var(--steel)}
.panel{background:var(--night2);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.floors{display:grid;gap:8px;margin-top:10px}
.tlv{width:56px;height:56px;border-radius:12px;background:#0c1022;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-variant-numeric:tabular-nums}
.stage.next .tlv{border-color:var(--fox)}.stage.done .tlv{border-color:var(--leaf)}
.chests{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.signs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.signday{background:var(--night2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.signday.got{opacity:.5}.signday.today{border-color:var(--fox);box-shadow:0 0 0 1px var(--fox) inset}
.starsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.starcard{background:radial-gradient(circle at 50% 0,#2e3a6e,var(--night2) 70%);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.starcard .display{font-size:22px;color:#ffd36b}
.gems{display:grid;gap:6px;margin-top:8px}
.gemslot{display:flex;gap:8px;align-items:center;text-align:left;background:var(--night);border:1px dashed var(--line);border-radius:var(--r);padding:6px;font-size:12px}
.gemslot img{width:36px;height:36px;object-fit:contain}
.stars{color:#ffd36b;font-size:18px}
.empty{color:var(--steel);padding:20px 0}
textarea{background:var(--night);color:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px;font:13px/1.4 ui-monospace,Consolas,monospace}
h4{margin:0}
@media (max-width:520px){nav.tabs button{font-size:11.5px}}

/* ---------- thanh chinh ---------- */
.town{position:relative;isolation:isolate;z-index:0;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#7fb2e6;margin-bottom:12px;touch-action:none;user-select:none;-webkit-user-select:none}
.town .tcv{display:block;touch-action:none}
.town .tbanner{position:absolute;left:0;right:0;top:18%;text-align:center;pointer-events:none;opacity:0}
.town .tbanner b{font:400 clamp(26px,6vw,46px) Bungee,system-ui,sans-serif;color:#ffe27a;text-shadow:0 3px 0 #7a3b00,0 0 14px #000;letter-spacing:.04em}
.town.enter .tbanner{animation:tbn 2.4s ease forwards}
@keyframes tbn{0%{opacity:0;transform:scale(1.4)}15%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0}}
.town .tauto{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(10,14,30,.75);color:#ffe27a;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;pointer-events:none;animation:bob 1.2s ease-in-out infinite}
.maps .bots{margin-left:auto;font-size:12px;opacity:.85}
.town .tw{position:relative;height:100%}
.town .lay{position:absolute;left:0;top:0;max-width:none;pointer-events:none;will-change:transform}
.npc{position:absolute;z-index:5;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.npc canvas{display:block;pointer-events:none}
.npc .nm{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap;line-height:1.15;text-align:center}
.npc .nm small{display:block;font-weight:600;color:#ffd36b;font-size:11px}
.npc .mark{position:absolute;top:4%;left:50%;transform:translateX(-50%);font-style:normal;font:400 26px Bungee,system-ui,sans-serif;color:#ffd84a;text-shadow:0 2px 0 #7a4b00,0 0 6px #000;animation:bob 1.2s ease-in-out infinite}
.npc .mark.q{color:#8ff0a4;text-shadow:0 2px 0 #1d5b2a,0 0 6px #000}
.npc:focus-visible{outline:2px solid var(--fox2)}
.npc.pulse canvas{filter:drop-shadow(0 0 10px #ffd84a)}
@keyframes bob{50%{transform:translate(-50%,-6px)}}
.tracker{background:var(--night2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:12px;display:grid;gap:8px}
.trk{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.trk p{margin:2px 0 0;font-size:13px;color:var(--steel)}
.trk .tag{font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--line)}
.trk.ready .tag{background:var(--leaf);color:#0d2412}
.qchip{display:inline-block;font-size:11px;font-weight:800;padding:1px 7px;border-radius:6px;background:#ffd84a;color:#3a2600;vertical-align:2px}
.dlg{position:fixed;inset:0;z-index:25;background:rgba(6,9,20,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.dlg-box{position:relative;width:min(760px,100%);background:linear-gradient(180deg,#26315a,#1b2340);border:2px solid #c8a35a;border-radius:16px;padding:16px 16px 14px 180px;min-height:150px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.dlg-port{position:absolute;left:8px;bottom:0;height:230px;max-width:180px;object-fit:contain;object-position:bottom;pointer-events:none}
.dlg-name{color:#ffd36b;font-size:17px}
.dlg-text{margin:6px 0 10px;line-height:1.55}
.dlg-opts{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dlg-rw{font-size:13px;margin:0 0 8px}
.story{position:fixed;inset:0;z-index:35;background:rgba(5,7,16,.72);cursor:pointer}
.story .sp{position:absolute;bottom:120px;height:min(58vh,420px);max-width:45vw;object-fit:contain;object-position:bottom;opacity:.45;filter:brightness(.6);transition:opacity .2s,filter .2s;pointer-events:none}
.story .sp.L{left:4%}.story .sp.R{right:4%;transform:scaleX(-1)}
.story .sp.on{opacity:1;filter:none}
.story .sbox{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(860px,calc(100% - 24px));background:linear-gradient(180deg,#26315a,#1b2340);border:2px solid #c8a35a;border-radius:16px;padding:14px 18px 10px}
.story .sname{display:block;color:#ffd36b;font-size:17px}
.story .stext{margin:6px 0 4px;font-size:16px;line-height:1.55}
.story .shint{font-size:12px}
.story .sskip{position:absolute;top:max(10px,env(safe-area-inset-top));right:10px}
@media (max-width:600px){.dlg-box{padding-left:16px;padding-top:120px}.dlg-port{height:150px;left:50%;transform:translateX(-50%);top:-40px;bottom:auto}.story .sp{bottom:160px;height:40vh}}

/* ================= GIAO DIEN GOC: thanh chinh + HUD + cua so ================= */
:root{
  --night:#24170b; --night2:#4a2f17; --line:#8a6235; --steel:#dcc6a0; --paper:#fff3dc;
  --fox:#f0a21c; --fox2:#ffc94d; --wood:#5b3a1e; --wood2:#3b2512; --gold:#d7a75a;
}
body{background:#120b05}
.btn,.btn:hover,.btn.go,.btn.go:hover,.btn:disabled{border:0;border-radius:0;background:transparent;border-style:solid;border-color:transparent;border-width:6px 8px;border-image:url(ui/btn.png) 9 12 fill / 6px 8px stretch;color:#fff4dc;text-shadow:0 1px 1px #3a0d00,0 0 2px #3a0d00;padding:2px 12px;min-height:35px;font-weight:700}
.btn:hover{border-image-source:url(ui/btn_h.png)}
.btn.go{border-image-source:url(ui/btn_go.png);color:#3a1a00;text-shadow:0 1px 0 #ffe9a8}
.btn.go:hover{border-image-source:url(ui/btn_go_h.png)}
.btn:disabled,.btn.go:disabled{border-image-source:url(ui/btn_g.png);color:#ddd;opacity:.8}
.btn.sm{padding:0 8px;font-size:13px;min-height:30px}
.modal .box,.result .box{background:linear-gradient(#5d3c1f,#3f2711);border:3px solid #2a1607;outline:2px solid var(--gold);outline-offset:-6px;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.dlg-box,.story .sbox{background:linear-gradient(#5d3c1f,#3a2410);border-color:var(--gold)}
#toast{background:#fff1cf;color:#3a1d05;border:2px solid #8a5a24}

.lobby{position:fixed;inset:0;overflow:hidden;background:#000}
.lobby .town{position:absolute;left:0;top:0;right:0;margin:0;border:0;border-radius:0}
.lobby.portrait{overflow-y:auto}
.lobby.portrait .town{position:relative}
.hud{position:absolute;inset:0;pointer-events:none;z-index:4;font-size:13px}
.hud button{pointer-events:auto;background:none;border:0;padding:0}
.hud .dot{top:2px;right:6px}
.h-tl{position:absolute;left:4px;top:2px;transform:scale(var(--s));transform-origin:0 0;width:385px}
.resbar{position:relative;width:385px;height:50px;background:url(ui/resbar.png) no-repeat}
.resbar span{position:absolute;top:14px;width:74px;text-align:center;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;font-size:14px}
.resbar span::before{display:none}
.resbar .coin{left:30px}.resbar .vang{left:131px}.resbar .qcv{left:235px}
.hud .avatar{position:relative;display:block;width:305px;height:109px;background:url(ui/avatar.png) no-repeat;margin-top:-4px;text-align:left}
.av-head{position:absolute;left:12px;top:9px;width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top}
.av-lv{position:absolute;left:106px;top:12px;color:#ffe9a8;font-size:13px;text-shadow:0 1px 2px #000}
.av-name{position:absolute;left:150px;top:12px;width:140px;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
.av-bar{position:absolute;left:124px;top:52px;width:149px;height:10px;border-radius:5px;overflow:hidden}
.av-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#ff8fd0,#c43b8c)}
.av-bar em{position:absolute;inset:-3px 0 0;font:600 10px/16px "Be Vietnam Pro",sans-serif;color:#fff;text-align:center;text-shadow:0 1px 1px #000}
.power{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0 10px;background:linear-gradient(#6b4423,#3e2611);border:2px solid #c48f4a;border-radius:6px;padding:2px 12px 2px 10px;pointer-events:auto}
.power span{color:#ffd36b;font-weight:700;font-size:13px}.power b{color:#fff;font:400 20px Bungee,sans-serif;text-shadow:0 2px 0 #7a3b00}
.h-tr{position:absolute;right:2px;top:2px;display:flex;align-items:flex-start;gap:2px;transform:scale(var(--s));transform-origin:100% 0}
.h-tr .icons{display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:min(720px,calc((100vw / var(--s)) - 620px));gap:2px 4px}
.ic{position:relative;width:70px;display:flex;flex-direction:column;align-items:center}
.ic .ii{width:66px;height:70px;background:var(--a) center bottom/contain no-repeat}
.ic:hover .ii,.ic:focus-visible .ii{background-image:var(--b)}
.ic .il{margin-top:-14px;font-size:12px;font-weight:700;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000;white-space:nowrap}
.mapbtn{width:200px;height:147px;background:url(ui/mapbtn.png) no-repeat!important;position:relative}
.mapbtn b{position:absolute;left:98px;top:28px;width:110px;text-align:center;font:400 22px Bungee,sans-serif;color:#fff3c4;text-shadow:0 2px 0 #4a2600,0 0 6px #000;transform:rotate(-6deg)}
.mapbtn:hover{filter:brightness(1.12)}
.h-qt{position:absolute;right:4px;top:calc(150px * var(--s));width:250px;transform:scale(var(--s));transform-origin:100% 0;pointer-events:auto}
.qt-head{display:flex;gap:2px;align-items:stretch}
.qt-min{width:22px;background:#2b1a0b!important;color:#ffd36b;border:1px solid #8a6235!important;font-weight:800}
.qt-tab{flex:1;height:25px;background:url(ui/tab0.png) center/100% 100% no-repeat!important;color:#ffe6b0;font-weight:700;font-size:12.5px}
.qt-tab.on{background-image:url(ui/tab2.png)!important;color:#5a2500}
.qt-body{background:rgba(20,12,4,.55);padding:6px 8px;max-height:calc(36vh / var(--s));overflow:auto;border-radius:0 0 6px 6px}
.h-qt.min .qt-body{display:none}
.qt-row{margin-bottom:6px;text-align:center}
.qt-row b{display:block;color:#7dff6a;font-size:12.5px;text-shadow:0 1px 1px #000}
.qt-row b.ok{color:#9fffd0}
.qt-row p{margin:1px 0 0;color:#fff;font-size:12.5px;text-shadow:0 1px 1px #000}
.qt-row a{color:#5fd4ff;text-decoration:underline;font-weight:700}
.qt-empty{color:#ddd;margin:2px 0;font-size:12px}
.autopath{display:block;margin:6px 0 0 auto;width:178px;height:40px;background:linear-gradient(#ffe7a3,#f2b84a)!important;border:2px solid #9a5c14!important;border-radius:20px 6px 6px 20px;box-shadow:0 2px 0 #5a3000,0 0 10px rgba(255,200,80,.6);color:#6a2c00;font-weight:800;font-size:15px;animation:apulse 1.6s ease-in-out infinite}
@keyframes apulse{50%{box-shadow:0 2px 0 #5a3000,0 0 18px rgba(255,220,120,.95)}}
.h-tb{position:absolute;right:4px;bottom:calc(52px * var(--s));transform:scale(var(--s));transform-origin:100% 100%}
.tbar{display:flex;align-items:flex-end;gap:6px;padding:0 16px 8px 52px;background:url(ui/ropeend.png) left bottom no-repeat,url(ui/rope.png) left bottom repeat-x}
.tbi{display:flex;flex-direction:column;align-items:center;width:66px}
.tbi img{width:60px;height:60px;object-fit:contain;transition:transform .12s}
.tbi:hover img{transform:translateY(-3px) scale(1.06)}
.tbi span{margin-top:-8px;font-size:12px;font-weight:800;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000}
.h-exp{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center}
.expbar{position:relative;width:729px;height:67px;background:url(ui/expbar.png) no-repeat;transform:scale(var(--s));transform-origin:50% 100%;flex:none}
.expbar i{position:absolute;left:12px;top:58px;height:6px;background:linear-gradient(#ffe46b,#e09a10);border-radius:3px}
.expbar span{position:absolute;left:0;right:110px;top:41px;text-align:center;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
/* doc (portrait): icon + nhiem vu nam duoi khung thanh */
.lobby.portrait{background:linear-gradient(#2a1a0c,#160d05)}
.p-below{position:absolute;left:0;right:0;bottom:calc(120px * var(--s));overflow:auto;padding:6px 6px 0;pointer-events:auto;display:flex;flex-direction:column;gap:6px}
.p-below .icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:2px;justify-items:center}
.p-below .ic .ii{width:56px;height:60px}
.p-below .h-qt{position:static;transform:none;width:auto;top:auto}
.p-below .qt-body{max-height:none}
.p-below .autopath{margin:6px auto 0}

/* cua so khung go */
.winlayer{position:absolute;inset:0;z-index:10;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:10px}
.win{position:relative;width:min(1000px,100%);max-height:100%;display:flex;flex-direction:column;background:linear-gradient(#6a4423,#4a2f17 30%,#3d2611);border:3px solid #1e1006;border-radius:10px;box-shadow:inset 0 0 0 3px #b98a4a,inset 0 0 0 6px #3b220c,0 18px 50px rgba(0,0,0,.7);padding:30px 14px 14px}
.win::before,.win::after{content:"";position:absolute;top:24px;bottom:16px;width:14px;background:url(ui/rope_v.png) center top/14px auto repeat-y;opacity:.9;pointer-events:none}
.win::before{left:-7px}.win::after{right:-7px}
.win-title{position:absolute;left:50%;top:-14px;transform:translateX(-50%);background:linear-gradient(#2f4a2a,#1d3019);border:3px solid #c99a52;box-shadow:0 0 0 2px #3b220c,0 3px 8px rgba(0,0,0,.6);border-radius:6px;padding:4px 30px;white-space:nowrap}
.win-title b{font-size:22px;color:#f6ecc0;letter-spacing:.5px;text-shadow:0 2px 0 #10200d}
.win-x{position:absolute;right:10px;top:6px;width:30px;height:30px;border:0;background:url(ui/close.png) center/100% 100% no-repeat}
.win-x:hover{background-image:url(ui/close_h.png)}
.win-body{overflow:auto;min-height:0;flex:1 1 auto;background:rgba(30,18,7,.55);border:2px solid #2a1607;box-shadow:inset 0 0 0 1px #7a5530;border-radius:6px;padding:12px;min-height:120px;scrollbar-color:#b98a4a #2a1607}
.win-body .secthead h2{color:#ffd77a}
.win .panel,.win .stage,.win .card,.win .item,.win .tracker,.win .signday,.win .starcard,.win .slot,.win .cell,.win .board,.win .tavern{background-color:rgba(74,47,23,.85)}
.win .maps button.on{background:#f0c766;color:#3a1d05;border-color:#f0c766}
.travel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cbanner{position:relative;height:150px;border:3px solid #2a1607;box-shadow:inset 0 0 0 2px #b98a4a;border-radius:4px;background-color:#556;display:flex;align-items:center;justify-content:center}
.cbanner b{background:#140c06;color:#fff;font-size:24px;font-weight:800;padding:6px 26px;clip-path:polygon(4% 0,100% 6%,96% 100%,0 92%)}
.cstrip{display:flex;align-items:center;gap:4px;margin-top:10px}
.carr{flex:none;width:30px;height:70px;border:0;background:linear-gradient(#e9b55a,#a0601e);color:#4a2000;font-size:26px;font-weight:800;border-radius:6px;clip-path:polygon(0 50%,100% 0,100% 100%)}
.carr.r{clip-path:polygon(0 0,100% 50%,0 100%)}
.carr:disabled{opacity:.35}
.cards{flex:1;display:flex;gap:8px;overflow-x:auto;padding:22px 4px 8px;scroll-snap-type:x proximity;background:rgba(0,0,0,.25);border:2px solid #2a1607;border-radius:4px}
.scard{position:relative;flex:none;width:112px;scroll-snap-align:center;background:linear-gradient(#8a5d30,#6a4422);border:2px solid #2a1607;box-shadow:inset 0 0 0 1px #d7a75a;border-radius:4px;padding:4px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff3dc}
.scard.sel{outline:3px solid #ffb43a;outline-offset:1px}
.scard.lock{background:linear-gradient(#5a5a5a,#3a3a3a);box-shadow:inset 0 0 0 1px #999}
.scard .cur{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:#ffcf5a;color:#5a2500;font-size:11px;font-weight:800;padding:1px 8px;border-radius:4px;white-space:nowrap;border:1px solid #9a5c14}
.scard .sh{display:flex;flex-direction:column;align-items:center;line-height:1.15;background:rgba(0,0,0,.22);width:100%;padding:2px 0}
.scard .sh small{font-size:11px;color:#ffe6b0}.scard .sh b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sthumb{position:relative;width:96px;height:110px;border:3px solid #2a1607;box-shadow:inset 0 0 0 1px #d7a75a;background-color:#222}
.scard.lock .sthumb{background:repeating-linear-gradient(45deg,#4a4a4a 0 10px,#3e3e3e 10px 20px)}
.pass{position:absolute;left:4px;top:4px;width:44px;height:44px;border-radius:50%;border:3px solid #e8352a;color:#ffefe0;background:rgba(170,20,10,.85);font:700 14px/38px "Be Vietnam Pro",sans-serif;text-align:center;font-style:normal;transform:rotate(-14deg);box-shadow:0 0 0 2px #ffcf8a}
.lockic{position:absolute;inset:0;margin:auto;width:38px;height:44px;font-style:normal}
.lockic::before{content:"";position:absolute;left:9px;top:0;width:20px;height:22px;border:5px solid #cfcfcf;border-bottom:0;border-radius:12px 12px 0 0}
.lockic::after{content:"";position:absolute;left:2px;top:18px;width:34px;height:26px;background:radial-gradient(circle at 50% 45%,#7a1010 0 4px,transparent 5px),linear-gradient(#e2e2e2,#9a9a9a);border-radius:5px}
.qmark{position:absolute;right:4px;top:2px;font:400 24px Bungee,sans-serif;color:#ffd84a;text-shadow:0 2px 0 #7a4b00,0 0 4px #000;font-style:normal}
.sstars{display:flex;gap:2px}
.sstars i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#555,#222);box-shadow:inset 0 0 0 1px #000}
.sstars i.on{background:radial-gradient(circle at 40% 40%,#ffd36b,#e0700f);box-shadow:inset 0 0 0 1px #7a3b00}
.sdetail{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;margin-top:10px;background:rgba(74,47,23,.85);border:1px solid #8a6235;border-radius:6px;padding:10px}
.sdetail .boss{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#120b05;border:2px solid #d7a75a}
.sdetail p{margin:2px 0 0;font-size:13px;color:var(--steel)}
.sdetail .acts{display:flex;flex-direction:column;gap:6px}
@media (max-width:640px){.sdetail{grid-template-columns:46px 1fr}.sdetail .acts{grid-column:1/-1;flex-direction:row;justify-content:flex-end}.win{padding:28px 8px 8px}.win-body{padding:8px}}
@media (max-height:500px){.winlayer{padding:4px}.win{padding-top:24px}.win-title{top:-10px;padding:2px 22px}.win-title b{font-size:17px}.cbanner{height:56px}.cbanner b{font-size:18px}.sthumb{height:74px}.travel{margin-bottom:4px}.cards{padding-top:20px}.maps{margin-bottom:6px}}

/* ---------- ban do the gioi ---------- */
.win.wide{width:min(1250px,100%)}
.wmap{position:relative;width:100%;aspect-ratio:1250/524;max-height:calc(100vh - 90px);margin:0 auto;overflow:hidden;border-radius:4px}
.wmap .wm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.wn{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;width:clamp(44px,7%,90px)}
.wn img{width:100%;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));transition:transform .15s}
.wn:hover img{transform:scale(1.1)}
.wn span{margin-top:-4px;font-size:clamp(9px,1.05vw,13px);font-weight:800;color:#fff;white-space:nowrap;text-shadow:0 0 3px #000,0 1px 2px #000}
.wn.camp span{color:#9fe7ff}.wn.home span{color:#ffe27a}
.wn.off img{filter:grayscale(1) brightness(.6)}.wn.off span{color:#bbb}
.wn.cur::after{content:"";position:absolute;top:-14px;left:50%;width:0;height:0;border:9px solid transparent;border-top:14px solid #ffcf3a;transform:translateX(-50%);animation:bob2 1s ease-in-out infinite;filter:drop-shadow(0 1px 1px #000)}
@keyframes bob2{50%{transform:translate(-50%,-6px)}}
.wn .wn-me{position:absolute;top:-30%;left:50%;width:46%!important;transform:translateX(-50%);border-radius:50%;border:2px solid #ffcf3a;background:#000}

/* ---------- cua so Chon ai (anh goc 810x480) ---------- */
.stwin{position:relative;width:810px;height:480px;flex:none;background:url(ui/st_win.png) no-repeat;transform:scale(var(--k));transform-origin:50% 50%}
.st-title{position:absolute;left:316px;top:4px;width:166px;text-align:center;font-size:22px;color:#f4ecc6;text-shadow:0 2px 0 #10200d}
.st-x{position:absolute;left:771px;top:13px;width:24px;height:24px;border:0;background:url(ui/close.png) center/100% 100% no-repeat}
.st-x:hover{background-image:url(ui/close_h.png)}
.st-back{position:absolute;left:30px;top:10px;height:24px;padding:0 10px;border:1px solid #c99a52;border-radius:4px;background:linear-gradient(#6b4423,#3e2611);color:#ffe6b0;font-size:12px;font-weight:700}
.st-banner{position:absolute;left:38px;top:44px;width:734px;height:136px;display:flex;align-items:center;justify-content:center;overflow:hidden;filter:saturate(.75)}
.st-banner b{background:#120a05;color:#fff;font-size:26px;font-weight:800;padding:6px 30px;clip-path:polygon(5% 0,100% 8%,95% 100%,0 90%);filter:saturate(1.3)}
.st-prog{position:absolute;left:640px;top:183px;font-size:11px;color:#ffe6b0;font-weight:700}
.st-arr{position:absolute;top:288px;width:28px;height:46px;border:0;background:transparent}
.st-arr.l{left:28px}.st-arr.r{left:754px}
.st-arr::before{content:"";position:absolute;top:8px;border:15px solid transparent}
.st-arr.l::before{left:-4px;border-right:18px solid #f2b84a}.st-arr.r::before{left:10px;border-left:18px solid #f2b84a}
.st-arr:disabled{opacity:.25}
.st-cards{position:absolute;left:61px;top:204px;width:690px;height:222px}
.stc{position:absolute;top:0;width:112px;height:217px;background:url(ui/st_card.png) no-repeat}
.stc.next{background-image:url(ui/st_card_sel.png)}
.stc.lock{background-image:url(ui/st_card_lock.png)}
.stc-h{position:absolute;left:8px;top:6px;width:96px;height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;color:#3a1d05}
.stc-h small{font-size:11px;font-weight:700}.stc-h b{font-size:12.5px;max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stc.lock .stc-h{color:#bbb}
.stc-th{position:absolute;left:14px;top:57px;width:84px;height:117px;border:0;padding:0;background-color:#333;cursor:pointer}
.stc.lock .stc-th{display:none}
.stc-qua{position:absolute;left:6px;top:50px;width:50px;height:50px;background:url(ui/st_qua.png) no-repeat;pointer-events:none}
.stc-chain{position:absolute;left:-10px;top:58px;width:131px;height:120px;background:url(ui/st_chain.png) no-repeat;pointer-events:none}
.stc-lockt{position:absolute;left:0;right:0;top:222px;text-align:center;font-size:10.5px;color:#ff5a3a;font-weight:700;line-height:1.1}
.stc-q{position:absolute;right:10px;top:54px;font:400 24px Bungee,sans-serif;color:#ffd84a;text-shadow:0 2px 0 #7a4b00,0 0 4px #000;font-style:normal;pointer-events:none}
.stc-stars{position:absolute;left:4px;top:155px;width:104px;height:21px;background:url(ui/st_stars0.png) no-repeat;pointer-events:none}
.stc-stars i{position:absolute;top:2px;width:15px;height:17px}
.stc-stars i.on{background:url(ui/st_star.png) no-repeat}
.stc-stars i:nth-child(1){left:9px}.stc-stars i:nth-child(2){left:27px}.stc-stars i:nth-child(3){left:45px}.stc-stars i:nth-child(4){left:63px}.stc-stars i:nth-child(5){left:81px}
.stc-corner{position:absolute;left:-5px;top:-5px;width:122px;height:228px;background:url(ui/st_corner.png) no-repeat;pointer-events:none;animation:cpulse 1.2s ease-in-out infinite}
@keyframes cpulse{50%{opacity:.55}}
.stc-call{position:absolute;left:6px;top:-50px;width:99px;height:57px;background:url(ui/st_callout.png) no-repeat;text-align:center;font-size:12.5px;font-weight:800;color:#6a2c00;padding-top:9px;pointer-events:none}
.stc-btn{position:absolute;left:5px;top:182px;width:102px;height:31px;border:0;background:url(ui/st_btn.png) no-repeat;color:#fff4dc;font-weight:800;font-size:12.5px;text-shadow:0 1px 1px #3a0d00}
.stc-btn:hover{background-image:url(ui/st_btn_h.png)}
.stc-btn.go{filter:hue-rotate(28deg) saturate(1.5) brightness(1.15)}
/* danh gia tran */
.grade{position:relative;height:120px;margin:-10px 0 4px}
.grade .ink{position:absolute;left:50%;top:50%;width:170px;transform:translate(-50%,-50%);opacity:.75}
.grade .gw{position:absolute;left:50%;top:44%;height:96px;transform:translate(-50%,-50%) rotate(-6deg);animation:gpop .5s cubic-bezier(.2,1.6,.4,1)}
.grade .gstars{position:absolute;left:0;right:0;bottom:-2px;color:#ffcf3a;font-size:20px;letter-spacing:3px;text-shadow:0 1px 2px #000}
@keyframes gpop{from{transform:translate(-50%,-50%) scale(2.2) rotate(-6deg);opacity:0}}