/* Ninja School - giao diện: khung gỗ sơn mài, viền vàng đồng (đồ họa vẽ bằng SVG/CSS nội tuyến) */
:root {
  --frame-win: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'> <defs> <linearGradient id='a' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff4c6'/><stop offset='.4' stop-color='%23e8b452'/><stop offset='1' stop-color='%237a4a12'/></linearGradient> <radialGradient id='j' cx='.35' cy='.35' r='.7'><stop offset='0' stop-color='%23ff9a7a'/><stop offset='.5' stop-color='%23c62d1a'/><stop offset='1' stop-color='%235a0d06'/></radialGradient> <g id='c'> <path d='M.5 .5h15v6h-9v9h-6z' fill='url(%23a)' stroke='%23120804'/> <path d='M2 2h12M2 2v12' stroke='%23fff8dc' stroke-opacity='.7'/> <circle cx='4.5' cy='4.5' r='2.6' fill='url(%23j)' stroke='%232a0603' stroke-width='.8'/> <circle cx='11.5' cy='3.5' r='1' fill='%235a3510'/><circle cx='3.5' cy='11.5' r='1' fill='%235a3510'/> </g> </defs> <g fill='none' shape-rendering='crispEdges'> <rect x='.5' y='.5' width='47' height='47' stroke='%23120804'/> <rect x='1.5' y='1.5' width='45' height='45' stroke='%23efc36a'/> <rect x='2.5' y='2.5' width='43' height='43' stroke='%237a4a12'/> <rect x='3.5' y='3.5' width='41' height='41' stroke='%23b4452a'/> <rect x='6' y='6' width='36' height='36' stroke='%237a2410' stroke-width='4'/> <rect x='8.5' y='8.5' width='31' height='31' stroke='%234a1309'/> <rect x='9.5' y='9.5' width='29' height='29' stroke='%237a4a12'/> <rect x='10.5' y='10.5' width='27' height='27' stroke='%23e2ae4f'/> <rect x='11.5' y='11.5' width='25' height='25' stroke='%23120804'/> <rect x='12.5' y='12.5' width='23' height='23' stroke='%23000' stroke-opacity='.4'/> <rect x='13.5' y='13.5' width='21' height='21' stroke='%23000' stroke-opacity='.18'/> </g> <use href='%23c'/><use href='%23c' transform='matrix(-1 0 0 1 48 0)'/><use href='%23c' transform='matrix(1 0 0 -1 0 48)'/><use href='%23c' transform='matrix(-1 0 0 -1 48 48)'/> </svg>");
  --frame-hud: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'> <defs> <linearGradient id='a' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff1bf'/><stop offset='.5' stop-color='%23d9a243'/><stop offset='1' stop-color='%236d4210'/></linearGradient> <g id='c'><rect x='.5' y='.5' width='6' height='6' fill='url(%23a)' stroke='%23120804'/><rect x='2.5' y='2.5' width='2' height='2' fill='%238e2414'/></g> </defs> <g fill='none' shape-rendering='crispEdges'> <rect x='.5' y='.5' width='23' height='23' stroke='%23120804'/> <rect x='1.5' y='1.5' width='21' height='21' stroke='%23d9a548'/> <rect x='3' y='3' width='18' height='18' stroke='%235e2a14' stroke-width='2'/> <rect x='4.5' y='4.5' width='15' height='15' stroke='%239a6a2c'/> <rect x='5.5' y='5.5' width='13' height='13' stroke='%23120804' stroke-opacity='.8'/> <rect x='6.5' y='6.5' width='11' height='11' stroke='%23000' stroke-opacity='.25'/> </g> <use href='%23c'/><use href='%23c' transform='matrix(-1 0 0 1 24 0)'/><use href='%23c' transform='matrix(1 0 0 -1 0 24)'/><use href='%23c' transform='matrix(-1 0 0 -1 24 24)'/> </svg>");
  --frame-boss: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'> <defs> <linearGradient id='a' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff1bf'/><stop offset='.5' stop-color='%23f0b43c'/><stop offset='1' stop-color='%237a3a08'/></linearGradient> <g id='c'><path d='M.5 .5h7l-2 2v3l-3 2h-2z' fill='url(%23a)' stroke='%23120804'/></g> </defs> <g fill='none' shape-rendering='crispEdges'> <rect x='.5' y='.5' width='23' height='23' stroke='%23120804'/> <rect x='1.5' y='1.5' width='21' height='21' stroke='%23ffd36a'/> <rect x='3' y='3' width='18' height='18' stroke='%23a3160c' stroke-width='2'/> <rect x='4.5' y='4.5' width='15' height='15' stroke='%23ff6a3c'/> <rect x='5.5' y='5.5' width='13' height='13' stroke='%23120804'/> <rect x='6.5' y='6.5' width='11' height='11' stroke='%23000' stroke-opacity='.3'/> </g> <use href='%23c'/><use href='%23c' transform='matrix(-1 0 0 1 24 0)'/><use href='%23c' transform='matrix(1 0 0 -1 0 24)'/><use href='%23c' transform='matrix(-1 0 0 -1 24 24)'/> </svg>");
  --ribbon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='36'> <defs> <linearGradient id='r' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ea6044'/><stop offset='.45' stop-color='%23b52a18'/><stop offset='1' stop-color='%236e140a'/></linearGradient> <linearGradient id='t' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%239a2414'/><stop offset='1' stop-color='%234a0c06'/></linearGradient> </defs> <path d='M.5 8.5h18v27h-18l6-13.5z' fill='url(%23t)' stroke='%23120804'/> <path d='M71.5 8.5h-18v27h18l-6-13.5z' fill='url(%23t)' stroke='%23120804'/> <path d='M2.5 10.5h14M55.5 10.5h14' stroke='%23e8b452' stroke-opacity='.8'/> <path d='M12.5 30.5l6 5v-5z' fill='%232a0603' stroke='%23120804'/> <path d='M59.5 30.5l-6 5v-5z' fill='%232a0603' stroke='%23120804'/> <rect x='12.5' y='.5' width='47' height='30' fill='url(%23r)' stroke='%23120804'/> <path d='M13 3.5h46M13 27.5h46' stroke='%23f0c869' shape-rendering='crispEdges'/> <path d='M13 4.5h46' stroke='%23fff' stroke-opacity='.22' shape-rendering='crispEdges'/> </svg>");
  --ribbon-gold: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24'> <defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%236e4a22'/><stop offset='.5' stop-color='%234a2e14'/><stop offset='1' stop-color='%232a180a'/></linearGradient></defs> <path d='M.5 .5h47l-5 11.5 5 11.5h-47l5-11.5z' fill='url(%23g)' stroke='%23120804'/> <path d='M4 2.5h40M4 21.5h40' stroke='%23d9a548' shape-rendering='crispEdges'/> </svg>");
  --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'> <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/> <feColorMatrix values='0 0 0 0 .08  0 0 0 0 .05  0 0 0 0 .02  0 0 0 -1.1 .62'/></filter> <rect width='180' height='180' filter='url(%23n)'/> </svg>");
  --grain-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'> <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.05 .6' numOctaves='3' stitchTiles='stitch'/> <feColorMatrix values='0 0 0 0 1  0 0 0 0 .85  0 0 0 0 .6  0 0 0 .9 -.42'/></filter> <rect width='160' height='160' filter='url(%23n)'/> </svg>");
}

