:root {
  --panel: rgba(20, 16, 30, 0.86);
  --panel-2: rgba(36, 28, 50, 0.92);
  --border: #c89a4a;
  --border-dim: #6a5030;
  --text: #f4ead8;
  --muted: #b8a888;
  --gold: #ffd56a;
  --hp: #e04848;
  --sp: #4a8ae8;
  --base: #f0c040;
  --job: #6ad08a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0a14; color: var(--text); font-family: "Segoe UI", Tahoma, sans-serif; user-select: none; }
#stage { position: fixed; inset: 0; overflow: hidden; }
#stage canvas { display: block; image-rendering: pixelated; }
#overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hidden { display: none !important; }
button { font: inherit; color: var(--text); background: linear-gradient(#5a4028, #3a2818); border: 2px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
button:hover { filter: brightness(1.25); }

.panel { position: fixed; background: var(--panel); border: 2px solid var(--border); border-radius: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(0,0,0,.5); }
.track { position: relative; flex: 1; height: 14px; background: #1a1018; border: 1px solid #000; border-radius: 4px; overflow: hidden; }
.track .fill { height: 100%; transition: width .15s; }
.track span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 13px; font-weight: 700; text-shadow: 1px 1px 0 #000; }

#hud-tl { top: 12px; left: 12px; width: 260px; padding: 10px 12px; }
.tl-top { display: flex; gap: 8px; align-items: baseline; }
#h-lv { font-size: 20px; font-weight: 800; color: var(--gold); text-shadow: 2px 2px 0 #000; }
#h-name { font-weight: 700; }
#h-job { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.bar { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bar label { width: 22px; font-size: 12px; font-weight: 800; }
.bar.hp label { color: #ff8a8a; } .bar.sp label { color: #8ab8ff; }
#h-hp { background: linear-gradient(#ff6a6a, #b02828); } #h-hp.low { animation: pulse .6s infinite alternate; }
#h-sp { background: linear-gradient(#6aa8ff, #2a5ab0); }
@keyframes pulse { to { filter: brightness(1.8); } }
#h-buffs { display: flex; gap: 4px; margin-top: 6px; min-height: 0; }
#h-buffs span { position: relative; font-size: 18px; }
#h-buffs small { position: absolute; right: -4px; bottom: -4px; font-size: 10px; font-weight: 800; text-shadow: 1px 1px 0 #000; }

#hud-tr { top: 12px; right: 12px; width: 174px; padding: 8px 10px 10px; text-align: center; }
.tr-top { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; }
#zeny { color: var(--gold); }
#h-zone { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
#minimap { width: 150px; height: 150px; border: 1px solid var(--border-dim); border-radius: 4px; image-rendering: pixelated; }

#target { top: 12px; left: 50%; transform: translateX(-50%); width: 300px; padding: 6px 10px; text-align: center; }
#t-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
#t-name small { color: var(--muted); }
#t-name .boss { color: #ff8a2a; }
#t-hp { background: linear-gradient(#ff6a6a, #b02828); }

#castbar { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); width: 220px; height: 16px; background: #1a1018; border: 2px solid var(--border); border-radius: 6px; overflow: hidden; }
#cb-fill { height: 100%; background: linear-gradient(#d8b0ff, #7a4ab8); }
#cb-name { position: absolute; inset: 0; text-align: center; font-size: 11px; font-weight: 800; line-height: 12px; text-shadow: 1px 1px 0 #000; }

#hud-bottom { bottom: 12px; left: 50%; transform: translateX(-50%); padding: 8px 12px 10px; width: 600px; }
#slots { display: flex; gap: 6px; justify-content: center; align-items: center; margin-bottom: 8px; }
.sep { width: 2px; height: 40px; background: var(--border-dim); margin: 0 4px; }
.slot { position: relative; width: 50px; height: 50px; background: var(--panel-2); border: 2px solid var(--border-dim); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slot:hover { border-color: var(--gold); }
.slot .key { position: absolute; top: 1px; left: 4px; font-size: 11px; font-weight: 800; color: var(--gold); text-shadow: 1px 1px 0 #000; z-index: 2; }
.slot .icon { font-size: 26px; line-height: 1; }
.slot .icon .ico { width: 30px; height: 30px; font-size: 26px; }
.slot .qty { position: absolute; right: 4px; bottom: 1px; font-size: 11px; font-weight: 800; text-shadow: 1px 1px 0 #000; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.65); height: 0; }
.slot.locked .icon { opacity: .3; filter: grayscale(1); }
.slot.nosp { border-color: #4a6aa8; }
.slot.nosp .icon { opacity: .5; }
.xp { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.xp label { width: 34px; font-size: 11px; font-weight: 800; color: var(--muted); }
.xp .track { height: 10px; }
.xp .track span { font-size: 9px; line-height: 9px; }
.fill.base { background: linear-gradient(#ffe070, #c08a10); }
.fill.job { background: linear-gradient(#8af0a8, #2a9a5a); }

#menu-btns { position: fixed; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
#menu-btns button { width: 46px; height: 38px; font-weight: 800; padding: 0; }
#menu-btns button.glow { animation: glow 0.8s infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 12px 3px var(--gold); } }

#log { position: fixed; left: 12px; bottom: 12px; width: 320px; max-height: 170px; overflow-y: auto; padding: 6px 8px; font-size: 12px; background: rgba(10, 8, 16, .55); border-radius: 8px; scrollbar-width: thin; }
#log div { padding: 1px 0; text-shadow: 1px 1px 0 #000; }
.l-sys { color: #d8d0c0; } .l-err { color: #ff8a8a; } .l-exp { color: #a8d8ff; } .l-loot { color: #ffe08a; } .l-lvl { color: #8aff8a; font-weight: 700; } .l-boss { color: #ffa040; font-weight: 800; }

#banner { position: fixed; top: 22%; left: 0; right: 0; text-align: center; pointer-events: none; opacity: 0; }
#banner div { font-size: 34px; font-weight: 800; color: var(--gold); text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 180, 60, .5); letter-spacing: 2px; }
#banner small { font-size: 15px; color: var(--text); text-shadow: 2px 2px 0 #000; }
#banner.show { animation: banner 3s ease; }
@keyframes banner { 0% { opacity: 0; transform: translateY(10px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* cửa sổ */
.win { position: fixed; top: 90px; left: calc(50% - 220px); min-width: 360px; max-width: 92vw; background: var(--panel); border: 2px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); z-index: 10; }
.win-char { left: 300px; width: 470px; }
.win-skill { left: calc(50% - 230px); width: 460px; }
.win-inv { left: auto; right: 210px; width: 380px; }
.win-map { left: calc(50% - 250px); }
.win-shop { width: 560px; left: calc(50% - 280px); }
.win-dialog { top: auto; bottom: 170px; left: calc(50% - 240px); width: 480px; }
.win-menu { width: 260px; min-width: 0; left: calc(50% - 130px); top: 30%; }
.win-help { width: 520px; left: calc(50% - 260px); }
.win-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: linear-gradient(#5a4028, #3a2818); border-bottom: 2px solid var(--border); border-radius: 8px 8px 0 0; cursor: move; font-weight: 800; color: var(--gold); }
.win-head .x { padding: 0 7px; font-size: 12px; }
.win-body { padding: 10px 12px; max-height: 70vh; overflow-y: auto; }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.pts { margin-top: 8px; font-size: 13px; }
.pts b { color: var(--gold); }

.char-top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.zeny { color: var(--gold); font-weight: 700; }
.cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; }
.stat { display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.stat b { color: var(--gold); }
.stat em { color: #8aff8a; font-style: normal; font-size: 12px; }
.stat button { padding: 0 6px; font-size: 12px; }
.derived { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 13px; align-content: start; }
.derived div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); padding: 2px 0; }
.derived span { color: var(--muted); }

.sk { display: grid; grid-template-columns: 48px 1fr 32px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.sk-ico { position: relative; width: 44px; height: 44px; font-size: 26px; display: flex; align-items: center; justify-content: center; background: var(--panel-2); border: 2px solid var(--border-dim); border-radius: 8px; }
.sk-ico span { position: absolute; top: 0; left: 3px; font-size: 10px; font-weight: 800; color: var(--gold); }
.sk-info { font-size: 13px; } .sk-info small { color: var(--muted); } .sk-info span { color: #d8d0c0; font-size: 12px; }

.equip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.eq { background: var(--panel-2); border: 2px solid var(--border-dim); border-radius: 8px; padding: 4px; text-align: center; font-size: 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; }
.eq small { color: var(--muted); } .eq.empty { cursor: var(--cur-normal); opacity: .6; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.cell { position: relative; aspect-ratio: 1; background: var(--panel-2); border: 2px solid var(--border-dim); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cell:hover { border-color: var(--gold); }
.cell.empty { cursor: var(--cur-normal); opacity: .5; }
.cell .qty { position: absolute; right: 3px; bottom: 0; font-size: 11px; font-weight: 800; text-shadow: 1px 1px 0 #000; }
.cell .ref { position: absolute; left: 3px; top: 0; font-size: 10px; font-weight: 800; color: #8aff8a; text-shadow: 1px 1px 0 #000; }
.cell .hk { position: absolute; right: 3px; top: 0; font-size: 10px; font-weight: 800; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.ico { width: 28px; height: 28px; image-rendering: pixelated; object-fit: contain; }
.pxi { display: inline-block; flex: none; vertical-align: middle; background-repeat: no-repeat; image-rendering: pixelated; }
.emo { font-size: 24px; line-height: 28px; text-align: center; display: inline-block; }
.inv-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; }
.inv-foot span { color: var(--gold); font-weight: 800; font-size: 14px; }
.inv-foot small { color: var(--muted); }

.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop h4 { margin: 0 0 6px; color: var(--gold); }
.list { max-height: 340px; overflow-y: auto; }
.row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.row:hover { background: rgba(255, 213, 106, .12); }
.row span { flex: 1; } .row b { color: var(--gold); font-size: 12px; }
.ref-row { cursor: var(--cur-normal); } .ref-row button { font-size: 12px; }

.menu { display: flex; flex-direction: column; gap: 8px; }
.menu button { padding: 8px; }
button.danger { background: linear-gradient(#7a2a20, #4a1810); border-color: #c85a4a; }
.help p { margin: 6px 0; font-size: 13px; }
.help b { color: var(--gold); }
.dlg-text { margin: 4px 0 12px; line-height: 1.5; }
.dlg-opts { display: flex; flex-direction: column; gap: 6px; }
.dlg-opts button { text-align: left; }
#bigmap { width: 480px; height: 480px; image-rendering: pixelated; display: block; }

#tooltip { position: fixed; z-index: 50; pointer-events: none; background: rgba(10, 8, 18, .96); border: 2px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12px; max-width: 260px; line-height: 1.45; }
#tooltip b { color: var(--gold); font-size: 13px; } #tooltip small { color: var(--muted); } #tooltip i { color: #d8d0c0; }

#death { position: fixed; inset: 0; background: rgba(40, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 40; }
#death .box { text-align: center; background: var(--panel); border: 2px solid var(--border); border-radius: 12px; padding: 24px 32px; }
#death h2 { color: #ff8a8a; margin: 0 0 8px; } #death button { margin-top: 12px; padding: 8px 18px; }

/* ---------- màn hình chờ + menu chính (js/menu.js) ---------- */
#title { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #070812; transition: opacity .45s; }
#title.leaving { opacity: 0; }
#title-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#title-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, transparent 45%, rgba(4, 4, 14, .7)); transition: background .6s; }
#title.menu-mode #title-shade { background: linear-gradient(90deg, rgba(6, 6, 16, .82) 0, rgba(6, 6, 16, .45) 34%, transparent 60%), radial-gradient(ellipse at 60% 60%, transparent 40%, rgba(4, 4, 14, .6)); }
#title-logo { position: absolute; left: 50%; top: 7%; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45)); animation: logoIn 1.1s cubic-bezier(.2, 1.5, .4, 1) both, logoBob 4s ease-in-out 1.1s infinite; transition: left .6s, top .6s, width .6s; pointer-events: none; }
#title.menu-mode #title-logo { left: 40px; top: 28px; transform: none; width: 240px !important; animation: none; }
@keyframes logoIn { from { opacity: 0; transform: translate(-50%, -40px) scale(.8); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes logoBob { 50% { transform: translate(-50%, -6px); } }
#title-press { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; font-size: 20px; font-weight: 800; letter-spacing: 2px; color: #ffe8a8; text-shadow: 0 2px 0 #3a1a08, 0 0 18px rgba(255, 170, 60, .8); animation: pressBlink 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes pressBlink { 50% { opacity: .35; } }
#title-tip { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0 auto; max-width: 560px; text-align: center; color: #c8b898; font-size: 13px; text-shadow: 1px 1px 0 #000; }
#title.menu-mode #title-tip { display: none; }
#title footer { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 11px; color: #8a86a8; text-shadow: 1px 1px 0 #000; }
#title-menu { position: absolute; inset: 0; pointer-events: none; }
#title-menu > * { pointer-events: auto; }
#mm-nav { position: absolute; left: 40px; top: 210px; width: 290px; display: flex; flex-direction: column; gap: 10px; animation: navIn .5s ease-out both; }
@keyframes navIn { from { opacity: 0; transform: translateX(-30px); } }
.mm-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 16px 11px 22px; text-align: left; background: linear-gradient(90deg, rgba(40, 26, 18, .92), rgba(28, 18, 14, .78)); border: 2px solid #6a4a28; border-radius: 4px; color: var(--text); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), 0 3px 0 rgba(0, 0, 0, .5); transition: transform .12s, border-color .12s, background .12s; cursor: pointer; }
.mm-btn b { font-size: 18px; letter-spacing: .5px; color: #ffe0a0; text-shadow: 0 2px 0 #2a1408; }
.mm-btn small { font-size: 12px; color: #b8a888; }
.mm-btn::before { content: ''; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: #6a4a28; transform: rotate(45deg); transition: background .12s; }
.mm-btn.sel, .mm-btn:hover { transform: translateX(8px); border-color: var(--gold); background: linear-gradient(90deg, rgba(90, 52, 20, .95), rgba(40, 24, 14, .82)); }
.mm-btn.sel::before, .mm-btn:hover::before { background: #ffcf5a; box-shadow: 0 0 8px #ffaa30; }
.mm-btn.on { border-color: #ffcf5a; }
#mm-panel { position: absolute; left: 360px; top: 40px; bottom: 40px; width: min(640px, calc(100vw - 400px)); display: flex; flex-direction: column; background: linear-gradient(rgba(26, 18, 30, .94), rgba(16, 12, 22, .94)); border: 2px solid var(--border); border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5), 0 10px 40px rgba(0, 0, 0, .6); }
#mm-panel.pop { animation: panelIn .28s ease-out; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }
.mm-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 2px solid var(--border-dim); background: linear-gradient(rgba(90, 60, 30, .5), transparent); }
.mm-head span { font-size: 18px; font-weight: 800; color: var(--gold); letter-spacing: 1px; text-shadow: 0 2px 0 #2a1408; }
.mm-head .x { padding: 2px 8px; }
.mm-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mm-slot { position: relative; display: grid; grid-template-columns: 30px 96px 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 10px 12px; background: rgba(40, 30, 50, .7); border: 2px solid var(--border-dim); border-radius: 4px; }
.mm-slot.empty { grid-template-columns: 30px 1fr; }
.mm-slot:hover { border-color: var(--border); }
.mm-no { grid-row: span 2; align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #6a5030; border-right: 2px solid rgba(106, 80, 48, .5); }
.mm-por { grid-row: span 2; width: 96px; height: 96px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 80%, rgba(255, 150, 60, .25), transparent 65%); border-radius: 4px; }
.mm-por.big { width: 160px; height: 150px; margin: 0 auto; grid-row: auto; }
.mm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-info b { font-size: 18px; color: #fff0d0; }
.mm-info span { font-size: 13px; color: var(--text); }
.mm-info small { font-size: 12px; color: var(--muted); }
.mm-act { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-slot.empty .mm-act { grid-column: 2; }
.mm-act button, #mm-ask button { padding: 5px 12px; font-size: 13px; }
button.pri { background: linear-gradient(#ffcf5a, #d08a20); color: #3a1a08; border-color: #fff0c0; font-weight: 800; }
.mm-baks { display: none; grid-column: 1 / -1; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border-dim); }
.mm-slot.open .mm-baks { display: flex; }
.mm-bak { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.mm-bak button { padding: 3px 10px; font-size: 12px; }
.mm-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.mm-warn { margin: 0; padding: 8px 10px; font-size: 13px; color: #ffd0a0; background: rgba(120, 50, 20, .35); border: 1px solid #a05a20; border-radius: 4px; }
.mm-create { align-items: stretch; }
.mm-create label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.mm-create input { font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 4px; border: 2px solid var(--border-dim); background: #120e1a; color: var(--text); outline: none; text-align: center; }
.mm-create input:focus { border-color: var(--gold); }
.mm-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm-pick { display: flex; flex-direction: column; gap: 2px; padding: 8px; text-align: left; }
.mm-pick small { font-size: 11px; color: var(--muted); }
.mm-pick.on { border-color: var(--gold); background: rgba(120, 80, 30, .5); }
.mm-go { padding: 12px; font-size: 18px; font-weight: 900; letter-spacing: 1px; background: linear-gradient(#ffcf5a, #d08a20); color: #3a1a08; border-color: #fff0c0; box-shadow: 0 0 24px rgba(255, 170, 60, .35); }
.mm-go:hover { filter: brightness(1.1); }
.mm-keys { border-collapse: collapse; width: 100%; font-size: 13px; }
.mm-keys td { padding: 6px 8px; border-bottom: 1px solid rgba(106, 80, 48, .4); }
.mm-keys td:first-child { white-space: nowrap; width: 1%; }
kbd { display: inline-block; padding: 2px 8px; font-weight: 700; font-size: 12px; color: #ffe0a0; background: #2a1e18; border: 1px solid #6a4a28; border-bottom-width: 3px; border-radius: 3px; }
#mm-ask { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); }
#mm-ask .box { max-width: 420px; padding: 20px 24px; text-align: center; background: var(--panel); border: 2px solid var(--border); border-radius: 6px; }
#mm-ask p { margin: 0 0 16px; line-height: 1.5; }
#mm-ask .row { display: flex; gap: 10px; justify-content: center; }
.mm-toast { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); padding: 10px 18px; background: rgba(20, 40, 24, .95); border: 2px solid #6ad08a; border-radius: 4px; color: #d0ffd8; font-weight: 700; transition: opacity .5s; z-index: 6; }
.mm-toast.bad { background: rgba(50, 16, 16, .95); border-color: #e05050; color: #ffd0d0; }
.mm-toast.out { opacity: 0; }
@media (max-width: 900px) {
  #title.menu-mode #title-logo { left: 50%; transform: translateX(-50%); width: 180px !important; top: 12px; }
  #mm-nav { left: 16px; right: 16px; top: 130px; width: auto; }
  #mm-panel { left: 12px; right: 12px; top: 12px; bottom: 12px; width: auto; z-index: 3; }
}

@media (max-width: 1300px) { #log { bottom: 136px; max-height: 120px; } }
@media (max-width: 760px) {
  .win { left: 8px !important; right: 8px; top: 70px; width: auto !important; min-width: 0; }
  .shop, .cols { grid-template-columns: 1fr; }
  #bigmap { width: 100%; height: auto; }
  #hud-tr { transform: scale(.75); transform-origin: top right; }
}
@media (max-width: 900px) {
  #hud-bottom { width: calc(100% - 90px); left: 12px; transform: none; }
  .slot { width: 40px; height: 40px; } .slot .icon { font-size: 20px; }
  #log { display: none; }
}

/* ===== bản mở rộng: HUD mới, thanh boss, tự động, tab, độ hiếm ===== */
.track .fill.shield { position: absolute; left: 0; top: 0; background: linear-gradient(rgba(170,230,255,.85), rgba(90,170,230,.85)); width: 0; }
#h-buffs span.bad { filter: drop-shadow(0 0 3px #f44); }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; text-shadow: 1px 1px 0 #000, 0 0 4px #000; z-index: 3; pointer-events: none; }
.slot.skill.active { border-color: #8affb0; box-shadow: 0 0 8px rgba(120,255,170,.5) inset; }
.auto-wrap { display: flex; flex-direction: column; gap: 3px; }
#btn-auto { width: 64px; height: 32px; font-weight: 900; letter-spacing: 1px; padding: 0; background: linear-gradient(#3a4a3a, #1a2a1a); border-color: #5a8a6a; color: #9ac8a8; }
#btn-auto.on { background: linear-gradient(#3ad87a, #138a40); color: #fff; border-color: #c8ffd8; animation: autoglow 1s infinite alternate; }
@keyframes autoglow { to { box-shadow: 0 0 14px 3px rgba(80,255,150,.7); } }
.auto-wrap .gear { height: 18px; padding: 0; font-size: 11px; line-height: 12px; }
#auto-line { position: fixed; left: 50%; bottom: 152px; transform: translateX(-50%); padding: 3px 14px; border-radius: 12px; background: rgba(10,40,20,.8); border: 1px solid #5aff9a; color: #aaffc8; font-size: 12px; font-weight: 700; white-space: nowrap; }

#bossbar { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: min(560px, 70vw); text-align: center; pointer-events: none; }
#bb-name { font-weight: 900; font-size: 17px; color: #ffcf8a; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,80,40,.7); margin-bottom: 4px; }
#bb-name small { font-size: 12px; color: #e0d0c0; } #bb-name b { color: #ff4a3a; animation: pulse .4s infinite alternate; }
.bb-track { position: relative; height: 18px; background: #1a0808; border: 2px solid #c85a3a; border-radius: 4px; overflow: hidden; box-shadow: 0 0 16px rgba(255,60,30,.4); }
#bb-fill { height: 100%; background: linear-gradient(#ff7a4a, #b0201a 60%, #6a0a0a); transition: width .2s; }
#bb-pct { position: absolute; inset: 0; font-size: 12px; font-weight: 900; line-height: 15px; text-shadow: 1px 1px 0 #000; }
#banner.boss div { color: #ff6a4a; font-size: 40px; text-shadow: 3px 3px 0 #000, 0 0 30px rgba(255,40,20,.8); }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tab { padding: 3px 10px; font-size: 12px; background: linear-gradient(#3a2a1c, #2a1c12); border-color: var(--border-dim); }
.tab.on { background: linear-gradient(#8a6030, #5a3a18); border-color: var(--gold); color: var(--gold); }
.win-skill { width: 560px; left: calc(50% - 280px); }
.win-auto { width: 640px; left: calc(50% - 320px); }
.win-warp { width: 460px; left: calc(50% - 230px); }
.win-settings { width: 340px; left: calc(50% - 170px); }
.win-inv { width: 400px; }
.sk-list { max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.sk.dim .sk-info b { color: #a89880; }
.sk .req { font-size: 11px; margin-top: 2px; } .req .ok { color: #8f8; } .req .no { color: #f88; }
.equip { grid-template-columns: repeat(4, 1fr); }
.eq span { font-size: 10px; }
.cell.r-rare { border-color: #3a6aa0; } .cell.r-epic { border-color: #7a4ab0; box-shadow: inset 0 0 6px rgba(190,120,255,.4); } .cell.r-legend { border-color: #c8782a; box-shadow: inset 0 0 8px rgba(255,160,60,.5); }
.row.dim { opacity: .5; } .row small { color: var(--muted); font-size: 11px; margin-left: 4px; }
.shop-list, .warp-list { max-height: 56vh; overflow-y: auto; }
.row.warp { cursor: var(--cur-normal); justify-content: space-between; } .row.warp span { display: flex; flex-direction: column; } .row.warp small { margin-left: 0; }
.row.warp.fit span { color: #9affc0; } .row.warp.dun { padding-left: 18px; } .row.warp i { font-size: 11px; color: var(--muted); }
button.mini { font-size: 11px; padding: 2px 8px; margin: 2px 0 6px; }
#tooltip .ab { color: #ffd88a; } #tooltip .set { color: #9ae0ff; font-size: 11px; }
.auto-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.auto-top .big { padding: 8px 16px; font-weight: 900; font-size: 14px; background: linear-gradient(#3a6a4a, #1a3a2a); border-color: #6ac08a; }
.auto-top .big.on { background: linear-gradient(#3ad87a, #138a40); color: #fff; }
#auto-info { font-size: 12px; color: #aaffc8; }
.auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auto-grid h4 { margin: 6px 0 4px; color: var(--gold); font-size: 13px; }
label.chk { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; cursor: pointer; }
label.sld { display: grid; grid-template-columns: 1fr; font-size: 12px; margin: 4px 0; position: relative; }
label.sld input { width: 100%; accent-color: #e0a040; } label.sld output { position: absolute; right: 0; top: 0; color: var(--gold); font-weight: 700; }
.auto-sk { max-height: 150px; overflow-y: auto; }
.win-settings label.sld { margin: 8px 0; }
@media (max-width: 1300px) { #log { bottom: 150px; } }
@media (max-width: 900px) { #hud-bottom { width: calc(100% - 90px); } .auto-grid { grid-template-columns: 1fr; } }
.mm-info .mm-job { color: #ffcf7a; font-weight: 700; }
#menu-btns button { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
#menu-btns button kbd { position: absolute; right: 1px; bottom: 1px; padding: 0 3px; font-size: 9px; line-height: 12px; border-bottom-width: 1px; }
#menu-btns button:hover .pxi { filter: brightness(1.2) drop-shadow(0 0 4px rgba(255, 200, 90, .7)); }
#zeny { display: flex; align-items: center; gap: 2px; }
.derived .pxi { margin-right: 4px; }
.derived span { display: inline-flex; align-items: center; }
#worldmap { width: 640px; height: 440px; display: block; border: 2px solid var(--border-dim); border-radius: 4px; cursor: crosshair; }
@media (max-width: 900px) { #worldmap { width: 100%; height: auto; } }