@import url('https://fonts.googleapis.com/css2?family=Almendra:wght@400;700&family=Sarabun:wght@400;500;600;700&display=swap');

/* =====================================================================
   D&D Table · โต๊ะเล่นยามค่ำคืน — Hope (ทอง) ปะทะ Fear (แดงเลือดหมู)
   ===================================================================== */
:root{
 --table:#0a0d15; --panel:#131a29; --panel2:#1a2336; --panel3:#222d45; --line:#2a3552; --line2:#3a4770;
 --paper:#efe4c8; --paper2:#e2d2ab; --paper3:#d4c093; --ink:#2b2117; --ink2:#55462c; --ink3:#66553a; /* ink2/ink3 ผ่าน WCAG AA บนกระดาษ (≥4.5:1) */
 --hope:#e8b23a; --hope2:#f6d98a; --hopeD:#a87a16;
 --fear:#a3244a; --fear2:#e0628a; --act:#8f2024; --act2:#6a1418;
 --ok:#2e9e6a; --bad:#c8413b; --blue:#3d7bd9;
 --cream:#f3e9d3; --mut:#8e97ad;
 --r:12px; --r2:8px;
 --sh1:0 1px 2px #0006,0 4px 14px #0004; --sh2:0 10px 40px #000a;
 --dsp:'Almendra','Sarabun',Georgia,serif;
 --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;color:var(--cream);font:15.5px/1.55 'Sarabun','Leelawadee UI',system-ui,sans-serif;
 background:radial-gradient(1100px 620px at 50% -12%,#23305299 0,transparent 70%),radial-gradient(800px 500px at 110% 110%,#4a14261f 0,transparent 70%),var(--table);
 -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--dsp);font-weight:700;color:var(--hope);margin:.15em 0 .35em;line-height:1.25}
