/* =====================================================================
 * style.css — หน้าตา UI สไตล์ MMORPG คลาสสิก (โทนน้ำเงินเข้ม + ทอง)
 * ===================================================================== */
:root {
  --navy: #1b2a4a; --navy2: #243a66; --navy3: #0f1a30; --gold: #ffcf4a; --gold2: #e89b12;
  --panel: #f4efe3; --panel2: #e8dfcb; --ink: #2b2118; --line: #b9a57f;
  --hp: #ff4d4d; --mp: #3d8bff; --exp: #ffe14a; --pink: #ff5fa2;
  --font: Tahoma, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1020; font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; }
input, select, textarea { font-family: var(--font); user-select: text; -webkit-user-select: text; }
body.scrolling, body.scrolling * { cursor: crosshair !important; }

/* ------------------------------ ปุ่ม ------------------------------ */
.btn { background: linear-gradient(#fff, #dcd3bf); border: 1px solid #8f7a55; border-radius: 5px; padding: 5px 10px; font-size: 12px; font-weight: bold; color: #3a2c1a; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(0,0,0,.2); }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 3px 7px; font-size: 11px; }
.btn.gold { background: linear-gradient(#ffe38a, #f2a91c); border-color: #b06d00; color: #4a2a00; }
.btn.pink { background: linear-gradient(#ffb3d4, #ff5fa2); border-color: #b0306a; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn.red { background: linear-gradient(#ff9a9a, #e04848); border-color: #9a2020; color: #fff; }
.btn.plus { padding: 1px 6px; font-size: 11px; background: linear-gradient(#fff4c2, #ffc93c); border-color: #b07a00; }
.btn.npc { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 7px 10px; font-size: 13px; }
.chip { background: #fff; border: 1px solid #b9a57f; border-radius: 12px; padding: 3px 9px; font-size: 11px; margin: 2px; color: #4a3a22; }
.chip.on { background: linear-gradient(#ffe38a, #f2a91c); border-color: #b06d00; font-weight: bold; }
.chip.off { opacity: .45; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #8f7a55; margin: 3px; padding: 0; }
.swatch.on { box-shadow: 0 0 0 3px var(--gold2); transform: scale(1.12); }
.row { display: flex; align-items: center; } .row.wrap { flex-wrap: wrap; } .row.gap { gap: 6px; margin: 6px 0; } .row.gap2 { gap: 22px; } .row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.hint { font-size: 10.5px; color: #7a6a52; margin: 6px 0 2px; }
.sub-title { font-weight: bold; font-size: 12px; color: #6b4e16; margin: 9px 0 4px; border-bottom: 1px dashed #cdbb94; padding-bottom: 2px; }
.empty-msg { padding: 16px; text-align: center; color: #8a7a62; font-size: 12px; width: 100%; }
input[type=text], input:not([type]), input[type=number], select, textarea { border: 1px solid #b9a57f; border-radius: 4px; padding: 4px 6px; font-size: 12px; background: #fffdf7; }
input.num { width: 52px; } input.num.wide { width: 78px; }

/* ------------------------------ HUD ------------------------------ */
#ui-layer { position: absolute; inset: 0; pointer-events: none; }
#ui-layer > * { pointer-events: auto; }
#hud { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(#34466e, #1a2644 45%, #0f1830); border-top: 2px solid #6f86b8; display: flex; align-items: center; gap: 10px; padding: 0 10px 10px; color: #fff; box-shadow: 0 -3px 12px rgba(0,0,0,.4); }
.hud-left { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.hud-lv { background: radial-gradient(circle at 40% 30%, #ffe89a, #e6a019 70%, #9a5d00); border-radius: 10px; padding: 3px 8px; color: #4a2600; text-align: center; box-shadow: 0 0 0 2px #fff6 inset, 0 2px 4px #0008; }
.hud-lv span { font-size: 9px; font-weight: bold; display: block; line-height: 1; } .hud-lv b { font-size: 20px; line-height: 1; }
.hud-id { line-height: 1.2; } #hud-job { font-size: 10px; color: #ffd66b; } #hud-name { font-size: 13px; font-weight: bold; text-shadow: 0 1px 0 #000; }
.hud-bars { width: 250px; display: flex; flex-direction: column; gap: 4px; }
.bar { display: flex; align-items: center; gap: 4px; } .bar label { font-size: 10px; font-weight: bold; width: 18px; color: #ffd66b; }
.track { position: relative; flex: 1; height: 15px; background: #0a0f1c; border: 1px solid #000; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px #5c7099; }
.track .fill { height: 100%; transition: width .15s; }
.hp .fill { background: linear-gradient(#ff9a9a, #ff3030 50%, #c01010); }
.mp .fill { background: linear-gradient(#9cc8ff, #2f7bff 50%, #1a4fc0); }
.track span { position: absolute; inset: 0; font-size: 10px; font-weight: bold; text-align: center; line-height: 15px; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
#hud.low-hp .hp .track { animation: lowhp .6s infinite alternate; }
@keyframes lowhp { to { box-shadow: 0 0 0 1px #ff5252, 0 0 8px #ff1744; } }
.exp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #111; border-top: 1px solid #000; }
.exp-bar .fill { height: 100%; background: linear-gradient(#fff7b0, #ffd21e 50%, #e59b00); transition: width .25s; }
.exp-bar span { position: absolute; inset: 0; font-size: 9px; text-align: center; line-height: 10px; color: #fff; font-weight: bold; text-shadow: 0 0 2px #000; }
#hotbar { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; margin-left: auto; }
.hk { position: relative; width: 32px; height: 32px; background: linear-gradient(#2a3a5e, #141d33); border: 1px solid #6f86b8; border-radius: 5px; cursor: pointer; overflow: hidden; }
.hk:hover { border-color: var(--gold); }
.hk img { width: 28px; height: 28px; margin: 1px; image-rendering: pixelated; }
.hk.dim img { opacity: .35; filter: grayscale(1); }
.hk b { position: absolute; left: 2px; top: 0; font-size: 9px; color: #ffe57f; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.hk .qty { position: absolute; right: 2px; bottom: 0; font-size: 9px; color: #fff; font-weight: bold; text-shadow: 0 0 2px #000; }
.hk .cd { display: none; position: absolute; inset: 0; color: #fff; font-style: normal; font-weight: bold; font-size: 12px; text-align: center; line-height: 32px; text-shadow: 0 0 3px #000; }
.hud-menu { display: flex; gap: 6px; align-items: center; }
.cashbtn { background: linear-gradient(#ffb3d4, #ff4f96); border: 1px solid #fff; border-radius: 7px; color: #fff; font-weight: 900; font-size: 10px; padding: 4px 7px; line-height: 1.1; text-shadow: 0 1px 0 #a0205a; box-shadow: 0 0 10px #ff4f9680; animation: glow 1.8s infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 16px #ff8fc4; } }
.menu-grid { display: grid; grid-template-columns: repeat(7, 28px); gap: 3px; }
.menu-grid button { width: 28px; height: 22px; font-size: 13px; padding: 0; background: linear-gradient(#3b5288, #1d2b4d); border: 1px solid #6f86b8; border-radius: 4px; }
.menu-grid button:hover { border-color: var(--gold); background: linear-gradient(#4b66a8, #25386a); }

/* ----------------------- Minimap / Buffs / Boss ----------------------- */
.panel { background: rgba(15,24,48,.88); border: 2px solid #6f86b8; border-radius: 8px; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
#minimap { position: absolute; left: 8px; top: 8px; width: 198px; overflow: hidden; }
.mm-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; background: linear-gradient(#3a5590, #22345c); font-size: 10px; font-weight: bold; color: #ffe57f; }
.mm-head button { background: none; border: none; color: #fff; font-weight: bold; }
#mm-canvas { display: block; margin: 2px; image-rendering: auto; }
#minimap.mini #mm-canvas { display: none; }
#mapname { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; color: #fff; opacity: 0; pointer-events: none !important; text-shadow: 0 2px 4px #000, 0 0 12px #000; }
#mapname b { display: block; font-size: 30px; letter-spacing: 1px; } #mapname small { font-size: 15px; color: #ffe57f; }
#mapname.show { animation: mapname 3.2s ease forwards; }
@keyframes mapname { 0% { opacity: 0; transform: translate(-50%, 10px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
#buffs { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; flex-direction: row-reverse; }
.buff { position: relative; width: 30px; height: 30px; border: 1px solid #ffe57f; border-radius: 4px; overflow: hidden; background: #000; }
.buff img { width: 28px; height: 28px; } .buff span { position: absolute; bottom: 0; right: 1px; font-size: 9px; color: #fff; font-weight: bold; text-shadow: 0 0 2px #000; }
#bossbar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(520px, 60vw); color: #fff; text-align: center; }
.bb-name { font-weight: 900; font-size: 13px; text-shadow: 0 0 4px #f00, 0 1px 0 #000; margin-bottom: 2px; }
.bb-track { position: relative; height: 16px; background: #200; border: 2px solid #ffcf4a; border-radius: 4px; overflow: hidden; }
.bb-fill { height: 100%; background: linear-gradient(#ff8a80, #d50000); transition: width .2s; }
.bb-text { position: absolute; inset: 0; font-size: 10px; font-weight: bold; line-height: 13px; text-shadow: 0 0 2px #000; }

/* ----------------------- Notices / Banner / Log ----------------------- */
#notices { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none !important; }
.notice { background: rgba(20,30,60,.9); color: #fff; border: 1px solid #ffcf4a; border-radius: 16px; padding: 5px 16px; font-size: 13px; font-weight: bold; box-shadow: 0 2px 8px #0008; animation: pop .25s; transition: opacity .6s, transform .6s; }
.notice.err { border-color: #ff5252; color: #ffcdd2; }
.notice.out { opacity: 0; transform: translateY(-10px); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
#banner { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; pointer-events: none !important; }
#banner.show { animation: banner 2.6s ease forwards; }
.b-title { font-size: 44px; font-weight: 900; font-style: italic; letter-spacing: 2px; background: linear-gradient(#fffbe0, #ffd000 50%, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #5a2d00; filter: drop-shadow(0 3px 0 #3a1800) drop-shadow(0 0 12px #ffae00); }
.b-sub { font-size: 18px; font-weight: bold; color: #fff; text-shadow: 0 2px 3px #000; }
@keyframes banner { 0% { opacity: 0; transform: translateX(-50%) scale(2); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } }
#log { position: absolute; right: 10px; bottom: 92px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; pointer-events: none !important; }
.log-line { background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 3px; transition: opacity .6s; }
.log-line.out { opacity: 0; }

/* ------------------------------- Chat ------------------------------- */
#chat { position: absolute; left: 8px; bottom: 88px; width: min(400px, 44vw); display: flex; flex-direction: column; background: rgba(10,16,34,.72); }
.chat-tabs { display: flex; gap: 2px; padding: 3px 4px 0; }
.ctab { background: #26375f; border: 1px solid #4b6194; border-bottom: none; color: #cfd8ff; font-size: 10px; padding: 2px 8px; border-radius: 4px 4px 0 0; }
.ctab.on { background: #4b6194; color: #fff; font-weight: bold; }
#chat-log { height: 118px; overflow-y: auto; padding: 4px 6px; font-size: 11.5px; line-height: 1.35; user-select: text; }
#chat-log::-webkit-scrollbar { width: 6px; } #chat-log::-webkit-scrollbar-thumb { background: #4b6194; border-radius: 3px; }
.cm { color: #fff; word-break: break-word; text-shadow: 0 1px 1px #000; }
.cm.party { color: #ff9ec4; } .cm.guild { color: #b9f6ca; } .cm.sys { color: #ffe082; } .cm.whisper { color: #80d8ff; }
.cm b { color: inherit; }
.chat-input { display: flex; gap: 3px; padding: 3px; border-top: 1px solid #4b6194; }
.chat-input select { background: #1b2a4a; color: #fff; border-color: #4b6194; font-size: 11px; padding: 2px; }
.chat-input input { flex: 1; background: rgba(255,255,255,.92); font-size: 12px; padding: 3px 6px; }

/* ------------------------------ Windows ------------------------------ */
#windows { position: absolute; inset: 0; pointer-events: none !important; }
.win { position: absolute; pointer-events: auto; background: var(--panel); border: 2px solid #3d5486; border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px #fff8 inset; max-height: calc(100vh - 90px); display: flex; flex-direction: column; animation: winin .15s; }
@keyframes winin { from { transform: scale(.94); opacity: 0; } }
.win-head { display: flex; align-items: center; gap: 6px; background: linear-gradient(#4f6ba8, #2a3f6e); color: #fff; padding: 5px 8px; border-radius: 7px 7px 0 0; cursor: move; font-weight: bold; font-size: 13px; text-shadow: 0 1px 0 #000; }
.win-title { flex: 1; } .win-key { font-size: 10px; color: #ffe57f; }
.win-x { background: linear-gradient(#ff8a80, #d32f2f); color: #fff; border: 1px solid #fff; border-radius: 4px; width: 20px; height: 20px; font-size: 11px; line-height: 1; padding: 0; }
.win-body { padding: 8px; overflow-y: auto; font-size: 12px; }
.tabs { display: flex; gap: 2px; border-bottom: 2px solid #3d5486; margin-bottom: 6px; flex-wrap: wrap; }
.tab { background: linear-gradient(#e6ddc8, #cfc2a3); border: 1px solid #a8946c; border-bottom: none; border-radius: 5px 5px 0 0; padding: 4px 9px; font-size: 11px; font-weight: bold; color: #5a4a30; }
.tab.on { background: linear-gradient(#5f7cc0, #3d5486); color: #fff; border-color: #3d5486; }
.scroll { overflow-y: auto; }
.money { display: flex; justify-content: space-between; background: linear-gradient(#3a4f80, #26375f); color: #fff; border-radius: 6px; padding: 5px 9px; margin-top: 7px; font-weight: bold; font-size: 12px; }
.meso { color: #ffe082; } .nx { color: #ff9ec4; }

/* ---------------------------- Item slots ---------------------------- */
.inv-grid { display: grid; grid-template-columns: repeat(6, 46px); gap: 3px; justify-content: center; }
.slot { position: relative; width: 46px; height: 46px; background: linear-gradient(#fffdf6, #e7dcc4); border: 1px solid #b9a57f; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slot.empty { background: #ddd2b9; cursor: default; box-shadow: 0 1px 2px rgba(0,0,0,.15) inset; }
.slot:not(.empty):hover { border-color: var(--gold2); box-shadow: 0 0 0 2px #ffcf4a88; }
.slot img { width: 36px; height: 36px; image-rendering: pixelated; pointer-events: none; }
.slot .qty { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: bold; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.slot .plus { position: absolute; left: 2px; top: 0; font-size: 9px; font-weight: bold; color: #ffb300; text-shadow: 0 0 2px #000; pointer-events: none; }
.slot.r-rare { box-shadow: 0 0 0 2px #42a5f5 inset; } .slot.r-epic { box-shadow: 0 0 0 2px #ab47bc inset, 0 0 4px #ab47bc; } .slot.r-legend { box-shadow: 0 0 0 2px #ffb300 inset, 0 0 7px #ffb300; }
.slot.r-mythic { box-shadow: 0 0 0 2px #ff1744 inset, 0 0 10px #ff1744; animation: mythic 1.6s infinite alternate; }
@keyframes mythic { 0% { box-shadow: 0 0 0 2px #ff1744 inset, 0 0 8px #ff1744; } 50% { box-shadow: 0 0 0 2px #ffea00 inset, 0 0 12px #ff9100; } 100% { box-shadow: 0 0 0 2px #d500f9 inset, 0 0 12px #d500f9; } }
.slot.r-set::after { content: 'SET'; position: absolute; right: 1px; top: 0; font-size: 7px; font-weight: 900; color: #00e5ff; text-shadow: 0 0 2px #000; }
.slot.equipped { box-shadow: 0 0 0 2px #ff5fa2 inset; }
.r-rare-t { color: #1e88e5 !important; } .r-epic-t { color: #9c27b0 !important; } .r-legend-t { color: #ff8f00 !important; } .r-cash-t { color: #ff4f96 !important; }
.scroll-hint { background: #fff3c4; border: 1px dashed #e0a800; border-radius: 5px; padding: 4px; margin-bottom: 5px; font-size: 11px; font-weight: bold; text-align: center; }

/* ------------------------------ Equipment ------------------------------ */
.eq-wrap { display: flex; gap: 8px; align-items: center; justify-content: center; }
.eq-col { display: flex; flex-direction: column; gap: 3px; }
.eq-cell { text-align: center; } .eq-cell label { font-size: 9.5px; color: #7a6a52; display: block; }
.eq-mid { text-align: center; background: radial-gradient(#ffffff, #d9cfb8); border-radius: 10px; padding: 4px; border: 1px solid #b9a57f; }
.preview { image-rendering: pixelated; display: block; margin: 0 auto; }
.eq-name { font-weight: bold; font-size: 12px; } .eq-name small { color: #7a6a52; font-weight: normal; }
.eq-cash { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; justify-items: center; }
.slot.cashs { box-shadow: 0 0 0 2px #ff5fa2 inset; }

/* ------------------------------ Stats ------------------------------ */
.stat-head { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#3a4f80, #26375f); color: #fff; border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; }
.stat-head small { color: #ffe082; } .big-lv { font-size: 22px; font-weight: 900; color: #ffcf4a; }
.kv { display: flex; justify-content: space-between; padding: 2px 4px; border-bottom: 1px dotted #d3c4a2; } .kv b.dmg { color: #d84315; }
.ap-box, .sp-box { background: #fff7d6; border: 1px solid #e0c46a; border-radius: 5px; padding: 5px 8px; margin: 6px 0; display: flex; align-items: center; gap: 8px; }
.ap-box b, .sp-box b { color: #d84315; font-size: 15px; }
.st-row { display: flex; align-items: center; gap: 5px; padding: 3px 4px; border-bottom: 1px dotted #d3c4a2; }
.st-row span { width: 34px; font-weight: bold; } .st-row b { width: 36px; } .st-row small { flex: 1; color: #8a7a62; }
.st-row.main span { color: #d84315; } .st-row.sub span { color: #1e88e5; }

/* ------------------------------ Skills ------------------------------ */
.sk-list { max-height: 360px; }
.sk-row { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid #d3c4a2; border-radius: 6px; margin-bottom: 4px; background: #fffdf6; }
.sk-row.locked { opacity: .55; }
.sk-ic { width: 36px; height: 36px; border-radius: 5px; border: 1px solid #6f5a36; cursor: grab; image-rendering: pixelated; }
.sk-info { flex: 1; min-width: 0; } .sk-info small { color: #7a6a52; }
.sk-lv { font-size: 11px; color: #3d5486; font-weight: bold; } .sk-lv .req { color: #c62828; margin-left: 4px; }
.sk-desc { font-size: 10.5px; color: #5a4a32; }
.sk-btns { display: flex; flex-direction: column; gap: 3px; align-items: center; } .sk-btns select { font-size: 10px; padding: 1px; }

/* ------------------------------ Quests ------------------------------ */
.q-list { max-height: 380px; }
.q-card { border: 1px solid #d3c4a2; border-radius: 7px; padding: 7px; margin-bottom: 6px; background: #fffdf6; }
.q-card.ready { border-color: #43a047; box-shadow: 0 0 0 1px #43a047 inset; }
.q-head { display: flex; justify-content: space-between; align-items: center; }
.tag { font-size: 10px; padding: 1px 7px; border-radius: 9px; background: #ccc; color: #fff; font-weight: bold; }
.tag.active { background: #1e88e5; } .tag.ready { background: #43a047; } .tag.available { background: #f9a825; } .tag.done { background: #8d6e63; }
.q-text { font-size: 11px; color: #5a4a32; margin: 3px 0; } .q-rew { font-size: 10.5px; color: #6b4e16; margin: 3px 0; }
.mini-bar { position: relative; height: 14px; background: #3a3024; border-radius: 3px; overflow: hidden; margin: 3px 0; }
.mini-bar div { height: 100%; } .mini-bar span { position: absolute; inset: 0; font-size: 9.5px; color: #fff; text-align: center; line-height: 14px; font-weight: bold; text-shadow: 0 0 2px #000; }

/* ------------------------------- NPC ------------------------------- */
.npc-wrap { display: flex; gap: 10px; }
.npc-port { width: 104px; text-align: center; background: radial-gradient(#fff, #d9cfb8); border: 1px solid #b9a57f; border-radius: 8px; padding: 4px; flex-shrink: 0; align-self: flex-start; }
.npc-port b { display: block; } .npc-port small { font-size: 10px; color: #7a6a52; }
.npc-main { flex: 1; min-width: 0; }
.npc-text { background: #fff; border: 1px solid #d3c4a2; border-radius: 7px; padding: 8px; font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; }

/* ----------------------------- Shop / Market ----------------------------- */
.shop-wrap { display: flex; gap: 8px; } .shop-col { flex: 1; min-width: 0; }
.shop-list, .mk-list { max-height: 330px; }
.shop-row { display: flex; align-items: center; gap: 5px; padding: 3px 4px; border-bottom: 1px dotted #d3c4a2; }
.shop-row:hover { background: #fff6dc; }
.shop-row img { width: 30px; height: 30px; image-rendering: pixelated; }
.shop-row b { font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop-row small { font-size: 10px; color: #8a7a62; display: block; }
.price { font-weight: bold; color: #b06d00; font-size: 11px; white-space: nowrap; } .price::after { content: ' 🪙'; font-size: 9px; }
.dimrow { opacity: .5; }

/* ------------------------------ Cash shop ------------------------------ */
.cash-wrap { display: flex; gap: 10px; }
.cash-main { flex: 1; min-width: 0; }
.cash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; max-height: 360px; }
.cash-item { background: linear-gradient(#fff, #fde8f1); border: 1px solid #f3a6c8; border-radius: 8px; padding: 5px; text-align: center; font-size: 11px; }
.cash-item.trying { box-shadow: 0 0 0 2px var(--pink); }
.ci-img { background: radial-gradient(#fff, #fcd5e6); border-radius: 6px; cursor: pointer; padding: 4px; }
.ci-img img { width: 42px; height: 42px; image-rendering: pixelated; }
.cash-item b { display: block; font-size: 11px; margin-top: 2px; } .cash-item small { display: block; color: #a0607e; font-size: 10px; margin-bottom: 3px; }
.cash-side { width: 176px; text-align: center; background: radial-gradient(#fff, #fcd5e6); border: 1px solid #f3a6c8; border-radius: 9px; padding: 6px; }
.nx-box { margin-top: 8px; background: linear-gradient(#ff8fc4, #ff4f96); color: #fff; border-radius: 6px; padding: 5px; font-size: 14px; }
.salon { display: flex; gap: 10px; }

/* --------------------------- Party / Friends / Guild --------------------------- */
.party-bonus { background: #e8f5e9; border: 1px solid #81c784; border-radius: 6px; padding: 5px 8px; }
.pm-list, .fr-list { max-height: 240px; margin: 6px 0; }
.pm-row { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; align-items: center; padding: 5px; border: 1px solid #d3c4a2; border-radius: 6px; margin-bottom: 4px; background: #fffdf6; }
.pm-row small { grid-column: 1; color: #7a6a52; font-size: 10.5px; } .pm-row .mini-bar { grid-column: 1; height: 6px; } .pm-row button { grid-row: 1 / span 3; grid-column: 2; }
.pm-row.me { background: #fff7d6; border-color: #e0c46a; }
.fr-row { display: flex; align-items: center; gap: 5px; padding: 4px; border-bottom: 1px dotted #d3c4a2; }
.fr-row small { display: block; color: #7a6a52; font-size: 10.5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #9e9e9e; flex-shrink: 0; } .dot.on { background: #43a047; box-shadow: 0 0 5px #43a047; }
#party-inv, #g-inv { flex: 1; min-width: 0; } #fr-add, #g-notice { flex: 1; min-width: 0; } #g-name { width: 100%; }
.emblem { width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; border: 2px solid #fff; box-shadow: 0 0 0 1px #6b4e16, 0 2px 4px #0006; text-shadow: 0 1px 2px #000; }
.emblem.big { width: 50px; height: 50px; font-size: 28px; }
.g-head { display: flex; gap: 10px; align-items: center; } .g-name { font-size: 17px; display: block; } .g-head small { color: #7a6a52; }
.g-skills { display: flex; flex-wrap: wrap; }

/* ------------------------------ Menu ------------------------------ */
table.keys { width: 100%; border-collapse: collapse; font-size: 11.5px; } .keys td { padding: 2px 4px; border-bottom: 1px dotted #d3c4a2; }
kbd { background: #fff; border: 1px solid #a8946c; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 10.5px; font-family: var(--font); white-space: nowrap; }
.opt { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; }

/* ------------------------------ Tooltip ------------------------------ */
#tooltip { position: fixed; z-index: 99999; pointer-events: none; max-width: 270px; background: rgba(16,22,40,.96); color: #fff; border: 1px solid #8fa4d4; border-radius: 7px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; box-shadow: 0 4px 14px #000a; }
.tt-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } .tt-head img { width: 36px; height: 36px; image-rendering: pixelated; background: #fff2; border-radius: 5px; }
.tt-name { font-weight: bold; font-size: 13px; color: #fff; } .tt-sub { color: #b0bdd8; font-size: 10.5px; }
.tt-stats { margin: 4px 0; padding: 4px 0; border-top: 1px dashed #52648e; border-bottom: 1px dashed #52648e; }
.tt-desc { color: #ffe9a8; margin-top: 3px; } .tt-desc.next { color: #9fd6ff; }
.tt-price { color: #ffd54f; margin-top: 4px; font-size: 10.5px; } .tt-cmp { margin-top: 3px; font-size: 10.5px; }
.good { color: #69f0ae; } .bad { color: #ff8a80; }
#tooltip .r-rare-t { color: #64b5f6 !important; } #tooltip .r-epic-t { color: #ce93d8 !important; } #tooltip .r-legend-t { color: #ffb74d !important; }

/* ---------------------------- Death / Fade ---------------------------- */
#death { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 9000; }
.death-box { background: var(--panel); border: 3px solid #3d5486; border-radius: 12px; padding: 20px 30px; text-align: center; animation: pop .3s; }
.skull { font-size: 48px; } .death-box h2 { margin: 6px 0; } .death-box p { color: #6b5a42; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 50000; }
#fade.on { opacity: 1; }

/* ------------------------------ Touch ------------------------------ */
#touch { position: absolute; left: 0; right: 0; bottom: 86px; height: 150px; pointer-events: none !important; }
#touch button { pointer-events: auto; position: absolute; border-radius: 50%; border: 2px solid #ffffffaa; background: rgba(30,45,80,.55); color: #fff; font-weight: bold; font-size: 16px; touch-action: none; }
#touch button.on { background: rgba(255,207,74,.7); }
.tpad button { width: 50px; height: 50px; } .tpad .tu { left: 62px; top: 0; } .tpad .tl { left: 10px; top: 50px; } .tpad .tr { left: 114px; top: 50px; } .tpad .td { left: 62px; top: 100px; }
.tact button { width: 44px; height: 44px; right: 0; }
.tact button:nth-child(1) { right: 180px; top: 0; } .tact button:nth-child(2) { right: 130px; top: 0; } .tact button:nth-child(3) { right: 80px; top: 0; } .tact button:nth-child(4) { right: 30px; top: 0; }
.tact .small { right: 190px !important; top: 60px !important; font-size: 11px !important; }
.tact .big { width: 62px !important; height: 62px !important; font-size: 24px !important; }
.tact .big:nth-of-type(6) { right: 100px !important; top: 60px !important; } .tact .big:nth-of-type(7) { right: 20px !important; top: 70px !important; }

/* ------------------------- Title / Create ------------------------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 20000; background: radial-gradient(ellipse at center, rgba(10,20,50,.25), rgba(5,8,20,.75)); }
.logo { text-align: center; color: #fff; animation: float 3s ease-in-out infinite alternate; }
@keyframes float { to { transform: translateY(-8px); } }
.logo-leaf { font-size: 54px; filter: drop-shadow(0 4px 6px #0008); }
.logo h1 { margin: 0; font-size: clamp(38px, 8vw, 78px); font-weight: 900; font-style: italic; letter-spacing: 3px; background: linear-gradient(#fffbe0, #ffd000 45%, #ff7a00); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #4a2000; filter: drop-shadow(0 5px 0 #3a1800) drop-shadow(0 0 20px #ff9d0088); line-height: 1; }
.logo h1 span { display: block; font-size: .42em; letter-spacing: 12px; -webkit-text-stroke: 1px #4a2000; }
.logo p { font-size: 15px; letter-spacing: 3px; text-shadow: 0 2px 4px #000; color: #e3f2fd; }
.title-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.big-btn { min-width: 280px; padding: 12px 24px; font-size: 18px; font-weight: 900; border-radius: 12px; border: 2px solid #fff; background: linear-gradient(#6f8fd6, #2c4585); color: #fff; box-shadow: 0 5px 0 #14234a, 0 8px 18px #0008; text-shadow: 0 2px 0 #0006; transition: transform .1s; }
.big-btn:hover { transform: translateY(-2px); } .big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #14234a; }
.big-btn.gold { background: linear-gradient(#ffe38a, #f29d12); color: #4a2600; text-shadow: 0 1px 0 #fff8; box-shadow: 0 5px 0 #8a4f00, 0 8px 18px #0008; }
.big-btn small { display: block; font-size: 11px; font-weight: normal; opacity: .85; }
.title-foot { position: absolute; bottom: 18px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px #000; text-align: center; padding: 0 12px; }
.create-box { background: var(--panel); border: 3px solid #3d5486; border-radius: 14px; padding: 14px 18px; width: min(860px, 96vw); max-height: 96vh; overflow-y: auto; box-shadow: 0 10px 40px #000a; }
.create-box h2 { margin: 0 0 8px; color: #2a3f6e; }
.create-grid { display: flex; gap: 16px; }
.create-left { width: 190px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.create-left .preview { background: radial-gradient(#fff, #d9cfb8); border: 1px solid #b9a57f; border-radius: 10px; }
.create-left input { font-size: 15px; padding: 7px; text-align: center; font-weight: bold; }
.create-right { flex: 1; min-width: 0; }
.cls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 330px; overflow-y: auto; padding-right: 4px; }
.cls-card { text-align: left; background: #fffdf6; border: 2px solid #d3c4a2; border-radius: 9px; padding: 7px; font-size: 11px; color: var(--ink); border-top: 5px solid var(--cc); }
.cls-card b { font-size: 14px; color: var(--cc); } .cls-card small { display: block; color: #7a6a52; } .cls-card p { margin: 4px 0; font-size: 10.5px; line-height: 1.35; } .cls-card em { font-size: 10px; color: #3d5486; font-style: normal; font-weight: bold; }
.cls-card.on { background: #fff7d6; border-color: var(--cc); box-shadow: 0 0 0 2px var(--cc); }
.c-stats { background: #eef3ff; border: 1px solid #9fb2dd; border-radius: 6px; padding: 6px 9px; margin-top: 6px; font-size: 11px; line-height: 1.5; }

@media (max-width: 900px) {
  #hud { height: 72px; gap: 5px; padding: 0 4px 10px; } .hud-left { min-width: 0; } .hud-id { display: none; }
  .hud-bars { width: 150px; } #hotbar { grid-template-columns: repeat(8, 28px); gap: 2px; }
  .hk { width: 28px; height: 28px; } .hk img { width: 24px; height: 24px; } .hk .cd { line-height: 28px; }
  .menu-grid { grid-template-columns: repeat(7, 22px); } .menu-grid button { width: 22px; height: 18px; font-size: 10px; }
  #chat { bottom: 80px; width: 46vw; } #chat-log { height: 70px; } #minimap { transform: scale(.8); transform-origin: 0 0; }
  .create-grid { flex-direction: column; align-items: center; } .cls-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { #hotbar { display: none; } .hud-bars { flex: 1; } #chat { display: none; } }

/* จอสัมผัส: ย้ายแชทไปมุมขวาบน ไม่ให้ทับปุ่มควบคุม */
body.touch #chat { display: flex !important; left: auto; right: 8px; top: 8px; bottom: auto; width: min(300px, 38vw); }
body.touch #chat-log { height: 54px; }
body.touch #buffs { top: auto; bottom: 230px; }
body.touch #log { bottom: 240px; }

/* ======================= MAJOR UPDATE: Hydra Expansion ======================= */
.auto-btn { background: linear-gradient(#5d6b8a, #2c3550); border: 1px solid #9fb2dd; border-radius: 7px; color: #cfd8ff; font-weight: 900; font-size: 10px; padding: 4px 6px; line-height: 1.1; }
.auto-btn.on { background: linear-gradient(#69f0ae, #00a152); color: #00290f; border-color: #fff; box-shadow: 0 0 12px #69f0ae; animation: glow 1s infinite alternate; }
#auto-status { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); background: rgba(0,60,30,.75); color: #b9f6ca; font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: 10px; pointer-events: none !important; white-space: nowrap; }
#auto-status:empty { display: none; }
.auto-big { width: 100%; padding: 10px; font-size: 15px; font-weight: 900; border-radius: 9px; border: 2px solid #fff; background: linear-gradient(#69f0ae, #00a152); color: #00290f; box-shadow: 0 3px 0 #00622f; }
.auto-big.on { background: linear-gradient(#ff8a80, #d50000); color: #fff; box-shadow: 0 3px 0 #7f0000; }
.auto-big small { font-weight: normal; opacity: .7; }
.auto-status { margin: 7px 0; padding: 5px 8px; background: #e8f5e9; border: 1px solid #81c784; border-radius: 6px; font-size: 12px; }
.auto-rate { background: #fff7d6; border: 1px solid #e0c46a; border-radius: 6px; padding: 5px 8px; font-size: 11.5px; line-height: 1.6; }
.auto-skills { max-height: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.auto-sk { display: flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; } .auto-sk img { width: 20px; height: 20px; border-radius: 3px; }
.kv input[type=range] { width: 150px; }
.tree-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.tree-wrap { position: relative; } #tree-cv { width: 100%; max-width: 520px; display: block; margin: 0 auto; border-radius: 10px; cursor: pointer; border: 2px solid #3d5486; }
.tree-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(5,8,20,.75); color: #fff; font-size: 18px; font-weight: bold; border-radius: 10px; text-align: center; }
.tree-lock small { font-size: 12px; color: #b3e5fc; font-weight: normal; }
.tt-grade { font-size: 11px; font-weight: bold; }
.tt-pot, .tt-set { margin-top: 5px; padding: 4px 6px; border: 1px solid; border-radius: 5px; background: rgba(255,255,255,.04); }
.tt-set .dim { color: #7a86a8; }
.br-label { grid-column: 1 / -1; font-weight: bold; color: #2a3f6e; font-size: 12px; margin-top: 4px; border-bottom: 1px dashed #9fb2dd; }
.offline { text-align: center; } .offline .kv { text-align: left; } .offline .btn { margin-top: 10px; }

/* ======================= MAJOR OVERHAUL v3: Online / Mobile / Admin ======================= */
/* ---- ช่องอุปกรณ์ใหม่ 8 ช่อง (พิเศษ + เครื่องประดับ) ---- */
.eq-acc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; justify-items: center; margin-top: 6px; padding: 5px; background: #f3ecdc; border: 1px dashed #b9a57f; border-radius: 8px; }
/* ---- Admin ---- */
.adm-warn { background: #ffe7e7; border: 1px solid #d86b6b; color: #8a2020; border-radius: 6px; padding: 5px 8px; font-size: 11px; margin-bottom: 6px; }
.adm-big { width: 100%; font-size: 16px; padding: 10px; margin-bottom: 6px; letter-spacing: 1px; }
.wrap { flex-wrap: wrap; } .num.wide { width: 70px; }
/* ---- Online ---- */
.net-status { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: #eef3ff; border: 1px solid #9fb2dd; font-size: 12px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #999; } .dot.on { background: #3fd46a; box-shadow: 0 0 6px #3fd46a; }
.net-guide { font-size: 11px; line-height: 1.5; background: #fffdf6; border: 1px solid #d3c4a2; border-radius: 6px; padding: 6px 9px; }
.net-guide code { background: #26324f; color: #cfe; padding: 0 4px; border-radius: 3px; }
/* ---- FPS ---- */
#fps { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font: bold 11px monospace; color: #7dff9a; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 4px; z-index: 30; pointer-events: none; }

/* ---- Mobile controls ---- */
#mobile-ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; touch-action: none; }
#mobile-ui button { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.joy { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: 96px; width: 150px; height: 150px; pointer-events: auto; touch-action: none; }
.joy-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(rgba(255,255,255,.08), rgba(255,255,255,.18)); border: 3px solid rgba(255,255,255,.35); }
.joy-knob { position: absolute; left: 45px; top: 45px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9fb6e8 60%, #4b6194); box-shadow: 0 3px 10px rgba(0,0,0,.5); transition: transform .05s; }
.mbtns { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: 88px; width: 290px; height: 250px; }
.mb { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); color: #fff; font-weight: 900; background: radial-gradient(circle at 35% 30%, rgba(120,150,220,.85), rgba(30,45,90,.85)); box-shadow: 0 3px 8px rgba(0,0,0,.45); padding: 0; overflow: hidden; }
.mb.on { transform: scale(.92); filter: brightness(1.4); }
.mb.atk { right: 0; bottom: 0; width: 92px; height: 92px; font-size: 38px; background: radial-gradient(circle at 35% 30%, rgba(255,140,110,.9), rgba(150,30,30,.9)); }
.mb.jump { right: 100px; bottom: 0; width: 70px; height: 70px; font-size: 28px; background: radial-gradient(circle at 35% 30%, rgba(130,230,150,.9), rgba(25,110,50,.9)); }
.mb.pick { right: 180px; bottom: 0; width: 52px; height: 52px; font-size: 12px; }
.mb.sk { width: 58px; height: 58px; }
.mb.sk img, .mb.pot img { width: 34px; height: 34px; image-rendering: pixelated; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mb.sk b { position: absolute; right: 8px; bottom: 3px; font-size: 10px; text-shadow: 0 0 3px #000; }
.mcd { position: absolute; inset: 0; border-radius: 50%; display: none; }
.mb.s0 { right: 6px; bottom: 102px; } .mb.s1 { right: 70px; bottom: 82px; } .mb.s2 { right: 134px; bottom: 72px; }
.mb.s3 { right: 6px; bottom: 166px; } .mb.s4 { right: 70px; bottom: 146px; } .mb.s5 { right: 134px; bottom: 136px; }
.mb.pot { width: 46px; height: 46px; } .mb.p0 { right: 204px; bottom: 60px; } .mb.p1 { right: 204px; bottom: 112px; }
.mb.pot span { position: absolute; bottom: 1px; left: 0; right: 0; font-size: 9px; text-shadow: 0 0 3px #000; }
.mtop { position: absolute; right: max(8px, env(safe-area-inset-right)); top: 8px; display: flex; flex-direction: row; gap: 6px; }
.mt { min-width: 46px; height: 40px; border-radius: 10px; border: 2px solid rgba(255,255,255,.5); background: rgba(20,30,60,.8); color: #fff; font-size: 18px; font-weight: bold; }
.mt[data-act=up] { font-size: 11px; } .mt.on { background: #2f9e57; box-shadow: 0 0 8px #3fd46a; }
.mmenu { position: absolute; right: 8px; top: 56px; max-height: calc(100% - 70px); overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; background: rgba(10,16,34,.92); border: 2px solid #6f86b8; border-radius: 10px; padding: 8px; pointer-events: auto; }
.mmenu button { font-size: 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid #6f86b8; background: linear-gradient(#3b5288, #1d2b4d); color: #fff; text-align: left; }
.mmenu.hidden { display: none !important; }
/* เมื่ออยู่โหมดมือถือ: ซ่อนฮอตบาร์ PC, ย้ายแชทขึ้นบน, ขยายหน้าต่าง */
body.m-mobile #hotbar, body.m-mobile .menu-grid, body.m-mobile .cashbtn { display: none !important; }
body.m-mobile #chat { display: flex !important; left: 50%; transform: translateX(-50%); right: auto; top: 6px; bottom: auto; width: min(340px, 40vw); opacity: .85; }
body.m-mobile #chat-log { height: 48px; font-size: 10.5px; }
body.m-mobile .win { max-width: 96vw; max-height: 86vh; }
body.m-mobile #buffs { top: auto; bottom: 250px; left: 180px; }
body.m-mobile #log { bottom: 260px; }
@media (max-height: 460px) { .joy { bottom: 70px; width: 124px; height: 124px; } .joy-knob { left: 34px; top: 34px; width: 56px; height: 56px; } .mbtns { bottom: 70px; transform: scale(.82); transform-origin: 100% 100%; } }