:root {
  --bg: #1a1226;
  --panel: rgba(30, 18, 12, 0.93);
  --panel2: rgba(52, 34, 22, 0.95);
  --line: #1a0d06;
  --ink: #120804;
  --gold: #f0c869;
  --gold2: #b07d33;
  --gold3: #6d4815;
  --lac: #8e2414;
  --lac2: #5a140a;
  --text: #f8eedb;
  --muted: #c2ab8a;
  --good: #8be28b;
  --bad: #ff7b7b;
  --warn: #ffb74d;
  --hp: #e53935;
  --mp: #1e88e5;
  --exp: #ffc107;
  --xu: #ffd54f;
  --luong: #80deea;
  --r1: #5ab4ff;
  --r2: #ffd23c;
  --r3: #c77dff;
  --r4: #ff8a3c;
  --outline: 1px 0 0 #120804, -1px 0 0 #120804, 0 1px 0 #120804, 0 -1px 0 #120804, 1px 1px 0 #120804;
  --leather: radial-gradient(ellipse at 50% -20%, rgba(255, 190, 110, 0.13), transparent 55%), var(--grain), linear-gradient(#33211a, #1f140e);
  --plate: linear-gradient(rgba(62, 34, 20, 0.94), rgba(30, 17, 11, 0.94));
  --plate-line: inset 0 0 0 1px #c99a45, inset 0 0 0 2px #2a1206, inset 0 1px 0 2px rgba(255, 210, 150, 0.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: 'VT323', 'Courier New', monospace; font-size: 20px; line-height: 1.12;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
canvas, img { image-rendering: pixelated; image-rendering: crisp-edges; }
#game { position: fixed; inset: 0; display: block; z-index: 0; }
.hidden { display: none !important; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; user-select: text; -webkit-user-select: text; }
h2, h3 { margin: 4px 0 8px; font-weight: normal; color: var(--gold); letter-spacing: 1px; }
.ico { width: 16px; height: 16px; vertical-align: -3px; flex: none; }
.gold { color: var(--gold); }
.grow { flex: 1; min-width: 0; }

/* thanh cuộn kiểu gỗ */
* { scrollbar-width: thin; scrollbar-color: #b07d33 rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #e2ae4f, #8a5a1c); border: 1px solid var(--ink); border-radius: 5px; }

/* ---------- Khung chung */
.panel {
  border: 8px solid transparent;
  border-image: var(--frame-hud) 8 / 8px stretch;
  background: var(--grain), linear-gradient(rgba(48, 30, 20, 0.95), rgba(26, 16, 10, 0.95));
  padding: 6px 8px;
}
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--grain-light), linear-gradient(#bb8a4e 0%, #925f30 47%, #74461f 53%, #5a3519 100%);
  border: 1px solid var(--ink); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.6), inset 0 -2px 0 rgba(30, 14, 4, 0.5), inset 1px 0 0 rgba(255, 220, 160, 0.18), inset -1px 0 0 rgba(255, 220, 160, 0.18), 0 2px 0 var(--ink), 0 3px 4px rgba(0, 0, 0, 0.35);
  padding: 3px 12px 4px; color: #fff4dc; white-space: nowrap; line-height: 1.05;
  text-shadow: 0 1px 0 #2a1206, 1px 0 0 #2a1206, -1px 0 0 #2a1206, 0 -1px 0 #2a1206;
  transition: filter 0.1s;
}
.btn .ico { width: 16px; height: 16px; }
.btn:hover:not(:disabled) { filter: brightness(1.15) saturate(1.05); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.4), inset 0 -1px 0 rgba(30, 14, 4, 0.5), 0 0 0 var(--ink); }
.btn:disabled { filter: grayscale(0.75) brightness(0.72); cursor: default; }
.btn.primary {
  background: linear-gradient(#ffe39a 0%, #f4b744 46%, #dc8d21 54%, #b2671a 100%);
  color: #3a1804; text-shadow: 0 1px 0 rgba(255, 244, 210, 0.7);
  box-shadow: inset 0 1px 0 #fff8da, inset 0 -2px 0 rgba(110, 50, 0, 0.5), inset 1px 0 0 rgba(255, 250, 220, 0.4), inset -1px 0 0 rgba(255, 250, 220, 0.4), 0 2px 0 var(--ink), 0 3px 4px rgba(0, 0, 0, 0.35);
}
.btn.danger { background: linear-gradient(#f07a5e 0%, #c83e26 47%, #a82a16 53%, #701608 100%); }
.btn.on { background: linear-gradient(#93eb9c 0%, #45ad57 47%, #2f8f43 53%, #1b5e2a 100%); }
.btn.small { padding: 1px 8px 2px; font-size: 18px; }
.btn.big { padding: 6px 18px; font-size: 24px; width: 100%; letter-spacing: 1px; }
.tiny-btn { padding: 0 6px; font-size: 17px; }
.x {
  position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; padding: 0; border: 2px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 30%, #ff9a7a, #c62d1a 50%, #6e140a 100%);
  box-shadow: 0 0 0 2px #e8b452, 0 0 0 3px var(--ink), 0 3px 4px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
.x .ico { width: 16px; height: 16px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6)); }
.x:hover { filter: brightness(1.2); }
.x:active { transform: scale(0.92); }
.in {
  background: linear-gradient(#0d0705, #1c110b); color: var(--text); border: 1px solid var(--ink); border-radius: 3px;
  box-shadow: 0 0 0 1px #7a5328, inset 0 2px 3px rgba(0, 0, 0, 0.6); padding: 4px 8px; outline: none; width: 100%; min-width: 0;
}
.in:focus { box-shadow: 0 0 0 1px var(--gold), 0 0 6px rgba(240, 200, 105, 0.55), inset 0 2px 3px rgba(0, 0, 0, 0.6); }
.in:disabled { opacity: 0.6; }
.in.short { width: 90px; flex: none; }
select.in { padding: 3px 4px; }
textarea.in { resize: vertical; }
.row { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.muted { color: var(--muted); }
.tiny { font-size: 17px; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.err { color: var(--bad); min-height: 22px; margin-top: 4px; }
.xu, .xu b { color: var(--xu); }
.luong, .luong b { color: var(--luong); }
.tabs { display: flex; gap: 3px; margin-bottom: 8px; padding: 0 4px; border-bottom: 2px solid #b07d33; box-shadow: 0 1px 0 var(--ink); }
.tab {
  flex: 1; position: relative; top: 2px; background: linear-gradient(#4f3420, #2c1b10); border: 1px solid var(--ink); border-bottom: none; border-radius: 7px 7px 0 0;
  padding: 4px 6px 3px; color: var(--muted); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.18);
}
.tab:hover { color: var(--text); }
.tab.on {
  background: linear-gradient(#d24f30, #8e2414 70%, #6e1a0c); color: #ffe7a0; text-shadow: var(--outline);
  box-shadow: inset 0 1px 0 rgba(255, 200, 150, 0.55), inset 0 0 0 1px rgba(240, 200, 105, 0.5); z-index: 1;
}

/* ---------- Màn hình đăng nhập */
.screen {
  position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px; overflow-y: auto; touch-action: pan-y;
}
.logo { text-align: center; text-shadow: 0 4px 0 #3b1b0b, 4px 0 0 #3b1b0b, -4px 0 0 #3b1b0b, 0 -4px 0 #3b1b0b, 4px 4px 0 #3b1b0b; }
.logo-top { font-size: 72px; color: #ffd54f; letter-spacing: 8px; line-height: 0.9; }
.logo-bot { font-size: 60px; color: #ff7043; letter-spacing: 10px; line-height: 0.9; }
.logo-sub { font-size: 24px; color: #fff3e0; margin-top: 6px; }
.login-box { width: min(360px, 100%); }
.login-box form { display: flex; flex-direction: column; gap: 8px; }
.credit { text-shadow: 0 2px 0 #000; }

.chars-box { width: min(760px, 100%); max-height: 100%; overflow-y: auto; }
.char-list { display: flex; gap: 10px; flex-wrap: wrap; }
.char-card {
  width: 150px; background: var(--panel2); border: 2px solid var(--line); box-shadow: inset 0 0 0 1px var(--gold2);
  padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.char-card canvas { width: 72px; height: 96px; background: rgba(0, 0, 0, 0.25); }
.char-card.new { justify-content: center; color: var(--muted); cursor: pointer; min-height: 190px; font-size: 26px; }
.char-card.new:hover { color: var(--gold); }
.class-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0; }
.class-card {
  background: #241830; border: 2px solid var(--line); padding: 4px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center;
}
.class-card canvas { width: 54px; height: 72px; }
.class-card.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: #3b2716; }
.class-card .el { font-size: 16px; }

/* ================= HUD ================= */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hud > * { pointer-events: auto; }

/* ----- Bảng trạng thái */
#hud-status { position: absolute; left: 8px; top: 8px; width: 344px; height: 106px; pointer-events: none; }
#hud-status > * { pointer-events: auto; }
.av-ring {
  position: absolute; left: 0; top: 0; z-index: 2; width: 86px; height: 86px; border-radius: 50%; padding: 5px;
  background: conic-gradient(from 210deg, #fff1bf, #d9a243 18%, #7a4a12 34%, #e8b452 50%, #fff1bf 62%, #a06a1e 80%, #fff1bf);
  box-shadow: 0 0 0 2px var(--ink), 0 4px 8px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.av-ring::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid rgba(120, 30, 14, 0.9); pointer-events: none;
}
#avatar {
  display: block; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(#5a2a18, #1a0d08);
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 8px #000;
}
.av-ring .lv, #st-lv {
  position: absolute; left: -4px; bottom: -4px; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 16px;
  background: radial-gradient(circle at 38% 30%, #ff9566, #c0301a 55%, #6e140a); border: 2px solid #f0c869;
  box-shadow: 0 0 0 1px var(--ink), 0 2px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff; font-size: 22px; line-height: 27px; text-align: center; text-shadow: var(--outline);
}
.st-info {
  position: absolute; left: 60px; top: 8px; width: 284px; padding: 3px 10px 6px 34px;
  background: var(--plate); border: 1px solid var(--ink); border-radius: 0 12px 12px 0;
  box-shadow: var(--plate-line), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.st-name { display: flex; align-items: baseline; gap: 8px; height: 21px; white-space: nowrap; overflow: hidden; }
#st-name { font-size: 22px; color: #fff3c4; text-shadow: var(--outline); overflow: hidden; text-overflow: ellipsis; }
#st-cls { margin-left: auto; font-size: 15px; text-shadow: var(--outline); }
.lv { color: var(--gold); }

/* thanh HP/MP/EXP */
.bar {
  position: relative; height: 16px; margin-top: 3px; overflow: hidden; border-radius: 3px;
  background: linear-gradient(#0a0504, #24140c); border: 1px solid #070302;
  box-shadow: 0 0 0 1px #8a5f2a, inset 0 1px 3px rgba(0, 0, 0, 0.85);
}
.bar > i, .bar > b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.bar > i { transition: width 0.15s; z-index: 1; }
.bar > b { background: linear-gradient(#fff3d0, #ffc27a); opacity: 0.85; transition: width 0.5s ease-in 0.35s; }
.bar::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06) 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.22)),
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.42) calc(10% - 1px) 10%);
}
.bar > span {
  position: absolute; inset: 0; z-index: 3; font-size: 16px; line-height: 14px; text-align: center; color: #fff; text-shadow: var(--outline); white-space: nowrap;
}
.bar.hp > i { background: linear-gradient(90deg, #8e1010, #e53935 55%, #ff6e4a); }
.bar.mp > i { background: linear-gradient(90deg, #0d3c8a, #1e88e5 55%, #5ec8ff); }
.bar.exp { height: 9px; margin-top: 4px; }
.bar.exp > i { background: linear-gradient(90deg, #a86a00, #ffc107 60%, #fff176); }
.bar.exp > span { font-size: 13px; line-height: 7px; }
.bar.tiny { height: 6px; margin-top: 2px; }
.bar.tiny::after { background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25)); }
#bar-hp::before, #bar-mp::before {
  position: absolute; left: 4px; top: 0; z-index: 3; font-size: 14px; line-height: 14px; color: #ffe7a0; text-shadow: var(--outline);
}
#bar-hp::before { content: 'HP'; }
#bar-mp::before { content: 'MP'; }
#bar-hp.low { animation: lowHp 0.9s infinite; }
@keyframes lowHp { 50% { box-shadow: 0 0 0 1px #ff5252, 0 0 8px #ff1744, inset 0 1px 3px rgba(0, 0, 0, 0.85); } }
.st-money {
  position: absolute; left: 80px; top: 84px; display: flex; gap: 12px; align-items: center; height: 22px; padding: 0 12px 0 14px; font-size: 18px;
  background: linear-gradient(rgba(26, 14, 8, 0.92), rgba(14, 8, 5, 0.92)); border: 1px solid var(--ink); border-top: none; border-radius: 0 0 9px 9px;
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.55), 0 3px 5px rgba(0, 0, 0, 0.4);
}
.st-money span { display: flex; align-items: center; gap: 3px; text-shadow: var(--outline); }
.st-money img { width: 16px; height: 16px; }

/* buff */
#hud-buffs { position: absolute; left: 8px; top: 116px; display: flex; gap: 5px; }
.buff {
  position: relative; width: 36px; height: 36px; border-radius: 5px; background: radial-gradient(#4a2e1a, #1a0e08);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #e2ae4f, 0 2px 3px rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.buff img { width: 32px; height: 32px; border-radius: 3px; }
.buff small {
  position: absolute; left: -2px; right: -2px; bottom: -9px; text-align: center; font-size: 13px; line-height: 12px; color: #b9f6ca; text-shadow: var(--outline);
}
.buff.ending { animation: blink 0.5s steps(2) infinite; }
.buff.pk { box-shadow: inset 0 0 0 1px #ff5252, 0 0 6px rgba(255, 60, 60, 0.6); background: radial-gradient(#6a1010, #2a0404); }
.buff.pk small { color: #ff8a80; }
.buff.debuff { box-shadow: inset 0 0 0 1px #ff8a80, 0 0 6px rgba(255, 23, 68, 0.55); background: radial-gradient(#4a1030, #1a0410); }
.buff.debuff small { color: #ff8a80; }
@keyframes blink { 50% { opacity: 0.45; } }

/* thành viên nhóm */
#hud-party { position: absolute; left: 8px; top: 164px; display: flex; flex-direction: column; gap: 5px; width: 178px; }
.pm {
  padding: 3px 8px 4px; font-size: 16px; border-radius: 0 8px 8px 0; border: 1px solid var(--ink); border-left: 3px solid #69f0ae;
  background: linear-gradient(90deg, rgba(20, 40, 28, 0.88), rgba(16, 10, 6, 0.8)); box-shadow: inset 0 0 0 1px rgba(105, 240, 174, 0.25), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.pmn { display: flex; gap: 4px; align-items: baseline; text-shadow: var(--outline); }
.pmname { color: #b9f6ca; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pml { color: var(--gold); font-size: 15px; }
.crown { color: #ffd54f; }
.pmm { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- Mục tiêu */
#hud-target {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 300px; padding: 3px 12px 7px; text-align: center;
  background: var(--plate); border: 1px solid var(--ink); border-radius: 8px; box-shadow: var(--plate-line), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.tg-head { display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; white-space: nowrap; }
#tg-name { font-weight: normal; font-size: 21px; text-shadow: var(--outline); overflow: hidden; text-overflow: ellipsis; }
#tg-lv {
  font-size: 16px; line-height: 16px; padding: 1px 5px 0; border-radius: 3px; color: #ffe7a0; text-shadow: var(--outline);
  background: linear-gradient(#7a2a14, #4a140a); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px rgba(240, 200, 105, 0.6);
}
#tg-el { font-size: 15px; text-shadow: var(--outline); }
#hud-target .bar { height: 15px; margin-top: 2px; }
#hud-target .bar > span { line-height: 13px; font-size: 15px; }
#hud-target.player { border-color: #0e1a2a; box-shadow: inset 0 0 0 1px #81d4fa, inset 0 0 0 2px #0e1a2a, 0 3px 8px rgba(0, 0, 0, 0.45); }
#hud-target.boss {
  width: 440px; padding: 2px 14px 6px; border: 8px solid transparent; border-image: var(--frame-boss) 8 / 8px stretch; border-radius: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 120, 60, 0.35), transparent 70%), linear-gradient(rgba(76, 10, 6, 0.95), rgba(28, 4, 3, 0.95));
  box-shadow: 0 0 18px rgba(255, 40, 20, 0.45); animation: bossGlow 1.4s ease-in-out infinite;
}
#hud-target.boss .tg-head::before {
  content: 'BOSS'; font-size: 16px; line-height: 16px; padding: 1px 6px 0; border-radius: 3px; color: #fff; text-shadow: var(--outline);
  background: linear-gradient(#ff5a3c, #a3160c); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #ffd36a;
}
#hud-target.boss #tg-name { font-size: 24px; }
.tg-emblem { display: none; }
#hud-target.boss .tg-emblem {
  position: absolute; left: -40px; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #ff8a5a, #b0200e 55%, #4a0604); border: 3px solid #f0c869;
  box-shadow: 0 0 0 2px var(--ink), 0 0 14px rgba(255, 60, 30, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
#hud-target.boss .tg-emblem img { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)); }
#hud-target.boss .bar { height: 20px; }
#hud-target.boss .bar > span { line-height: 18px; font-size: 17px; }
@keyframes bossGlow { 50% { box-shadow: 0 0 26px rgba(255, 60, 30, 0.75); } }
/* boss cuồng nộ (dưới 30% máu): nhãn CUỒNG NỘ, thanh máu đỏ rực đập nhanh */
#hud-target.rage { animation: rageGlow 0.5s ease-in-out infinite; }
#hud-target.rage .tg-head::after {
  content: 'CUỒNG NỘ'; font-size: 15px; line-height: 15px; padding: 1px 5px 0; border-radius: 3px; color: #fff3c4; text-shadow: var(--outline);
  background: linear-gradient(#ff1744, #8e0a1e); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #ff8a80; animation: blink 0.5s steps(2) infinite;
}
#hud-target.rage #tg-bar > i { background: linear-gradient(#ff8a80, #ff1744 45%, #9a0020); }
@keyframes rageGlow { 50% { box-shadow: 0 0 30px rgba(255, 23, 68, 0.95), 0 0 6px rgba(255, 200, 120, 0.8); } }
/* thanh niệm chiêu boss: chạy đầy thì chiêu tung ra */
#tg-cast {
  position: relative; height: 14px; margin: 3px 18px 0; border-radius: 3px; overflow: hidden; background: #140406; border: 1px solid var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 138, 128, 0.55);
}
#tg-cast > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffd180, #ff6d3a 60%, #c62828); }
#tg-cast > span { position: relative; display: block; text-align: center; font-size: 15px; line-height: 13px; color: #fff; text-shadow: var(--outline); white-space: nowrap; }

/* ----- Đang tìm đường: giữa trên; xuống dưới khung mục tiêu khi có mục tiêu */
#hud-travel {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  width: max-content; min-width: 250px; max-width: min(440px, 46vw); padding: 3px 6px 3px 3px;
  background: var(--plate); border: 1px solid var(--ink); border-radius: 22px; box-shadow: var(--plate-line), 0 3px 8px rgba(0, 0, 0, 0.45);
  animation: tvIn 0.2s ease-out;
}
@keyframes tvIn { from { opacity: 0; transform: translate(-50%, -6px); } }
body.tg-on #hud-travel { top: 66px; }
body.tg-boss #hud-travel { top: 86px; }
.tv-ico {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #a4361c, #6e1a0c 60%, #3a0a04); border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.22);
}
.tv-ico .ico { width: 32px; height: 32px; vertical-align: 0; animation: tvStep 1s steps(2) infinite; }
@keyframes tvStep { 50% { transform: translateY(-1px); } }
.tv-main { flex: 1; min-width: 0; line-height: 1; }
.tv-dest { font-size: 19px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--outline); }
.tv-dest b { font-weight: normal; color: #fff3c4; }
.tv-sub { display: flex; gap: 6px; font-size: 15px; line-height: 16px; white-space: nowrap; overflow: hidden; text-shadow: var(--outline); }
.tv-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #9fdcff; }
.tv-left { flex: none; color: var(--gold); }
.tv-label + .tv-left::before { content: '· '; color: var(--muted); }
.tv-x { flex: none; }
body.travel-on.tg-on:not(.win-open) #toasts { top: 114px; }
body.travel-on.tg-boss:not(.win-open) #toasts { top: 134px; }

/* ----- Biểu ngữ sự kiện Tà Thú: giữa đáy màn hình (giữa khung chat và cụm kỹ năng), bấm để tự tìm đường */
#hud-event {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  width: max-content; max-width: min(420px, 40vw); padding: 3px 8px 3px 3px; text-align: left; font: inherit; color: var(--text);
  background: radial-gradient(ellipse at 30% 0%, rgba(255, 60, 90, 0.3), transparent 65%), linear-gradient(rgba(74, 10, 30, 0.95), rgba(28, 4, 12, 0.95));
  border: 1px solid var(--ink); border-radius: 24px;
  box-shadow: inset 0 0 0 1px #c99a45, inset 0 0 0 2px #2a0606, 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 23, 68, 0.35);
  animation: evGlow 1.6s ease-in-out infinite, tvIn 0.2s ease-out;
}
#hud-event:hover { filter: brightness(1.15); }
#hud-event:active { transform: translate(-50%, 1px); }
@keyframes evGlow { 50% { box-shadow: inset 0 0 0 1px #c99a45, inset 0 0 0 2px #2a0606, 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 23, 68, 0.7); } }
#hud-event.done { animation: tvIn 0.2s ease-out; background: var(--plate); }
.ev-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #7a1636, #3a0616 60%, #1a0208); border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(255, 23, 68, 0.6);
}
.ev-ico .ico { width: 32px; height: 32px; vertical-align: 0; }
#hud-event:not(.done) .ev-ico .ico { animation: tvStep 0.8s steps(2) infinite; }
.ev-main { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.ev-top { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ev-title { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #ff8a80; text-shadow: var(--outline); }
.ev-time { font-weight: normal; font-size: 19px; color: #fff3c4; text-shadow: var(--outline); margin-left: auto; }
.ev-time.ending { color: #ff8a80; animation: blink 1s steps(2) infinite; }
.ev-sub { display: flex; gap: 6px; font-size: 18px; line-height: 19px; white-space: nowrap; overflow: hidden; text-shadow: var(--outline); }
/* thiếu chỗ thì tên bản đồ co trước (hệ số co lớn), tên boss giữ nguyên */
.ev-boss { flex: 0 1 auto; color: #ffd27a; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ev-map { flex: 0 100 auto; color: #9fdcff; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ev-map::before { content: '· '; color: var(--muted); }
.ev-go {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#8a3a1c, #5a1a0c 70%, #400f06); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #d9a548;
}
.ev-go .ico { width: 16px; height: 16px; vertical-align: 0; }
/* cửa sổ hoặc hội thoại mở: thông báo chuyển xuống đáy, ẩn biểu ngữ cho khỏi chồng */
body.win-open #hud-event, body.dlg-open #hud-event { display: none; }

/* ----- Lôi đài: viên trạng thái giữa đáy (chờ ghép / đang đấu), số đếm ngược lớn giữa màn hình */
#hud-arena {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  width: max-content; min-width: 240px; max-width: min(420px, 40vw); padding: 3px 5px 3px 3px; color: var(--text);
  background: var(--plate); border: 1px solid var(--ink); border-radius: 24px; box-shadow: var(--plate-line), 0 3px 8px rgba(0, 0, 0, 0.5);
  animation: tvIn 0.2s ease-out;
}
#hud-arena.prep, #hud-arena.fight, #hud-arena.end {
  background: radial-gradient(ellipse at 30% 0%, rgba(255, 120, 60, 0.28), transparent 65%), linear-gradient(rgba(84, 22, 10, 0.95), rgba(34, 8, 4, 0.95));
  box-shadow: inset 0 0 0 1px #c99a45, inset 0 0 0 2px #2a0606, 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 110, 40, 0.35);
}
/* biểu ngữ Tà Thú đang hiện: viên lôi đài nằm ngay trên */
body.ev-on #hud-arena { bottom: 62px; }
.ar-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #a4361c, #6e1a0c 60%, #3a0a04); border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.22);
}
.ar-ico .ico { width: 32px; height: 32px; vertical-align: 0; }
#hud-arena.queue .ar-ico .ico { animation: tvStep 1s steps(2) infinite; }
.ar-main { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.ar-top { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ar-title { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #ffb36a; text-shadow: var(--outline); }
.ar-time { font-weight: normal; font-size: 19px; color: #fff3c4; text-shadow: var(--outline); margin-left: auto; }
.ar-time.ending { color: #ff8a80; animation: blink 1s steps(2) infinite; }
.ar-sub { display: flex; align-items: baseline; gap: 6px; font-size: 18px; line-height: 19px; white-space: nowrap; overflow: hidden; text-shadow: var(--outline); }
.ar-wait { color: #9fdcff; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ar-n { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ar-vs { flex: none; font-size: 15px; color: #ff8a80; }
.ar-opp { flex: 0 1 auto; color: #fff3c4; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ar-oinfo { flex: 0 100 auto; color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ar-btn { flex: none; min-width: 52px; border-radius: 14px; }
.ar-btn.ask { animation: blink 0.6s steps(2) infinite; }
body.win-open #hud-arena, body.dlg-open #hud-arena { display: none; }
#arena-cd {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); pointer-events: none; z-index: 5;
  font-size: 120px; line-height: 1; color: #ffe9a8; letter-spacing: 2px;
  text-shadow: 0 4px 0 #4a0c06, 3px 0 0 #4a0c06, -3px 0 0 #4a0c06, 0 -3px 0 #4a0c06, 0 0 24px rgba(255, 120, 40, 0.8);
}
#arena-cd.go { color: #ff8a6a; font-size: 104px; }
#arena-cd.pop { animation: arPop 0.45s ease-out; }
@keyframes arPop { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 60% { opacity: 1; } }

/* ----- Tab Lôi đài trong bảng xếp hạng */
.ar-tab { display: flex; flex-direction: column; gap: 6px; }
.ar-card {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.6);
}
.ar-badge {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #a4361c, #6e1a0c 60%, #3a0a04); border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--ink);
}
.ar-badge .ico { width: 32px; height: 32px; vertical-align: 0; }
.ar-stat { flex: 1; min-width: 0; line-height: 1.1; }
.ar-pts { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.ar-pts b { font-weight: normal; font-size: 30px; line-height: 28px; color: var(--gold); text-shadow: var(--outline); }
.ar-rk { margin-left: 6px; padding: 0 6px; border-radius: 3px; font-size: 16px; color: #2a1206; background: linear-gradient(#fff1bf, #e2ae4f); border: 1px solid var(--ink); }
.ar-rk.none { color: var(--muted); background: rgba(0, 0, 0, 0.35); border-color: rgba(201, 154, 69, 0.45); }
.ar-line { font-size: 18px; }
.ar-week { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.ar-wbar { flex: none; position: relative; width: 60px; height: 8px; border-radius: 3px; overflow: hidden; background: #0a0504; border: 1px solid #070302; }
.ar-wbar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#a5d6a7, #2e7d32); }
.ar-join { flex: none; }
.ar-rules, .ar-tiers { font-size: 16px; line-height: 17px; }
.ar-list { max-height: 40vh; overflow-y: auto; }
.ar-wl { flex: none; font-size: 16px; }
.ar-elo { flex: none; min-width: 56px; text-align: right; color: var(--gold); text-shadow: var(--outline); }

/* ----- Cửa sổ kết quả trận lôi đài */
.win-arenares { width: min(460px, 94vw); }
.arr { display: flex; flex-direction: column; gap: 8px; }
.arr-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); }
.arr-badge {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #5a5a5a, #2a2a2a 60%, #111); border: 2px solid #9a9a9a; box-shadow: 0 0 0 1px var(--ink);
}
.arr-head.r-win .arr-badge { background: radial-gradient(circle at 40% 32%, #fff3a0, #f2c230 55%, #9a6a12); border-color: #fff8da; box-shadow: 0 0 0 1px var(--ink), 0 0 12px rgba(255, 210, 60, 0.7); }
.arr-head.r-draw .arr-badge { background: radial-gradient(circle at 40% 32%, #9fdcff, #3a78a8 55%, #1a3f63); border-color: #cfeeff; }
.arr-badge .ico { width: 32px; height: 32px; vertical-align: 0; }
.arr-main { min-width: 0; line-height: 1.1; }
.arr-big { font-size: 40px; line-height: 38px; letter-spacing: 3px; color: #c2c2c2; text-shadow: 0 2px 0 #120804, 1px 0 0 #120804, -1px 0 0 #120804, 0 -1px 0 #120804; }
.arr-head.r-win .arr-big { color: #ffd23c; }
.arr-head.r-lose .arr-big { color: #ff8a80; }
.arr-head.r-draw .arr-big { color: #9fdcff; }
.arr-why { color: #fff3c4; font-size: 18px; }
.arr-elo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--ink); background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.45); }
.arr-elo b { font-weight: normal; font-size: 28px; line-height: 26px; color: var(--gold); text-shadow: var(--outline); }
.arr-elo b.arr-from { color: var(--muted); font-size: 22px; }
.arr-arrow { color: var(--muted); }
.arr-d { font-size: 24px; text-shadow: var(--outline); }
.arr-rw { display: flex; gap: 12px; flex-wrap: wrap; font-size: 19px; }
.arr-gain { display: inline-flex; align-items: center; gap: 4px; color: var(--good); text-shadow: var(--outline); }
.arr-gain .ico { width: 16px; height: 16px; }
.arr-streak { color: #ffb36a; text-shadow: var(--outline); }
.arr-foot { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; width: 100%; }

/* ----- Bản đồ nhỏ */
#hud-map {
  position: absolute; right: 8px; top: 8px; width: 206px; padding: 0 0 3px; overflow: hidden;
  background: linear-gradient(rgba(24, 14, 9, 0.92), rgba(14, 8, 5, 0.92)); border: 1px solid var(--ink); border-radius: 8px;
  box-shadow: inset 0 0 0 1px #c99a45, 0 3px 8px rgba(0, 0, 0, 0.45);
}
.mm-head {
  display: flex; justify-content: space-between; align-items: center; gap: 6px; height: 24px; padding: 0 9px; margin-bottom: 3px;
  background: linear-gradient(#a4361c, #6e1a0c 60%, #521208); border-bottom: 1px solid var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 190, 150, 0.45), inset 0 -1px 0 #c99a45, inset 1px 0 0 #c99a45, inset -1px 0 0 #c99a45;
}
#hud-map.town .mm-head { background: linear-gradient(#2f6a9a, #1a3f63 60%, #12304c); }
#hud-map.pvp .mm-head { background: linear-gradient(#5a1010, #300606 60%, #200404); }
#map-name { font-weight: normal; color: #ffe7a0; text-shadow: var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#map-ping { font-size: 15px; text-shadow: var(--outline); }
#minimap {
  display: block; width: 188px; height: 46px; margin: 0 auto; border-radius: 2px;
  border: 1px solid var(--ink); box-shadow: 0 0 0 1px #7a5328;
}
#map-info { font-size: 15px; color: var(--muted); text-align: center; line-height: 16px; margin-top: 2px; text-shadow: var(--outline); }

/* ----- Theo dõi nhiệm vụ */
#hud-quest {
  position: absolute; right: 8px; top: 108px; width: 206px; padding: 2px 8px 6px; font-size: 17px;
  background: linear-gradient(90deg, rgba(14, 8, 5, 0.25), rgba(14, 8, 5, 0.78) 30%); border-right: 3px solid #c99a45; border-radius: 6px 0 0 6px;
  text-shadow: var(--outline);
}
#hud-quest:empty { display: none; }
#hud-quest:hover { background: linear-gradient(90deg, rgba(40, 20, 8, 0.35), rgba(40, 20, 8, 0.85) 30%); }
.qt-head { display: flex; align-items: center; gap: 4px; color: var(--gold); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid rgba(201, 154, 69, 0.45); margin-bottom: 2px; cursor: pointer; }
.qt-head:hover { color: #fff1bf; }
.qt { padding: 2px 3px 1px; margin: 0 -3px; border-radius: 4px; cursor: pointer; }
.qt:hover { background: rgba(255, 200, 120, 0.12); }
.qt.locked { cursor: default; }
.qt.locked:hover { background: none; }
.qt-top { display: flex; align-items: center; gap: 4px; }
.qt b { flex: 1; min-width: 0; font-weight: normal; color: #ffd27a; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-go {
  flex: none; width: 24px; height: 22px; padding: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#8a3a1c, #5a1a0c 70%, #400f06); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #d9a548, 0 1px 0 var(--ink);
}
.qt-go .ico { width: 16px; height: 16px; vertical-align: 0; }
.qt-go:hover { filter: brightness(1.25); }
.qt-go:active { transform: translateY(1px); }
.qt b::before { content: '◆ '; color: #ff9a5a; font-size: 13px; }
.qt.daily b { color: #9fdcff; }
.qt.daily b::before { color: #4fc3f7; }
.qt .qs { color: #f1e6cf; font-size: 16px; line-height: 16px; }
.qt .qs.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; color: #e6d6b8; }
.qt.done .qs { color: var(--good); animation: blink 1.2s steps(2) infinite; }

/* thanh tiến độ nhỏ */
.pbar {
  position: relative; height: 12px; margin: 3px 0 1px; border-radius: 3px; overflow: hidden; background: #0a0504; border: 1px solid #070302;
  box-shadow: 0 0 0 1px rgba(201, 154, 69, 0.55);
}
.pbar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffd27a, #e08a1e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.pbar.blue > i { background: linear-gradient(#9fdcff, #2b8fd6); }
.pbar.exp > i { background: linear-gradient(90deg, #a86a00, #ffc107 60%, #fff176); }
.pbar > span { position: relative; display: block; text-align: center; font-size: 13px; line-height: 10px; color: #fff; text-shadow: var(--outline); }
.win .pbar { height: 16px; }
.win .pbar > span { font-size: 15px; line-height: 14px; }

/* ----- Menu */
#hud-menu {
  position: absolute; right: 8px; bottom: 236px; display: grid; grid-template-columns: repeat(3, 46px); gap: 6px;
}
.mbtn {
  position: relative; width: 46px; height: 46px; padding: 0; border-radius: 9px; border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 200, 140, 0.28), transparent 62%), linear-gradient(#8a3a1c, #5a1a0c 70%, #400f06);
  box-shadow: inset 0 0 0 1px #d9a548, inset 0 0 0 2px #2a1006, inset 0 3px 0 1px rgba(255, 190, 140, 0.18), 0 2px 0 var(--ink), 0 4px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s, filter 0.1s;
}
.mbtn img { width: 32px; height: 32px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7)); pointer-events: none; }
.mbtn small { position: absolute; right: 3px; bottom: 0; font-size: 13px; line-height: 13px; color: #ffe7a0; text-shadow: var(--outline); pointer-events: none; }
.mbtn:hover { filter: brightness(1.2); transform: translateY(-1px); z-index: 6; }
.mbtn:active { transform: translateY(1px); }
.mbtn.open { box-shadow: inset 0 0 0 1px #fff1bf, inset 0 0 0 2px #2a1006, 0 0 0 2px #f0c869, 0 0 10px rgba(240, 200, 105, 0.6); }
.mbtn::after {
  content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); z-index: 5;
  padding: 2px 9px 3px; border-radius: 4px; white-space: nowrap; font-size: 18px; color: var(--text); text-shadow: var(--outline);
  background: rgba(18, 10, 6, 0.95); border: 1px solid #c99a45; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.mbtn:hover::after { opacity: 1; }
.mbtn.dot::before, .mbtn.gift::before {
  content: ''; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #ff9a8a, #e01e1e); border: 1px solid var(--ink); box-shadow: 0 0 4px #ff3d3d;
}
.mbtn.gift { animation: giftPulse 1.6s infinite; }
@keyframes giftPulse { 50% { filter: brightness(1.45); } }
.mbtn.wide { grid-column: span 2; width: auto; }
.mbtn.wide img, .mbtn.pk img { width: 32px; height: 32px; }
.mbtn > span { font-size: 21px; color: #ffe7a0; text-shadow: var(--outline); letter-spacing: 1px; pointer-events: none; }
.mbtn.pk { flex-direction: column; gap: 0; }
.mbtn.pk img { width: 24px; height: 24px; margin-top: 2px; }
.mbtn.pk > span { font-size: 15px; line-height: 12px; }
.mbtn.auto { background: radial-gradient(circle at 50% 30%, rgba(255, 220, 160, 0.25), transparent 62%), linear-gradient(#5a4020, #3a2410 70%, #24160a); }
.mbtn.auto.on {
  background: radial-gradient(circle at 50% 30%, rgba(200, 255, 200, 0.45), transparent 62%), linear-gradient(#4cc35e, #23802f 70%, #145a1e);
  box-shadow: inset 0 0 0 1px #c8ffcf, inset 0 0 0 2px #0b3a12, 0 2px 0 var(--ink), 0 0 12px 2px rgba(120, 255, 140, 0.6);
  animation: autoOn 1.2s ease-in-out infinite alternate;
}
.mbtn.auto.on > span { color: #fff; }
@keyframes autoOn { to { box-shadow: inset 0 0 0 1px #c8ffcf, inset 0 0 0 2px #0b3a12, 0 2px 0 var(--ink), 0 0 20px 5px rgba(120, 255, 140, 0.75); } }
.mbtn.pk.on {
  background: radial-gradient(circle at 50% 30%, rgba(255, 180, 160, 0.45), transparent 62%), linear-gradient(#f0402a, #a0140a 70%, #600804);
  box-shadow: inset 0 0 0 1px #ffc2b0, inset 0 0 0 2px #3a0402, 0 2px 0 var(--ink), 0 0 14px 3px rgba(255, 50, 30, 0.7);
  animation: pkOn 0.8s ease-in-out infinite alternate;
}
@keyframes pkOn { to { filter: brightness(1.25); } }
/* menu máy tính: AUTO chiếm một ô, chữ dưới icon như nút PK, để 13 nút + AUTO + PK vừa 5 hàng */
#hud-menu .mbtn.auto { grid-column: auto; width: 46px; flex-direction: column; gap: 0; }
#hud-menu .mbtn.auto img { width: 24px; height: 24px; margin-top: 2px; }
#hud-menu .mbtn.auto > span { font-size: 15px; line-height: 12px; letter-spacing: 0; }

/* ----- Chat */
#hud-chat {
  position: absolute; left: 8px; bottom: 8px; width: 410px; padding: 4px 6px 6px;
  background: linear-gradient(rgba(12, 7, 4, 0.42), rgba(12, 7, 4, 0.72)); border: 1px solid rgba(201, 154, 69, 0.6); border-radius: 7px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
#hud-chat.collapsed #chat-log, #hud-chat.collapsed .chat-in, #hud-chat.collapsed #chat-tabs { display: none; }
#hud-chat.collapsed { width: auto; padding: 3px; background: transparent; border: none; box-shadow: none; }
#hud-chat.collapsed .chat-top { margin: 0; }
.chat-top { margin: 0 0 3px; }
#chat-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.ctab {
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(201, 154, 69, 0.4); border-radius: 9px; color: var(--muted);
  font-size: 16px; line-height: 17px; padding: 0 8px; text-shadow: var(--outline);
}
.ctab:hover { color: var(--text); }
.ctab.on { background: linear-gradient(#ffd98a, #c99a45); color: #2a1206; border-color: var(--ink); text-shadow: none; }
#chat-toggle {
  width: 34px; height: 30px; padding: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(255, 200, 140, 0.3), transparent 62%), linear-gradient(#8a3a1c, #4a140a);
  box-shadow: inset 0 0 0 1px #d9a548, 0 2px 0 var(--ink), 0 3px 4px rgba(0, 0, 0, 0.4);
}
#chat-toggle img { width: 16px; height: 16px; }
#hud-chat.unread #chat-toggle::after {
  content: ''; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: #ff3d3d; border: 1px solid var(--ink);
}
#chat-log {
  height: 128px; overflow-y: auto; font-size: 17px; line-height: 1.08; touch-action: pan-y; user-select: text; padding-right: 2px;
  text-shadow: 1px 1px 0 #000, -1px 0 0 rgba(0, 0, 0, 0.6);
}
.cl { word-break: break-word; padding: 0 2px; }
.cch {
  display: inline-block; font-size: 14px; line-height: 14px; padding: 0 3px; margin-right: 3px; border-radius: 3px; vertical-align: 1px;
  color: #e0e0e0; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); text-shadow: 1px 1px 0 #000;
}
.cfrom { color: #fff59d; cursor: pointer; }
.cfrom:hover { text-decoration: underline; }
.ch-world .cch { color: #ffcc80; background: rgba(255, 152, 0, 0.22); border-color: rgba(255, 183, 77, 0.6); }
.ch-world .cfrom { color: #ffcc80; }
.ch-map .cch { color: #e8eaf6; }
.ch-party .cch { color: #69f0ae; background: rgba(0, 200, 83, 0.2); border-color: rgba(105, 240, 174, 0.55); }
.ch-party .cmsg, .ch-party .cfrom { color: #a5f5c8; }
.ch-clan .cch { color: #e1bee7; background: rgba(170, 0, 255, 0.2); border-color: rgba(206, 147, 216, 0.6); }
.ch-clan .cmsg, .ch-clan .cfrom { color: #e1bee7; }
.ch-pm .cch { color: #f8bbd0; background: rgba(255, 64, 129, 0.22); border-color: rgba(244, 143, 177, 0.6); }
.ch-pm .cmsg, .ch-pm .cfrom { color: #f8bbd0; }
.ch-sys .cch { color: #81d4fa; background: rgba(3, 169, 244, 0.2); border-color: rgba(129, 212, 250, 0.55); }
.ch-sys .cmsg { color: #b3e5fc; }
.chat-in { margin: 4px 0 0; }
.chat-in .in { padding: 2px 6px; }
#chat-ch { color: #e8eaf6; }
#chat-ch[data-ch='world'] { color: #ffcc80; }
#chat-ch[data-ch='party'] { color: #69f0ae; }
#chat-ch[data-ch='clan'] { color: #e1bee7; }
#chat-ch[data-ch='pm'] { color: #f8bbd0; }

/* ----- Thanh kỹ năng: cụm nút tròn quanh nút đánh thường */
#hud #hud-skills {
  position: absolute; right: 6px; bottom: 6px; width: 290px; height: 236px; pointer-events: none;
  --cx: 62px; --cy: 62px; --A: 96px; --R: 138px; --s: 54px; --ps: 46px;
}
#hud-skills > * { pointer-events: auto; }
.sbtn {
  position: absolute; width: var(--s); height: var(--s); padding: 0; border-radius: 50%; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center; color: #fff; touch-action: none;
  background: radial-gradient(circle at 50% 42%, #5a3424 0%, #1c100a 72%);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--el, #8d6e63) 55%, #000) 0%, #1c100a 72%);
  box-shadow: inset 0 0 0 2px #e2ae4f, inset 0 0 0 3px #3a1a08, inset 0 4px 8px rgba(255, 255, 255, 0.16), 0 3px 0 rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.06s;
}
.sbtn::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%);
}
/* vòng cung bán kính --R (138px) quanh tâm nút đánh, 6 ô cách đều từ góc 194° đến 82°, tính sẵn ra px */
.sbtn[data-act='s1'] { right: 169px; bottom: 2px; }
.sbtn[data-act='s2'] { right: 171px; bottom: 55px; }
.sbtn[data-act='s3'] { right: 153px; bottom: 106px; }
.sbtn[data-act='s4'] { right: 118px; bottom: 145px; }
.sbtn[data-act='s5'] { right: 69px; bottom: 169px; }
.sbtn[data-act='s6'] { right: 16px; bottom: 172px; }
.sbtn .sk-img { width: 32px; height: 32px; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.sbtn .sk-img:not([src]) { visibility: hidden; }
.sbtn.basic {
  width: var(--A); height: var(--A); right: calc(var(--cx) - var(--A) / 2); bottom: calc(var(--cy) - var(--A) / 2); border-width: 3px;
  background: radial-gradient(circle at 50% 40%, #e2553a 0%, #8e1f12 55%, #3a0a04 100%);
  box-shadow: inset 0 0 0 3px #f0c869, inset 0 0 0 5px #3a0a04, inset 0 6px 12px rgba(255, 220, 180, 0.3), 0 4px 0 rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.5);
}
.sbtn.basic .sk-img { width: 48px; height: 48px; }
.sbtn.down, .sbtn:active { transform: scale(0.92); }
.sbtn.down { filter: brightness(1.3); }
.sbtn small {
  position: absolute; right: -3px; bottom: -3px; min-width: 19px; height: 19px; padding: 0 3px; border-radius: 10px; font-size: 15px; line-height: 17px; text-align: center;
  color: #ffe7a0; background: #1a0d06; border: 1px solid #c99a45; text-shadow: none; pointer-events: none; z-index: 3;
}
.sbtn.basic small { right: 6px; bottom: 2px; }
.sbtn .cd {
  position: absolute; inset: 3px; border-radius: 50%; pointer-events: none; z-index: 1; --p: 0;
  background: conic-gradient(transparent calc((1 - var(--p)) * 360deg), rgba(8, 4, 2, 0.74) 0);
}
.sbtn.basic .cd { inset: 5px; background: conic-gradient(transparent calc((1 - var(--p)) * 360deg), rgba(8, 4, 2, 0.42) 0); }
.sbtn.cool .cd { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.sbtn .cdt {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-style: normal; font-size: 26px; color: #fff; text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
}
.sbtn .cdt:empty { display: none; }
.sbtn.rdy { animation: ready 0.45s ease-out; }
@keyframes ready { 0% { box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 rgba(255, 240, 180, 0.9); } 100% { box-shadow: inset 0 0 0 2px #e2ae4f, 0 0 0 14px rgba(255, 240, 180, 0); } }
.sbtn.empty { opacity: 0.55; }
.sbtn.empty::after { content: '+'; position: absolute; font-size: 26px; color: rgba(255, 231, 160, 0.45); pointer-events: none; }
.sbtn.nomp .sk-img { filter: grayscale(1) brightness(0.65); }
.sbtn.nomp::before { background: radial-gradient(circle, rgba(30, 136, 229, 0.0) 40%, rgba(30, 136, 229, 0.45)); }
.sbtn.pot, .sbtn.act {
  width: var(--ps); height: var(--ps); --el: #4a3a5a;
  background: radial-gradient(circle at 50% 40%, #4a3424 0%, #1a0e08 75%);
}
.sbtn.pot.hp { right: calc(var(--cx) + var(--R) + 52px); bottom: 10px; }
.sbtn.pot.mp { right: calc(var(--cx) + var(--R) + 52px); bottom: 64px; }
.sbtn.act { right: calc(var(--cx) + var(--R) + 46px); bottom: 118px; }
.sbtn.pot img { width: 36px; height: 36px; pointer-events: none; }
.sbtn.act .sk-img { width: 32px; height: 32px; }
.sbtn .qty {
  position: absolute; left: -4px; bottom: -4px; min-width: 20px; padding: 0 3px; border-radius: 9px; font-size: 15px; line-height: 16px; text-align: center;
  color: #fff; background: #1a0d06; border: 1px solid #c99a45; text-shadow: none; pointer-events: none; z-index: 3;
}
.sbtn.pot.empty .qty { color: var(--bad); }
.sbtn.pot.empty::after { content: none; }

/* đổi bộ kỹ năng: góc trên-trái vòng cung, không chạm nút nào */
.hb-sets {
  position: absolute; right: 186px; bottom: 192px; display: flex; align-items: center; gap: 3px; padding: 2px 3px 2px 8px;
  border-radius: 15px; background: linear-gradient(rgba(26, 14, 8, 0.9), rgba(14, 8, 5, 0.9)); border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.7), 0 2px 5px rgba(0, 0, 0, 0.45);
}
.hbs-lab { font-size: 15px; color: var(--gold); text-shadow: var(--outline); margin-right: 1px; }
.hbs {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 17px; line-height: 20px; color: var(--muted);
  background: radial-gradient(circle at 50% 35%, #4a3020, #1a0e08); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #8a5f2a;
}
.hbs:hover { color: var(--text); filter: brightness(1.2); }
.hbs:active { transform: translateY(1px); }
.hbs.on { color: #3a1804; background: radial-gradient(circle at 50% 35%, #fff1bf, #e2ae4f 60%, #a06a1e); box-shadow: inset 0 0 0 1px #fff8da, 0 0 6px rgba(240, 200, 105, 0.7); }

/* ----- D-pad cảm ứng */
#hud-dpad { display: none; }

/* ================= CỬA SỔ ================= */
#windows { position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.win {
  position: relative; width: min(700px, 96vw); max-height: min(580px, 92vh); display: flex; flex-direction: column;
  border: 16px solid transparent; border-image: var(--frame-win) 16 / 16px stretch;
  background: var(--leather); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65);
  animation: winIn 0.16s ease-out;
}
@keyframes winIn { from { transform: translateY(8px) scale(0.97); opacity: 0; } }
.win-head { position: relative; display: flex; justify-content: center; height: 36px; margin: -27px 0 0; flex: none; z-index: 2; }
.win-title {
  height: 36px; max-width: calc(100% - 56px); border-style: solid; border-width: 0 26px; border-color: transparent;
  border-image: var(--ribbon) 0 26 fill / 0 26px stretch; padding: 0 8px;
  font-size: 26px; line-height: 30px; color: #ffe9a8; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 0 #4a0c06, 1px 0 0 #4a0c06, -1px 0 0 #4a0c06, 0 -1px 0 #4a0c06;
}
.win-head .x { position: absolute; right: -26px; top: 2px; }
.win-body { position: relative; padding: 8px 8px 8px; overflow-y: auto; flex: 1; touch-action: pan-y; }
.win-foot {
  margin: 2px 0 0; padding: 6px 8px 2px; border-top: 1px solid var(--ink); box-shadow: inset 0 1px 0 rgba(201, 154, 69, 0.55);
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; flex: none;
}
.sec {
  position: relative; margin: 6px 0; padding: 6px 10px 7px; border-radius: 5px; border: 1px solid var(--ink);
  background: linear-gradient(rgba(84, 56, 36, 0.42), rgba(44, 28, 18, 0.42));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.3), inset 0 1px 0 1px rgba(255, 220, 160, 0.06);
}
.sec-title, .sub-title {
  color: var(--gold); font-size: 20px; letter-spacing: 0.5px; text-shadow: var(--outline);
}
.sec-title { margin: -2px 0 4px; padding-bottom: 2px; border-bottom: 1px solid rgba(201, 154, 69, 0.35); }
.sub-title { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.sub-title::before { content: ''; width: 7px; height: 7px; background: #e2553a; border: 1px solid #f0c869; transform: rotate(45deg); flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; }
.kv { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(201, 154, 69, 0.25); }
.kv b { color: var(--gold); font-weight: normal; }
.kv.k-hp b { color: #ff8a80; }
.kv.k-mp b { color: #82c8ff; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.tag {
  display: inline-block; font-size: 16px; line-height: 17px; padding: 0 6px; border-radius: 3px; text-shadow: var(--outline);
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 154, 69, 0.5); color: var(--text);
}
.tag.clan { color: #e1bee7; }
.pts { padding: 0 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.3); }
.empty-note { display: flex; gap: 10px; align-items: center; padding: 10px; color: var(--muted); }
.empty-note > .ico { width: 32px; height: 32px; opacity: 0.85; }
.add-row { margin-top: 8px; }
.badge { font-size: 15px; padding: 0 5px; border-radius: 3px; border: 1px solid var(--ink); margin-left: 4px; text-shadow: var(--outline); }
.badge.lock { background: #6a4a10; color: #ffe7a0; }
.badge.ok { background: #1b5e2a; color: #b9f6ca; }

/* ô vật phẩm */
.slot {
  position: relative; width: 46px; height: 46px; border-radius: 5px; flex: none; cursor: pointer;
  background: radial-gradient(circle at 50% 42%, #3d2818, #150c07 75%); border: 1px solid #070302;
  box-shadow: inset 0 0 0 1px #6b4a2a, inset 0 0 0 2px #120804, inset 0 3px 6px rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  --rc: transparent;
}
.slot img { width: 36px; height: 36px; pointer-events: none; position: relative; z-index: 1; }
.slot:hover:not(.empty) { box-shadow: inset 0 0 0 1px #f0c869, inset 0 0 0 2px #120804, 0 0 6px rgba(240, 200, 105, 0.6); }
.slot.big { width: 58px; height: 58px; }
.slot.big img { width: 48px; height: 48px; }
.slot.empty { cursor: default; background: radial-gradient(circle at 50% 42%, #2a1b10, #120a06 75%); }
.slot.empty .ghost { opacity: 0.32; filter: grayscale(1); }
.slot.sel { box-shadow: inset 0 0 0 2px #fff176, 0 0 0 1px #fff176, 0 0 10px rgba(255, 241, 118, 0.85); }
.slot.locked img { filter: grayscale(0.7) brightness(0.7); }
.slot.locked::before { content: ''; position: absolute; inset: 0; border-radius: 4px; background: rgba(120, 0, 0, 0.25); z-index: 2; pointer-events: none; }
.slot.r1 { --rc: var(--r1); background: radial-gradient(circle at 50% 45%, rgba(90, 180, 255, 0.32), #0d0a14 78%); box-shadow: inset 0 0 0 1px var(--r1), inset 0 0 9px rgba(90, 180, 255, 0.45), 0 0 4px rgba(90, 180, 255, 0.55); }
.slot.r2 { --rc: var(--r2); background: radial-gradient(circle at 50% 45%, rgba(255, 210, 60, 0.32), #120c06 78%); box-shadow: inset 0 0 0 1px var(--r2), inset 0 0 9px rgba(255, 210, 60, 0.45), 0 0 5px rgba(255, 210, 60, 0.6); }
.slot.r3 { --rc: var(--r3); background: radial-gradient(circle at 50% 45%, rgba(199, 125, 255, 0.36), #100914 78%); box-shadow: inset 0 0 0 1px var(--r3), inset 0 0 10px rgba(199, 125, 255, 0.5), 0 0 6px rgba(199, 125, 255, 0.7); animation: glowR3 1.8s ease-in-out infinite; }
.slot.r4 { --rc: var(--r4); background: radial-gradient(circle at 50% 45%, rgba(255, 138, 60, 0.42), #140a06 78%); box-shadow: inset 0 0 0 1px var(--r4), inset 0 0 12px rgba(255, 138, 60, 0.55), 0 0 8px rgba(255, 138, 60, 0.8); animation: glowR4 1.4s ease-in-out infinite; }
.slot.r3::after, .slot.r4::after {
  content: ''; position: absolute; inset: 1px; border-radius: 4px; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%) no-repeat; background-size: 260% 100%;
  animation: shimmer 2.6s linear infinite;
}
@keyframes glowR3 { 50% { box-shadow: inset 0 0 0 1px var(--r3), inset 0 0 14px rgba(199, 125, 255, 0.7), 0 0 12px rgba(199, 125, 255, 0.95); } }
@keyframes glowR4 { 50% { box-shadow: inset 0 0 0 1px #ffd0a0, inset 0 0 16px rgba(255, 138, 60, 0.8), 0 0 14px rgba(255, 138, 60, 1); } }
@keyframes shimmer { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
.slot.slot.sel { box-shadow: inset 0 0 0 2px #fff176, 0 0 0 2px #fff176, 0 0 12px rgba(255, 241, 118, 0.9); animation: none; }
.slot .qty { position: absolute; right: 2px; bottom: -1px; z-index: 3; font-size: 15px; color: #fff; text-shadow: var(--outline); }
.slot .plus { position: absolute; left: 2px; top: -2px; z-index: 3; font-size: 15px; color: #ffeb3b; text-shadow: var(--outline); }
/* thời hạn của vật phẩm có hạn dùng (6n = 6 ngày, 5g = 5 giờ) */
.slot .exp {
  position: absolute; left: 1px; bottom: 0; z-index: 3; padding: 0 2px; border-radius: 3px; font-size: 15px; line-height: 13px;
  color: #fff; background: rgba(142, 36, 20, 0.85); text-shadow: var(--outline);
}
.id-exp { margin-top: 4px; color: var(--warn); }
.id-exp.soon { color: var(--bad); }
.id-exp.forever { color: var(--good); }

/* túi đồ: hình nhân vật + ô trang bị */
.inv-wrap { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.inv-top { margin: 0 0 4px; }
.inv-top .sub-title { margin: 0; }
.doll {
  display: grid; grid-template-columns: 58px 104px 58px; grid-template-rows: repeat(4, 62px); gap: 0 4px; justify-content: center;
  padding: 6px 6px 2px; border-radius: 8px; border: 1px solid var(--ink);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 190, 110, 0.2), transparent 55%), linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.5);
}
.doll-fig { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.doll-fig::before {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 84px; height: 20px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240, 200, 105, 0.35), rgba(240, 200, 105, 0) 70%); border: 1px solid rgba(240, 200, 105, 0.35);
}
.doll-fig canvas { width: 96px; height: 120px; position: relative; }
/* tab Trang bị / Thời trang; tab Thời trang có 3 hàng ô + dòng tốc chạy thú cưỡi ở hàng 4.
   Hai tab dùng chung 4 hàng của .doll để cửa sổ không co giãn (nút tab không nhảy) khi đổi tab */
.eq-tabs { margin-bottom: 6px; }
.eq-tabs .tab { padding: 2px 8px 1px; }
body.touch .eq-tabs .tab { min-height: 44px; }
.doll-note {
  grid-column: 1 / span 3; grid-row: 4; align-self: center; text-align: center; padding: 4px 2px 3px;
  font-size: 16px; line-height: 17px; color: var(--text); text-shadow: var(--outline);
}
.doll-note b { font-weight: normal; color: var(--good); }
.eq-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; font-size: 14px; line-height: 14px; color: var(--muted); }
.eq-cell label { margin-top: 1px; white-space: nowrap; text-shadow: var(--outline); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 4px; }
.money { display: flex; gap: 14px; align-items: center; color: var(--xu); text-shadow: var(--outline); }
.money > span { display: inline-flex; align-items: center; gap: 4px; }
.money b { font-weight: normal; }

/* chi tiết vật phẩm */
.item-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; width: min(350px, 94vw); padding: 6px 8px 4px;
  border: 12px solid transparent; border-image: var(--frame-win) 16 / 12px stretch; background: var(--leather);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7); animation: winIn 0.12s ease-out;
}
.item-pop.r1 .id-head { border-color: rgba(90, 180, 255, 0.6); }
.item-pop.r2 .id-head { border-color: rgba(255, 210, 60, 0.6); }
.item-pop.r3 .id-head { border-color: rgba(199, 125, 255, 0.7); }
.item-pop.r4 .id-head { border-color: rgba(255, 138, 60, 0.8); }
.id-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(201, 154, 69, 0.4); }
.id-name { font-size: 25px; text-shadow: var(--outline); }
.id-req { display: flex; gap: 10px; font-size: 18px; }
.id-stats { margin: 4px 0; padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); }
.stat { color: #e0f2f1; }
.stat b { color: #b9f6ca; font-weight: normal; }
.pop-btns { margin-top: 8px; }
.qty-in { width: 70px; }

/* nhân vật */
.char-head { display: flex; gap: 14px; align-items: center; padding: 4px 6px 8px; }
.por-ring {
  position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; padding: 6px;
  background: conic-gradient(from 210deg, #fff1bf, #d9a243 18%, #7a4a12 34%, #e8b452 50%, #fff1bf 62%, #a06a1e 80%, #fff1bf);
  box-shadow: 0 0 0 2px var(--ink), 0 4px 8px rgba(0, 0, 0, 0.5);
}
.por-ring canvas { display: block; width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink), inset 0 0 8px #000; background: #1a0d08; }
.lv-badge {
  position: absolute; right: -6px; bottom: -4px; min-width: 32px; height: 30px; padding: 0 4px; border-radius: 15px; text-align: center;
  background: radial-gradient(circle at 38% 30%, #ff9566, #c0301a 55%, #6e140a); border: 2px solid #f0c869; box-shadow: 0 0 0 1px var(--ink);
  font-size: 21px; line-height: 25px; color: #fff; text-shadow: var(--outline);
}
.ch-info { flex: 1; min-width: 0; }
.big-name { font-size: 32px; line-height: 30px; color: #fff3c4; text-shadow: 0 2px 0 #4a0c06, var(--outline); }
/* ngoại trang trong cửa sổ Nhân Vật */
.char-style { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 4px 8px; border-radius: 5px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.3); }
.cs-title { align-self: center; margin-right: 4px; color: var(--gold); text-shadow: var(--outline); }
.cs-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 15px; line-height: 15px; color: var(--muted); }
.cs-cell label { white-space: nowrap; text-shadow: var(--outline); }
.char-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.char-cols .sec { margin: 0; }
.stat-block { padding: 2px 0 3px; border-bottom: 1px dotted rgba(201, 154, 69, 0.25); }
.stat-block:last-child { border-bottom: none; }
.stat-row { display: grid; grid-template-columns: 1fr 74px auto auto; gap: 6px; align-items: center; }
.stat-row .sn { color: #ffe7c0; }
.stat-row b { color: var(--gold); font-weight: normal; font-size: 21px; }
.stat-row b em { font-style: normal; color: var(--good); font-size: 17px; }

/* kỹ năng */
.sk-top { margin: 8px 2px 2px; }
.sk-top .sub-title { margin: 0; }
.hb-box {
  position: sticky; top: -8px; z-index: 4; margin: 0 0 6px; padding-bottom: 6px;
  background: linear-gradient(rgba(84, 56, 36, 0.42), rgba(44, 28, 18, 0.42)), linear-gradient(#2e1e16, #22160f);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.3), 0 6px 8px -4px rgba(0, 0, 0, 0.6);
}
.hb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: -2px 0 6px; border-bottom: 1px solid rgba(201, 154, 69, 0.35); }
.hb-head .sec-title { margin: 0; padding-bottom: 3px; border: none; }
.hb-tabs { display: flex; gap: 3px; }
.hb-tabs .tab { flex: none; top: 1px; min-width: 64px; padding: 2px 10px 2px; }
.hb-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 4px; flex-wrap: wrap; }
.hb-sep { width: 2px; height: 44px; border-radius: 1px; background: linear-gradient(transparent, rgba(201, 154, 69, 0.6), transparent); }
.hb-basic, .hb-slot {
  position: relative; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink);
  background: radial-gradient(circle at 50% 42%, #5a3424 0%, #1c100a 72%);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--el, #8d6e63) 55%, #000) 0%, #1c100a 72%);
  box-shadow: inset 0 0 0 2px #e2ae4f, inset 0 0 0 3px #3a1a08, inset 0 4px 8px rgba(255, 255, 255, 0.16), 0 3px 0 rgba(0, 0, 0, 0.5);
}
.hb-basic { width: 64px; height: 64px; opacity: 0.85; background: radial-gradient(circle at 50% 40%, #e2553a 0%, #8e1f12 55%, #3a0a04 100%); box-shadow: inset 0 0 0 2px #f0c869, inset 0 0 0 4px #3a0a04, 0 3px 0 rgba(0, 0, 0, 0.5); }
.hb-basic .sk-img { width: 48px; height: 48px; }
.hb-slot { width: 58px; height: 58px; cursor: pointer; touch-action: none; transition: transform 0.08s; }
.hb-slot .sk-img { width: 48px; height: 48px; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.hb-slot.empty { background: radial-gradient(circle, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)); border: 2px dashed rgba(226, 174, 79, 0.65); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
.hb-slot.empty::after { content: '+'; font-size: 28px; line-height: 1; color: rgba(255, 231, 160, 0.4); pointer-events: none; }
.hb-slot:hover { filter: brightness(1.15); }
.hb-slot:active { transform: scale(0.94); }
.hb-no {
  position: absolute; left: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; z-index: 2;
  font-size: 16px; line-height: 18px; text-align: center; color: #ffe7a0; background: #1a0d06; border: 1px solid #c99a45; pointer-events: none;
}
.hb-aux {
  position: absolute; left: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: #0b3a12; border: 1px solid #69f0ae; pointer-events: auto;
}
.hb-aux .ico { width: 16px; height: 16px; vertical-align: 0; }
.hb-x {
  position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink);
  background: radial-gradient(circle at 38% 30%, #ff9a7a, #c62d1a 50%, #6e140a 100%); box-shadow: 0 0 0 1px #e8b452, 0 2px 2px rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 0.12s;
}
.hb-x::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.hb-x .ico { width: 16px; height: 16px; vertical-align: 0; }
.hb-slot:hover .hb-x, .hb-slot.sel .hb-x { opacity: 1; }
/* cảm ứng không có hover: nút gỡ chỉ hiện ở ô đang chọn, ẩn hẳn để không bấm nhầm */
body.touch .hb-slot:not(.sel) .hb-x { display: none; }
.hb-x:hover { filter: brightness(1.2); }
.hb-slot.can { animation: slotCan 1s ease-in-out infinite; }
.hb-slot.empty.can { border-color: #fff176; }
@keyframes slotCan { 50% { box-shadow: inset 0 0 0 2px #fff176, inset 0 0 0 3px #3a1a08, 0 0 0 2px rgba(255, 241, 118, 0.5), 0 0 14px rgba(255, 241, 118, 0.85); } }
.hb-slot.sel, .hb-slot.has { box-shadow: inset 0 0 0 2px #fff8da, inset 0 0 0 3px #3a1a08, 0 0 0 3px #f0c869, 0 0 12px rgba(240, 200, 105, 0.8); }
.hb-slot.over { transform: scale(1.1); box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #fff176, 0 0 18px rgba(255, 241, 118, 1); animation: none; }
.hb-slot.drag-from { opacity: 0.35; }
.hb-ghost {
  position: fixed; left: -29px; top: -29px; z-index: 75; width: 58px; height: 58px; border-radius: 50%; pointer-events: none;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); opacity: 0.92;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--el, #8d6e63) 55%, #000) 0%, #1c100a 72%);
  box-shadow: inset 0 0 0 2px #fff176, 0 6px 14px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 241, 118, 0.6);
}
.hb-ghost .sk-img { width: 48px; height: 48px; }
body.sk-dragging, body.sk-dragging * { cursor: grabbing !important; }
.hb-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 26px; flex-wrap: wrap; text-align: center; font-size: 17px; color: var(--muted); }
.hb-status.on { color: #fff3c4; text-shadow: var(--outline); }
.hb-status b { font-weight: normal; color: #fff176; }
.hb-hint { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 3px; font-size: 16px; color: #b9f6ca; text-shadow: var(--outline); }
.skill-row {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; margin: 5px 0; border-radius: 6px;
  border: 1px solid var(--ink); background: linear-gradient(90deg, rgba(90, 58, 36, 0.5), rgba(40, 26, 16, 0.4));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.28);
}
.skill-row.usable { cursor: pointer; }
.skill-row.usable:hover { background: linear-gradient(90deg, rgba(120, 78, 44, 0.6), rgba(50, 32, 20, 0.45)); }
.skill-row.pick { box-shadow: inset 0 0 0 2px #fff176, 0 0 10px rgba(255, 241, 118, 0.45); background: linear-gradient(90deg, rgba(140, 100, 40, 0.6), rgba(50, 32, 20, 0.45)); }
.sk-list.picking .skill-row.usable:not(.pick) .sk-icon { animation: slotCan 1s ease-in-out infinite; }
.skill-row.basic { background: linear-gradient(90deg, rgba(120, 40, 20, 0.45), rgba(40, 26, 16, 0.4)); }
.skill-row.locked .sk-icon, .skill-row.locked .sk-info { opacity: 0.6; }
.skill-row.locked .sk-icon img { filter: grayscale(1); }
.sk-icon {
  position: relative; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: radial-gradient(circle at 50% 42%, #5a3424, #1c100a 75%);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--el, #8d6e63) 55%, #000), #1c100a 75%);
  box-shadow: inset 0 0 0 2px #e2ae4f, inset 0 0 0 3px #3a1a08, 0 2px 4px rgba(0, 0, 0, 0.5);
}
.sk-icon.drag { cursor: grab; touch-action: none; }
.sk-icon .sk-img { width: 32px; height: 32px; pointer-events: none; }
.sk-lv {
  position: absolute; right: -5px; bottom: -4px; min-width: 18px; padding: 0 3px; border-radius: 9px; font-size: 14px; line-height: 15px; text-align: center;
  background: #1a0d06; border: 1px solid #c99a45; color: #ffe7a0;
}
.sk-name b { font-weight: normal; font-size: 22px; color: #fff3c4; text-shadow: var(--outline); margin-right: 4px; }
.sk-in {
  display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 15px; line-height: 17px; border-radius: 9px; vertical-align: 2px;
  color: #3a1804; background: linear-gradient(#fff1bf, #e2ae4f); border: 1px solid var(--ink);
}
.tag.sk-auto { margin-left: 6px; vertical-align: 2px; color: #b9f6ca; border-color: rgba(105, 240, 174, 0.6); background: rgba(11, 58, 18, 0.6); }
.tag.sk-auto .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.sk-meta { color: #ffd9a0; }
.sk-act { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
/* tab Chủ động / Nội tại + điểm kỹ năng ở cuối hàng tab */
.sk-tabs { align-items: flex-end; }
.sk-tabs .tab { flex: none; min-width: 110px; padding: 3px 12px 2px; }
.sk-pts { margin-left: auto; margin-bottom: 3px; font-size: 18px; }
/* kỹ năng nội tại: icon lục giác tự có khung, nên ô chứa không vẽ vòng tròn */
.sk-icon.pas { border: none; border-radius: 0; background: none; box-shadow: none; }
.sk-icon.pas .sk-img { width: 48px; height: 48px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)); }
.skill-row.passive { background: linear-gradient(90deg, rgba(40, 70, 52, 0.5), rgba(30, 26, 16, 0.42)); box-shadow: inset 0 0 0 1px rgba(105, 240, 174, 0.22); }
.tag.sk-pas { margin-left: 2px; vertical-align: 2px; color: #b9f6ca; border-color: rgba(105, 240, 174, 0.6); background: rgba(11, 58, 18, 0.6); }
.pas-now { color: #b9f6ca; }
.pas-need { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; font-size: 16px; color: #ffe7a0; }
.pas-need img { width: 24px; height: 24px; }
.pas-sum { margin: 0 0 6px; }
.pas-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pas-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 12px; font-size: 17px; color: #b9f6ca; background: rgba(11, 58, 18, 0.55); border: 1px solid rgba(105, 240, 174, 0.45); }
.pas-chip .sk-img { width: 24px; height: 24px; }
.pas-sum .hb-hint { justify-content: flex-start; margin-top: 6px; }
body.touch .sk-tabs .tab { min-height: 44px; }
/* nút trong hàng kỹ năng: cao 34px + vùng chạm mở rộng 5px mỗi phía = 44px; khe 10px để hai nút xếp chồng không chồng vùng chạm */
body.touch .skill-row .sk-act { gap: 10px; }
body.touch .skill-row .sk-act .btn { min-height: 34px; }
body.touch .skill-row .sk-act .btn::after { content: ''; position: absolute; inset: -5px -4px; }
.id-book .row { gap: 8px; align-items: center; }
.id-book .sk-icon.pas { width: 48px; height: 48px; flex: none; }
.id-book b { font-weight: normal; color: #b9f6ca; }

/* nhiệm vụ */
.quest-card { padding-left: 14px; }
.quest-card::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(#ffd27a, #e2553a); }
.quest-card.daily::before { background: linear-gradient(#9fdcff, #2b8fd6); }
.qc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.qc-top .qc-tag { margin-bottom: 0; }
.qc-go { flex: none; }
.qc-tag { display: inline-block; font-size: 15px; padding: 0 6px; margin-bottom: 2px; border-radius: 3px; background: #7a2a14; color: #ffe7a0; border: 1px solid var(--ink); }
.quest-card.daily .qc-tag { background: #134a7a; color: #d6f0ff; }
.qc-name { font-size: 23px; color: #ffd27a; text-shadow: var(--outline); }
.quest-card.daily .qc-name { color: #9fdcff; }
.tip { color: var(--muted); font-size: 18px; }
.tip b { color: var(--gold); font-weight: normal; }

/* danh sách: nhóm, bạn bè, gia tộc, xếp hạng */
.list { border-radius: 5px; border: 1px solid var(--ink); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.25); }
.list-row { display: flex; gap: 8px; align-items: center; padding: 4px 8px; flex-wrap: wrap; background: rgba(0, 0, 0, 0.18); border-bottom: 1px solid rgba(201, 154, 69, 0.18); }
.list-row:nth-child(even) { background: rgba(255, 220, 160, 0.05); }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: rgba(255, 200, 120, 0.1); }
.list-row.me { background: linear-gradient(90deg, rgba(255, 213, 79, 0.25), rgba(255, 213, 79, 0.06)); }
.list-row > span:nth-child(2), .lr-main { flex: 1; min-width: 0; }
.lr-main b { font-weight: normal; color: #fff3c4; }
.lr-badge {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 16px;
  background: radial-gradient(circle at 40% 35%, #a08060, #4a3020);
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c, #888) 70%, #fff), color-mix(in srgb, var(--c, #888) 60%, #000));
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); color: #fff; text-shadow: var(--outline);
}
.dot-on { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #555; border: 1px solid var(--ink); }
.dot-on.on { background: radial-gradient(circle at 35% 30%, #c8ffcf, #2fbf4a); box-shadow: 0 0 5px #4cff6a; }
.rank-tag { font-size: 15px; padding: 0 5px; margin-left: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 154, 69, 0.45); color: var(--muted); }
.rank-tag.r-leader { color: #ffd54f; border-color: #ffd54f; }
.rank-tag.r-elder { color: #81d4fa; border-color: #81d4fa; }
.rank-no {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  color: var(--muted); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 154, 69, 0.4);
}
.rank-no.n1, .rank-no.n2, .rank-no.n3 { color: #2a1206; border: 1px solid var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.rank-no.n1 { background: radial-gradient(circle at 35% 30%, #fff7c2, #f4b744 55%, #a06a1e); box-shadow: 0 0 8px rgba(255, 210, 80, 0.8); }
.rank-no.n2 { background: radial-gradient(circle at 35% 30%, #ffffff, #c0c8d0 55%, #707880); }
.rank-no.n3 { background: radial-gradient(circle at 35% 30%, #ffd0a8, #c8783c 55%, #7a4018); }
.clan-head { display: flex; gap: 10px; align-items: center; }
.clan-crest { width: 48px; height: 48px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: radial-gradient(#6a1b9a, #2a0a3a); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #e1bee7; }
.clan-crest .ico { width: 32px; height: 32px; }
.notice { color: #fff59d; white-space: pre-wrap; }

/* cửa hàng */
.shop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.shop-row {
  display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 5px; border: 1px solid var(--ink);
  background: linear-gradient(rgba(84, 56, 36, 0.42), rgba(44, 28, 18, 0.42)); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.28);
}
.sh-info { flex: 1; min-width: 0; }
.sh-name { color: #fff3c4; }
.price { display: flex; align-items: center; gap: 3px; }
.price b { font-weight: normal; }
.shop-row .in.short { width: 56px; }

/* cường hóa */
.upg-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.upg-box {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--ink); display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(rgba(84, 56, 36, 0.45), rgba(30, 18, 12, 0.5)); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.35);
}
.upg-plus { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 32px; color: #fff3c4; text-shadow: var(--outline); }
.upg-plus i { font-style: normal; color: var(--gold); font-size: 24px; }
.upg-plus .next { color: #ffeb3b; text-shadow: 0 0 8px rgba(255, 235, 59, 0.6), var(--outline); }
.rate { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.rate-bar > i { background: linear-gradient(#b9f6ca, #2fbf4a); }
.req { display: flex; align-items: center; gap: 4px; }
.req img { width: 24px; height: 24px; }
.upg-box.ok { animation: flashOk 0.7s; }
.upg-box.fail { animation: flashBad 0.7s; }
@keyframes flashOk { 0% { background: rgba(139, 226, 139, 0.65); box-shadow: 0 0 20px #8be28b; } }
@keyframes flashBad { 0% { background: rgba(255, 82, 82, 0.65); box-shadow: 0 0 20px #ff5252; } }

/* ----- Thợ Rèn: tab Cường hóa / Khảm ngọc / Ghép ngọc */
/* chiều cao tối thiểu để đổi tab không làm cửa sổ co giãn, nút tab đứng yên; nội dung dài vẫn mở rộng tới max-height của .win */
.win-upgrade { min-height: min(540px, 92vh); }
.sm-tabs .tab { padding: 3px 8px 2px; }
body.touch .sm-tabs .tab { min-height: 44px; }
body.touch .gem-act .btn.big, body.touch .merge-box .btn.big, body.touch .upg-box .btn.big { min-height: 44px; }
.empty-note.small { padding: 6px 4px; font-size: 17px; }
.empty-note.small > .ico { width: 24px; height: 24px; }
.gb-sub { margin-top: 10px; }
/* số cấp của ngọc, dấu "đang mặc", dãy lỗ khảm trên ô vật phẩm */
.slot .glv {
  position: absolute; left: 2px; top: -2px; z-index: 3; font-size: 15px; color: #fff3c4; text-shadow: var(--outline);
}
.slot .worn {
  position: absolute; right: 1px; top: 1px; z-index: 3; width: 13px; height: 13px; border-radius: 3px; font-size: 13px; line-height: 13px; text-align: center;
  color: #ffe7a0; background: var(--lac); box-shadow: 0 0 0 1px var(--ink); text-shadow: var(--outline);
}
.slot .gdots { position: absolute; right: 2px; bottom: 2px; z-index: 3; display: flex; gap: 1px; pointer-events: none; }
.slot .gdots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 0 1px var(--ink), inset -1px -1px 0 rgba(0, 0, 0, 0.35), inset 1px 1px 0 rgba(255, 255, 255, 0.55);
}
.slot .gdots i.e { background: #1a0d06; box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px #8a5f2a; }
/* ngọc đủ 3 viên để ghép: tam giác xanh góc trên phải */
.slot.can-merge::before {
  content: ''; position: absolute; right: 3px; top: 3px; z-index: 3; border: 5px solid transparent; border-top: none; border-bottom: 7px solid var(--good);
  filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));
}
/* chi tiết vật phẩm: danh sách ngọc khảm */
.id-gems { margin: 4px 0; padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); }
.idg-title { display: flex; justify-content: space-between; color: var(--gold); font-size: 18px; margin-bottom: 2px; }
.idg-row { display: flex; align-items: center; gap: 6px; min-height: 24px; font-size: 18px; }
.idg-row b { margin-left: auto; font-weight: normal; color: #b9f6ca; }
.idg-name { color: var(--gc); text-shadow: var(--outline); }
.idg-hole {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2a1b10, #0a0504 75%); box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px #8a5f2a;
}
.idg-hole.full { box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px var(--gc), 0 0 5px var(--gc); }
.idg-hole img { width: 18px; height: 18px; }
.id-gems.short { font-size: 18px; }
.id-gems.short .idg-title { display: inline; font-size: inherit; }
.id-gems.short b { font-weight: normal; color: #b9f6ca; }
.id-gem .stat b { color: #b9f6ca; }
.sell-gem { flex-basis: 100%; }
/* bàn khảm: món đồ ở giữa, lỗ tròn xếp phía dưới */
.gem-panel { display: flex; flex-direction: column; gap: 6px; }
.gem-board {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px 8px; border-radius: 8px; border: 1px solid var(--ink);
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 190, 110, 0.22), transparent 60%), linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.4), inset 0 0 18px rgba(0, 0, 0, 0.5);
}
.gb-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gb-name { font-size: 22px; text-shadow: var(--outline); }
.gb-holes { display: flex; justify-content: center; gap: 14px; }
.gh-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; }
.gh-cap { font-size: 15px; line-height: 15px; text-align: center; text-shadow: var(--outline); min-height: 15px; }
.gh-cap .nw { white-space: nowrap; }
.gem-hole {
  position: relative; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: none; flex: none; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #3a2416, #120804 72%);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #b07d33, 0 0 0 5px var(--ink), inset 0 3px 8px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 210, 150, 0.15);
}
.gem-hole img { width: 36px; height: 36px; position: relative; z-index: 1; pointer-events: none; }
.gem-hole .glv { position: absolute; right: -4px; bottom: -6px; z-index: 2; font-size: 16px; color: #fff3c4; text-shadow: var(--outline); }
.gem-hole.full {
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gc) 45%, transparent), #120804 74%);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #e8b452, 0 0 0 5px var(--ink), 0 0 10px var(--gc), inset 0 0 10px color-mix(in srgb, var(--gc) 60%, transparent);
}
.gem-hole.empty { cursor: pointer; }
.gem-hole .gh-plus { position: relative; width: 14px; height: 14px; opacity: 0.4; }
.gem-hole .gh-plus::before, .gem-hole .gh-plus::after { content: ''; position: absolute; background: #c99a45; box-shadow: 0 0 0 1px var(--ink); }
.gem-hole .gh-plus::before { left: 6px; top: 0; width: 2px; height: 14px; }
.gem-hole .gh-plus::after { left: 0; top: 6px; width: 14px; height: 2px; }
.gem-hole.ready { animation: holeReady 1.1s ease-in-out infinite; }
.gem-hole.ready .gh-plus { opacity: 0.9; }
.gem-hole.over { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff176, 0 0 0 5px var(--ink), 0 0 14px #fff176, inset 0 3px 8px rgba(0, 0, 0, 0.8); }
.gem-hole.sel { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff176, 0 0 0 5px var(--ink), 0 0 14px #fff176, inset 0 0 10px color-mix(in srgb, var(--gc) 60%, transparent); }
.gem-hole.pop { animation: holePop 0.6s ease-out; }
@keyframes holeReady { 50% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #f0c869, 0 0 0 5px var(--ink), 0 0 12px rgba(240, 200, 105, 0.9), inset 0 3px 8px rgba(0, 0, 0, 0.8); } }
@keyframes holePop { 0% { transform: scale(1.35); filter: brightness(2.2); } 60% { transform: scale(0.94); } }
.gem-sum { font-size: 18px; text-align: center; color: var(--muted); }
.gem-sum b { font-weight: normal; color: #b9f6ca; }
.gem-act {
  display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--ink);
  background: linear-gradient(rgba(84, 56, 36, 0.45), rgba(30, 18, 12, 0.5)); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.35);
}
.gem-act b { font-weight: normal; text-shadow: var(--outline); }
.gem-act.muted { text-align: center; }
/* ghép ngọc: 3 viên → 1 viên */
.merge-box {
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--ink); display: flex; flex-direction: column; gap: 5px;
  background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--gc) 18%, transparent), transparent 65%), linear-gradient(rgba(84, 56, 36, 0.45), rgba(30, 18, 12, 0.5));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.35);
}
.merge-box.ok { animation: flashOk 0.7s; }
.merge-box.fail { animation: flashBad 0.7s; }
.merge-row { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 0 2px; }
.merge-in { display: flex; gap: 10px; }
.gem-hole.small { width: 40px; height: 40px; }
.gem-hole.small img { width: 28px; height: 28px; }
.gem-hole.miss { filter: grayscale(1) brightness(0.55); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #6d4815, 0 0 0 5px var(--ink), inset 0 3px 8px rgba(0, 0, 0, 0.8); }
.gem-hole.out { width: 58px; height: 58px; }
.gem-hole.out img { width: 42px; height: 42px; }
.merge-arrow { font-style: normal; font-size: 28px; color: var(--gold); text-shadow: var(--outline); }
.merge-names { text-align: center; text-shadow: var(--outline); }
.merge-names b { font-weight: normal; }
.merge-reqs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.merge-stat { text-align: center; font-size: 18px; color: var(--muted); }
.merge-stat b { font-weight: normal; color: #b9f6ca; }
@media (max-height: 520px) {
  .win-upgrade { height: 96vh; }
  /* điện thoại: món đồ bên trái, lỗ khảm bên phải; bỏ dòng tổng (đã ghi dưới mỗi lỗ) và ghi chú chân cửa sổ để nút thao tác không bị khuất */
  .gem-board { flex-direction: row; justify-content: center; padding: 6px 6px 4px; gap: 10px; }
  .gb-item { width: 96px; flex: none; text-align: center; }
  .gb-holes { gap: 4px; }
  .gem-sum, .win-foot:has(.sm-note) { display: none; }
  .merge-row { padding: 2px 0 0; gap: 8px; }
  .merge-box { gap: 3px; padding: 6px 8px; }
  .gem-hole { width: 46px; height: 46px; }
  .gem-hole img { width: 32px; height: 32px; }
  .gh-wrap { width: 76px; }
  .gb-name { font-size: 20px; }
  .gb-item .slot.big { width: 50px; height: 50px; }
  .gb-item .slot.big img { width: 40px; height: 40px; }
}

/* cài đặt */
.set-wrap .sec { margin: 0 0 8px; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; cursor: pointer; }
input.switch {
  appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 24px; margin: 0; flex: none; cursor: pointer; border-radius: 12px;
  background: linear-gradient(#1a0d06, #3a2414); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #8a5f2a, inset 0 2px 4px rgba(0, 0, 0, 0.6);
  transition: background 0.15s;
}
input.switch::before {
  content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; transition: left 0.15s;
  background: radial-gradient(circle at 35% 30%, #fff1bf, #d9a243 60%, #7a4a12); border: 1px solid var(--ink);
}
input.switch:checked { background: linear-gradient(#2f8f43, #5cc96c); }
input.switch:checked::before { left: 22px; }
input.switch:disabled { opacity: 0.45; cursor: default; }
.set-seg { display: flex; gap: 4px; flex: none; }
.set-seg .btn { min-width: 52px; }
body.touch .set-seg .btn { min-height: 44px; min-width: 64px; }
/* label bọc công tắc nên cả hàng là vùng chạm, đủ 44px trên điện thoại */
body.touch label.set-row { min-height: 44px; margin: 0; }
.help .key-row { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; font-size: 18px; }
kbd {
  flex: none; min-width: 74px; text-align: center; font-family: inherit; font-size: 16px; padding: 0 5px; border-radius: 4px; color: #ffe7a0;
  background: linear-gradient(#5a3a22, #2a1a10); border: 1px solid var(--ink); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.3), 0 2px 0 var(--ink);
}

/* giao dịch, thủ kho */
.trade-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-col {
  padding: 6px 8px; border-radius: 6px; border: 1px solid var(--ink); background: linear-gradient(rgba(84, 56, 36, 0.42), rgba(44, 28, 18, 0.42));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.3);
}
.trade-col.locked { box-shadow: inset 0 0 0 1px #ffd54f, 0 0 8px rgba(255, 213, 79, 0.35); }
.trade-items { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; min-height: 48px; }
.trade-inv { grid-column: span 2; }
.store-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.store-wrap .sec { margin: 0; }

/* điểm danh */
.gift-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.gift-day {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 120px; padding: 0 3px 6px; overflow: hidden; text-align: center;
  border-radius: 6px; border: 1px solid var(--ink); background: linear-gradient(rgba(96, 62, 38, 0.5), rgba(40, 24, 14, 0.55));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.35);
}
.gd-head { align-self: stretch; margin: 0 -3px 4px; padding: 1px 0; font-size: 17px; color: #ffe7a0; background: linear-gradient(#8e2a14, #5a140a); border-bottom: 1px solid var(--ink); text-shadow: var(--outline); }
.gd-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(rgba(255, 210, 120, 0.35), transparent 70%); }
.gd-icon img { width: 36px; height: 36px; }
.gd-icon img.ui { width: 32px; height: 32px; }
.gift-day .tiny { font-size: 15px; line-height: 15px; }
.gift-day.big { background: linear-gradient(rgba(140, 90, 30, 0.6), rgba(60, 30, 10, 0.6)); box-shadow: inset 0 0 0 1px #f0c869; }
.gift-day.big .gd-head { background: linear-gradient(#f4b744, #b0661a); color: #3a1804; text-shadow: none; }
.gift-day.cur { box-shadow: inset 0 0 0 2px #fff176, 0 0 10px rgba(255, 241, 118, 0.7); animation: curDay 1.4s ease-in-out infinite; }
@keyframes curDay { 50% { box-shadow: inset 0 0 0 2px #fff176, 0 0 18px rgba(255, 241, 118, 0.95); } }
.gift-day.got > :not(.stamp) { opacity: 0.45; }
.stamp {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-18deg); padding: 0 6px; font-size: 18px; letter-spacing: 1px; white-space: nowrap;
  color: #ff5a3c; border: 2px solid #ff5a3c; border-radius: 4px; background: rgba(40, 6, 2, 0.55); text-shadow: 0 0 2px #000;
}

/* vòng quay */
.wheel-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.wheel-box { position: relative; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.wheel { display: block; width: 260px; height: 260px; image-rendering: auto; }
.wheel-pin {
  position: absolute; left: 50%; top: -8px; transform: translateX(-50%); width: 28px; height: 36px; z-index: 1;
  background: linear-gradient(90deg, #ff8a6a, #c62d1a 50%, #7a140a); clip-path: polygon(0 0, 100% 0, 100% 38%, 50% 100%, 0 38%);
  filter: drop-shadow(0 0 0 #120804);
}
.wheel-pin::after { content: ''; position: absolute; left: 9px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c6, #e2ae4f); }
.wheel-side { display: flex; flex-direction: column; gap: 8px; min-width: 210px; }
.wheel-result { color: var(--good); font-size: 22px; min-height: 26px; text-shadow: var(--outline); }

.inspect-cols { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.inspect-cols .sec { margin: 0; }

/* ================= HỘI THOẠI NPC, LỜI MỜI, MENU ================= */
#dialogs { position: fixed; z-index: 45; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(660px, 96vw); }
.dialog {
  position: relative; display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr auto; column-gap: 12px; padding: 2px 4px 2px 2px;
  border: 16px solid transparent; border-image: var(--frame-win) 16 / 16px stretch; background: var(--leather);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); animation: dlgIn 0.18s ease-out;
}
@keyframes dlgIn { from { transform: translateY(16px); opacity: 0; } }
.dlg-por {
  grid-row: 1 / span 3; align-self: start; width: 96px; height: 96px; padding: 5px; border-radius: 8px; margin-top: -2px;
  background: linear-gradient(#e8b452, #7a4a12); border: 1px solid var(--ink); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}
.dlg-por canvas {
  display: block; width: 84px; height: 84px; border-radius: 5px; border: 1px solid var(--ink);
  background: radial-gradient(ellipse at 50% 35%, #fff2d0, #e6c79a 45%, #9a6a3a);
}
.dlg-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dlg-name {
  height: 24px; border-style: solid; border-width: 0 14px; border-color: transparent; border-image: var(--ribbon-gold) 0 14 fill / 0 14px stretch;
  padding: 0 6px; font-size: 22px; line-height: 23px; color: #ffe7a0; white-space: nowrap; text-shadow: var(--outline);
}
.dlg-title { color: #9fdcff; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg-head .x { margin-left: auto; width: 28px; height: 28px; }
.dlg-text {
  white-space: pre-wrap; margin: 6px 0 8px; padding: 6px 10px; font-size: 20px; line-height: 1.12; border-radius: 4px; color: #3a2010;
  background: var(--grain), linear-gradient(#f6e6c4, #e8d1a4); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #fff4dc, inset 0 0 12px rgba(120, 80, 30, 0.35);
  max-height: 40vh; overflow-y: auto;
}
.dlg-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dlg-opts .in { width: 180px; }
#invites { position: fixed; z-index: 60; left: 50%; top: 92px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; }
.invite {
  position: relative; display: flex; gap: 10px; align-items: center; min-width: 320px; padding: 8px 12px 10px; overflow: hidden;
  border: 8px solid transparent; border-image: var(--frame-hud) 8 / 8px stretch; background: var(--grain), linear-gradient(rgba(30, 44, 64, 0.97), rgba(14, 20, 32, 0.97));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); animation: dlgIn 0.2s ease-out;
}
.invite.k-duel { background: var(--grain), linear-gradient(rgba(76, 14, 8, 0.97), rgba(30, 6, 4, 0.97)); }
.inv-icon { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(#3a5a80, #142030); border: 2px solid #e2ae4f; box-shadow: 0 0 0 1px var(--ink); }
.inv-icon .ico { width: 32px; height: 32px; }
.inv-title { color: var(--gold); font-size: 22px; text-shadow: var(--outline); }
.inv-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #f0c869, #e2553a); transform-origin: left; animation: invTime 30s linear forwards; }
@keyframes invTime { to { transform: scaleX(0); } }

/* thông báo dạng băng rôn */
#toasts { position: fixed; z-index: 55; left: 50%; top: 104px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; width: max-content; max-width: 92vw; }
.toast {
  position: relative; max-width: 92vw; padding: 3px 34px 4px; text-align: center; color: #fff6e0; text-shadow: var(--outline);
  background: linear-gradient(90deg, rgba(20, 10, 6, 0), rgba(20, 10, 6, 0.86) 14%, rgba(20, 10, 6, 0.86) 86%, rgba(20, 10, 6, 0));
  transition: opacity 0.5s, transform 0.5s; animation: toastIn 0.25s ease-out;
}
.toast::before, .toast::after {
  content: ''; position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #e2ae4f 20%, #e2ae4f 80%, transparent);
}
.toast::before { top: 0; }
.toast::after { bottom: 0; }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes toastIn { from { opacity: 0; transform: scale(0.9); } }
/* màn hình cao: băng rôn nằm ngang khung nhiệm vụ bên phải nên chừa đúng bề rộng cột phải (8 + 206 + lề) */
@media (min-height: 681px) and (min-width: 900px) {
  #toasts, .toast { max-width: calc(100vw - 452px); }
}
.toast.k-warn { color: #ffcc80; }
.toast.k-reward { color: #b9f6ca; }
.toast.k-quest { color: #9fdcff; }
.toast.k-auto { color: #b9f6ca; }
.toast.k-level {
  font-size: 30px; color: #fff3c4; padding: 4px 48px 6px; text-shadow: 0 0 10px rgba(255, 200, 60, 0.9), var(--outline);
  background: linear-gradient(90deg, rgba(120, 60, 0, 0), rgba(150, 80, 10, 0.92) 16%, rgba(150, 80, 10, 0.92) 84%, rgba(120, 60, 0, 0)); animation: lvIn 0.5s ease-out;
}
@keyframes lvIn { 0% { transform: scale(1.6); opacity: 0; } 60% { transform: scale(0.95); opacity: 1; } }
.toast.k-boss, .toast.k-world {
  font-size: 23px; color: #ffe0d0; background: linear-gradient(90deg, rgba(90, 8, 4, 0), rgba(130, 14, 6, 0.92) 14%, rgba(130, 14, 6, 0.92) 86%, rgba(90, 8, 4, 0));
}
.toast.k-boss::before, .toast.k-boss::after, .toast.k-world::before, .toast.k-world::after { background: linear-gradient(90deg, transparent, #ffd36a 20%, #ffd36a 80%, transparent); height: 2px; }
.toast.k-map {
  font-size: 40px; line-height: 1; color: #fff3c4; padding: 6px 60px 8px; letter-spacing: 2px;
  text-shadow: 0 3px 0 #4a0c06, 2px 0 0 #4a0c06, -2px 0 0 #4a0c06, 0 -2px 0 #4a0c06, 0 0 14px rgba(0, 0, 0, 0.6);
  background: linear-gradient(90deg, rgba(20, 10, 6, 0), rgba(20, 10, 6, 0.6) 20%, rgba(20, 10, 6, 0.6) 80%, rgba(20, 10, 6, 0));
  animation: mapIn 0.6s ease-out;
}
.toast.k-map::before, .toast.k-map::after { height: 2px; left: 4%; right: 4%; background: linear-gradient(90deg, transparent, #f0c869 25%, #f0c869 75%, transparent); }
@keyframes mapIn { from { opacity: 0; letter-spacing: 12px; } }

/* menu người chơi */
.pmenu {
  position: fixed; z-index: 70; display: flex; flex-direction: column; min-width: 196px; padding: 0 0 2px; overflow: hidden;
  border: 8px solid transparent; border-image: var(--frame-hud) 8 / 8px stretch; background: var(--grain), linear-gradient(rgba(48, 30, 20, 0.98), rgba(26, 16, 10, 0.98));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6); animation: winIn 0.1s ease-out;
}
.pmenu button { display: flex; align-items: center; gap: 8px; background: transparent; border: none; border-bottom: 1px solid rgba(201, 154, 69, 0.2); text-align: left; padding: 3px 8px; }
.pmenu button:last-child { border-bottom: none; color: var(--muted); }
.pmenu button:hover { background: linear-gradient(90deg, rgba(226, 85, 58, 0.45), rgba(226, 85, 58, 0)); color: #fff3c4; }
.pm-head { padding: 2px 8px 4px; margin-bottom: 2px; color: var(--muted); border-bottom: 1px solid #c99a45; white-space: nowrap; text-shadow: var(--outline); }
.pm-head b { font-weight: normal; color: #fff3c4; font-size: 21px; }

/* trọng thương */
.death {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(40, 0, 0, 0.25), rgba(60, 0, 0, 0.75) 70%, rgba(20, 0, 0, 0.9)); animation: deathIn 0.6s ease-out;
}
@keyframes deathIn { from { opacity: 0; } }
.death-box {
  min-width: min(400px, 92vw); padding: 10px 22px 14px; text-align: center;
  border: 16px solid transparent; border-image: var(--frame-win) 16 / 16px stretch; background: var(--grain), linear-gradient(#3a0c08, #1a0504);
  box-shadow: 0 0 40px rgba(255, 30, 20, 0.35), 0 10px 30px rgba(0, 0, 0, 0.7);
}
.death-title {
  font-size: 48px; line-height: 1; letter-spacing: 3px; color: #ff6a50; margin-bottom: 6px;
  text-shadow: 0 3px 0 #3a0402, 2px 0 0 #3a0402, -2px 0 0 #3a0402, 0 -2px 0 #3a0402, 0 0 18px rgba(255, 40, 20, 0.8);
}
.death-sub { font-size: 21px; color: #ffe0d0; }
.death-btns { justify-content: center; margin-top: 12px; gap: 10px; }
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
#rotate-hint { display: none; }

/* ================= CẢM ỨNG ================= */
body.touch .mbtn::after { display: none; }
body.touch .sbtn small { display: none; }
body.touch .sbtn.act { display: none; }
body.touch #hud-dpad { display: block; position: absolute; left: 0; bottom: 0; width: 236px; height: 196px; pointer-events: none; }
body.touch .dp {
  position: absolute; width: 64px; height: 64px; border-radius: 50%; padding: 0; pointer-events: auto; touch-action: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at 50% 38%, rgba(90, 50, 30, 0.75), rgba(20, 10, 6, 0.65) 75%);
  border: 2px solid rgba(18, 8, 4, 0.85); box-shadow: inset 0 0 0 2px rgba(226, 174, 79, 0.75), 0 3px 6px rgba(0, 0, 0, 0.45);
}
body.touch .dp img { width: 32px; height: 32px; pointer-events: none; }
body.touch .dp.arrow::before {
  content: ''; width: 0; height: 0; border: 13px solid transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6));
}
body.touch .dp[data-act='left']::before { border-right: 18px solid #ffe7a0; border-left: none; margin-left: -4px; }
body.touch .dp[data-act='right']::before { border-left: 18px solid #ffe7a0; border-right: none; margin-left: 4px; }
body.touch .dp[data-act='jump']::before { border-bottom: 18px solid #ffe7a0; border-top: none; margin-top: -4px; }
body.touch .dp[data-act='down']::before { border-top: 13px solid #ffe7a0; border-bottom: none; border-width: 9px; border-top-width: 13px; margin-top: 3px; }
body.touch .dp.down { background: radial-gradient(circle at 50% 38%, rgba(240, 200, 105, 0.8), rgba(150, 90, 30, 0.7) 75%); transform: scale(0.94); }
body.touch .dp[data-act='left'] { left: 12px; bottom: 34px; }
body.touch .dp[data-act='right'] { left: 124px; bottom: 34px; }
body.touch .dp[data-act='down'] { left: 78px; bottom: 2px; width: 46px; height: 46px; }
body.touch .dp[data-act='jump'] { left: 68px; bottom: 92px; }
body.touch .dp.small { width: 46px; height: 46px; }
body.touch .dp[data-act='talk'] { left: 14px; bottom: 120px; }
body.touch .dp[data-act='pick'] { left: 140px; bottom: 120px; }
body.touch .dp[data-act='target'] { left: 186px; bottom: 76px; }
body.touch #hud-chat { left: 50%; transform: translateX(-50%); bottom: auto; top: 8px; width: auto; max-width: 48vw; }
body.touch #hud-chat:not(.collapsed) { width: 48vw; top: 86px; z-index: 3; background: linear-gradient(rgba(12, 7, 4, 0.78), rgba(12, 7, 4, 0.86)); }
body.touch #hud-chat.collapsed { top: 6px; left: auto; right: 486px; transform: none; padding: 0; }
body.touch #hud-target { top: 86px; }
/* cảm ứng màn cao (máy tính bảng): khối tìm đường cùng hàng khung mục tiêu, dưới nút chat; có mục tiêu thì xuống dưới */
body.touch #hud-travel { top: 86px; }
body.touch.tg-on #hud-travel { top: 142px; }
body.touch.tg-boss #hud-travel { top: 160px; }
body.touch:not(.win-open) #toasts { top: 132px; }
body.touch.travel-on:not(.win-open) #toasts { top: 134px; }
body.touch.travel-on.tg-on:not(.win-open) #toasts { top: 190px; }
body.touch.travel-on.tg-boss:not(.win-open) #toasts { top: 208px; }
/* nút AUTO nằm trong cụm kỹ năng trên điện thoại */
#hud-skills .mbtn.auto {
  position: absolute; right: calc(var(--cx) + var(--R) + 14px); bottom: 104px; width: 54px; height: 54px; border-radius: 50%;
  flex-direction: column; gap: 0; border-width: 2px;
}
#hud-skills .mbtn.auto img { width: 32px; height: 32px; margin-top: 2px; }
#hud-skills .mbtn.auto > span { display: block; font-size: 15px; line-height: 11px; }
body.touch #dialogs { bottom: 6px; }
body.touch #hud-event { bottom: 6px; max-width: 300px; min-height: 44px; }
/* điện thoại: viên nằm giữa khoảng trống từ mép phải D-pad (236px) tới bình thuốc của cụm kỹ năng, không đè nút nào */
body.touch #hud-arena {
  bottom: 6px; left: 240px; right: 310px; margin: 0 auto; transform: none; min-width: 0; max-width: calc(100vw - 550px); min-height: 44px;
}
body.touch.ev-on #hud-arena { bottom: 56px; }
body.touch .ar-btn, body.touch .ar-join, body.touch .arr-foot .btn { min-height: 44px; }
body.touch .ar-oinfo { display: none; }
body.touch #arena-cd { font-size: 80px; top: 32%; }
/* "ĐẤU!" (1 giây) hiện cùng lúc khung mục tiêu tự chọn đối thủ: điện thoại tạm ẩn khung mục tiêu cho khỏi bị chữ đè */
body.touch.ar-go #hud-target { visibility: hidden; }
body.touch .ev-sfx { display: none; }
/* khung mục tiêu hẹp: lúc cuồng nộ nhãn CUỒNG NỘ thay chỗ nhãn BOSS và tên hệ (đã có huy hiệu đầu lâu) để không cắt tên boss */
body.touch #hud-target.rage #tg-el, body.touch #hud-target.rage .tg-head::before { display: none; }
/* cảm ứng: một nút tròn 44px, chạm để sang bộ kế tiếp */
body.touch .hb-sets { right: 186px; bottom: 180px; padding: 0; gap: 0; border: none; background: none; box-shadow: none; }
body.touch .hbs-lab, body.touch .hbs:not(.on) { display: none; }
body.touch .hbs.on {
  width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; line-height: 16px;
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #fff8da, 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 8px rgba(240, 200, 105, 0.6);
}
body.touch .hbs.on::before { content: 'Bộ'; font-size: 13px; line-height: 12px; }
body.touch .tv-x { min-height: 34px; }
body.touch .tv-x::after { content: ''; position: absolute; inset: -6px -4px; }
body.touch .qt-go { width: 28px; height: 26px; border-radius: 13px; }
/* vùng chạm 44px cho nút nhỏ mà không làm phình bố cục */
body.touch .qc-go::after, body.touch .hb-status .btn::after { content: ''; position: absolute; inset: -10px -4px; }

/* màn hình thấp: menu thành 2 hàng phía trên, cạnh bản đồ nhỏ */
@media (max-height: 680px) {
  #hud-menu { bottom: auto; top: 4px; right: 222px; grid-template-columns: repeat(7, 38px); gap: 4px; }
  .mbtn { width: 38px; height: 36px; border-radius: 7px; }
  .mbtn img { width: 32px; height: 32px; }
  .mbtn small { display: none; }
  .mbtn.wide { grid-column: span 1; width: 38px; }
  .mbtn.wide > span { display: none; }
  .mbtn.pk img { width: 16px; height: 16px; }
  .mbtn.pk > span { font-size: 14px; }
  .mbtn::after { right: 50%; top: calc(100% + 6px); transform: translateX(50%); }
  #hud-target { top: 86px; }
  #toasts { top: 132px; }
  #invites { top: 86px; }
  #hud-travel { top: 86px; }
  body.tg-on #hud-travel { top: 142px; }
  body.tg-boss #hud-travel { top: 160px; }
  body.travel-on:not(.win-open) #toasts { top: 134px; }
  body.travel-on.tg-on:not(.win-open) #toasts { top: 190px; }
  body.travel-on.tg-boss:not(.win-open) #toasts { top: 208px; }
}
@media (max-height: 520px) {
  html, body { font-size: 18px; }
  #hud-status { left: 6px; top: 4px; transform: scale(0.84); transform-origin: 0 0; }
  #hud-buffs { left: 6px; top: 96px; }
  #hud-buffs .buff { width: 28px; height: 28px; }
  #hud-buffs .buff img { width: 16px; height: 16px; }
  #hud-party { left: 6px; top: 136px; width: 150px; gap: 3px; }
  .pm { padding: 1px 6px 2px; font-size: 15px; }
  .pmm { display: none; }
  #hud-map { right: 6px; top: 4px; width: 176px; }
  .mm-head { height: 20px; }
  #minimap { width: 160px; height: 38px; }
  #map-info { font-size: 14px; line-height: 14px; }
  #hud-quest { right: 6px; top: 92px; width: 176px; font-size: 15px; padding: 1px 6px 3px; }
  .qt .qs { font-size: 14px; line-height: 14px; }
  .qt-head { display: none; }
  .qt .pbar { height: 8px; margin: 1px 0 0; }
  .qt .pbar > span { display: none; }
  #hud-menu { right: 188px; }
  #hud #hud-skills { right: 4px; bottom: 4px; --cx: 54px; --cy: 54px; --A: 84px; --R: 126px; --s: 48px; --ps: 42px; }
  .sbtn[data-act='s1'] { right: 152px; bottom: 0; }
  .sbtn[data-act='s2'] { right: 154px; bottom: 48px; }
  .sbtn[data-act='s3'] { right: 138px; bottom: 94px; }
  .sbtn[data-act='s4'] { right: 105px; bottom: 131px; }
  .sbtn[data-act='s5'] { right: 61px; bottom: 152px; }
  .sbtn[data-act='s6'] { right: 12px; bottom: 155px; }
  .sbtn .sk-img { width: 32px; height: 32px; }
  .sbtn .cdt { font-size: 22px; }
  .sbtn.pot.hp { right: calc(var(--cx) + var(--R) + 40px); bottom: 6px; }
  .sbtn.pot.mp { right: calc(var(--cx) + var(--R) + 40px); bottom: 54px; }
  .hb-sets { right: 168px; bottom: 176px; }
  body.touch .hb-sets { right: 166px; bottom: 166px; }
  #hud-travel { max-width: min(380px, 44vw); }
  .hb-box { top: -4px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; padding-top: 4px; }
  .hb-head { order: 2; margin: 0; border: none; }
  .hb-head .sec-title { display: none; }
  .hb-tabs .tab { top: 0; min-width: 56px; border-radius: 7px; border-bottom: 1px solid var(--ink); padding: 3px 8px; }
  .hb-row { order: 1; gap: 8px; padding: 4px 0 2px; }
  .hb-status, .hb-hint { order: 3; flex-basis: 100%; }
  .hb-slot { width: 52px; height: 52px; }
  .hb-slot .sk-img, .hb-basic .sk-img { width: 32px; height: 32px; }
  .hb-basic { width: 52px; height: 52px; }
  .hb-sep { height: 36px; }
  .hb-status { font-size: 16px; min-height: 22px; }
  .hb-hint { font-size: 15px; }
  .win { max-height: 96vh; border-width: 12px; border-image-width: 12px; }
  .win-head { margin-top: -22px; }
  .win-body { padding: 4px 6px 6px; }
  .win-title { font-size: 23px; }
  #chat-log { height: 96px; }
  #hud-target.boss { width: 360px; }
  .toast.k-map { font-size: 32px; }
  .doll { grid-template-rows: repeat(4, 58px); }
  .gift-day { min-height: 104px; }
  .dialog { grid-template-columns: 72px 1fr; border-width: 12px; border-image-width: 12px; }
  .dlg-por { width: 72px; height: 72px; padding: 4px; }
  .dlg-por canvas { width: 62px; height: 62px; }
  .dlg-text { max-height: 30vh; font-size: 18px; margin: 4px 0 6px; padding: 4px 8px; }
  .logo-top { font-size: 52px; }
  .logo-bot { font-size: 42px; }
}
@media (max-width: 720px) {
  .inv-wrap, .upg-wrap, .trade-wrap, .store-wrap, .char-cols, .inspect-cols, .shop-list { grid-template-columns: 1fr; }
  .gift-grid { grid-template-columns: repeat(4, 1fr); }
  .trade-inv { grid-column: span 1; }
  .class-list { grid-template-columns: repeat(3, 1fr); }
  #hud-chat { width: 300px; }
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-hint.ingame { display: flex; }
}

/* Khi có cửa sổ mở: thông báo chuyển xuống đáy giữa để không đè tiêu đề và nội dung cửa sổ */
body.win-open #toasts { top: auto; bottom: 14px; flex-direction: column-reverse; }
/* điện thoại, cửa sổ Thợ Rèn/Thư/Lễ hội/Thú cưng: nút thao tác nằm sát đáy nên thông báo kết quả hiện đè lên băng tiêu đề thay vì đáy */
body.touch.win-open:has(.win-upgrade) #toasts, body.touch.win-open:has(.win-mail) #toasts, body.touch.win-open:has(.win-event) #toasts,
body.touch.win-open:has(.win-pet) #toasts { top: 4px; bottom: auto; flex-direction: column; }
body.win-open .toast { max-width: min(520px, 92vw); }
body.win-open .toast.k-map { display: none; }
/* bảng kết quả Tà Thú đã có đủ nội dung thông báo kết liễu (vẫn còn trong khung chat): ẩn cho khỏi đè nút Đóng */
body.evr-open .toast.k-boss, body.evr-open .toast.k-world { display: none; }
/* Hội thoại NPC che phần phải khung chat trên màn hình vừa: ẩn chat tạm thời cho gọn */
@media (max-width: 1499px) {
  body.dlg-open:not(.touch) #hud-chat { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
}
/* Tooltip menu nằm dưới lớp cửa sổ (z 20 < 50) nên bị cắt: ẩn khi có cửa sổ mở */
body.win-open .mbtn::after { display: none; }
/* nhãn ô trang bị: không để ô hàng dưới đè mất phần chân chữ (g, y, Q) */
.eq-cell label { position: relative; z-index: 1; padding-bottom: 1px; }
@media (max-height: 520px) {
  .doll { grid-template-rows: repeat(4, 61px); }
}

/* ----- Kết quả sự kiện Tà Thú */
.win-evresult { width: min(620px, 94vw); }
.evr { display: flex; flex-direction: column; gap: 8px; }
.evr-head { display: flex; align-items: center; gap: 10px; }
.evr-ico {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #7a1636, #3a0616 60%, #1a0208); border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--ink), 0 0 10px rgba(255, 23, 68, 0.5);
}
.evr-ico .ico { width: 32px; height: 32px; vertical-align: 0; }
.evr-boss { font-size: 26px; line-height: 26px; color: #ff8a80; text-shadow: var(--outline); }
.evr-me {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.6);
}
.evr-me.none { color: var(--muted); justify-content: center; }
.evr-me.top1 { box-shadow: inset 0 0 0 1px #ffd23c, 0 0 10px rgba(255, 210, 60, 0.45); }
.evr-me.top2 { box-shadow: inset 0 0 0 1px #dfe6ec; }
.evr-me.top3 { box-shadow: inset 0 0 0 1px #e0915a; }
.evr-me-rank { flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--gold); text-shadow: var(--outline); }
.evr-me-rank small { font-size: 15px; color: var(--muted); }
.evr-me-rank b { font-weight: normal; font-size: 32px; }
.evr-me-info { min-width: 0; }
.evr-me-info b { font-weight: normal; color: #fff3c4; }
.evr-reward { color: var(--good); font-size: 18px; }
.evr-list { display: flex; flex-direction: column; gap: 3px; max-height: 46vh; overflow-y: auto; }
.evr-row {
  display: grid; grid-template-columns: 28px minmax(70px, 1fr) minmax(120px, 1.4fr) minmax(90px, 1.6fr); align-items: center; gap: 8px;
  padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); font-size: 17px;
}
.evr-row.mine { background: rgba(240, 200, 105, 0.16); box-shadow: inset 0 0 0 1px rgba(240, 200, 105, 0.6); }
.evr-rank {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px;
  color: var(--text); background: #2a1810; border: 1px solid var(--ink); text-shadow: var(--outline);
}
.evr-rank.r1 { background: radial-gradient(circle at 40% 30%, #fff3a0, #f2c230 55%, #9a6a12); color: #fff; }
.evr-rank.r2 { background: radial-gradient(circle at 40% 30%, #ffffff, #b8c4cc 55%, #5f6b73); color: #fff; }
.evr-rank.r3 { background: radial-gradient(circle at 40% 30%, #ffd2a8, #c97a3c 55%, #6d3a14); color: #fff; }
.evr-name { color: #fff3c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--outline); }
.evr-dmg { position: relative; height: 16px; border-radius: 3px; overflow: hidden; background: #0a0504; border: 1px solid #070302; }
.evr-dmg > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ff8a80, #c62828); }
.evr-dmg > span { position: relative; display: block; text-align: center; font-size: 15px; line-height: 14px; color: #fff; text-shadow: var(--outline); white-space: nowrap; }
.evr-rw { font-size: 15px; line-height: 15px; color: var(--good); }
.evr-tiers { line-height: 16px; }
@media (max-height: 520px) {
  .evr-list { max-height: 34vh; }
  .evr-boss { font-size: 22px; line-height: 22px; }
  .evr-row { font-size: 16px; }
}

/* ----- Thú cưng (cửa sổ 'pet', mở từ menu, phím K, cửa sổ Nhân Vật hoặc ô thú cưng) */
.win-pet { width: min(640px, 96vw); }
.pet-wrap { display: flex; flex-direction: column; gap: 6px; }
.pet-head { display: flex; gap: 14px; align-items: center; padding: 2px 6px 4px; }
.pet-stage {
  position: relative; flex: none; width: 132px; height: 112px; border-radius: 10px; border: 1px solid var(--ink);
  display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse at 50% 88%, rgba(240, 200, 105, 0.35), transparent 42%), radial-gradient(circle at 50% 40%, #3d2818, #150c07 78%);
  box-shadow: inset 0 0 0 1px #6b4a2a, inset 0 0 0 2px #120804, inset 0 0 14px rgba(0, 0, 0, 0.6), 0 2px 0 var(--ink);
}
.pet-stage canvas { width: 120px; height: 104px; image-rendering: pixelated; }
.pet-stage .lv-badge { right: -8px; bottom: -6px; }
.pet-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pet-info .big-name { font-size: 30px; }
.pbar.love > i { background: linear-gradient(90deg, #a8204e, #ff5c8a 60%, #ffb3c7); }
.pet-love-t { color: #ff9ab8 !important; }
.pet-cols { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8px; }
.pet-cols .sec { margin: 0; }
.pet-stats { grid-template-columns: 1fr; }
.pet-stats .kv b em { font-style: normal; color: var(--good); }
.pet-skill { padding: 3px 0 4px; border-bottom: 1px dotted rgba(201, 154, 69, 0.25); }
.pet-skill:last-child { border-bottom: none; }
.pet-skill b { color: #ffe7c0; font-weight: normal; }
.pet-skill .tag { margin: 0; }
.pet-skill.off .tiny:not(.muted) { color: var(--muted); }
.pet-foods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pet-food {
  display: grid; grid-template-columns: 46px 1fr; gap: 4px 6px; align-items: center; padding: 4px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.25);
}
.pet-food .pf-txt { min-width: 0; }
.pet-food .pf-name { color: #ffe7c0; line-height: 18px; }
.pet-food .tiny { font-size: 15px; line-height: 15px; }
.pet-food .btn { grid-column: 1 / span 2; }
.pet-foot { width: 100%; gap: 10px; margin: 0; }
.pet-empty { display: flex; flex-direction: column; gap: 8px; padding: 6px; }
.pet-none { display: flex; align-items: center; gap: 8px; font-size: 22px; color: #ffe7c0; }
.pet-none .ico { width: 32px; height: 32px; }
.pet-bag { display: flex; flex-direction: column; gap: 4px; }
.pet-bag-row { display: flex; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.2); }
.char-foot { width: 100%; margin: 0; }
.char-foot .ico { width: 16px; height: 16px; vertical-align: -3px; }
body.touch .char-foot .btn { min-height: 44px; }
@media (max-width: 720px) {
  .pet-foods { grid-template-columns: 1fr; }
}
@media (max-height: 520px) {
  .pet-info .big-name { font-size: 26px; line-height: 26px; }
  body.touch .pet-food .btn, body.touch .pet-bag-row .btn, body.touch .pet-foot .btn { min-height: 44px; }
  .pet-foot .tiny { display: none; }
}
@media (max-height: 680px) {
  /* màn hình thấp (máy tính): menu nằm trên, 8 cột để 15 nút vừa 2 hàng, không đè khung mục tiêu */
  body:not(.touch) #hud-menu { grid-template-columns: repeat(8, 38px); }
  #hud-menu .mbtn.auto { width: 38px; }
  #hud-menu .mbtn.auto img { width: 32px; height: 32px; margin-top: 0; }
  #hud-menu .mbtn.auto > span { display: none; }
}

/* ================= HỘP THƯ · MÃ QUÀ TẶNG · LỄ HỘI ================= */
/* menu 16 nút: màn cao 4 cột x 4 hàng (không chạm khối nhiệm vụ); màn thấp cảm ứng 8 cột x 2 hàng */
#hud-menu { grid-template-columns: repeat(4, 46px); }
/* cao 681-739px: 4 hàng sẽ chạm đáy khối nhiệm vụ (2 nhiệm vụ có thanh tiến độ + biểu ngữ lễ hội tới y≈292), dùng 6 cột x 3 hàng */
@media (min-height: 681px) and (max-height: 739px) {
  #hud-menu { grid-template-columns: repeat(6, 46px); }
}
@media (max-height: 680px) {
  body.touch #hud-menu { grid-template-columns: repeat(8, 36px); gap: 3px; }
  body.touch #hud-menu .mbtn { width: 36px; }
  /* nút chat thu gọn nằm sát bên trái menu */
  body.touch #hud-chat.collapsed { right: 537px; }
}
@media (max-height: 520px) {
  body.touch #hud-chat.collapsed { right: 503px; }
}

/* biểu ngữ sự kiện trong khối nhiệm vụ */
.qt-season {
  display: flex; align-items: center; gap: 5px; margin: 4px -4px 0; padding: 2px 5px 2px 3px; cursor: pointer; border-radius: 5px;
  background: linear-gradient(90deg, rgba(150, 24, 18, 0.88), rgba(96, 12, 10, 0.9)); border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 1px #e8b452, 0 0 8px rgba(255, 120, 60, 0.35);
}
.qt-season:hover { filter: brightness(1.18); }
.qts-ico { width: 32px; height: 32px; flex: none; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(255, 200, 90, 0.75)); animation: qtsSway 2.6s ease-in-out infinite; }
@keyframes qtsSway { 50% { transform: rotate(-6deg); } }
.qts-main { min-width: 0; flex: 1; }
.qts-main b { display: block; font-weight: normal; color: #ffe28a; font-size: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qts-sub { display: flex; align-items: center; gap: 3px; font-size: 15px; line-height: 16px; color: #ffe7cf; white-space: nowrap; }
.qts-sub img { width: 16px; height: 16px; image-rendering: pixelated; }
.qts-sub i { font-style: normal; color: #f4c7a8; overflow: hidden; text-overflow: ellipsis; }
/* điện thoại: biểu ngữ một dòng để khối nhiệm vụ không chạm cụm kỹ năng */
@media (max-height: 520px) {
  .qt-season { margin-top: 2px; padding: 1px 4px 1px 2px; gap: 3px; }
  .qts-ico { width: 20px; height: 20px; }
  .qts-main { display: flex; align-items: center; gap: 4px; }
  .qts-main b { flex: 1; min-width: 0; font-size: 14px; line-height: 18px; }
  .qts-sub { font-size: 14px; line-height: 18px; }
  .qts-sub i { display: none; }
}
/* điện thoại có nhiệm vụ: biểu ngữ thành huy hiệu 44px bên trái đầu khối nhiệm vụ (xếp dưới thì đè cụm kỹ năng 5/6);
   khối chỉ có biểu ngữ thì giữ dạng dòng. Màn hẹp: đang tìm đường / có mục tiêu thì ẩn để không chồng khối tìm đường, khung mục tiêu */
@media (max-height: 520px) {
  body.touch .qt-season:not(:first-child) {
    position: absolute; right: calc(100% + 4px); top: 0; width: 44px; height: 44px; margin: 0; padding: 2px 0 0;
    flex-direction: column; justify-content: flex-start; gap: 0; border-radius: 7px;
  }
  body.touch .qt-season:not(:first-child) .qts-ico { width: 24px; height: 24px; }
  body.touch .qt-season:not(:first-child) .qts-main { flex: none; width: 100%; justify-content: center; }
  body.touch .qt-season:not(:first-child) .qts-main b, body.touch .qt-season:not(:first-child) .qts-sub img { display: none; }
  body.touch .qt-season:not(:first-child) .qts-sub { justify-content: center; font-size: 15px; line-height: 15px; }
}
@media (max-height: 520px) and (max-width: 830px) {
  body.touch.travel-on .qt-season:not(:first-child) { display: none; }
}
@media (max-height: 520px) and (max-width: 760px) {
  body.touch.tg-on .qt-season:not(:first-child) { display: none; }
}
/* điện thoại hẹp (≤760px): khung trạng thái thu nhỏ, nút chat thu gọn xuống dưới khung trạng thái (cạnh hàng buff),
   menu 8 cột nhỏ hơn để vừa giữa khung trạng thái và bản đồ nhỏ */
@media (max-height: 520px) and (max-width: 760px) {
  body.touch #hud-status { transform: scale(0.72); }
  body.touch #hud-chat.collapsed { left: 6px; right: auto; top: 84px; }
  body.touch #hud-buffs { left: 46px; top: 84px; }
  body.touch #hud-menu { grid-template-columns: repeat(8, 34px); gap: 2px; }
  body.touch #hud-menu .mbtn { width: 34px; height: 34px; }
}
@media (max-height: 520px) and (max-width: 729px) {
  body.touch #hud-status { transform: scale(0.68); }
  body.touch #hud-menu { grid-template-columns: repeat(8, 28px); }
  body.touch #hud-menu .mbtn { width: 28px; height: 28px; border-radius: 6px; }
  body.touch #hud-menu .mbtn img { width: 24px; height: 24px; }
  body.touch #hud-menu .mbtn.pk img { width: 14px; height: 14px; }
  body.touch #hud-menu .mbtn.pk > span { font-size: 12px; line-height: 10px; }
}

/* ô nhập mã quà tặng */
.code-box { display: flex; flex-direction: column; gap: 3px; }
.code-row { display: flex; align-items: center; gap: 6px; }
.code-row > .ico { width: 24px; height: 24px; flex: none; }
.code-in { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 1px; }
.code-in::placeholder { text-transform: none; letter-spacing: 0; }
.code-msg { font-size: 16px; line-height: 17px; text-shadow: var(--outline); }
.code-msg.ok { color: var(--good); }
.code-msg.bad { color: var(--bad); }

/* cửa sổ hộp thư */
.win-mail { width: min(760px, 96vw); }
.mail-wrap { display: flex; flex-direction: column; gap: 8px; }
.mail-wrap > .code-box { padding: 6px 8px; border-radius: 5px; border: 1px solid var(--ink); background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.3); }
.mail-cols { display: grid; grid-template-columns: 268px 1fr; gap: 10px; min-height: 300px; }
.mail-list {
  display: flex; flex-direction: column; gap: 3px; max-height: 340px; overflow-y: auto; padding: 3px; border-radius: 5px;
  border: 1px solid var(--ink); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.25);
}
.mail-none { padding: 10px; }
.mail-item {
  position: relative; display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 6px 3px 4px; text-align: left; color: var(--muted);
  border-radius: 4px; border: 1px solid transparent; background: linear-gradient(rgba(84, 56, 36, 0.35), rgba(44, 28, 18, 0.35)); font: inherit;
}
.mail-item:hover { border-color: rgba(240, 200, 105, 0.6); }
.mail-item.sel { border-color: #f0c869; background: linear-gradient(rgba(142, 52, 22, 0.6), rgba(80, 24, 10, 0.6)); box-shadow: 0 0 6px rgba(240, 200, 105, 0.45); }
.mi-ico { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(rgba(255, 220, 160, 0.22), transparent 70%); }
.mi-ico .ico { width: 32px; height: 32px; }
.mail-item:not(.unread) .mi-ico .ico { opacity: 0.6; }
.mi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mi-main b { font-weight: normal; font-size: 18px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-main small { font-size: 14px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.mail-item.unread b { color: #ffe28a; }
.mail-item.unread::before { content: ''; position: absolute; left: 2px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ff4a3a; border: 1px solid var(--ink); }
.mi-badge { flex: none; font-size: 14px; line-height: 15px; padding: 0 4px; border-radius: 3px; color: #3a1804; background: linear-gradient(#ffe28a, #e0a032); border: 1px solid var(--ink); }
.mail-detail {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px; border-radius: 5px; border: 1px solid var(--ink);
  background: linear-gradient(rgba(246, 236, 210, 0.1), rgba(246, 236, 210, 0.04)), rgba(30, 18, 10, 0.5); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.4);
}
.md-title { font-size: 24px; line-height: 25px; color: #ffe9a8; text-shadow: var(--outline); overflow-wrap: anywhere; }
.md-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 15px; color: var(--muted); border-bottom: 1px dashed rgba(201, 154, 69, 0.35); padding-bottom: 4px; }
.md-meta b { font-weight: normal; color: var(--text); }
.md-meta .warn { color: var(--warn); }
.md-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 18px; line-height: 21px; color: var(--text); min-height: 44px; }
.md-att .sub-title { font-size: 18px; }
.md-att-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.md-att-grid.got > * { opacity: 0.5; filter: grayscale(0.5); }
.mail-coin {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; height: 46px; padding: 0 5px; border-radius: 5px;
  border: 1px solid #070302; background: radial-gradient(circle at 50% 42%, #4a3018, #150c07 78%); box-shadow: inset 0 0 0 1px #c99a45;
}
.mail-coin img { width: 20px; height: 20px; }
.mail-coin span { font-size: 16px; line-height: 14px; color: var(--xu); text-shadow: var(--outline); }
.mail-coin small { font-size: 12px; line-height: 11px; color: var(--muted); }
.md-btns { margin-top: auto; justify-content: flex-end; align-items: center; gap: 8px; }
.md-btns .btn .ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; }
.md-stamp { color: #ff5a3c; border: 2px solid #ff5a3c; border-radius: 4px; padding: 0 6px; transform: rotate(-8deg); font-size: 17px; letter-spacing: 1px; }
.mail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 16px; color: var(--muted); border-radius: 5px; border: 1px dashed rgba(201, 154, 69, 0.4); }
.mail-empty img { width: 48px; height: 48px; image-rendering: pixelated; opacity: 0.8; }
.mail-empty p { margin: 0; }
.mail-foot { width: 100%; align-items: center; }
.mail-foot .btn .ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; }
@media (max-width: 720px) {
  .mail-cols { grid-template-columns: 1fr; }
  .mail-list { max-height: 160px; }
}
@media (max-height: 520px) {
  .mail-cols { min-height: 0; grid-template-columns: 240px 1fr; }
  .mail-list { max-height: 210px; }
  .mail-wrap { gap: 5px; }
  .mail-wrap > .code-box { padding: 3px 6px; }
  .md-title { font-size: 21px; line-height: 22px; }
  .md-body { font-size: 16px; line-height: 18px; min-height: 0; }
  body.touch .mail-item { min-height: 44px; }
  body.touch .mail-foot .btn, body.touch .md-btns .btn, body.touch .code-row .btn, body.touch .code-in { min-height: 44px; }
}

/* cửa sổ lễ hội (đổi quà) */
.win-event { width: min(720px, 96vw); }
.ev-wrap { display: flex; flex-direction: column; gap: 8px; }
.ev-hero {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--ink); overflow: hidden;
  background: radial-gradient(circle at 12% 40%, rgba(255, 226, 138, 0.35), transparent 38%), linear-gradient(100deg, #2a1240, #5a1428 55%, #8e2414);
  box-shadow: inset 0 0 0 1px #e8b452, inset 0 0 18px rgba(0, 0, 0, 0.45);
}
.ev-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1px 1px at 30% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 62% 70%, #ffe 50%, transparent), radial-gradient(1px 1px at 80% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 46% 45%, #ffd 50%, transparent); opacity: 0.8; }
.ev-moon {
  flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 36%, #fff6c8, #ffd36a 45%, #e8a032 70%, rgba(232, 160, 50, 0) 72%);
  box-shadow: 0 0 22px rgba(255, 214, 120, 0.7);
}
.ev-moon img { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)); animation: qtsSway 2.6s ease-in-out infinite; }
.ev-hmain { flex: 1; min-width: 0; position: relative; z-index: 1; }
.evs-title { font-size: 28px; line-height: 28px; color: #ffe28a; text-shadow: 0 2px 0 #3a0604, var(--outline); letter-spacing: 1px; }
.ev-date { font-size: 16px; color: #ffcfa8; text-shadow: var(--outline); }
.ev-desc { font-size: 16px; line-height: 18px; color: #f8eedb; text-shadow: var(--outline); margin-top: 2px; }
.ev-have {
  position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 4px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #e8b452;
}
.ev-have img { width: 32px; height: 32px; image-rendering: pixelated; }
.ev-have b { font-weight: normal; font-size: 24px; line-height: 22px; color: #ffe28a; text-shadow: var(--outline); }
.ev-have small { font-size: 13px; line-height: 13px; color: var(--muted); white-space: nowrap; }
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ev-card {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 5px; border: 1px solid var(--ink);
  background: linear-gradient(rgba(84, 56, 36, 0.45), rgba(44, 28, 18, 0.45)); box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.3);
}
.ev-card.can { box-shadow: inset 0 0 0 1px #f0c869, 0 0 6px rgba(240, 200, 105, 0.3); }
.ev-card.out { opacity: 0.55; }
.ev-money img { width: 32px; height: 32px; }
.ev-info { flex: 1; min-width: 0; }
.ev-name { font-size: 17px; line-height: 18px; color: var(--text); }
.ev-cost { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 15px; line-height: 17px; }
.ev-cost b { font-weight: normal; color: #ffe28a; font-size: 18px; }
.ev-cost b.bad { color: var(--bad); }
.ev-tok { width: 16px; height: 16px; image-rendering: pixelated; }
.ev-btns { display: flex; flex-direction: column; gap: 3px; flex: none; }
.ev-btns .btn { min-width: 64px; }
.ev-foot { width: 100%; justify-content: space-between; align-items: center; }
.ev-foot .btn .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 2px; }
@media (max-width: 720px) {
  .ev-grid { grid-template-columns: 1fr; }
}
@media (max-height: 520px) {
  .ev-hero { padding: 4px 8px; }
  .ev-moon { width: 48px; height: 48px; }
  .ev-moon img { width: 32px; height: 32px; }
  .evs-title { font-size: 23px; line-height: 23px; }
  .ev-desc { display: none; }
  /* Đổi/x10 xếp chồng: cao 34px + vùng chạm lấn 5px, khe 10px để không bấm nhầm x10; nút đứng một mình cao 44px */
  body.touch .ev-btns { gap: 10px; }
  body.touch .ev-btns .btn { min-height: 34px; }
  body.touch .ev-btns .btn::after { content: ''; position: absolute; inset: -5px -4px; }
  body.touch .ev-btns .btn:only-child { min-height: 44px; }
  body.touch .ev-btns .btn:only-child::after { display: none; }
}
/* lôi đài trên điện thoại màn thấp: bình thuốc gần giữa hơn (cụm kỹ năng nhỏ); màn ≤ 729px khoảng trống còn ~155px nên bỏ huy hiệu và chữ "LÔI ĐÀI" */
@media (max-height: 520px) {
  body.touch #hud-arena { right: 272px; max-width: calc(100vw - 512px); }
}
@media (max-height: 520px) and (max-width: 760px) {
  body.touch #hud-arena .ar-wx { display: none; }
}
@media (max-height: 520px) and (max-width: 729px) {
  body.touch #hud-arena .ar-ico, body.touch #hud-arena .ar-title { display: none; }
  body.touch #hud-arena { padding-left: 12px; gap: 6px; }
}