/* =====================================================================
   neon.css — ธีม “Dark Fantasy Neon” (โหลดต่อท้าย style.css)
   ไฟล์นี้เปลี่ยนแค่หน้าตา: สี แสง เงา ระยะ และอนิเมชัน
   ไม่มีการแตะต้องตรรกะเกม — ลบไฟล์นี้ (และ fx.js) ออก เว็บจะกลับเป็นหน้าตาเดิมทันที
   ===================================================================== */

/* ---------- 1) โทเคนสี: Slate-950 · Deep Purple · Electric Cyan ---------- */
:root{
 --table:#020617;                     /* slate-950 */
 --panel:#0b1024; --panel2:#111735; --panel3:#18204a;
 --line:rgba(148,163,184,.13); --line2:rgba(167,139,250,.32);
 /* การ์ด “กระดาษ” เดิม → แผ่นหินเวทมนตร์สีม่วงเข้ม */
 --paper:#16133a; --paper2:#0f0d29; --paper3:#1f1b4d;
 --ink:#e7e9f7; --ink2:#b9bfe0; --ink3:#9aa3c7;
 --hope:#fbbf24; --hope2:#fde68a; --hopeD:#b45309;
 --fear:#f43f5e; --fear2:#fb7185;
 --act:#7c3aed; --act2:#4c1d95;
 --ok:#34d399; --bad:#fb7185; --blue:#38bdf8;
 --cream:#e2e8f0; --mut:#94a3b8;
 --cyan:#22d3ee; --violet:#a78bfa; --fuchsia:#e879f9;
 --glow-v:0 0 0 1px rgba(167,139,250,.35),0 0 22px -4px rgba(167,139,250,.55);
 --glow-c:0 0 0 1px rgba(34,211,238,.45),0 0 22px -4px rgba(34,211,238,.6);
 --glass:linear-gradient(160deg,rgba(30,27,75,.78),rgba(10,14,36,.86));
 --r:16px; --r2:11px;
 --sh1:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -12px rgba(0,0,0,.8);
 --sh2:0 30px 80px -20px rgba(0,0,0,.9);
 --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 2) พื้นหลังเวทมนตร์ที่ขยับช้า ๆ (Ambient Motion) ---------- */
