/* ============================================================
   Giao dien RPG: giay da, vien dong, nut noi khoi.
   Mau va do day vien deu di qua bien -> doi mot cho la doi het.
   ============================================================ */
:root{
  --ink:#30241a; --ink-soft:#7d6a52;
  --paper:#fbf1dc; --paper-2:#f4e5c6; --paper-3:#ecd9b2;
  --line:#d8bf90;
  --wood:#6b4426; --wood-d:#4a2d18; --wood-l:#8a5c33;
  --gold:#d9a93a; --gold-d:#a67a1d; --gold-l:#f2d98a;
  --green:#4f9a3f; --green-d:#376f2b;
  --blue:#3f7fc4; --blue-d:#2b5c94;
  --red:#c8463a; --red-d:#94302a;
  --rose:#e07aa8; --sta:#d9663a;
  --shadow:0 3px 0 rgba(74,45,24,.35), 0 12px 28px rgba(20,12,4,.35);
  --r:13px;
  /* Giao dien giay da chi co MOT che do sang. Noi ro ra de trinh duyet dang
     o che do toi khong tu boi den o nhap, thanh cuon va o tu dien. */
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  /* Bo chu nay phai TRUNG voi hang so FONT trong public/js/world.js — chu
     tren canvas (ten nhan vat, bien chi duong, bong thoai) va chu trong HUD
     deu doc cung mot bo, neu khong thi hai nua giao dien lech kieu chu nhau
     o may Windows (noi `ui-rounded` khong co that). */
  font:500 14px/1.45 ui-rounded,"SF Pro Rounded","Segoe UI Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:#1b2416; overflow:hidden; -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input{font:inherit;color:inherit}
canvas{display:block}
/* Firefox khong hieu ::-webkit-scrollbar — khong co hai dong duoi thi thanh
   cuon trong cac bang van la thanh cuon xam mac dinh, lech han voi khung giay. */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* --- Khung giay da dung chung --- */
.panel{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%),
    repeating-linear-gradient(0deg,rgba(160,120,70,.035) 0 2px,transparent 2px 5px),
    var(--paper);
  border:2px solid var(--wood);
  border-radius:var(--r);
  box-shadow:inset 0 0 0 2px var(--gold-l), inset 0 0 14px rgba(190,150,90,.28), var(--shadow);
}
.panel::before,.panel::after{
  content:"";position:absolute;width:9px;height:9px;border:2px solid var(--gold-d);pointer-events:none;
}
.panel::before{left:3px;top:3px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.panel::after{right:3px;bottom:3px;border-left:none;border-top:none;border-radius:0 0 4px 0}

/* ================= GATE ================= */
#gate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;z-index:50}
.gate-bg{position:absolute;inset:0;
  background:
    radial-gradient(900px 480px at 50% 120%, #2f6ba8 0%, #3f8ac4 30%, transparent 70%),
    radial-gradient(1200px 600px at 50% -10%, #ffd9a0 0%, #f2a85f 28%, #8fcf6d 62%, #3f7c42 100%);
}
.gate-bg::after{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(3px 3px at 70% 60%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 20%, rgba(255,255,255,.4) 50%, transparent 51%);
  background-size:260px 260px,330px 330px,200px 200px,290px 290px;
  animation:drift 40s linear infinite;
}
@keyframes drift{to{background-position:260px 260px,-330px 330px,200px -200px,-290px 290px}}

.gate-card{width:min(560px,100%);padding:24px;border-width:3px}
.gate-card header{text-align:center;margin-bottom:14px}
.gate-card h1{margin:0;font-size:32px;letter-spacing:-.5px;color:var(--wood-d);
  text-shadow:0 2px 0 var(--gold-l),0 3px 0 rgba(0,0,0,.12)}
.gate-card header p{margin:5px 0 0;color:var(--ink-soft);font-size:13px;font-weight:600}
.tabs{display:flex;gap:6px;background:var(--paper-3);padding:4px;border-radius:12px;margin-bottom:14px;
  box-shadow:inset 0 2px 5px rgba(120,85,40,.2)}
.tab{flex:1;padding:9px;border-radius:9px;font-weight:800;color:var(--ink-soft)}
.tab.on{background:var(--paper);color:var(--wood-d);box-shadow:0 2px 0 var(--line)}
.pane{display:none;flex-direction:column;gap:10px}
.pane.on{display:flex}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;color:var(--ink-soft)}
label input{padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:#fffdf6;font-weight:600}
label input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,154,63,.18)}
.primary{background:linear-gradient(180deg,var(--green),var(--green-d));color:#fff;font-weight:900;padding:13px;
  border-radius:12px;box-shadow:0 4px 0 #2b5721,inset 0 1px 0 rgba(255,255,255,.35);letter-spacing:.3px;
  transition:transform .08s,box-shadow .08s}
.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #2b5721}
.creator{display:flex;gap:14px;align-items:flex-start}
#preview{background:linear-gradient(#cdeab4,#9fd47f);border:2px solid var(--line);border-radius:12px;flex:none}
.creator-ctl{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:7px;border-radius:9px;border:2px solid var(--line);font-weight:800;font-size:13px;background:#fffdf6}
.seg button.on{background:var(--wood);color:#fff;border-color:var(--wood-d)}
.swatches{display:flex;align-items:center;gap:8px}
.swatches>span{width:38px;font-size:11px;font-weight:800;color:var(--ink-soft);flex:none}
.swatches>div{display:flex;gap:5px;flex-wrap:wrap}
.sw{width:22px;height:22px;border-radius:7px;border:2px solid rgba(0,0,0,.18)}
.sw.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--gold)}
#gate-err{min-height:18px;margin:10px 0 0;text-align:center;color:var(--red);font-weight:800;font-size:13px}
.gate-card footer{margin-top:8px;text-align:center;font-size:11px;color:#a8977c}

/* ---- Bang "Ve game" ---- */
.aboutlogo{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 2px}
.aboutlogo img{border-radius:16px;border:2px solid var(--gold-d);box-shadow:0 3px 0 rgba(74,45,24,.3);
  image-rendering:pixelated}
.aboutlogo b{margin-top:8px;font-size:19px;color:var(--wood-d);letter-spacing:-.3px;
  text-shadow:0 1px 0 var(--gold-l)}
.aboutlogo em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center}

/* ================= CUA CAI DAT =================
   Dung truoc man hinh dang nhap khi game bi mo trong tab thay vi trong ung
   dung da cai. Dung lai .gate-bg / .gate-card / .primary cua cua dang nhap
   nen chi can them phan rieng cua no. */
#instgate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;z-index:60}
/* Man hinh bao tri dung TREN ca cua cai dat va man hinh dang nhap: khi may chu
   dong cua thi khong con gi de lam o hai man hinh kia. */
#maintgate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;z-index:70}
#maintgate .gate-card{max-width:420px;text-align:center}
#maintgate .instgate-state{justify-content:center}
#maintgate .primary{display:block;width:100%;margin-top:4px}
#maintgate footer{margin-top:12px;text-align:center;font-size:11.5px;color:var(--ink-soft)}
.instgate-card{display:flex;flex-direction:column;gap:13px}
.instgate-icon{margin:0 auto 8px;border-radius:18px;border:2px solid var(--gold-d);
  box-shadow:0 4px 0 rgba(74,45,24,.3);image-rendering:pixelated}
.instgate-card header p{font-size:13.5px;line-height:1.5;max-width:40ch;margin-inline:auto}
.instgate-card header p b{color:var(--wood-d)}
.instgate-state{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  padding:10px 13px;border-radius:11px;background:var(--paper-2);border:2px solid var(--line)}
.instgate-state .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--green);
  box-shadow:0 0 0 4px rgba(79,154,63,.2)}
