/* ============================================================
ThaiNative – UI Style (ธีมรักลงลายทอง)
============================================================ */
:root {
--bg: #0d0714;
--panel: rgba(29, 18, 40, 0.94);
--panel-2: #2a1b3a;
--gold: #d4af37;
--gold-soft: #f3d98b;
--text: #f6ecd9;
--muted: #d2c6de;
--red: #c0392b;
--hp: #e74c3c;
--mp: #3498db;
--exp: #f1c40f;
--ok: #27ae60;
}
* { box-sizing: border-box; }
html, body {
margin: 0; height: 100%; background: var(--bg); color: var(--text);
font-family: 'Mitr', 'Tahoma', sans-serif; overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
/* ---------- Layout: canvas 16:9 + UI overlay ---------- */
#game-wrap {
position: absolute; inset: 0; margin: auto; z-index: 1;
width: min(100vw, calc(100vh * 16 / 9));
height: min(100vh, calc(100vw * 9 / 16));
container-type: size;
}
#game { width: 100%; height: 100%; }
#game canvas { display: block; image-rendering: pixelated; }
#ui { position: absolute; inset: 0; pointer-events: none; font-size: 2.85cqh; }
#ui > * { pointer-events: auto; }
#hud { pointer-events: none !important; }
#hud * { pointer-events: auto; }
/* ---------- Panel ---------- */
.panel {
background: var(--panel);
border: 2px solid var(--gold);
border-radius: 10px;
box-shadow: 0 0 0 3px rgba(0,0,0,.4), inset 0 0 18px rgba(212,175,55,.12);
padding: 1em;
}
.window {
position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
width: 34em; max-width: 92%; max-height: 84%; overflow: auto;
}
.window.wide { width: 44em; }
.window header {
display: flex; justify-content: space-between; align-items: center;
font-size: 1.2em; color: var(--gold-soft); border-bottom: 1px solid rgba(212,175,55,.4);
padding-bottom: .4em; margin-bottom: .6em;
}
.close { background: none; border: none; color: var(--muted); font-size: 1em; }
.close:hover { color: #fff; }
.btn { border: 2px solid var(--gold); border-radius: 8px; padding: .45em 1.2em; font-size: 1em; }
.btn.primary { background: linear-gradient(#b3261e, #7b1d17); color: #fff; }
.btn.primary:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; color: var(--gold-soft); }
.btn.link { background: none; border: none; color: var(--gold-soft); text-decoration: underline; margin-top: .5em; }
/* ---------- Character creation ---------- */
#create-screen { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: stretch; gap: 2%; padding: 2.5% 3%; }
.create-left { display: flex; flex-direction: column; justify-content: space-between; width: 45%; }
.logo { margin: 0; font-size: 2.4em; color: var(--gold); text-shadow: 0 3px 0 #5b1a14, 0 0 12px rgba(212,175,55,.5); line-height: 1; }
.logo .logo-online { color: var(--text); font-size: .7em; letter-spacing: .08em; vertical-align: middle; text-shadow: 0 2px 0 #5b1a14; }
.logo small { display: block; font-size: .45em; color: var(--text); letter-spacing: .1em; margin-top: .3em; }
.preview-anims { display: flex; gap: .3em; justify-content: center; }
.preview-anims button, .seg button, .picker button, .hud-buttons button, .tabs button {
background: var(--panel-2); color: var(--text); border: 1px solid rgba(212,175,55,.5);
border-radius: 6px; padding: .25em .7em; font-size: .9em;
}
.preview-anims button.active, .seg button.active, .tabs button.active { background: var(--gold); color: #2a1b3a; }
.create-panel { width: 50%; overflow: auto; display: flex; flex-direction: column; gap: .5em; }
.field { display: flex; flex-direction: column; gap: .2em; color: var(--muted); }
.field input, #chat-input {
font-family: inherit; font-size: 1em; padding: .35em .6em; border-radius: 6px;
background: #140b1d; color: var(--text); border: 1px solid rgba(212,175,55,.5);
}
.row { display: flex; align-items: center; gap: .5em; }
.label { color: var(--muted); min-width: 4.5em; }
.picker .val { flex: 1; text-align: center; background: #140b1d; border-radius: 6px; padding: .2em; }
.jobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.job {
background: var(--panel-2); color: var(--text); border: 2px solid transparent; border-radius: 8px;
padding: .35em .2em; font-size: .9em; text-align: center;
}
.job b { display: block; font-size: 1.4em; }
.job.active { border-color: var(--gold); background: #3d2757; }
.job-desc { color: var(--muted); font-size: .85em; min-height: 2.6em; }
.cc-actions { display: flex; justify-content: space-between; margin-top: auto; }
/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; }
.hud-frame, .pf, .target, .zone, .minimap, .actionbar .slot, .pf .gold {
background: linear-gradient(180deg, rgba(43,27,58,.95), rgba(20,11,29,.95));
border: 2px solid var(--gold); border-radius: 10px;
box-shadow: 0 0 0 2px rgba(0,0,0,.55), inset 0 0 10px rgba(212,175,55,.15);
}
/* กรอบผู้เล่น */
.pf { position: absolute; top: 2%; left: 1.2%; display: flex; gap: .5em; padding: .35em .55em .4em .35em; width: 19em; }
.pf-portrait { position: relative; width: 3.6em; height: 3.6em; flex: none; border-radius: 50%; border: 2px solid var(--gold);
background: radial-gradient(circle at 50% 35%, #5b3a7a, #1b1028); overflow: hidden; }
.pf-portrait canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.pf-portrait-wrap { position: relative; flex: none; align-self: center; }
.pf-lv { position: absolute; bottom: -.3em; left: 50%; transform: translateX(-50%); min-width: 1.6em; text-align: center; z-index: 1;
background: linear-gradient(180deg, #c0392b, #7b1d14); color: #fff; font-size: .72em; font-weight: 600; line-height: 1.35;
border: 1px solid var(--gold); border-radius: 8px; padding: 0 .35em; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pf-nm { display: flex; align-items: baseline; gap: .35em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-tag { font-size: .8em; color: #2a1b3a; background: linear-gradient(180deg, #f7dc6f, #d4ac0d); border-radius: 4px; padding: 0 .35em; font-weight: 600; }
.lv-tag b { font-weight: 700; }
.lv-tag.up { animation: lvup 1.2s ease-out; }
@keyframes lvup { 0% { transform: scale(1.6); filter: brightness(2); } 100% { transform: scale(1); filter: none; } }
.pf-info { flex: 1; min-width: 0; }
.pf-name { display: flex; justify-content: space-between; align-items: center; font-size: .85em; margin-bottom: .15em; white-space: nowrap; }
.job-tag { font-size: .8em; padding: 0 .45em; border-radius: 4px; background: #3d2757; color: var(--gold-soft); }
.bar { position: relative; height: 1em; background: #0c0612; border: 1px solid rgba(0,0,0,.6); border-radius: 5px; margin: .15em 0; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; transition: width .15s; }
.bar i::after { content: ''; position: absolute; inset: 0 0 50% 0; background: rgba(255,255,255,.18); }
.bar.hp i { background: linear-gradient(90deg, #a93226, #ff6b5b); }
.bar.mp i { background: linear-gradient(90deg, #1f618d, #6fb8ec); }
.bar span { position: absolute; inset: 0; font-size: .76em; line-height: 1.5em; text-align: center; text-shadow: 0 1px 2px #000; }
.buffs { display: flex; gap: .25em; margin-top: .2em; min-height: 1.3em; }
.buff { position: relative; font-size: .8em; background: #3d2757; border: 1px solid var(--gold); border-radius: 4px; padding: 0 .2em; }
.buff small { font-size: .78em; color: var(--gold-soft); margin-left: .1em; }
/* เป้าหมาย */
.target { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); width: 15em; padding: .25em .6em .35em; text-align: center; }
.t-name { font-size: .8em; color: #f5b7b1; }
.t-name span { color: var(--gold-soft); font-size: .85em; }
/* ขวาบน */
.hud-right { position: absolute; top: 2%; right: 1.2%; width: 15em; display: flex; flex-direction: column; gap: .3em; align-items: stretch; }
.zone { display: flex; justify-content: space-between; align-items: center; padding: .15em .6em; font-size: .8em; }
.zone b { color: var(--gold-soft); font-weight: 600; }
.net { font-size: .9em; } .net.on { color: #58d68d; } .net.off { color: #aaa; }
.minimap { position: relative; height: 1.4em; overflow: hidden; }
.mm-town { position: absolute; left: 0; top: 0; bottom: 0; width: 17.9%; background: rgba(88,214,141,.18); border-right: 1px dashed rgba(88,214,141,.6); }
.mm-dot { position: absolute; top: 50%; width: .4em; height: .4em; margin: -.2em 0 0 -.2em; border-radius: 50%; }
.mm-dot.me { width: .6em; height: .6em; margin: -.3em 0 0 -.3em; background: var(--gold); box-shadow: 0 0 4px var(--gold); z-index: 2; }
.mm-dot.ally { background: #5dade2; }
.mm-dot.mob { background: #e74c3c; opacity: .75; }
.mm-dot.npc { background: #58d68d; }
.hud-buttons { display: flex; gap: .3em; justify-content: flex-end; }
.hud-buttons button { position: relative; width: 2.5em; height: 2.5em; padding: 0; font-size: .9em; display: grid; place-items: center;
background: radial-gradient(circle at 50% 35%, #4a2f66, #1d1228 75%); color: var(--text);
border: 2px solid var(--gold); border-radius: 9px; box-shadow: 0 2px 0 #5b1a14, inset 0 0 6px rgba(212,175,55,.25); transition: transform .08s, filter .12s; }
.hud-buttons button small { position: absolute; bottom: -.35em; right: -.3em; font-size: .56em; font-weight: 600; line-height: 1.3; padding: 0 .3em;
color: #2a1b3a; background: linear-gradient(180deg, #f7dc6f, #d4ac0d); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hud-buttons button:hover { filter: brightness(1.25); transform: translateY(-1px); }
.hud-buttons button:active { transform: translateY(1px); }
/* แถบแอ็กชัน */
.actionbar { position: absolute; bottom: 2.2%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .25em; }
/* เงิน: ป้ายเล็กเกาะขอบล่างขวาของกรอบผู้เล่น (ย้ายมาจากเหนือแถบสกิล เพราะบังตัวละคร) */
.pf .gold { position: absolute; left: 4.6em; bottom: -.9em; font-size: .76em; line-height: 1.55; padding: 0 .7em; color: var(--gold-soft); border-radius: 12px; white-space: nowrap; }
.slots { display: flex; gap: .3em; align-items: flex-end; }
#skillbar { display: flex; gap: .3em; }
.slot, .skill { position: relative; width: 3.1em; height: 3.1em; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slot .ic, .skill .ic { font-size: 1.35em; }
.slot .k, .skill .k { position: absolute; top: 1px; left: 4px; font-size: .7em; font-weight: 600; color: var(--gold-soft); }
.slot .n { position: absolute; bottom: 1px; right: 4px; font-size: .7em; }
/* ปุ่ม Auto Skill */
.auto-skill { cursor: pointer; font: inherit; color: #cfc3a8; background: linear-gradient(180deg, rgba(40,40,52,.92), rgba(16,14,22,.95)); border: 2px solid #6b6252; border-radius: 10px; box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.auto-skill .ic { filter: grayscale(1) brightness(.8); }
.auto-skill .lbl { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: .5em; font-weight: 700; letter-spacing: .05em; }
.auto-skill.on { color: #fff3c4; border-color: #ffd35c; background: linear-gradient(180deg, rgba(120,84,20,.95), rgba(58,34,6,.95)); box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 12px rgba(255,211,92,.75); animation: autoPulse 1.6s ease-in-out infinite; }
.auto-skill.on .ic { filter: none; }
@keyframes autoPulse { 50% { box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 20px rgba(255,211,92,1); } }
.skill { background: linear-gradient(180deg, rgba(61,39,87,.95), rgba(20,11,29,.95)); border: 2px solid var(--gold); border-radius: 10px;
box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.skill .mp { position: absolute; bottom: 1px; right: 4px; font-size: .55em; color: #85c1e9; }
.skill .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.65); height: 0; }
.skill .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8em; font-weight: 600; text-shadow: 0 1px 2px #000; }
.skill.locked { filter: grayscale(1); opacity: .5; }
.skill.nomp { border-color: #5d6d7e; }
.skill.ready { animation: ready .4s; }
@keyframes ready { 50% { box-shadow: 0 0 10px 2px var(--gold); } }
.skill .tip { display: none; }
.skill:hover { overflow: visible; }
.skill:hover .tip { display: block; position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%); width: 15em; background: var(--panel);
border: 1px solid var(--gold); border-radius: 6px; padding: .4em; font-size: .78em; z-index: 5; }
/* แถบ EXP เต็มความกว้าง */
.expbar { position: absolute; left: 0; right: 0; bottom: 0; height: 1.6%; min-height: 5px; background: rgba(0,0,0,.7); border-top: 1px solid rgba(212,175,55,.5); }
.expbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b7950b, #f7dc6f); transition: width .3s; }
.expbar span { position: absolute; right: .6em; bottom: 110%; font-size: .7em; color: var(--gold-soft); text-shadow: 0 1px 2px #000; }
.prompt { position: absolute; top: 60%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); border: 1px solid var(--gold);
padding: .2em .9em; border-radius: 14px; color: var(--gold-soft); font-size: .85em; }
.banner { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); font-size: 1.6em; font-weight: 600; color: var(--gold);
text-shadow: 0 3px 0 #5b1a14, 0 0 14px rgba(212,175,55,.7); white-space: nowrap; pointer-events: none !important; animation: banner 2.2s forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 15%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }
.death { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(60,0,0,.35), rgba(0,0,0,.75)); }
.death h2 { margin: 0; font-size: 2em; color: #e74c3c; text-shadow: 0 3px 0 #000; }
.death p { color: var(--muted); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: .5em 1em; font-size: .9em; }
kbd { display: inline-block; min-width: 1.6em; text-align: center; padding: 0 .3em; margin-right: .2em; border: 1px solid var(--gold);
border-bottom-width: 3px; border-radius: 4px; background: #2a1b3a; font-family: inherit; font-size: .85em; }
/* ---------- Stats ---------- */
.points { margin-bottom: .5em; color: var(--gold-soft); }
.stat-row { display: grid; grid-template-columns: 3.2em 1fr 2.5em 2em; align-items: center; gap: .4em; padding: .25em 0; border-bottom: 1px dashed rgba(212,175,55,.2); }
.stat-row .k { font-weight: 600; color: var(--gold); }
.stat-row .d { font-size: .8em; color: var(--muted); }
.stat-row .v { text-align: right; }
.stat-row button { background: var(--ok); color: #fff; border: none; border-radius: 4px; height: 1.6em; }
.stat-row button:disabled { background: #555; cursor: default; }
.derived { display: grid; grid-template-columns: 1fr 1fr; gap: .2em 1em; margin-top: .7em; font-size: .85em; }
.derived div { display: flex; justify-content: space-between; }
.derived b { color: var(--gold-soft); font-weight: 400; }
/* ---------- Items ---------- */
.equip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-bottom: .6em; }
.equip .eq { background: #140b1d; border: 1px dashed rgba(212,175,55,.4); border-radius: 6px; padding: .3em; font-size: .8em; min-height: 3em; }
.equip .eq small { color: var(--muted); display: block; }
.item-list { display: flex; flex-direction: column; gap: .3em; }
.item { display: grid; grid-template-columns: 1.8em 1fr auto auto; gap: .5em; align-items: center; background: #140b1d; padding: .3em .5em; border-radius: 6px; }
.item .ic { font-size: 1.3em; }
.item .meta { font-size: .72em; color: var(--muted); }
.item .price { color: var(--gold-soft); font-size: .85em; }
.item button { background: var(--panel-2); color: var(--text); border: 1px solid var(--gold); border-radius: 5px; font-size: .8em; padding: .15em .6em; }
.item button:disabled { opacity: .4; cursor: default; }
.greet { color: var(--muted); font-style: italic; margin: 0 0 .5em; }
.tabs { display: flex; gap: .3em; margin-bottom: .4em; }
.shop-gold { text-align: right; color: var(--gold-soft); font-size: .9em; margin-bottom: .4em; }
.empty { color: var(--muted); text-align: center; padding: 1em; }
/* ---------- Chat ---------- */
#chat { position: absolute; left: 1.5%; bottom: 3%; width: 24em; font-size: .8em; }
#chat-log { max-height: 8em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-shadow: 0 1px 2px #000; }
#chat-log div { background: rgba(0,0,0,.35); margin-top: 2px; padding: 0 .4em; border-radius: 3px; }
#chat-log b { color: var(--gold-soft); }
#chat-input { width: 100%; margin-top: .3em; opacity: .6; }
#chat-input:focus { opacity: 1; outline: 1px solid var(--gold); }
/* ---------- Toast ---------- */
#toasts { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3em; pointer-events: none !important; }
.toast { background: rgba(20,11,29,.9); border: 1px solid var(--gold); padding: .25em 1em; border-radius: 20px; font-size: .85em; animation: toast 2.4s forwards; }
.toast.warn { border-color: var(--red); }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* ---------- Skill Tree (K) ---------- */
.window .sp { display: flex; align-items: center; gap: .6em; font-size: .9em; color: var(--gold-soft); }
.window .sp b { font-size: 1.2em; color: #58d68d; }
.hint { font-size: .72em; color: var(--muted); margin: 0 0 .6em; }
.sk-tree { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5em; position: relative; }
.sk-tree::before { content: ''; position: absolute; left: 8%; right: 8%; top: 2.4em; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .5; z-index: 0; }
.sk-card { position: relative; z-index: 1; background: #140b1d; border: 1px solid rgba(212,175,55,.45); border-radius: 10px; padding: .45em .4em; display: flex; flex-direction: column; align-items: center; gap: .25em; text-align: center; }
.sk-card.ult { border-color: #e74c3c; box-shadow: 0 0 8px rgba(231,76,60,.35); }
.sk-card.locked { opacity: .55; }
.sk-icon { width: 2.8em; height: 2.8em; font-size: 1.4em; display: flex; align-items: center; justify-content: center; border-radius: 10px;
background: radial-gradient(circle, #5b3a7a, #1b1028); border: 2px solid var(--gold); cursor: grab; user-select: none; }
.sk-card.locked .sk-icon, .sk-card.unlearned .sk-icon { filter: grayscale(.8); cursor: not-allowed; }
.sk-name { font-size: .8em; font-weight: 600; }
.sk-lv { font-size: .78em; color: var(--gold-soft); }
.sk-pips { display: flex; gap: 2px; } .sk-pips i { width: .5em; height: .5em; border-radius: 50%; background: #3a2a4a; } .sk-pips i.on { background: var(--gold); }
.sk-stat { font-size: .72em; color: var(--muted); line-height: 1.35; min-height: 3.9em; }
.sk-desc { font-size: .72em; color: var(--text); min-height: 2.6em; }
.sk-up { background: #1e8449; color: #fff; border: none; border-radius: 6px; font-size: .8em; padding: .1em .7em; }
.sk-up:disabled { background: #555; cursor: default; }
.sk-req { font-size: .7em; color: #f1948a; min-height: 1.2em; }
.sk-assign { display: flex; gap: 2px; } .sk-assign button { font-size: .7em; width: 1.9em; padding: .1em 0; background: #2a1b3a; color: var(--gold-soft); border: 1px solid rgba(212,175,55,.5); border-radius: 4px; }
.sk-assign button.on { background: var(--gold); color: #2a1b3a; }
.sk-hotbar-wrap { display: flex; align-items: center; gap: .8em; margin-top: .8em; padding-top: .6em; border-top: 1px dashed rgba(212,175,55,.35); font-size: .85em; color: var(--muted); }
.sk-hotbar { display: flex; gap: .4em; }
.hb-slot { position: relative; width: 3em; height: 3em; border: 2px dashed rgba(212,175,55,.6); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; background: #140b1d; }
.hb-slot .k { position: absolute; top: 1px; left: 4px; font-size: .45em; color: var(--gold-soft); font-weight: 600; }
.hb-slot.filled { border-style: solid; }
.drop-over { outline: 2px solid #58d68d; outline-offset: 2px; background: #1c3a2a !important; }
/* ---------- แผนที่โลก (M) ---------- */
.world-map { position: relative; height: 13em; border-radius: 10px; overflow: hidden; border: 1px solid rgba(212,175,55,.5);
background: linear-gradient(180deg, #1b1036 0%, #5b2a5e 55%, #d9735b 85%, #4f8a3a 86%, #6e4b2a 100%); }
.wm-zone { position: absolute; top: 0; bottom: 14%; border-right: 1px dashed rgba(255,255,255,.18); display: flex; flex-direction: column; justify-content: flex-start; padding: .3em .25em; font-size: .7em; color: #fdebd0; text-shadow: 0 1px 2px #000; }
.wm-zone b { font-size: 1.2em; color: var(--gold-soft); }
.wm-zone.town { background: rgba(88,214,141,.14); }
.wm-plat { position: absolute; height: 3px; background: #b07a45; }
.wm-pin { position: absolute; transform: translate(-50%, -100%); font-size: .95em; filter: drop-shadow(0 1px 1px #000); }
.wm-dot { position: absolute; width: .55em; height: .55em; margin: -.27em 0 0 -.27em; border-radius: 50%; }
.wm-dot.me { width: .9em; height: .9em; margin: -.45em 0 0 -.45em; background: var(--gold); box-shadow: 0 0 8px var(--gold); z-index: 3; animation: pulse 1s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 2px var(--gold); } }
.wm-dot.ally { background: #5dade2; z-index: 2; } .wm-dot.mob { background: #e74c3c; opacity: .8; }
.map-legend { display: flex; gap: 1.2em; font-size: .8em; margin-top: .5em; color: var(--muted); }
.lg { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .3em; vertical-align: middle; }
.lg.me { background: var(--gold); } .lg.ally { background: #5dade2; } .lg.npc { background: #58d68d; } .lg.mob { background: #e74c3c; }
/* ---------- ตั้งค่า (ESC) ---------- */
.set-group { background: #140b1d; border-radius: 8px; padding: .4em .7em; margin-bottom: .6em; }
.set-row { display: grid; grid-template-columns: 11em 1fr 2.5em; align-items: center; gap: .6em; padding: .35em 0; font-size: .9em; }
.set-row label { display: flex; align-items: center; gap: .4em; cursor: pointer; }
.set-row input[type=range] { accent-color: var(--gold); width: 100%; }
.set-row input[type=checkbox] { accent-color: var(--gold); width: 1.1em; height: 1.1em; }
.set-row.foot { display: flex; justify-content: flex-end; }
.skill.empty .ic { opacity: .25; }
/* ============================================================
ระบบ MMO: ปาร์ตี้ · เทรด · เรดบอส
============================================================ */
.mm-arena { position: absolute; right: 0; top: 0; bottom: 0; width: 11.6%; background: rgba(142,68,173,.25); border-left: 1px dashed rgba(187,143,206,.7); }
.mm-dot.boss { width: .7em; height: .7em; margin: -.35em 0 0 -.35em; background: #bb8fce; box-shadow: 0 0 6px #8e44ad; }
.wm-zone.boss { background: rgba(142,68,173,.2); }
.wm-dot.boss { width: 1em; height: 1em; margin: -.5em 0 0 -.5em; background: #bb8fce; box-shadow: 0 0 10px #8e44ad; z-index: 2; }
/* กรอบสมาชิกปาร์ตี้ */
.party-frames { position: absolute; top: 19%; left: 1.2%; display: flex; flex-direction: column; gap: .25em; width: 12em; }
.party-frames .pm { display: flex; gap: .35em; align-items: center; background: var(--panel); border: 1px solid rgba(212,175,55,.55); border-radius: 6px; padding: .2em .4em; }
.party-frames .pm.far { opacity: .55; }
.party-frames .pm-job { font-size: 1.1em; }
.party-frames .pm > div { flex: 1; min-width: 0; }
.party-frames .pm-name { font-size: .78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #82e0aa; }
.party-frames .pm-name small { color: var(--muted); }
.bar.mini { height: .45em; margin: .1em 0 0; }
#chat-log .party-msg b, #chat-log .party-msg { color: #82e0aa; }
/* แถบเรดบอส */
.boss-bar { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); width: 22em; max-width: 40%; text-align: center;
background: linear-gradient(rgba(40,10,30,.92), rgba(20,6,18,.92)); border: 2px solid #8e44ad; border-radius: 8px; padding: .25em .6em .4em; box-shadow: 0 0 14px rgba(142,68,173,.6); }
.bb-name { display: flex; justify-content: center; gap: .6em; font-size: .85em; color: #f5b7b1; }
.bb-name span { color: #f39c12; animation: pulse .5s infinite alternate; }
.bar.boss { height: 1.1em; }
.bar.boss i { background: linear-gradient(90deg, #6c3483, #c0392b, #f39c12); }
/* กล่องคำเชิญ */
.invite-box { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); z-index: 30; min-width: 18em; text-align: center;
background: var(--panel); border: 2px solid var(--gold); border-radius: 10px; padding: .7em 1em .9em; box-shadow: 0 6px 24px rgba(0,0,0,.6); overflow: hidden; }
.invite-box p { margin: 0 0 .6em; } .invite-box b { color: var(--gold-soft); }
.invite-box div { display: flex; gap: .6em; justify-content: center; }
.invite-box i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); width: 100%; }
/* เมนูผู้เล่น */
.player-menu { position: absolute; z-index: 25; display: flex; flex-direction: column; gap: .2em; min-width: 10em;
background: var(--panel); border: 1px solid var(--gold); border-radius: 8px; padding: .4em; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
.player-menu b { font-size: .8em; color: var(--gold-soft); padding: 0 .2em .2em; border-bottom: 1px solid rgba(212,175,55,.3); }
.player-menu button { background: none; border: none; color: var(--text); text-align: left; padding: .25em .4em; border-radius: 4px; font-size: .85em; cursor: pointer; }
.player-menu button:hover:not(:disabled) { background: rgba(212,175,55,.2); }
.player-menu button:disabled { opacity: .4; cursor: default; }
/* หน้าต่างปาร์ตี้ (P) */
.soc-sec h4 { margin: .3em 0; color: var(--gold-soft); font-weight: 500; }
.soc-row { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .25em .3em; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .85em; }
.soc-row small { color: var(--muted); } .soc-row .ok { color: #82e0aa; }
.btn.sm { padding: .15em .6em; font-size: .78em; border-width: 1px; }
.empty { color: var(--muted); font-size: .8em; margin: .3em 0; }
/* เทรด */
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.tr-col { background: rgba(0,0,0,.25); border: 1px solid rgba(212,175,55,.3); border-radius: 8px; padding: .4em .6em; }
.tr-col h4 { margin: 0 0 .3em; font-size: .9em; color: var(--gold-soft); font-weight: 500; }
.tr-col h5 { margin: .5em 0 .2em; font-size: .72em; color: var(--muted); font-weight: 400; }
.tr-status { font-size: .8em; } .tr-status .ok { color: #82e0aa; } .tr-status .lock { color: #f5b041; } .tr-status i { color: var(--muted); }
.tr-offer { min-height: 3.2em; display: flex; flex-wrap: wrap; gap: .3em; }
.tr-inv { display: flex; flex-wrap: wrap; gap: .25em; max-height: 7em; overflow: auto; }
.tr-inv.disabled { opacity: .5; pointer-events: none; }
.tr-item { position: relative; display: flex; align-items: center; gap: .25em; background: #1a1024; border: 1px solid rgba(212,175,55,.35); border-radius: 6px; padding: .15em .35em; font-size: .9em; cursor: pointer; }
.tr-item small { font-size: .65em; color: var(--gold-soft); }
.tr-item span { font-size: .65em; color: var(--muted); max-width: 7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-item.used { opacity: .35; cursor: default; }
.tr-item:hover { border-color: var(--gold); }
.tr-gold { margin-top: .4em; font-size: .85em; color: var(--gold-soft); }
.tr-gold input { width: 8em; background: #120a1a; color: var(--text); border: 1px solid rgba(212,175,55,.5); border-radius: 4px; padding: .1em .3em; }
.tr-actions { display: flex; gap: .6em; justify-content: center; margin-top: .7em; }
.tr-actions .btn:disabled { opacity: .45; cursor: default; }
.close-trade { background: none; border: none; color: var(--gold-soft); font-size: 1em; cursor: pointer; }
/* ============================================================
เวลาในเกม · เซียมซี · ศาลพระภูมิ · อีเวนต์ผีห่า
============================================================ */
.clock { text-align: right; font-size: .78em; color: var(--gold-soft); text-shadow: 0 1px 2px #000; margin: -.1em .3em .15em 0; }
.ss-wrap { display: flex; gap: 1.2em; align-items: center; justify-content: center; margin: .4em 0 .8em; }
.ss-tube { position: relative; width: 4.2em; height: 6.4em; border-radius: .6em .6em .9em .9em; background: linear-gradient(90deg, #7b241c, #c0392b 40%, #922b21);
border: 2px solid var(--gold); display: flex; align-items: flex-end; justify-content: center; padding-bottom: .5em; transform-origin: 50% 100%; }
.ss-tube span { font-size: .72em; color: var(--gold-soft); writing-mode: vertical-rl; margin-bottom: .6em; }
.ss-tube i { position: absolute; top: -1.4em; width: .32em; height: 2.2em; background: #f5cba7; border: 1px solid #a04000; border-radius: 2px; }
.ss-tube i:nth-child(1) { left: .8em; transform: rotate(-12deg); } .ss-tube i:nth-child(2) { left: 1.4em; transform: rotate(-4deg); }
.ss-tube i:nth-child(3) { left: 2em; } .ss-tube i:nth-child(4) { left: 2.6em; transform: rotate(5deg); } .ss-tube i:nth-child(5) { left: 3.2em; transform: rotate(12deg); }
.ss-tube.shaking { animation: ssShake .16s ease-in-out infinite alternate; }
@keyframes ssShake { from { transform: rotate(-16deg) translateY(-2px); } to { transform: rotate(16deg) translateY(2px); } }
.ss-side { display: flex; flex-direction: column; gap: .4em; max-width: 14em; }
.ss-card { margin: 0 auto; max-width: 24em; text-align: center; background: #fdf2e9; color: #4a2511; border: 3px double #b9770e; border-radius: 6px; padding: .6em .9em; box-shadow: 0 4px 14px rgba(0,0,0,.5); animation: ssIn .5s ease-out; }
@keyframes ssIn { from { transform: translateY(-14px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ss-no { font-size: .8em; color: #7e5109; } .ss-luck { font-size: 1.5em; font-weight: 600; color: #b03a2e; }
.ss-card.best .ss-luck, .ss-card.great .ss-luck { color: #b7950b; text-shadow: 0 0 6px rgba(241,196,15,.6); }
.ss-card.bad .ss-luck { color: #5d6d7e; }
.ss-text { margin: .4em 0; font-size: .9em; line-height: 1.5; }
.ss-mods { font-size: .78em; color: #1e8449; font-weight: 600; } .ss-card.bad .ss-mods { color: #922b21; }
.ss-advice { margin-top: .35em; font-size: .8em; color: #6e2c00; }
.shrine-row { display: flex; align-items: center; gap: .6em; padding: .35em .2em; border-bottom: 1px solid rgba(255,255,255,.07); }
.shrine-row .ic { font-size: 1.5em; } .shrine-row > div { flex: 1; } .shrine-row small { color: var(--muted); }
.shrine-h { margin: .6em 0 .2em; color: var(--gold-soft); font-weight: 500; font-size: .9em; }
.shrine-active div { font-size: .82em; padding: .15em 0; } .shrine-active small { color: #82e0aa; }
.buff.bless { background: #1d4d33; border-color: #82e0aa; }
/* ---------- หมู่บ้าน: ตกปลา / เควส / ตีบวก ---------- */
.mm-town.river { background: rgba(93,173,226,.25); border-right-color: rgba(133,193,233,.7); }
.mm-dot.gate { background: #76d7c4; box-shadow: 0 0 4px #48c9b0; }
.fish-ui { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); width: 34%; text-align: center;
background: rgba(10,20,30,.78); border: 2px solid #5dade2; border-radius: 10px; padding: .4em .8em .6em; }
.fish-ui p { margin: 0 0 .3em; font-size: .85em; color: #d6eaf8; text-shadow: 0 1px 2px #000; }
.fish-bar { position: relative; height: 1.1em; background: #1b2631; border: 1px solid #85929e; border-radius: 6px; overflow: hidden; }
.fish-bar i { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg,#58d68d,#239b56); }
.fish-bar b { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #f7dc6f; box-shadow: 0 0 6px #f1c40f; }
.quest-track { position: absolute; right: .6em; top: 22%; width: 23%; pointer-events: none; font-size: .78em; }
.quest-track div { background: rgba(20,12,30,.7); border-left: 3px solid var(--gold); padding: .2em .5em; margin-bottom: .25em; border-radius: 4px; }
.quest-track div.done { border-left-color: #58d68d; }
.quest-track b { display: block; color: var(--gold-soft); }
.quest-track span { color: #eaecee; }
.quest-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .4em; pointer-events: auto; }
.quest { display: flex; gap: .6em; align-items: center; justify-content: space-between; padding: .45em .6em; border-radius: 8px;
background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.25); }
.quest p { margin: .15em 0; font-size: .85em; color: #d5d8dc; }
.quest small { display: block; font-size: .8em; color: var(--gold-soft); }
.quest.ready { border-color: #58d68d; background: rgba(88,214,141,.1); }
.quest.locked, .quest.done { opacity: .55; }
.quest button { flex: none; }
.item .need { font-size: .78em; color: var(--muted); }
.item .need .ok { color: #82e0aa; } .item .need .miss { color: #f1948a; }
.quest button { background: var(--panel-2); color: var(--text); border: 1px solid var(--gold); border-radius: 5px; font-size: .85em; padding: .25em .8em; }
.quest button.gold { background: linear-gradient(180deg,#f4d03f,#b7950b); color: #2b1a05; font-weight: 600; }
.quest button.ghost { border-color: #7f8c8d; color: var(--muted); }
.quest button:disabled { opacity: .4; }
.px-ico { width: 1.6em; height: 1.6em; image-rendering: pixelated; vertical-align: middle; object-fit: contain; }
.skill .px-ico, .sk-icon .px-ico, .hb-slot .px-ico { width: 1.9em; height: 1.9em; }
.need .px-ico { width: 1.2em; height: 1.2em; }
.enh { color: #f5b041; }
.hud-buttons button .px-ico { width: 1.9em; height: 1.9em; filter: drop-shadow(0 1px 0 rgba(0,0,0,.7)); }
.fish-ui > .px-ico { position: absolute; left: -1.2em; top: -1.2em; width: 2.6em; height: 2.6em; }
#shop-tabs .px-ico { width: 1.3em; height: 1.3em; }
.slot.pot .px-ico { width: 1.9em; height: 1.9em; }
.mm-dot.chest { background: #f4d03f; box-shadow: 0 0 6px #f1c40f; width: .55em; height: .55em; }
/* ---------- แผนที่โลก 5 ภาค / วาร์ป ---------- */
.world-map { display: flex; flex-direction: column; gap: .35em; height: auto; max-height: 62vh; overflow-y: auto; pointer-events: auto; background: none; border: none; }
.wm-region { border-radius: 8px; padding: .3em .5em .45em; background: rgba(255,255,255,.04); border-left: 4px solid #7f8c8d; }
.wm-region h4 { margin: 0 0 .25em; font-size: .85em; color: var(--gold-soft); }
.wm-region.village { border-color: #58d68d; } .wm-region.r1 { border-color: #f5b041; } .wm-region.r2 { border-color: #76d7c4; }
.wm-region.r3 { border-color: #27ae60; } .wm-region.r4 { border-color: #a569bd; } .wm-region.r5 { border-color: #e74c3c; }
.wm-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: .3em; }
.wm-map { position: relative; padding: .3em .45em; border-radius: 6px; background: rgba(0,0,0,.28); font-size: .78em; display: flex; flex-direction: column; }
.wm-map b { color: #fdebd0; } .wm-map span { color: var(--muted); font-size: .9em; }
.wm-map.cur { outline: 2px solid var(--gold); background: rgba(212,175,55,.18); }
.wm-map.lock { opacity: .45; } .wm-map.boss { background: rgba(142,68,173,.25); }
.wm-me { font-style: normal; color: var(--gold); font-size: .85em; } .wm-fr { position: absolute; right: .4em; top: .3em; font-style: normal; font-size: .85em; color: #5dade2; }
.travel-list { max-height: 64vh; overflow-y: auto; pointer-events: auto; }
.travel-list h4 { margin: .5em 0 .25em; font-size: .85em; color: var(--gold-soft); }
.tv-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr)); gap: .3em; }
.tv { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: .35em .5em; border-radius: 6px; border: 1px solid rgba(212,175,55,.45); background: var(--panel-2); color: var(--text); }
.tv small { color: var(--muted); font-size: .78em; } .tv:hover:not(:disabled) { background: #4a3160; }
.tv.cur { outline: 2px solid var(--gold); } .tv:disabled { opacity: .45; cursor: default; }
.mm-dot.fire { background: #f39c12; box-shadow: 0 0 5px #e67e22; }
/* ---------- หน้าเข้าสู่ระบบ / บัญชี ---------- */
#auth-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 4%; pointer-events: auto;
background: linear-gradient(90deg, rgba(8,4,16,0) 40%, rgba(8,4,16,.55)); }
.auth-box { width: 40%; min-width: 20em; max-height: 96%; overflow-y: auto; display: flex; flex-direction: column; gap: .55em; padding: 1.2em 1.4em;
background: rgba(26,14,38,.86); backdrop-filter: blur(3px); box-shadow: 0 0 40px rgba(0,0,0,.6), 0 0 18px rgba(212,175,55,.18); }
@media (max-aspect-ratio: 4/3) { #auth-screen { justify-content: center; padding-right: 0; background: rgba(8,4,16,.35); } .auth-box { width: 80%; } }
.auth-box .logo { text-align: center; margin-bottom: .2em; white-space: nowrap; font-size: 2.1em; }
.auth-tabs { display: flex; gap: .4em; }
.auth-tabs button { flex: 1; }
#auth-form { display: flex; flex-direction: column; gap: .45em; }
.auth-err { color: #f1948a; min-height: 1.1em; margin: 0; font-size: .85em; }
.auth-or { display: flex; align-items: center; gap: .6em; color: var(--muted); font-size: .8em; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; border-top: 1px solid rgba(212,175,55,.35); }
.acc-badge { padding: 0 .4em; border-radius: 4px; background: #3d2757; color: var(--gold-soft); }
.acc-badge.guest { background: #7e5109; color: #fdebd0; }
.link-form { display: flex; flex-wrap: wrap; gap: .35em; }
.link-form input { flex: 1 1 8em; font-family: inherit; padding: .3em .5em; border-radius: 6px; border: 1px solid var(--gold); background: #1d1228; color: var(--text); }
.acc-group .set-row { gap: .5em; }
#settings-panel { max-height: 92%; overflow-y: auto; }
.cc-account { margin: .2em 0 0; text-align: center; }
/* ---------- ระบบสาย/แนวต่อสู้ ---------- */
.skill.noweapon { filter: grayscale(1) brightness(.6); border-color: #7f6a3a; }
.skill.noweapon::after { content: '⛔'; position: absolute; right: 2px; bottom: 1px; font-size: .7em; }
.sk-tabs { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; margin: .2em 0 .5em; }
.sk-tabs button { background: #1d1229; color: #e8dcc0; border: 1px solid rgba(212,175,55,.35); border-radius: 8px; padding: .3em .7em; cursor: pointer; font: inherit; }
.sk-tabs button.active { background: #3b2350; border-color: var(--gold); color: #fff; }
.sk-tabs button.main { box-shadow: 0 0 6px rgba(244,208,63,.45); }
.sk-tabs button small { color: #58d68d; }
.sk-tabs .sk-note { font-size: .82em; color: #c9b98f; margin-left: .3em; }
.sk-pips i.cap { background: #1a1020; outline: 1px dashed #3a2a4a; }
.derived .path-line { grid-column: 1 / -1; }
.path-choose { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.path-card { font-size: .88em; background: #140b1d; border: 1px solid rgba(212,175,55,.45); border-radius: 10px; padding: .6em; text-align: center; display: flex; flex-direction: column; gap: .35em; }
.path-card .ic { font-size: 2em; }
.path-card b { color: var(--gold); }
.path-card .meta { font-size: .85em; color: #c9b98f; }
.path-card button { margin-top: auto; }
@media (max-width: 760px) { .path-choose { grid-template-columns: repeat(2, 1fr); } }
/* ---------- วอลเปเปอร์หน้าเข้าเกม ---------- */
#title-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; image-rendering: pixelated; opacity: 1; transition: opacity .6s; }
#title-bg.fade-out { opacity: 0; }
#title-caption { position: fixed; left: 1.2vw; bottom: 1.4vh; z-index: 5; font: 500 clamp(11px, 1.4vh, 16px) 'Mitr', sans-serif; color: #f5e6b8;
background: rgba(10,5,20,.55); border: 1px solid rgba(212,175,55,.4); border-radius: 999px; padding: .35em .9em; text-shadow: 0 1px 2px #000; }
#title-caption:hover { background: rgba(40,20,60,.8); }
#title-sound { position: fixed; right: 1.2vw; top: 1.4vh; z-index: 5; font-size: clamp(14px, 2.2vh, 22px); width: 2.2em; height: 2.2em; border-radius: 50%;
color: #fff; background: rgba(10,5,20,.55); border: 1px solid rgba(212,175,55,.5); }
#title-sound.hint::after { content: 'คลิกเพื่อเปิดเสียง'; position: absolute; right: 115%; top: 50%; transform: translateY(-50%); white-space: nowrap;
font-size: .6em; color: #f5e6b8; background: rgba(10,5,20,.7); padding: .2em .6em; border-radius: 6px; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .45; } }
.pf .gold .px-ico { width: 1.3em; height: 1.3em; margin: -.2em 0; }
/* ---------- QOL: ลงแต้มสถานะ ---------- */
.stat-row.q { grid-template-columns: 2.6em 1fr 3.4em auto; }
.stat-row .v .add { color: #58d68d; font-size: .85em; margin-left: .15em; }
.st-btns { display: flex; gap: 2px; }
.st-btns button { min-width: 1.9em; padding: 0 .3em; font-size: .78em; }
.st-btns button.minus { background: #7b241c; }
.st-actions { display: flex; gap: .4em; justify-content: flex-end; flex-wrap: wrap; margin-top: .5em; }
.btn.sm { font-size: .8em; padding: .3em .7em; }
.derived em.up { color: #58d68d; font-style: normal; }
.hud-buttons button.alert::after { content: ''; position: absolute; top: -.25em; right: -.25em; width: .6em; height: .6em; border-radius: 50%;
background: #e74c3c; border: 1px solid #fff; box-shadow: 0 0 6px #e74c3c; animation: blink 1.2s infinite; }
.sk-ups { display: flex; gap: 2px; width: 100%; }
.sk-ups .sk-up { flex: 1; }
.sk-ups .sk-up.max { flex: 0 0 auto; padding: 0 .35em; font-size: .75em; }
/* ---------- QOL: ร้านค้า / กระเป๋า ---------- */
.qty-bar, .bulk-bar, .inv-tools { display: flex; align-items: center; gap: .3em; flex-wrap: wrap; margin-bottom: .2em; font-size: .85em; }
.qty-bar button, .inv-tabs button { background: #1d1229; color: #e8dcc0; border: 1px solid rgba(212,175,55,.35); border-radius: 6px; padding: .1em .6em; font: inherit; }
.qty-bar button.active, .inv-tabs button.active { background: var(--gold); color: #2a1b3a; }
.inv-tools { justify-content: space-between; }
.inv-tabs { display: flex; gap: .25em; flex-wrap: wrap; }
#inv-sort { font: inherit; background: #1d1229; color: #e8dcc0; border: 1px solid rgba(212,175,55,.35); border-radius: 6px; padding: .1em .3em; }
.item.inv { grid-template-columns: 1.8em 1fr auto auto auto; }
.item .lock { background: none; border: none; font-size: .95em; opacity: .45; padding: 0 .1em; }
.item .lock.on { opacity: 1; }
.item.locked { opacity: .7; }
.item .cmp { font-size: .7em; color: var(--muted); }
.item .cmp .upv { color: #58d68d; margin-right: .3em; } .item .cmp .dnv { color: #f1948a; margin-right: .3em; }
#title-credit { position: fixed; right: 1.2vw; bottom: 1.4vh; z-index: 5; font: 500 clamp(11px, 1.5vh, 16px) 'Mitr', sans-serif; letter-spacing: .06em;
color: #f5e6b8; text-shadow: 0 1px 3px #000, 0 0 8px rgba(212,175,55,.5); pointer-events: none; }
.craft-btns { display: flex; gap: 3px; }
.loot-log { position: absolute; right: 1.2%; bottom: 7%; display: flex; flex-direction: column; align-items: flex-end; gap: .15em; pointer-events: none; font-size: .72em; }
.loot-log div { background: rgba(20,11,29,.75); border: 1px solid rgba(212,175,55,.35); border-radius: 6px; padding: .1em .55em; color: #f5e6b8;
text-shadow: 0 1px 2px #000; transition: opacity 1s; animation: lootin .25s ease-out; }
.loot-log div.fade { opacity: 0; }
@keyframes lootin { from { transform: translateX(20px); opacity: 0; } }
#stats-panel { max-height: 94%; overflow-y: auto; }
#stats-panel .stat-row.q { padding: .15em 0; }
#stats-panel .stat-row .d { font-size: .72em; }
/* ---------- ตีบวก +20 ---------- */
.enh.t1 { color: #5dade2; text-shadow: 0 0 6px #5dade2; } .enh.t2 { color: #c39bd3; text-shadow: 0 0 6px #af7ac5; }
.enh.t3 { color: #f4d03f; text-shadow: 0 0 6px #f4d03f; } .enh.t4 { color: #ff6f59; text-shadow: 0 0 8px #e74c3c; }
.enh.t5 { background: linear-gradient(90deg, #e74c3c, #f39c12, #f4d03f, #58d68d, #5dade2, #af7ac5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.guard-row { display: flex; align-items: center; gap: .4em; font-size: .85em; margin: .4em 0 0; color: var(--gold-soft); }
.eq-cos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.equip .eq.cos { border-color: rgba(175,122,197,.5); }
/* ---------- เตือนสกิลบอส ---------- */
.boss-warn { position: absolute; top: 19%; left: 50%; transform: translateX(-50%); min-width: 16em; text-align: center; pointer-events: none !important;
background: linear-gradient(180deg, rgba(60,8,12,.92), rgba(24,6,10,.92)); border: 1px solid #e74c3c; border-radius: 6px; padding: .35em 1em .45em;
box-shadow: 0 0 14px rgba(231,76,60,.55), inset 0 0 0 1px rgba(245,215,142,.18); animation: bwIn .18s ease-out; z-index: 6; }
.boss-warn.roar { border-color: #bb8fce; box-shadow: 0 0 14px rgba(187,143,206,.6); }
.boss-warn.wave { border-color: #f39c12; box-shadow: 0 0 14px rgba(243,156,18,.55); }
.bw-name { color: #ffd6a0; font-weight: bold; font-size: 1.05em; letter-spacing: .03em; text-shadow: 0 0 6px #e74c3c; }
.bw-hint { color: #f5d78e; font-size: .78em; margin: .1em 0 .3em; }
.bw-bar { height: 5px; background: rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; }
.bw-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e74c3c, #f5d78e); transform-origin: left; }
@keyframes bwIn { from { transform: translateX(-50%) scale(1.25); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.boss-edge { position: absolute; inset: 0; pointer-events: none !important; box-shadow: inset 0 0 60px 10px rgba(231,76,60,.0); transition: box-shadow .2s; z-index: 5; }
.boss-edge.on { animation: edgePulse .45s ease-in-out infinite alternate; }
@keyframes edgePulse { from { box-shadow: inset 0 0 40px 6px rgba(231,76,60,.15); } to { box-shadow: inset 0 0 70px 14px rgba(231,76,60,.45); } }
/* ============================================================
THEME LAYER – ธีมเดียวกันทั้งเกม: "ลายรดน้ำทอง บนพื้นครั่ง/ม่วงลงรัก"
(ทับสไตล์เดิมทุกหน้าต่าง/ปุ่ม/แท็บ/ช่องกรอก ให้หน้าตาเหมือนกัน)
============================================================ */
:root {
--lac-1: #2b1a3d; --lac-2: #1a0f26; --lac-3: #120a1b;
--line: rgba(212,175,55,.42); --line-strong: rgba(232,199,102,.85);
--btn-red-1: #a8322a; --btn-red-2: #6e1a15;
--btn-grn-1: #2e8b57; --btn-grn-2: #17603a;
--corner-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%270%200%2034%2034%27%3E%3Cg%20transform%3D%27rotate%280%2017%2017%29%27%20fill%3D%27none%27%20stroke%3D%27%23e8c766%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%2031V10Q3%203%2010%203H31%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M8%2031V13Q8%208%2013%208H31%27%20stroke-width%3D%27.8%27%20opacity%3D%27.7%27/%3E%3Cpath%20d%3D%27M13%2020q0-7%207-7q-4%203-2%207q-2-3-5%200z%27%20fill%3D%27%23e8c766%27%20stroke-width%3D%27.6%27/%3E%3Cpath%20d%3D%27M3%203l3.2%203.2%27%20stroke-width%3D%271.4%27/%3E%3Crect%20x%3D%271.2%27%20y%3D%271.2%27%20width%3D%274%27%20height%3D%274%27%20transform%3D%27rotate%2845%203.2%203.2%29%27%20fill%3D%27%23f7dc6f%27%20stroke%3D%27%237a5a12%27%20stroke-width%3D%27.6%27/%3E%3C/g%3E%3C/svg%3E"); --corner-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%270%200%2034%2034%27%3E%3Cg%20transform%3D%27rotate%2890%2017%2017%29%27%20fill%3D%27none%27%20stroke%3D%27%23e8c766%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%2031V10Q3%203%2010%203H31%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M8%2031V13Q8%208%2013%208H31%27%20stroke-width%3D%27.8%27%20opacity%3D%27.7%27/%3E%3Cpath%20d%3D%27M13%2020q0-7%207-7q-4%203-2%207q-2-3-5%200z%27%20fill%3D%27%23e8c766%27%20stroke-width%3D%27.6%27/%3E%3Cpath%20d%3D%27M3%203l3.2%203.2%27%20stroke-width%3D%271.4%27/%3E%3Crect%20x%3D%271.2%27%20y%3D%271.2%27%20width%3D%274%27%20height%3D%274%27%20transform%3D%27rotate%2845%203.2%203.2%29%27%20fill%3D%27%23f7dc6f%27%20stroke%3D%27%237a5a12%27%20stroke-width%3D%27.6%27/%3E%3C/g%3E%3C/svg%3E"); --corner-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%270%200%2034%2034%27%3E%3Cg%20transform%3D%27rotate%28180%2017%2017%29%27%20fill%3D%27none%27%20stroke%3D%27%23e8c766%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%2031V10Q3%203%2010%203H31%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M8%2031V13Q8%208%2013%208H31%27%20stroke-width%3D%27.8%27%20opacity%3D%27.7%27/%3E%3Cpath%20d%3D%27M13%2020q0-7%207-7q-4%203-2%207q-2-3-5%200z%27%20fill%3D%27%23e8c766%27%20stroke-width%3D%27.6%27/%3E%3Cpath%20d%3D%27M3%203l3.2%203.2%27%20stroke-width%3D%271.4%27/%3E%3Crect%20x%3D%271.2%27%20y%3D%271.2%27%20width%3D%274%27%20height%3D%274%27%20transform%3D%27rotate%2845%203.2%203.2%29%27%20fill%3D%27%23f7dc6f%27%20stroke%3D%27%237a5a12%27%20stroke-width%3D%27.6%27/%3E%3C/g%3E%3C/svg%3E"); --corner-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%270%200%2034%2034%27%3E%3Cg%20transform%3D%27rotate%28270%2017%2017%29%27%20fill%3D%27none%27%20stroke%3D%27%23e8c766%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%2031V10Q3%203%2010%203H31%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M8%2031V13Q8%208%2013%208H31%27%20stroke-width%3D%27.8%27%20opacity%3D%27.7%27/%3E%3Cpath%20d%3D%27M13%2020q0-7%207-7q-4%203-2%207q-2-3-5%200z%27%20fill%3D%27%23e8c766%27%20stroke-width%3D%27.6%27/%3E%3Cpath%20d%3D%27M3%203l3.2%203.2%27%20stroke-width%3D%271.4%27/%3E%3Crect%20x%3D%271.2%27%20y%3D%271.2%27%20width%3D%274%27%20height%3D%274%27%20transform%3D%27rotate%2845%203.2%203.2%29%27%20fill%3D%27%23f7dc6f%27%20stroke%3D%27%237a5a12%27%20stroke-width%3D%27.6%27/%3E%3C/g%3E%3C/svg%3E");
--divider: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%2710%27%20viewBox%3D%270%200%20120%2010%27%3E%3Cpath%20d%3D%27M0%205H50M70%205H120%27%20stroke%3D%27%23d4af37%27%20stroke-width%3D%271%27%20opacity%3D%27.8%27/%3E%3Cpath%20d%3D%27M60%201l4%204-4%204-4-4z%27%20fill%3D%27%23f7dc6f%27/%3E%3Cpath%20d%3D%27M50%205q3-3%206%200q-3%203-6%200M70%205q-3-3-6%200q3%203%206%200%27%20fill%3D%27%23d4af37%27/%3E%3C/svg%3E");
}
/* ---------- หน้าต่าง ---------- */
.panel, .window {
background-color: var(--lac-2);
background-image: var(--corner-tl), var(--corner-tr), var(--corner-br), var(--corner-bl),
radial-gradient(120% 70% at 50% 0%, rgba(120,70,160,.28), transparent 60%),
repeating-linear-gradient(45deg, rgba(212,175,55,.025) 0 2px, transparent 2px 9px),
linear-gradient(180deg, var(--lac-1), var(--lac-2) 45%, var(--lac-3));
background-position: 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
border: 2px solid var(--gold); border-radius: 12px;
box-shadow: 0 0 0 1px #3b2410, 0 0 0 4px rgba(0,0,0,.55), inset 0 0 0 3px rgba(26,15,38,.9), inset 0 0 0 4px rgba(212,175,55,.35), 0 10px 30px rgba(0,0,0,.6);
}
.window { padding: .9em 1.15em 1em; scrollbar-width: thin; scrollbar-color: var(--gold) rgba(0,0,0,.3); animation: winIn .16s ease-out; }
@keyframes winIn { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.985); } to { opacity: 1; transform: translateX(-50%); } }
.window::-webkit-scrollbar { width: 8px; }
.window::-webkit-scrollbar-thumb { background: linear-gradient(#f3d98b, #9a7b1c); border-radius: 4px; }
.window::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
.window header {
position: sticky; top: -.9em; z-index: 3; margin: -.9em -1.15em .7em; padding: .55em 1.15em .6em;
background: linear-gradient(180deg, rgba(58,34,80,.98), rgba(30,17,44,.97)); border-bottom: none;
border-radius: 10px 10px 0 0;
}
.window header::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -5px; height: 10px; background: var(--divider) center / 100% 100% no-repeat; pointer-events: none; }
.window header > :first-child, .window header h2, .window header h3, .window header b {
background: linear-gradient(180deg, #fff3c4, #f3d98b 45%, #c9a13a); -webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: none; font-weight: 600; letter-spacing: .02em; filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
.window h3, .window h4 { color: var(--gold-soft); border-left: 3px solid var(--gold); padding-left: .45em; margin: .7em 0 .4em; }
.close { width: 1.7em; height: 1.7em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0;
background: radial-gradient(circle at 35% 30%, #d9463a, #7b1d17); border: 2px solid var(--gold) !important; color: #fff3c4 !important; font-size: .85em; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.close:hover { filter: brightness(1.2); transform: rotate(90deg); transition: transform .15s; }
/* ---------- ปุ่มในหน้าต่าง (ค่าเริ่มต้น = ปุ่มลงรักขอบทอง) ---------- */
.window button:not(.close):not(.tv):not(.path-card):not(.hb-slot):not(.wmap-node) {
font-family: inherit; color: #f6ecd9; cursor: pointer;
background: linear-gradient(180deg, #3e2856, #24163a); border: 1px solid var(--line-strong); border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.6); transition: filter .1s, transform .06s;
}
.window button:not(.close):not(.wmap-node):hover:not(:disabled) { filter: brightness(1.25); }
.window button:not(.close):active:not(:disabled) { transform: translateY(1px); }
.window button:disabled:not(.wmap-node) { opacity: .45; filter: grayscale(.6); cursor: default; }
/* ปุ่มยืนยัน/ซื้อ/เรียน = แดงครั่ง */
.window .btn.primary, .window [data-buy], .window [data-sa='ok'], .window .sk-up, .window [data-learn], .window [data-enh], .window [data-make], .window [data-cook], .window [data-brew], .window [data-accept], .window [data-claim] {
background: linear-gradient(180deg, var(--btn-red-1), var(--btn-red-2)) !important; color: #fff3c4 !important; border-color: var(--gold) !important;
}
/* ปุ่มเพิ่มค่า = เขียวหยก */
.window .stat-row button, .window [data-learnmax], .window [data-st] { background: linear-gradient(180deg, var(--btn-grn-1), var(--btn-grn-2)) !important; color: #eafaf1 !important; border-color: rgba(171,235,198,.6) !important; }
.window .stat-row button[data-st$='-'], .window [data-n='-1'] { background: linear-gradient(180deg, #7b241c, #4a1410) !important; }
/* แท็บทุกแบบ */
.tabs button, .sk-tabs button, .inv-tabs button, .qty-bar button, #shop-tabs button, .window [data-tab], .window [data-cat], .window [data-sktab] {
background: linear-gradient(180deg, #2a1b3a, #1a0f26) !important; color: #e8dcc0 !important; border: 1px solid var(--line) !important; border-radius: 7px 7px 3px 3px !important;
}
.tabs button.active, .sk-tabs button.active, .inv-tabs button.active, .qty-bar button.active, #shop-tabs button.active, .window [data-tab].active, .window [data-cat].active, .window [data-sktab].active {
background: linear-gradient(180deg, #fbe7a1, #d4ac0d) !important; color: #2a1b3a !important; border-color: #fff3c4 !important; font-weight: 600; box-shadow: 0 0 8px rgba(244,208,63,.4);
}
/* ช่องกรอก / ตัวเลือก */
.window select, .window input[type=text], .window input[type=number], .window input:not([type]), .window textarea, #chat input, .auth-panel input, .create-panel input, .create-panel select {
font-family: inherit; color: var(--text); background: #120a1b; border: 1px solid var(--line-strong); border-radius: 6px; padding: .2em .45em; outline: none;
}
.window select:focus, .window input:focus, #chat input:focus { border-color: #fff3c4; box-shadow: 0 0 0 2px rgba(212,175,55,.25); }
.window select option { background: #1a0f26; color: var(--text); }
.window input[type=checkbox], .window input[type=range] { accent-color: #d4ac0d; }
/* แถวรายการ/การ์ด */
.item, .quest, .sk-card, .path-card, .tr-col, .set-group, .equip .eq, .wm-map, .tv { border-color: var(--line) !important; }
.item { background: linear-gradient(90deg, rgba(42,27,58,.9), rgba(18,10,27,.9)); border: 1px solid rgba(212,175,55,.18); border-left: 3px solid rgba(212,175,55,.5); }
.item:hover { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(62,40,86,.95), rgba(24,14,36,.95)); }
.set-group { background: rgba(18,10,27,.85); border: 1px solid var(--line); }
.window kbd, .key { display: inline-block; min-width: 1.4em; text-align: center; padding: 0 .3em; border-radius: 4px; background: linear-gradient(#3e2856,#1a0f26); border: 1px solid var(--line-strong); color: #fff3c4; font-size: .85em; }
/* ---------- HUD ให้เข้าชุด ---------- */
.pf, .hud-right .zone, .minimap, .target, .party-frames .pm, .quest-track div, .fish-ui, .boss-bar, .prompt, .toast, #chat-log div, .player-menu {
border-color: var(--gold) !important;
}
.fish-ui { background: linear-gradient(180deg, rgba(20,34,52,.92), rgba(12,20,32,.92)) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(212,175,55,.3); }
.boss-bar { border: 2px solid var(--gold) !important; background: linear-gradient(180deg, rgba(70,12,24,.94), rgba(28,6,14,.94)) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 0 16px rgba(231,76,60,.45) !important; }
.boss-bar .bb-name b { color: #ffd6a0; text-shadow: 0 0 6px #c0392b; }
.toast { background: linear-gradient(180deg, rgba(43,26,61,.95), rgba(18,10,27,.95)); box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
.prompt { background: linear-gradient(180deg, rgba(43,26,61,.92), rgba(18,10,27,.92)) !important; }
#chat input { background: rgba(18,10,27,.85); }
.expbar { border-top: 1px solid var(--line-strong); background: linear-gradient(180deg, #1a0f26, #0c0612); }
.player-menu { background: linear-gradient(180deg, var(--lac-1), var(--lac-3)) !important; }
.banner { background: linear-gradient(90deg, transparent, rgba(30,17,44,.92) 15%, rgba(30,17,44,.92) 85%, transparent) !important; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
/* ---------- แชท: ไม่บังหน้าจอ ---------- */
#chat { width: 21em; z-index: 2; transition: opacity .2s; }
#chat-log { pointer-events: none; }
#chat-log div { animation: chatFade 14s forwards; }
#chat:hover #chat-log div, #chat:focus-within #chat-log div { animation: none; opacity: 1; } /* ชี้เมาส์/พิมพ์ → เห็นข้อความเก่าทั้งหมด */
@keyframes chatFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
#chat-input { opacity: .35; }
#chat:hover #chat-input, #chat-input:focus { opacity: 1; }
#ui:has(.window:not(.hidden)) #chat, #ui:has(#player-menu:not(.hidden)) #chat { opacity: .15; pointer-events: none; } /* เปิดหน้าต่างอยู่ → แชทจางลง */
#ui:has(.window:not(.hidden)) #chat:focus-within { opacity: 1; pointer-events: auto; }
#chat.collapsed #chat-log { display: none; }
#chat-toggle { position: absolute; right: 0; top: -1.6em; width: 1.5em; height: 1.5em; font-size: .9em; border-radius: 50%; padding: 0; opacity: .5;
background: linear-gradient(180deg, #3e2856, #24163a); border: 1px solid var(--line-strong); color: #f6ecd9; cursor: pointer; }
#chat:hover #chat-toggle { opacity: 1; }
.qty-custom { display: inline-flex; align-items: center; gap: .3em; margin-left: .4em; color: var(--muted); }
.qty-custom input { width: 5em; padding: .1em .4em; font-size: 1em; }
.qty-custom.active { color: var(--gold-soft); } .qty-custom.active input { border-color: var(--gold); box-shadow: 0 0 6px rgba(212,175,55,.4); }
/* ---------- แผนที่โลก (วาร์ป) ---------- */
.wmap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 2px solid var(--gold); box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.5);
background: #3b2a1c url('../assets/env/world_map.png') center / 100% 100% no-repeat; image-rendering: pixelated; }
.wmap svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wmap-node { position: absolute; transform: translate(-50%, -50%); width: 2.5em; height: 2.5em; border-radius: 50%; border: 2px solid #f5e6b8; background: radial-gradient(circle at 35% 30%, #7ee0a8, #1e8449);
color: #fff; font-weight: 700; font-size: .78em; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 0 2px rgba(0,0,0,.35); padding: 0; transition: transform .1s; }
.wmap-node:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.25); z-index: 3; }
.wmap-node.lock { background: radial-gradient(circle at 35% 30%, #8a8a8a, #3d3d3d); color: #ccc; cursor: default; }
.wmap-node.cur { background: radial-gradient(circle at 35% 30%, #fff3c4, #d4ac0d); color: #3b2a1c; border-color: #fff; animation: wmapPulse 1.2s infinite; z-index: 2; }
.wmap-node.village { width: 2.9em; height: 2.9em; font-size: .95em; background: radial-gradient(circle at 35% 30%, #ffd9a0, #b9770e); }
.wmap-node.boss { width: 3em; height: 3em; background: radial-gradient(circle at 35% 30%, #ff8a80, #922b21); font-size: .95em; }
.wmap-node.boss.lock { background: radial-gradient(circle at 35% 30%, #8a8a8a, #3d3d3d); }
@keyframes wmapPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(244,208,63,.6), 0 2px 6px rgba(0,0,0,.7); } 50% { box-shadow: 0 0 0 7px rgba(244,208,63,0), 0 2px 6px rgba(0,0,0,.7); } }
.wmap-tip { position: absolute; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(43,26,61,.96), rgba(18,10,27,.96)); border: 1px solid var(--gold); border-radius: 6px; padding: .3em .6em; font-size: .8em; white-space: nowrap; transform: translate(-50%, -115%); box-shadow: 0 3px 10px rgba(0,0,0,.6); }
.wmap-tip b { color: var(--gold-soft); } .wmap-tip small { display: block; color: var(--muted); }
.wmap-region { position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; font-size: .72em; color: #fff3c4; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.9); letter-spacing: .02em; background: rgba(20,10,30,.45); padding: .05em .5em; border-radius: 10px; border: 1px solid rgba(212,175,55,.35); }
.wmap-legend { display: flex; flex-wrap: wrap; gap: .3em 1em; margin-top: .5em; font-size: .78em; color: var(--muted); }
#travel-panel { width: 54em; max-width: 96%; }
.item.under { opacity: .72; } .need-lv { color: #f1948a; font-size: .8em; margin-left: .3em; }
.item .ic img[src*='g_'][src*='leg'] { filter: drop-shadow(0 0 3px #f4d03f); }
.lb-tabs { float: right; display: inline-flex; gap: .3em; font-size: .75em; }
.lb-tabs button { padding: .05em .6em; }
.soc-row.lb.me { background: rgba(212,175,55,.12); border-radius: 4px; }
.chat-whisper, #chat-log .whisper-msg, #chat-log .whisper-msg b { color: #f5b7b1 !important; }
/* ---------- v3: เซ็ตโบนัส · ฉายา · เพื่อน · ดันเจี้ยน · บอสภาค · ย้อมสี · ลองชุด ---------- */
.set-box { grid-column: 1 / -1; margin-top: .3em; padding: .35em .5em; border: 1px dashed rgba(212,175,55,.45); border-radius: 6px; font-size: .82em; background: rgba(212,175,55,.06); }
.set-box.off { border-style: dotted; opacity: .8; }
.set-box div { color: #8f8a9a; } .set-box div.on { color: #82e0aa; }
.soc-tabs { display: inline-flex; gap: .25em; margin-left: .6em; font-weight: normal; }
.soc-tabs button { background: #1d1229; color: #e8dcc0; border: 1px solid rgba(212,175,55,.35); border-radius: 6px; padding: .05em .5em; font: inherit; font-size: .78em; cursor: pointer; }
.soc-tabs button.active { background: var(--gold); color: #2a1b3a; }
.soc-row.off { opacity: .6; }
.title-list { display: grid; grid-template-columns: 1fr 1fr; gap: .3em; margin-bottom: .4em; }
.title-row { display: flex; flex-direction: column; align-items: flex-start; gap: .1em; text-align: left; background: rgba(0,0,0,.25); border: 1px solid rgba(212,175,55,.3); border-radius: 6px; padding: .3em .5em; color: var(--text); font: inherit; cursor: pointer; position: relative; }
.title-row b { color: var(--tc, #f7dc6f); }
.title-row small { color: #9a94a8; font-size: .78em; }
.title-row i { position: absolute; right: .5em; top: .3em; font-style: normal; color: #82e0aa; font-size: .8em; }
.title-row.active { border-color: #82e0aa; box-shadow: inset 0 0 0 1px rgba(130,224,170,.4); }
.title-row.locked { opacity: .45; cursor: default; } .title-row.locked b { color: #8f8a9a; }
.title-row:hover:not(:disabled) { background: rgba(212,175,55,.15); }
.dg-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin: .4em 0; }
.dg-tier { display: flex; flex-direction: column; gap: .25em; padding: .5em; border-radius: 8px; border: 1px solid rgba(212,175,55,.35); background: rgba(0,0,0,.3); }
.dg-tier b { font-size: 1.05em; } .dg-tier small { color: #b8b0c8; font-size: .8em; }
.dg-tier.normal b { color: #82e0aa; } .dg-tier.hard b { color: #f5b041; } .dg-tier.hell b { color: #ff6b6b; }
.dg-tier.lock { opacity: .55; }
.dg-tier button { margin-top: auto; }
.npc-say { font-style: italic; color: #d2b4de; font-size: .9em; margin: .2em 0 .4em; }
.dg-bar { top: 2%; } .dg-bar .bb-name span { margin-left: .6em; color: #d2b4de; font-size: .85em; }
.bar.boss.dg i { background: linear-gradient(90deg, #4a235a, #8e44ad, #d2b4de); }
.boss-bar.dg-bar { border-color: #bb8fce !important; box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 0 16px rgba(155,89,182,.5) !important; }
#dg-bar:not(.hidden) ~ #boss-bar { top: 9%; }
.wm-map.rboss { box-shadow: inset 0 0 0 1px #f39c12; background: rgba(243,156,18,.18); }
.wmap-node.rboss { box-shadow: 0 0 0 2px #f39c12, 0 0 10px #f39c12; animation: rbPulse 1s infinite alternate; }
@keyframes rbPulse { from { box-shadow: 0 0 0 2px #f39c12, 0 0 6px #f39c12; } to { box-shadow: 0 0 0 3px #f7dc6f, 0 0 14px #f39c12; } }
.mm-dot.npc em { position: absolute; left: 50%; top: -1.35em; transform: translateX(-50%); font-style: normal; font-size: .7em; line-height: 1; pointer-events: none; }
.prev-btn { background: none; border: 1px solid rgba(212,175,55,.35); border-radius: 4px; color: #e8dcc0; font-size: .8em; padding: 0 .3em; margin-right: .35em; cursor: pointer; }
.prev-btn:hover { background: rgba(212,175,55,.2); }
.dye-row { margin: .4em 0; } .dye-row b { color: var(--gold-soft); }
.dye-opts { display: flex; flex-wrap: wrap; gap: .25em; margin-top: .25em; }
.dye-opts button { width: 2.2em; height: 2em; background: #1d1229; color: #e8dcc0; border: 1px solid rgba(212,175,55,.35); border-radius: 6px; font: inherit; cursor: pointer; }
.dye-opts button.active { background: var(--gold); color: #2a1b3a; }
.dye-opts button:hover { border-color: var(--gold); }
/* ---------- v3 ธีม: หลอดพลัง · ความหายาก · แจ้งเตือน · ป้ายเขต ---------- */
.bar i.ghost { background: rgba(255,120,120,.55) !important; transition: width .6s ease-out .25s !important; z-index: 0; }
.bar i:not(.ghost) { z-index: 1; }
.bar i:not(.ghost)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.35) 50%, transparent 100%); background-size: 200% 100%; animation: sheen 3.2s linear infinite; }
@keyframes sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bar.hp.low i:not(.ghost) { animation: hpPulse .8s ease-in-out infinite alternate; }
@keyframes hpPulse { from { filter: brightness(1); } to { filter: brightness(1.6) saturate(1.3); } }
.bar.boss .seg { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0,0,0,.55) calc(25% - 1px) 25%); }
.bar.boss i.ghost { background: rgba(255,200,120,.5) !important; }
.bar { isolation: isolate; } .bar span { z-index: 3; }
/* ความหายากของอุปกรณ์ (ตามเลเวล/ตำนาน) */
.item.r1 { border-left-color: #b8b8b8; } .item.r2 { border-left-color: #5dd39e; } .item.r3 { border-left-color: #5fa8ff; } .item.r4 { border-left-color: #c58cff; }
.item.r5 { border-left-color: #ffd35c; background: linear-gradient(90deg, rgba(90,60,10,.55), rgba(18,10,27,.9)); }
.item .rn1 { color: #e6e6e6; } .item .rn2 { color: #8ff0c0; } .item .rn3 { color: #8ec5ff; } .item .rn4 { color: #d8b4ff; }
.item .rn5 { background: linear-gradient(90deg, #fff3c4, #ffd35c 40%, #ff9f43 70%, #fff3c4); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 2.4s linear infinite; font-weight: 600; }
.item.r5 .ic { filter: drop-shadow(0 0 4px #ffd35c); }
/* แจ้งเตือนแยกชนิด */
.toast { border-left: 4px solid var(--gold); padding-left: .8em; }
.toast::before { content: 'ℹ️'; margin-right: .4em; }
.toast.warn { border-left-color: #ff6b6b; } .toast.warn::before { content: '⚠️'; }
.toast.ok { border-left-color: #58d68d; } .toast.ok::before { content: '✔'; color: #58d68d; }
.toast.loot { border-left-color: #ffd35c; } .toast.loot::before { content: '🎁'; }
.toast.quest { border-left-color: #85c1e9; } .toast.quest::before { content: '📜'; }
/* ป้ายเขต: ชื่อ + บรรทัดรอง + ลายเส้น */
.banner { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: .35em 2.2em .45em !important; }
.banner b { font-weight: 600; }
.banner small { font-size: .5em; color: #e8dcc0; font-weight: 400; letter-spacing: .08em; opacity: .9; }
.banner small:empty { display: none; }
.banner::before, .banner::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 46%; height: 10px; background: var(--divider) center / 100% 100% no-repeat; }
.banner::before { top: -7px; } .banner::after { bottom: -7px; }
/* ชั้นหน้า: ตัวเลข/ข้อความในโลกเป็น Fx แล้ว · แชทแยกสี */
#chat-log .party-msg b { color: #82e0aa; } #chat-log .whisper-msg b { color: #d7bde2; }
/* แผนที่โลก: คำใบ้ในหัวหน้าต่าง */
.wmap-hint { font-size: .62em; font-weight: 400; color: var(--muted); margin-left: .6em; }
.wmap-hint.warn { color: #f5b041; }
/* ---------- โหมดทดลอง top-down อยุธยา ---------- */
#td-hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; font-size: 2.6cqh; }
#td-hud .td-frame { position: absolute; top: 2%; left: 1.2%; width: 17em; padding: .4em .7em .5em; pointer-events: auto;
background: linear-gradient(180deg, rgba(43,27,58,.95), rgba(20,11,29,.95)); border: 2px solid var(--gold); border-radius: 10px; box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
#td-hud .td-row { display: flex; align-items: center; gap: .4em; margin-bottom: .2em; }
#td-hud .td-gold { margin-left: auto; color: var(--gold-soft); font-size: .85em; }
#td-hud .bar.exp i { background: linear-gradient(90deg, #7d3c98, #c39bd3); }
#td-hud .td-frame, #td-hud .td-target, #td-hud .td-toast { display: none !important; }
#td-hud .td-zone { position: absolute; top: 22%; right: 1.2%; font-size: .85em; padding: .3em .8em; background: rgba(20,11,29,.85); border: 2px solid var(--gold); border-radius: 10px; color: var(--gold-soft); }
#td-hud .td-target { position: absolute; top: 9%; right: 1.2%; padding: .2em .7em; background: rgba(60,20,20,.85); border: 1px solid #e74c3c; border-radius: 8px; color: #ffb3b3; font-size: .9em; }
#td-hud .td-target:empty { display: none; }
#td-hud .td-toast { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); max-width: 70%; padding: .4em 1em; background: rgba(20,11,29,.9); border: 1px solid var(--gold); border-radius: 10px; color: #fff3c4; text-align: center; }
#td-hud .td-bottom { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); display: flex; gap: 1em; align-items: center; pointer-events: auto; color: var(--muted); font-size: .8em; white-space: nowrap; background: rgba(20,11,29,.7); padding: .3em .8em; border-radius: 10px; }
#td-hud .td-bottom .btn { font-size: .95em; padding: .2em .8em; }
/* ---------- New Version: มินิแมพ 2 มิติ + เคอร์เซอร์ ---------- */
#td-minimap { position: absolute; top: 18.5%; right: 1.2%; width: 12.5em; height: auto; aspect-ratio: 150 / 110; image-rendering: pixelated;
border: 2px solid var(--gold); border-radius: 10px; box-shadow: 0 0 0 2px rgba(0,0,0,.55); background: #0d0714; }
#td-hud .td-zone { top: 45% !important; }
body[data-cursor="attack"], body[data-cursor="attack"] canvas { cursor: url("data:image/svg+xml;utf8,") 2 2, crosshair !important; }
body[data-cursor="talk"], body[data-cursor="talk"] canvas { cursor: url("data:image/svg+xml;utf8,") 4 4, pointer !important; }
/* โหมดอยุธยา: ซ่อนมินิแมปแบบเดิม (ใช้ #td-minimap แทน) */
body.td-mode .minimap{display:none!important}
#td-minimap[hidden]{display:none!important}
/* ============================================================
มือถือ / จอสัมผัส (body.touch ตั้งโดย TouchControls)
============================================================ */
html, body { overscroll-behavior: none; }
#game canvas { touch-action: none; }
.td-bottom .t-hint { display: none; }
body.touch .td-bottom .k-hint { display: none; }
body.touch .td-bottom .t-hint { display: inline; }
body.touch, body.touch #game-wrap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch #td-minimap { width: 9em; }
body.touch.td-mode #td-hud .td-zone { top: 35.6% !important; width: 12em; }
body.touch #chat { bottom: auto; top: 30%; width: 17em; font-size: .7em; }
body.touch #skillbar .skill, body.touch .slot.pot { touch-action: manipulation; }
#touch-ui { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
#touch-ui > * { pointer-events: auto; touch-action: none; }
.t-stick { position: absolute; left: calc(3% + env(safe-area-inset-left, 0px)); bottom: 8%; width: 34cqh; height: 34cqh;
border-radius: 50%; background: radial-gradient(circle, rgba(255,243,196,.10), rgba(20,11,29,.45)); border: 2px solid rgba(212,175,55,.55); }
.t-stick.on { border-color: var(--gold); }
.t-knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff3c4, #d4af37 55%, #7a5a12); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.t-btn { position: absolute; border-radius: 50%; border: 3px solid var(--gold); color: #fff; font-size: 11cqh; line-height: 1;
background: radial-gradient(circle at 35% 30%, #a3372b, #5b1a14); box-shadow: 0 4px 12px rgba(0,0,0,.5); display: grid; place-items: center; }
.t-atk { right: calc(3% + env(safe-area-inset-right, 0px)); bottom: 22%; width: 26cqh; height: 26cqh; }
.t-atk.on { transform: scale(.92); filter: brightness(1.3); }
.t-small { width: 12cqh; height: 12cqh; font-size: 6cqh; background: rgba(20,11,29,.8); }
.t-fs { right: calc(5% + 26cqh + env(safe-area-inset-right, 0px)); bottom: 8%; }
.t-rotate { display: none; }
@media (orientation: portrait) {
body.touch .t-rotate { display: grid; place-content: center; gap: 1em; text-align: center; position: fixed; inset: 0; z-index: 100;
background: #140b1d; color: #fff3c4; font-size: 20px; padding: 24px; }
body.touch .t-rotate .btn { background: var(--gold); color: #2a1a05; font-weight: 700; }
body.touch .t-rotate > div { font-size: 64px; animation: t-rot 1.6s ease-in-out infinite; }
@keyframes t-rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
}
/* Hotbar 10 ช่อง: ช่องไอเทม */
#skillbar .skill { width: 2.75em; height: 2.75em; }
.skill.item-slot { background: linear-gradient(180deg, rgba(58,48,30,.95), rgba(24,18,10,.95)); border-color: #c9a45c; }
.skill.item-slot .n { position: absolute; bottom: 1px; right: 4px; font-size: .62em; font-weight: 700; color: #fff3c4; text-shadow: 0 1px 2px #000; }
.skill.item-slot.empty-item .ic { filter: grayscale(1) brightness(.55); }
.skill.item-slot.worn { border-color: #58d68d; }
.skill.item-slot.worn .n { color: #58d68d; }
.skill.empty .ic { opacity: .35; }
.skill[draggable="true"] { cursor: grab; }
.item.inv[draggable="true"] { cursor: grab; }
.inv-acts { display: flex; gap: .25em; justify-content: flex-end; }
.inv-acts .hb-add { min-width: 2em; padding: 0 .35em; }
body.touch #skillbar .skill { width: 2.45em; height: 2.45em; }
/* ============================================================
หน้าเข้าเกม · เลือกตัวละคร · สร้างตัวละคร (ธีมกรุงศรีฯ: รักปิดทอง + ศิลาแลง)
============================================================ */
canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.btn.big { font-size: 1.15em; padding: .5em 1.4em; letter-spacing: .02em; }
.btn.danger { color: #f5b7b1; border-color: rgba(231,76,60,.7); }
.btn.danger:hover { background: rgba(192,57,43,.25); }
.btn:disabled { opacity: .55; cursor: default; filter: grayscale(.4); }
.plaque { align-self: center; position: relative; padding: .25em 2.2em; font-weight: 600; font-size: 1.05em; color: #fff3cf; letter-spacing: .06em;
background: linear-gradient(#8e2a20, #5a1611); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
clip-path: polygon(1.1em 0, calc(100% - 1.1em) 0, 100% 50%, calc(100% - 1.1em) 100%, 1.1em 100%, 0 50%);
text-shadow: 0 2px 0 rgba(0,0,0,.5); box-shadow: inset 0 0 12px rgba(0,0,0,.45); white-space: nowrap; }
.plaque::before, .plaque::after { content: '◆'; position: absolute; top: 50%; transform: translateY(-52%); font-size: .6em; color: var(--gold); }
.plaque::before { left: 1.6em; } .plaque::after { right: 1.6em; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.shake { animation: shake .35s; border-color: #e74c3c !important; }
/* ---------- เข้าสู่ระบบ ---------- */
#auth-screen { justify-content: space-between; align-items: center; padding: 0 4% 0 5%;
background: radial-gradient(60% 80% at 25% 45%, rgba(8,4,16,0) 30%, rgba(8,4,16,.35)), linear-gradient(90deg, rgba(8,4,16,.15) 30%, rgba(8,4,16,.6)); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: .3em; width: 50%; text-align: center; margin-top: -4%; padding: 1em 0; background: radial-gradient(closest-side, rgba(8,4,16,.55), transparent); }
.auth-brand .crest { font-size: 2.2em; filter: drop-shadow(0 0 10px rgba(255,210,120,.7)); animation: crest 4s ease-in-out infinite; }
@keyframes crest { 50% { transform: translateY(-.15em); filter: drop-shadow(0 0 18px rgba(255,210,120,.95)); } }
.logo.big { font-size: 3.4em; white-space: nowrap; }
.logo.big small { font-size: .36em; margin-top: .45em; }
.auth-brand .tagline { margin: .2em 0 0; color: var(--gold-soft); font-size: 1em; text-shadow: 0 2px 4px #000, 0 0 10px rgba(0,0,0,.8); letter-spacing: .04em; }
.auth-box { width: 36%; min-width: 19em; gap: .5em; padding: 1.3em 1.5em 1em; background-color: rgba(26,15,38,.9); }
.auth-box .plaque { margin: -.2em 0 .3em; }
.ico-field { position: relative; }
.ico-field > i { position: absolute; left: .55em; bottom: .45em; font-style: normal; font-size: .9em; opacity: .8; pointer-events: none; }
.ico-field input { padding-left: 2em !important; }
.srv-status { display: flex; align-items: center; justify-content: center; gap: .45em; font-size: .75em; color: var(--muted); margin-top: .1em; }
.srv-status i { width: .6em; height: .6em; border-radius: 50%; background: #7f8c8d; }
.srv-status.on i { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; animation: blink 2s infinite; }
.srv-status.off i { background: #e74c3c; }
@keyframes blink { 50% { opacity: .45; } }
@media (max-aspect-ratio: 4/3) { .auth-brand { display: none; } }
/* ---------- เลือกตัวละคร (Lobby) ---------- */
#lobby-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 1.6% 3% 1.2%; gap: .8em;
background: radial-gradient(70% 60% at 50% 45%, rgba(8,4,16,.15), rgba(8,4,16,.7)); }
.lb-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 2.6em; }
.lb-head .logo { font-size: 1.7em; }
.lb-acc { display: flex; align-items: center; gap: .6em; font-size: .85em; color: var(--muted); background: rgba(10,5,18,.6); padding: .25em .4em .25em .9em; border-radius: 2em; border: 1px solid var(--line); }
.lb-acc b { color: var(--gold-soft); font-weight: 500; }
.lb-plaque { font-size: 1.15em; }
.lb-slots { display: flex; justify-content: center; gap: 2.2em; flex: 1; align-items: center; min-height: 0; }
.lb-card { position: relative; width: 10.5em; display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: .6em .5em .7em; border-radius: 12px;
border: 2px solid rgba(212,175,55,.35); background: linear-gradient(180deg, rgba(43,26,61,.55), rgba(18,10,27,.82)); transition: transform .15s, border-color .15s, box-shadow .15s; user-select: none; }
.lb-card:hover { transform: translateY(-3px); border-color: rgba(232,199,102,.7); }
.lb-card.sel { border-color: var(--gold); transform: translateY(-6px) scale(1.06);
box-shadow: 0 0 0 1px #3b2410, 0 0 22px rgba(255,200,90,.45), inset 0 0 18px rgba(255,200,90,.12); background: linear-gradient(180deg, rgba(90,40,30,.6), rgba(24,12,30,.9)); }
.lb-no { position: absolute; top: .35em; left: .5em; font-size: .75em; color: var(--gold-soft); opacity: .8; }
.lb-stage { position: relative; width: 9em; height: 9em; display: flex; align-items: flex-end; justify-content: center; }
.lb-stage::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 3%; height: 22%; border-radius: 50%;
background: radial-gradient(closest-side, #c9a56b, #9c7a47 60%, #5e4526); box-shadow: 0 .25em 0 #3e2c17, 0 .4em .6em rgba(0,0,0,.6); }
.lb-card.sel .lb-stage::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 8%; height: 80%; pointer-events: none;
background: linear-gradient(0deg, rgba(255,214,120,.35), transparent 75%); filter: blur(4px); animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 50% { opacity: .55; } }
.lb-stage canvas { position: relative; z-index: 1; width: 100%; height: 100%; }
.lb-card.empty .lb-stage::before { background: radial-gradient(closest-side, #4a3a5c, #2b1f38); box-shadow: 0 .25em 0 #1a1024; opacity: .8; }
.lb-plus { position: relative; z-index: 1; margin-bottom: 1.6em; width: 1.8em; height: 1.8em; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 1.8em; color: var(--gold-soft); border: 2px dashed rgba(232,199,102,.6); opacity: .75; transition: opacity .15s, transform .15s; }
.lb-card.empty:hover .lb-plus, .lb-card.empty.sel .lb-plus { opacity: 1; transform: scale(1.08); }
.lb-name { margin-top: .35em; font-weight: 600; color: var(--gold-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-card.empty .lb-name { color: var(--muted); font-weight: 400; }
.lb-sub { font-size: .78em; color: var(--muted); }
@keyframes born { 0% { box-shadow: 0 0 0 0 rgba(255,220,130,.9); } 100% { box-shadow: 0 0 0 1.5em rgba(255,220,130,0); } }
.lb-card.born { animation: born .8s ease-out 2; }
.lb-toast { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 30; max-width: min(92vw, 520px);
padding: 10px 18px; border-radius: 10px; background: rgba(40, 24, 8, .94); border: 1px solid #d4a017; color: #fbe9c0;
font-size: 14px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.45); transition: opacity .5s, transform .5s; }
.lb-toast b { color: #ffd76a; }
.lb-toast.out { opacity: 0; transform: translate(-50%, -8px); }
.lb-bottom { width: min(100%, 44em); display: flex; gap: 1em; align-items: stretch; }
.lb-info { flex: 1; padding: .8em 1.5em; min-height: 7.4em; display: flex; flex-direction: column; gap: .4em; font-size: .9em; }
.lb-i-head { display: flex; align-items: center; gap: .5em; }
.lb-i-head b { font-size: 1.15em; color: var(--gold-soft); }
.lb-i-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: .9em; align-items: center; }
.lb-i-grid .bar { height: 1.05em; margin: .18em 0; }
.lb-i-grid .bar span { font-size: .72em; }
.bar.exp i { background: linear-gradient(90deg, #b7950b, var(--exp)); }
.lb-i-list div { display: flex; justify-content: space-between; gap: .5em; font-size: .9em; }
.lb-i-list small, .lb-i-stats small { color: var(--muted); margin-right: .35em; }
.lb-i-stats { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: .3em; font-size: .85em; }
.lb-empty-info { margin: auto 0; color: var(--muted); line-height: 1.6; }
.lb-empty-info b { color: var(--gold-soft); }
.lb-actions { display: flex; flex-direction: column; justify-content: center; gap: .5em; width: 12em; }
.lb-actions .btn.big { padding: .8em .5em; }
.lb-keys { margin: 0; font-size: .7em; opacity: .75; }
.lb-modal { position: absolute; inset: 0; background: rgba(6,3,12,.65); display: flex; align-items: center; justify-content: center; z-index: 5; }
.lb-modal form { width: 24em; display: flex; flex-direction: column; gap: .5em; }
.lb-modal h3 { margin: 0; color: #f5b7b1; }
.lb-modal p { margin: 0; font-size: .88em; color: var(--muted); }
.lb-modal b { color: var(--gold-soft); }
.lb-modal input { font-family: inherit; font-size: 1em; padding: .35em .6em; border-radius: 6px; border: 1px solid var(--gold); background: #140b1d; color: var(--text); }
.row-end { display: flex; justify-content: flex-end; gap: .5em; }
/* ---------- สร้างตัวละคร ---------- */
.cc-stage { width: 44%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .6em; }
.cc-plaque { font-size: 1.15em; }
.cc-pedestal { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.cc-pedestal::before { content: ''; position: absolute; bottom: 5%; left: 50%; width: 58%; height: 16%; transform: translateX(-50%); border-radius: 50%;
background: radial-gradient(closest-side, #d8b477, #a17f4a 55%, #6a4c29); box-shadow: 0 .45em 0 #43301a, 0 .8em 1.2em rgba(0,0,0,.65), inset 0 0 0 .25em rgba(255,235,180,.18); }
.cc-pedestal::after { content: ''; position: absolute; bottom: 12%; left: 50%; width: 40%; height: 75%; transform: translateX(-50%); pointer-events: none;
background: radial-gradient(50% 60% at 50% 70%, rgba(255,214,130,.25), transparent 70%); }
#cc-preview { position: relative; z-index: 1; height: 100%; max-height: 22em; aspect-ratio: 1; cursor: grab; touch-action: none; }
#cc-preview:active { cursor: grabbing; }
.cc-rotate { display: flex; align-items: center; gap: .5em; }
.cc-rotate > button { width: 2.2em; height: 2.2em; border-radius: 50%; font-size: 1.1em; background: var(--panel-2); color: var(--gold-soft); border: 1px solid var(--gold); }
.cc-rotate > button:hover { background: #3d2757; }
.create-panel { width: 52%; gap: .45em; padding: 1em 1.2em; }
.create-panel .label small { color: var(--muted); font-size: .8em; }
.cc-outfit-name { color: var(--gold-soft) !important; }
.cc-outfits { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35em; }
.cc-outfit { position: relative; display: flex; flex-direction: column; align-items: center; padding: .15em .1em .2em; border-radius: 8px;
background: rgba(20,11,29,.85); border: 2px solid rgba(212,175,55,.2); color: var(--muted); font-size: .62em; line-height: 1.2; }
.cc-outfit canvas { width: 100%; max-width: 4.6em; aspect-ratio: 1; margin: -.3em 0 -.2em; }
.cc-outfit span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cc-outfit:hover { border-color: rgba(232,199,102,.6); }
.cc-outfit.active { border-color: var(--gold); background: #3d2757; color: var(--gold-soft); box-shadow: 0 0 8px rgba(255,200,90,.35); }
.cc-outfit.soon::after { content: 'เร็วๆนี้'; position: absolute; top: .2em; right: .2em; font-size: .8em; padding: 0 .3em; border-radius: 4px; background: rgba(126,81,9,.9); color: #fdebd0; }
.create-panel .jobs .job { padding: .3em .2em; font-size: .9em; }
.create-panel .job-desc { font-size: .78em; min-height: 3.2em; }
.cc-actions { gap: .5em; }
.cc-actions #cc-start { margin-left: auto; }
@media (max-aspect-ratio: 4/3) {
#create-screen { flex-direction: column; overflow-y: auto; }
.cc-stage, .create-panel { width: 100%; }
.cc-pedestal { min-height: 12em; }
.lb-slots { gap: .8em; } .lb-card { width: 8em; } .lb-stage { width: 7em; height: 7em; }
.lb-bottom { flex-direction: column; } .lb-actions { width: 100%; flex-direction: row; }
}
/* ตราเกม */
.emblem { width: 4.2em; height: 4.2em; image-rendering: pixelated; filter: drop-shadow(0 0 .6em rgba(255,190,90,.55)) drop-shadow(0 .2em .3em rgba(0,0,0,.7)); animation: crest 4s ease-in-out infinite; }
@keyframes crest { 50% { transform: translateY(-.15em); filter: drop-shadow(0 0 1em rgba(255,200,110,.85)) drop-shadow(0 .2em .3em rgba(0,0,0,.7)); } }
.emblem-sm { width: 1.15em; height: 1.15em; image-rendering: pixelated; vertical-align: -.15em; margin-right: .3em; filter: drop-shadow(0 0 .3em rgba(255,190,90,.5)); }
/* ============================================================
คัมภีร์ (K): ต้นไม้พรสวรรค์ · สกิลอาวุธ · ทักษะชีวิต
============================================================ */
.window.xwide { width: 58em; max-width: 96%; top: 5%; max-height: 90%; }
.sk-modes { display: flex; gap: .4em; margin: -.1em 0 .6em; }
.sk-modes button { flex: 1; padding: .4em .5em; font: inherit; border-radius: 8px; cursor: pointer; background: linear-gradient(#2b1a3d, #1a0f26); color: var(--muted); border: 1px solid rgba(212,175,55,.35); }
.sk-modes button.active { color: #2a1b3a; background: linear-gradient(#f7dc6f, #d4af37); border-color: #fff2b3; font-weight: 600; box-shadow: 0 0 10px rgba(244,208,63,.35); }
.sk-passive { display: flex; gap: .8em; align-items: stretch; }
.sk-passive-svg { flex: 1; min-width: 0; background: radial-gradient(circle at 50% 50%, rgba(212,175,55,.08), rgba(10,5,18,.6) 70%); border: 1px solid rgba(212,175,55,.25); border-radius: 10px; }
.ptree { width: 100%; height: auto; max-height: 62vh; display: block; }
.ptree .pl { stroke: rgba(255,255,255,.14); stroke-width: 3; }
.ptree .pl.half { stroke: rgba(212,175,55,.4); }
.ptree .pl.on { stroke: #f4d03f; stroke-width: 4; filter: drop-shadow(0 0 3px rgba(244,208,63,.8)); }
.ptree .pn { cursor: pointer; }
.ptree .pn-shape { fill: #1a1024; stroke: rgba(255,255,255,.28); stroke-width: 2; transition: transform .12s; transform-box: fill-box; transform-origin: center; }
.ptree .pn.notable .pn-shape { stroke-width: 3; }
.ptree .pn.key .pn-shape { stroke-width: 3; stroke: color-mix(in srgb, var(--c) 60%, #fff 10%); }
.ptree .pn.on .pn-shape { fill: var(--c); stroke: #fff2b3; filter: drop-shadow(0 0 5px var(--c)); }
.ptree .pn.root .pn-shape { fill: #5a3d10; stroke: #f4d03f; }
.ptree .pn.can .pn-shape { stroke: #f4d03f; stroke-dasharray: 3 2; animation: pnPulse 1.2s ease-in-out infinite; }
.ptree .pn:hover .pn-shape { transform: scale(1.25); }
@keyframes pnPulse { 50% { stroke: #fff; filter: drop-shadow(0 0 6px #f4d03f); } }
.ptree .pn-t { font-size: 12px; text-anchor: middle; pointer-events: none; }
.ptree .pb-t { font-size: 13px; font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: #0d0714; stroke-width: 3px; pointer-events: none; }
.sk-passive-side { width: 17em; display: flex; flex-direction: column; gap: .6em; }
.sk-passive-info { flex: 1; background: rgba(10,5,18,.55); border: 1px solid rgba(212,175,55,.25); border-radius: 10px; padding: .7em .8em; display: flex; flex-direction: column; gap: .3em; font-size: .9em; }
.sk-passive-info > b { font-size: 1.15em; color: var(--gold-soft); }
.sk-passive-info small { color: var(--muted); font-size: .8em; }
.sk-passive-info p { margin: .2em 0; color: #a9dfbf; }
.sk-passive-info em { color: #f7dc6f; font-style: normal; font-size: .85em; }
.ms { display: flex; flex-direction: column; gap: .25em; margin-top: .3em; border-top: 1px solid rgba(212,175,55,.2); padding-top: .4em; }
.ms-row { display: grid; grid-template-columns: 6.5em 1fr 2.8em; align-items: center; gap: .4em; font-size: .85em; color: var(--muted); }
.ms-row.cur { color: #fff; }
.ms-row.cur span::after { content: ' ✔'; color: #58d68d; }
.ms-bar { height: .5em; background: #0c0612; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0,0,0,.6); }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b7950b, #f4d03f); }
.ms-row b { color: var(--gold-soft); font-weight: 500; text-align: right; }
.sk-passive-foot { display: flex; flex-direction: column; gap: .4em; font-size: .85em; color: var(--muted); }
.sk-passive-foot b { color: #f7dc6f; font-size: 1.2em; }
.sk-life { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.sk-life .hint { grid-column: 1 / -1; }
.life-card { display: flex; gap: .7em; padding: .7em; border-radius: 10px; background: linear-gradient(180deg, rgba(43,26,61,.7), rgba(18,10,27,.85)); border: 1px solid rgba(212,175,55,.3); }
.life-ic { font-size: 2em; width: 1.6em; text-align: center; filter: drop-shadow(0 2px 2px #000); }
.life-main { flex: 1; display: flex; flex-direction: column; gap: .25em; }
.life-h { display: flex; justify-content: space-between; align-items: center; }
.life-h b { color: var(--gold-soft); }
.life-main small { color: var(--muted); font-size: .78em; }
@media (max-aspect-ratio: 4/3) { .sk-passive { flex-direction: column; } .sk-passive-side { width: 100%; } .sk-life { grid-template-columns: 1fr; } }
#td-hud .td-act { position: absolute; left: 50%; bottom: 23%; transform: translateX(-50%); pointer-events: auto; z-index: 3; padding: .35em 1.1em; border-radius: 2em; font: inherit; font-size: .9em; cursor: pointer;
color: #fff3c4; background: linear-gradient(#5a1e16, #33100c); border: 2px solid var(--gold); box-shadow: 0 0 12px rgba(244,208,63,.35), 0 3px 8px rgba(0,0,0,.6); animation: actBob 1.6s ease-in-out infinite; }
@keyframes actBob { 50% { transform: translate(-50%, -3px); } }
/* ============================================================
HUD กรุงศรีฯ (td-mode): เรียงใหม่ให้โล่ง อ่านง่าย ธีมรักปิดทอง
============================================================ */
#ui { z-index: 6; } /* หน้าต่างอยู่เหนือมินิแมพ/ป้ายโซน */
body.td-mode:not(.touch) #hud > .hud-buttons.dock { position: absolute; right: .9%; top: 49%; bottom: auto; display: grid; grid-template-columns: repeat(3, auto); gap: .22em; padding: .3em .35em;
background: linear-gradient(180deg, rgba(58,20,16,.92), rgba(26,10,12,.94)); border: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.5); }
body.td-mode:not(.touch) #hud > .hud-buttons.dock button { width: 2.25em; height: 2.25em; }
body.td-mode #td-hud .td-zone { top: 42.1% !important; right: 1.2%; width: 16.67em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; transform: none; font-size: .75em; padding: .15em .9em; border-radius: 0 0 10px 10px; border-top: none;
background: linear-gradient(#6e1f17, #3e110c); color: #fff3c4; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
#td-hud .td-bottom { transition: opacity .8s; }
#td-hud .td-bottom.fade { opacity: 0; pointer-events: none; }
#chat-log { background: linear-gradient(180deg, rgba(20,10,26,.0), rgba(20,10,26,.55) 30%); border-radius: 8px; padding: .2em .3em; }
#chat-log div { background: none; }
#chat-log:empty { background: none; }
body.td-mode:not(.touch) #chat { width: 19em; font-size: .72em; }
body.td-mode #chat-log { max-height: 6.5em; }
#skill-panel .sk-tree { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#skill-panel .sk-assign { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
#skill-panel .sk-assign button { min-width: 1.5em; padding: 0 .2em; font-size: .75em; }
#skill-panel .sk-card { font-size: .88em; }
/* สร้างตัวละคร: การ์ดเลือกเพศ (ชุดลายขิดอีสาน) */
.cc-genders { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.cc-gcard { display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .3em .3em .5em; border-radius: 12px; cursor: pointer; font: inherit;
color: var(--muted); background: linear-gradient(180deg, rgba(43,26,61,.7), rgba(18,10,27,.9)); border: 2px solid rgba(212,175,55,.25); transition: transform .12s, border-color .12s; }
.cc-gcard canvas { width: 6.5em; height: 6.5em; }
.cc-gcard b { font-size: 1.05em; font-weight: 600; }
.cc-gcard:hover { border-color: rgba(232,199,102,.6); transform: translateY(-2px); }
.cc-gcard.active { color: #fff3c4; border-color: var(--gold); background: linear-gradient(180deg, rgba(110,40,30,.7), rgba(30,12,20,.92)); box-shadow: 0 0 14px rgba(255,200,90,.35); }
.cc-outfit-note { margin: .1em 0 .2em; font-size: .78em; color: var(--muted); text-align: center; }
.cc-outfit-note b { color: var(--gold-soft); }
.cc-hint { display: block; font-size: 11px; opacity: .65; margin-top: 3px; font-weight: normal; }
/* ---- Auto: เลือกเป้าหมาย ---- */
.auto-wrap { position: relative; display: inline-flex; }
.auto-cfg { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer; z-index: 2;
font-size: 10px; line-height: 16px; color: #ffe9a8; background: #3a2a10; border: 1px solid #d4a017; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.auto-cfg:hover { background: #6b4a12; }
.auto-skill.filtered::after { content: ''; position: absolute; top: 3px; left: 3px; width: 7px; height: 7px; border-radius: 50%; background: #5ad17a; box-shadow: 0 0 4px #5ad17a; }
.auto-menu { position: absolute; bottom: calc(100% + 10px); right: -8px; width: 230px; max-height: 320px; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 8px;
background: linear-gradient(180deg, rgba(38,26,12,.97), rgba(18,12,6,.97)); border: 1px solid #b8892a; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.6); color: #f3e3bf; font-size: 12px; z-index: 40; pointer-events: auto; }
.auto-menu.hidden { display: none; }
.auto-menu .am-head { display: flex; justify-content: space-between; align-items: baseline; }
.auto-menu .am-head b { color: #ffd76a; font-size: 13px; }
.auto-menu .am-head small { opacity: .65; }
.auto-menu label { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 6px; cursor: pointer; }
.auto-menu label:hover { background: rgba(255,215,106,.08); }
.auto-menu input { accent-color: #d4a017; margin: 0; }
.auto-menu .am-all { font-weight: 700; border-bottom: 1px solid rgba(212,160,23,.3); border-radius: 0; padding-bottom: 6px; }
.auto-menu .am-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.auto-menu .am-list label.off { opacity: .5; }
.auto-menu .am-list label::after { content: attr(data-cnt); margin-left: auto; font-size: 10px; opacity: .55; }
.auto-menu .am-lv { min-width: 34px; font-size: 10px; color: #f5b7b1; }
.auto-menu .am-empty, .auto-menu .am-foot { font-size: 10px; opacity: .6; text-align: center; }
/* ============ การ์ดผี ============ */
#card-panel { width: 48em; }
.card-ico { image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, #3a2350, #1a0f26); border: 1px solid #d4af37; border-radius: 3px; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6em, 1fr)); gap: .45em; margin-top: .5em; }
#card-body, #shop-list .tc-grid, .ct-row { font-size: .72em; }
#card-body .greet { font-size: .9em; font-style: normal; }
.tcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15em; padding: .35em .35em .45em; border-radius: 8px;
--c1: #6b4a1a; --c2: #d4af37; --bgc: #2b1a3d;
background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 55%, #1a0f26), #150b1f 70%);
border: 2px solid var(--c2); box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.5); font-size: .78em; text-align: center; }
.tcard.s-weapon { --c1: #8e2a1c; --c2: #e0a040; }
.tcard.s-armor { --c1: #1f4f7a; --c2: #b8c8d8; }
.tcard.s-accessory { --c1: #5b2a7a; --c2: #d4af37; }
.tcard.elite { --c2: #ff6b5b; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255,90,70,.55); }
.tc-top { display: flex; justify-content: space-between; width: 100%; font-size: .85em; }
.tc-lv { color: #f5b7b1; }
.tc-slot { color: var(--c2); font-weight: 600; }
.tc-art { position: relative; width: 100%; aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center; overflow: hidden;
background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c1) 70%, #fff 8%), #0c0612 75%); border: 1px solid rgba(0,0,0,.6); box-shadow: inset 0 0 12px rgba(0,0,0,.7); }
.tc-art img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.tc-name { color: var(--gold-soft); font-weight: 600; line-height: 1.15; }
.tc-eff { color: #9fe6b0; font-size: .9em; line-height: 1.2; min-height: 2.3em; }
.tc-flavor { color: var(--muted); font-size: .8em; font-style: italic; opacity: .8; }
.tc-count { position: absolute; bottom: .2em; right: .25em; background: rgba(0,0,0,.75); color: #fff; border-radius: 6px; padding: 0 .35em; font-size: .9em; }
.tcard.unknown .tc-art img { filter: brightness(0) drop-shadow(0 0 3px rgba(180,140,255,.5)); opacity: .75; }
.tcard.unknown { --c2: #5a4a6a; --c1: #2a2233; }
.tcard.unknown .tc-name { color: #8f7fa3; }
.tcard.unknown .tc-eff { color: #8f7fa3; }
.tcard.pick { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.tcard.pick:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #000, 0 0 12px var(--c2); }
.tcard.mini { font-size: .62em; padding: .2em; gap: 0; width: 5.6em; }
.tcard.mini .tc-art { flex: 1; aspect-ratio: auto; min-height: 0; }
.tcard.mini .tc-name { font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cs-list { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.cs-row { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .3em .6em; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(212,175,55,.25); }
.cs-row.noitem { opacity: .6; }
.cs-slot { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cs-slot b, .cs-slot .meta { overflow: hidden; text-overflow: ellipsis; }
.cs-slot small { color: var(--muted); }
.cs-slot b { color: var(--gold-soft); font-weight: 500; }
.cs-slot .meta { font-size: .8em; color: #9fe6b0; }
.cs-slot .enh { color: #f7dc6f; }
.cs-socks { display: flex; gap: .4em; flex-shrink: 0; }
.sock { width: 3.1em; height: 4.2em; border-radius: 6px; display: grid; place-items: center; position: relative; }
.sock.empty { border: 2px dashed rgba(212,175,55,.55); color: var(--gold); font-size: 1.4em; cursor: pointer; background: rgba(212,175,55,.06); }
.sock.empty:hover, .sock.empty.on { background: rgba(212,175,55,.2); border-style: solid; }
.sock.locked { border: 2px solid rgba(255,255,255,.12); color: #8f7fa3; font-size: .9em; display: flex; flex-direction: column; justify-content: center; background: rgba(0,0,0,.3); }
.sock.full { cursor: pointer; }
.sock.full .tcard.mini { width: 100%; height: 100%; font-size: .56em; }
.sock-x { position: absolute; bottom: -.2em; left: 50%; transform: translateX(-50%); font-size: .65em; background: #7a1d14; color: #fff; padding: 0 .4em; border-radius: 4px; opacity: 0; transition: opacity .15s; }
.sock.full:hover .sock-x { opacity: 1; }
.cs-pick { margin-top: .6em; padding: .5em; border-radius: 8px; border: 1px solid var(--gold); background: rgba(212,175,55,.06); }
.cs-pick-h { display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.cs-total { display: flex; justify-content: space-between; gap: 1em; margin-top: .7em; padding: .45em .6em; border-top: 1px solid rgba(212,175,55,.35); }
.cs-total b { color: #9fe6b0; font-weight: 500; text-align: right; }
.cs-foot { margin-top: .5em; font-size: .8em; text-align: center; }
.cb-head { display: flex; flex-direction: column; gap: .25em; }
.cb-head b { color: var(--gold-soft); }
.cb-bar { height: .55em; border-radius: 4px; background: rgba(0,0,0,.5); border: 1px solid rgba(212,175,55,.4); overflow: hidden; }
.cb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9a7b1c, #f7dc6f); }
.cb-tiers { display: flex; flex-wrap: wrap; gap: .3em .8em; margin: .45em 0; font-size: .8em; color: var(--muted); }
.cb-tiers .on { color: #9fe6b0; }
.eq-card { display: inline-block; margin-left: .2em; vertical-align: middle; }
.eq-card .card-ico { width: 1.2em; height: 1.2em; }
/* แลกการ์ด */
.ct-row { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; justify-content: center; margin: .4em 0; }
.ct-slots { display: flex; gap: .4em; }
.tr-slot { width: 3.4em; height: 4.5em; border-radius: 6px; border: 2px dashed rgba(212,175,55,.5); display: grid; place-items: center; color: var(--gold); font-size: 1.3em; }
.tr-slot.full { border-style: solid; cursor: pointer; font-size: 1em; }
.tr-slot.full .tcard.mini { width: 100%; height: 100%; font-size: .56em; }
.tr-slot.big { border-style: solid; font-size: 2em; background: rgba(212,175,55,.1); }
.ct-arrow { color: var(--gold); font-size: 1.4em; }
/* ป๊อปอัปได้การ์ด */
.card-get { position: absolute; inset: 0; display: grid; place-items: center; z-index: 60; background: radial-gradient(circle, rgba(20,8,30,.55), rgba(0,0,0,.7)); pointer-events: auto; animation: cgIn .3s ease-out; transition: opacity .5s; }
.card-get.out { opacity: 0; }
.cg-ray { position: absolute; width: 36em; height: 36em; background: repeating-conic-gradient(from 0deg, rgba(247,220,111,.18) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: cgSpin 8s linear infinite; mask: radial-gradient(circle, #000 20%, transparent 65%); }
.cg-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5em; }
.cg-inner .tcard { width: 12em; font-size: 1em; animation: cgFlip .7s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 0 0 1px #000, 0 0 30px rgba(247,220,111,.6); }
.cg-title { font-size: 1.5em; color: #ffd76a; text-shadow: 0 2px 0 #5b1a14, 0 0 12px rgba(255,215,106,.8); }
.cg-sub { color: var(--text); font-size: .9em; }
@keyframes cgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cgSpin { to { transform: rotate(360deg); } }
@keyframes cgFlip { 0% { transform: rotateY(90deg) scale(.6); } 60% { transform: rotateY(-10deg) scale(1.05); } 100% { transform: rotateY(0) scale(1); } }
/* ---------- ช่องสวมใส่แบบ PoE ---------- */
.eq-grid { grid-column: 1 / -1; display: grid; gap: .35em; margin: 0 auto .3em; width: min(100%, 22em);
grid-template-columns: repeat(4, 1fr); grid-auto-rows: 3.6em;
grid-template-areas: "weapon helm helm acc1" "weapon armor armor acc2" "gloves armor armor boots" "fl1 belt belt fl2"; }
.eqs-weapon { grid-area: weapon; } .eqs-helm { grid-area: helm; } .eqs-accessory { grid-area: acc1; } .eqs-accessory2 { grid-area: acc2; }
.eqs-armor { grid-area: armor; } .eqs-gloves { grid-area: gloves; } .eqs-boots { grid-area: boots; }
.eqs-flask { grid-area: fl1; } .eqs-flask2 { grid-area: fl2; } .eqs-belt { grid-area: belt; }
.eqs { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
background: radial-gradient(circle at 50% 40%, #2a1838, #120a19); border: 2px solid #4a3a2a; border-radius: 6px; cursor: pointer; font-size: .8em; }
.eqs:hover { border-color: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,.5); }
.eqs.empty { cursor: default; border-style: dashed; border-color: rgba(212,175,55,.3); }
.eqs.empty:hover { box-shadow: none; }
.eqs .ph { font-size: 1.6em; opacity: .25; filter: grayscale(1); }
.eqs .ico { font-size: 2em; line-height: 1; margin-top: -.3em; }
.eqs .ico img { width: 1.4em; height: 1.4em; image-rendering: pixelated; display: block; }
.eqs-weapon .ico, .eqs-armor .ico { font-size: 2.8em; }
.eqs small { position: absolute; bottom: 1px; left: 2px; right: 2px; font-size: .68em; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqs:not(.empty) small { color: var(--text); text-shadow: 0 0 3px #000; opacity: .85; }
.eqs .enh { position: absolute; top: 1px; right: 3px; font-size: .95em; }
.eqs .fl-ch { position: absolute; top: 1px; left: 3px; font-size: .8em; color: #9fe6ff; text-shadow: 0 0 3px #000; }
.eqs-cards { position: absolute; top: 3px; left: 3px; display: flex; gap: 2px; }
.eqs-cards i { width: .5em; height: .7em; background: #f4d03f; border-radius: 2px; box-shadow: 0 0 3px #f4d03f; }
.eqs.r2 { border-color: #5dd39e; } .eqs.r3 { border-color: #5fa8ff; } .eqs.r4 { border-color: #c58cff; }
.eqs.r5 { border-color: #ffd35c; box-shadow: inset 0 0 10px rgba(255,211,92,.35); }
/* ปุ่มขวดยาบน HUD (Q / E) */
#flask-bar { display: flex; gap: .3em; }
.flask-btn { position: relative; width: 2.6em; height: 2.9em; border: 2px solid #4a3a2a; border-radius: 6px 6px 10px 10px; background: #120a19; color: #fff; padding: 0; overflow: hidden; cursor: pointer; }
.flask-btn .fill { position: absolute; left: 0; right: 0; bottom: 0; transition: height .2s; opacity: .55; }
.flask-btn.hp .fill { background: linear-gradient(#ff6b6b, #a01818); } .flask-btn.mp .fill { background: linear-gradient(#6bb6ff, #1840a0); }
.flask-btn .ic { position: relative; font-size: 1.1em; line-height: 1.6em; display: block; }
.flask-btn .ic img { width: 1.6em; height: 1.6em; image-rendering: pixelated; }
.flask-btn .key { position: absolute; top: 0; left: 2px; font-size: .6em; color: var(--gold-soft); }
.flask-btn .n { position: absolute; bottom: 0; right: 2px; font-size: .62em; text-shadow: 0 0 3px #000; }
.flask-btn.none { opacity: .35; } .flask-btn.dry { filter: grayscale(.8); }