/* =====================================================================
 * theme_lux.css — LUXURY THEME (โทน เทา • ดำ • ขาว แนวโมเดิร์นไฮคลาส)
 * ---------------------------------------------------------------------
 *  โหลดทับ style.css: เปลี่ยนทุกหน้าต่าง/HUD/ปุ่ม เป็นโทนโมโนโครม
 *  • พื้นดำด้าน + ขอบเทาบาง 1px + แสงไฮไลต์ขาวจาง ๆ
 *  • หัวข้อตัวพิมพ์ใหญ่เว้นระยะ (letter-spacing) • ปุ่มหลัก = ขาวทึบตัวอักษรดำ
 *  • สีมีไว้เฉพาะข้อมูลสำคัญ: HP/MP, เกรดไอเทม, ความหายาก
 *  + สไตล์ของหน้าต่างใหม่ v4 ทั้งหมด (Forge, Farm, Cook, Fishing, Quest, Pass, World Map, Trade)
 * ===================================================================== */
:root {
  --lx-0: #070708; --lx-1: #0f0f11; --lx-2: #151518; --lx-3: #1d1d21; --lx-4: #26262b;
  --lx-line: #2e2e35; --lx-line2: #45454e; --lx-text: #ececef; --lx-dim: #9b9ba4; --lx-mute: #6c6c75; --lx-white: #ffffff;
  --lx-glow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 20px 50px rgba(0,0,0,.65);
  --font: "Segoe UI", "Noto Sans Thai", Tahoma, "Leelawadee UI", sans-serif;
  --ink: #ececef; --panel: #121215;
}
html, body { color: var(--lx-text); background: #000; }

/* ------------------------------ ปุ่ม ------------------------------ */
.btn { background: linear-gradient(#26262b, #18181c); border: 1px solid var(--lx-line2); border-radius: 3px; color: var(--lx-text); font-weight: 600; letter-spacing: .3px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.btn:hover { border-color: #8a8a94; filter: none; background: linear-gradient(#2e2e34, #1d1d22); }
.btn.gold { background: linear-gradient(#ffffff, #d8d8dc); border-color: #ffffff; color: #0b0b0c; }
.btn.gold:hover { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.35); }
.btn.pink { background: linear-gradient(#e6e6ea, #9d9da6); border-color: #cfcfd6; color: #0b0b0c; text-shadow: none; }
.btn.red { background: transparent; border-color: #8b2b2b; color: #ff8a80; }
.btn.plus { background: #fff; border-color: #fff; color: #000; }
.btn[disabled], button[disabled] { opacity: .35; cursor: not-allowed; }
.chip { background: var(--lx-3); border: 1px solid var(--lx-line2); color: var(--lx-dim); border-radius: 2px; }
.chip.on { background: #fff; border-color: #fff; color: #000; }
.swatch { border-color: #111; box-shadow: 0 0 0 1px var(--lx-line2); }
.swatch.on { box-shadow: 0 0 0 2px #fff; }
input[type=text], input:not([type]), input[type=number], select, textarea { background: var(--lx-1); border: 1px solid var(--lx-line2); color: var(--lx-text); border-radius: 2px; }
.hint { color: var(--lx-mute); } .empty-msg { color: var(--lx-mute); }
.sub-title { color: var(--lx-white); border-bottom: 1px solid var(--lx-line); text-transform: uppercase; letter-spacing: 1.5px; font-size: 10.5px; font-weight: 700; }
.kv { border-bottom: 1px solid var(--lx-2); } .kv b.dmg { color: #fff; }
.good { color: #b9f6ca; } .bad { color: #ff8a80; }

/* ------------------------------ หน้าต่าง ------------------------------ */
.win { background: linear-gradient(180deg, rgba(24,24,28,.97), rgba(12,12,14,.98)); border: 1px solid var(--lx-line2); border-radius: 4px; box-shadow: var(--lx-glow); backdrop-filter: blur(6px); color: var(--lx-text); }
.win::before { content: ''; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 35%); }
.win-head { background: linear-gradient(#1f1f24, #111114); border-bottom: 1px solid var(--lx-line); border-radius: 4px 4px 0 0; padding: 7px 10px; text-shadow: none; }
.win-title { text-transform: uppercase; letter-spacing: 2px; font-size: 11.5px; font-weight: 700; color: #fff; }
.win-key { color: var(--lx-mute); font-family: monospace; }
.win-x { background: transparent; border: 1px solid var(--lx-line2); color: var(--lx-dim); border-radius: 2px; }
.win-x:hover { color: #fff; border-color: #fff; }
.win-body { scrollbar-color: #3a3a42 transparent; }
.win-body::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 6px; height: 6px; } .win-body::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: #3a3a42; border-radius: 3px; }
.tabs { border-bottom: 1px solid var(--lx-line); gap: 0; }
.tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--lx-mute); border-radius: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 10.5px; padding: 6px 10px; }
.tab:hover { color: #fff; } .tab.on { background: transparent; color: #fff; border-bottom-color: #fff; }
.money { background: var(--lx-1); border: 1px solid var(--lx-line); border-radius: 2px; } .meso { color: #f5f5f5; } .nx { color: #d7d7dd; }
.mini-bar { background: #050506; border: 1px solid var(--lx-line); border-radius: 1px; }
.mini-bar span { text-shadow: 0 0 3px #000; }

/* ------------------------------ ช่องไอเทม ------------------------------ */
.slot { background: linear-gradient(#1c1c20, #121215); border: 1px solid var(--lx-line); border-radius: 2px; }
.slot.empty { background: #0c0c0e; box-shadow: none; }
.slot:not(.empty):hover { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.scroll-hint { background: #1b1b1f; border-color: #fff; color: #fff; }
.eq-cell label { color: var(--lx-mute); text-transform: uppercase; letter-spacing: .5px; font-size: 9px; }
.eq-mid { background: radial-gradient(#2a2a30, #121215); border: 1px solid var(--lx-line); border-radius: 3px; }
.eq-name small { color: var(--lx-dim); }
.eq-acc { background: #0e0e10; border: 1px solid var(--lx-line); border-radius: 3px; }
.eq-cash { grid-template-columns: repeat(7, 1fr); }
.stat-head, .money, .ap-box, .sp-box { background: var(--lx-1); border: 1px solid var(--lx-line); color: var(--lx-text); border-radius: 2px; }
.stat-head small { color: var(--lx-dim); } .big-lv { color: #fff; } .ap-box b, .sp-box b { color: #fff; }
.st-row { border-bottom: 1px solid var(--lx-2); } .st-row small { color: var(--lx-mute); } .st-row.main span { color: #fff; } .st-row.sub span { color: #bdbdc6; }
.sk-row, .q-card, .pm-row, .npc-text, .cash-item, .shop-row, .cls-card, .auto-sk { background: var(--lx-2) !important; border: 1px solid var(--lx-line) !important; color: var(--lx-text); border-radius: 3px; }
.sk-info small, .sk-desc, .q-text, .q-rew, .pm-row small, .fr-row small, .shop-row small { color: var(--lx-dim) !important; }
.sk-lv { color: #fff; } .sk-ic { border-color: var(--lx-line2); border-radius: 2px; }
.q-card.ready { border-color: #fff !important; box-shadow: 0 0 0 1px #fff inset; }
.tag { background: #333; border-radius: 2px; letter-spacing: .5px; } .tag.active { background: #3a3a42; } .tag.ready { background: #fff; color: #000; } .tag.available { background: #6c6c75; } .tag.done { background: #1f1f24; color: #9b9ba4; }
.npc-port { background: radial-gradient(#2a2a30, #121215); border: 1px solid var(--lx-line); border-radius: 3px; } .npc-port small { color: var(--lx-dim); }
.btn.npc { text-align: left; }
.shop-row:hover { background: var(--lx-3) !important; } .price { color: #fff; }
.cash-item { background: linear-gradient(#1d1d22, #131316) !important; } .cash-item small { color: var(--lx-mute); }
.ci-img { background: radial-gradient(#2e2e35, #16161a); border-radius: 2px; }
.cash-item.trying { box-shadow: 0 0 0 1px #fff; }
.cash-side { background: linear-gradient(#18181c, #0f0f11); border: 1px solid var(--lx-line); border-radius: 3px; }
.nx-box { background: #fff; color: #000; border-radius: 2px; font-weight: 700; }
.fr-row { border-bottom: 1px solid var(--lx-2); } .pm-row.me { background: #202026 !important; }
.party-bonus { background: #121215; border-color: var(--lx-line); color: var(--lx-text); }
.emblem { box-shadow: 0 0 0 1px #000; }
table.keys td { border-bottom: 1px solid var(--lx-2); } kbd { background: #0b0b0c; color: #fff; border-color: var(--lx-line2); border-radius: 2px; }
.c-stats { background: var(--lx-1); border-color: var(--lx-line); color: var(--lx-text); }
.cls-card b { color: #fff; } .cls-card small, .cls-card em { color: var(--lx-dim); }
.cls-card.on { background: #26262c !important; box-shadow: 0 0 0 1px #fff; border-top: 3px solid var(--cc) !important; }
.create-box, .death-box { background: linear-gradient(#18181c, #0d0d0f); border: 1px solid var(--lx-line2); border-radius: 4px; color: var(--lx-text); }
.create-box h2 { color: #fff; letter-spacing: 3px; text-transform: uppercase; font-weight: 300; }
.create-left .preview { background: radial-gradient(#2a2a30, #0f0f11); border-color: var(--lx-line); }
.br-label { color: #fff; }

/* ------------------------------ HUD ------------------------------ */
#hud { background: linear-gradient(rgba(20,20,23,.96), rgba(6,6,7,.98)); border-top: 1px solid var(--lx-line2); box-shadow: 0 -8px 26px rgba(0,0,0,.6); }
.hud-lv { background: #fff; color: #000; border-radius: 3px; box-shadow: none; }
#hud-job { color: var(--lx-dim); letter-spacing: 1px; text-transform: uppercase; font-size: 9.5px; } #hud-name { text-shadow: none; letter-spacing: .5px; }
.bar label { color: var(--lx-dim); }
.track { background: #050506; border: 1px solid #000; box-shadow: 0 0 0 1px var(--lx-line); border-radius: 1px; }
.hp .fill { background: linear-gradient(#ff6b6b, #c62828); } .mp .fill { background: linear-gradient(#82b1ff, #1e4fc2); }
.exp-bar { background: #050506; border-top: 1px solid var(--lx-line); } .exp-bar .fill { background: linear-gradient(90deg, #8e8e96, #ffffff); }
.hk { background: linear-gradient(#1d1d22, #0f0f12); border: 1px solid var(--lx-line); border-radius: 2px; }
.hk:hover { border-color: #fff; } .hk b { color: #fff; }
.menu-grid { grid-template-columns: repeat(9, 28px); }
.menu-grid button { background: linear-gradient(#222227, #131316); border: 1px solid var(--lx-line); border-radius: 2px; filter: grayscale(.25); }
.menu-grid button:hover { border-color: #fff; background: #26262c; filter: none; }
.cashbtn { background: linear-gradient(#fff, #cfcfd6); color: #000; border: 1px solid #fff; border-radius: 3px; text-shadow: none; box-shadow: 0 0 12px rgba(255,255,255,.25); animation: luxglow 2.4s infinite alternate; }
@keyframes luxglow { to { box-shadow: 0 0 20px rgba(255,255,255,.5); } }
.auto-btn { background: linear-gradient(#222227, #131316); border: 1px solid var(--lx-line2); color: var(--lx-dim); border-radius: 3px; }
.auto-btn.on { background: #fff; color: #000; border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.45); }
.panel { background: rgba(10,10,12,.86); border: 1px solid var(--lx-line2); border-radius: 3px; }
.mm-head { background: linear-gradient(#1f1f24, #121215); color: #fff; letter-spacing: 1.5px; }
#chat { background: rgba(8,8,10,.78); border: 1px solid var(--lx-line); border-radius: 3px; }
.ctab { background: transparent; border: none; color: var(--lx-mute); border-radius: 0; text-transform: uppercase; letter-spacing: 1px; } .ctab.on { background: transparent; color: #fff; border-bottom: 1px solid #fff; }
.chat-input { border-top: 1px solid var(--lx-line); } .chat-input select { background: #0b0b0c; border-color: var(--lx-line); } .chat-input input { background: #0b0b0c; color: #fff; }
.cm.sys { color: #d7d7dd; } .cm.party { color: #ffb6d5; } .cm.guild { color: #c8f7d8; } .cm.whisper { color: #b3e5fc; }
.notice { background: rgba(10,10,12,.92); border: 1px solid var(--lx-line2); border-radius: 2px; letter-spacing: .3px; font-weight: 600; }
.notice.err { border-color: #8b2b2b; color: #ffcdd2; }
.b-title { background: linear-gradient(#ffffff, #b8b8c0 60%, #6c6c75); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; font-style: normal; font-weight: 800; letter-spacing: 8px; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 16px rgba(255,255,255,.35)); }
.b-sub { letter-spacing: 3px; }
#tooltip { background: rgba(8,8,10,.97); border: 1px solid var(--lx-line2); border-radius: 3px; }
.tt-stats { border-color: var(--lx-line); } .tt-desc { color: #e0e0e6; } .tt-desc.next { color: #b3e5fc; } .tt-price { color: var(--lx-dim); } .tt-sub { color: var(--lx-dim); }
.tt-ilv { color: var(--lx-dim); font-size: 10.5px; }
.buff { border: 1px solid var(--lx-line2); border-radius: 2px; } .buff.real { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,.35); }
.bb-track { border: 1px solid #fff; border-radius: 1px; background: #0a0000; }
.logo h1 { background: linear-gradient(#ffffff, #c9c9d0 55%, #7a7a84); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; font-style: normal; letter-spacing: 10px; filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 22px rgba(255,255,255,.3)); font-weight: 800; }
.logo h1 span { -webkit-text-stroke: 0; letter-spacing: 16px; }
.big-btn { background: linear-gradient(#26262c, #111114); border: 1px solid var(--lx-line2); border-radius: 3px; box-shadow: 0 10px 26px rgba(0,0,0,.6); letter-spacing: 2px; text-transform: uppercase; }
.big-btn.gold { background: linear-gradient(#ffffff, #cfcfd6); color: #000; border-color: #fff; box-shadow: 0 0 20px rgba(255,255,255,.25), 0 10px 26px rgba(0,0,0,.6); }
.screen { background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.85)); }
.mmenu { background: rgba(8,8,10,.95); border: 1px solid var(--lx-line2); border-radius: 4px; }
.mmenu button { background: linear-gradient(#222227, #131316); border: 1px solid var(--lx-line); border-radius: 3px; }
.mt { background: rgba(12,12,14,.85); border: 1px solid var(--lx-line2); border-radius: 4px; }
.mt.on { background: #fff; color: #000; box-shadow: 0 0 10px rgba(255,255,255,.5); }
.mb { border: 1px solid rgba(255,255,255,.55); background: radial-gradient(circle at 35% 30%, rgba(70,70,78,.9), rgba(12,12,14,.9)); }
.mb.atk { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(150,150,158,.95)); color: #000; }
.mb.jump { background: radial-gradient(circle at 35% 30%, rgba(90,90,98,.95), rgba(20,20,24,.95)); }
.joy-ring { border-color: rgba(255,255,255,.35); } .joy-knob { background: radial-gradient(circle at 35% 30%, #fff, #b0b0b8 60%, #55555d); }
.auto-big.on { background: #fff !important; color: #000 !important; }

/* ====================== มือถือ: ขนาดปุ่ม + โหมดจัดปุ่ม ====================== */
.joy, .mb { transform: scale(var(--mscale, 1)); transform-origin: center; }
.mb.on { transform: scale(calc(var(--mscale, 1) * .92)); }
#mobile-ui.editing { background: rgba(0,0,0,.35); pointer-events: auto; }
#mobile-ui.editing .joy, #mobile-ui.editing .mb, #mobile-ui.editing .mtop { outline: 1px dashed #fff; outline-offset: 3px; cursor: grab; animation: wiggle .5s infinite alternate; }
#mobile-ui.editing .dragging { outline: 2px solid #fff; animation: none; opacity: .85; }
@keyframes wiggle { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.medit-bar { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 60; display: flex; gap: 6px; align-items: center; background: rgba(8,8,10,.95); border: 1px solid #fff; border-radius: 4px; padding: 6px 10px; color: #fff; font-size: 12px; pointer-events: auto; }
.medit-bar span { color: var(--lx-dim); font-size: 11px; }
.medit-bar button { background: #1d1d22; border: 1px solid var(--lx-line2); color: #fff; border-radius: 3px; padding: 6px 10px; font-weight: 700; }
.medit-bar button.ok { background: #fff; color: #000; }

/* ============================== v4: Class Tree ============================== */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.path-card { background: linear-gradient(#1d1d22, #121215); border: 1px solid var(--lx-line); border-top: 3px solid var(--cc); border-radius: 3px; padding: 6px; text-align: center; font-size: 10.5px; display: flex; flex-direction: column; gap: 3px; }
.path-card b { font-size: 14px; letter-spacing: 1px; color: #fff; } .path-card small { color: var(--lx-dim); } .path-card p { margin: 2px 0; color: #d5d5db; line-height: 1.35; } .path-card em { color: var(--lx-mute); font-style: normal; font-size: 9.5px; }
.path-card .preview { background: radial-gradient(#2a2a30, #0f0f11); border-radius: 3px; }
.job5-box { background: #0d0d0f; border: 1px solid #fff; border-radius: 3px; padding: 7px; margin: 6px 0; line-height: 1.7; }
.tree-mini { margin: 4px 0; font-size: 10px; color: var(--lx-dim); } .tree-mini span { display: inline-block; border: 1px solid; border-radius: 2px; padding: 0 5px; margin: 1px 2px; color: #fff; }
.cls-grid:has(.cls-card.base) { grid-template-columns: repeat(2, 1fr); }

/* ============================ v4: Enhancement Forge ============================ */
.forge { display: grid; grid-template-columns: 170px 1fr 190px; gap: 8px; }
.fg-col { background: #0c0c0e; border: 1px solid var(--lx-line); border-radius: 3px; padding: 6px; min-width: 0; }
.fg-h { font-size: 9.5px; letter-spacing: 2px; color: var(--lx-mute); margin-bottom: 5px; }
.fg-list { max-height: 330px; display: flex; flex-direction: column; gap: 3px; }
.fg-mat, .fg-g { display: flex; gap: 6px; align-items: center; padding: 4px; border: 1px solid var(--lx-line); border-radius: 2px; cursor: pointer; background: #141417; font-size: 10.5px; }
.fg-mat:hover, .fg-g:hover { border-color: #8a8a94; } .fg-mat.on, .fg-g.on { border-color: #fff; background: #222228; box-shadow: 0 0 10px rgba(255,255,255,.12); }
.fg-mat img, .fg-g img { width: 30px; height: 30px; image-rendering: pixelated; } .fg-mat div, .fg-g div { flex: 1; min-width: 0; } .fg-mat b, .fg-g b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fg-mat small, .fg-g small { color: var(--lx-mute); } .fg-mat span { color: #fff; font-weight: 700; }
.fg-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fg-altar { position: relative; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.fg-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 0 30px rgba(255,255,255,.08) inset; }
.fg-ring::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.25); animation: spin 18s linear infinite; }
.fg-runes { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; font-size: 12px; letter-spacing: 6px; color: rgba(255,255,255,.35); animation: spin 24s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.fg-item { position: relative; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; background: radial-gradient(#2e2e35, #0d0d0f); border: 1px solid #fff; border-radius: 4px; z-index: 1; }
.fg-item.empty { color: var(--lx-mute); font-size: 10px; border-style: dashed; border-color: var(--lx-line2); text-align: center; }
.fg-item img { width: 56px; height: 56px; image-rendering: pixelated; } .fg-item span { position: absolute; right: 4px; top: 2px; font-weight: 800; color: #fff; text-shadow: 0 0 4px #000; }
.fg-item.r-rare { box-shadow: 0 0 14px #42a5f5; } .fg-item.r-epic { box-shadow: 0 0 16px #ab47bc; } .fg-item.r-legend { box-shadow: 0 0 18px #ffb300; } .fg-item.r-mythic { box-shadow: 0 0 22px #ff1744; }
.forge.busy .fg-ring { animation: forgeglow .25s infinite alternate; border-color: #fff; }
.forge.busy .fg-runes { animation-duration: 1.2s; color: #fff; }
.forge.busy .fg-item { animation: shake .09s infinite; }
@keyframes forgeglow { from { box-shadow: 0 0 10px #fff, 0 0 40px rgba(255,255,255,.4) inset; } to { box-shadow: 0 0 40px #fff, 0 0 10px rgba(255,255,255,.2) inset; } }
@keyframes shake { 0% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 100% { transform: translate(1px, 1px); } }
.fg-result { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; letter-spacing: 5px; z-index: 2; animation: pop .35s; text-shadow: 0 0 18px currentColor, 0 2px 0 #000; }
.fg-result small { font-size: 12px; letter-spacing: 1px; }
.fg-altar.win .fg-result { color: #fff; } .fg-altar.lose .fg-result { color: #ff5252; }
.fg-altar.win .fg-ring { box-shadow: 0 0 40px rgba(255,255,255,.5); } .fg-altar.lose .fg-item { filter: grayscale(1) brightness(.6); }
.fg-name { font-weight: 800; letter-spacing: .5px; } .fg-sub { font-size: 10px; color: var(--lx-mute); }
.fg-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 10.5px; }
.fg-stat { display: flex; gap: 4px; border-bottom: 1px solid var(--lx-2); } .fg-stat span { flex: 1; color: var(--lx-dim); } .fg-stat i { color: #b9f6ca; font-style: normal; }
.fg-stones { display: flex; gap: 6px; width: 100%; }
.fg-stone { flex: 1; display: flex; gap: 4px; align-items: center; border: 1px solid var(--lx-line); padding: 3px; border-radius: 2px; cursor: pointer; font-size: 10px; } .fg-stone img { width: 24px; height: 24px; } .fg-stone small { display: block; color: var(--lx-mute); }
.fg-stone.on { border-color: #fff; background: #222228; } .fg-stone.none { opacity: .4; }
.fg-rate { position: relative; width: 100%; height: 16px; background: #050506; border: 1px solid var(--lx-line2); }
.fg-rate div { height: 100%; background: linear-gradient(90deg, #6c6c75, #fff); } .fg-rate span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 16px; font-weight: 700; mix-blend-mode: difference; color: #fff; }
.fg-go { width: 100%; padding: 10px; font-size: 14px; font-weight: 900; letter-spacing: 4px; background: linear-gradient(#fff, #cfcfd6); color: #000; border: 1px solid #fff; border-radius: 2px; box-shadow: 0 0 18px rgba(255,255,255,.25); }
.fg-go:hover:not([disabled]) { box-shadow: 0 0 28px rgba(255,255,255,.55); }

/* ============================ v4: Cash Shop ============================ */
.cash-hint { font-size: 10.5px; color: var(--lx-dim); margin: 0 0 6px; padding: 4px 6px; border-left: 2px solid #fff; background: #0c0c0e; }
.cash-item { position: relative; }
.cash-item.aura { border-color: #6c6c75 !important; box-shadow: 0 0 14px rgba(255,255,255,.06) inset; }
.cash-item.aura .ci-img { background: radial-gradient(#3a3a42, #0b0b0c); animation: auraimg 2.5s infinite alternate; }
@keyframes auraimg { to { box-shadow: 0 0 14px rgba(255,255,255,.3) inset; } }
.ci-badge { position: absolute; left: 3px; top: 3px; background: #fff; color: #000; font-style: normal; font-size: 8px; font-weight: 900; padding: 0 4px; border-radius: 1px; letter-spacing: .5px; z-index: 1; }
.ci-badge.pass { left: auto; right: 3px; background: #0b0b0c; color: #fff; border: 1px solid #fff; }
.topup { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tp-pack { position: relative; background: linear-gradient(#1d1d22, #111114); border: 1px solid var(--lx-line2); color: #fff; border-radius: 3px; padding: 12px 6px; }
.tp-pack:hover { border-color: #fff; } .tp-pack b { display: block; font-size: 14px; } .tp-pack small { color: var(--lx-dim); } .tp-pack i { position: absolute; right: 4px; top: 3px; font-style: normal; font-size: 9px; background: #fff; color: #000; padding: 0 4px; font-weight: 800; }

/* ============================ v4: Farm / Cook / Fishing ============================ */
.warn-box { background: #0c0c0e; border: 1px solid var(--lx-line2); border-left: 2px solid #fff; padding: 6px; margin-bottom: 6px; border-radius: 2px; }
.farm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.plot { background: linear-gradient(#1a1714, #100e0c); border: 1px solid var(--lx-line); border-radius: 3px; padding: 6px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; min-height: 118px; }
.plot.ripe { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.18); } .plot-h { font-size: 10px; color: var(--lx-dim); letter-spacing: .5px; } .plot-ic { font-size: 28px; opacity: .6; }
.plot-crop { width: 42px; height: 42px; image-rendering: pixelated; } .plot .mini-bar { width: 100%; }
.plot-seeds { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.seedbtn { position: relative; width: 34px; height: 34px; padding: 0; background: #141417; border: 1px solid var(--lx-line2); border-radius: 2px; } .seedbtn:hover { border-color: #fff; }
.seedbtn img { width: 28px; height: 28px; image-rendering: pixelated; } .seedbtn i { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 9px; color: #fff; text-shadow: 0 0 2px #000; }
.crop-tbl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .crop-tbl div { display: flex; gap: 4px; align-items: center; font-size: 10.5px; } .crop-tbl img { width: 24px; height: 24px; } .crop-tbl small { display: block; color: var(--lx-mute); }
.stove { display: flex; gap: 8px; align-items: center; background: #0c0c0e; border: 1px solid var(--lx-line2); border-radius: 3px; padding: 7px; margin-bottom: 6px; }
.stove.on { border-color: #ffb74d; } .stove.done { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.2); } .stove img { width: 40px; height: 40px; image-rendering: pixelated; }
.rc-list { max-height: 330px; display: flex; flex-direction: column; gap: 4px; }
.recipe { display: flex; gap: 7px; align-items: center; background: #141417; border: 1px solid var(--lx-line); border-radius: 3px; padding: 5px; } .recipe.dim { opacity: .55; }
.rc-ic { width: 40px; height: 40px; image-rendering: pixelated; background: radial-gradient(#2a2a30, #0f0f11); border-radius: 3px; }
.rc-need { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0; } .rc-need span { display: flex; align-items: center; gap: 2px; font-size: 10.5px; } .rc-need img { width: 18px; height: 18px; }
.rc-desc { font-size: 10px; color: var(--lx-dim); }
.fish-top { display: flex; gap: 8px; align-items: center; background: #0c0c0e; border: 1px solid var(--lx-line); padding: 6px; border-radius: 3px; } .fish-top img { width: 36px; height: 36px; } .fish-top small { display: block; color: var(--lx-mute); }
.fish-log { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .fish-log div { text-align: center; background: #141417; border: 1px solid var(--lx-line); border-radius: 2px; padding: 2px; } .fish-log img { width: 26px; height: 26px; } .fish-log .unk img { filter: brightness(0) invert(.25); } .fish-log small { display: block; font-size: 9px; color: var(--lx-dim); }
#fish-btn { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); background: rgba(10,10,12,.9); color: #fff; border: 1px solid #fff; border-radius: 3px; padding: 9px 20px; font-size: 14px; font-weight: 800; letter-spacing: 1px; }
#fish-btn.on { background: #fff; color: #000; } #fish-btn.bite { background: #ff5252; border-color: #ff5252; color: #fff; animation: bite .2s infinite alternate; }
@keyframes bite { to { transform: translateX(-50%) scale(1.08); } }
body.m-mobile #fish-btn { bottom: auto; top: 60px; }

/* ============================ v4: Quest ============================ */
#qtrack { position: absolute; right: 10px; top: 52px; width: 230px; background: rgba(8,8,10,.82); border: 1px solid var(--lx-line); border-radius: 3px; font-size: 11px; }
.qt-head { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-bottom: 1px solid var(--lx-line); letter-spacing: 2px; font-size: 9.5px; font-weight: 700; color: #fff; }
.qt-head button { margin-left: auto; background: none; border: none; color: var(--lx-dim); } .qt-auto { color: #b9f6ca; animation: blink 1s infinite alternate; }
@keyframes blink { to { opacity: .4; } }
.qt-row { position: relative; padding: 5px 50px 5px 8px; border-bottom: 1px solid var(--lx-2); }
.qt-row.ready { background: rgba(255,255,255,.06); } .qt-row.nav { border-left: 2px solid #fff; }
.qt-name { font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qt-name:hover { text-decoration: underline; }
.qt-obj { color: var(--lx-dim); font-size: 10.5px; } .qt-obj b { color: #fff; } .qt-row.ready .qt-obj { color: #b9f6ca; }
.qt-btns { position: absolute; right: 4px; top: 6px; display: flex; gap: 2px; } .qt-btns button { background: #141417; border: 1px solid var(--lx-line2); color: #fff; width: 21px; height: 21px; padding: 0; border-radius: 2px; font-size: 10px; } .qt-btns button:hover { border-color: #fff; }
body.m-mobile #qtrack { top: auto; bottom: 250px; right: 8px; width: 200px; transform: scale(.9); transform-origin: 100% 100%; }
.qd { display: flex; gap: 10px; } .qd-port { width: 92px; text-align: center; flex-shrink: 0; background: radial-gradient(#2a2a30, #0d0d0f); border: 1px solid var(--lx-line); border-radius: 3px; padding: 4px; align-self: flex-start; }
.qd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qd-title { font-size: 15px; font-weight: 800; letter-spacing: .5px; color: #fff; border-bottom: 1px solid var(--lx-line); padding-bottom: 4px; }
.qd-text { line-height: 1.55; color: #dcdce2; } .qd-obj { background: #0c0c0e; border-left: 2px solid #fff; padding: 5px 7px; font-size: 11px; }
.qd-rew small { color: var(--lx-mute); letter-spacing: 2px; font-size: 9px; text-transform: uppercase; }
.qd.done .qd-title { text-align: center; letter-spacing: 3px; }
.rw-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; } .rw { display: inline-flex; align-items: center; gap: 3px; background: #141417; border: 1px solid var(--lx-line); border-radius: 2px; padding: 1px 6px 1px 2px; font-size: 10.5px; } .rw img { width: 20px; height: 20px; } .rw.exp { padding-left: 6px; }
.daily-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.daily { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; background: #141417; border: 1px solid var(--lx-line); border-radius: 3px; padding: 6px; }
.daily small { grid-column: 1; color: var(--lx-mute); } .daily .mini-bar { grid-column: 1; } .daily button, .daily .tag { grid-column: 2; grid-row: 1 / span 3; }
.daily.ready { border-color: #fff; } .daily.claimed { opacity: .5; }

/* ============================ v4: Battle Pass ============================ */
.bp-head { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(120deg, #0b0b0c, #26262c 60%, #0b0b0c); border: 1px solid var(--lx-line2); padding: 10px 12px; border-radius: 3px; }
.bp-season { font-size: 15px; font-weight: 900; letter-spacing: 3px; color: #fff; } .bp-sub { color: var(--lx-dim); font-size: 11px; margin-top: 2px; } .bp-prem { color: #fff; font-weight: 800; letter-spacing: 1px; text-shadow: 0 0 10px #fff; }
.bp-badge { width: 58px; height: 58px; border: 1px solid #fff; transform: rotate(45deg); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; box-shadow: 0 0 16px rgba(255,255,255,.25); }
.bp-badge small { font-size: 7px; letter-spacing: 2px; } .bp-badge > * { transform: rotate(-45deg); }
.bp-xp { position: relative; height: 14px; background: #050506; border: 1px solid var(--lx-line2); margin: 8px 0; } .bp-xp div { height: 100%; background: linear-gradient(90deg, #6c6c75, #fff); } .bp-xp span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 13px; font-weight: 700; mix-blend-mode: difference; }
.bp-track { display: flex; gap: 4px; } .bp-labels { display: flex; flex-direction: column; gap: 4px; padding-top: 22px; } .bp-labels div { height: 70px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: 3px; color: var(--lx-mute); text-align: center; }
.bp-scroll { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; flex: 1; }
.bp-col { flex: 0 0 70px; display: flex; flex-direction: column; gap: 4px; }
.bp-lv { text-align: center; font-size: 11px; font-weight: 800; color: var(--lx-mute); border-bottom: 1px solid var(--lx-line); } .bp-col.reached .bp-lv { color: #fff; border-bottom-color: #fff; } .bp-col.next .bp-lv { color: #b9f6ca; }
.bp-cell { position: relative; height: 70px; background: #0f0f11; border: 1px solid var(--lx-line); border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2px; }
.bp-cell img { width: 32px; height: 32px; image-rendering: pixelated; } .bp-cell small { font-size: 8.5px; line-height: 1.1; color: var(--lx-dim); max-height: 20px; overflow: hidden; }
.bp-cell.p { background: linear-gradient(#1d1d22, #0f0f11); } .bp-cell.cos { border-color: #6c6c75; } .bp-cell.cos img { filter: drop-shadow(0 0 5px rgba(255,255,255,.5)); }
.bp-cell.ok { border-color: #fff; cursor: pointer; animation: auraimg 1.2s infinite alternate; } .bp-cell.got { opacity: .45; } .bp-cell.lock img { filter: grayscale(1) brightness(.5); }
.bp-cell i { position: absolute; right: 2px; top: 1px; font-style: normal; font-size: 10px; }
.bp-buy { font-weight: 900; letter-spacing: 1px; }
.bp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.bp-mis { display: grid; grid-template-columns: 1fr 90px 36px; gap: 6px; align-items: center; font-size: 10.5px; padding: 2px 0; } .bp-mis b { text-align: right; } .bp-mis.done span { text-decoration: line-through; color: var(--lx-mute); }
.bp-perk { background: #0c0c0e; border: 1px solid var(--lx-line); border-radius: 2px; padding: 6px; margin-bottom: 4px; font-size: 11px; color: var(--lx-dim); } .bp-perk.on { color: #fff; border-color: #fff; }

/* ============================ v4: World Map ============================ */
.wm { display: grid; grid-template-columns: 1fr 280px; gap: 8px; }
.wm-mapbox { position: relative; } .wm-canvas { width: 100%; height: auto; display: block; border: 1px solid var(--lx-line2); border-radius: 3px; cursor: pointer; }
.wm-legend { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 10px; font-size: 10px; color: var(--lx-dim); background: rgba(0,0,0,.6); padding: 3px 8px; border-radius: 2px; }
.wm-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 3px; background: #9ccc65; border-radius: 50%; } .wm-legend i.d { background: #ff7043; border-radius: 0; transform: rotate(45deg); } .wm-legend i.s { background: #fafafa; }
.wm-info { background: #0c0c0e; border: 1px solid var(--lx-line); border-radius: 3px; padding: 8px; max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.wm-title b { display: block; font-size: 15px; letter-spacing: 1px; color: #fff; } .wm-title small { color: var(--lx-dim); }
.wm-tags { display: flex; flex-wrap: wrap; gap: 3px; } .wm-tags span { border: 1px solid var(--lx-line2); padding: 0 6px; font-size: 9.5px; letter-spacing: 1px; border-radius: 2px; } .wm-tags .safe { border-color: #fff; } .wm-tags .boss { border-color: #ff5252; color: #ff8a80; }
.wm-h { font-size: 9px; letter-spacing: 2.5px; color: var(--lx-mute); border-bottom: 1px solid var(--lx-line); padding-bottom: 2px; }
.wm-mobs { display: flex; flex-direction: column; gap: 3px; } .wm-mob { display: flex; gap: 6px; align-items: center; background: #141417; border: 1px solid var(--lx-line); border-radius: 2px; padding: 3px; }
.wm-mob img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; background: radial-gradient(#2a2a30, #0f0f11); } .wm-mob b { display: block; font-size: 11px; } .wm-mob small { color: var(--lx-mute); font-size: 9.5px; } .wm-mob.boss { border-color: #ff5252; }
.wm-drops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; } .wm-drop { text-align: center; background: #141417; border: 1px solid var(--lx-line); border-radius: 2px; } .wm-drop img { width: 28px; height: 28px; } .wm-drop small { display: block; font-size: 8.5px; color: var(--lx-dim); }
.wm-set { font-size: 10.5px; border: 1px solid; border-radius: 2px; padding: 5px; background: #111114; } .wm-note, .wm-empty { color: var(--lx-dim); font-size: 11px; text-align: center; padding: 6px; }
body.m-mobile .wm { grid-template-columns: 1fr; } body.m-mobile .wm-info { max-height: 180px; }

/* ============================ v4: Player Card & Trade ============================ */
#pcard { position: fixed; z-index: 70; width: 240px; background: linear-gradient(#1d1d22, #0d0d0f); border: 1px solid #fff; border-radius: 3px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.7); animation: pop .15s; }
.pc-x { position: absolute; right: 4px; top: 4px; background: none; border: none; color: var(--lx-dim); }
.pc-top { display: flex; gap: 8px; align-items: center; } .pc-top canvas { background: radial-gradient(#2e2e35, #0d0d0f); border: 1px solid var(--lx-line); border-radius: 3px; }
.pc-top b { font-size: 14px; } .pc-top small { display: block; color: var(--lx-dim); font-size: 10px; } .pc-job { font-weight: 700; font-size: 11.5px; }
.pc-on { color: #b9f6ca !important; } .pc-bot { color: var(--lx-dim); }
.pc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 7px; } .pc-btns button { background: #141417; border: 1px solid var(--lx-line2); color: #fff; border-radius: 2px; padding: 6px 2px; font-size: 11px; } .pc-btns button:hover:not([disabled]) { border-color: #fff; background: #222228; }
.trade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-side { background: #0c0c0e; border: 1px solid var(--lx-line); border-radius: 3px; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.tr-side.locked { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.15) inset; } .tr-side small { color: var(--lx-mute); }
.tr-h { display: flex; align-items: center; gap: 5px; font-weight: 800; letter-spacing: 1px; } .tr-h canvas { background: #1b1b1f; border-radius: 2px; }
.tr-grid { display: grid; grid-template-columns: repeat(3, 46px); gap: 3px; justify-content: center; }
.tr-meso { display: flex; gap: 4px; align-items: center; } .tr-meso input { width: 110px; }
.tr-inv { max-height: 150px; }