.instgate-state.warn{background:#fdeee6;border-color:#e6b9a4}
.instgate-state.warn .dot{background:var(--sta);box-shadow:0 0 0 4px rgba(217,102,58,.2)}
.instgate-state b{font-weight:600;color:var(--ink)}
.instgate-steps{background:var(--paper-2);border:2px solid var(--line);border-radius:12px;padding:13px 15px}
.instgate-steps>b{display:block;font-size:12px;font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.instgate-steps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.instgate-steps li{font-size:13.5px;line-height:1.5;color:var(--ink)}
.instgate-steps li::marker{font-weight:900;color:var(--gold-d)}
.instgate-steps li b{color:var(--wood-d)}
.instgate-hint{margin:0;text-align:center;font-size:12px;color:var(--ink-soft);line-height:1.5}

/* ================= GAME ================= */
#game{position:fixed;inset:0}
#view{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;cursor:pointer}

/* ---- Man che khi bang cong cu nha phat trien dang mo ----
   z-index cao nhat trong ca tep: no phai nam tren ca modal va cac cua man
   hinh. Xem public/js/shield.js. */
#shield{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:24px;
  background:rgba(14,10,4,.92);backdrop-filter:blur(4px)}
.shield-card{max-width:38ch;text-align:center;color:#fbf1dc;display:grid;gap:10px;justify-items:center}
.shield-ic{font-size:50px;line-height:1}
.shield-card b{font-size:17px;color:#f2d98a}
.shield-card p{margin:0;font-size:13px;line-height:1.6;color:#d8bf90}

/* ---- Dai dem nguoc bao tri ----
   Nam TREN CUNG va vat het be ngang: day la thu duy nhat trong HUD duoc phep
   che mat ban do, vi no la canh bao "sap mat ket noi". z-index cao hon moi
   khung HUD khac (6) nhung thap hon modal (40) va cac cua man hinh (50).
   Dong ho the gioi bi day xuong duoi dai bang mot lop body (xem `body.maint`). */
#maintbar{position:absolute;top:0;left:0;right:0;z-index:30;padding:7px 12px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;font-weight:800;color:#fff6e0;text-align:center;
  background:linear-gradient(180deg,rgba(166,122,29,.97),rgba(120,86,16,.97));
  border-bottom:2px solid var(--gold-l);box-shadow:0 3px 12px rgba(20,12,4,.4);
  padding-top:calc(7px + env(safe-area-inset-top))}
#maintbar b{color:#fff}
#maintbar.down{background:linear-gradient(180deg,rgba(184,62,52,.97),rgba(132,38,32,.97));
  border-bottom-color:#f2b0a8}
#maintbar em{font-style:normal;opacity:.85;font-weight:700}
/* Co dai bao tri thi day dong ho the gioi xuong de hai thu khong de nhau */
body.maint #hud-clock{top:44px}
body.maint #hud-left,body.maint #hud-right{top:44px}

/* ---- HUD trai: chan dung ---- */
/* Bang nhan vat o goc trai. Truoc day rong ~300px va cao ~110px nen an mat ca
   mot goc ban do; gio chan dung nho lai con 2x, cot thong tin hep lai, va ca
   bang thu duoc thanh mot bieu tuong o khay ben phai. */
#hud-left{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:6;
  max-width:min(236px,46vw)}
.portrait{display:flex;gap:8px;padding:6px 20px 6px 6px;align-items:center;opacity:.97}
.portrait .pic{position:relative;flex:none}
#me-face{background:linear-gradient(#bfe0f5,#9fd47f);border-radius:8px;border:1.5px solid var(--wood-l)}
.lvbadge{position:absolute;right:-5px;bottom:-4px;min-width:19px;height:19px;padding:0 3px;border-radius:10px;
  background:radial-gradient(circle at 35% 30%,var(--gold-l),var(--gold) 70%);border:2px solid var(--wood);
  color:var(--wood-d);font-size:10px;font-weight:900;display:grid;place-items:center;
  box-shadow:0 2px 0 rgba(74,45,24,.3)}
.portrait .info{min-width:0;flex:1}
.portrait .info>b{display:block;font-size:12.5px;line-height:1.15;color:var(--wood-d);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portrait .tags{display:flex;gap:4px;flex-wrap:wrap}
.portrait .tags:empty{display:none}
.guildtag{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:7px;background:var(--paper-3);
  border:1px solid var(--line);font-size:10.5px;font-weight:800;color:var(--wood)}
/* Thanh tien do. KHONG cat noi dung: chu tieng Viet co dau tren + dau duoi nen
   mot thanh 11px voi overflow:hidden se an mat dau. Thanh cao hon, phan to mau
   tu bo goc lay nen khong can overflow:hidden nua. */
.bar{position:relative;height:14px;background:#e3d2b0;border:1.5px solid var(--wood-l);border-radius:8px;
  overflow:visible;margin-top:4px;box-shadow:inset 0 2px 3px rgba(100,70,30,.25)}
.bar i{display:block;height:100%;width:0%;transition:width .3s;border-radius:7px;max-width:100%}
.bar em{position:absolute;inset:-2px 0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:10px;font-weight:900;line-height:1;white-space:nowrap;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.5);letter-spacing:.2px}

/* Hang chi so tren chan dung: nhan va so nam NGOAI thanh nen khong bao gio bi cat */
.stat{display:grid;grid-template-columns:15px 1fr auto;align-items:center;gap:6px;margin-top:5px}
.stat .k{font-style:normal;font-size:11px;line-height:1;text-align:center}
.stat .v{font-size:10px;font-weight:800;color:var(--wood-d);white-space:nowrap}
.portrait .bar{margin-top:0;height:8px}
.portrait .stat{grid-template-columns:13px 1fr auto;gap:5px;margin-top:3px}
.portrait .stat .v{font-size:9px}
.portrait .stat .k{font-size:10px}
/* Canh bao the luc / cam xuc: thanh nhap nhay de khong bo qua */
.portrait .stat.low .v{color:var(--red-d)}
.portrait .stat.low .bar{border-color:var(--red);animation:warnpulse 1.5s ease-in-out infinite}
@keyframes warnpulse{50%{box-shadow:0 0 0 2px rgba(200,70,58,.35)}}
.bar.xp i{background:linear-gradient(180deg,#9fe07a,var(--green))}
.bar.sta i{background:linear-gradient(180deg,#f2a06a,var(--sta))}
.bar.mood i{background:linear-gradient(180deg,#ffd98f,#e8a0c4)}

/* ---- Bang chi so nhan vat ---- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0 2px}
.statbox{background:var(--paper-2);border:1.5px solid var(--wood-l);border-radius:11px;padding:8px 10px}
.statbox b{display:block;font-size:11px;color:var(--ink-soft);font-weight:800}
.statbox strong{display:block;font-size:19px;line-height:1.25;color:var(--wood-d)}
.statbox span{display:block;font-size:10px;color:var(--ink-soft);margin-top:2px}
.skillrow{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px dashed var(--wood-l)}
.skillrow:last-child{border-bottom:0}
.skillrow .ic{font-size:21px;width:26px;text-align:center}
.skillrow .mid{flex:1;min-width:0}
.skillrow .mid b{display:block;font-size:12px;font-weight:900}
.skillrow .mid span{display:block;font-size:10px;color:var(--ink-soft)}
.skillrow .lv{font-size:12px;font-weight:900;color:var(--wood-d);white-space:nowrap}
.venuehead{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:12px;font-weight:800;
  color:var(--wood-d);background:var(--paper-2);border:1.5px solid var(--wood-l);
  border-radius:11px;padding:7px 10px}
.venuehead i{font-style:normal;font-size:19px}
.venuehead em{font-style:normal;font-weight:700;color:var(--ink-soft);font-size:10.5px}

/* ---- Nguoi quan li co so / dang ve nhan vat ---- */
.mgrrow{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);
  border:1.5px solid var(--wood-l);border-radius:12px;padding:10px 12px;margin:4px 0 2px}
.mgrrow canvas{background:linear-gradient(#bfe0f5,#9fd47f);border:2px solid var(--wood-l);
  border-radius:9px;flex:none;image-rendering:pixelated}
.mgrsay{flex:1;min-width:0}
.mgrsay b{display:block;font-size:12px;color:var(--wood-d);margin-bottom:4px}
.mgrsay p{margin:0;font-size:12px;line-height:1.55;color:var(--ink)}
.bufflist{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;font-size:10.5px;color:var(--ink-soft)}
#buffs{display:flex;gap:4px;flex-wrap:wrap;max-width:230px}
.buff{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9px;font-size:10.5px;font-weight:800;
  background:rgba(251,241,220,.94);border:2px solid var(--gold-d);color:var(--wood-d);
  box-shadow:0 2px 0 rgba(74,45,24,.25)}

/* ---- HUD giua: dong ho ---- */
#hud-clock{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:9px;padding:6px 15px}
#hud-clock .sky{font-size:21px;line-height:1}
#hud-clock .t{display:flex;flex-direction:column;line-height:1.15}
#hud-clock b{font-size:16px;color:var(--wood-d);letter-spacing:.5px}
#hud-clock em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-soft)}

/* ---- HUD phai: tien + ban do + nhiem vu ---- */
#hud-right{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:6}
.money{display:flex;gap:12px;align-items:center;padding:7px 12px}
.coin{display:flex;align-items:center;gap:5px;font-weight:900;color:var(--wood-d);font-size:13.5px}
.coin i{width:16px;height:16px;border-radius:50%;display:block;flex:none}
.coin.xu i{background:radial-gradient(circle at 35% 30%,#ffeca8,var(--gold) 70%);border:2px solid var(--gold-d)}
.coin.luong i{background:radial-gradient(circle at 35% 30%,#e6f6ff,#8fc7e8 70%);border:2px solid #3f7fa8;border-radius:3px}
.ico{width:26px;height:26px;border-radius:8px;background:var(--paper-3);border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:13px}
.ico:hover{background:var(--gold-l)}
.mini{padding:6px 7px 7px}
.mini>b{display:block;font-size:11px;font-weight:900;color:var(--wood-d);text-align:center;margin-bottom:4px;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapwrap{position:relative;line-height:0}
#minimap{border-radius:7px;border:1.5px solid var(--wood-l);image-rendering:pixelated;background:#79bd5b}
#mini-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#fff;border:1.5px solid var(--red);box-shadow:0 0 5px rgba(255,255,255,.9)}
.questbox{padding:8px 10px;width:190px}
.questbox h5{margin:0 0 5px;font-size:11px;font-weight:900;color:var(--wood-d);
  display:flex;justify-content:space-between;align-items:center}
.questbox .q{font-size:10.5px;font-weight:700;color:var(--ink-soft);margin-bottom:4px;line-height:1.3}
.questbox .q.done{color:var(--green-d);text-decoration:line-through;opacity:.75}
.questbox .q b{color:var(--wood-d)}

/* ---- Thanh dock ---- */
/* Thanh chuc nang: cac nut duoc gom thanh NHOM co nhan ("Bản thân", "Làm ăn",
   "Giao thương", "Xã hội", "Đi lại") thay vi mot hang 16 nut deu tam — mat tim
   dung o cho can thay vi quet het ca hang. */
/* Khung ngoai giu vi tri; #dock ben trong moi la cai cuon ngang. Nho tach
   doi nhu vay, nut thu gon khong con bi cuon ra khoi man hinh. */
#dockwrap{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;z-index:7;
  display:flex;align-items:flex-start;gap:7px;max-width:calc(100% - 20px)}
#dock{display:flex;gap:0;align-items:stretch;min-width:0;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:2px solid var(--wood);border-radius:16px;padding:5px 6px 4px;
  box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow);
  overflow-x:auto;scrollbar-width:none}
#dock::-webkit-scrollbar{display:none}
.dockgrp{position:relative;display:flex;gap:3px;padding:12px 9px 0;flex:none}
.dockgrp+.dockgrp{border-left:1.5px dashed var(--line)}
.dockgrp::before{content:attr(data-grp);position:absolute;top:0;left:9px;
  font-size:8.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#b09873;
  white-space:nowrap;pointer-events:none}
#dock button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 8px;
  border-radius:11px;font-size:9.5px;font-weight:800;color:var(--ink-soft);min-width:50px;flex:none;
  border:1.5px solid transparent}
#dock button i{font-style:normal;font-size:19px;line-height:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
#dock button:hover{background:var(--paper-3);color:var(--wood-d)}
#dock button.on{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--wood-d);
  border-color:var(--gold-d);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#dock .dot{position:absolute;top:1px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--red);
  border:1.5px solid #fff;animation:pulse 1.4s ease-in-out infinite}
.dockfold{position:static;align-self:flex-start;margin:0;flex:none}
@keyframes pulse{50%{transform:scale(1.35)}}

/* ---- Chat ---- */
#chatwrap{position:absolute;left:10px;bottom:84px;width:min(340px,calc(100% - 20px));pointer-events:none;z-index:5}
.chantabs{display:flex;gap:4px;margin-bottom:5px;pointer-events:auto}
.chantabs button{padding:3px 11px;border-radius:9px 9px 0 0;font-size:11px;font-weight:800;
  background:rgba(48,36,26,.6);color:#e8d7b4;border:1.5px solid rgba(217,169,58,.35);border-bottom:none}
.chantabs button.on{background:var(--paper);color:var(--wood-d);border-color:var(--wood)}
#chatlog{max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;margin-bottom:6px;
  scrollbar-width:thin;mask-image:linear-gradient(transparent,#000 18px)}
#chatlog div{background:rgba(42,32,22,.78);color:#fff6e4;padding:4px 10px;border-radius:10px;font-size:12.5px;
  width:fit-content;max-width:100%;word-break:break-word;pointer-events:auto;
  border-left:3px solid rgba(217,169,58,.5)}
#chatlog div b{color:var(--gold-l)}
#chatlog div.sys{background:rgba(63,124,49,.82);border-left-color:#bde8a0}
#chatlog div.guild{background:rgba(93,61,140,.82);border-left-color:#c9a8f0}
#chatlog div.guild b{color:#e0ccff}
#chatform{display:flex;gap:6px;pointer-events:auto}
#chatinput{flex:1;min-width:0;padding:9px 13px;border-radius:11px;border:2px solid var(--wood);
  background:rgba(251,241,220,.96);font-weight:600}
#chatinput:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,154,63,.2)}
#chatform button{padding:0 15px;border-radius:11px;background:linear-gradient(180deg,var(--wood-l),var(--wood));
  color:#fff;font-weight:900;box-shadow:0 3px 0 var(--wood-d)}
#chatform button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--wood-d)}

/* ---- D-pad ---- */
#pad{position:absolute;right:12px;bottom:92px;display:none;touch-action:none;grid-template-columns:repeat(3,46px);
  grid-template-rows:repeat(2,46px);gap:5px;z-index:6}
#pad button{touch-action:none;background:rgba(251,241,220,.92);border:2px solid var(--wood);border-radius:12px;font-size:15px;
  color:var(--wood-d);font-weight:900;box-shadow:0 3px 0 rgba(74,45,24,.3)}
#pad button:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(74,45,24,.3)}
#pad [data-dir=up]{grid-area:1/2} #pad [data-dir=left]{grid-area:2/1}
#pad [data-dir=down]{grid-area:2/2} #pad [data-dir=right]{grid-area:2/3}
body.touch #pad{display:grid}

/* ---- Thanh cau ca ---- */
#fishbar{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:16;width:min(330px,calc(100% - 24px));
  background:linear-gradient(180deg,var(--paper),var(--paper-2));border:2px solid var(--wood);border-radius:15px;
  padding:10px 13px;box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow)}
.fb-head{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.fb-head b{display:block;font-size:13.5px;color:var(--wood-d)}
/* O tranh "nhan vat dang cau": mat nuoc ve bang code trong ui.js, nen o day
   chi can cai khung. `image-rendering` phai la pixelated — khong co no thi
   nhan vat 2x bi lam min thanh mot cuc mo. */
#fb-char{flex:none;width:72px;height:57px;border-radius:10px;border:1.5px solid var(--wood-l);
  background:linear-gradient(180deg,#bfe0ef 0 54%,#3f7fc4 54% 100%);image-rendering:pixelated}
.fb-tt{flex:1;min-width:0}
.fb-tt em{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-soft);margin-top:2px}
#fb-x{font-size:11px;font-weight:800;color:var(--ink-soft);padding:3px 9px;border-radius:8px;background:var(--paper-3)}
.fb-track{height:13px;background:#e3d2b0;border:1.5px solid var(--wood-l);border-radius:8px;overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(100,70,30,.25)}
.fb-track i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#8fd16b,var(--green))}
#fishbar.bite .fb-track i{background:linear-gradient(90deg,#ffb347,var(--red));transition:none}
#fishbar.bite{animation:shake .12s linear infinite;border-color:var(--red)}
@keyframes shake{25%{transform:translate(-51%,0)}75%{transform:translate(-49%,0)}}
.fb-hint{font-size:10.5px;font-weight:700;color:var(--ink-soft);margin-top:6px;text-align:center}
.fb-hint kbd{background:var(--paper-3);border:1px solid var(--line);border-radius:5px;padding:0 5px;font-size:10px}
.fb-pull{display:block;width:100%;margin-top:8px;padding:11px;border-radius:12px;font-weight:900;font-size:14px;
  letter-spacing:1px;color:#fff;background:linear-gradient(180deg,#f0a35a,var(--sta));box-shadow:0 4px 0 #a7421f}
.fb-pull:active{transform:translateY(3px);box-shadow:0 1px 0 #a7421f}

/* ---- Modal ---- */
#modal{position:absolute;inset:0;background:rgba(24,16,8,.55);display:grid;place-items:center;padding:14px;z-index:20;
  backdrop-filter:blur(2px)}
.sheet{width:min(720px,100%);max-height:min(88vh,760px);display:flex;flex-direction:column;overflow:hidden;
  border-width:3px;animation:rise .18s ease-out}
@keyframes rise{from{transform:translateY(12px) scale(.98);opacity:0}}
.sheet header{display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper-3));
  border-bottom:2px solid var(--wood);flex:none}
.sheet h2{margin:0;font-size:17.5px;color:var(--wood-d);flex:1;letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
#modal-x{width:30px;height:30px;border-radius:9px;background:var(--paper);border:1.5px solid var(--line);
  font-weight:900;color:var(--wood-d)}
#modal-x:hover{background:var(--red);color:#fff;border-color:var(--red-d)}
#modal-body{padding:15px 18px 18px;overflow-y:auto}

.subtabs{display:flex;gap:5px;margin-bottom:13px;flex-wrap:wrap}
.subtabs button{padding:7px 14px;border-radius:10px;background:var(--paper-3);font-weight:800;font-size:12.5px;
  color:var(--ink-soft);border:1.5px solid transparent}
.subtabs button:hover{border-color:var(--line)}
.subtabs button.on{background:linear-gradient(180deg,var(--wood-l),var(--wood));color:#fff;
  box-shadow:0 2px 0 var(--wood-d)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:9px;align-items:stretch}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.it{display:flex;gap:9px;align-items:center;background:#fffdf6;border:2px solid var(--line);border-radius:12px;
  padding:9px;text-align:left;width:100%;box-shadow:0 2px 0 rgba(160,125,75,.18)}
button.it:hover{border-color:var(--green);background:#fffef9}
.it .ic{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(180deg,var(--paper),var(--paper-3));border:2px solid var(--line)}
.it .txt{min-width:0;flex:1}
/* Ba ky hieu giong nhau cua mot bac ve cao: phai nam gon MOT HANG trong o
   bieu tuong 36px, neu khong chung xuong dong va tran ra duoi hang. */
.it .ic.tri{width:auto;min-width:44px;padding:0 4px;font-size:12px;letter-spacing:-2px;
  white-space:nowrap;display:flex;align-items:center}
.it .nm{display:block;font-weight:900;font-size:13px;line-height:1.25;color:var(--wood-d)}
.it .ds{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.35;font-weight:600}
.it .qty{margin-left:auto;font-weight:900;color:var(--wood-d);font-size:13px;flex:none}
.price{font-weight:900;font-size:12px;white-space:nowrap}
.price.xu{color:var(--gold-d)} .price.luong{color:#3f7fa8}
.it.col{flex-direction:column;align-items:stretch;gap:7px;height:100%;cursor:default}
.it.col .hd{display:flex;align-items:center;gap:8px}
.it.col .hd .nm{flex:1}
.it.col .acts{display:flex;gap:5px;margin-top:auto}
.it.col .acts .btn{flex:1;padding:7px 4px;font-size:12px}
.it .tagline{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:7px;font-size:10px;font-weight:900;
  background:var(--paper-3);border:1px solid var(--line);color:var(--wood)}
.it .tagline.hot{background:#ffe0d6;border-color:#e8a894;color:var(--red-d)}
.it .tagline.good{background:#ddf0d2;border-color:#a8cf92;color:var(--green-d)}
.it .tagline.warn{background:#fdf0cf;border-color:#e3c879;color:var(--gold-d)}

/* --- The su kien: dang dien ra thi vien vang, da tham du thi mo di --- */
.it.ev .hd .nm{font-size:13.5px}
.it.ev .hd .price{font-size:10.5px;font-weight:900}
.it.ev.evlive{border-color:var(--gold);background:linear-gradient(180deg,#fffaea,#fffdf6);
  box-shadow:0 2px 0 rgba(166,122,29,.3), 0 0 0 3px rgba(217,169,58,.16)}
.it.ev.evdone{opacity:.72}
.evmeta{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:10.5px;font-weight:700;color:var(--ink-soft)}
.evmeta b{flex-basis:100%;color:var(--wood-d);font-size:11px}
.evreward{display:flex;flex-wrap:wrap;gap:4px}
.evreward span{padding:1px 7px;border-radius:7px;font-size:10px;font-weight:900;
  background:#ddf0d2;border:1px solid #a8cf92;color:var(--green-d)}

.plist{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;gap:10px;align-items:center;background:#fffdf6;border:2px solid var(--line);
  border-radius:12px;padding:8px 11px;box-shadow:0 2px 0 rgba(160,125,75,.18)}
.prow canvas{background:linear-gradient(#bfe0f5,#9fd47f);border-radius:8px;flex:none;border:1.5px solid var(--line)}
.prow .who{flex:1;min-width:0}
.prow .who b{display:block;font-size:13.5px;color:var(--wood-d)}
.prow .who span{font-size:11px;color:var(--ink-soft);font-weight:600}
.prow .who .mini-tag{display:inline-block;margin-left:5px;padding:0 6px;border-radius:6px;font-size:9.5px;
  font-weight:900;background:var(--paper-3);border:1px solid var(--line);color:var(--wood)}

.btn{padding:7px 13px;border-radius:10px;font-weight:900;font-size:12.5px;
  background:linear-gradient(180deg,#63b44f,var(--green));color:#fff;box-shadow:0 3px 0 var(--green-d);
  border:1.5px solid rgba(0,0,0,.08)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-d)}
.btn.alt{background:linear-gradient(180deg,#5a97d8,var(--blue));box-shadow:0 3px 0 var(--blue-d)}
.btn.alt:active{box-shadow:0 1px 0 var(--blue-d)}
.btn.warn{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#5a4209;box-shadow:0 3px 0 var(--gold-d)}
.btn.warn:active{box-shadow:0 1px 0 var(--gold-d)}
.btn.danger{background:linear-gradient(180deg,#d9594c,var(--red));box-shadow:0 3px 0 var(--red-d)}
.btn.danger:active{box-shadow:0 1px 0 var(--red-d)}
.btn.ghost{background:linear-gradient(180deg,var(--paper),var(--paper-3));color:var(--wood-d);
  box-shadow:0 3px 0 var(--line)}
.btn.ghost:active{box-shadow:0 1px 0 var(--line)}
.btn[disabled]{opacity:.42;pointer-events:none;filter:grayscale(.4)}
.btn.sm{padding:5px 9px;font-size:11.5px;box-shadow:0 2px 0 var(--green-d)}

.empty{text-align:center;color:#a8977c;padding:28px 10px;font-weight:700}
.hint{background:linear-gradient(180deg,var(--paper-2),var(--paper-3));border:2px dashed var(--line);
  border-radius:12px;padding:10px 13px;font-size:12.5px;color:var(--ink-soft);margin-bottom:13px;font-weight:600}
.hint b{color:var(--wood-d)}
.sect{margin:16px 0 9px;font-size:12px;font-weight:900;color:var(--wood-d);text-transform:uppercase;
  letter-spacing:.6px;display:flex;align-items:center;gap:8px}
.sect::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--line),transparent)}
.formrow{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.formrow label{flex:1;min-width:110px}
.formrow .btn{height:38px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.kv b{color:var(--wood-d)}

/* ---- Popup o dat ---- */
#plotpop{position:absolute;z-index:15;padding:11px;width:216px}
#plotpop h4{margin:0 0 2px;font-size:14px;color:var(--wood-d)}
#plotpop .st{font-size:11.5px;color:var(--ink-soft);margin-bottom:8px;font-weight:600}
#plotpop .acts{display:flex;gap:6px;flex-wrap:wrap}
#plotpop .acts .btn{flex:1 1 auto}
#plotpop .bar{height:9px;margin:7px 0 9px}

/* ---- Toast ---- */
#toasts{position:absolute;top:74px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:6px;align-items:center;pointer-events:none;z-index:30;width:max-content;max-width:92%}
.toast{background:linear-gradient(180deg,rgba(60,44,30,.95),rgba(42,32,22,.95));color:#fff6e4;
  padding:9px 17px;border-radius:12px;font-weight:800;font-size:13px;animation:pop .25s ease-out;
  border:1.5px solid var(--gold-d);box-shadow:0 5px 16px rgba(0,0,0,.4)}
.toast.ok{background:linear-gradient(180deg,rgba(74,142,56,.96),rgba(55,111,43,.96));border-color:#bde8a0}
.toast.err{background:linear-gradient(180deg,rgba(184,62,52,.96),rgba(148,48,42,.96));border-color:#f2b0a8}
.toast.warn{background:linear-gradient(180deg,rgba(201,146,24,.96),rgba(166,122,29,.96));border-color:#f2d98a}
@keyframes pop{from{transform:translateY(-10px) scale(.93);opacity:0}}

/* ---- Trang tri ---- */
#decorbar{position:absolute;left:50%;transform:translateX(-50%);bottom:92px;z-index:16;display:flex;gap:8px;
  align-items:center;padding:9px 14px;font-weight:800;font-size:13px}
body.decor #dock{opacity:.35;pointer-events:none}

/* ---- Thu nho man hinh ---- */
@media (max-width:860px){
  #hud-clock{top:auto;bottom:154px;padding:4px 11px}
  #hud-left{max-width:60vw}
  .dockgrp{padding:10px 6px 0}
  .dockgrp::before{font-size:7.5px;left:6px}
  #tray{bottom:150px}
  .questbox{display:none}
}
@media (max-width:720px){
  #chatwrap{bottom:150px;width:calc(100% - 20px)}
  #chatlog{max-height:88px}
  #dock button span{display:none}
  #dock button{min-width:44px;padding:8px 7px}
  .portrait .info{min-width:96px}
  .mini{display:none}
  .creator{flex-direction:column;align-items:center}
  .row2{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  #fishbar{bottom:166px}
}

/* ============================================================
   THU GON KHUNG: moi khung co nut "–", thu lai thanh bieu tuong
   trong khay goc duoi trai, co so dem khi con viec chua xem.
   ============================================================ */
/* Nut treo ra NGOAI khung, khong de len noi dung nua: truoc day no nam de
   len goc phai-tren va an mat duoi tieu de ban do / so dem nhiem vu.
   Quy tac chung: treo ve phia VUNG GAME — cot trai treo sang phai, cot phai
   treo sang trai — nen khong bao gio cham mep man hinh. */
.fold{
  position:absolute;top:4px;right:-22px;z-index:3;width:19px;height:19px;border-radius:7px;
  background:var(--paper-3);border:1.5px solid var(--line);color:var(--wood-d);
  font-weight:900;font-size:13px;line-height:1;display:grid;place-items:center;opacity:.72;
  box-shadow:0 1px 3px rgba(60,40,20,.25)
}
.fold:hover{opacity:1;background:var(--gold-l);border-color:var(--gold-d)}
/* Cot phai sat mep man hinh — treo sang trai, neu khong se bi cat. */
#hud-right .fold{right:auto;left:-22px}
/* Nut chat tung trong duoi nhu the thu tu ben canh "He thong". Dua han ra
   ngoai mep phai khung chat de khong ai bam nham tuong la mot kenh. */
.chatfold{position:absolute;top:1px;right:-22px;width:19px;height:19px;align-self:auto;margin:0;
  border-radius:7px;background:rgba(48,36,26,.72);border:1.5px solid rgba(217,169,58,.45);
  color:#e8d7b4;opacity:.8;pointer-events:auto}
.dockfold{position:static;width:22px;height:22px;border-radius:8px;
  background:var(--paper-3);border:1.5px solid var(--line);color:var(--wood-d);
  display:grid;place-items:center;font-size:15px;opacity:.8;flex:none;
  box-shadow:0 1px 3px rgba(60,40,20,.25)}

/* Khay bieu tuong cua cac khung dang thu (chat, ban do, nhiem vu, chuc nang,
   bang nhan vat) nam BEN PHAI, cung phia voi ban do nho va tui tien — moi thu
   phu tro gom ve mot ben, ban do game khong bi khoet hai goc. */
#tray{position:absolute;right:10px;bottom:84px;z-index:9;display:flex;flex-direction:column;gap:6px;
  align-items:flex-end}
.trayb{position:relative;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));border:2px solid var(--wood);
  box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow);
  display:grid;place-items:center;font-size:21px;line-height:1;
  transition:transform .1s}
.trayb:hover{transform:translateY(-2px)}
.trayb b{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;
  background:var(--red);color:#fff;font-size:10.5px;font-weight:900;display:grid;place-items:center;
  border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.trayb em{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-style:normal;
  font-size:9px;font-weight:800;color:#f0e2c4;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap}

/* ---- Thanh hanh dong theo ngu canh (ngoi ghe, cau ca...) ---- */
#actbar{position:absolute;left:50%;transform:translateX(-50%);bottom:88px;z-index:8;display:flex;gap:7px}
#actbar button{padding:9px 16px;border-radius:13px;font-weight:900;font-size:13px;color:var(--wood-d);
  background:linear-gradient(180deg,var(--gold-l),var(--gold));border:2px solid var(--wood);
  box-shadow:0 4px 0 var(--gold-d),0 8px 18px rgba(20,12,4,.3)}
#actbar button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-d)}

/* ============================================================
   MANG XA HOI: BANG TIN + TIN NHAN RIENG
   ============================================================ */
/* --- O soan bai --- */
.postbox{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}
.postbox textarea{flex:1;min-width:0;resize:vertical;padding:9px 11px;border:2px solid var(--line);
  border-radius:11px;background:#fffdf6;font:inherit;font-weight:600;line-height:1.45}
.postbox textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,154,63,.18)}

/* --- Mot the bai viet --- */
.post{background:linear-gradient(180deg,var(--paper),var(--paper-2));border:2px solid var(--line);
  border-radius:13px;padding:10px 12px;margin-bottom:9px}
/* Bai TU DONG (cot moc cua nguoi choi) vien vang de phan biet voi bai nguoi go */
.post.auto{border-color:var(--gold-d);background:linear-gradient(180deg,#fdf6e3,var(--paper-2))}
.post-head{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.post-who{font-weight:900;font-size:13.5px;color:var(--wood-d);padding:0}
.post-who:hover{text-decoration:underline}
.post-at{font-style:normal;font-size:11px;color:var(--ink-soft);font-weight:700}
.post-del{margin-left:auto;font-size:12px;color:var(--ink-soft);padding:2px 6px;border-radius:7px}
.post-del:hover{background:var(--paper-3);color:var(--red-d)}
.post-body{font-size:13.5px;line-height:1.55;color:var(--ink);word-break:break-word}
.post-bar{display:flex;gap:7px;margin-top:8px}
.post-act{font-size:12px;font-weight:800;padding:4px 11px;border-radius:9px;
  background:var(--paper-3);border:1.5px solid var(--line);color:var(--ink-soft)}
.post-act:hover{border-color:var(--gold-d);color:var(--wood-d)}
.post-act.on{background:#fde8ef;border-color:var(--rose);color:#a8325c}
.post-cmts{margin-top:8px;border-top:1.5px dashed var(--line);padding-top:7px;
  display:flex;flex-direction:column;gap:4px}
.cmt{font-size:12.5px;line-height:1.45;color:var(--ink);word-break:break-word}
.cmt b{color:var(--wood-d)}
.cmt-del{font-size:10px;color:var(--ink-soft);padding:0 5px}
.cmt-del:hover{color:var(--red-d)}
.cmt-form{display:flex;gap:6px;margin-top:8px}
.cmt-form input{flex:1;min-width:0;padding:8px 11px;border:2px solid var(--line);border-radius:10px;
  background:#fffdf6;font-weight:600}
.cmt-form input:focus{outline:none;border-color:var(--green)}

/* --- Tin nhan rieng --- */
/* Hai cot tren man rong, xep chong tren man hep */
.dmwrap{display:grid;grid-template-columns:190px 1fr;gap:10px;align-items:start}
.dmlist{display:flex;flex-direction:column;gap:5px;max-height:330px;overflow-y:auto}
.dmrow{position:relative;text-align:left;padding:8px 10px;border-radius:10px;
  background:var(--paper-2);border:1.5px solid var(--line)}
.dmrow.on{background:#ddf0d2;border-color:var(--green-d)}
.dmrow b{display:block;font-size:12.5px;color:var(--wood-d)}
.dmrow em{display:block;font-style:normal;font-size:11px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmbadge{position:absolute;top:6px;right:7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font-size:10px;font-weight:900;font-style:normal;
  display:grid;place-items:center}
.dmpane{display:flex;flex-direction:column;min-width:0}
.dmhead{font-weight:900;font-size:13px;color:var(--wood-d);margin-bottom:6px}
.dmlog{display:flex;flex-direction:column;gap:5px;max-height:280px;overflow-y:auto;
  padding:8px;border:2px solid var(--line);border-radius:11px;background:#fffdf6}
.dmmsg{max-width:82%;padding:6px 10px;border-radius:11px;font-size:12.5px;line-height:1.45;
  background:var(--paper-3);color:var(--ink);align-self:flex-start;word-break:break-word}
.dmmsg.me{align-self:flex-end;background:linear-gradient(180deg,#bde8a0,#9fd47f);color:#204214}
@media (max-width:720px){
  .dmwrap{grid-template-columns:1fr}
  .dmlist{max-height:140px}
}

/* ============================================================
   QUAY VE SO
   ============================================================ */
/* Day so in tren to ve: chu dang may danh, gian cach rong cho de do */
.lotnum{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:3px;font-size:16px;color:var(--wood-d)}

/* Tep ve da in: moi to la mot nut bam */
.lotboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;margin-bottom:10px}
.lotticket{padding:8px 4px;border-radius:9px;border:2px dashed var(--line);background:#fffdf6;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;font-weight:800;
  letter-spacing:1.5px;color:var(--wood-d)}
.lotticket:hover{border-color:var(--gold-d);background:var(--paper-2)}
.lotticket.on{border-style:solid;border-color:var(--green-d);background:#ddf0d2;
  box-shadow:inset 0 0 0 2px #bde8a0}

/* --- To ve cao: ba o phu bac, gat dan ra ---
   Lop bac la mot phan tu gia (::after) truot sang phai. Do tre dat bang
   style.animationDelay o ui.js nen moi o mot nhip, khong can ve lai bang. */
.scratchwrap{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.scard{border:2px solid var(--wood);border-radius:13px;padding:10px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  box-shadow:inset 0 0 0 2px var(--gold-l)}
.scard.win{border-color:var(--gold-d);box-shadow:inset 0 0 0 2px var(--gold),0 0 0 2px rgba(217,169,58,.3)}
.scells{display:flex;gap:8px;justify-content:center}
.scell{position:relative;overflow:hidden;width:54px;height:54px;border-radius:10px;
  display:grid;place-items:center;font-size:26px;font-style:normal;
  background:var(--paper-3);border:2px solid var(--line)}
.scell::after{
  content:"";position:absolute;inset:0;transform-origin:left center;
  background:repeating-linear-gradient(115deg,#b9bec6 0 5px,#d6dade 5px 10px);
  animation:scratchoff .45s steps(6,end) forwards;
}
@keyframes scratchoff{to{transform:scaleX(0)}}
.sres{display:block;text-align:center;margin-top:8px;font-size:13px;color:var(--wood-d);
  opacity:0;animation:srevealin .3s ease-out forwards}
@keyframes srevealin{to{opacity:1}}
/* Nguoi dat "giam chuyen dong" trong he dieu hanh: bo het hoat canh, hien ngay */
@media (prefers-reduced-motion:reduce){
  .scell::after{animation-duration:0s}
  .sres{animation-duration:0s}
}

/* ---- Giai cap ---- */
.ranktag{display:inline-block;margin-top:2px;margin-right:4px;padding:1px 7px;border-radius:7px;
  font-size:10.5px;font-weight:900;border:1.5px solid currentColor;background:rgba(255,255,255,.6)}
.rankrow{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:12px;margin-bottom:12px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper-3));border:2px solid var(--line)}
.rankrow .big{font-size:26px;line-height:1}
.rankrow .nm{font-weight:900;font-size:15px;color:var(--wood-d)}
.rankrow .ds{font-size:11.5px;color:var(--ink-soft);font-weight:700}

/* ---- Bang lo dat ---- */
.lotcard .st{display:inline-block;padding:1px 8px;border-radius:7px;font-size:10px;font-weight:900;
  border:1px solid var(--line);background:var(--paper-3);color:var(--wood)}
.lotcard .st.free{background:#fdf0cf;border-color:var(--gold-d);color:#7a5a08}
.lotcard .st.mine{background:#ddf0d2;border-color:#a8cf92;color:var(--green-d)}
.lotcard .st.taken{background:#ece7df;color:#7d6a52}
/* Dong cua chinh minh trong bang xep hang: to dam len de de tim */
.prow.me{background:var(--paper-3);border-color:var(--gold-d)}
.prow.me b{color:var(--wood-d)}
/* Hai con so cua mot lo dat luon di cung nhau: gia ban va gia thue mot thang.
   Truoc day gia thue bi nhet vao dong mo ta nen cho co cho khong — gio la mot
   hang co dinh, lo nao cung co du. */
.it .pricerow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.it .pricerow span{flex:1 1 130px;display:flex;flex-direction:column;gap:1px;
  background:var(--paper-2);border:1.5px solid var(--wood-l);border-radius:9px;padding:5px 9px}
.it .pricerow i{font-style:normal;font-size:9.5px;font-weight:800;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.04em}
.it .pricerow b{font-size:13px;font-weight:900;color:var(--wood-d)}
.numin{padding:7px 9px;border:2px solid var(--line);border-radius:9px;background:#fffdf6;
  font-weight:700;max-width:120px;width:100%}

@media (max-width:720px){
  #actbar{bottom:150px}
  #tray{bottom:150px;right:8px}
  .trayb{width:40px;height:40px;font-size:18px}
  .trayb em{display:none}
}

/* ============================================================
   XOAY NGANG THIET BI
   ============================================================
   Ban do tu xoay theo man hinh (canvas phu kin `#game`, va world.js do lai
   kich thuoc moi lan xoay). Phan con lai la HUD: o mot khung chi cao ~390px
   thi bo cuc doc — thanh chuc nang cao 90px, chat cao 150px, dong ho day
   xuong 154px — an het ban do. Khoi nay ep moi thu mong lai va keo ve hai
   canh, de phan giua luon la ban do.

   Dieu kien la "nam ngang VA thap", khong phai chi "nam ngang": man hinh may
   tinh cung la nam ngang nhung cao thoai mai, khong can thu gon gi.
   `env(safe-area-inset-*)` chua phan tai thỏ / goc bo tron khi nam ngang. */
@media (orientation:landscape) and (max-height:560px){
  /* Thanh chuc nang: bo nhan nhom va chu duoi bieu tuong, chi con day bieu tuong */
  #dockwrap{bottom:max(6px,env(safe-area-inset-bottom));
    max-width:calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  #dock{padding:4px 5px;border-radius:13px}
  .dockgrp{padding:4px 4px}
  .dockgrp::before{display:none}
  #dock button span{display:none}
  #dock button{min-width:32px;padding:5px 4px}
  #dock button i{font-size:16px}

  /* Dong ho ve lai dinh man hinh (bo cuc hep day no xuong duoi) */
  #hud-clock{top:max(6px,env(safe-area-inset-top));bottom:auto;padding:3px 9px}
  #hud-clock b{font-size:13px}
  #hud-clock .sky{font-size:16px}
  #hud-clock em{display:none}

  /* Hai cot HUD sat hai canh, hep lai */
  #hud-left{top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));
    max-width:min(186px,30vw)}
  #hud-right{top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right))}
  .portrait{padding:4px 16px 4px 4px}
  .portrait .info{min-width:82px}
  #minibox{display:none}
  .questbox{display:none}

  /* Chat: mot cot hep ben trai, cao toi da ba dong */
  #chatwrap{left:max(6px,env(safe-area-inset-left));bottom:58px;width:min(290px,42vw)}
  #chatlog{max-height:60px;margin-bottom:4px}
  #chatlog div{font-size:11.5px;padding:3px 8px}
  .chantabs button{padding:2px 8px;font-size:10px}
  #chatinput{padding:6px 10px}

  /* Cac thanh noi tren thanh chuc nang */
  #tray{bottom:58px;right:max(6px,env(safe-area-inset-right))}
  .trayb{width:36px;height:36px;font-size:16px}
  .trayb em{display:none}
  #actbar{bottom:58px}
  #actbar button{padding:7px 13px;font-size:12px}
  #pad{bottom:58px;right:max(10px,env(safe-area-inset-right));
    grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px)}
  #decorbar{bottom:58px}

  /* Thanh cau ca: nam ngang, keo sang phai de khong de len chat */
  #fishbar{bottom:58px;left:auto;right:max(56px,env(safe-area-inset-right));transform:none;
    width:min(300px,46vw);padding:7px 10px}
  /* Co phim ao dieu huong (#pad rong ~130px, sat canh phai) thi day thanh cau
     ca vao de hai thu khong de nhau. */
  body.touch #fishbar{right:calc(146px + env(safe-area-inset-right))}
  #fishbar.bite{animation:shake-land .12s linear infinite}
  #fb-char{width:56px;height:44px}
  .fb-head b{font-size:12px}
  .fb-pull{padding:8px;font-size:13px;margin-top:6px}
  .fb-hint{display:none}

  /* Dai bao tri mong lai, va khong day HUD xuong qua nhieu */
  #maintbar{padding:4px 10px;font-size:11px}
  body.maint #hud-clock,body.maint #hud-left,body.maint #hud-right{top:30px}

  /* Cua dang nhap / cua cai dat: cho cuon, dung can giua theo chieu cao */
  #gate,#instgate,#maintgate{align-items:start;padding:10px}
  .gate-card{margin:0 auto}
}
/* `#fishbar` khi nam ngang khong con `translateX(-50%)` nen cu rung phai
   khong dung lai goc dich chuyen cu, neu khong no nhay sang giua man hinh. */
@keyframes shake-land{25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}