:root{--bg:#0d0b14;--panel:#1a1626;--line:#33294a;--ink:#f2ebe0;--dim:#a79a86;--accent:#ff9426;--gold:#ffd45e;--font:"VT323",monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}
#c{display:block;position:fixed;inset:0;image-rendering:pixelated;image-rendering:crisp-edges}
#ui{display:block;position:fixed;inset:0;pointer-events:none;z-index:2}
.dim{color:var(--dim)} .tiny{font-size:11px}
.btn{display:block;width:100%;margin:6px 0;padding:11px 14px;border:1px solid var(--line);background:#241e34;color:var(--ink);border-radius:10px;font:inherit;font-size:15px;cursor:pointer}
.btn:hover{border-color:var(--accent)} .btn.primary{background:var(--accent);color:#170d02;font-weight:700;border-color:transparent} .btn.ghost{background:transparent}
input{width:100%;padding:10px 12px;border:1px solid var(--line);background:#120f1c;color:var(--ink);border-radius:10px;font:inherit;font-size:15px;outline:none;margin:6px 0}
input:focus{border-color:var(--accent)}

/* overlays */
.ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
#title{background:transparent}
#tbg{position:fixed;inset:0;z-index:9;image-rendering:pixelated;display:block} #tbg[hidden]{display:none}
.tt{width:min(360px,100%);text-align:center;font-family:'VT323',var(--font);max-height:100vh;overflow:auto;scrollbar-width:none;padding:6px 0} .tt::-webkit-scrollbar{display:none}
#t-logo{width:min(360px,100%);height:auto;image-rendering:auto;display:block;margin:0 auto -6px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
#t-tag{font-size:19px;margin:0 0 8px;text-shadow:1px 1px 0 #000}
#title .btn{font-family:'VT323',var(--font);font-size:22px;padding:7px 14px;margin:5px 0;border-radius:8px;background:rgba(36,30,52,.92);position:relative;text-shadow:1px 1px 0 #000}
#title .btn.px{border:9px solid transparent;border-image:url(assets/px/ui/title/btn.png) 9 / 9px round;border-radius:0;background:#3a2718;background-clip:padding-box;padding:1px 10px;image-rendering:pixelated}
#title .btn.px.sel,#title .btn.px:hover{border-image-source:url(assets/px/ui/title/btn_hi.png);background:#4d3421;color:var(--gold)}
#title .btn.sel::before{content:'▶';position:absolute;left:-18px;top:50%;transform:translateY(-50%);color:var(--gold);animation:tblink .5s steps(2) infinite}
@keyframes tblink{from{opacity:1}to{opacity:.2}}
#title .btn.primary{background:var(--accent);color:#170d02} #title .btn.px.primary{background:#7a4a12;color:#fff2a8}
.trow{display:flex;gap:6px;align-items:center;justify-content:center} .trow .btn{flex:1;min-width:0;font-size:19px;padding-left:6px;padding-right:6px}
.trow label{flex:0 0 90px;text-align:left;font-size:18px} .trow input[type=range]{flex:1} .trow select{flex:1;font:inherit;font-size:18px;background:#241e34;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:4px}
.tsmall{margin-top:8px;padding:8px;border:1px dashed var(--line);border-radius:8px;background:rgba(13,11,20,.55)} .tsmall .btn{font-size:16px;padding:5px 10px}
#t-name{font-family:'VT323',var(--font);font-size:20px;text-align:center;background:rgba(13,11,20,.7)}
#t-panel-settings,#t-panel-credits,#t-panel-bye{background:rgba(13,11,20,.72);padding:12px;border-radius:12px}
.tcred{height:min(50vh,360px);overflow:hidden;position:relative;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
#t-credits-list{position:absolute;left:0;right:0;top:100%;font-size:20px;line-height:1.35} #t-credits-list h3{color:var(--gold);font-size:28px;margin:0 0 4px}
.logo{font-size:56px;font-weight:900;letter-spacing:.08em;color:var(--gold);text-shadow:0 0 24px rgba(255,148,38,.5),4px 4px 0 #6a2a12;line-height:1}
.sub{font-size:20px;letter-spacing:.5em;color:var(--accent);margin:6px 0 10px}
#dialog{align-items:flex-end;background:transparent;pointer-events:none}
#dialog:not([hidden]){pointer-events:auto}
.dlg{position:relative;width:min(680px,100%);background:rgba(20,16,32,.96);border:2px solid var(--line);border-radius:14px;padding:14px 16px 10px;box-shadow:0 10px 40px rgba(0,0,0,.6);margin-bottom:max(70px,env(safe-area-inset-bottom));font-family:'VT323',var(--font)}
.dlg.px{border:20px solid transparent;border-image:url(assets/px/ui/dlg_frame.png) 20 / 20px round;border-radius:0;background:var(--panel);background-clip:padding-box;image-rendering:pixelated;padding:4px 8px 6px}
.dlg-plate{position:absolute;left:14px;top:-22px;padding:2px 14px;background:#2b2440;border:2px solid var(--line);border-radius:6px;font-size:24px;line-height:1.1;display:flex;gap:10px;align-items:baseline;max-width:80%}
.dlg.px .dlg-plate{border:8px solid transparent;border-image:url(assets/px/ui/dlg_plate.png) 8 / 8px round;border-radius:0;background:#4a3324;background-clip:padding-box;top:-30px;padding:0 10px}
#d-name{font-weight:700;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw} #d-nick{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:25vw}
@media (max-width:520px){.dlg-plate{font-size:19px;max-width:calc(100% - 24px)} #d-text{font-size:19px}}
.dlg-body{display:flex;gap:12px;align-items:flex-start;margin-top:6px}
.dlg-port{position:relative;flex:0 0 auto;width:64px;height:64px;border:2px solid var(--line);background:#120f1c}
.dlg.px .dlg-port{border:8px solid transparent;border-image:url(assets/px/ui/dlg_port.png) 8 / 8px round;background:#120f1c;background-clip:padding-box;width:64px;height:64px;box-sizing:content-box}
#d-port{width:64px;height:64px;image-rendering:pixelated;display:block}
#d-av{position:absolute;right:-8px;bottom:-8px} #d-av .av{width:22px;height:22px;border-width:1px}
.dlg-main{flex:1;min-width:0}
.dlg-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#d-more{position:absolute;left:50%;bottom:4px;margin-left:-6px;color:var(--gold);font-size:14px;animation:dbob .7s steps(2) infinite}
@keyframes dbob{from{transform:translateY(0)}to{transform:translateY(3px)}}
#d-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chip{font-size:11px;background:#2b2440;border-radius:6px;padding:2px 7px;color:var(--dim)}
.av{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#2b2440;border:2px solid var(--line)}
.av.sm{width:36px;height:36px}
.avf{display:grid;place-items:center;font-weight:800;color:var(--dim);font-size:18px}
.lvb{display:inline-block;font-weight:800;font-size:12px;color:#140a02;border-radius:7px;padding:3px 8px;white-space:nowrap}
#d-stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--dim);margin:8px 0 6px;padding-top:8px;border-top:1px dashed var(--line)}
#d-stats b{color:var(--ink)}
#d-text{font-size:22px;line-height:1.25;min-height:56px;white-space:pre-line;letter-spacing:.2px}
#d-hint{text-align:right;font-size:14px;margin-top:2px;font-family:var(--font);font-size:12px}
.mtab span,.mbody h3,#menu .mhero b{font-family:'VT323',var(--font);font-size:20px;letter-spacing:.3px}

.panel{width:min(560px,100%);max-height:90vh;display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:16px}
.panel.small{width:min(300px,100%);text-align:center}
.panel h2{margin:0 0 4px;font-size:20px;display:flex;align-items:center;gap:10px}
.panel p{margin:0 0 8px}
#h-list{flex:1;overflow:auto;min-height:0;margin:6px 0}
.hrow{display:flex;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line);font-size:14px}
.hwho{flex:1;min-width:0;overflow:hidden} .hwho b{word-break:break-all}
.hnum{text-align:right;line-height:1.1} .hnum small{display:block;font-size:10px;color:var(--dim)}
#pause{background:rgba(0,0,0,.55)} #hall{background:rgba(0,0,0,.55)}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;font-size:13px}
.hud-tl{position:absolute;top:10px;left:10px;max-width:calc(100% - 150px)}
.hud-tr{position:absolute;top:10px;right:10px;display:flex;gap:12px;align-items:center;background:rgba(13,11,20,.6);padding:6px 10px;border-radius:9px}
.hbtn{pointer-events:auto;border:1px solid var(--line);background:#241e34;color:var(--ink);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:14px;padding:0}
.hbtn:hover{border-color:var(--accent)}
@media (pointer:coarse){#btn-fs{display:none} .hbtn{width:34px;height:34px;font-size:18px}}
.panel.wide{width:min(760px,100%)}
.mapwrap{display:flex;gap:14px;align-items:flex-start;min-height:0;overflow:auto}
#m-cv{width:340px;height:340px;flex:0 0 auto;background:radial-gradient(circle at 50% 50%,#2a1a3a,#120f1c 70%);border-radius:12px;border:1px solid var(--line);cursor:pointer}
#m-list{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px}
.mrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.mrow:hover{background:#241e34} .mrow.cur{border-color:var(--gold)} .mrow.lk{opacity:.55} .mrow .star{margin-left:auto;color:var(--gold)}
@media (max-width:640px){.mapwrap{flex-direction:column;align-items:center} #m-cv{width:min(340px,80vw);height:min(340px,80vw)} #m-list{width:100%}}
.endp{width:min(420px,100%)!important} .logo.sm{font-size:34px} .endp p{white-space:pre-line;line-height:1.5;margin:8px 0 14px}
.scroll{flex:1;overflow:auto;min-height:0;margin:6px 0}
#h-task,#h-target,#h-story{margin-top:4px;background:rgba(13,11,20,.6);padding:3px 9px;border-radius:8px;display:table;font-size:12px;color:var(--ink)}
#h-target{color:var(--gold)} #h-story{color:#ffb3c1;border:1px solid rgba(255,31,75,.5)} #h-task:empty,#h-target:empty,#h-story:empty,#h-inv:empty{display:none}
#h-inv{margin-top:4px;background:rgba(13,11,20,.6);padding:3px 9px;border-radius:8px;display:table;font-size:12px;color:var(--ink)}
#h-alert{margin-top:6px;background:rgba(120,20,30,.85);border:1px solid #ff6b6b;padding:5px 10px;border-radius:8px;display:table;font-size:13px;font-weight:700;color:#ffd6d6}
/* shop */
.shards{font-weight:800;color:var(--gold);font-size:18px;margin:4px 0}
.srow{margin:10px 0} .slabel{font-weight:600;margin-bottom:6px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:40px;height:40px;border-radius:10px;border:2px solid var(--line);cursor:pointer;font-weight:800;color:#000;text-shadow:0 0 3px #fff;opacity:.55}
.sw.owned{opacity:1} .sw.worn{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,212,94,.4)}
/* quiz */
#q-text{font-size:17px;line-height:1.45;margin:6px 0 12px;min-height:48px}
.qopt{text-align:left;display:flex;gap:10px;align-items:center}
.qn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#2b2440;font-size:12px;flex:0 0 auto}
.qopt.ok{border-color:#4caa4f;background:#1f3a24} .qopt.bad{border-color:#e04b4b;background:#3a1f22} .qopt.off{opacity:.5}
#q-fb{margin:8px 0;min-height:22px} #q-fb .good{color:#7fd14b} #q-fb .badt{color:#ff6b6b} #q-fb a{margin-left:10px;color:var(--gold)}
/* codex */
.pbar{height:12px;background:#2b2440;border-radius:6px;overflow:hidden;margin:4px 0} .pbar>div{height:100%;background:var(--accent)} .pbar.sm{height:8px;flex:1}
.codexwrap{display:flex;gap:16px;min-height:0;flex:1;overflow:auto} .ccol{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.ccol h3{margin:10px 0 4px;font-size:15px}
.zrow{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:12px} .zrow .star{color:var(--gold)}
.arow{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;opacity:.55} .arow.done{opacity:1} .aicon{font-size:18px;width:26px;text-align:center}
@media (max-width:640px){.codexwrap{flex-direction:column}}
/* title extras */
.findrow{margin:10px 0 4px;text-align:left} .findin{display:flex;gap:6px} .findin input{margin:0} .findin .btn{width:auto;margin:0;white-space:nowrap}
.btn.discord{background:#5865F2;color:#fff;border-color:transparent;font-weight:600} #t-discord-wrap p{margin:2px 0 6px}
/* credits */
#credits{position:fixed;inset:0;z-index:8;pointer-events:none} #cr-skip{pointer-events:auto;position:absolute;top:56px;right:14px;width:auto;background:rgba(20,16,32,.8)}
.chip.elder{background:#3d2a80;color:#d9c8ff}
/* nation board */
.nhead{display:flex;gap:14px;align-items:center;margin-bottom:6px}
#n-flag{width:96px;height:64px;image-rendering:pixelated;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.5);flex:0 0 auto}
.nhead h2{font-size:22px} .nhead p{margin:0}
.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.mcard{background:#241e34;border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;opacity:.7}
.mcard.won{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,212,94,.25)}
.mcard b{font-size:12px} .mcard span{color:var(--ink);font-weight:700;font-size:14px} .mcard small{color:var(--dim);font-size:10px}
.medal{width:32px;height:32px;image-rendering:pixelated} .medal.none{display:grid;place-items:center;font-weight:800;color:var(--dim);font-size:13px}
.hrow .medal{width:20px;height:20px}
.nstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0}
.nstat{background:#1d1829;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:2px} .nstat b{font-size:17px} .nstat span{font-size:11px;color:var(--dim)}
.nstat.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px} .nstat.wide div{display:flex;flex-direction:column}
.panel h3{margin:10px 0 4px;font-size:14px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
@media (max-width:520px){.nstats{grid-template-columns:repeat(2,1fr)}}
.pill{display:inline-block;padding:4px 10px;border-radius:8px;font-weight:800;color:#140a02;font-size:13px}
#h-quest{margin-top:5px;background:rgba(13,11,20,.6);padding:4px 9px;border-radius:8px;display:table;color:var(--gold);font-weight:600;max-width:100%}
#h-quest:empty{display:none}
#seis{position:absolute;left:10px;bottom:10px;width:120px;height:28px;background:rgba(13,11,20,.6);border-radius:6px;border:1px solid var(--line)}
#prompt{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(13,11,20,.75);border:1px solid var(--gold);color:var(--gold);padding:6px 12px;border-radius:8px;font-weight:700}
#toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:rgba(20,16,32,.95);border:1px solid var(--gold);color:var(--gold);padding:8px 16px;border-radius:10px;font-weight:700;z-index:20;pointer-events:none}
#toast.big{font-size:20px;padding:14px 26px;box-shadow:0 0 30px rgba(255,212,94,.35)}
#loading{position:fixed;inset:0;display:grid;place-items:center;color:var(--dim);z-index:30;background:var(--bg)}

/* touch controls: only on coarse pointers */
#touch{display:none;position:fixed;inset:0;pointer-events:none;z-index:6}
@media (pointer:coarse){#touch{display:block}}
#touch button{pointer-events:auto;position:absolute;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(20,16,32,.55);color:#fff;font-size:18px;touch-action:none}
.dpad{position:absolute;left:18px;bottom:50px;width:160px;height:160px}
.dpad [data-k=up]{left:54px;top:0} .dpad [data-k=left]{left:0;top:54px} .dpad [data-k=right]{left:108px;top:54px} .dpad [data-k=down]{left:54px;top:108px}
#btn-a{right:24px;bottom:70px;width:68px!important;height:68px!important;background:rgba(255,148,38,.6)!important;font-weight:800}
#btn-menu{right:24px;top:52px;width:40px!important;height:40px!important;font-size:14px!important}
#btn-photo{right:70px;top:52px;width:40px!important;height:40px!important;font-size:16px!important}
#btn-tgt{right:100px;bottom:24px;width:auto!important;height:34px!important;padding:0 10px;border-radius:17px!important;font-size:13px!important;white-space:nowrap;border-color:rgba(255,212,94,.7)!important;background:rgba(20,16,32,.7)!important;color:#ffd45e!important} #btn-tgt[hidden]{display:none}   /* 2026-10-11: đổi mục tiêu (chỉ hiện khi có ≥ 2 mục tiêu) */
#touch-skills{position:absolute;right:16px;bottom:150px;display:flex;flex-direction:column;gap:8px;pointer-events:none} #touch-skills button{position:static;width:44px;height:44px;font-size:16px;border-color:rgba(255,212,94,.6)} #touch-skills[hidden]{display:none}
@media (pointer:coarse){#seis{left:auto;right:10px;bottom:150px} #t-ctl{display:none}}
/* ---- plan-10: menu phụ RPG pixel (#menu) ---- */
#menu .mframe{width:min(760px,100%);max-height:92vh;display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:14px}
#menu .mframe.px{border:20px solid transparent;border-image:url(assets/px/ui/frame.png) 20 / 20px round;border-radius:0;image-rendering:pixelated;background:var(--panel);background-clip:padding-box;padding:6px 10px 10px}
.pxi.st.play{transform:rotate(90deg)}
.mtabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.mtab{display:flex;align-items:center;gap:6px;padding:5px 9px;border:2px solid var(--line);background:#241e34;color:var(--dim);cursor:pointer;font-size:14px;user-select:none}
.mtab.on{color:var(--gold);border-color:var(--gold);background:#2b2440}
.pxi{width:32px;height:32px;image-rendering:pixelated;display:block} .pxi.st{width:20px;height:20px;display:inline-block;vertical-align:middle}
.emo{font-size:22px;line-height:32px;display:block;text-align:center;width:32px} .emo.st{font-size:16px;line-height:20px;width:auto;display:inline-block}
.mbody{flex:1;min-height:0;overflow:auto;padding:2px 4px} .mbody h3{margin:8px 0 4px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;display:flex;gap:8px;align-items:center}
.mgrid{display:grid;grid-template-columns:repeat(8,44px);gap:6px;justify-content:start}
.slot{position:relative;width:44px;height:44px;border:2px solid var(--line);background:#120f1c;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 2px #2b2440}
.slot:hover{border-color:var(--gold)} .slot.off{opacity:.45}
.slot .n{position:absolute;right:2px;bottom:0;font-size:11px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000,-1px 0 0 #000}
.slot .tier{position:absolute;right:3px;bottom:1px;font-size:10px;font-weight:700;color:var(--gold);text-shadow:1px 1px 0 #000}
.slot .lock{position:absolute;right:0;top:0;line-height:1} .slot .lock .pxi.st{width:14px;height:14px} .slot .lock .emo.st{font-size:11px}
.msell{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle}#menu .msell .btn{padding:3px 10px;font-size:13px;white-space:nowrap;min-height:0;min-width:0;line-height:1.3;width:auto;margin:0}
.mtip{min-height:36px;margin-top:8px;padding:6px 10px;border:2px solid var(--line);background:#120f1c;font-size:13px}
.mhero{display:flex;gap:12px;align-items:center;padding:4px 2px 8px;border-bottom:1px solid var(--line)}
.mav{width:64px;height:80px;image-rendering:pixelated;border:2px solid var(--line);background:#120f1c;flex:0 0 auto}
.hcard{align-items:flex-start} .hcard .mav{background:#241e34;border-radius:6px}
.hcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .hcol .hst+.hst{border-top:1px dashed var(--line);padding-top:2px}
.hcard .hst{display:flex;justify-content:space-between;gap:10px;font:17px VT323,monospace;color:#d8cbe8;line-height:1.15} .hcard .hst b{font:17px VT323,monospace;color:var(--gold);font-weight:normal;letter-spacing:0} .hcard .dim{color:var(--dim)}
.hcard .hbar{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center;font:17px VT323,monospace;color:#d8cbe8} .hcard .hbar b{font-size:17px;color:var(--gold);font-weight:normal;min-width:70px;text-align:right} .pbar.hp>div{background:#e0524f}
.hgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px} .hgrid .hst:nth-child(n+3){border-top:1px dashed var(--line);padding-top:2px} .hgrid .hst:nth-child(2){border-top:0;padding-top:0}
.hbless{display:flex;flex-wrap:wrap;gap:8px} .hb1{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:6px;background:#241e34}
.hb1 img{width:32px;height:32px;image-rendering:pixelated;object-fit:contain} .hb1 span{display:flex;flex-direction:column;line-height:1.1} .hb1 b{font:17px VT323,monospace;color:#ffd45e;font-weight:normal} .hb1 i{font-style:normal;font-size:12px;color:var(--dim)}
.mstat{display:grid;grid-template-columns:28px 130px 1fr 26px;gap:8px;align-items:center;padding:6px 2px;border-bottom:1px solid var(--line);font-size:14px}
.mbar{height:12px;background:#120f1c;border:2px solid var(--line);display:flex;gap:2px;padding:1px;margin:2px 0} .mbar i{flex:1;background:#2b2440} .mbar i.on{background:var(--gold)}
.mbar.big{height:10px;display:block;padding:0} .mbar.big i{display:block;height:100%}
.arr{text-align:center} .arr.up{color:#8ee07a} .arr.down{color:#ff6b84}
.mq{display:flex;gap:8px;align-items:flex-start;padding:7px 2px;border-bottom:1px solid var(--line);font-size:14px} .mq.locked{opacity:.55} .mq .qs{flex:0 0 22px;text-align:center;padding-top:1px} .mq .av.sm{float:left;margin-right:8px}
.mhint{font-size:11px;color:var(--dim)} .mfoot{margin-top:6px;font-size:11px;color:var(--dim);text-align:center}
.mgear{max-width:320px;margin:10px auto}
@media (max-width:520px){.mgrid{grid-template-columns:repeat(6,44px)} .mstat{grid-template-columns:24px 90px 1fr 22px;font-size:12px} #menu .mframe.px{border-width:12px;border-image-width:12px}}

/* plan-18: chọn tên + quốc gia */
#npick{z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(8,6,14,.78)}
#npick .npick{max-width:780px;width:94vw;max-height:92vh;overflow:auto;padding:16px 18px;background:#15111f;border:3px solid #6b4a2e;box-shadow:0 0 0 3px #2b1d14,0 10px 40px rgba(0,0,0,.6);border-radius:6px}
#npick .npf b{white-space:normal;line-height:1}
#npick h2{margin:0 0 8px;font-family:VT323,monospace;font-size:34px;color:#ffd45e}
#npick .nplab{display:block;margin:10px 0 4px;font-size:14px}
#npick #np-name{width:100%;max-width:320px;font:22px VT323,monospace;padding:4px 8px;background:#120f1c;color:#f2ebe0;border:2px solid var(--line)}
#npick .npgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
#npick .npf{display:flex;align-items:center;gap:6px;padding:5px 6px;background:#1c1828;border:2px solid #33294a;color:#f2ebe0;cursor:pointer;text-align:left;font:15px VT323,monospace}
#npick .npf.on{border-color:#ffd45e;background:#2b2440}
#npick .npf canvas{image-rendering:pixelated;flex:none}
#npick .npf.none .npc{font-size:18px;width:36px;text-align:center}
#npick .npnote{font-size:13px;margin:8px 0 2px}
#npick .nperr{color:#ff8c8c;min-height:18px;margin:4px 0}
.njoin{display:flex;justify-content:center;margin:0 0 8px}

/* plan-18: màn chọn quốc gia — UI PixelLab (khung 9 mảnh) */
#npick.px .npick{background:#1a1426;background-clip:padding-box;border:24px solid transparent;border-image:var(--np-panel) 12 / 24px round;box-shadow:0 12px 40px rgba(0,0,0,.6);border-radius:0;image-rendering:pixelated}
#npick.px h2.banner{display:inline-block;padding:6px 36px 10px;margin:-6px 0 6px;background:var(--np-banner) center/100% 100% no-repeat;image-rendering:pixelated;color:#fff4d6;text-shadow:0 2px 0 #5a1010}
#npick.px .npf{border:8px solid transparent;border-image:var(--np-tile) 6 / 8px round;background:#2a1f38;background-clip:padding-box;padding:2px 4px;image-rendering:pixelated}
#npick.px .npf.on,#npick.px .npf:hover{border-image-source:var(--np-tile-on);background:#3a2c4c}
#npick.px .npf img{image-rendering:pixelated;flex:none}
#npick.px .npf.none .npc img{width:30px;height:30px}
#npick.px #np-name{border:8px solid transparent;border-image:var(--np-input) 4 / 8px round;background:#f3e6c6;background-clip:padding-box;color:#3b2412}
#npick.px #np-go{border:12px solid transparent;border-image:var(--np-btn) 8 / 12px round;background:#e8913a;background-clip:padding-box;color:#3b1d08;font:26px VT323,monospace;border-radius:0;image-rendering:pixelated;width:100%;padding:2px}
#npick.px #np-go:hover{filter:brightness(1.08)}
/* plan-20: hotbar kiểu Stardew — ô PixelLab (assets/px/ui/hotbar/slot*.png), khung gỗ ui/npick/panel.png */
#hotbar{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:auto;user-select:none}
#hotbar[hidden]{display:none}
#hotbar .hb-bar{display:flex;gap:2px;border:12px solid transparent;border-image:url(assets/px/ui/npick/panel.png) 12 fill / 12px round;image-rendering:pixelated;padding:0}
#hotbar .hb-slot{position:relative;width:44px;height:44px;box-sizing:border-box;border:8px solid transparent;border-image:url(assets/px/ui/hotbar/slot.png) 8 fill / 8px;image-rendering:pixelated;display:flex;align-items:center;justify-content:center;cursor:pointer}
#hotbar .hb-slot.on{border-image-source:url(assets/px/ui/hotbar/slot_on.png);transform:translateY(-2px)}
#hotbar .hb-slot img{width:32px;height:32px;image-rendering:pixelated;margin:-6px;pointer-events:none}
#hotbar .hb-emo{font-size:20px;line-height:1;pointer-events:none}
#hotbar .hb-k{position:absolute;left:-5px;top:-7px;font:11px VT323,monospace;color:#3b2412;font-style:normal;pointer-events:none}
#hotbar .hb-n{position:absolute;right:-6px;bottom:-8px;font:14px VT323,monospace;color:#fff6c8;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022;pointer-events:none}
#hotbar .hb-eat{margin-left:8px} #hotbar .hb-rk{margin-left:4px}
#hotbar .hb-eat.dim img{filter:grayscale(1);opacity:.5}
#hotbar .hb-v{position:absolute;left:-6px;top:-9px;font:14px VT323,monospace;color:#fff6c8;font-style:normal;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022,1px 0 0 #352022;pointer-events:none}
#hotbar .hb-tip{font:18px VT323,monospace;color:#fff6c8;background:rgba(53,32,34,.85);padding:1px 10px;border-radius:4px}
#hotbar .hb-tip[hidden]{display:none}
@media (pointer:coarse){#hotbar{bottom:216px}}   /* trên nút cảm ứng (D-pad, A) */
@media (max-width:640px){#hotbar .hb-slot{width:30px;height:30px;border-width:5px;border-image-width:5px} #hotbar .hb-slot img{width:22px;height:22px;margin:-4px} #hotbar .hb-k{display:none} #hotbar .hb-bar{border-width:6px;border-image-width:6px}}
/* plan-22: máu + kinh nghiệm DỌC góc dưới phải (khung PixelLab ui/hud/hpv.png) */
#herobar{position:fixed;right:10px;bottom:10px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
#herobar[hidden]{display:none}
#herobar .hb-lv{background:none;border:6px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 6px;color:#3b2412;padding:0 4px;font-size:18px}
#herobar .hb-bars{position:relative;display:flex;gap:4px;align-items:flex-end}
#herobar .hb-hp{position:relative;width:32px;height:160px;background:url(assets/px/ui/hud/hpv.png) no-repeat 0 0/100% 100%;image-rendering:pixelated}
#herobar .hb-slot{position:absolute;left:31%;right:31%;top:13%;bottom:4%;overflow:hidden}
#herobar .hb-slot i{position:absolute;left:0;right:0;bottom:0;display:block;background:#e84a3a;box-shadow:inset 2px 0 0 #ff8a7a,inset -2px 0 0 #a8261c}
#herobar .hb-xp{position:relative;width:8px;height:150px;background:#352022;border:2px solid #352022;overflow:hidden}
#herobar .hb-xp i{position:absolute;left:0;right:0;bottom:0;display:block;background:#ffd45e}
#herobar .hb-num{position:absolute;right:46px;bottom:4px;color:#fff6c8;font-size:16px;white-space:nowrap}
@media (pointer:coarse){#herobar{bottom:150px;right:6px} #herobar .hb-hp{height:120px} #herobar .hb-xp{height:112px}}
.mem-list{max-height:50vh;overflow:auto;margin:6px 0 10px 18px;padding:0}
.mem-list li{margin:3px 0}

/* ===== plan-22: MỌI THỨ HIỆN RA LÀ PIXEL (anh chốt 2026-10-10) — font pixel, không bo góc, không bóng mờ, khung gỗ PixelLab ===== */
html{font-size:18px}
body,button,input,select,textarea,.btn,.panel{font-family:var(--font)!important}
body{font-size:18px}
*,*::before,*::after{border-radius:0!important;text-shadow:none}
img,canvas{image-rendering:pixelated}
.panel,#toast,#prompt,.pill,.hbtn,.btn:not(.px):not(.primary){box-shadow:none!important}
.ov .panel{border:12px solid transparent!important;border-image:url(assets/px/ui/npick/panel.png) 12 fill / 12px round!important;background:#2a1f1a!important;image-rendering:pixelated}
.btn:not(.px){border:6px solid transparent!important;border-image:url(assets/px/ui/hud/box.png) 6 fill / 6px!important;background:none!important;color:#3b2412!important;padding:2px 10px!important}
.btn.primary:not(.px){filter:hue-rotate(-10deg) saturate(1.3)}
.pill{border:6px solid transparent!important;border-image:url(assets/px/ui/hud/box.png) 6 fill / 6px!important;background:none!important;color:#3b2412!important}

/* ===== plan-22: HUD kiểu Stardew ===== */
#h-clock,#h-inv,#toast,#prompt{display:none!important}
.hud-tr>span[title]{display:none!important}
#pxhud{position:fixed;inset:0;pointer-events:none;z-index:7;font-family:var(--font)}
#pxhud[hidden]{display:none}
#pxhud .pxi{width:20px;height:20px;vertical-align:-4px;image-rendering:pixelated;margin:0 1px}
#px-clock{position:absolute;right:10px;top:48px;width:192px;height:112px;background:url(assets/px/ui/hud/clock.png) no-repeat 0 0/100% 100%;image-rendering:pixelated;color:#3b2412}
#px-clock .pc-date{position:absolute;left:84px;right:14px;top:22px;text-align:center;font-size:19px;line-height:1.05}
#px-clock .pc-time{position:absolute;left:84px;right:14px;top:56px;text-align:center;font-size:26px}
#px-money{position:absolute;right:10px;top:162px;width:160px;height:40px;background:url(assets/px/ui/hud/counter.png) no-repeat 0 0/100% 100%;image-rendering:pixelated;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 24px;color:#ffd45e;font-size:28px;line-height:1}
#px-status{position:absolute;right:10px;top:206px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px;max-width:240px;pointer-events:auto}
#px-status .ps{border:5px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 5px;color:#3b2412;font-size:16px;padding:0 3px;white-space:nowrap;line-height:1.1}
#px-notes{position:absolute;left:10px;bottom:84px;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
#px-notes .pn{border:7px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 7px;color:#3b2412;font-size:19px;padding:0 6px;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#px-banner{position:absolute;left:50%;top:26%;transform:translateX(-50%);border:14px solid transparent;border-image:url(assets/px/ui/npick/banner.png) 8 14 fill / 14px 28px;color:#fff6c8;font-size:26px;padding:2px 36px;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#px-label{position:fixed;border:5px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 5px;color:#3b2412;font-size:17px;padding:0 4px;white-space:nowrap;transform:translateX(0)}
@media (max-width:640px){#px-clock{top:44px;width:144px;height:84px} #px-clock .pc-date{left:62px;top:16px;font-size:15px} #px-clock .pc-time{left:62px;top:42px;font-size:20px} #px-money{top:130px;width:120px;height:30px;font-size:18px} #px-status{top:162px} #px-notes{bottom:auto;top:86px;left:6px} #px-notes .pn{font-size:16px}}

.hbtn{background:none!important;border:0!important;padding:0!important;width:40px;height:40px}
.hbtn img{width:36px;height:36px;image-rendering:pixelated}

#px-notes .pn{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}
#px-notes .pn .pxi,#px-status .pxi,#px-label .pxi{display:inline-block;flex:none}
#h-zone.pill,.hud-tl .pill{font-size:20px!important;font-weight:normal!important;padding:0 6px!important}
#h-quest,#h-task,#h-target,#h-story,#h-alert{font-family:var(--font);font-size:18px}

.pxi{width:20px;height:20px;vertical-align:-4px;image-rendering:pixelated;margin:0 1px;display:inline-block}
#h-story,#h-quest,#h-task,#h-target{white-space:nowrap}

/* ===== plan-22 B2: túi đồ kiểu Stardew (vô hạn, kéo-thả) ===== */
#menu .mframe{width:min(790px,100%)}
#menu .inv{display:flex;flex-direction:column;gap:4px;align-items:center}
#menu .inv-grid{display:grid;grid-template-columns:repeat(12,44px);gap:2px;justify-content:center}
#menu .inv-sep{width:100%;height:4px;background:#352022;margin:2px 0}
#menu .slot.iv{width:44px;height:44px;border:8px solid transparent;border-image:url(assets/px/ui/hotbar/slot.png) 8 fill / 8px;background:none;box-shadow:none;touch-action:none;user-select:none}
#menu .slot.iv:hover,#menu .slot.iv.drop{border-image-source:url(assets/px/ui/hotbar/slot_on.png)}
#menu .slot.iv.sel{border-image-source:url(assets/px/ui/hotbar/slot_on.png);transform:translateY(-2px)}
#menu .slot.iv.lift>*{opacity:.3}
#menu .slot.iv .pxi{width:32px;height:32px;margin:-6px;pointer-events:none}
#menu .slot.iv .emo{pointer-events:none}
#menu .slot.iv .n{right:-6px;bottom:-8px;font:14px VT323,monospace;color:#fff6c8;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022}
#menu .slot.iv .tier{right:-5px;bottom:-8px;font:14px VT323,monospace}
#menu .slot.iv .ik{position:absolute;left:-5px;top:-7px;font:11px VT323,monospace;color:#3b2412;font-style:normal;pointer-events:none}
#menu .inv-grid.hb{padding-bottom:2px}
#menu .inv-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:6px}
#menu .inv-tools .mhint{flex:1}
#menu .inv-tr{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none}
#menu .inv-tr .pxi.trash{width:36px;height:36px}
#menu .inv-tr.drop{transform:scale(1.15)}
#menu .fl-t{font:16px VT323,monospace;color:#fff6c8}
#inv-ghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%)}
#inv-ghost .pxi{width:40px;height:40px;image-rendering:pixelated}
#inv-tt{position:fixed;z-index:59;pointer-events:none;border:8px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 8px;color:#3b2412;font:18px VT323,monospace;padding:0 6px;max-width:260px;line-height:1.1}
#inv-tt[hidden]{display:none}
#inv-tt b{font-size:21px;font-weight:normal}
#inv-tt .mhint{color:#6b4a2e;font-size:16px}
#inv-tt .tt-pr .pxi{width:18px;height:18px;vertical-align:-3px}
@media (max-width:640px){#menu .inv-grid{grid-template-columns:repeat(12,26px);gap:1px} #menu .slot.iv{width:26px;height:26px;border-width:4px;border-image-width:4px} #menu .slot.iv .pxi{width:20px;height:20px;margin:-3px} #menu .slot.iv .ik{display:none} #menu .slot.iv .n{font-size:11px;right:-3px;bottom:-5px}}
#menu .inv-tools .btn{width:auto;margin:0;padding:0 12px!important;font-size:19px}
#menu .inv-tools .mhint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
#menu .mtip{font-size:17px}
#menu .msell .btn{font-size:16px!important}

/* ===== plan-22 B3: hộp thoại kiểu Stardew + bảng chung một kiểu ===== */
.dlg,.dlg.px{width:min(900px,96vw)!important;margin-bottom:max(84px,env(safe-area-inset-bottom))}
.dlg.px{border-width:24px;border-image-width:24px}
.dlg-body{gap:16px;align-items:stretch}
.dlg-port,.dlg.px .dlg-port{order:2;width:128px!important;height:128px!important}
#d-port{width:128px!important;height:128px!important}
#d-av{display:none}
#d-text{font-size:26px!important;line-height:1.15;min-height:3.45em;color:#fff6c8}
.dlg-plate{font-size:26px!important}
#d-stats,#d-chips{font-size:16px} #d-hint{font-size:17px!important}
#d-more{font-size:22px}
@media (max-width:640px){.dlg-port,.dlg.px .dlg-port,#d-port{width:72px!important;height:72px!important} #d-text{font-size:20px!important} .dlg.px{border-width:14px;border-image-width:14px}}
/* nút ✕ pixel trên mọi bảng */
.ov .panel{position:relative}
.px-x{position:absolute;right:-4px;top:-4px;z-index:3;width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer}
.px-x img{width:36px;height:36px;image-rendering:pixelated;display:block}
.px-x:hover{transform:scale(1.08)}
.ov .panel h2{padding-right:36px;font-size:26px!important;font-weight:normal!important;color:#ffd45e}
.ov .panel h3{font-size:19px!important;color:#e8c99a!important;letter-spacing:0;text-transform:none}
.ov .panel,.ov .panel p{font-size:18px}
.ov .panel .dim{color:#c9ad88}
.pxt .pxi,.ov .pxi{width:20px;height:20px;vertical-align:-4px}
.ov .panel h2 .pxi{width:28px;height:28px;vertical-align:-6px}
/* dòng hàng (quầy, chế tạo, chuồng…) = ô giấy kiểu Stardew */
.ov .panel .hrow{border:7px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 7px;background:none!important;color:#3b2412;margin:3px 0;padding:0 6px;border-radius:0}
.ov .panel .hrow .dim,.ov .panel .hrow .tiny{color:#7a5634!important}
.ov .panel .hrow b{font-weight:normal;font-size:19px}
.ov .panel .hrow[style*="opacity:.7"]{border:0;opacity:1!important;color:#ffd45e;padding:6px 2px 0}
.ov .panel .hrow[style*="opacity:.7"] .dim{color:#c9ad88!important}
.ov .panel .chip{background:#352022!important;color:#ffd45e!important;border:0!important;font-size:16px;padding:0 6px;border-radius:0}
.ov .panel .hrow .btn{border-image:url(assets/px/ui/hud/counter.png) 6 fill / 6px!important;color:#ffd45e!important;font-size:17px!important;padding:0 10px!important;width:auto}
.ov .panel .hrow .btn[disabled]{opacity:.4}
.ov .panel.shop{width:min(900px,100%)}
.shopw{display:flex;gap:14px;min-height:0;flex:1}
.shop-side{flex:0 0 180px;display:flex;flex-direction:column;gap:8px;align-items:center}
.shop-port{border:8px solid transparent;border-image:url(assets/px/ui/dlg_port.png) 8 / 8px round;width:160px;height:160px;box-sizing:content-box}
.shop-port img{width:160px;height:160px;image-rendering:pixelated;display:block}
.shop-say{border:8px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 8px;color:#3b2412;font-size:18px!important;margin:0!important;padding:2px 6px;line-height:1.15}
.shop-main{flex:1;min-width:0;overflow:auto}
@media (max-width:640px){.shopw{flex-direction:column} .shop-side{flex:none;flex-direction:row} .shop-port,.shop-port img{width:64px;height:64px}}
/* plan-22 B4: điện thoại — máu dọc lên phải dưới đồng hồ (không đè hotbar / nút A) */
@media (pointer:coarse){#herobar{top:196px;bottom:auto;right:6px} #herobar .hb-hp{height:96px;width:22px} #herobar .hb-xp{height:88px;width:6px} #herobar .hb-num{display:none} #herobar .hb-lv{font-size:15px} #px-status{top:334px}}
@media (max-width:640px){#px-clock .pc-date{font-size:14px;line-height:1} #px-clock .pc-time{font-size:19px;top:46px}}

.ov .panel h2 img.face{width:64px;height:64px;image-rendering:pixelated;border:6px solid transparent;border-image:url(assets/px/ui/dlg_port.png) 8 / 6px round;flex:none}

#pxhud.behind #px-clock,#pxhud.behind #px-money,#pxhud.behind #px-status{opacity:.3;transition:opacity .2s}
#px-clock,#px-money,#px-status{transition:opacity .2s}

/* phím T: thú bay vào ô (toàn pixel: ảnh PixelLab, xoay nấc 90°, không mờ/không bóng) */
.fx-fly{position:fixed;left:0;top:0;width:40px;height:40px;z-index:70;pointer-events:none;image-rendering:pixelated}
.fx-ghost{opacity:.45;animation:fxFade .3s steps(3) forwards}
@keyframes fxFade{to{opacity:0}}
.fx-burst{position:fixed;z-index:71;pointer-events:none;image-rendering:pixelated;background-repeat:no-repeat;background-position:0 0}
@keyframes fxSheet{to{background-position:var(--fx-end) 0}}
#hotbar .hb-slot.hb-catch{animation:hbCatch .6s steps(6)}
@keyframes hbCatch{0%{transform:translateY(-10px) scale(1.25);border-image-source:url(assets/px/ui/hotbar/slot_on.png)}50%{transform:translateY(-4px) scale(1.1);border-image-source:url(assets/px/ui/hotbar/slot.png)}75%{border-image-source:url(assets/px/ui/hotbar/slot_on.png)}100%{transform:none}}
.fx-fly{width:48px;height:48px}
.fx-ghost{opacity:.7}
.fx-plus{position:fixed;z-index:72;pointer-events:none;font:28px VT323,monospace;color:#ffd45e;text-shadow:2px 0 0 #352022,-2px 0 0 #352022,0 2px 0 #352022,0 -2px 0 #352022;animation:fxPlus .8s steps(8) forwards}
@keyframes fxPlus{0%{transform:translateY(8px)}30%{transform:translateY(-10px)}100%{transform:translateY(-22px);opacity:0}}

#hotbar .hb-bag{width:44px;height:44px;margin-left:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:8px solid transparent;border-image:url(assets/px/ui/hotbar/slot.png) 8 fill / 8px;image-rendering:pixelated;box-sizing:border-box}
#hotbar .hb-bag img{width:32px;height:32px;margin:-6px;image-rendering:pixelated;pointer-events:none}
#hotbar .hb-bag.hb-catch{animation:hbCatch .6s steps(6)}
/* 2026-10-15 anh: ô Ấn Linh (gọi / thu đội linh thú) cạnh ô Rocky — hotbar.js ltHTML; vòng máu đội quanh quả cầu, đếm giây khi cả đội nghỉ */
#hotbar .hb-lt{margin-left:4px;cursor:pointer}
#hotbar .hb-lt img.lt-pe{position:absolute;left:5px;top:5px;width:18px;height:18px;margin:0}
#hotbar .hb-lt .lt-hp{position:absolute;left:-4px;top:-4px;width:36px;height:36px;border-radius:50%;pointer-events:none;-webkit-mask:radial-gradient(circle,transparent 15px,#000 16px,#000 18px,transparent 18.5px);mask:radial-gradient(circle,transparent 15px,#000 16px,#000 18px,transparent 18.5px)}
#hotbar .hb-lt .lt-cd{position:absolute;left:-6px;right:-6px;top:5px;text-align:center;font:20px/1 VT323,monospace;color:#fff6c8;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022,1px 0 0 #352022;pointer-events:none}
#hotbar .hb-lt .lt-n{position:absolute;right:-7px;top:-9px;font:14px/1 VT323,monospace;color:#fff6c8;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022,1px 0 0 #352022;pointer-events:none}
#hotbar .hb-lt .lt-l{position:absolute;left:-8px;right:-8px;bottom:-9px;text-align:center;font:14px/1 VT323,monospace;font-style:normal;color:#fff6c8;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022,1px 0 0 #352022;pointer-events:none}
#hotbar .hb-lt.st-rest .lt-l,#hotbar .hb-lt.dim .lt-l{color:#a39d94}
#hotbar .hb-lt.dim img{filter:grayscale(1);opacity:.5}
@media (max-width:640px){#hotbar .hb-bag{width:30px;height:30px;border-width:5px;border-image-width:5px} #hotbar .hb-bag img{width:22px;height:22px;margin:-4px}}

/* plan-25: bảng chọn phe */
.ov .panel.faction{width:min(820px,100%)}
.fac-row{display:flex;gap:14px;flex-wrap:wrap}
.fac-col{flex:1 1 300px;display:flex;flex-direction:column;align-items:center;gap:6px;border:8px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 8px;color:#3b2412;padding:6px 8px}
.fac-col .face{width:128px;height:128px;image-rendering:pixelated;border:6px solid transparent;border-image:url(assets/px/ui/dlg_port.png) 8 / 6px round}
.fac-col b{font-size:24px;font-weight:normal}
.fac-col p{font-size:18px!important;margin:0!important;text-align:center;color:#3b2412}
.fac-xealist b{color:#7a2a6a} .fac-noxx b{color:#2e6a3a}
.fac-col .btn{width:auto!important;font-size:19px!important}
.ov .panel.faction > .px-x{display:none}

/* 2026-10-10 anh: bỏ ô đếm đá dưới đồng hồ (đá đã hiện trên thanh công cụ) */
#px-money{display:none!important}
#px-status{top:166px}
@media (max-width:640px){#px-status{top:134px}}
@media (pointer:coarse){#herobar{top:170px} #px-status{top:300px}}

/* 2026-10-10 QA: thẻ Mua nhanh — nút mua gọn bên phải, không che tên công cụ (.btn mặc định width:100%) */
#menu .shoprow .hwho{flex:1 1 auto;min-width:6em}
#menu .shoprow .btn{width:auto;flex:0 0 auto;margin:0;padding:2px 12px!important;font-size:16px;white-space:nowrap;min-height:0}

/* ===== plan-25 B5: điện thoại (dọc ~390×844, ngang ~844×390) — mọi luật nằm trong @media → desktop giữ nguyên ===== */
#menu .m-x{display:none}   /* nút ✕ đóng túi: chỉ hiện trên màn cảm ứng (desktop có Esc) */
/* chung cho điện thoại dọc + xoay ngang */
@media (max-width:640px), (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  /* thanh công cụ: 2 hàng × 6 ô 40px + nút Túi bên phải (1 hàng 30px cũ tràn ra 2 mép màn, ô nhỏ khó chạm, icon 22px mờ) */
  #hotbar .hb-bar{display:grid;grid-template-columns:repeat(6,40px) 40px;grid-auto-rows:40px;gap:2px;border-width:6px;border-image-width:6px}
  #hotbar .hb-slot{width:40px;height:40px;border-width:8px;border-image-width:8px}
  #hotbar .hb-slot img{width:32px;height:32px;margin:-8px}
  #hotbar .hb-bag{grid-column:7;grid-row:1/span 2;align-self:center;width:40px;height:40px;margin-left:0;border-width:8px;border-image-width:8px}
  #hotbar .hb-bag img{width:32px;height:32px;margin:-8px}
  #hotbar .hb-k{display:none}
  #menu .slot.iv .ik{display:none}   /* số phím 1–= trên ô túi: điện thoại không có bàn phím */
  /* túi: thẻ gọn (5 thẻ còn 2 hàng), chữ mô tả 11px → 14px */
  .mtabs{gap:4px}
  .mtab{padding:6px 5px;gap:3px}
  .mtab span{font-size:16px}
  #menu .mhint{font-size:14px}
  #menu .tiny{font-size:13px}
  #menu .mstat{font-size:15px}   /* tên chỉ số không nhỏ hơn dòng mô tả */
  #menu .inv-tools .mhint{white-space:normal;line-height:1.05}
  /* băng thông báo lớn + thông báo nhỏ: xuống dòng thay vì cắt '…' / tràn khỏi màn */
  #px-banner{white-space:normal;width:max-content;max-width:calc(100vw - 24px);font-size:19px;line-height:1.05;padding:2px 10px;text-align:center}
  #px-notes .pn{display:block;white-space:normal;line-height:1.05}
  /* bảng: cuộn được khi màn thấp (bảng chọn phe không có vùng cuộn → nút chọn rơi khỏi màn) */
  .ov .panel{overflow-y:auto}
  .ov .panel>.px-x{right:0;top:0}
  .ov .panel .chip{display:inline-block;max-width:100%}   /* giá '2 🪨' không bị tách đôi số / icon */
  .fac-col .face{width:96px;height:96px}
  /* chọn quốc gia: tên dài không cách (Singapore/Malaysia) tràn ô + thanh cuộn ngang */
  #npick .npf{min-width:0}
  #npick .npf b{overflow-wrap:anywhere}
  /* màn hình chính: '★ Credits' rớt 2 dòng làm hàng nút lệch */
  #title .trow{align-items:stretch}
  #title .trow .btn{white-space:nowrap;font-size:18px}
  #title .tiny{font-size:14px}
}
/* chỉ màn hẹp (dọc) */
@media (max-width:640px){
  /* túi đồ: lưới 6 cột ô 44px như desktop (12 cột 26px cũ: số '300' bị cắt, ô quá nhỏ); 2 hàng đầu = thanh công cụ */
  #menu .inv-grid{grid-template-columns:repeat(6,44px);gap:2px}
  #menu .slot.iv{width:44px;height:44px;border-width:8px;border-image-width:8px}
  #menu .slot.iv .pxi{width:32px;height:32px;margin:-6px}
  #menu .slot.iv .n{font-size:14px;right:-6px;bottom:-8px}
  #menu .mstat{grid-template-columns:24px 100px 1fr 18px}
  /* thông báo nhỏ: cột trái dưới dòng nhiệm vụ, không đè đồng hồ / thanh máu */
  #px-notes{top:178px;left:6px;bottom:auto}
  #px-notes .pn{max-width:calc(100vw - 172px)}
  /* bản đồ thế giới: canvas 80vw rộng hơn khung → thanh cuộn ngang; sổ tay: cột Thành tựu tràn đè lên ô tìm 'Nghệ sĩ đã gặp' */
  #m-cv{width:min(300px,100%);height:auto}
  .codexwrap .ccol{flex:none}
}
@media (pointer:coarse){
  #menu .mfoot{display:none}   /* dòng phím tắt bàn phím */
  .mtab{min-height:38px}
  #menu .slot.iv:hover:not(.drop):not(.sel){border-image-source:url(assets/px/ui/hotbar/slot.png)}   /* chạm xong ô dưới ngón tay không bị 'dính' viền sáng như đang chọn */
  #menu .mtabs .m-x{display:block;position:static;margin-left:auto;align-self:center}
  .btn{min-height:40px}
  #menu .msell .btn,#menu .shoprow .btn,#menu .inv-tools .btn{min-height:38px}
  #title select{min-height:40px}
  /* nhãn ô lưu test (preset): dải 1 dòng sát đáy, dưới D-pad / nút A (trước đè lên nút A) */
  #preset-chip{left:6px!important;right:6px!important;bottom:2px!important;max-width:none!important;padding:1px 6px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;line-height:1.25}
  #preset-chip br,#preset-chip>span{display:none}
  #preset-chip a{margin-left:8px}
  /* câu cá: bảng câu vẽ ở đáy màn → ẩn D-pad (không đi được khi câu), nút A nhích sát mép phải */
  body[data-mode=fish] #touch .dpad,body[data-mode=seafish] #touch .dpad{visibility:hidden}
  body[data-mode=fish] #btn-a,body[data-mode=seafish] #btn-a{right:8px}
  body[data-mode=fish] #seis,body[data-mode=seafish] #seis{visibility:hidden}   /* polish 2026-10-10: máy đo địa chấn (đáy phải) đè chữ gợi ý của bảng câu */
  /* máy tính bảng: ☰ / 📷 cũng bị đồng hồ (192×112) che → xuống dưới đồng hồ (điện thoại dọc / ngang có luật riêng bên dưới) */
  #btn-menu{top:166px;right:10px}
  #btn-photo{top:166px;right:56px}
  #herobar{top:214px}
  #px-status{top:348px}
}
@media (max-width:640px) and (pointer:fine){#preset-chip{bottom:110px!important}}   /* cửa sổ desktop hẹp: nhãn test nằm trên thanh công cụ 2 hàng */
@media (pointer:coarse) and (max-width:640px){
  /* nút ☰ (menu/Esc) + 📷 bị khung đồng hồ che mất → xuống ngay dưới đồng hồ; máu + trạng thái lùi xuống theo */
  #btn-menu{top:134px;right:10px}
  #btn-photo{top:134px;right:56px}
  #herobar{top:182px}
  #px-status{top:316px}
}
@media (pointer:coarse) and (max-width:640px) and (max-height:720px){
  /* máy thấp (iPhone SE 375×667): hạ D-pad / nút A sát đáy hơn để thanh công cụ không lên tới giữa màn (chỗ nhân vật đứng) */
  .dpad{bottom:26px}
  #btn-a{bottom:46px}
  #hotbar{bottom:192px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  /* điện thoại xoay ngang: trước đây thanh công cụ nằm sát mép trên dưới đồng hồ, thanh máu + ô trạng thái đè nút A, ☰/📷 bị đồng hồ che */
  #px-clock{top:44px;width:144px;height:84px}
  #px-clock .pc-date{left:62px;top:16px;font-size:14px;line-height:1}
  #px-clock .pc-time{left:62px;top:46px;font-size:19px}
  #btn-menu{top:52px;right:160px}
  #btn-photo{top:52px;right:206px}
  #herobar{top:134px;right:6px}
  #px-status{top:134px;right:62px}
  .dpad{bottom:24px}
  #btn-a{bottom:30px}
  #hotbar{bottom:6px;left:calc(50% + 43px)}   /* giữa khe D-pad ↔ nút A */
  #seis{top:10px;bottom:auto;left:50%;right:auto;transform:translateX(-50%)}
  #touch-skills{flex-direction:row;right:100px;bottom:30px}
  #px-notes{top:auto;bottom:110px;left:190px}
  #px-notes .pn{max-width:min(360px,calc(100vw - 480px))}
  #preset-chip{right:auto!important;width:172px}
  #menu .mframe{position:relative}
  #menu .mtabs{padding-right:40px}
  #menu .mtabs .m-x{position:absolute;right:2px;top:2px}
}

/* 2026-10-10: thanh âm lượng nhạc nền / hiệu ứng trong Cài đặt */
#menu .mvol{display:flex;gap:10px;align-items:center;margin:8px 0;font-size:18px}
#menu .mvol span{min-width:7em}
#menu .mvol input{flex:1;accent-color:#ffd45e;min-height:28px}
#menu .mvol b{min-width:3.2em;text-align:right;font-weight:normal}
/* 2026-10-11 anh: nút ⟳ xoay ngang — chỉ hiện trên điện thoại đang cầm DỌC */
#btn-rot{display:none;width:40px!important;height:40px!important;font-size:18px!important}
@media (pointer:coarse) and (orientation:portrait){ #btn-rot{display:block;position:fixed;top:134px;right:102px} }
/* 2026-10-11 anh: cần điều khiển tròn (kéo thả) thay D-pad 4 nút */
#joy{position:absolute;left:10px;top:10px;width:140px;height:140px;border-radius:50%!important;pointer-events:auto;touch-action:none}
#joy .jring{position:absolute;inset:0;border-radius:50%!important;background:rgba(20,16,32,.38);border:3px solid rgba(255,255,255,.28);box-shadow:inset 0 0 0 10px rgba(255,255,255,.05)}
#joy .jknob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%!important;background:rgba(255,212,94,.72);border:3px solid rgba(70,40,20,.85);box-shadow:0 3px 0 rgba(0,0,0,.35);transition:transform .08s}
#joy.on .jknob{transition:none;background:rgba(255,212,94,.9)}
/* 2026-10-11 anh: ĐIỆN THOẠI bỏ thanh công cụ PC → nút A THEO NGỮ CẢNH (icon + chữ việc sẽ làm) + nút ĂN tròn + nút Túi (src/mslots.js xếp theo tâm nút A) */
#mslots{position:absolute;inset:0;pointer-events:none}
#mslots[hidden]{display:none}
#mslots .ms-eat,#mslots .ms-bag{position:absolute;pointer-events:auto;touch-action:none;-webkit-touch-callout:none;box-sizing:border-box;border-radius:50%;background:url(assets/px/ui/mslots/ring.png) no-repeat center/100% 100%;image-rendering:pixelated;display:flex;align-items:center;justify-content:center}
#mslots .ms-eat{width:58px;height:58px}
#mslots .ms-eat img{width:32px;height:32px;margin-top:-6px;image-rendering:pixelated;pointer-events:none}
#mslots .ms-eat.dim{opacity:.5}
#mslots .ms-eat .ms-v{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font:16px/1 VT323,monospace;font-style:normal;color:#fff6c8;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022,1px 0 0 #352022;pointer-events:none}
#mslots .ms-bag{width:48px;height:48px}
#mslots .ms-bag img{width:30px;height:30px;image-rendering:pixelated;pointer-events:none}
#mslots .ms-bag.hb-catch{animation:msCatch .5s steps(5)}
@keyframes msCatch{0%{transform:scale(1.2)}60%{transform:scale(1.08)}100%{transform:none}}
.ms-n{position:absolute;right:6px;top:4px;font:15px/1 VT323,monospace;color:#fff6c8;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022,1px 0 0 #352022;pointer-events:none}
/* nút A tròn PixelLab: icon món/việc sẽ làm + chữ ngắn; thiếu dụng cụ → icon xám */
#btn-a.ms-a{width:84px!important;height:84px!important;border:none!important;border-radius:50%!important;background:url(assets/px/ui/mslots/btn_a.png) no-repeat center/100% 100%!important;image-rendering:pixelated;padding:0;display:flex;align-items:center;justify-content:center}
#btn-a.ms-a:active{transform:translateY(2px)}
#btn-a .ms-a-l{font:40px/1 VT323,monospace;color:#fff6c8;text-shadow:2px 2px 0 #6b3416;pointer-events:none}
#btn-a img{width:40px;height:40px;margin-top:-10px;image-rendering:pixelated;pointer-events:none}
#btn-a .ms-a-v{position:absolute;left:-10px;right:-10px;bottom:6px;text-align:center;white-space:nowrap;font:17px/1 VT323,monospace;font-style:normal;color:#fff6c8;text-shadow:1px 1px 0 #6b3416,-1px 0 0 #6b3416,0 -1px 0 #6b3416,1px 0 0 #6b3416;pointer-events:none}
#btn-a .ms-a-l:only-child{font-size:40px} #btn-a .ms-a-l:not(:only-child){font-size:32px;margin-top:-14px}
#btn-a.ms-no img{filter:grayscale(1);opacity:.55}
#btn-a.ms-no .ms-a-v{color:#c9b9a6}
@media (pointer:coarse){
  #hotbar{display:none!important}   /* thanh công cụ PC ẩn hẳn trên màn cảm ứng (dọc + ngang) */
  #touch{z-index:8}   /* nút cảm ứng nằm TRÊN nhãn hành động / thông báo (#pxhud z 7), dưới bảng (.ov z 10) */
  #btn-a{right:calc(28px + env(safe-area-inset-right))!important;bottom:calc(70px + env(safe-area-inset-bottom))!important}
  body[data-mode=fish] #mslots,body[data-mode=seafish] #mslots{display:none}
}
@media (pointer:coarse) and (orientation:portrait){ #seis{left:10px;right:auto;top:auto;bottom:226px} }   /* máy đo địa chấn: trên cần tròn (đáy phải giờ là cụm A / Ăn / Túi) */
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  #btn-a{right:calc(22px + env(safe-area-inset-right))!important;bottom:calc(44px + env(safe-area-inset-bottom))!important}
}
/* 2026-10-11 anh (điện thoại thật, Chrome có thanh địa chỉ): nút cảm ứng + HUD bám VÙNG NHÌN THẤY THẬT (--vv* do main.js đo bằng visualViewport), không bao giờ nằm dưới mép thấy được */
html,body{height:100%;height:100dvh}
@media (pointer:coarse){
  #touch,#pxhud{inset:auto;left:var(--vvl,0px);top:var(--vvt,0px);width:var(--vvw,100%);height:var(--vvh,100%)}
  .dpad{margin-left:env(safe-area-inset-left);margin-bottom:env(safe-area-inset-bottom)}
  #px-label{display:none!important}   /* nhãn hành động nổi trên đầu người: điện thoại đã có chữ việc làm ngay trên nút A → bỏ, không che nhân vật giữa màn */
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  /* chip trạng thái: cột gọn bên phải dưới đồng hồ (trước nằm ngang giữa màn, đè người chơi); không xuống tới cụm nút A */
  #px-status{top:134px;right:120px;max-width:200px;flex-direction:column;align-items:flex-end;flex-wrap:nowrap;max-height:calc(var(--vvh,100vh) - 290px);overflow:hidden}
  #px-status .ps{font-size:14px;max-width:200px;overflow:hidden;text-overflow:ellipsis}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:430px){
  #herobar .hb-hp{height:64px} #herobar .hb-xp{height:58px}   /* máy thấp: thanh máu ngắn lại để không chạm nút A */
}
/* 2026-10-13 (sửa): ngất gọn — số đếm trên đầu xác + 2 ô vuông dưới xác (hero.js placeFaint); màn chỉ ngả xám nhẹ, KHÔNG tối */
/* KHÔNG dùng CSS filter lên canvas game: Safari điện thoại + Chrome headless vẽ ra màn ĐEN (anh chụp 2026-10-13) → lớp phủ mờ */
#faint-ui::before{content:'';position:fixed;inset:0;background:rgba(30,24,40,.28);pointer-events:none}
body.fainted #faint-ui{position:fixed;left:0;top:0;width:0;height:0;z-index:9;pointer-events:none}
#faint-ui .fa-cd{position:absolute;transform:translate(-50%,-100%);font:28px VT323,monospace;color:#fff6c8;text-shadow:2px 0 #352022,-2px 0 #352022,0 2px #352022,0 -2px #352022;line-height:1}
#faint-ui .fa-row{position:absolute;transform:translateX(-50%);display:flex;gap:4px;pointer-events:auto}
#faint-ui button{position:relative;width:var(--cell);height:var(--cell);padding:3px;border:3px solid #352022;background:#f3e2c0;box-shadow:inset -2px -2px #c9a874;cursor:pointer;display:flex;align-items:center;justify-content:center;image-rendering:pixelated}
#faint-ui button img{width:100%;height:100%;image-rendering:pixelated}
#faint-ui button i{position:absolute;right:1px;bottom:-1px;font:13px VT323,monospace;font-style:normal;color:#352022}
#faint-ui button:disabled{filter:grayscale(1);opacity:.5}
/* plan-34 (anh 2026-10-14): thanh Ki XANH LÁ đứng cạnh thanh máu — khung kiv.png (khung máu PixelLab đổi màu), 7 vạch chia mờ, loé ngắn khi đầy 1 nấc / tiêu */
#herobar .hb-kv{position:relative;width:32px;height:160px;background:url(assets/px/ui/hud/kiv.png) no-repeat 0 0/100% 100%;image-rendering:pixelated;pointer-events:auto}
#herobar .hb-kslot{position:absolute;left:31%;right:31%;top:13%;bottom:4%;overflow:hidden}
#herobar .hb-kslot .kf{position:absolute;left:0;right:0;bottom:0;display:block;height:0;background:#3fcf5e;box-shadow:inset 2px 0 0 #9dffb0,inset -2px 0 0 #1e8a3a}
#herobar .hb-kslot .kt{position:absolute;left:0;right:0;height:1px;background:rgba(20,12,10,.55);pointer-events:none}
#herobar .hb-kv.glow .kf{background:#8dffa6;box-shadow:inset 2px 0 0 #fff,inset -2px 0 0 #3fcf5e,0 0 6px #8dffa6}
#herobar .hb-num{right:82px}
@media (pointer:coarse){#herobar .hb-kv{height:96px;width:22px}}
/* plan-34 v2 (anh tự bấm): nút Lộn / Lướt điện thoại — icon PixelLab ui/ki/*.png, vòng hồi chiêu quét tròn (--cd), xám khi thiếu Ki */
#touch .kib{width:50px!important;height:50px!important;padding:0;display:flex;align-items:center;justify-content:center;border:none!important;border-radius:50%!important;background:url(assets/px/ui/mslots/ring.png) no-repeat center/100% 100%!important;image-rendering:pixelated;box-sizing:border-box}
#touch .kib img{width:28px;height:28px;image-rendering:pixelated;pointer-events:none;margin-top:-4px;position:relative;z-index:1}
#touch .kib i{position:absolute;left:0;right:0;bottom:-7px;font:15px/1 VT323,monospace;color:#fff6c8;font-style:normal;text-align:center;pointer-events:none;z-index:2;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022,1px 0 0 #352022}
#touch .kib s{position:absolute;inset:5px;border-radius:50%;pointer-events:none;z-index:1;background:conic-gradient(rgba(20,12,10,.6) calc(var(--cd,0) * 360deg),transparent 0)}
#touch .kib.low img{filter:grayscale(1);opacity:.5}
#touch .kib[hidden]{display:none}
/* ===== 2026-10-15 (tác nhân HUD, anh: "bố trí lại bố cục thanh bay và máu Ki hợp lí hơn") =====
   Điện thoại: chip trạng thái (Rocky, quái dưới kia…) về cột THÔNG TIN trái-trên ngay dưới tên vùng / nhiệm vụ (hud.js đặt top theo đáy .hud-tl)
   → cột phải chỉ còn đồng hồ · nút · Cấp + máu/Ki · cần độ cao (sky.js placeWidget bám ngay dưới cụm máu). Trước: chip Rocky rộng thò vào giữa màn, đẩy cần độ cao xuống.
   Ngang: Cấp + máu/Ki sang trái đồng hồ (dưới hàng ☰📷), cần độ cao mép phải dưới đồng hồ — trước cần đè thẳng lên thanh máu. Ki luôn cùng chiều cao máu. */
@media (pointer:coarse){
  #px-status{left:10px;right:auto;top:84px;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;max-width:min(240px,calc(100% - 180px));max-height:none;overflow:visible}
  #px-status .ps{max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  #herobar{top:134px;right:10px}   /* 2026-10-15 v2 (anh: cụm máu lơ lửng 'kì kì'): MỘT khối bám mép phải ngay dưới đồng hồ, thẳng hàng mép phải đồng hồ */
  body.altw-on #herobar{right:72px}   /* đang có cần độ cao (sky.js bật lớp): máu/Ki bên trái, cần độ cao bên phải — cùng đỉnh, cùng đáy */
  #herobar .hb-hp,#herobar .hb-kv{width:30px;height:clamp(40px,calc(var(--vvh,100vh) - 300px),90px)}
  #herobar .hb-xp{width:8px;height:clamp(34px,calc(var(--vvh,100vh) - 306px),84px)}
  #px-status .ps{font-size:14px}
  #px-notes{top:120px;bottom:auto;left:6px}   /* thông báo: dưới chip trạng thái cột trái (hud.js), không còn nằm giữa màn đè người / trùm */
  #px-notes .pn{max-width:min(255px,calc(50vw - 60px));font-size:16px}   /* hẹp bằng cột tên vùng: không lấn sang nhãn / thanh máu trùm giữa trên */
}
@media (pointer:coarse) and (orientation:portrait) and (max-width:640px){
  .hud-tl{max-width:calc(100% - 166px)}   /* tên vùng dài (Cổng Trời · Ngô Công Lôi Thần) xuống dòng thay vì lấn dưới đồng hồ */
}
/* ===== plan-44 đợt A (2026-10-17) ===== */
/* D3: Việc kế tiếp — 1 dòng nhỏ dưới tên vùng */
#h-next{margin-top:3px;width:max-content;max-width:min(460px,calc(100vw - 240px));font-size:17px;line-height:1.1;color:#fff6c8;background:rgba(13,11,20,.66);border-radius:4px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#h-next[hidden]{display:none}
#h-next .nx-k{color:#ffd45e}
#h-next .nx-sub{color:#9fe3ff}
#h-next .pxi{width:16px;height:16px;vertical-align:-3px}
@media (pointer:coarse){#h-next{font-size:14px;max-width:calc(100vw - 180px)}}
/* Q4 + M1: thông báo dài xuống dòng, có ×; điện thoại tối đa 2 dòng (chạm để mở hết) */
#px-notes .pn{display:flex!important;white-space:normal;overflow:visible;text-overflow:clip;max-width:min(420px,calc(100vw - 24px));line-height:1.08;pointer-events:auto;align-items:flex-start}
@media (pointer:coarse) and (orientation:portrait){#px-notes .pn{max-width:calc(100vw - 172px)}}
@media (pointer:coarse) and (orientation:landscape){#px-notes .pn{max-width:min(300px,calc(50vw - 60px))}}
#px-notes .pn .pn-t{flex:1 1 auto;min-width:0;display:block}
#px-notes .pn .pn-t .pxi{display:inline-block;vertical-align:-3px}
#px-notes .pn-x{flex:none;margin:-2px -4px 0 4px;width:20px;height:20px;padding:0;border:none;background:rgba(59,36,18,.18);color:#3b2412;font:bold 16px/18px var(--font,monospace);border-radius:3px;cursor:pointer;pointer-events:auto}
@media (pointer:coarse){
  #px-notes .pn:not(.open) .pn-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #px-notes .pn-x{width:24px;height:24px;font-size:18px;line-height:22px}
}
/* Q1: hỏi trước khi ngủ — hộp nhỏ giữa dưới, không che cảnh */
#p44-sleep,.p44box{position:fixed;left:50%;bottom:118px;transform:translateX(-50%);z-index:30;border:7px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 7px;color:#3b2412;font-family:var(--font);font-size:19px;padding:2px 8px;text-align:center;max-width:calc(100vw - 24px)}
#p44-sleep[hidden],#p44-ask[hidden],#p44-guest[hidden],#h-card[hidden],#d-acts[hidden]{display:none}
#p44-sleep .sq,.p44box .sq{margin:2px 0 4px}
.p44box[hidden]{display:none}
.hc-btns{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.hc-btns .btn{font-size:17px;padding:3px 10px;width:auto!important;margin:0!important;flex:0 0 auto}
/* Q7 + X1: nút trong khung thoại */
#d-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
#d-acts .dact{font-size:15px;padding:1px 10px;min-height:0;width:auto!important;margin:0!important;flex:0 0 auto}
/* R1: thẻ nghệ sĩ trên Bia Vinh Danh */
#hall .panel{position:relative}
#h-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 20px));z-index:3;border:12px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 12px;color:#3b2412;padding:4px 6px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
#h-card .hc-top{display:flex;gap:10px;align-items:center}
#h-card .hc-top .av{width:48px;height:48px;image-rendering:pixelated}
#h-card .hc-st{margin-top:4px;font-size:16px}
#h-card .good{color:#2e7d32} #h-card .badt{color:#b3261e}
#h-list .hrow[data-id]{cursor:pointer}
/* Q8: hỏi đi xem vùng chưa mở (màn tiêu đề) + chip 'đang đi xem' */
.p44ov{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
.p44ov .panel{max-width:min(420px,calc(100vw - 24px));text-align:center;font-size:18px}
#p44-guest{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:9;border:6px solid transparent;border-image:url(assets/px/ui/hud/box.png) 6 fill / 6px;color:#3b2412;font-family:var(--font);font-size:15px;padding:0 6px;pointer-events:none;max-width:calc(100vw - 260px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (pointer:coarse) and (max-width:640px){#p44-guest{top:auto;bottom:6px;max-width:calc(100vw - 20px)}}
/* D4: bản đồ Vùng này */
#m-tabs{display:flex;gap:6px;margin:2px 0 8px}
#m-tabs .btn{font-size:17px;padding:2px 12px}
#map .mapwrap[hidden],#m-zone[hidden],#m-tabs[hidden]{display:none!important}
#m-zone{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;min-height:0;overflow:auto}
#m-zcv{width:min(520px,100%);height:auto;image-rendering:auto;border:2px solid var(--line);background:#0d0b14}
#m-zleg{flex:1;min-width:160px;display:flex;flex-direction:column;gap:3px;font-size:16px}
#m-zleg .zl{display:flex;gap:6px;align-items:center}
#m-zleg .zi{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:none}
#m-zleg .zi img{width:20px;height:20px;image-rendering:pixelated}
#m-zleg .zi i{width:10px;height:10px;border-radius:50%;border:2px solid #1c1a24}
@media (max-width:640px){#m-zone{flex-direction:column;align-items:center} #m-zleg{width:100%}}
@media (pointer:coarse) and (max-width:640px){#p44-sleep,.p44box{font-size:16px;bottom:150px} .hc-btns .btn{font-size:15px;padding:2px 8px}}
.p44-earn{color:#ffd45e}
/* ===== plan-44 đợt D ===== */
/* R6: album ảnh (src/album.js) */
.al-ov .al-panel{width:min(560px,calc(100vw - 20px));max-height:calc(100vh - 24px);overflow-y:auto;overflow-x:hidden;padding:12px;box-sizing:border-box}
.al-head{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:6px;padding-right:34px;min-height:36px}
.al-head h2{margin:0;font-size:18px}
.al-head .btn{width:auto;margin:0;padding:5px 10px;font-size:14px;flex:none}
.al-head .dim{flex:1;text-align:center;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-note{margin:0 0 6px}
.al-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
@media (max-width:480px){.al-grid{grid-template-columns:repeat(2,1fr)}}
.al-cell{display:flex;flex-direction:column;gap:2px;padding:4px;margin:0;border:2px solid var(--line);border-radius:8px;background:#0d0b14;cursor:pointer;color:inherit;font:inherit;min-height:44px;min-width:0;width:auto}
.al-cell img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;image-rendering:auto;background:#000}
.al-cell i{font-style:normal;font-size:13px;line-height:1.1;color:#cfc6b8;text-align:left}
.al-empty{font-size:16px;margin:12px 4px}
.al-big{display:block;max-width:100%;max-height:calc(100vh - 170px);margin:4px auto 8px;border-radius:6px;background:#000;image-rendering:pixelated}
.al-acts{display:flex;gap:6px}
.al-acts .btn{margin:0;padding:10px 6px;font-size:15px;min-height:44px}
.al-acts .al-del.arm{background:#8a2a2a;color:#fff}
/* M2: nút Đổi đồ nhanh cạnh A (điện thoại, src/mslots.js) */
#mslots .ms-sw{position:absolute;width:46px;height:46px;pointer-events:auto;touch-action:none;-webkit-touch-callout:none;box-sizing:border-box;border-radius:50%;background:url(assets/px/ui/mslots/ring.png) no-repeat center/100% 100%;image-rendering:pixelated;display:flex;align-items:center;justify-content:center}
#mslots .ms-sw:active{transform:translateY(2px)}
#mslots .ms-sw img{width:26px;height:26px;margin-top:-5px;image-rendering:pixelated;pointer-events:none}
#mslots .ms-sw img.ms-sw-cur{position:absolute;left:-4px;top:-4px;width:18px;height:18px;margin:0;padding:1px;border-radius:50%;background:rgba(26,22,38,.85);border:1px solid #6b3416;opacity:.9}
#mslots .ms-sw .ms-v{position:absolute;left:-4px;right:-4px;bottom:-6px;text-align:center;font:15px/1 VT323,monospace;font-style:normal;color:#fff6c8;text-shadow:1px 1px 0 #352022,-1px 0 0 #352022,0 -1px 0 #352022,1px 0 0 #352022;pointer-events:none}
#mslots .ms-sw .ms-sw-tip{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);white-space:nowrap;font:16px/1 VT323,monospace;font-weight:normal;color:#fff6c8;background:rgba(26,22,38,.88);border:1px solid #6b3416;border-radius:4px;padding:2px 6px;pointer-events:none}
#mslots .ms-sw .ms-sw-tip[hidden]{display:none}
/* D4: chạm bản đồ Vùng này để tự đi */
#m-zcv.zwalkable{cursor:crosshair}
#m-zleg .zwalk{margin-top:4px;font-size:15px}
#m-zleg .zwalk.zbad{color:#ff9a9a}

/* ===== plan-45 Đợt 5A (2026-10-18, tác nhân A) ===== */
/* D1: dòng phím tắt màn tiêu đề — to, sáng, dễ đọc (trước .tiny 11 px xám) */
#t-ctl{position:fixed;left:50%;top:8px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);margin:0;padding:2px 10px;font-size:15px;line-height:1.25;color:#efe3cc;text-shadow:1px 1px 0 #000;background:rgba(13,11,20,.55);border-radius:6px;z-index:11;pointer-events:none}   /* plan-45 D1 v2: 1 dòng ở MÉP TRÊN màn (trời), không còn xuống 3 dòng đè cầu tàu / thuyền */
/* BD2: ban đêm (từ 19:00) mặt đồng hồ HUD = ảnh trăng PixelLab (hud.js bật lớp .night) */
#px-clock.night{background-image:url(assets/px/ui/hud/clock_night.png)}
/* D12: đang đánh trùm (hud.js bật body.p45-boss) → ẩn máy đo địa chấn (trước nổi giữa mép trái, che sân) */
body.p45-boss #seis{display:none!important}
/* D12: điện thoại dọc — tên vùng luôn 1 dòng (dài thì …); cột HUD phải gọn lại: đồng hồ 112×65, 3 nút 36 px, 💬 dưới 📷, máu/Ki dưới 💬 */
@media (pointer:coarse) and (orientation:portrait) and (max-width:640px){
  .hud-tl{max-width:calc(100% - 136px)}
  #h-zone{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top;font-size:18px!important}
  #px-clock{top:44px;width:112px;height:65px}
  #px-clock .pc-date{left:50px;right:9px;top:12px;font-size:13px;line-height:1}
  #px-clock .pc-time{left:50px;right:9px;top:34px;font-size:18px}
  #btn-menu,#btn-photo,#btn-rot{top:114px!important;width:36px!important;height:36px!important}
  #btn-menu{right:10px!important} #btn-photo{right:50px!important} #btn-rot{right:90px!important}
  #btn-menu img,#btn-photo img,#btn-rot img{width:32px;height:32px}
  #herobar{top:200px}
  body.p45-boss #h-zone{font-size:16px!important}   /* tên trùm dài (Cổng Trời · Ngô Công Lôi Thần) vừa 1 dòng */
}
/* p121 (anh 04/11): nút ✕ đóng bảng (Túi đồ / Cài đặt…) cả trên MÁY TÍNH — cuối hàng thẻ */
@media (pointer:fine){ #menu .mframe{position:relative} #menu .mtabs .m-x{display:block;position:absolute;right:-22px;top:-22px} }