h1{font-size:1.65rem;letter-spacing:.3px}h2{font-size:1.32rem}h3{font-size:1.08rem;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
h3 small{font-family:'Sarabun',sans-serif;font-weight:500;font-size:.78rem}
small{color:var(--mut)}
p{margin:.35em 0}
a{color:var(--hope);text-underline-offset:3px}
code{background:#0006;padding:1px 6px;border-radius:5px}
.hide{display:none!important}
::selection{background:#e8b23a55}
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:#ffffff22;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background-color:#ffffff40}

/* ===== ฟอร์ม ===== */
input,select,textarea{font:inherit;padding:9px 12px;border-radius:var(--r2);border:1px solid var(--line2);
 background:#0b101b;color:var(--cream);min-width:0;width:100%;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#52628f}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--hope);box-shadow:0 0 0 3px #e8b23a33}
input::placeholder,textarea::placeholder{color:#6c7489}
input[type=checkbox]{width:auto}
input[type=file].filein{padding:6px;font-size:.88rem;cursor:pointer}
.paper input,.paper select,.paper textarea{background:#fbf6e7;border-color:#c2aa72;color:var(--ink)}
.paper input::placeholder,.paper textarea::placeholder{color:#a39371}
.paper input:focus,.paper select:focus,.paper textarea:focus{border-color:var(--act);box-shadow:0 0 0 3px #8f202426}
.lbl{display:flex;flex-direction:column;gap:4px;font-size:.84rem;font-weight:600;color:var(--mut)}
.paper .lbl{color:var(--ink2)}
.form{display:flex;flex-direction:column;gap:10px}
form{display:flex;flex-direction:column;gap:10px;margin:0}
.f2,.f3,.f4{display:grid;gap:8px}.f2{grid-template-columns:1fr 1fr}.f3{grid-template-columns:repeat(3,1fr)}.f4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row>input,.row>select{flex:1;width:auto}
.between{justify-content:space-between}
.grow{flex:1}
.sw{display:flex;gap:10px;align-items:center;cursor:pointer;font-weight:500}
.sw input{appearance:none;width:40px;height:22px;border-radius:20px;background:#0003;border:1px solid var(--ink3);position:relative;cursor:pointer;transition:background .2s;padding:0;flex:none}
.sw input::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0006;transition:transform .25s var(--spring)}
.sw input:checked{background:var(--ok);border-color:var(--ok)}.sw input:checked::after{transform:translateX(18px)}

/* ===== ปุ่ม: ไอคอน + ข้อความ ชัดเจน กดแล้วยุบ ===== */
button{font:inherit;font-weight:600;font-size:.93rem;display:inline-flex;align-items:center;justify-content:center;gap:7px;
 padding:9px 15px;border-radius:var(--r2);cursor:pointer;color:#fff8ea;line-height:1.2;
 border:1px solid #ffffff1c;background:linear-gradient(180deg,#a82a2f,var(--act));
 box-shadow:inset 0 1px 0 #ffffff2a,0 2px 0 var(--act2),0 4px 10px #0005;
 transition:transform .12s var(--ease),filter .15s,box-shadow .15s,background .2s;user-select:none;-webkit-tap-highlight-color:transparent}
button .ic{font-size:1.08em;line-height:1;display:inline-block;transition:transform .25s var(--spring)}
button:hover:not(:disabled){filter:brightness(1.13);transform:translateY(-1px)}
button:hover:not(:disabled) .ic{transform:scale(1.18) rotate(-6deg)}
button:active:not(:disabled){transform:translateY(1px) scale(.98);box-shadow:inset 0 1px 0 #ffffff1a,0 0 0 var(--act2),0 1px 4px #0005}
button:disabled{background:#2c3446;color:#7c8498;box-shadow:none;cursor:not-allowed;border-color:#ffffff0d}
button:focus-visible{outline:2px solid var(--hope);outline-offset:2px}
button.tool{background:linear-gradient(180deg,#2a3654,#202a43);border-color:#ffffff14;box-shadow:inset 0 1px 0 #ffffff17,0 2px 0 #121828,0 3px 8px #0004;color:var(--cream)}
.paper button.tool{background:linear-gradient(180deg,#fffaf0,#efe2c3);color:var(--ink);border-color:#b9a06a;box-shadow:inset 0 1px 0 #fff,0 2px 0 #b9a06a,0 3px 6px #0002}
button.tool.on{background:linear-gradient(180deg,var(--hope2),var(--hope));color:#2b1d05;border-color:var(--hopeD);box-shadow:inset 0 1px 0 #fff8,0 2px 0 var(--hopeD),0 0 14px #e8b23a66}
button.mini{padding:6px 9px;font-size:.84rem;min-width:34px}
button.wide{width:100%;padding:11px 16px}
button.hero{font-size:1.08rem;padding:14px 18px;background:linear-gradient(135deg,var(--hope2),var(--hope) 45%,#c88d1c);color:#2b1d05;border-color:var(--hopeD);
 box-shadow:inset 0 1px 0 #fff9,0 3px 0 var(--hopeD),0 6px 18px #e8b23a44}
button.hero .ic{font-size:1.4em}
button.arm{background:linear-gradient(180deg,#38b27a,#23855a);box-shadow:inset 0 1px 0 #ffffff33,0 2px 0 #175c3d,0 3px 8px #0004}
button.unarm{background:linear-gradient(180deg,#5d6680,#454d64);box-shadow:inset 0 1px 0 #ffffff26,0 2px 0 #2c3244,0 3px 8px #0004}
button.off{opacity:.55;filter:saturate(.4)}
.dice{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px}
button.d{padding:12px 0;font-family:var(--dsp);font-size:1.05rem;background:linear-gradient(180deg,#2e3b5e,#232d48);border-color:#ffffff1c;box-shadow:inset 0 1px 0 #ffffff1e,0 2px 0 #121828}
button.d:hover:not(:disabled){background:linear-gradient(180deg,#3f4f7c,#2d3a5d)}
button.d:active:not(:disabled){transform:rotate(-12deg) scale(.94)}
button.d.dark{background:linear-gradient(180deg,#3b1a2a,#2a1220);border-color:#a3244a55}
.badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:30px;font-size:.78rem;font-weight:700;letter-spacing:.3px;
 background:linear-gradient(180deg,#e8b23a2a,#e8b23a12);color:var(--hope2);border:1px solid #e8b23a55;white-space:nowrap}

/* ===== การ์ด / กระดาษ ===== */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;box-shadow:var(--sh1);margin-bottom:10px}
.paper{background:linear-gradient(180deg,var(--paper),var(--paper2));color:var(--ink);border-color:#c8b07a;
 box-shadow:inset 0 0 0 1px #fff6,inset 0 0 40px #b89a5a30,var(--sh1)}
.paper h1,.paper h2,.paper h3{color:#7a1b1f}
.paper small,.paper .hint{color:var(--ink2)}
.paper a{color:#8f2024}
.hint{color:var(--mut);font-size:.86rem;margin:.2em 0 .6em}
.warn,.warn2{background:#c8413b1f;border:1px solid #c8413b66;border-radius:var(--r2);padding:8px 11px;font-size:.88rem;color:#ffb4ad}
.paper .warn,.paper .warn2{color:#8f2024;background:#8f20240f;border-color:#8f202444}
.empty{text-align:center;padding:36px 16px;color:var(--mut);border:2px dashed var(--line2);border-radius:var(--r);grid-column:1/-1}
.xp{display:inline-flex;align-items:center;gap:4px;margin:3px 4px 3px 0;padding:3px 10px;border-radius:30px;font-size:.84rem;font-weight:600;background:#00000014;border:1px solid #00000022}
.card:not(.paper) .xp{background:#ffffff10;border-color:#ffffff1c}
.big2{font-size:1.6rem;color:#7a1b1f;margin-left:auto}

/* ===== รูปโปรไฟล์ ===== */
.av{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#2b3450 center/cover no-repeat;
 border:2px solid var(--hope);color:#fff;font-weight:700;font-family:var(--dsp);font-size:1.05rem;box-shadow:0 2px 6px #0005}
.av.big{width:64px;height:64px;font-size:1.6rem;border-width:3px}
.pm{display:flex;gap:12px;align-items:center}
.pm>div{flex:1;min-width:0}
.ent{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed #ffffff18}
.paper .ent{border-color:#0000001c}
.ent:last-child{border-bottom:0}
.ent>div{flex:1;min-width:0}
.ent small{display:block}

/* ===== หลอดเลือด / Hope / Stress ===== */
.hpw{margin:8px 0}
.hp{height:12px;border-radius:10px;background:#0006;overflow:hidden;box-shadow:inset 0 1px 3px #0008;border:1px solid #0004}
.hp i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(180deg,#5ee09a,#25a463);box-shadow:inset 0 1px 0 #fff6;transition:width .6s var(--ease),background .4s}
.hpw:has(.low) .hp i{background:linear-gradient(180deg,#ffc35a,#e08a12)}
.hpw:has(.dead) .hp i{background:#555}
.hpn{display:block;font-size:.8rem;margin-top:3px;font-weight:700;color:#2f8a5c}
.card:not(.paper) .hpn{color:#7be3a9}
.hpn.low{color:#d98712!important}.hpn.dead{color:var(--bad)!important}
.hp.mini{height:7px;margin-top:5px;border-radius:6px}
.hp.mini i{background:linear-gradient(180deg,#ff7b7b,#cc2b3a)}
.res{display:flex;align-items:center;gap:10px;margin:6px 0}
.rl{width:78px;font-weight:700;font-size:.9rem}
.pm2{margin-left:auto;display:flex;gap:5px}
.pips{display:flex;gap:5px;flex-wrap:wrap}
.pips i{width:17px;height:17px;transform:rotate(45deg);border-radius:4px;border:2px solid #0003;background:#0001;transition:background .3s,transform .35s var(--spring),box-shadow .3s}
.pips.hope i.on{background:linear-gradient(135deg,var(--hope2),var(--hope));border-color:var(--hopeD);box-shadow:0 0 8px #e8b23a88;transform:rotate(45deg) scale(1.08)}
.pips.stress i.on{background:linear-gradient(135deg,#e46a8b,var(--fear));border-color:#6d1630;box-shadow:0 0 8px #a3244a88;transform:rotate(45deg) scale(1.08)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:7px;margin:10px 0}
.stats span{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:var(--r2);background:#00000010;border:1px solid #0000001c;font-size:.88rem}
.card:not(.paper) .stats span{background:#ffffff08;border-color:#ffffff14}
.stats b{font-size:1.25rem;font-family:var(--dsp);line-height:1.2}
.stats small{font-size:.74rem}
.chip{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0002;border:1px solid #0002;font-size:.8rem;margin-left:2px;vertical-align:middle;animation:pop .35s var(--spring)}
.cbs{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.cb{padding:4px 7px;font-size:.92rem;background:#ffffff0c;box-shadow:none;border:1px solid #ffffff1a;filter:grayscale(.7);opacity:.7}
.cb.on{filter:none;opacity:1;background:#e8b23a33;border-color:var(--hope);box-shadow:0 0 10px #e8b23a44}

/* ===== ทอยค่าสถานะ ===== */
.st{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:6px 0 10px}
.st button{flex-direction:column;gap:0;padding:8px 4px;background:linear-gradient(180deg,#fffaf0,#efe2c3);color:var(--ink);border-color:#b9a06a;box-shadow:inset 0 1px 0 #fff,0 2px 0 #b9a06a}
.card:not(.paper) .st button{background:linear-gradient(180deg,#2a3654,#202a43);color:var(--cream);border-color:#ffffff14;box-shadow:inset 0 1px 0 #ffffff17,0 2px 0 #121828}
.st button small{font-size:.75rem;color:inherit;opacity:.75}
.st button b{font-size:1.3rem;font-family:var(--dsp)}
.st button:disabled{opacity:.8}
.st label{display:flex;flex-direction:column;gap:3px}

/* ===== รายการ (อาวุธ/ไอเทม/เควส) ===== */
.sk{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 11px;margin:7px 0;border-radius:var(--r2);background:#00000009;border:1px solid #0000001a;transition:background .2s,border-color .2s}
.card:not(.paper) .sk{background:#ffffff07;border-color:#ffffff12}
.sk>div:first-child{flex:1;min-width:0}
.sk small{display:block}
.sk p{font-size:.86rem;margin:.25em 0 0;opacity:.9}
.sk.eqp{background:linear-gradient(90deg,#2e9e6a1c,transparent);border-color:#2e9e6a77}
.sk.done{opacity:.6}
.wbt{gap:6px;justify-content:flex-end;flex:none}

/* ===== การ์ดสกิล ===== */
.skc{position:relative;padding:12px 13px 12px 16px;margin:9px 0;border-radius:var(--r2);background:linear-gradient(180deg,#fffdf6,#f6edd6);border:1px solid #cdb682;box-shadow:0 2px 6px #0000001a;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s;color:var(--ink)}
.skc::before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--hope),var(--act))}
.skc:hover{transform:translateY(-1px);box-shadow:0 6px 16px #0000002a}
.skc.pas::before{background:linear-gradient(180deg,#7fb4ff,#3d7bd9)}
.skc.used{filter:grayscale(.75);opacity:.7}
.skh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.skh b{font-size:1.02rem;color:#5c1418}
.skh small{color:var(--ink3)}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}
.tg{font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:30px;background:#00000010;border:1px solid #00000020;color:var(--ink2);white-space:nowrap}
.tg.hope{background:#e8b23a33;border-color:#c99526;color:#6b4a06}
.tg.stress{background:#a3244a22;border-color:#a3244a66;color:#7a1534}
.tg.lim{background:#3d7bd922;border-color:#3d7bd966;color:#1d4c94}
.tg.roll{background:#2e9e6a22;border-color:#2e9e6a66;color:#16613f}
.skc>p{font-size:.88rem;margin:.3em 0;color:#3b2f20}
.skc>p.how{background:#3d7bd912;border-left:3px solid #3d7bd9;padding:6px 9px;border-radius:0 6px 6px 0;font-size:.84rem;color:#24406e}
.skc .wbt{justify-content:flex-start;margin-top:8px}

/* ===== หน้าต่างลอย (มีอนิเมชันเปิด/ปิด) ===== */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:14px;background:#04060bcc;backdrop-filter:blur(4px);animation:fadeIn .2s var(--ease)}
.modal>.card{width:min(720px,96vw);max-height:90vh;overflow:auto;margin:0;box-shadow:var(--sh2);animation:popIn .32s var(--spring)}
.modal.closing{animation:fadeOut .19s ease forwards}
.modal.closing>.card{animation:popOut .19s ease forwards}
.mh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:sticky;top:-14px;z-index:2;
 padding:12px 0 8px;margin:-12px 0 8px;background:linear-gradient(180deg,var(--paper) 75%,transparent)}
.mh h2{margin:0}
.mf{position:sticky;bottom:-14px;padding:12px 0;margin-bottom:-12px;background:linear-gradient(0deg,var(--paper2) 75%,transparent);flex-wrap:nowrap}
.mf button.wide{flex:1}
.hrow{padding:10px 0;border-bottom:1px dashed #0000001f}.hrow p{margin:.2em 0 0;font-size:.9rem}

/* ===== ตัวแก้ไขของ DM ===== */
#edf h3{margin-top:12px;padding-top:10px;border-top:1px solid #0000001a}
#edf h3:first-child{border:0;margin-top:0;padding-top:0}
.wedit{display:grid;grid-template-columns:1.2fr 1fr .8fr 1.6fr auto;gap:5px;margin-bottom:6px;animation:slideIn .25s var(--ease)}
.skedit{border:1px solid #0000001f;border-radius:var(--r2);overflow:hidden}
.skh2,.skr{display:grid;grid-template-columns:2fr 62px 62px 1fr 1fr;gap:5px;align-items:center;padding:6px 8px}
.skh2{background:#0000000f;font-weight:700;font-size:.8rem;color:var(--ink2)}
.skr{border-top:1px solid #00000012;font-size:.88rem}
.skr small{display:block;font-size:.72rem}
.skr input,.skr select{padding:6px;font-size:.84rem}

/* ===== แจ้งเตือน ===== */
.toast{position:fixed;left:50%;bottom:24px;z-index:99;transform:translateX(-50%);padding:11px 18px;border-radius:30px;font-weight:600;
 background:linear-gradient(180deg,#26324f,#1a2238);color:#fff;border:1px solid #e8b23a66;box-shadow:var(--sh2);animation:toastIn .35s var(--spring);max-width:92vw;text-align:center}
.toast.bad{border-color:#e05a52;background:linear-gradient(180deg,#4b1f22,#331417)}
.toast.out{animation:toastOut .4s ease forwards}
.toast~.toast{bottom:78px}.toast~.toast~.toast{bottom:132px}

/* ===== แอนิเมชันทั่วไป ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes popIn{from{transform:translateY(18px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes popOut{from{transform:none;opacity:1}to{transform:translateY(10px) scale(.97);opacity:0}}
@keyframes pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,14px)}}
/* ลดการเคลื่อนไหว: เปิดเองได้จากปุ่ม “อนิเมชัน” (ไม่ผูกกับการตั้งค่า Windows เพราะหลายเครื่องปิดไว้โดยไม่รู้ตัว) */
html.fx-reduce *,html.fx-reduce *::before,html.fx-reduce *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}

/* =====================================================================
   หน้าเกม
   ===================================================================== */
.top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:8px 14px;
 background:linear-gradient(180deg,#0e1422f2,#0c111ce8);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);box-shadow:0 4px 20px #0006}
.top h1{margin:0;font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw}
.top>.row{flex-wrap:nowrap;min-width:0}
.myb{gap:9px;padding:6px 14px 6px 6px;border-radius:40px;font-size:.92rem;background:linear-gradient(135deg,var(--hope2),var(--hope) 50%,#c88d1c);color:#2b1d05;border-color:var(--hopeD);
 box-shadow:inset 0 1px 0 #fff9,0 3px 0 var(--hopeD),0 6px 22px #e8b23a40;white-space:nowrap;max-width:46vw;overflow:hidden}
.myb .av{width:32px;height:32px;border-color:#fff}
.myb .nm{font-family:var(--dsp);font-weight:700;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.myb b{color:#7a1b1f}
.myb.flash{animation:hurt .6s ease}
@keyframes hurt{0%,100%{transform:none}20%{transform:translateX(-6px);filter:hue-rotate(-40deg) saturate(2)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}}
.g{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;padding:12px;max-width:1800px;margin:0 auto}
main{display:flex;flex-direction:column;gap:8px;min-width:0}
aside{display:flex;flex-direction:column;min-width:0;position:sticky;top:64px;max-height:calc(100vh - 76px);align-self:start}
#tb{gap:8px;padding:6px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.seg{display:flex;gap:4px;align-items:center;padding:3px;border-radius:10px;background:#0004}
.seg button{padding:7px 10px;font-size:.86rem}
.seg .num{width:64px!important;flex:none;padding:7px 8px}
.f3>button,.f2>button{padding:9px 6px;white-space:nowrap;font-size:.86rem}
.zc{margin-left:auto}
#zl{min-width:62px;font-variant-numeric:tabular-nums}
#ad{color:var(--hope2);font-weight:700}

/* ----- แผนที่ ----- */
#mapv{position:relative;height:62vh;min-height:220px;overflow:auto;border-radius:var(--r);border:1px solid var(--line);
 background:repeating-conic-gradient(#121828 0 25%,#0f1422 0 50%) 0 0/40px 40px;box-shadow:inset 0 0 40px #000a;display:flex}
#mapv.over{outline:3px dashed var(--hope);outline-offset:-6px}
#map{position:relative;margin:auto;flex:none;user-select:none;-webkit-user-select:none}
#mi{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;border-radius:4px}
#gl{position:absolute;inset:0;pointer-events:none;display:none;background-image:linear-gradient(#ffffff26 1px,transparent 1px),linear-gradient(90deg,#ffffff26 1px,transparent 1px)}
#gl.on{display:block}
#aoe{position:absolute;inset:0;pointer-events:none;overflow:visible}
#tk{position:absolute;inset:0}
#sp{height:10px;cursor:row-resize;border-radius:8px;position:relative;touch-action:none}
#sp::after{content:'';position:absolute;left:50%;top:3px;width:60px;height:4px;margin-left:-30px;border-radius:4px;background:var(--line2);transition:background .2s,width .2s,margin .2s}
#sp:hover::after{background:var(--hope);width:90px;margin-left:-45px}
.ping{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid var(--hope);pointer-events:none;animation:ping 1.1s ease-out 3}
.ping.dm{border-color:#ff5c7a}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(2.6);opacity:0}}

/* ----- โทเคน ----- */
/* --k = ขนาดโทเคน × ระดับซูมแมพ (--z ตั้งใน fitMap) → โทเคนย่อ/ขยายไปพร้อมแมพและตาราง */
.tok{--s:1;--k:calc(var(--s)*var(--z,1));--c:#e8b23a;position:absolute;width:calc(46px*var(--k));height:calc(46px*var(--k));margin:calc(-23px*var(--k)) 0 0 calc(-23px*var(--k));
 transition:left .45s var(--ease),top .45s var(--ease),width .2s,height .2s,margin .2s;z-index:2;touch-action:none;animation:tokIn .4s var(--spring)}
@keyframes tokIn{from{transform:scale(0)}to{transform:scale(1)}}
.tok .tp{width:100%;height:100%;border-radius:50%;background:var(--c) center/cover no-repeat;border:3px solid var(--c);box-shadow:0 3px 10px #000b,0 0 0 2px #0008;
 display:grid;place-items:center;font-weight:700;font-family:var(--dsp);font-size:calc(1.1rem*var(--k));color:#fff;text-shadow:0 1px 3px #000;transition:transform .2s,box-shadow .2s}
.tok>small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;font-size:.72rem;font-weight:700;color:#fff;
 background:#000b;padding:1px 7px;border-radius:10px;pointer-events:none;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.tok>.hp.mini{position:absolute;top:calc(100% + 4px + 20px*min(1,var(--z,1)));left:50%;width:calc(46px*var(--k));transform:translateX(-50%);height:6px;margin:0;border:1px solid #000;background:#000a;pointer-events:none}
.k_mon .tp{border-radius:12px;border-color:#d23b4e}
.k_npc .tp{border-color:#33b89c}
.k_persona .tp{border-style:dashed}
.tok.down .tp{filter:grayscale(1) brightness(.6)}
.tok.down::after{content:'ตุย';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);padding:1px 5px;border-radius:4px;background:#7a1020;color:#fff;font:700 calc(.62rem*var(--k))/1.3 'Sarabun',sans-serif;white-space:nowrap;box-shadow:0 1px 4px #000a;pointer-events:none}
.tok.mine{cursor:grab}
.tok.mine:hover{z-index:5}
.tok.mine:hover .tp{box-shadow:0 0 0 3px #fff,0 6px 18px #000c}
.tok.drag{cursor:grabbing;z-index:9;transition:width .2s,height .2s}
.tok.drag .tp{transform:scale(1.12);box-shadow:0 0 0 3px var(--hope),0 14px 26px #000d}
.tok.sel .tp{box-shadow:0 0 0 4px #ff5c5c,0 0 22px #ff3b3b}
.tc{position:absolute;inset:-12px;pointer-events:none;opacity:0;transition:opacity .15s}
.tok.mine:hover .tc{opacity:1}
.tc b{position:absolute;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;pointer-events:auto;cursor:pointer;
 background:#1b2338;color:#fff;border:1.5px solid #fff;box-shadow:0 2px 6px #000a;transition:transform .15s var(--spring)}
.tc b:hover{transform:scale(1.25)}
.tc .m{left:-2px;top:-2px}.tc .p{right:-2px;top:-2px}.tc .x{right:-2px;bottom:-2px;background:var(--bad)}
.tok.lunge{animation:lunge .35s ease}
@keyframes lunge{50%{transform:translate(var(--dx),var(--dy)) scale(1.1)}}
.tok.hit .tp{animation:shake .45s ease}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px);filter:brightness(2) saturate(3) hue-rotate(-30deg)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.slash{position:absolute;inset:-10%;pointer-events:none;background:linear-gradient(135deg,transparent 44%,#fff 48%,#ff4d4d 50%,#fff 52%,transparent 56%);animation:slash .45s ease forwards}
@keyframes slash{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0);opacity:0}}
.dmgt{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font:700 1.25rem var(--dsp);color:#ff5050;text-shadow:0 2px 0 #000,0 0 10px #000;pointer-events:none;animation:dmg 1.1s ease forwards;white-space:nowrap}
@keyframes dmg{0%{transform:translate(-50%,8px) scale(.4);opacity:0}25%{transform:translate(-50%,-10px) scale(1.25);opacity:1}100%{transform:translate(-50%,-38px);opacity:0}}

/* ----- บันทึกเหตุการณ์ / แชต ----- */
#lg{height:190px;overflow:auto;margin:0;padding:10px 14px;font-size:.92rem}
#lg .l{padding:5px 0 5px 10px;border-left:3px solid transparent;animation:slideIn .3s var(--ease)}
#lg .l+.l{border-top:1px dashed #0000001a}
#lg .l b{color:#7a1b1f}
#lg .roll{border-left-color:var(--hope)}
#lg .dm{border-left-color:var(--act);font-style:italic}
#lg .skill{border-left-color:var(--blue)}
#lg .chat{border-left-color:#0000002a}
#chat{flex-direction:row}
#chat input{flex:1}

/* ----- แผงด้านขวา: แท็บ ----- */
.tabs{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;padding:4px;border-radius:var(--r) var(--r) 0 0;background:var(--panel);border:1px solid var(--line);border-bottom:0;flex:none}
.tabs button{flex-direction:column;gap:1px;padding:7px 2px 6px;font-size:.72rem;font-weight:600;background:transparent;box-shadow:none;border:1px solid transparent;color:var(--mut);border-radius:9px;min-width:0}
.tabs button .ti{font-size:1.3rem;line-height:1.1;transition:transform .3s var(--spring)}
.tabs button span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabs button:hover:not(:disabled){background:#ffffff0c;color:var(--cream);transform:none}
.tabs button.on{background:linear-gradient(180deg,#e8b23a2e,#e8b23a10);border-color:#e8b23a66;color:var(--hope2)}
.tabs button.on .ti{transform:scale(1.15) translateY(-1px)}
.pane{flex:1;overflow:auto;padding:10px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);background:#0d1220cc;min-height:0}
.pane.enter{animation:paneIn .3s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.pane>.card:last-child,.pane>div:last-child>.card:last-child{margin-bottom:0}

/* ----- เต๋า (ทับทั้งจอ) ----- */
#ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .25s}
#ov.on{opacity:1;background:radial-gradient(circle at 50% 45%,#000a,#0006 60%,transparent)}
.ovw{display:flex;flex-direction:column;align-items:center;gap:14px;transform:scale(.7);transition:transform .35s var(--spring)}
#ov.on .ovw{transform:scale(1)}
#ob{width:130px;height:130px;display:grid;place-items:center;font:700 3.4rem var(--dsp);color:#2b1d05;
 background:linear-gradient(135deg,var(--hope2),var(--hope) 55%,#b97e12);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
 filter:drop-shadow(0 8px 20px #000)}
#ob.roll{animation:tumble .62s cubic-bezier(.2,.7,.3,1)}
@keyframes tumble{0%{transform:rotate(-540deg) scale(.3)}70%{transform:rotate(20deg) scale(1.1)}100%{transform:none}}
.land{animation:land .35s var(--spring)}
@keyframes land{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.du{display:flex;gap:16px;align-items:stretch}
.du .f{width:118px;padding:12px 8px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid #fff3;box-shadow:0 10px 30px #000c;
 animation:tumble .62s cubic-bezier(.2,.7,.3,1);transition:transform .3s var(--spring),box-shadow .3s}
.du .f small{color:#fffc;font-weight:700;letter-spacing:1.5px;font-size:.78rem;text-align:center}
.du .f b{font:700 3rem/1.1 var(--dsp);color:#fff;text-shadow:0 2px 6px #0008;display:inline-block}
.du .hope{background:linear-gradient(160deg,var(--hope2),var(--hope) 50%,#9b6c0e)}
.du .hope b,.du .hope small{color:#2b1d05;text-shadow:none}
.du .fear{background:linear-gradient(160deg,#d0496f,var(--fear) 50%,#4d0f22);animation-delay:.05s}
.du .mid{background:linear-gradient(160deg,#3c4a72,#1c2540);width:140px}
.du .f.win{transform:scale(1.12) translateY(-6px);box-shadow:0 0 0 3px #fff,0 0 40px #fff8,0 10px 30px #000c}
#ot{margin:0;max-width:min(560px,92vw);text-align:center;padding:9px 18px;border-radius:30px;background:#0c111ce6;border:1px solid #ffffff26;font-weight:600;font-size:1.02rem;box-shadow:var(--sh2)}
#ot.gold{color:#2b1d05;background:linear-gradient(90deg,var(--hope2),var(--hope));border-color:#fff;animation:pop .4s var(--spring)}

/* ----- มือถือ / จอเล็ก ----- */
@media (max-width:1100px){.g{grid-template-columns:minmax(0,1fr) 330px}}
@media (max-width:900px){
 .g{grid-template-columns:1fr;padding:8px}
 aside{position:static;max-height:none}
 .top{grid-template-columns:1fr auto;padding:8px 10px}
 .top>.row button span:last-child{display:none}
 .top>.row button span.ic{font-size:1.15em}
 .myb{grid-column:1/-1;grid-row:2;justify-self:stretch;max-width:none}
 .top h1{max-width:52vw}
 #mapv{height:52vh}
 .zc{margin-left:0}
 .seg button span:last-child:not(:only-child){display:none}
 .wedit{grid-template-columns:1fr 1fr}
 .skh2,.skr{grid-template-columns:1.4fr 52px 52px 1fr 1fr;font-size:.8rem}
 .du{gap:8px}.du .f{width:92px}.du .mid{width:104px}.du .f b{font-size:2.3rem}
}
@media (max-width:520px){.f3,.f4{grid-template-columns:1fr 1fr}.tabs button span:last-child{font-size:.66rem}.st{grid-template-columns:repeat(2,1fr)}.myb>span:not(.av):not(.nm){display:none}}

/* =====================================================================
   หน้าอื่น: เข้าสู่ระบบ / Lobby / ตัวละคร / แอดมิน
   ===================================================================== */
.wrap{max-width:1100px;margin:0 auto;padding:18px 16px 40px;display:flex;flex-direction:column;gap:14px}
.wrap>.card{margin:0}
.hdr{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hdr h1{margin:0}
.nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.who{display:flex;gap:9px;align-items:center;padding:4px 12px 4px 4px;border-radius:40px;background:var(--panel2);border:1px solid var(--line)}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.room{display:flex;flex-direction:column;gap:6px;margin:0;transition:transform .25s var(--ease),box-shadow .25s;animation:slideIn .35s var(--ease) both}
.room:hover{transform:translateY(-3px);box-shadow:0 12px 30px #0008}
.room h3{margin:0}
.seats{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:4px 0}
.seats i{width:14px;height:14px;border-radius:50%;border:2px solid #8f202466;background:#0000000d}
.seats i.on{background:var(--act);border-color:var(--act)}
.seats small{margin-left:6px}
.foot{display:flex;gap:7px;margin-top:auto;padding-top:8px}
.foot>button:first-child{flex:1}
.drop{border:2px dashed #b49c62;border-radius:var(--r);padding:26px 16px;text-align:center;transition:background .2s,border-color .2s,transform .2s}
.drop.over{background:#e8b23a26;border-color:var(--act);transform:scale(1.01)}
.ctabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ctabs button{padding:13px}
.chs{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.ch{display:flex;flex-direction:column;gap:8px;margin:0;animation:slideIn .35s var(--ease) both}
.ch .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.lnk{font-size:.82rem;word-break:break-all}
.steps{margin:6px 0 0;padding-left:20px;font-size:.9rem}.steps li{margin:3px 0}
body.auth{display:grid;place-items:center;min-height:100vh}
.auth-box{width:min(420px,94vw);text-align:center}
.auth-box .card{text-align:left}
.auth-box h1{font-size:2.4rem;margin-bottom:0;text-shadow:0 0 30px #e8b23a55}
.tag{color:var(--mut);margin:0 0 6px}
.err{color:var(--act);font-weight:600;margin:0;min-height:1.2em}
.linkbtn{background:none!important;box-shadow:none!important;border:0!important;color:#8f2024!important;padding:4px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
table{border-collapse:collapse;width:100%}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:.9rem}
th{color:var(--hope)}

/* ===== ตัวตรวจ/แก้ไขชีต (หน้าตัวละคร) ===== */
.prog{height:8px;border-radius:8px;background:#0002;overflow:hidden;margin-top:12px}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hope),var(--act));transition:width .3s var(--ease)}
.eds{border:1px solid #0000001f;border-radius:var(--r);margin:10px 0;background:#ffffff40;overflow:hidden}
.eds>summary{cursor:pointer;padding:10px 14px;font:700 1.02rem var(--dsp);color:#7a1b1f;list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#0000000a;user-select:none}
.eds>summary::before{content:'▸';transition:transform .2s var(--ease);display:inline-block}
.eds[open]>summary::before{transform:rotate(90deg)}
.eds>summary::-webkit-details-marker{display:none}
.eds>summary small{font-family:'Sarabun',sans-serif;font-weight:500}
.eds>:not(summary){margin-left:14px;margin-right:14px}
.eds>:last-child{margin-bottom:12px}
.eds h4{margin:12px 14px 6px;font-size:.95rem;color:#7a1b1f}
.eds .f2,.eds .f3,.eds .f4{margin-top:8px}
.frow{padding:10px 0;border-bottom:1px dashed #00000026;animation:slideIn .25s var(--ease)}
.frow textarea{font-size:.9rem}
.xrow{display:grid;grid-template-columns:1fr 1fr 70px auto;gap:6px;margin:6px 14px}
.inl{width:auto;max-width:220px;padding:4px 8px;font:inherit;font-size:.92rem}
.w60{width:60px!important}.w80{width:90px!important}
.irow .row{align-items:flex-end}.irow .lbl{min-width:0}
#edroot .eds:first-child{margin-top:4px}
@media (max-width:700px){.xrow{grid-template-columns:1fr 1fr}.eds .f4{grid-template-columns:1fr 1fr}.eds .f2{grid-template-columns:1fr}}

/* ===== กลไกสกิลในเกม ===== */
.skc .opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.skc .opts select{width:auto;padding:6px 8px;font-size:.84rem}
.skc.on{box-shadow:0 0 0 2px #2e9e6a,0 6px 18px #2e9e6a40}
.skc.on::before{background:linear-gradient(180deg,#5ee09a,#25a463)}
.tg.act{background:#2e9e6a33;border-color:#2e9e6a;color:#16613f}
.tg.tkn{background:#b36bff22;border-color:#b36bff77;color:#5b2a91}
.tokc{display:inline-flex;align-items:center;gap:6px;padding:3px 6px;border-radius:30px;background:#b36bff1a;border:1px solid #b36bff55;font-weight:700;color:#5b2a91}
.tokc button{padding:2px 8px;min-width:0}
.actv{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.actv .chipA{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border-radius:30px;background:#2e9e6a22;border:1px solid #2e9e6a88;font-weight:700;font-size:.86rem;color:#16613f;animation:pop .35s var(--spring)}
.card:not(.paper) .actv .chipA{color:#8ff0bd}
.myb .on2{background:#2e9e6a;color:#fff;border-radius:20px;padding:0 7px;font-size:.78rem}
.advseg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:10px;background:#00000014;margin:6px 0}
.advseg button{padding:7px 4px;font-size:.84rem;background:transparent;color:var(--ink);box-shadow:none;border:1px solid transparent}
.advseg button.on{background:#fffaf0;border-color:#b9a06a;box-shadow:0 2px 0 #b9a06a}
.advseg button.on.up{background:#2e9e6a;color:#fff;border-color:#1d6e48;box-shadow:0 2px 0 #1d6e48}
.advseg button.on.dn{background:#a3244a;color:#fff;border-color:#6d1630;box-shadow:0 2px 0 #6d1630}
.exps{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.exps button{padding:5px 11px;font-size:.84rem;border-radius:30px;background:#fffaf0;color:var(--ink);border:1px solid #b9a06a;box-shadow:0 2px 0 #b9a06a}
.exps button.on{background:linear-gradient(180deg,var(--hope2),var(--hope));border-color:var(--hopeD);box-shadow:0 2px 0 var(--hopeD),0 0 12px #e8b23a66}
.wmeta{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.wmeta span{font-size:.74rem;font-weight:700;padding:1px 8px;border-radius:20px;background:#00000010;border:1px solid #0000001c;color:var(--ink2)}
.hands{display:inline-flex;gap:3px}.hands i{font-style:normal;opacity:.3}.hands i.on{opacity:1}
.armr{padding:9px 11px;border-radius:var(--r2);background:#3d7bd912;border:1px solid #3d7bd944;margin:6px 0}
.ieff{font-size:.74rem;font-weight:700;padding:1px 8px;border-radius:20px;margin-left:4px}
.ieff.hp{background:#2e9e6a22;color:#16613f;border:1px solid #2e9e6a66}.ieff.stress{background:#a3244a1c;color:#7a1534;border:1px solid #a3244a55}.ieff.hope{background:#e8b23a33;color:#6b4a06;border:1px solid #c99526}
.miss{border:2px dashed #b49c62;background:#fffaf080;color:var(--ink2)}
.card:not(.paper) .tg.act{color:#8ff0bd;background:#2e9e6a2a}
#edb2 .mh{position:static;margin:14px 0 4px;padding:0;background:none}

/* ===== หมวดย่อ/ขยายในแผงด้านขวา ===== */
.pbar{position:sticky;top:-10px;z-index:3;margin:-10px -10px 8px;padding:8px 10px;background:linear-gradient(180deg,#0d1220 80%,#0d122000);gap:6px}
.pbar button.mini{padding:5px 8px;font-size:.78rem}
.pbar b{color:var(--hope2)}
.acc{border:1px solid var(--line);border-radius:var(--r);margin:0 0 8px;background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:var(--sh1);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.acc.paper{background:linear-gradient(180deg,var(--paper),var(--paper2));border-color:#c8b07a;color:var(--ink)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 12px;user-select:none;min-height:46px;transition:background .15s}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{background:#ffffff0a}.acc.paper>summary:hover{background:#0000000a}
.acc>summary:focus-visible{outline:2px solid var(--hope);outline-offset:-2px}
.acc .at{display:flex;align-items:center;gap:8px;font:700 1rem var(--dsp);color:var(--hope);min-width:0;flex:1;overflow:hidden}
.acc .at>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc .at small{font-family:'Sarabun',sans-serif;font-weight:500;font-size:.76rem}
.acc.paper .at{color:#7a1b1f}
.acc .at .av{width:28px;height:28px;font-size:.85rem;border-width:2px}
.acc .as{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:60%}
.sv{font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:20px;background:#ffffff12;border:1px solid #ffffff1f;color:var(--cream);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.acc.paper .sv{background:#00000010;border-color:#00000022;color:var(--ink2)}
.sv.ok{background:#2e9e6a2e;border-color:#2e9e6a88;color:#8ff0bd}.acc.paper .sv.ok{color:#16613f}
.sv.lo{background:#e08a1230;border-color:#e08a1288;color:#ffc35a}.sv.dd{background:#c8413b30;border-color:#c8413b88;color:#ff8a80}
.sv .chip{width:18px;height:18px;font-size:.66rem;margin:0}
.chev{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#ffffff10;color:var(--mut);font-size:.8rem;transition:transform .25s var(--ease),background .2s}
.acc.paper .chev{background:#00000010;color:var(--ink2)}
.acc[open]>summary .chev{transform:rotate(180deg);background:#e8b23a33;color:var(--hope)}
.acc[open]{border-color:#e8b23a55;box-shadow:var(--sh1),0 0 0 1px #e8b23a22}
.acc[open]>summary{border-bottom:1px solid #ffffff12}.acc.paper[open]>summary{border-bottom-color:#0000001a}
.acc>.ab{padding:10px 12px 12px}
.acc[open]>.ab{animation:accIn .28s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acc.mem>summary{padding:7px 10px}
.acc .ab>.card{margin:0;box-shadow:none}
.acc .skc:first-child{margin-top:0}
/* คำอธิบายสกิลย่อได้ */
.skd{margin-top:8px;border-top:1px dashed #00000022;padding-top:6px}
.skd>summary{cursor:pointer;list-style:none;font-size:.82rem;font-weight:700;color:#24406e;display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border-radius:20px;background:#3d7bd914;border:1px solid #3d7bd944;transition:background .15s}
.skd>summary::-webkit-details-marker{display:none}
.skd>summary::after{content:'▾';transition:transform .2s var(--ease)}
.skd[open]>summary::after{transform:rotate(180deg)}
.skd>summary:hover{background:#3d7bd926}
.skd[open]>p{animation:accIn .25s var(--ease)}
.skc .wbt{margin-top:6px}
.acc .as{flex-wrap:nowrap}
.acc.mem .at{font-size:.95rem}
.stats{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
.stats span{padding:7px 2px}
.pbar{flex-wrap:nowrap}.pbar>:first-child{min-width:0;overflow:hidden}
.acc .sk{flex-wrap:wrap;padding:8px 10px}.acc .sk>div:first-child{flex:1 1 170px}

b small.en{font-weight:400;opacity:.6;font-size:.78em;margin-left:4px}

/* ===================== สแตนด์ / ร่างอัญเชิญ ===================== */
.stand{--c:#8a4fff;display:grid;grid-template-columns:64px 1fr;gap:10px;padding:10px;margin:8px 0;border-radius:12px;background:#fff8;border:2px solid color-mix(in srgb,var(--c) 45%,transparent);position:relative;overflow:hidden}
.stand.out{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 18px color-mix(in srgb,var(--c) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,#fff8),#fff8)}
.stand.ko{filter:grayscale(.7)}
.stp{width:64px;height:64px;border-radius:50%;background:var(--c) center/cover no-repeat;border:3px solid var(--c);display:grid;place-items:center;font:700 1.6rem var(--dsp);color:#fff;text-shadow:0 2px 0 #0008}
.stand.out .stp{animation:aura 1.6s ease-in-out infinite}
.stb>b{font-family:var(--dsp);font-size:1.05rem}
.stb .cry{font-style:italic;opacity:.75}
.stb p{margin:4px 0;font-size:.9rem}
.wmeta .on{color:#5b2bd6;font-weight:700}
button.summon{background:linear-gradient(135deg,#5b2bd6,#b04bff);color:#fff;border-color:#3d1a99;text-shadow:0 1px 0 #0006}
@keyframes aura{0%,100%{box-shadow:0 0 0 2px var(--c),0 0 8px 2px var(--c)}50%{box-shadow:0 0 0 4px var(--c),0 0 24px 8px var(--c)}}
.tok.k_summon .tp{animation:aura 1.8s ease-in-out infinite}
.tok.k_summon::before{content:'';position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%);animation:aura2 2.2s ease-in-out infinite;pointer-events:none}
@keyframes aura2{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.25);opacity:1}}
.tok.spawn{animation:spawn 1.2s cubic-bezier(.2,1.6,.4,1)}
@keyframes spawn{0%{transform:scale(0) rotate(-90deg);filter:brightness(4)}60%{transform:scale(1.35) rotate(8deg);filter:brightness(2)}100%{transform:none;filter:none}}
.tok.marked .tp{animation:mark .5s ease-in-out 5 alternate}
@keyframes mark{to{box-shadow:0 0 0 5px #ffd23a,0 0 26px 8px #ff9d00}}
/* JoJo: ゴゴゴゴ */
.jojo{--c:#8a4fff;position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden;animation:fadeIn .25s ease;
 background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--c) 30%,transparent),#0b0418ee 70%)}
.jojo.out{animation:fadeOut .55s ease forwards}
.jojo .jl{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,#ffffff14 0 2deg,transparent 2deg 9deg);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.jojo .go{position:absolute;font:900 clamp(48px,9vw,120px)/1 'Yu Gothic','Meiryo','MS Gothic','Hiragino Sans','Noto Sans JP','Noto Sans CJK JP',sans-serif;color:var(--c);-webkit-text-stroke:3px #12062b;text-shadow:5px 5px 0 #12062b;
 animation:gogo 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.17s);opacity:.92}
.jojo .go:nth-child(2){left:4%;top:8%}.jojo .go:nth-child(3){left:14%;top:30%;font-size:clamp(36px,6vw,80px)}.jojo .go:nth-child(4){left:6%;top:58%}.jojo .go:nth-child(5){left:18%;top:78%;font-size:clamp(36px,6vw,80px)}
.jojo .go:nth-child(6){right:5%;top:6%}.jojo .go:nth-child(7){right:16%;top:28%;font-size:clamp(36px,6vw,80px)}.jojo .go:nth-child(8){right:4%;top:52%}.jojo .go:nth-child(9){right:18%;top:74%;font-size:clamp(36px,6vw,80px)}
.jojo .go:nth-child(10){left:44%;top:3%;font-size:clamp(30px,5vw,64px)}.jojo .go:nth-child(11){left:46%;bottom:4%;font-size:clamp(30px,5vw,64px)}
@keyframes gogo{from{transform:translateY(0) scale(1) rotate(-6deg)}to{transform:translateY(-14px) scale(1.12) rotate(6deg)}}
.jojo .jc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) skewX(-8deg);display:flex;align-items:center;gap:22px;padding:18px 30px;
 background:linear-gradient(100deg,#12062bdd,color-mix(in srgb,var(--c) 55%,#12062b) 60%,#12062bdd);border:3px solid var(--c);box-shadow:0 0 40px var(--c);animation:jcIn .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes jcIn{from{transform:translate(-160%,-50%) skewX(-8deg);opacity:0}to{transform:translate(-50%,-50%) skewX(-8deg);opacity:1}}
.jojo .jp{width:clamp(90px,14vw,150px);height:clamp(90px,14vw,150px);border-radius:50%;background:var(--c) center/cover no-repeat;border:4px solid #fff;box-shadow:0 0 0 4px var(--c),0 0 40px var(--c);
 display:grid;place-items:center;font:900 3rem var(--dsp);color:#fff;animation:aura 1s ease-in-out infinite;flex:none}
.jojo .jt{color:#fff;transform:skewX(8deg)}
.jojo .jt small{letter-spacing:.3em;font-weight:800;color:color-mix(in srgb,var(--c) 40%,#fff)}
.jojo .jt h2{margin:.1em 0;font:900 clamp(26px,4.2vw,52px)/1.15 var(--dsp);color:#fff;-webkit-text-fill-color:#fff;background:none;max-width:min(62vw,720px);overflow-wrap:anywhere;-webkit-text-stroke:2px #12062b;text-shadow:4px 4px 0 #12062b,0 0 24px var(--c)}
.jojo .jt p{margin:0;font-size:clamp(15px,2vw,22px);font-style:italic;font-weight:700}
/* ข้อความใหญ่กลางจอ: COMBO / LEVEL UP */
.bigfx{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:8000;pointer-events:none;font:900 clamp(40px,8vw,96px)/1 var(--dsp);color:#ffd23a;
 -webkit-text-stroke:3px #3a1500;text-shadow:5px 5px 0 #3a1500,0 0 30px #ff7a00;animation:bigIn .45s cubic-bezier(.2,1.8,.4,1);text-align:center;white-space:nowrap}
.bigfx small{display:block;font-size:.45em;letter-spacing:.2em;color:#fff}
.bigfx b{color:#fff}
.bigfx.hits{top:52%;color:#ff4d4d;font-size:clamp(32px,6vw,72px)}
.bigfx.lvup{color:#ffe27a;text-shadow:5px 5px 0 #3a1500,0 0 40px #ffd23a}
.bigfx.out{animation:fadeOut .45s ease forwards}
@keyframes bigIn{from{transform:translate(-50%,-50%) scale(3) rotate(-8deg);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.dmgt.big{font-size:2rem}
/* เลือกเป้าหมาย */
.tgh{margin:12px 0 6px;font-size:.95rem}
.tgg{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.tgb{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border-radius:12px;background:#fff9;border:2px solid #0002;color:inherit;transition:transform .12s,border-color .12s,box-shadow .12s}
.tgb:hover{transform:translateY(-2px);border-color:#c0392b;box-shadow:0 6px 16px #0003}
.tgb .av{width:52px;height:52px}
.tgb span{font-weight:700;font-size:.88rem;text-align:center;line-height:1.2}
.tgb .hp.mini{width:80%}
.tgx{margin-top:12px;flex-wrap:wrap}
/* โจมตีประสาน (แถบเหนือแมพ) */
.cbn,.atq{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.cbc{padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,#3a1d06,#6b2c0b);border:2px solid #ffb13a;color:#fff;box-shadow:0 0 18px #ff8a0055;animation:popIn .3s ease}
.cbc.wait{background:#2a2f45;border-color:#7c86b3;box-shadow:none}
.cbt{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.cbn{font-weight:800}
.cbc .cbn{background:#ffb13a;color:#3a1d06;border-radius:20px;padding:1px 10px;font-size:.85rem}
.cbl{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.cbp{background:#fff2;border:1px solid #fff4;border-radius:20px;padding:2px 10px;font-size:.88rem}
.cbp small{opacity:.75}
.cba{flex-wrap:wrap;gap:6px;align-items:center}
.cba select{max-width:220px}
.tt{display:inline-flex;gap:5px;align-items:center;font-size:.85rem;font-weight:700;background:#fff2;border-radius:8px;padding:4px 8px}
/* DM: การโจมตีรอตัดสิน */
.atq{padding:10px;border-radius:12px;background:#1a1220;border:2px solid #e05a4a;box-shadow:0 0 20px #e05a4a44;animation:popIn .3s ease}
.aqt{color:#fff;display:flex;gap:8px;align-items:center}
.aqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.aq{background:#fffaf0;color:#2a1b12;border-radius:10px;padding:8px 10px;border-left:5px solid #e05a4a;animation:slideIn .3s ease}
.aq.grp{border-left-color:#ffb13a;grid-column:1/-1}
.aqn small{display:block;opacity:.7}
.aqr,.aqm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.aqm{border-top:1px dashed #0002;padding-top:4px}
.aqv{font:700 1.2rem var(--dsp)}
.aqh{font-size:.8rem;font-weight:700;padding:1px 8px;border-radius:20px;background:#0001}
.aqh.ok{background:#2f8a5c22;color:#1f6b45}.aqh.no{background:#c0392b22;color:#a02a1e}
.aqd{display:inline-flex;align-items:center;gap:4px}
.aqd input{width:64px}
/* อัปเดตตัวละครในห้อง */
.upc{width:min(1000px,97vw);height:min(92vh,980px);display:flex;flex-direction:column;padding:12px}
#upf{flex:1;border:0;border-radius:10px;background:#0e1422;width:100%}
/* character.html ในหน้าต่างอัปเดตระหว่างเล่น */
body.embed{padding:0}
body.embed .hdr,body.embed .ctabs,body.embed #boxA,body.embed #boxB,body.embed .wrap>.card:not(#boxU):not(.dfc),body.embed .wrap>small{display:none!important}
body.embed .wrap{max-width:none!important;padding:10px}
.dft{width:100%;border-collapse:collapse;margin:6px 0}
.dft td,.dft th{padding:4px 8px;border-bottom:1px solid #0001;text-align:left}
.dfc ul{margin:4px 0 8px 18px;padding:0}
.lvup{font:700 1.3rem var(--dsp);color:#b7791f;margin:0 0 6px}
#boxU .done{text-align:center;padding:30px 10px}
.chc{align-items:center;border-radius:10px;padding:6px 8px;transition:background .2s}
.chc.out{background:#8a4fff1a;box-shadow:inset 0 0 0 1px #8a4fff55}
/* คลังไอเทม */
.efr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:center;margin:5px 0;padding:6px;border-radius:10px;background:#0000000a}
.efr>select,.efm>*{width:100%;min-width:0}.efm{display:flex;gap:6px;min-width:0}.efr>button{width:auto}
.ieffs{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0}
.ieffs .ieff{margin-left:0;background:#2e9e6a18;color:#16613f;border:1px solid #0001}
.ieff.k_hp_lose,.ieff.k_stress_add,.ieff.k_hope_lose,.ieff.k_cond_add{background:#c0392b1c;color:#9b2b1f;border-color:#c0392b44}
.ieff.k_gold{background:#f4a30022;color:#8a5a00}.ieff.k_note,.ieff.k_roll{background:#3d7bd91a;color:#24406e}
.libi .lbi{display:flex;gap:10px;align-items:flex-start}
.lbp{flex:none;width:46px;height:46px;border-radius:10px;background:#0001 center/cover no-repeat;display:grid;place-items:center;font-size:1.4rem;border:2px solid #0002}
.sk.hasimg{display:grid;grid-template-columns:46px 1fr;gap:10px;align-items:start}.sk.hasimg>.row{grid-column:1/-1}
.tt2{display:flex;gap:6px;align-items:center;font-weight:700;margin-top:8px}
.gvu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.gvp{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#fff8;border:2px solid #0001;cursor:pointer}
.gvp:has(input:checked){border-color:#2f8a5c;background:#2f8a5c18}
.gvp span{display:flex;flex-direction:column;font-weight:700;line-height:1.2}.gvp small{font-weight:400;opacity:.7}

.gvp input{width:18px;height:18px;flex:none;accent-color:#2f8a5c;margin:0}
.tt2 input{width:18px;height:18px;accent-color:#a3243b}

/* ===================== ล็อบบี้ (กระดานแคมเปญ) ===================== */
.lobby{max-width:1180px}
.lobby .hdr{border-bottom:0;padding:6px 0 4px}
.lobby .hdr h1{font-size:clamp(1.5rem,3vw,2rem);text-shadow:0 2px 0 #0008,0 0 24px #e8b23a33}
.hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:10px 0 16px;padding:22px 24px;border-radius:18px;
 background:linear-gradient(120deg,#2a1a0a 0%,#3b2410 35%,#1a2336 100%);border:1px solid #e8b23a55;box-shadow:var(--sh1),inset 0 1px 0 #ffffff14;animation:slideIn .4s var(--ease) both}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(420px 220px at 12% 0%,#e8b23a33,transparent 70%),repeating-linear-gradient(135deg,#ffffff06 0 2px,transparent 2px 14px);pointer-events:none}
.hero::after{content:none;position:absolute;right:-10px;bottom:-34px;font-size:150px;opacity:.09;transform:rotate(-12deg);pointer-events:none}
.hcopy{position:relative}
.hcopy small{color:var(--hope2);letter-spacing:.06em;font-weight:700}
.hcopy h2{margin:2px 0 4px;font-size:clamp(1.6rem,3.6vw,2.3rem);color:#fff;text-shadow:0 2px 0 #0009}
.hcopy p{margin:0;color:#e9dcc0;max-width:520px}
.hstat{position:relative;display:flex;gap:10px;flex-wrap:wrap}
.hstat span{min-width:96px;padding:10px 14px;border-radius:12px;background:#0006;border:1px solid #ffffff1a;text-align:center;backdrop-filter:blur(4px)}
.hstat b{display:block;font:700 1.7rem/1.1 var(--dsp);color:var(--hope)}
.hstat small{color:#d7c9a8;font-size:.78rem}
.crc{border-color:#e8b23a44;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.ccc{border-color:#e8b23a66;background:linear-gradient(120deg,#3b2410,#1a2336)}
.lsec{margin:22px 0 6px;animation:slideIn .4s var(--ease) both}
.lsh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.lsh h2{margin:0;font-size:1.25rem}
.muted{color:var(--mut)}
.lnk2{color:var(--hope2);font-weight:700;text-decoration:none}.lnk2:hover{text-decoration:underline}
/* แถบตัวละคร */
.chstrip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.chip2{flex:none;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:40px;background:var(--panel2);border:1px solid var(--line);color:var(--cream);text-decoration:none;
 transition:transform .18s var(--ease),border-color .18s,background .18s}
.chip2:hover{transform:translateY(-2px);border-color:var(--hope);background:var(--panel3)}
.chip2 span:last-child{display:flex;flex-direction:column;line-height:1.25}
.chip2 small{color:var(--mut);font-size:.78rem}
.chip2.add{border-style:dashed}.chip2.add .av{background:#0000;border-style:dashed;color:var(--hope)}
/* การ์ดห้อง */
.rooms2{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.rooms2.feat{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.room2{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--paper);color:var(--ink);box-shadow:var(--sh1);border:1px solid #00000022;
 animation:slideIn .4s var(--ease) both;transition:transform .25s var(--ease),box-shadow .25s}
.room2:hover{transform:translateY(-4px);box-shadow:0 14px 34px #000a}
.room2.joined{outline:2px solid #2e9e6a;outline-offset:-2px}
.room2.full{filter:saturate(.6)}
.rcov{position:relative;height:118px;background:linear-gradient(135deg,#2b3a5e,#1a2336) center/cover no-repeat;display:flex;align-items:flex-end;padding:12px 14px}
.room2.feat .rcov{height:150px}
.rcov::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0000 20%,#000c 100%)}
.rart{position:absolute;right:14px;top:8px;font-size:64px;opacity:.25}
.rcov h3{position:relative;margin:0;color:#fff;font-size:1.3rem;text-shadow:0 2px 6px #000}
.rtag{position:absolute;left:12px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.pill{font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:20px;background:#000a;color:#fff;border:1px solid #ffffff33;backdrop-filter:blur(3px)}
.pill.ok{background:#1f7a52dd;border-color:#5fe0a6}.pill.no{background:#8f2024dd}
.rbd{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;flex:1}
.rdm{display:flex;align-items:center;gap:9px}
.rdm span{display:flex;flex-direction:column;line-height:1.2}.rdm small{color:var(--ink3);font-size:.72rem;letter-spacing:.04em}.rdm b{color:var(--ink)}
.rparty{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.rparty .stack{grid-column:1/-1;display:flex;min-height:34px;align-items:center}
.av.sm{width:34px;height:34px;font-size:.85rem;margin-left:-8px;border:2px solid var(--paper);box-shadow:0 1px 3px #0005}
.stack .av.sm:first-child{margin-left:0}
.rparty .muted{color:var(--ink3)}
.seatbar{height:7px;border-radius:7px;background:#0000001f;overflow:hidden}
.seatbar i{display:block;height:100%;background:linear-gradient(90deg,var(--act),#c8413b);border-radius:7px;transition:width .4s var(--ease)}
.room2 .foot{display:flex;gap:8px;margin-top:auto}
.room2 .foot button:first-child{flex:1}
.room2 .foot button.go{background:linear-gradient(180deg,#2e9e6a,#1f7a52);border-color:#16613f}
.empty2{text-align:center;padding:48px 18px;border:2px dashed var(--line2);border-radius:18px;margin-top:18px;color:var(--mut)}
.empty2 .eart{font-size:56px;animation:aura2 3s ease-in-out infinite}
.empty2 h3{color:var(--cream)}
@media (max-width:640px){
 .lobby .hdr .nav .tool span:not(.ic){display:none}
 .lobby .hdr .nav .tool{padding:8px 10px}
 .lobby .who b{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .hero{padding:18px}
 .hstat{width:100%}.hstat span{flex:1;min-width:0}
 .rooms2,.rooms2.feat{grid-template-columns:1fr}
}
.room2 .foot .tool{background:#fff9;color:var(--ink);border-color:#00000026;box-shadow:none}
.room2 .foot .tool:hover{background:#c8413b;color:#fff}
@media (max-width:640px){.hstat span{padding:8px 6px}.hstat b{font-size:1.4rem}}
/* ค่าสถานะแบบชีต Nexus: ชื่อต้นฉบับ + การกระทำ */
.st button small{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.st button em{font-style:normal;font-size:.66rem;line-height:1.25;color:var(--ink3);margin-top:2px;white-space:normal}

/* ===================== iPad / จอสัมผัส ===================== */
button,.tok,.tgb,.chip2{touch-action:manipulation}
.tok{touch-action:none}
aside{max-height:calc(100dvh - 76px)}
@supports not (height:100dvh){aside{max-height:calc(100vh - 76px)}}
.top>span:empty{display:none}
/* แตะโทเคนของตัวเองแล้วปุ่ม ย่อ/ขยาย/เก็บ ขึ้นค้าง (ไม่ต้องใช้เมาส์ชี้) */
.tok.act .tc{opacity:1}
.tok.act .tp{box-shadow:0 0 0 3px #fff,0 6px 18px #000c}
@media (hover:none),(pointer:coarse){
 .tc{inset:-18px}.tc b{width:32px;height:32px;font-size:1rem}
 input,select,textarea{font-size:16px!important} /* iPad ไม่ซูมหน้าเองตอนพิมพ์ */
 .tool.mini{min-width:36px;min-height:36px}
 .acc>summary{min-height:44px}
}
/* แนวตั้ง / จอแคบ: แมพอยู่บน แผงแท็บต่อท้ายทันที แล้วค่อยบันทึกกับแชต ไม่ต้องเลื่อนลงไกล */
@media (max-width:900px){
 .g>main{display:contents}
 .g>main>#tb{order:1}.g>main>#cbn,.g>main>#atq{order:2}.g>main>#devtip{order:0}
 .g>main>#mapv{order:3;height:46vh;height:46dvh}
 .g>main>#sp{display:none}
 .g>aside{order:4}
 .g>main>#lg{order:5;max-height:34vh}.g>main>#chat{order:6}
}
/* คำแนะนำอุปกรณ์ */
.devtip{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:linear-gradient(120deg,#1d2a48,#2a1a0a);border:1px solid #e8b23a66;color:var(--cream);animation:popIn .3s ease}
.devtip .dti{font-size:1.6rem;flex:none}
.devtip p{margin:0;flex:1;font-size:.92rem;line-height:1.4}
.devtip b{color:var(--hope2)}
.devguide{margin-top:14px;color:var(--ink)}
.devguide>summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;align-items:center}
.devguide>summary::-webkit-details-marker{display:none}
.devguide>summary::after{content:'▾';transition:transform .2s}.devguide[open]>summary::after{transform:rotate(180deg)}
.dg{display:grid;gap:8px;margin-top:10px}
.dg div{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:start;padding:8px 10px;border-radius:10px;background:#0000000d}
.dg .di{font-size:1.7rem;text-align:center}
.dg span>b{display:block}.dg small{color:var(--ink2)}.dg small b{display:inline;color:var(--ink)}
.dg .rec{background:#2e9e6a1f;outline:1px solid #2e9e6a55}
.you{display:inline-block;margin-left:6px;font-size:.7rem;font-weight:800;color:#fff;background:#2e9e6a;border-radius:20px;padding:1px 8px}

/* ===================== การเข้าถึง (a11y) และกล่องยืนยัน ===================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.tgb:focus-visible,.chip2:focus-visible{outline:3px solid var(--hope);outline-offset:2px;border-radius:8px}
.paper button:focus-visible,.paper a:focus-visible{outline-color:var(--act)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--hope);outline-offset:1px}
/* สีที่ปรับให้ผ่าน AA */
button.arm,.room2 .foot button.go{background:linear-gradient(180deg,#2a8a5e,#1b6b47)}
.you{background:#1f7a52}
.paper .hpn,.acc.paper .hpn,.room2 .hpn{color:#1f6b45}
.paper .hpn.low,.acc.paper .hpn.low{color:#8a5000!important}
.acc.paper .sv{color:#4f412a}
b small.en{opacity:.78}
.dg small{color:#4f412a}
.muted{color:#a3abbf}.paper .muted,.room2 .muted,.rparty .muted{color:var(--ink3)}
/* กล่องยืนยัน */
.askc{width:min(440px,94vw);text-align:left}
.askc h2{margin:0 0 6px;font-size:1.25rem}
.askc p{margin:0 0 14px;color:var(--ink);line-height:1.6}
.askr{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.askr button{min-width:120px}
.askc.danger{border-top:5px solid var(--bad)}
button.danger{background:linear-gradient(180deg,#b3332d,#8f2024);border-color:#6a1418}
@media (prefers-contrast:more){:root{--mut:#c3c9d6;--ink3:#4f412a}.sv,.pill{border-width:2px}}
.paper code{background:#2b2117;color:#f6d98a}
aside .acc:not(.paper) .hpn,.pane>.ent .hpn,#pt .hpn{color:#7be3a9}
#askm .askc{width:min(440px,94vw)!important;max-width:440px}
/* ===== ตัวละครคู่หู: แถบสลับตัวที่ควบคุม ===== */
.ctlsw{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 8px;padding:6px 8px;border-radius:12px;background:linear-gradient(90deg,rgba(120,70,200,.16),rgba(40,120,200,.10));border:1px solid rgba(140,90,220,.35)}
.ctlsw.hide{display:none}
.ctll{font-weight:700;font-size:.85rem;color:var(--ink2,#55462c);margin-right:2px}
.ctlb{display:flex;gap:7px;align-items:center;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid rgba(0,0,0,.15);background:#fffaf0;color:#2b2213;cursor:pointer;min-height:40px;text-align:left}
.ctlb .av{width:30px;height:30px;font-size:.8rem}
.ctlb span{display:flex;flex-direction:column;line-height:1.15}.ctlb small{font-size:.72rem;color:#66553a}
.ctlb.on{background:#3b1f6e;color:#fff;border-color:#b48cff;box-shadow:0 0 0 2px rgba(180,140,255,.5)}.ctlb.on small{color:#e6dbff}
.ctlb.dd{opacity:.65}
.ctag{display:inline-block;font-size:.72rem;padding:1px 7px;border-radius:999px;background:rgba(120,70,200,.15);color:#4a2a86;border:1px solid rgba(120,70,200,.35);white-space:nowrap}
.chc.ctl{outline:2px solid #8a5cf0;outline-offset:2px;border-radius:10px}
@media (max-width:700px){.ctlb small{display:none}}
/* การ์ดตัวละครคู่หู: ปุ่มลงไปอยู่แถวล่าง ชื่อไม่ถูกบีบในแผงแคบ */
.chc{flex-wrap:wrap;align-items:flex-start}
.chc>div{flex:1 1 140px;min-width:0}
.chc>div b{display:block;overflow-wrap:anywhere;word-break:normal}
.chc .chact{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;margin:4px 0 0}
.chc .chact .sv{margin-right:auto}
/* หลอดเกราะ (ช่องเกราะ Daggerheart) */
.arb{display:flex;align-items:center;gap:3px;flex-wrap:wrap;flex:1;min-width:0}
.arb i{flex:0 1 26px;min-width:12px;height:14px;border-radius:4px;border:2px solid #3c4a5c55;background:repeating-linear-gradient(135deg,#0000 0 4px,#00000014 4px 6px),#0000000d;transition:background .3s,box-shadow .3s,transform .35s var(--spring)}
.arb i.on{background:linear-gradient(180deg,#c9d6e6,#7d93ad 55%,#56697f);border-color:#34465c;box-shadow:inset 0 1px 0 #ffffff99,0 0 6px #7d93ad66}
.arb b{margin-left:6px;font-size:.95rem;color:#34465c;white-space:nowrap}
.arh{margin:-2px 0 6px;font-size:.8rem}
.dmar{margin:6px 0 2px}
aside .acc:not(.paper) .arb b{color:#c9d6e6}
.arb i{flex:1 1 0;max-width:34px;height:16px}
/* ===== หลอดเกราะ (เหมือนหลอดเลือด มีขีดแบ่งช่อง) ===== */
.arw{margin:8px 0 2px}
.arw+.hpw{margin-top:4px}
.hp.ar{position:relative;height:12px}
.hp.ar i{background:linear-gradient(180deg,#d3dff0,#8aa2c2 50%,#5b7394);box-shadow:inset 0 1px 0 #fff9}
.hp.ar::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0000 calc(100% - 2px),#00000055 0) 0 0/calc(100% / var(--n,1)) 100% repeat-x}
.hpn.arn{color:#3d5677}.hpn.arn.brk{color:#9a3b3b}
.arw.sm .hp.ar,.arw.sm+.hpw .hp{height:9px}
.card:not(.paper) .hpn.arn,aside .acc:not(.paper) .hpn.arn,#pt .hpn.arn,.pane>.ent .hpn.arn{color:#b8c9e2}
.paper .hpn.arn{color:#34506f}
.arctl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 6px}
.arctl small{color:var(--ink3,#66553a);font-size:.78rem;line-height:1.3}
aside .acc:not(.paper) .arctl small{color:#b8c9e2}
.hudar{color:#b8c9e2}
.ieff.ak{background:#5b739422;border-color:#5b739466;color:#2c425e}
aside .acc:not(.paper) .ieff.ak{color:#cfdcf0}
.afeat{margin:.3em 0 0;font-size:.85rem}
.armo.on{box-shadow:inset 0 0 0 2px #5b7394;background:#5b739414}
.tok.arhit{animation:arhit .6s ease}
@keyframes arhit{0%,100%{filter:none}40%{filter:drop-shadow(0 0 10px #9fb6d6) brightness(1.3)}}
.dmgt.arm{color:#cfe0ff;text-shadow:0 2px 0 #1b2b44,0 0 10px #000}
/* ฟอร์มไอเทม: สลับ ไอเทมทั่วไป / เกราะ */
.kseg{display:flex;gap:6px;margin:4px 0 8px;flex-wrap:wrap}
.kseg button{flex:1 1 140px;padding:8px 10px;border-radius:10px;border:1px solid #0002;background:#fff8;color:#3b2f1c;font-weight:700;cursor:pointer;min-height:40px}
.kseg button.on{background:#3d5677;color:#fff;border-color:#2c425e}
#li_form:not(.isarm) .li_arm{display:none}
#li_form.isarm .li_eff{display:none!important}
/* ===== Fear ของ DM ===== */
.fearw{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 6px;border-radius:999px;background:linear-gradient(135deg,#2a0d1c,#4a1230);border:1px solid #a3244a;box-shadow:0 0 16px #a3244a55,inset 0 1px 0 #ffffff14}
.fearc{display:flex;align-items:center;gap:6px;color:#ffd6e2}
.fearc .fic{font-size:1.6rem;filter:drop-shadow(0 0 6px #ff3d6e)}
.fearc small{display:block;font-size:.62rem;letter-spacing:.18em;color:#ff9db6;line-height:1}
.fearc b{display:block;font:900 1.5rem/1 var(--dsp);color:#fff;min-width:1.2em}
.fearuse{min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid #ff7a9c;background:linear-gradient(180deg,#d7335f,#8f1a3c);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 2px 0 #4a0d20}
.fearuse:disabled{opacity:.45;cursor:not-allowed}
.fearpm{display:flex;gap:3px}.fearpm .tool.mini{min-width:28px;min-height:28px;padding:0 6px}
.fearw.pulse,.fearb.pulse{animation:fearpulse .9s var(--spring,ease)}
@keyframes fearpulse{0%{transform:scale(1)}30%{transform:scale(1.12);box-shadow:0 0 28px #ff3d6e}100%{transform:scale(1)}}
.fearb{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#3a0f22;border:1px solid #a3244a;color:#ffd6e2;font-size:.9rem;white-space:nowrap}
.fearb b{color:#fff;font-size:1.05rem}
.fearb:empty{display:none}
.fearmn{position:fixed;z-index:9000;width:min(320px,92vw);display:flex;flex-direction:column;gap:6px;padding:12px}
.fearmn>button{text-align:left;justify-content:flex-start}
.fearpop{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 45%,#5a0f2c99,#12030acc 70%);animation:fpin .35s ease}
.fearpop.out{opacity:0;transition:opacity .5s}
.fearpop .fpi{text-align:center;color:#ffd6e2;animation:fpz .6s var(--spring,ease)}
.fearpop .fpe{font-size:clamp(70px,14vw,150px);line-height:1;filter:drop-shadow(0 0 30px #ff3d6e)}
.fearpop small{display:block;letter-spacing:.35em;font-size:clamp(12px,1.6vw,18px);color:#ff9db6;margin-top:6px}
.fearpop b{display:block;font:900 clamp(44px,9vw,110px)/1 var(--dsp);color:#fff;text-shadow:0 0 30px #ff3d6e,4px 4px 0 #4a0d20}
.fearpop p{margin:10px auto 0;max-width:80vw;font-size:clamp(16px,2.2vw,24px);color:#fff}
.fearpop em{display:inline-block;margin-top:10px;padding:4px 14px;border-radius:999px;background:#0008;font-style:normal;font-weight:700}
@keyframes fpin{from{opacity:0}to{opacity:1}}
@keyframes fpz{0%{transform:scale(.4) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@media (max-width:900px){.fearw{grid-column:1/-1;grid-row:2;justify-self:center}.fearb{font-size:.8rem;padding:3px 8px}}
html.fx-reduce .fearpop,html.fx-reduce .fearpop .fpi,html.fx-reduce .fearw.pulse,html.fx-reduce .fearb.pulse{animation:none}
.simrule{margin:4px 0 10px;padding:8px 12px;border-radius:10px;background:#a3244a14;border:1px dashed #a3244a66;font-size:.9rem;color:var(--ink2,#55462c)}

/* =====================================================================
   UI แบบข้อความ (ไม่ใช้อิโมจิ) — ปรับขนาด/ระยะให้ข้อความอ่านง่าย
   ===================================================================== */
/* แท็บ: ข้อความล้วน ตัวใหญ่ขึ้น คอนทราสต์ชัด */
.tabs{gap:2px;padding:5px}
.tabs button{padding:9px 2px;font-size:.8rem;font-weight:700;color:#c9bfa8;letter-spacing:0;line-height:1.15}
.tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabs button.on{color:#2b1d05;background:linear-gradient(180deg,var(--hope2),var(--hope));border-color:var(--hopeD);box-shadow:0 2px 0 #0004}
.tabs button:hover:not(.on){color:#fff}
@media (max-width:520px){.tabs button{font-size:.74rem;padding:9px 1px}}
/* ปุ่มสัญลักษณ์ (✕ − + ⤢) ให้เป็นสี่เหลี่ยมเท่ากัน */
button.glyph{min-width:34px;justify-content:center;font-weight:800}
button.glyph .ic{font-size:1.05em}
/* ป้ายสภาวะ: เป็นแคปซูลข้อความ */
.chip{display:inline-flex;align-items:center;width:auto;height:auto;min-height:20px;padding:1px 8px;border-radius:20px;font-size:.72rem;font-weight:700;line-height:1.4;white-space:nowrap;
 background:#7a1b1f;color:#fff;border:1px solid #0003;margin:0 3px 3px 0}
.chip.c_advantage,.chip.c_blessed,.chip.c_hidden,.chip.c_invisible{background:#1f6b45}
.chip.c_disadvantage,.chip.c_vulnerable,.chip.c_frightened,.chip.c_charmed,.chip.c_prone{background:#7a4a12}
.sv .chip{min-height:16px;padding:0 6px;font-size:.64rem;margin:0 2px 0 0}
/* ปุ่มเลือกสภาวะของ DM: ข้อความ ปิด = จาง เปิด = สีเต็ม */
.cbs{gap:5px}
.cb{padding:5px 10px;font-size:.8rem;font-weight:700;filter:none;opacity:1;background:#ffffff08;border:1px solid #ffffff26;color:#b9b0a0;border-radius:20px;min-height:32px}
.cb:hover:not(:disabled){color:#fff;border-color:#ffffff55}
.cb.on{background:#7a1b1f;border-color:#ff8a8a;color:#fff;box-shadow:0 0 0 2px #7a1b1f55}
.acc.paper .cb{background:#0000000a;border-color:#00000026;color:#5b4c33}
.acc.paper .cb.on{background:#7a1b1f;color:#fff;border-color:#7a1b1f}
/* ป้ายเล็ก “ถืออยู่ / สำเร็จ / เกราะ” */
.onb{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:20px;font:700 .68rem/1.5 'Sarabun',sans-serif;background:#1f6b45;color:#fff;vertical-align:middle;white-space:nowrap}
/* กล่องรูปที่ไม่มีรูป: ใช้คำบอกแทนไอคอน */
.lbp{font-size:.66rem;font-weight:700;color:#7a6a4d;text-align:center;line-height:1.2}
.lbp[style*="background-image"]{font-size:0}
/* หัวการ์ดห้องที่ไม่มีแผนที่ */
.rart{position:absolute;right:12px;top:10px;font-size:.72rem;font-weight:700;opacity:.7;padding:2px 8px;border:1px dashed #ffffff40;border-radius:20px;color:#d8cdb4}
/* หัวข้อพับ/กางของผู้เล่นแต่ละคน (DM): ป้ายสรุปขึ้นบรรทัดใหม่ได้ ชื่อไม่ถูกตัด */
.acc.mem>summary{flex-wrap:wrap;row-gap:4px}
.acc.mem .at{flex:1 1 140px}
.acc.mem .as{flex:0 1 auto;flex-wrap:wrap;max-width:none}
.acc .as .sv{max-width:190px}
/* ตัวเลือกประเภทไอเทม บนพื้นมืด */
.kseg button{background:transparent;color:#d8cdb4;border:1px solid #ffffff2e}
.acc.paper .kseg button{background:#fff8;color:#3b2f1c;border-color:#0002}
.kseg button.on,.acc.paper .kseg button.on{background:#3d5677;color:#fff;border-color:#2c425e}
/* แถบคำแนะนำอุปกรณ์: ไม่มีไอคอนแล้ว */
.devtip .dti:empty{display:none}
/* หัวหน้าจอบนมือถือ: แสดงข้อความปุ่ม (เดิมซ่อนข้อความเหลือแต่ไอคอน) */
@media (max-width:900px){
 .top>.row button span:last-child{display:inline}
 .top>.row button{padding:7px 10px;font-size:.8rem}
 .top h1{font-size:1.05rem}
}
@media (max-width:420px){.top>.row button{padding:6px 8px;font-size:.74rem}.top .badge{display:none}}
/* ข้อความ “ผลทำงาน” ใน HUD */
.myb .on2{padding:0 8px;font-weight:700}
.myb .hudar{color:#22344d;font-weight:700}
/* ป๊อปอัป Fear แบบตัวอักษรล้วน */
.fearpop b{margin-top:4px}
.tabs{display:flex}
.tabs button{flex:1 1 auto;min-width:0;padding-left:4px;padding-right:4px}
.acc.mem>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
.acc.mem>summary .as{grid-column:1/-1;grid-row:2;justify-content:flex-start}
.acc.mem>summary .chev{grid-column:2;grid-row:1}
.top button{white-space:nowrap}
/* ชื่อบนโทเคน: ชี้/แตะแล้วยกขึ้นมาบนสุดและแสดงชื่อเต็ม */
.tok:hover,.tok:focus-within,.tok.act{z-index:6}
.tok:hover>small,.tok.act>small{max-width:none;background:#000e}
/* ล็อบบี้บนมือถือ: ปุ่มเมนูแสดงข้อความ (ไม่มีไอคอนแล้ว) */
@media (max-width:700px){
 .lobby .hdr .nav .tool span:not(.ic){display:inline}
 .lobby .hdr .nav{flex-wrap:wrap;gap:6px}
 .lobby .hdr .nav .tool{padding:6px 10px;font-size:.78rem;white-space:nowrap}
}

/* ชื่อใต้โทเคนย่อ/ขยายตามซูม (ไม่เล็กจนอ่านไม่ออก) */
.tok>small{font-size:clamp(.5rem,calc(.72rem*var(--z,1)),.9rem);padding:0 calc(7px*min(1,var(--z,1)));margin-top:calc(3px*var(--z,1));max-width:calc(140px*max(.6,var(--z,1)))}