html{background:#020617}
body{background:#020617;color:var(--cream)}
body::before,body::after{content:'';position:fixed;inset:-20%;z-index:-1;pointer-events:none}
body::before{
 background:
  radial-gradient(38% 32% at 22% 18%,rgba(124,58,237,.30),transparent 70%),
  radial-gradient(34% 30% at 82% 26%,rgba(34,211,238,.18),transparent 72%),
  radial-gradient(40% 36% at 60% 88%,rgba(232,121,249,.16),transparent 70%),
  radial-gradient(30% 26% at 8% 82%,rgba(56,189,248,.12),transparent 70%);
 filter:blur(10px);animation:auraDrift 38s ease-in-out infinite alternate}
body::after{
 inset:0;opacity:.55;
 background-image:
  radial-gradient(1.2px 1.2px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#c4b5fd 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 38% 68%,#a5f3fc 50%,transparent 51%),radial-gradient(1px 1px at 88% 58%,#fff 50%,transparent 51%),
  radial-gradient(1.1px 1.1px at 58% 38%,#f0abfc 50%,transparent 51%),radial-gradient(1px 1px at 22% 88%,#fff 50%,transparent 51%);
 background-size:420px 420px;animation:twinkle 7s ease-in-out infinite alternate}
@keyframes auraDrift{0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,2%,0) rotate(8deg) scale(1.06)}100%{transform:translate3d(-2%,3%,0) rotate(-6deg) scale(1.02)}}
@keyframes twinkle{from{opacity:.25}to{opacity:.6}}

/* ---------- 3) ตัวอักษร ---------- */
h1,h2,h3{color:#ddd6fe;text-shadow:0 0 18px rgba(167,139,250,.35)}
h1{background:linear-gradient(90deg,#f5d0fe,#c4b5fd 40%,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(167,139,250,.35))}
.paper h1,.paper h2,.paper h3,.acc.paper .at,.big2{color:#e9d5ff}
.paper a,a{color:#67e8f9}
small,.hint{color:var(--mut)}
.paper small,.paper .hint{color:var(--ink2)}
::selection{background:rgba(34,211,238,.35)}
*::-webkit-scrollbar-thumb{background:rgba(167,139,250,.28)}
*::-webkit-scrollbar-thumb:hover{background-color:rgba(167,139,250,.5)}

/* ---------- 4) การ์ด / แผงกระจก ---------- */
.card,.acc,.paper,.acc.paper{
 background:var(--glass);border:1px solid rgba(167,139,250,.22);color:var(--ink);
 box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 1px 0 rgba(255,255,255,.06) inset,var(--sh1);
 -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.card,.acc{border-radius:var(--r)}
.acc{transition:border-color .3s,box-shadow .3s}
.acc[open]{border-color:rgba(167,139,250,.38);box-shadow:0 0 0 1px rgba(167,139,250,.12) inset,0 0 28px -12px rgba(167,139,250,.7),var(--sh1)}
.acc>summary:hover,.acc.paper>summary:hover{background:rgba(167,139,250,.08)}
.acc .at{color:#e9d5ff}
.acc[open]>summary,.acc.paper[open]>summary{border-bottom-color:rgba(167,139,250,.18)}
.chev,.acc.paper .chev{background:rgba(167,139,250,.14);color:#c4b5fd}
.acc[open]>summary .chev{background:rgba(34,211,238,.18);color:#a5f3fc;box-shadow:0 0 12px -2px rgba(34,211,238,.6)}
.sv,.acc.paper .sv{background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.22);color:#dbe1f5}
.sv.ok,.acc.paper .sv.ok{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.5);color:#6ee7b7}
.sv.lo{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.5);color:#fcd34d}
.sv.dd{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.5);color:#fda4af}
.ent,.paper .ent{border-color:rgba(167,139,250,.14)}
.warn,.warn2,.paper .warn,.paper .warn2{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.45);color:#fecdd3}
.xp,.card:not(.paper) .xp{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.3);color:#e9d5ff}
.paper code{background:#020617;color:#a5f3fc}

/* ---------- 5) ช่องกรอก ---------- */
input,select,textarea,.paper input,.paper select,.paper textarea{
 background:rgba(2,6,23,.65);border:1px solid rgba(148,163,184,.22);color:#e2e8f0;border-radius:12px;min-height:42px}
input::placeholder,textarea::placeholder,.paper input::placeholder,.paper textarea::placeholder{color:#64748b}
input:hover,select:hover,textarea:hover{border-color:rgba(167,139,250,.5)}
input:focus,select:focus,textarea:focus,.paper input:focus,.paper select:focus,.paper textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.18),0 0 18px -4px rgba(34,211,238,.6)}
.lbl,.paper .lbl{color:#c7cdea}
select option{background:#0b1024;color:#e2e8f0}
.sw input{background:rgba(148,163,184,.2);border-color:rgba(148,163,184,.35)}
.sw input:checked{background:linear-gradient(90deg,#06b6d4,#8b5cf6);border-color:transparent;box-shadow:0 0 14px -2px rgba(34,211,238,.7)}

/* ---------- 6) ปุ่ม: เด้งนุ่ม เปล่งออร่า (Action Buttons) ---------- */
button{
 border-radius:12px;min-height:40px;color:#fff;border:1px solid rgba(255,255,255,.12);
 background:linear-gradient(135deg,#7c3aed,#a21caf);
 box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -10px rgba(168,85,247,.9);
 transition:transform .25s var(--spring),box-shadow .25s ease,filter .2s,background .3s;position:relative;isolation:isolate}
button:hover:not(:disabled){transform:translateY(-2px) scale(1.03);filter:brightness(1.12);
 box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 0 0 1px rgba(232,121,249,.45),0 10px 30px -8px rgba(217,70,239,.85)}
button:active:not(:disabled){transform:translateY(1px) scale(.95);transition-duration:.08s;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 0 18px -4px rgba(217,70,239,.8)}
button:disabled{background:rgba(51,65,85,.55);color:#64748b;border-color:rgba(148,163,184,.12);box-shadow:none}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
button.tool,.paper button.tool{
 background:linear-gradient(180deg,rgba(30,41,82,.85),rgba(15,23,52,.9));color:#dbe4ff;border:1px solid rgba(148,163,184,.22);
 box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 6px 16px -10px rgba(0,0,0,.9)}
button.tool:hover:not(:disabled),.paper button.tool:hover:not(:disabled){border-color:rgba(34,211,238,.6);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,var(--glow-c)}
button.tool.on{background:linear-gradient(135deg,#0891b2,#7c3aed);color:#fff;border-color:rgba(34,211,238,.7);box-shadow:var(--glow-c)}
button.hero{background:linear-gradient(135deg,#fde68a,#fbbf24 45%,#f59e0b);color:#1c1003;border-color:rgba(253,230,138,.8);
 box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(251,191,36,.4),0 10px 30px -8px rgba(251,191,36,.8)}
button.hero:hover:not(:disabled){box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 2px rgba(253,230,138,.7),0 0 40px -6px rgba(251,191,36,.95)}
button.hero::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 100%;animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{0%,60%{background-position:150% 0}100%{background-position:-50% 0}}
button.arm,.room2 .foot button.go{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -10px rgba(16,185,129,.9)}
button.arm:hover:not(:disabled){box-shadow:0 0 0 1px rgba(110,231,183,.5),0 10px 30px -8px rgba(16,185,129,.95)}
button.unarm{background:linear-gradient(135deg,#334155,#475569);box-shadow:0 8px 18px -12px #000}
button.d{background:linear-gradient(160deg,#1e1b4b,#312e81);border-color:rgba(167,139,250,.35);font-size:1.15rem;min-height:52px;
 box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px rgba(167,139,250,.12),0 8px 18px -10px #000}
button.d:hover:not(:disabled){background:linear-gradient(160deg,#312e81,#4338ca);box-shadow:var(--glow-v)}
button.d:active:not(:disabled){transform:rotate(-14deg) scale(.9)}
.badge{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.45);color:#ddd6fe;box-shadow:0 0 14px -4px rgba(167,139,250,.6)}

/* ---------- 7) หัวจอ / แท็บ / แผงข้าง ---------- */
.top{background:linear-gradient(180deg,rgba(2,6,23,.92),rgba(2,6,23,.7));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(167,139,250,.2);box-shadow:0 10px 30px -18px rgba(124,58,237,.8)}
.top h1{font-size:1.25rem}
.myb{background:linear-gradient(135deg,rgba(30,27,75,.95),rgba(49,46,129,.9));color:#e9d5ff;border:1px solid rgba(167,139,250,.55);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 26px -6px rgba(167,139,250,.75)}
.myb b{color:#86efac}
.myb .hudar{color:#a5f3fc}
.myb .on2{background:rgba(52,211,153,.22);color:#6ee7b7}
.tabs{background:rgba(2,6,23,.6);border-color:rgba(167,139,250,.22);border-radius:16px 16px 0 0}
.tabs button{color:#94a3b8;border-radius:11px;min-height:38px}
.tabs button:hover:not(.on){color:#e2e8f0;background:rgba(167,139,250,.1);transform:translateY(-1px)}
.tabs button.on{background:linear-gradient(135deg,#7c3aed,#0891b2);color:#fff;border-color:rgba(34,211,238,.6);box-shadow:0 0 18px -4px rgba(34,211,238,.75)}
aside .pane,aside>div:not(.tabs){scrollbar-color:rgba(167,139,250,.4) transparent}

/* ---------- 8) การ์ดสถานะ (Status Cards) ---------- */
.stats{gap:9px}
.stats span,.card:not(.paper) .stats span{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(30,27,75,.75),rgba(2,6,23,.6));border:1px solid rgba(167,139,250,.22);border-radius:14px;padding:12px 4px 9px;color:#e2e8f0}
.stats span::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#22d3ee,#a78bfa)}
.stats span:nth-child(2)::before{background:linear-gradient(90deg,#a78bfa,#e879f9)}
.stats span:nth-child(3)::before{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.stats span:nth-child(4)::before{background:linear-gradient(90deg,#34d399,#22d3ee)}
.stats span:nth-child(5)::before{background:linear-gradient(90deg,#fb7185,#e879f9)}
.stats span:nth-child(6)::before{background:linear-gradient(90deg,#38bdf8,#818cf8)}
.stats span b{font-size:1.45rem;color:#fff;text-shadow:0 0 14px rgba(167,139,250,.6)}
.stats span small{color:#a5b4fc;letter-spacing:.3px}
/* หลอดเลือด/เกราะเรืองแสง */
.hp{height:14px;background:rgba(2,6,23,.8);border:1px solid rgba(148,163,184,.18);box-shadow:inset 0 1px 4px #000}
.hp i{background:linear-gradient(90deg,#10b981,#34d399 60%,#6ee7b7);box-shadow:0 0 14px rgba(52,211,153,.75),inset 0 1px 0 rgba(255,255,255,.5);position:relative}
.hp i::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:200% 100%;animation:sheen 2.6s linear infinite}
.hpw:has(.low) .hp i{background:linear-gradient(90deg,#f59e0b,#fbbf24);box-shadow:0 0 14px rgba(251,191,36,.8)}
.hpw:has(.dead) .hp i{background:#475569;box-shadow:none}
.hpn,.paper .hpn,.acc.paper .hpn,aside .acc:not(.paper) .hpn,#pt .hpn{color:#6ee7b7}
.hp.ar i{background:linear-gradient(90deg,#0ea5e9,#67e8f9);box-shadow:0 0 14px rgba(34,211,238,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.hpn.arn,.paper .hpn.arn,.card:not(.paper) .hpn.arn,aside .acc:not(.paper) .hpn.arn,#pt .hpn.arn{color:#a5f3fc}
.hpn.arn.brk{color:#fda4af}
.hp.mini i{background:linear-gradient(90deg,#e11d48,#fb7185);box-shadow:0 0 10px rgba(251,113,133,.8)}
/* Hope / Stress เพชรเรืองแสง */
.pips i{border-color:rgba(148,163,184,.35);background:rgba(2,6,23,.6)}
.pips.hope i.on{background:linear-gradient(135deg,#fde68a,#f59e0b);border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.9)}
.pips.stress i.on{background:linear-gradient(135deg,#fda4af,#e11d48);border-color:#fb7185;box-shadow:0 0 12px rgba(244,63,94,.9)}
.res .rl{color:#e2e8f0;font-weight:700}
.arctl small{color:#a5b4fc}

/* ---------- 9) การ์ดสกิล / อาวุธ / ไอเทม: เด้งนุ่ม ๆ เมื่อชี้ ---------- */
.skc,.sk,.card:not(.paper) .sk,.stand,.aq,.tgb,.gvp,.ctlb{
 background:linear-gradient(160deg,rgba(30,27,75,.7),rgba(2,6,23,.55));color:var(--ink);border:1px solid rgba(167,139,250,.22);
 transition:transform .3s var(--spring),box-shadow .3s ease,border-color .3s}
.skc:hover,.sk:hover,.stand:hover,.tgb:hover,.gvp:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.55);box-shadow:0 0 0 1px rgba(34,211,238,.2),0 14px 34px -14px rgba(34,211,238,.6)}
.skc{border-radius:14px;box-shadow:0 10px 24px -16px #000}
.skc::before{box-shadow:0 0 12px currentColor}
.skc b,.sk b{color:#f1f5f9}
.skc .how,.skc p{color:#cbd5f5}
.sk.eqp{border-color:rgba(52,211,153,.6);box-shadow:0 0 22px -8px rgba(52,211,153,.8)}
.tg,.ieff{border-radius:20px}
.ieff{background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.32);color:#e9d5ff}
.ieff.ak,aside .acc:not(.paper) .ieff.ak{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.4);color:#a5f3fc}
.tg.hope,.ieff.hope{background:rgba(251,191,36,.14);color:#fde68a;border-color:rgba(251,191,36,.4)}
.lbp{background-color:rgba(2,6,23,.55);border-color:rgba(167,139,250,.3);color:#a5b4fc}
.onb{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 0 10px -2px rgba(16,185,129,.9)}
/* ค่าสถานะ (ปุ่มทอย) */
.st button,.card:not(.paper) .st button{background:linear-gradient(160deg,rgba(30,27,75,.85),rgba(15,23,52,.9));color:#e2e8f0;border:1px solid rgba(167,139,250,.28);border-radius:14px;min-height:76px;
 box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 8px 20px -14px #000}
.st button b{font-size:1.5rem;color:#fff;text-shadow:0 0 16px rgba(167,139,250,.8)}
.st button small{color:#a5f3fc;letter-spacing:1.5px}
.st button em{color:#94a3b8}
.st button:hover:not(:disabled){border-color:rgba(34,211,238,.7);box-shadow:var(--glow-c);transform:translateY(-3px) scale(1.03)}
.advseg{background:rgba(2,6,23,.6);border:1px solid rgba(148,163,184,.15)}
.advseg button{color:#cbd5e1;background:transparent;box-shadow:none}
.advseg button.on{background:linear-gradient(135deg,#334155,#1e293b);color:#fff;border-color:rgba(148,163,184,.4);box-shadow:none}
.advseg button.on.up{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 0 16px -4px rgba(16,185,129,.9)}
.advseg button.on.dn{background:linear-gradient(135deg,#be123c,#f43f5e);box-shadow:0 0 16px -4px rgba(244,63,94,.9)}
.exps button{background:rgba(30,27,75,.8);color:#e9d5ff;border:1px solid rgba(167,139,250,.35);box-shadow:none}
.exps button.on{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#1c1003;box-shadow:0 0 16px -2px rgba(251,191,36,.9)}
/* สภาวะ */
.chip{box-shadow:0 0 12px -3px currentColor}
.chip{background:linear-gradient(135deg,#9f1239,#e11d48);border-color:rgba(253,164,175,.4)}
.chip.c_advantage,.chip.c_blessed,.chip.c_hidden,.chip.c_invisible{background:linear-gradient(135deg,#047857,#10b981)}
.chip.c_disadvantage,.chip.c_vulnerable,.chip.c_frightened,.chip.c_charmed,.chip.c_prone{background:linear-gradient(135deg,#b45309,#f59e0b)}
.cb,.acc.paper .cb{background:rgba(2,6,23,.5);border-color:rgba(148,163,184,.25);color:#cbd5e1}
.cb:hover:not(:disabled){border-color:rgba(251,113,133,.7);color:#fff;transform:translateY(-2px)}
.cb.on,.acc.paper .cb.on{background:linear-gradient(135deg,#be123c,#f43f5e);color:#fff;border-color:#fda4af;box-shadow:0 0 16px -3px rgba(244,63,94,.9)}
.kseg button,.acc.paper .kseg button{background:rgba(2,6,23,.5);color:#cbd5e1;border-color:rgba(148,163,184,.25)}
.kseg button.on,.acc.paper .kseg button.on{background:linear-gradient(135deg,#0891b2,#7c3aed);color:#fff;border-color:rgba(34,211,238,.6);box-shadow:var(--glow-c)}
/* ตัวควบคุมคู่หู */
.ctlsw{background:linear-gradient(90deg,rgba(124,58,237,.18),rgba(8,145,178,.14));border-color:rgba(167,139,250,.35)}
.ctlb{color:#e2e8f0}.ctlb small{color:#a5b4fc}
.ctlb.on{background:linear-gradient(135deg,#7c3aed,#0891b2);border-color:#67e8f9;box-shadow:var(--glow-c)}
.ctag{background:rgba(167,139,250,.16);color:#ddd6fe;border-color:rgba(167,139,250,.4)}
.chc.out{background:rgba(124,58,237,.14)}
.simrule{background:rgba(244,63,94,.08);border-color:rgba(244,63,94,.4);color:#fecdd3}

/* ---------- 10) แผนที่ ---------- */
#mapv{border:1px solid rgba(167,139,250,.28);box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 0 40px -18px rgba(124,58,237,.9);border-radius:18px}
.tok .tp{box-shadow:0 0 0 2px rgba(2,6,23,.9),0 0 16px -2px var(--c),0 6px 14px #000c}
.tok:hover .tp{box-shadow:0 0 0 2px #fff,0 0 26px 2px var(--c)}
.tok>small{background:rgba(2,6,23,.82);border:1px solid rgba(167,139,250,.35)}

/* ---------- 11) บันทึก/แชต: ข้อความค่อย ๆ ลอยขึ้น (Fade In & Slide Up) ---------- */
#lg{background:linear-gradient(180deg,rgba(15,13,41,.9),rgba(2,6,23,.92))!important;color:#e2e8f0;border-color:rgba(167,139,250,.25)!important}
#lg .l{animation:logIn .55s cubic-bezier(.16,1,.3,1) both;border-left-width:3px;border-radius:0 8px 8px 0;margin:2px 0;padding-left:12px}
#lg .l+.l{border-top:0}
#lg .l:nth-last-child(1){background:linear-gradient(90deg,rgba(167,139,250,.12),transparent 70%)}
#lg .l b{color:#c4b5fd}
#lg .roll{border-left-color:#fbbf24}
#lg .dm{border-left-color:#e879f9;color:#f5d0fe}
#lg .skill{border-left-color:#22d3ee}
#lg .chat{border-left-color:rgba(148,163,184,.35)}
@keyframes logIn{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.toast{background:linear-gradient(135deg,rgba(30,27,75,.96),rgba(15,23,52,.96));border:1px solid rgba(34,211,238,.45);color:#e2e8f0;box-shadow:0 0 30px -8px rgba(34,211,238,.7),var(--sh2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.toast.bad{background:linear-gradient(135deg,rgba(76,5,25,.96),rgba(30,10,30,.96));border-color:rgba(251,113,133,.6);box-shadow:0 0 30px -8px rgba(244,63,94,.8)}

/* ---------- 12) หน้าต่างลอย ---------- */
.modal{background:rgba(2,6,23,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal>.card{border:1px solid rgba(167,139,250,.38);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 60px -18px rgba(124,58,237,.9),var(--sh2);background:linear-gradient(160deg,#17143c,#0a0e24)}
.mh{background:linear-gradient(180deg,#17143c 75%,transparent)!important}
.mf{background:linear-gradient(0deg,#0a0e24 75%,transparent)!important}

/* ---------- 13) แท่นบูชาเต๋า 3 มิติ (Dice Altar) ---------- */
#ov.on{background:radial-gradient(circle at 50% 46%,rgba(76,29,149,.55),rgba(2,6,23,.82) 60%)}
#ov .ovw{perspective:900px;position:relative}
#ov .ovw::before{ /* วงเวทหมุนใต้เต๋า */
 content:'';position:absolute;left:50%;top:44%;width:min(460px,86vw);aspect-ratio:1;transform:translate(-50%,-50%) rotateX(64deg);border-radius:50%;z-index:-1;
 background:
  repeating-conic-gradient(from 0deg,rgba(167,139,250,.0) 0 7deg,rgba(167,139,250,.55) 7deg 8deg),
  radial-gradient(circle,transparent 54%,rgba(34,211,238,.75) 55%,transparent 56.5%,transparent 66%,rgba(167,139,250,.8) 67%,transparent 68.5%,transparent 78%,rgba(232,121,249,.6) 79%,transparent 80%);
 -webkit-mask:radial-gradient(circle,#000 70%,transparent 72%);mask:radial-gradient(circle,#000 70%,transparent 72%);
 filter:drop-shadow(0 0 12px rgba(34,211,238,.8));opacity:0;transition:opacity .4s}
#ov.on .ovw::before{opacity:1;animation:altarSpin 6s linear infinite}
@keyframes altarSpin{from{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(0)}to{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(360deg)}}
#ob{border-radius:26px;background:linear-gradient(145deg,#4c1d95,#7c3aed 45%,#0891b2);color:#fff;border:2px solid rgba(255,255,255,.55);
 box-shadow:0 0 0 6px rgba(167,139,250,.18),0 0 50px 4px rgba(124,58,237,.8),0 30px 60px -20px #000;text-shadow:0 0 18px rgba(255,255,255,.9);
 transform-style:preserve-3d}
#ob.roll{animation:dieTumble3d .62s cubic-bezier(.2,.7,.3,1)}
@keyframes dieTumble3d{0%{transform:rotateX(0) rotateY(0) rotateZ(0) scale(.6)}30%{transform:rotateX(220deg) rotateY(120deg) rotateZ(40deg) scale(1.1)}65%{transform:rotateX(380deg) rotateY(300deg) rotateZ(-20deg) scale(.95)}100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(0) scale(1)}}
.du .f{border-radius:20px;border:1px solid rgba(255,255,255,.35);transform-style:preserve-3d;transition:transform .45s var(--spring),box-shadow .4s}
.du .hope{background:linear-gradient(150deg,#fef3c7,#fbbf24 45%,#b45309);box-shadow:0 0 40px -6px rgba(251,191,36,.9),0 24px 50px -20px #000}
.du .fear{background:linear-gradient(150deg,#fecdd3,#f43f5e 45%,#881337);box-shadow:0 0 40px -6px rgba(244,63,94,.9),0 24px 50px -20px #000}
.du .fear b,.du .fear small{color:#fff}
.du .mid{background:linear-gradient(150deg,#312e81,#1e1b4b);border-color:rgba(167,139,250,.55);box-shadow:0 0 40px -10px rgba(167,139,250,.9),0 24px 50px -20px #000}
.du .f.win{transform:scale(1.14) translateY(-8px) rotateX(8deg);box-shadow:0 0 0 3px #fff,0 0 70px 6px currentColor,0 24px 50px -20px #000}
.du .hope.win{color:#fbbf24}.du .fear.win{color:#f43f5e}
#ot{background:rgba(15,13,41,.92);border:1px solid rgba(167,139,250,.45);color:#f1f5f9;box-shadow:0 0 30px -8px rgba(167,139,250,.9)}
#ot.gold{background:linear-gradient(90deg,#fde68a,#fbbf24,#fde68a);color:#1c1003;border-color:#fff;box-shadow:0 0 40px rgba(251,191,36,.9)}
/* ระหว่างตัวเลขกำลังหมุน (คลาส .spin ใส่โดย fx.js) — เต๋าสั่นสะเทือน */
.du .f.spin,#ob.spin{animation:dieShake .09s linear infinite}
.du .f.spin b,#ob.spin{filter:blur(.6px)}
@keyframes dieShake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,2px) rotate(-3deg)}50%{transform:translate(2px,-3px) rotate(2deg)}75%{transform:translate(3px,1px) rotate(-1deg)}100%{transform:translate(-1px,-2px) rotate(1deg)}}
.du .f.impact,#ob.impact{animation:dieImpact .5s var(--spring)}
@keyframes dieImpact{0%{transform:scale(1.25) rotateX(25deg)}55%{transform:scale(.94)}100%{transform:scale(1)}}

/* ---------- 14) คริติคอล: แสงระเบิด + ข้อความเด้ง (สร้างโดย fx.js) ---------- */
.critfx{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden}
.critfx .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.95),rgba(253,230,138,.6) 18%,rgba(167,139,250,.25) 40%,transparent 65%);animation:critFlash .9s ease-out forwards}
.critfx .ring{position:absolute;left:50%;top:46%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:4px solid #fde68a;box-shadow:0 0 30px #fbbf24,inset 0 0 20px #fbbf24;animation:critRing 1s cubic-bezier(.1,.8,.3,1) forwards}
.critfx .ring.r2{border-color:#67e8f9;box-shadow:0 0 30px #22d3ee,inset 0 0 20px #22d3ee;animation-delay:.12s}
.critfx .pt{position:absolute;left:50%;top:46%;width:var(--sz,8px);height:var(--sz,8px);margin:calc(var(--sz,8px)/-2);border-radius:50%;background:var(--pc,#fde68a);box-shadow:0 0 12px var(--pc,#fde68a),0 0 24px var(--pc,#fde68a);
 animation:critPt var(--d,1.1s) cubic-bezier(.12,.8,.3,1) forwards}
.critfx .ct{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);font:900 clamp(42px,9vw,110px)/1 'Almendra','Sarabun',serif;letter-spacing:2px;white-space:nowrap;
 background:linear-gradient(180deg,#fff,#fde68a 40%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 0 18px rgba(251,191,36,.95)) drop-shadow(0 6px 0 #78350f);animation:critText 1.9s var(--spring) forwards}
.critfx .ct small{display:block;text-align:center;font-size:.3em;letter-spacing:.4em;margin-top:8px;color:#fff;-webkit-text-fill-color:#fff}
@keyframes critFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes critRing{from{transform:scale(.2);opacity:1}to{transform:scale(18);opacity:0}}
@keyframes critPt{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
@keyframes critText{0%{transform:translate(-50%,-50%) scale(.2) rotate(-10deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.25) rotate(3deg);opacity:1}40%{transform:translate(-50%,-50%) scale(1) rotate(0)}85%{opacity:1}100%{transform:translate(-50%,-60%) scale(1.05);opacity:0}}
body.shake{animation:screenShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes screenShake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,3px)}40%,60%{transform:translate(6px,-3px)}}

/* ---------- 15) ล็อบบี้ / หน้าเข้าสู่ระบบ / แอดมิน ---------- */
div.hero,section.hero{background:linear-gradient(135deg,rgba(76,29,149,.55),rgba(8,47,73,.5))!important;border:1px solid rgba(167,139,250,.4)!important;box-shadow:0 0 50px -18px rgba(124,58,237,.9)}
div.hero::before,section.hero::before{background:radial-gradient(420px 220px at 12% 0%,rgba(34,211,238,.18),transparent 70%)!important}
.room2{background:var(--glass);color:var(--ink);border:1px solid rgba(167,139,250,.28);transition:transform .35s var(--spring),box-shadow .35s,border-color .3s}
.room2:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.6);box-shadow:0 0 0 1px rgba(34,211,238,.2),0 24px 50px -20px rgba(34,211,238,.6)}
.room2 .foot .tool{background:rgba(2,6,23,.6);color:#e2e8f0;border-color:rgba(148,163,184,.3)}
.room2 .muted,.rparty .muted,.paper .muted{color:var(--ink3)}
.av{border-color:#a78bfa;box-shadow:0 0 12px -2px rgba(167,139,250,.8)}
.av.sm{border-color:#0f0d29}
.auth-box .card{box-shadow:0 0 70px -20px rgba(124,58,237,.95),var(--sh2)}
table th{color:#c4b5fd!important}
table tr{transition:background .2s}table tr:hover{background:rgba(167,139,250,.06)}

/* ---------- 16) Fear / โจมตีประสาน / คิวโจมตี ---------- */
.fearw{background:linear-gradient(135deg,rgba(76,5,25,.9),rgba(46,16,101,.9));border-color:rgba(244,63,94,.7);box-shadow:0 0 30px -6px rgba(244,63,94,.85)}
.cbc{background:linear-gradient(135deg,rgba(124,45,18,.85),rgba(76,29,149,.8));border-color:#fbbf24;box-shadow:0 0 30px -8px rgba(251,191,36,.9)}
.aq{background:linear-gradient(160deg,rgba(30,27,75,.9),rgba(2,6,23,.8));color:#e2e8f0;border-left-color:#f43f5e}
.atq{background:rgba(76,5,25,.35)!important;border-color:rgba(244,63,94,.6)!important;box-shadow:0 0 30px -12px rgba(244,63,94,.9)}
.devtip{background:linear-gradient(120deg,rgba(30,27,75,.9),rgba(8,47,73,.85));border-color:rgba(34,211,238,.45)}

/* ---------- 17) แตะบน iPad: เป้ากดใหญ่ขึ้น ---------- */
@media (pointer:coarse){
 button{min-height:44px}
 button.mini,.tool.mini{min-height:40px;min-width:40px}
 .tabs button{min-height:46px}
 .cb{min-height:38px;padding:7px 12px}
 .st button{min-height:84px}
 button:hover:not(:disabled){transform:none}
 button:active:not(:disabled){transform:scale(.94)}
 .skc:hover,.sk:hover,.stand:hover,.room2:hover{transform:none}
}
@media (min-width:768px) and (max-width:1366px) and (pointer:coarse){
 .g{gap:14px}
 aside .acc>summary{min-height:52px}
}

/* ---------- 18) โหมด “ลดอนิเมชัน” (กดปุ่มอนิเมชันที่หัวจอ) ---------- */
html.fx-reduce body::before,html.fx-reduce body::after,html.fx-reduce #ov.on .ovw::before,html.fx-reduce button.hero::after,html.fx-reduce .hp i::after{animation:none}
html.fx-reduce #lg .l{animation:none}
html.fx-reduce .critfx .pt,html.fx-reduce .critfx .ring{display:none}

/* ---------- ปรับละเอียดหลังดูภาพจริง ---------- */
body::before{
 background:
  radial-gradient(38% 32% at 18% 14%,rgba(124,58,237,.42),transparent 70%),
  radial-gradient(34% 30% at 86% 22%,rgba(34,211,238,.26),transparent 72%),
  radial-gradient(42% 38% at 62% 92%,rgba(232,121,249,.24),transparent 70%),
  radial-gradient(30% 26% at 6% 86%,rgba(56,189,248,.18),transparent 70%)}
h1{background:linear-gradient(92deg,#ffffff 0%,#f5d0fe 30%,#c4b5fd 60%,#67e8f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(167,139,250,.55)) drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.arctl .pm2 button{white-space:nowrap;padding:6px 9px;font-size:.78rem}
.arctl small{flex:1;min-width:0}
/* ให้ชั้นแสงพื้นหลังโผล่: พื้นทึบอยู่ที่ html แทน body */
body{background:transparent!important}
.skd{border-top-color:rgba(167,139,250,.2)}
.skd>summary{color:#a5f3fc;background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.4)}
.skd>summary:hover{background:rgba(34,211,238,.2);box-shadow:0 0 14px -4px rgba(34,211,238,.8)}
.tg{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.3);color:#cbd5e1}
/* เต๋า: หลังกระแทกให้คงท่าปกติ (กันอนิเมชันหมุนเดิมเล่นซ้ำ) */
.du .f.impact{animation:dieImpact .5s var(--spring) both}
#ob.impact{animation:dieImpact .5s var(--spring) both}
@keyframes dieImpact{0%{transform:scale(1.25) rotateX(25deg)}55%{transform:scale(.94)}100%{transform:none}}
.du .f.win.impact{animation:dieImpactWin .55s var(--spring) both}
@keyframes dieImpactWin{0%{transform:scale(1.3) rotateX(25deg)}55%{transform:scale(1.05)}100%{transform:scale(1.14) translateY(-8px)}}
button.hero.summon{background:linear-gradient(135deg,#7c3aed,#c026d3 55%,#0891b2);color:#fff;border-color:rgba(240,171,252,.8);text-shadow:0 0 10px rgba(255,255,255,.6);
 box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 0 0 1px rgba(232,121,249,.4),0 10px 30px -8px rgba(192,38,211,.9)}
button.hero.summon:hover:not(:disabled){box-shadow:0 0 0 2px rgba(240,171,252,.8),0 0 44px -6px rgba(217,70,239,1)}
/* ป้ายผลของไอเทมบนพื้นมืด */
.ieff.hp,.ieffs .ieff{background:rgba(52,211,153,.14);color:#6ee7b7;border:1px solid rgba(52,211,153,.4)}
.ieff.stress{background:rgba(244,63,94,.14);color:#fda4af;border-color:rgba(244,63,94,.45)}
.ieff.k_hp_lose,.ieff.k_stress_add,.ieff.k_hope_lose,.ieff.k_cond_add{background:rgba(244,63,94,.14);color:#fda4af;border-color:rgba(244,63,94,.45)}
.ieff.k_gold{background:rgba(251,191,36,.14);color:#fde68a;border-color:rgba(251,191,36,.4)}
.ieff.k_note,.ieff.k_roll{background:rgba(56,189,248,.14);color:#bae6fd;border-color:rgba(56,189,248,.4)}
.ieffs .ieff.ak{background:rgba(34,211,238,.12);color:#a5f3fc;border-color:rgba(34,211,238,.4)}
/* ปุ่มลบ/อันตราย ให้เป็นสีแดงนีออน */
button.danger,#askm button.ok.danger,button[onclick^="del("],button[onclick^="userDel("]{background:linear-gradient(135deg,#be123c,#f43f5e);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -10px rgba(244,63,94,.9)}
button.danger:hover:not(:disabled),#askm button.ok.danger:hover{box-shadow:0 0 0 1px rgba(253,164,175,.6),0 10px 30px -8px rgba(244,63,94,1)}

/* ---------- หน้าเข้าสู่ระบบ: คำแนะนำอุปกรณ์ (เดิมเว้นคอลัมน์ไว้ให้ไอคอน ทำให้ข้อความถูกบีบ) ---------- */
.dg div{grid-template-columns:1fr!important;background:rgba(2,6,23,.45);border:1px solid rgba(148,163,184,.14);padding:10px 12px}
.dg .rec{background:rgba(52,211,153,.08);outline:none;border-color:rgba(52,211,153,.4)}
.dg span>b{color:#f1f5f9;margin-bottom:2px}
.dg small,.dg small b{color:#b9c3e0}
.you{white-space:nowrap;vertical-align:middle;background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 0 12px -2px rgba(16,185,129,.9)}

/* ---------- เลเยอร์อนิเมชันการกระทำ (fx.js) ---------- */
#fxl{position:fixed;inset:0;z-index:115;pointer-events:none;overflow:hidden}
#fxl>div{position:absolute;pointer-events:none}
.fxp{will-change:transform,opacity}
.fxr{border:3px solid;border-radius:50%;transform:translate(-50%,-50%)}
.fxrune{width:190px;height:190px;border-radius:50%;
 background:
  repeating-conic-gradient(from 0deg,transparent 0 10deg,color-mix(in srgb,var(--rc) 70%,transparent) 10deg 12deg),
  radial-gradient(circle,transparent 46%,var(--rc) 47%,transparent 49%,transparent 62%,var(--rc) 63%,transparent 65%,transparent 70%,color-mix(in srgb,var(--rc) 40%,transparent) 71%,transparent 74%);
 -webkit-mask:radial-gradient(circle,#000 72%,transparent 74%);mask:radial-gradient(circle,#000 72%,transparent 74%);
 filter:drop-shadow(0 0 10px var(--rc))}
.fxt{font:800 1.05rem/1.2 'Sarabun',sans-serif;white-space:nowrap;letter-spacing:.3px}
.fxt.big{font:900 1.5rem/1.2 'Almendra','Sarabun',serif;letter-spacing:.5px}
.fxslash{left:50%;top:45%;width:min(900px,120vw);height:10px;border-radius:10px;transform-origin:center;
 background:linear-gradient(90deg,transparent,#fff 45%,var(--sc) 55%,transparent);box-shadow:0 0 24px var(--sc),0 0 60px var(--sc)}
.fxvig{inset:0;position:absolute}
.fxsweep{inset:0;background:linear-gradient(100deg,transparent 30%,var(--wc) 50%,transparent 70%)}
.fxcoin{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d6,#fbbf24 45%,#b45309);border:1px solid #fde68a;box-shadow:0 0 10px rgba(251,191,36,.9)}
/* การ์ดที่ถูกใช้: เรืองแสงวูบ / แสงวาบผ่านอาวุธ */
.fxglow{animation:fxGlow .9s ease-out}
@keyframes fxGlow{0%{box-shadow:0 0 0 2px #fff,0 0 40px 6px rgba(167,139,250,.95)}100%{box-shadow:0 0 0 0 transparent}}
.fxshine{position:relative;overflow:hidden}
.fxshine::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);animation:fxShine .8s ease-out forwards;pointer-events:none}
@keyframes fxShine{to{transform:translateX(120%)}}
/* แถบตัวละครเมื่อโดนตี / ฟื้น */
.myb.fxhit{animation:fxHit .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes fxHit{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-8px);box-shadow:0 0 30px rgba(244,63,94,.9)}40%,60%{transform:translateX(8px)}}
.myb.fxheal{animation:fxHeal .9s ease-out}
@keyframes fxHeal{0%{box-shadow:0 0 0 2px #6ee7b7,0 0 40px rgba(52,211,153,.95)}100%{box-shadow:0 0 0 0 transparent}}
/* เปลี่ยนแท็บ: เนื้อหาไหลขึ้นมาทีละการ์ด */
.pane.fxin>*{animation:paneIn .45s cubic-bezier(.16,1,.3,1) both}
.pane.fxin>*:nth-child(2){animation-delay:.04s}.pane.fxin>*:nth-child(3){animation-delay:.08s}.pane.fxin>*:nth-child(4){animation-delay:.12s}.pane.fxin>*:nth-child(5){animation-delay:.16s}.pane.fxin>*:nth-child(n+6){animation-delay:.2s}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* เปิดหมวด: เนื้อหาเลื่อนลงนุ่ม ๆ */
.acc.fxopen[open]>.ab{animation:paneIn .35s cubic-bezier(.16,1,.3,1)}
/* ป้ายสภาวะใหม่เด้งเข้า */
.chip{animation:chipIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes chipIn{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
/* ป๊อปอัปแจ้งเตือนเด้งเข้า */
.toast:not(.out){animation:toastIn .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes toastIn{from{transform:translate(-50%,30px) scale(.9);opacity:0}to{transform:translate(-50%,0);opacity:1}}
html.fx-reduce .pane.fxin>*,html.fx-reduce .acc.fxopen>.ab,html.fx-reduce .chip,html.fx-reduce .toast:not(.out),html.fx-reduce .myb.fxhit,html.fx-reduce .myb.fxheal,html.fx-reduce .fxglow{animation:none}
/* ปรับความแรงเอฟเฟกต์ */
.fxslash{height:16px;box-shadow:0 0 30px var(--sc),0 0 80px var(--sc),0 0 140px var(--sc)}
.fxt{font-size:1.2rem}.fxt.big{font-size:1.9rem}
.fxrune{width:230px;height:230px}
/* ปุ่มเปิด/ลดอนิเมชัน */
.fxtg{white-space:nowrap}
.fxtg[aria-pressed=true]{border-color:rgba(34,211,238,.55);color:#a5f3fc}
.fxtg.float{position:fixed;right:12px;bottom:12px;z-index:90}
@media (max-width:560px){.top .fxtg{display:none}}

/* ปุ่มทองหลัก (button.hero) ไม่ให้รับเลย์เอาต์ของแบนเนอร์ล็อบบี้ที่ใช้ชื่อคลาสเดียวกัน */
button.hero{justify-content:center;align-items:center;gap:8px;overflow:hidden;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 0 rgba(255,255,255,.35)}
button.hero::before{content:none}
button.hero{margin:0;padding:12px 18px;border-radius:12px;flex-wrap:nowrap;min-height:48px;font-size:1.05rem}
button.hero:not(:hover):not(:active){animation:none}

/* =====================================================================
   หน้า DM: แผงข้างกว้างขึ้น + การ์ดผู้เล่นแบ่งเป็นหมวดชัดเจน
   ===================================================================== */
@media (min-width:1280px){
 body.dm .g{grid-template-columns:minmax(0,1fr) clamp(400px,30vw,560px);max-width:2100px}
}
.dmsec{margin:8px 0 0;padding:10px 12px;border-radius:14px;background:rgba(2,6,23,.45);border:1px solid rgba(148,163,184,.14)}
.dmsec:first-child{margin-top:2px}
.dmh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 6px;font-weight:800;font-size:.78rem;letter-spacing:.8px;color:#a5b4fc;text-transform:uppercase}
.dmh small{font-weight:600;letter-spacing:0;text-transform:none;color:#94a3b8}
.dmsec .hpw{margin:4px 0}
.qhp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 6px}
.qhp .ql{font-size:.76rem;font-weight:700;color:#94a3b8;margin-right:-2px}
.qhp .ql:not(:first-child){margin-left:8px}
.qhp button{min-width:46px;font-weight:800;font-size:.95rem}
.qhp button.qd{background:linear-gradient(135deg,#9f1239,#e11d48);box-shadow:0 6px 16px -8px rgba(244,63,94,.9)}
.qhp button.qh{background:linear-gradient(135deg,#047857,#10b981);box-shadow:0 6px 16px -8px rgba(16,185,129,.9)}
.qrow{gap:6px}.qrow input{min-height:40px}
.qpi{margin-top:6px;font-size:.84rem}
.dmstat{display:grid;grid-template-columns:70px 64px 1fr;align-items:center;gap:8px;padding:4px 0}
.dmstat+.dmstat{border-top:1px dashed rgba(148,163,184,.14)}
.dmstat .dl{font-weight:700;color:#e2e8f0}
.dmstat .dv{font-size:1.15rem;color:#fff;text-shadow:0 0 12px rgba(167,139,250,.6)}
.dmstat .pm2{justify-self:end;display:flex;gap:6px}
.dmstat .pm2 button{min-width:40px}
.dmnote{display:block;margin-top:4px;color:#94a3b8}
.dmact{flex-wrap:wrap;gap:6px}
.dmact button{flex:1 1 auto}
/* แถบเครื่องมือแมพ: ป้าย “ดาเมจ” หน้าช่องตัวเลข */
.ddl{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:#cbd5e1;padding-left:4px}
.ddl input{width:64px}
/* NPC/มอนสเตอร์: ปุ่มลงไปแถวล่างเต็มความกว้าง ไม่บีบเป็นแนวตั้ง */
#npl .ent{flex-wrap:wrap}
#npl .ent>.row.wbt{flex:1 1 100%;justify-content:flex-end;flex-wrap:wrap;gap:6px}
#npl .ent>div:not(.row){flex:1 1 180px}
/* ปุ่มทองหลัก (เช่น “ทอย 4 ลูก”) อ่านชัดเสมอ ไม่ว่ากำลังชี้หรือกด */
button.hero:not(.summon),button.hero:not(.summon):hover,button.hero:not(.summon):focus,button.hero:not(.summon):active{background:linear-gradient(135deg,#fde68a,#fbbf24 45%,#f59e0b)!important;color:#1c1003!important}
.qhp{gap:5px}.qhp button{min-width:42px;padding-left:8px;padding-right:8px}.qhp .ql:not(:first-child){margin-left:4px}

/* ---------- การ์ดโดเมน 5 ใบ / คลัง / ช่วงพัก ---------- */
.lohead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:2px 0 8px;border-radius:12px;background:rgba(124,58,237,.12);border:1px solid rgba(167,139,250,.35)}
.lohead b{display:block;color:#f1f5f9}.lohead small{color:#c4b5fd}
.vault{margin-top:10px;border-top:1px dashed rgba(167,139,250,.25);padding-top:8px}
.vault>summary{cursor:pointer;font-weight:700;color:#94a3b8;font-size:.86rem;list-style:none}
.vault>summary::-webkit-details-marker{display:none}
.skc.vlt{opacity:.62;filter:saturate(.5);border-style:dashed}
.skc.vlt p{font-size:.84rem;margin:.3em 0 0}
.logrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:10px 0}
.lopick{flex-direction:column;align-items:flex-start;text-align:left;gap:2px;min-height:86px;padding:10px 12px;background:rgba(2,6,23,.55);border:1px solid rgba(148,163,184,.25);color:#e2e8f0;box-shadow:none}
.lopick small{color:#94a3b8}
.lopick .lost{margin-top:auto;font-size:.72rem;font-weight:800;color:#94a3b8}
.lopick.on{background:linear-gradient(160deg,rgba(124,58,237,.55),rgba(8,145,178,.4));border-color:#67e8f9;box-shadow:0 0 18px -4px rgba(34,211,238,.8)}
.lopick.on .lost{color:#a5f3fc}
.lopick:disabled{opacity:.45}
.restbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;padding:10px 12px;border-radius:12px;background:rgba(16,185,129,.12);border:1px solid rgba(52,211,153,.45)}
.restbar b{display:block;color:#6ee7b7}.restbar small{color:#a7f3d0}

/* ---------- ช่องติ๊กแบบสี่เหลี่ยม (แทนสวิตช์วงกลม) ---------- */
.sw input,.paper .sw input{appearance:none;-webkit-appearance:none;flex:none;width:26px!important;height:26px;min-height:0!important;padding:0;border-radius:7px;cursor:pointer;position:relative;
 background:rgba(2,6,23,.7);border:2px solid rgba(148,163,184,.45);box-shadow:inset 0 1px 3px #000;transition:background .2s,border-color .2s,box-shadow .2s,transform .25s var(--spring)}
.sw input::after{content:'';position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;border-radius:1px;background:none;box-shadow:none;
 transform:rotate(45deg) scale(0);transition:transform .25s var(--spring)}
.sw input:checked{background:linear-gradient(135deg,#06b6d4,#8b5cf6);border-color:#67e8f9;box-shadow:0 0 14px -2px rgba(34,211,238,.8)}
.sw input:checked::after{transform:rotate(45deg) scale(1)}
.sw input:hover{border-color:#67e8f9}
.sw input:active{transform:scale(.9)}
/* ช่องติ๊กอื่น ๆ ไม่ให้ถูกยืดเป็นวงรี */
input[type=checkbox]:not(.sw input),input[type=radio]{width:20px;height:20px;min-height:0;padding:0;flex:none;accent-color:#8b5cf6}

/* ---------- FX v2 ---------- */
.fxflash{inset:0;position:absolute!important;mix-blend-mode:screen}
.fxbolt svg{display:block;overflow:visible}
.fxpillar{height:min(70vh,520px);border-radius:50% 50% 8px 8px;transform-origin:bottom center;
 background:linear-gradient(0deg,var(--pc) 0%,color-mix(in srgb,var(--pc) 55%,#fff) 35%,transparent 100%);filter:blur(2px);box-shadow:0 0 40px var(--pc);mix-blend-mode:screen;opacity:.9}
.fxstar{line-height:1;font-weight:900}
.fxrn{font:900 20px/1 serif}
.fxcrack svg{display:block}
.fxnum{font:900 clamp(30px,4vw,54px)/1 'Almendra','Sarabun',serif;white-space:nowrap;letter-spacing:1px}
.fxrays{left:50%;top:46%;width:min(1400px,160vw);aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;
 background:repeating-conic-gradient(from 0deg,rgba(253,230,138,.55) 0 4deg,transparent 4deg 14deg);
 -webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%)}
/* ถ่านไฟลอยขึ้นบนแมพ */
#mapv{position:relative}
.fxembers{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.fxembers i{position:absolute;bottom:-10px;width:var(--sz);height:var(--sz);border-radius:50%;background:#fbbf24;box-shadow:0 0 8px #f59e0b,0 0 16px #f97316;opacity:0;
 animation:ember var(--d) linear var(--dl) infinite}
.fxembers i:nth-child(3n){background:#c4b5fd;box-shadow:0 0 8px #a78bfa,0 0 16px #7c3aed}
.fxembers i:nth-child(4n){background:#67e8f9;box-shadow:0 0 8px #22d3ee}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.85}80%{opacity:.6}100%{transform:translate(var(--x),-110vh);opacity:0}}
html.fx-reduce .fxembers{display:none}
/* โทเคนหายใจเบา ๆ + เรืองแสงเมื่อชี้ */
.tok .tp{animation:tokBreath 3.6s ease-in-out infinite}
.tok:nth-child(2n) .tp{animation-delay:-1.2s}.tok:nth-child(3n) .tp{animation-delay:-2.4s}
@keyframes tokBreath{0%,100%{box-shadow:0 0 0 2px rgba(2,6,23,.9),0 0 14px -2px var(--c),0 6px 14px #000c}50%{box-shadow:0 0 0 2px rgba(2,6,23,.9),0 0 26px 2px var(--c),0 6px 14px #000c}}
.tok:hover .tp{transform:scale(1.08)}
html.fx-reduce .tok .tp{animation:none}
/* สกิลมอนสเตอร์ */
.msk{margin-top:10px}
.msktg{gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}.msktg .lbl{flex:1 1 160px;margin:0}.msktg .tt2{margin:0 0 10px}
.mskc{align-items:flex-start}.mskc small{display:block;margin-top:4px}
/* ป้าย “ตุย” บนโทเคนที่ HP หมด */
.tok.down::after{font-size:calc(.9rem*var(--k,1))!important;padding:2px 8px!important;letter-spacing:1px}

/* ---------- ตาย / ชุบชีวิต ---------- */
#deadbar{margin:0 0 8px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(76,5,25,.92),rgba(30,10,30,.92));border:1px solid rgba(244,63,94,.6);color:#fecdd3;box-shadow:0 0 30px -8px rgba(244,63,94,.9);animation:deadPulse 2.4s ease-in-out infinite}
#deadbar b{display:block;font:900 1.2rem 'Almendra','Sarabun',serif;color:#fff;letter-spacing:.5px}
#deadbar p{margin:.3em 0;font-size:.88rem}#deadbar ol{margin:.2em 0 0;padding-left:1.3em;font-size:.86rem}#deadbar li{margin:2px 0}
@keyframes deadPulse{0%,100%{box-shadow:0 0 22px -8px rgba(244,63,94,.8)}50%{box-shadow:0 0 36px -4px rgba(244,63,94,1)}}
body.dead aside .pane button,body.dead aside .pane input,body.dead aside .pane select{pointer-events:none;opacity:.35;filter:grayscale(.7)}
body.dead .myb{filter:grayscale(.85) brightness(.75)}
body.dead #mapv{filter:saturate(.35) brightness(.8)}
.deadtag{display:inline-block;padding:1px 8px;border-radius:20px;font:800 .7rem/1.5 'Sarabun',sans-serif;background:linear-gradient(135deg,#4c0519,#9f1239);color:#fecdd3;border:1px solid rgba(253,164,175,.5);vertical-align:middle}
.acc.mem.isdead{border-color:rgba(244,63,94,.6);box-shadow:0 0 22px -8px rgba(244,63,94,.9)}
.deadsec{background:rgba(76,5,25,.5);border-color:rgba(244,63,94,.5)}.deadsec .dmh{color:#fda4af}.deadsec p{margin:0 0 8px;font-size:.86rem;color:#fecdd3}
.bigfx.death{color:#fb7185;text-shadow:0 0 30px #9f1239,5px 5px 0 #1a0208;filter:grayscale(.2)}
.bigfx.death small{color:#fecdd3}
.bigfx.revive{color:#fde68a;text-shadow:0 0 34px #fbbf24,4px 4px 0 #3b2a05}
/* ---------- แถบเคล็ดลับ ---------- */
.hintbar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-left:1px solid var(--line);border-right:1px solid var(--line);background:linear-gradient(90deg,rgba(8,145,178,.16),rgba(124,58,237,.12));font-size:.84rem;color:#dbe4ff}
.hintbar:empty{display:none}
.hintbar .hl{flex:none;font-weight:800;font-size:.7rem;letter-spacing:.6px;padding:2px 8px;border-radius:20px;background:rgba(34,211,238,.18);color:#a5f3fc;border:1px solid rgba(34,211,238,.4)}
.hintbar p{margin:0;flex:1;min-width:0;line-height:1.4}
.hintbar .hb{display:flex;gap:4px;flex:none}
.hintbar .hb button{min-height:30px;padding:3px 8px;font-size:.74rem}
.hintbar.off{justify-content:flex-end;padding:4px 8px;background:transparent}
.hintbar .hintson{min-height:26px;font-size:.72rem;padding:2px 8px}
@media (max-width:520px){.hintbar{flex-wrap:wrap}.hintbar .hb{width:100%;justify-content:flex-end}}
html,body{overflow-x:clip} /* เอฟเฟกต์ที่พุ่งออกนอกจอไม่ทำให้หน้าเลื่อนข้าง */

#netbar{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:300;padding:8px 16px;border-radius:999px;background:#7f1d1d;color:#fff;font-weight:700;font-size:.92rem;border:1px solid #f87171;box-shadow:0 6px 24px rgba(0,0,0,.5);animation:netp 1.2s ease-in-out infinite alternate}
@keyframes netp{to{box-shadow:0 0 0 4px rgba(248,113,113,.35),0 6px 24px rgba(0,0,0,.5)}}
html.fx-reduce #netbar{animation:none}