/* จอเต็ม — ไม่มีแถบเครื่องมือใดๆ มีแค่ฉากเกมกับข้อความในเกม */
/* ฟอนต์ 3 บทบาท (UI-P1 · ROADMAP §8.7 ข้อ ข-2) — เปลี่ยนที่นี่ที่เดียวทั้งเกม · มี fallback เสมอ (โหลดจาก Google Fonts ใน index.html)
   --font-title ชื่อหน้า/ชื่อบอส/ชื่อท่าไม้ตาย/ป้ายชื่อหลัก · --font-ui ข้อความทั่วไป · --font-num ตัวเลข/อังกฤษ (ตัวไทยตกไปใช้ --font-ui) */
:root{
  --font-title:'Chonburi','Sarabun','Noto Serif Thai','Noto Sans Thai',Georgia,serif;
  --font-ui:'Sarabun','Noto Sans Thai',system-ui,-apple-system,sans-serif;
  --font-num:'Cinzel','Sarabun','Noto Sans Thai',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:var(--font-ui)}
.wrap{position:fixed;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;container-type:size;container-name:stage;overflow:hidden;background:#120c2a;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
/* สเตจ 16:9 ตายตัว (STAGE_FIXED ใน src/00-config.js): #wrap = 1280×720 เสมอ แล้ว JS ใส่ transform ย่อ/ขยายพอดีหน้าต่าง (เหลือขอบดำ) · หน่วย vw/vh ในไฟล์นี้เป็น cqw/cqh (อิงกล่อง #wrap) · @media กว้าง/สูง → @container */
.wrap.free{inset:0;width:100%;height:100%;transform:none!important}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.loc{position:absolute;left:0;top:calc(6% + env(safe-area-inset-top,0px));padding:.5em 2.2em .5em 1.6em;font-size:clamp(13px,2.3cqw,24px);font-weight:600;color:#fff;background:linear-gradient(90deg,rgba(10,14,48,.88),rgba(10,14,48,.88) 70%,transparent);transform:translateX(-105%);opacity:0;pointer-events:none}
.loc small{display:block;font-size:.62em;font-weight:400;opacity:.75}
.loc.show{animation:locIn 4.2s ease both}
@keyframes locIn{0%{transform:translateX(-105%);opacity:0}12%{transform:none;opacity:1}78%{transform:none;opacity:1}100%{transform:translateX(-105%);opacity:0}}
.hint{position:absolute;left:50%;bottom:calc(8% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:.25em .9em;font-size:clamp(12px,1.9cqw,17px);color:#fff;background:rgba(10,14,48,.78);border:1px solid rgba(220,225,255,.5);border-radius:3px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.hint.on{opacity:1}
.help{position:absolute;left:50%;bottom:calc(3% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:.3em 1em;font-size:clamp(11px,1.6cqw,15px);color:#e8e4ff;background:rgba(10,14,48,.6);border-radius:3px;opacity:0;pointer-events:none;white-space:nowrap}
.help.show{animation:helpIn 9s ease both}
@keyframes helpIn{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
.dlg{position:absolute;left:5%;right:5%;bottom:calc(5% + env(safe-area-inset-bottom,0px));padding:1.5em 2em 1.2em;color:#fff;font-size:clamp(13px,2.35cqw,22px);line-height:1.6;background:linear-gradient(180deg,rgba(32,52,120,.94),rgba(12,20,64,.96));border:2px solid #eae6ff;border-radius:6px;box-shadow:0 0 0 2px #0a1030,0 0 0 4px #6f80d0,0 8px 24px rgba(0,0,0,.45);display:none;cursor:pointer}
.dlg.on{display:block}
.dlg .nm{position:absolute;top:-.95em;left:1.2em;padding:.05em .9em;background:#2d44a0;border:2px solid #eae6ff;border-radius:4px;font-weight:600;font-size:.88em}
.dlg .nx{position:absolute;right:1em;bottom:.5em;font-size:.8em;animation:bl .9s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.fade{position:absolute;inset:0;background:#06040f;opacity:0;pointer-events:none;transition:opacity .4s}
.fade.on{opacity:1}
/* ---------- จอโหลด (docs/ui/LOADING_SCREEN_SPEC.md) · สเตจ 1280×720 · ภาพไม่มา = เห็นไล่สีเดิม ---------- */
.boot{position:absolute;inset:0;z-index:9000;overflow:hidden;color:#fff;background:#120c2a;font-family:var(--font-ui);font-size:16px;display:flex}
.boot .bootart,.boot .bootfx{position:absolute;inset:0;pointer-events:none}
.boot .bootart{background:linear-gradient(180deg,#241a4a 0%,#120c2a 60%);image-rendering:pixelated;--lx:1072px;--ly:380px}
.boot[data-region=rural] .bootart{background:url(../assets/ui/load_boot.png) 0 0/1280px 720px no-repeat,linear-gradient(180deg,#241a4a 0%,#120c2a 60%)}
.boot[data-region=hill] .bootart{background:url(../assets/ui/load_trav_hill.png) 0 0/1280px 720px no-repeat,linear-gradient(180deg,#241a4a 0%,#120c2a 60%);--lx:300px;--ly:232px}
.boot[data-region=water] .bootart{background:url(../assets/ui/load_trav_water.png) 0 0/1280px 720px no-repeat,linear-gradient(180deg,#241a4a 0%,#120c2a 60%);--lx:540px;--ly:304px}
.boot .bootart::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,transparent 430px,rgba(8,10,30,.72) 540px,rgba(8,10,30,.92) 720px)}
.boot[data-region=water] .bootart::after{background:linear-gradient(180deg,transparent 0,transparent 380px,rgba(8,10,30,.82) 500px,rgba(8,10,30,.95) 720px)}   /* ภาพริมน้ำส่วนล่างสว่างกว่าอีกสองภาพ (เงาแสงบนน้ำ) → ไล่มืดเข้มขึ้น */
.boot .bootart::before{content:'';display:none;position:absolute;left:calc(var(--lx) - 110px);top:calc(var(--ly) - 110px);width:220px;height:220px;background:radial-gradient(circle,rgba(255,200,110,.35),transparent 70%);animation:bootlamp 2.4s ease-in-out infinite}
.boot[data-region=rural] .bootart::before,.boot[data-region=hill] .bootart::before,.boot[data-region=water] .bootart::before{display:block}
@keyframes bootlamp{0%{opacity:.7}35%{opacity:1}65%{opacity:.8}100%{opacity:1}}
.boot .bootfx::before,.boot .bootfx::after{content:'';position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:#ffe9a8;animation:bootdrift 7s ease-in-out infinite alternate,bootblink 1.6s ease-in-out infinite}
.boot .bootfx::before{box-shadow:140px 180px 4px #ffe9a8,330px 300px 4px #ffe9a8,520px 160px 4px #ffe9a8,700px 380px 4px #ffe9a8,880px 230px 4px #ffe9a8,1060px 330px 4px #ffe9a8,1190px 150px 4px #ffe9a8}
.boot .bootfx::after{animation-duration:9s,1.6s;animation-delay:0s,-.8s;box-shadow:230px 340px 4px #ffe9a8,430px 220px 4px #ffe9a8,610px 410px 4px #ffe9a8,790px 140px 4px #ffe9a8,980px 400px 4px #ffe9a8,1130px 250px 4px #ffe9a8}
@keyframes bootdrift{from{transform:translate(-24px,-16px)}to{transform:translate(24px,16px)}}
@keyframes bootblink{0%,100%{opacity:.3}50%{opacity:1}}
.boot .bootk{position:absolute;width:48px;height:48px;background:url(../assets/ui/ui_kanok.png) 0 0/48px 48px no-repeat;image-rendering:pixelated;opacity:.85;pointer-events:none}
.boot .bootk.tl{left:20px;top:20px}.boot .bootk.tr{right:20px;top:20px;transform:scaleX(-1)}
.boot .bootk.bl{left:20px;bottom:20px;transform:scaleY(-1)}.boot .bootk.br{right:20px;bottom:20px;transform:scale(-1,-1)}
.boot .bootdest{display:none;position:absolute;left:0;right:0;top:104px;height:56px;align-items:center;justify-content:center;gap:20px;font-family:var(--font-title);font-size:44px;line-height:56px;color:#ffdc8a;white-space:nowrap;text-shadow:0 2px 0 #3a2a00,0 0 14px rgba(255,200,90,.35);pointer-events:none}
.boot.trav .bootdest{display:flex;animation:bootdest .2s ease-out .04s both}
.boot .bootdest::before,.boot .bootdest::after{content:'';width:120px;height:2px;background:rgba(255,220,138,.6)}
.boot .bootdest:empty::before,.boot .bootdest:empty::after{display:none}
@keyframes bootdest{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.boot .bootbox{position:absolute;left:240px;top:540px;width:800px;height:102px}
.boot .boottitle{position:relative;top:-74px;height:32px;line-height:32px;font-family:var(--font-title);font-size:22px;font-weight:400;color:#ffdc8a;letter-spacing:.04em;text-shadow:0 2px 0 #3a2a00}
.boot .bootbar{position:absolute;left:0;top:56px;width:800px;height:14px;box-sizing:border-box;border-radius:7px;background:rgba(12,20,64,.85);border:2px solid #eae6ff;box-shadow:0 0 0 2px #0a1030,0 0 0 4px #6f80d0}
.boot #bootFill{display:block;position:relative;height:100%;width:0;background:linear-gradient(90deg,#f0b868,#ffe9a8);border-radius:5px;transition:width .18s ease-out}
.boot.trav #bootFill{transition:width .3s ease-out}
.boot .bootglint{position:absolute;inset:0;border-radius:5px;overflow:hidden;pointer-events:none}
.boot .bootglint::after{content:'';position:absolute;left:0;top:0;width:60px;height:100%;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.35;animation:bootglint 1.4s linear infinite}
@keyframes bootglint{from{transform:translateX(-60px)}to{transform:translateX(800px)}}
.boot .bootwalk{position:absolute;right:-64px;bottom:10px;width:128px;height:128px;background:url(../assets/ui/load_walk_trav.png) 0 0/768px 128px no-repeat;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));pointer-events:none;animation:bootwalk .6s steps(6) infinite}
@keyframes bootwalk{to{background-position:-768px 0}}
.boot[data-walk=trav] .bootwalk{background-image:url(../assets/ui/load_walk_trav.png)}
.boot[data-walk=monk] .bootwalk{background-image:url(../assets/ui/load_walk_monk.png)}
.boot[data-walk=lady] .bootwalk{background-image:url(../assets/ui/load_walk_lady.png)}
.boot[data-walk=farm] .bootwalk{background-image:url(../assets/ui/load_walk_farm.png)}
.boot[data-walk=herb] .bootwalk{background-image:url(../assets/ui/load_walk_herb.png)}
.boot[data-walk=danc] .bootwalk{background-image:url(../assets/ui/load_walk_danc.png)}
.boot[data-walk=boxr] .bootwalk{background-image:url(../assets/ui/load_walk_boxr.png)}
.boot .bootinfo{position:absolute;left:0;top:78px;width:800px;height:24px;display:flex;justify-content:space-between;align-items:center;font-size:17px;line-height:24px}
.boot #bootLbl{max-width:640px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#eae6ff;opacity:.9}
.boot #bootPct{font-family:var(--font-num);color:#ffdc8a}
.boot .boottip{position:absolute;left:240px;top:660px;width:800px;height:40px;box-sizing:border-box;padding:0 12px 0 48px;line-height:36px;font-size:16px;color:#3a2410;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#e9dcba url(../assets/ui/ui_paper.png) 0 0/256px;border:2px solid #3a2410;box-shadow:0 0 0 2px #d6a046;border-radius:3px;animation:bootfade .2s ease-out .1s both}
.boot .boottip::before{content:'';position:absolute;left:8px;top:2px;width:32px;height:32px;background:url(../assets/ui/ic_tu_hint.png) 0 0/32px 32px no-repeat;image-rendering:pixelated}
.boot .boottip:empty{display:none}
.boot.fi .bootart,.boot.fi .bootbox{animation:bootfade .25s ease-out both}
.boot.trav.fi .bootart,.boot.trav.fi .bootbox{animation-duration:.12s}
@keyframes bootfade{from{opacity:0}to{opacity:1}}
.boot.out{opacity:0;transition:opacity .3s ease-out}
.boot.trav.out{transition-duration:.18s}
@media (prefers-reduced-motion:reduce){
  .boot .bootfx,.boot .bootart::before,.boot .bootglint{display:none}
  .boot .bootwalk{animation:none}
  .boot.fi .bootart,.boot.fi .bootbox,.boot .boottip,.boot.trav .bootdest{animation:none}
  .boot #bootFill,.boot.trav #bootFill,.boot.out{transition:none}
}
.err{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#fff;text-align:center;padding:2em;background:#1b1240}

/* ---------- HUD ฉากต่อสู้ ---------- */
.bt{position:absolute;inset:0;pointer-events:none;display:none;color:#fff}
.bt.on{display:block}
/* กรอบลำดับคิว: หัวข้อ + พอร์ตเทรตสี่เหลี่ยม (ฟ้า=ฝ่ายเรา แดง=ศัตรู) + ค่า SPD ใต้ภาพ · ตัวที่กำลังเล่นขยายและเรืองทอง */
.tbar:empty{display:none}
.tbar{position:absolute;left:2.4%;top:calc(5.5% + env(safe-area-inset-top,0px));max-width:52%;padding:.35em .75em .45em;background:linear-gradient(180deg,rgba(32,52,120,.94),rgba(12,20,64,.96));border:2px solid #eae6ff;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.55),inset 0 0 0 1px rgba(120,140,220,.35)}
.tbar .th{display:flex;justify-content:space-between;align-items:baseline;gap:1.2em;margin-bottom:.35em;padding-bottom:.15em;border-bottom:1px solid rgba(220,230,255,.3);font-size:clamp(9px,1.35cqw,13px);color:#ffdc8a;font-weight:600;white-space:nowrap}
.tbar .th small{font-weight:400;color:#9fb4ff;opacity:.9}
.tbar .tl{display:flex;align-items:flex-start;gap:clamp(3px,.6cqw,8px)}
.tc{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.ti{position:relative;width:clamp(20px,2.7cqw,34px);height:clamp(20px,2.7cqw,34px);border:2px solid #7f95e8;border-radius:3px;background:#14204a;overflow:hidden;box-shadow:0 0 0 1px #0a0f2a}
.ti canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.tc.e .ti{border-color:#ff8f8f;background:#3a1620}
.tc.cur .ti{width:clamp(28px,3.8cqw,46px);height:clamp(28px,3.8cqw,46px);border-color:#ffe08a;box-shadow:0 0 0 1px #0a0f2a,0 0 10px 1px rgba(255,220,138,.75)}
.tc.cur::after{content:"▲";font-size:clamp(7px,1cqw,10px);color:#ffdc8a;line-height:1;margin-top:-1px}
.tc.brk .ti{filter:grayscale(.85)}
.tc .sv{font-size:clamp(8px,1.2cqw,12px);color:#cfe0ff;line-height:1;font-variant-numeric:tabular-nums}
.tc.e .sv{color:#ffc8c8}.tc .sv.up{color:#7fffa0}.tc .sv.dn{color:#ff9a9a}
.tbar .sep{align-self:stretch;width:2px;margin:0 clamp(3px,.6cqw,8px);background:rgba(255,255,255,.45);border-radius:1px}
#wrap:has(.bt.on) .clock{top:calc(2.5% + env(safe-area-inset-top,0px));left:auto;transform:none;bottom:auto;right:1.4%;font-size:clamp(10px,1.2cqw,14px);opacity:.8;padding:.15em .7em .15em .5em}      /* ในศึก: นาฬิกา/ทองเล็กมุมขวาบน (ไม่ชนคอลัมน์ทีมมุมขวาล่าง) */
/* HUD ทีมแบบ Octopath: คอลัมน์แคบมุมขวาล่าง · แถวละตัวสูง ~38–46px (1280×720) · พื้นโปร่งไล่เฉด ไม่ใช้ blur */
.party{position:absolute;right:1.4%;bottom:calc(3.5% + env(safe-area-inset-bottom,0px));width:20.5%;display:flex;flex-direction:column;gap:3px;z-index:2}
.pp{position:relative;box-sizing:border-box;padding:.25em .6em .3em 1.75em;font-size:clamp(9px,1cqw,13px);line-height:1.3;background:linear-gradient(90deg,rgba(14,18,48,.52),rgba(14,18,48,.26));border:1px solid rgba(159,180,255,.22);border-radius:3px;transition:transform .2s,border-color .2s,opacity .2s;text-shadow:0 1px 2px #000,0 0 3px #000,1px 0 0 #000,-1px 0 0 #000}
.pp .pic{position:absolute;left:.3em;top:50%;transform:translateY(-50%);width:1.2em;height:1.2em;border:1px solid rgba(159,180,255,.5);border-radius:2px;background:rgba(20,32,74,.6);overflow:hidden}
.pp .pic canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.pp.act{transform:translateX(-6px);border-color:#ffdc8a;background:linear-gradient(90deg,rgba(24,30,76,.7),rgba(24,30,76,.4))}
.pp.act .pic{border-color:#ffdc8a}
.pp.ko,.pp.dead{opacity:.45;filter:grayscale(.45)}
.pp.tgt{border-color:#ffdc8a;background:linear-gradient(90deg,rgba(60,50,20,.62),rgba(60,50,20,.34));box-shadow:0 0 0 1px rgba(255,220,138,.55);transform:translateX(-4px)}
.pp .nm{display:flex;justify-content:space-between;align-items:center;gap:.3em;font-weight:600;white-space:nowrap}
.pp .who{display:flex;align-items:center;min-width:0;overflow:hidden;flex:1 1 auto}
.pp .nmt{flex:0 0 auto;white-space:nowrap}      /* ชื่อไทยแสดงเต็มเสมอ ไม่ตัด … — ถ้าที่ไม่พอให้ชิปหลังชื่อ (Lv/หน้า/หลัง/สถานะ) ถูกตัดก่อน */
.pp .nm em{color:#ffd26a;font-style:normal;font-size:.8em;margin-left:.4em;flex:none}
.pp .bpr{flex:none;font-size:.82em;letter-spacing:0}
.pp .bpr .uic{width:.9em;height:.9em}
.pp .bars{display:flex;align-items:center;gap:.7em}
.pp .nm em.row{color:#14183a;font-size:.68em;padding:0 .35em;line-height:1.4;text-shadow:none}
.pp .bar{font-size:.82em;gap:.35em;flex:1 1 0;min-width:0}
.pp .bar.hp{flex-grow:1.35}
.pp .bar b{width:auto;font-size:.9em;color:#aab6e8}
.pp .bar b .uic{display:none}
.pp .bar .tr{height:5px;background:rgba(0,0,0,.55);border-radius:1px;min-width:12px}
.pp .bar.sp .tr{height:3px}
.pp .bar .v{min-width:0;font-size:1em}
.bpr i,.menu i{font-style:normal;color:#ffd96b;letter-spacing:.05em}
.bpr i.off,.menu i.off{color:#6a7298}
.bpr i.bst,.menu i.bst{color:#ff8a3a;text-shadow:0 0 6px #ff8a3a}
.bar{display:flex;align-items:center;gap:.5em;font-size:.85em}
.bar b{width:1.7em;color:#aab6e8;font-weight:600}
.bar .tr{flex:1;height:.4em;background:rgba(0,0,0,.6);position:relative}
.bar .tr i{position:absolute;inset:0 auto 0 0;display:block;background:#7ee08a;transition:width .3s}
.bar.sp .tr i{background:#6fb0ff}
.bar .v{flex:none;width:auto;min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}   /* ตัวเลข HP/SP ยาว (เช่น 2155/2155) ห้ามล้นขอบการ์ด */
.menu{position:absolute;left:2.4%;bottom:calc(5% + env(safe-area-inset-bottom,0px));min-width:22%;display:none;pointer-events:auto;padding:.55em .85em .65em;font-size:clamp(12px,1.65cqw,18px);background:linear-gradient(180deg,rgba(32,52,120,.9),rgba(12,20,64,.93));border:2px solid #eae6ff;border-radius:6px;box-shadow:0 0 0 2px #0a1030,0 0 0 4px #6f80d0,0 8px 24px rgba(0,0,0,.45)}
.menu .mh{display:flex;justify-content:space-between;gap:1em;margin-bottom:.4em;align-items:center;padding-bottom:.3em;border-bottom:1px solid rgba(220,230,255,.3)}
.menu .boost{font-size:.8em;white-space:nowrap}
.menu .boost button{font:inherit;padding:0 .55em;line-height:1.3;border-radius:4px;background:#2d44a0;color:#fff;border:1px solid #9fb4ff;cursor:pointer}
.menu .it{padding:.2em .5em .2em 1.4em;position:relative;cursor:pointer;display:flex;justify-content:space-between;gap:1em;align-items:center}
.menu .it.sel{background:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
.menu .it.sel::before{content:'▶';position:absolute;left:.2em;color:#ffdc8a}
.menu .it.dis{opacity:.4}
.menu .it.lock{opacity:.3;filter:grayscale(1);cursor:not-allowed}
.menu .it.pick{background:linear-gradient(90deg,rgba(255,216,120,.38),rgba(255,216,120,.08));box-shadow:0 0 .9em rgba(255,216,120,.65),inset 0 0 0 1px #ffd878;animation:pickPulse 1s ease-in-out infinite}
.menu .it.pick .pk{color:#ffd878;font-size:.8em;font-weight:700;margin-left:auto;white-space:nowrap;animation:pickNudge .8s ease-in-out infinite}
@keyframes pickPulse{50%{box-shadow:0 0 1.5em rgba(255,216,120,.95),inset 0 0 0 1px #fff2b8}}
@keyframes pickNudge{50%{transform:translateX(-.35em)}}
.menu .mgd{margin:0 0 .4em;padding:.3em .55em;font-size:.8em;line-height:1.45;color:#ffe9a0;background:rgba(255,216,120,.12);border:1px solid rgba(255,216,120,.5);border-radius:4px}
.menu .mgd.bad{color:#ffb0a0;background:rgba(255,90,70,.16);border-color:rgba(255,120,100,.7)}
.menu .boost.lock{opacity:.35;filter:grayscale(1)}
.autobtn:disabled,.autobtn.lock{opacity:.35;filter:grayscale(1);cursor:not-allowed;animation:none}
.menu .mhelp{font-size:.72em;opacity:.8;margin-top:.5em}
.menu .mhelp.big{font-size:.9em;opacity:1;line-height:1.5}
.chip{display:inline-block;padding:0 .35em;margin-left:.3em;border-radius:3px;font-size:.72em;font-weight:600;color:#14183a;min-width:1.8em;text-align:center;line-height:1.5}
.chip.q{background:#59628e;color:#d6dcff}
#elabels{position:absolute;inset:0;z-index:0}      /* ป้ายศัตรู: อยู่เหนือฉาก แต่ใต้การ์ดทีม/แถบคิว/เมนู (ลำดับ DOM: #elabels มาก่อน .tbar/.party/.menu) · z-index:0 = สแต็กของตัวเอง ป้าย .sel ดันหน้าสุดได้ในกลุ่มนี้ */
#cursor{z-index:1}
.el{position:absolute;transform:translate(-50%,0);width:max-content;max-width:190px;text-align:center;font-size:clamp(8px,1.2cqw,13px);line-height:1.25;pointer-events:auto;cursor:pointer;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;z-index:1}
.el.sel{z-index:3;filter:drop-shadow(0 0 4px rgba(255,224,138,.9))}
.el.sel .en{color:#ffe08a}
.el .en{display:flex;align-items:flex-end;justify-content:center;gap:.5em;font-weight:600;min-width:0}
.el .en .nm{min-width:0;overflow:hidden;white-space:normal;word-break:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.15;text-align:center}   /* ชื่อมอนยาว (เช่น 'หัวหน้านักล่าค่าหัวหน้ากากเหล็ก' 31 ตัว) ขึ้นได้ 2 บรรทัด ไม่ตัดด้วย … */
.el .en small{font-size:.8em;font-weight:400;opacity:.9}
.el .row{display:flex;gap:2px;align-items:center;justify-content:center;margin-top:1px}
.el .sh{display:inline-flex;width:1.5em;height:1.7em;background:#9cb0e8;color:#101830;font-weight:700;align-items:flex-start;justify-content:center;padding-top:.05em;clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);text-shadow:none}
.el.brk .sh{background:#ff6a6a}
.el .wk{display:inline-flex;gap:1px;align-items:center}
.el .wk .chip{font-size:.58em;margin-left:.2em}      /* ชิปจุดอ่อน ~80% ของชิปทั่วไป (.72em) */
.el .hb{height:2px;background:rgba(0,0,0,.65);margin-top:2px;width:100%;min-width:6em}
.el .hb i{display:block;height:100%;background:#ff7a7a;transition:width .3s}
.el .vul{display:none;color:#ff9a9a;font-weight:700;letter-spacing:.1em}
.el.brk .vul{display:block}
#cursor{position:absolute;display:none;transform:translate(-50%,-100%);color:#ffe08a;font-size:clamp(16px,2.6cqw,28px);text-shadow:0 0 6px #000}
#fx{position:absolute;inset:0;overflow:hidden}
.dn{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:clamp(16px,3.2cqw,34px);color:#fff;text-shadow:0 0 4px #000,0 2px 0 #000;animation:dnUp 1.05s ease-out forwards;white-space:nowrap;text-align:center}
.dn small{display:block;font-size:.5em;letter-spacing:.1em;color:#ffe27a}
.dn.weak{color:#fff1a8}.dn.hurt{color:#ff8a7a}.dn.heal{color:#9affb0;font-size:clamp(14px,2.4cqw,26px)}
.dn.brkmsg{color:#ff7a7a;font-size:clamp(18px,3.6cqw,38px)}
@keyframes dnUp{0%{transform:translate(-50%,-20%) scale(.5);opacity:0}15%{transform:translate(-50%,-70%) scale(1.2);opacity:1}100%{transform:translate(-50%,-190%) scale(1);opacity:0}}
.banner{position:absolute;left:0;right:0;top:20%;text-align:center;padding:.3em 0;font-size:clamp(16px,3cqw,32px);font-weight:600;background:linear-gradient(90deg,transparent,rgba(10,16,50,.88) 22%,rgba(10,16,50,.88) 78%,transparent);opacity:0}
.banner.sm{font-size:clamp(14px,2.3cqw,24px);top:17%}
.banner.show{animation:bn 1.6s ease both}
.bt .banner{left:0;right:0;top:27%;z-index:0}      /* แบนเนอร์ในศึก (ชื่อท่า/ไอเทม) อยู่กึ่งกลางจอเต็มความกว้าง ต่ำกว่าแผงลำดับเทิร์น · คอลัมน์ทีมอยู่มุมขวาล่างแล้ว ไม่ต้องหลบ (เจ้าของเกมแจ้งชื่ออยู่ไม่กึ่งกลาง 7 ต.ค.) */
.bt .banner.sm{top:25%}
@keyframes bn{0%{opacity:0;letter-spacing:.3em}15%{opacity:1;letter-spacing:.05em}80%{opacity:1}100%{opacity:0}}
.result{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:auto;background:rgba(6,8,30,.55)}
.rc{min-width:44%;text-align:center;padding:1.2em 1.6em;background:linear-gradient(180deg,rgba(32,52,120,.96),rgba(12,20,64,.98));border:2px solid #eae6ff;border-radius:6px;box-shadow:0 0 0 2px #0a1030,0 0 0 4px #6f80d0;font-size:clamp(13px,2.2cqw,22px)}
.rc h2{margin:0 0 .3em;font-size:1.4em;color:#ffdc8a}.rc.lose h2{color:#ff9a9a}
.rc p{margin:0 0 .8em}.rb{display:flex;gap:10px;justify-content:center}
.rafter{margin:0 auto .8em;max-width:34em;padding:.4em .9em;border-left:3px solid #ffdc8a;background:rgba(8,12,40,.45);text-align:left;font-style:italic;font-size:.92em;line-height:1.55}.rafter b{display:block;font-style:normal;color:#ffdc8a;font-size:.85em;margin-bottom:.15em}      /* R3 บทบอสหลังพ่าย (55-battle.js victory) */
.rb button{font:inherit;padding:.4em 1.2em;border-radius:6px;border:1.5px solid #9fb4ff;background:#2d44a0;color:#fff;cursor:pointer}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:fl .8s ease-out}
@keyframes fl{0%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.loc.show{animation:none;transform:none;opacity:1}.dlg .nx{animation:none}.help.show{animation:none;opacity:1}}

/* ---------- นาฬิกา + สภาพอากาศ ---------- */
.wxfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
#glare{mix-blend-mode:screen;background:radial-gradient(ellipse 70% 60% at 88% -8%,rgba(255,238,190,.85),rgba(255,214,140,.28) 38%,transparent 70%),repeating-conic-gradient(from 195deg at 88% -8%,rgba(255,236,180,.12) 0 4deg,transparent 4deg 11deg);-webkit-mask-image:radial-gradient(circle at 88% -8%,#000,transparent 80%);mask-image:radial-gradient(circle at 88% -8%,#000,transparent 80%)}
#boltFlash{background:#dfe8ff;mix-blend-mode:screen}
#boltSvg{filter:drop-shadow(0 0 4px #bcd0ff) drop-shadow(0 0 12px #8fb0ff);mix-blend-mode:screen}
.clock{position:absolute;right:1.4%;top:calc(6% + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:.5em;padding:.3em .9em .3em .7em;color:#fff;font-size:clamp(12px,2cqw,20px);font-weight:600;background:linear-gradient(90deg,transparent,rgba(10,14,48,.78) 30%);border-bottom:1px solid rgba(180,200,255,.35);text-shadow:0 1px 2px #000;pointer-events:none}
.clock.inb{right:auto;left:50%;transform:translateX(-50%);padding:.3em 1.1em;background:linear-gradient(90deg,transparent,rgba(10,14,48,.78) 25%,rgba(10,14,48,.78) 75%,transparent)}
.clock .ct{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.clock small{font-size:.7em;font-weight:400;opacity:.85}
.clock .cw{margin-left:.2em}
.wxb{position:absolute;left:50%;top:calc(6% + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);padding:.35em 1.3em;font-size:clamp(13px,2.2cqw,22px);font-weight:600;color:#fff;background:rgba(10,14,48,.82);border:1px solid rgba(220,225,255,.5);border-radius:3px;opacity:0;pointer-events:none;white-space:nowrap}
.wxb.show{animation:wxIn 3.6s ease both}
@keyframes wxIn{0%{opacity:0;transform:translate(-50%,-20px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}

/* ---------- เอฟเฟกต์ฉากต่อสู้: เส้นความเร็ว · แฟลช · คริติคอล ---------- */
#bflash{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen}
#speed{position:absolute;inset:-10%;pointer-events:none;opacity:0;--sl:255,230,140;
  background:repeating-conic-gradient(from 3deg at 50% 54%,rgba(var(--sl),0) 0 2.2deg,rgba(var(--sl),.8) 2.2deg 2.9deg,rgba(var(--sl),0) 2.9deg 5.3deg,rgba(var(--sl),.5) 5.3deg 5.7deg,rgba(var(--sl),0) 5.7deg 9.4deg);
  -webkit-mask-image:radial-gradient(circle at 50% 54%,transparent 26%,#000 74%);mask-image:radial-gradient(circle at 50% 54%,transparent 26%,#000 74%);mix-blend-mode:screen}
#speed.go{animation:spd .55s ease-out}
@keyframes spd{0%{opacity:1;transform:scale(1.35) rotate(0)}100%{opacity:0;transform:scale(1) rotate(4deg)}}
.dn.crit{color:#ffe27a;font-size:clamp(26px,5.4cqw,60px);text-shadow:0 0 8px #ff9a1a,0 0 22px #ff6a00,0 3px 0 #5a2200;animation:dnCrit 1.3s ease-out forwards;-webkit-text-stroke:1px #8a3a00}
.dn.crit small{font-size:.42em;color:#fff;letter-spacing:.2em;text-shadow:0 0 6px #ff5a00,0 0 14px #ff8a00;animation:critTxt .12s steps(2) 6}
.dn.hurtcrit{color:#ff6a5a;font-size:clamp(24px,5cqw,54px);text-shadow:0 0 8px #ff1a1a,0 0 20px #c80000,0 3px 0 #3a0000;animation:dnCrit 1.3s ease-out forwards}
.dn.hurtcrit small{color:#ffd0c8}
@keyframes dnCrit{0%{transform:translate(-50%,-20%) scale(.3) rotate(-8deg);opacity:0}12%{transform:translate(-50%,-60%) scale(1.7) rotate(3deg);opacity:1}24%{transform:translate(-50%,-70%) scale(1.25) rotate(-2deg)}100%{transform:translate(-50%,-210%) scale(1.05);opacity:0}}
@keyframes critTxt{0%{transform:translateX(-3px)}100%{transform:translateX(3px)}}

/* ---------- รายละเอียดทักษะ ---------- */
.menu .mdet{margin-top:.4em;padding:.4em .55em;font-size:.82em;line-height:1.5;background:rgba(0,0,0,.28);border:1px solid rgba(180,200,255,.28);border-radius:4px;min-width:17em}
.menu .sd{margin-bottom:.3em;color:#e8ecff}
.menu .sr{display:flex;gap:.7em;align-items:baseline}
.menu .sr b{flex:0 0 5.2em;font-weight:600;color:#9fb4ff}
.menu .sr span{flex:1}
.menu .sr em{font-style:normal;opacity:.7;font-size:.9em}
.menu .sr em.bad{color:#ff8a8a;opacity:1}

/* ---------- หน้าสถานะตัวละคร ---------- */
.statbtn{position:absolute;right:1.4%;bottom:calc(4% + env(safe-area-inset-bottom,0px));font:inherit;font-size:clamp(11px,1.6cqw,15px);padding:.3em .9em;color:#fff;background:rgba(10,14,48,.72);border:1px solid rgba(180,200,255,.5);border-radius:4px;cursor:pointer}
.statbtn small{opacity:.6;margin-left:.3em}
.bt.on ~ .statbtn{display:none}
.stat{position:absolute;inset:0;display:none;z-index:50;padding:3.5% 3% 3%;overflow:auto;background:linear-gradient(180deg,rgba(8,10,30,.93),rgba(8,10,30,.88));color:#fff}
.stat.on{display:block}
.stat h2{margin:0 0 .5em;font-size:clamp(16px,2.6cqw,26px);color:#ffdc8a;display:flex;justify-content:space-between;align-items:center}
.stat h2 button{font:inherit;font-size:.6em;padding:.2em .9em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:.9em}   /* 6 ช่องอุปกรณ์ต้องการคอลัมน์ ≥ ~250px ในการ์ด (เดิม 300 → ช่องถูกบีบที่จอ 1024) */
.scard{display:flex;gap:.8em;padding:.7em .8em;background:linear-gradient(180deg,rgba(32,52,120,.8),rgba(12,20,64,.9));border:2px solid #6f80d0;border-radius:6px;font-size:clamp(11px,1.5cqw,15px)}
.scard.ko{opacity:.55;filter:grayscale(.6)}
.scard canvas{flex:none;width:clamp(70px,12cqw,120px);height:auto;image-rendering:pixelated;align-self:flex-start;background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.12),transparent 70%)}
.scard .sb{flex:1;min-width:0}
.scard .sn{font-size:1.25em;font-weight:700;color:#fff}
.scard .sn small{display:block;font-size:.65em;font-weight:400;color:#9fb4ff;letter-spacing:.05em}
.scard .si{margin:.3em 0 .5em;opacity:.8;line-height:1.5;font-size:.88em}
.scard .bar{margin:.15em 0}
.scard .stt{display:grid;grid-template-columns:auto 1fr;gap:.1em .8em;margin:.5em 0}
.scard .stt b{color:#9fb4ff;font-weight:600}
.scard .badge{display:inline-block;padding:0 .5em;margin-right:.3em;border-radius:3px;font-size:.85em;font-weight:600;background:#3a4a8a}
.scard .badge.buff{background:#8a6a10;color:#ffe27a}.scard .badge.def{background:#2a6a8a;color:#bfeaff}.scard .badge.ko{background:#6a1a1a;color:#ffb0b0}.scard .badge.ok{background:#1f5a34;color:#b8ffcc}
.scard .sk{margin-top:.5em;padding-top:.4em;border-top:1px solid rgba(180,200,255,.25)}
.scard .sk div{margin:.2em 0;line-height:1.45}
.scard .sk small{opacity:.75;display:block;font-size:.85em}
.scard .psv{margin-top:.5em;padding-top:.4em;border-top:1px solid rgba(255,217,160,.28)}
.scard .psv div{margin:.2em 0;line-height:1.45}
.scard .psv small{opacity:.75;display:block;font-size:.85em}
.scard .psv .psvempty,.scard .psv .psvlock{opacity:.5}

.dn.tot{color:#fff;font-size:clamp(22px,4.4cqw,48px);text-shadow:0 0 8px #6ab8ff,0 3px 0 #123;animation:dnCrit 1.3s ease-out forwards}.dn.tot small{color:#ffe27a;font-size:.4em;letter-spacing:.12em}
.dn.spn{color:#8ac8ff}.dn.gold{color:#ffe27a;font-size:clamp(14px,2.4cqw,26px)}
.el .espd{flex:none;font-size:.78em;color:#9fd0ff;display:inline-flex;align-items:center;gap:.15em}.el .espd .uic{height:1em;width:auto}
.clock .cg{margin-left:.5em;padding-left:.6em;border-left:1px solid rgba(180,200,255,.3);color:#ffe27a}

/* ---------- สถานะ (เพิ่มเติม) · ร้านค้า · เลือกอุปกรณ์ · กล่องข้อความ NPC ---------- */
.stat h2 .gold{font-size:.7em;color:#ffe27a;margin-left:auto;margin-right:.8em}
.stat .sec{margin:.9em 0 .3em;font-size:clamp(11px,1.6cqw,16px)}
.stat .sec small{opacity:.65;margin-left:.5em}
.order{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.35em}
.oc{padding:.1em .6em;border-radius:12px;font-size:.92em;background:#2a3a7a;border:1px solid #6f80d0}
.oc.e{background:#6a2430;border-color:#e08a8a}.oc em{font-style:normal;opacity:.75;font-size:.9em}
.etab{display:flex;flex-direction:column;gap:.15em;margin-top:.35em;font-size:.92em}
.etab>div{display:grid;grid-template-columns:1.5fr 1fr .6fr .8fr .7fr 1.6fr;gap:.5em;padding:.2em .6em;background:rgba(40,60,130,.35);border-radius:3px}
.etab .eh{background:none;color:#9fb4ff;font-weight:600}.etab .ko{opacity:.4}
.etab em{font-style:normal;opacity:.7}.etab em.bad,.bad{color:#ff8a8a;opacity:1}.up{color:#9affb0}
.scard .job{font-size:.85em;color:#bfe0ff;margin:.2em 0}
.scard .eqs{margin:.5em 0;padding:.4em .5em;background:rgba(0,0,0,.25);border-radius:4px}
.eqrow{display:grid;grid-template-columns:5.4em 1fr auto;gap:.5em;align-items:center;margin:.15em 0}.eqrow span{min-width:0;overflow-wrap:anywhere}   /* 6 ช่อง: ป้ายยาวสุด "เครื่องราง 1" */
.eqrow b{color:#9fb4ff;white-space:nowrap}.eqrow em{font-style:normal;opacity:.75;font-size:.9em}
.eqrow button,.epr button,.srow button,.selall{font:inherit;font-size:.85em;padding:.1em .8em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}
.eqrow button:hover,.epr button:hover,.srow button:hover{background:#3e5ad0}
.epr button:disabled,.srow button:disabled{opacity:.35;cursor:not-allowed}
.eqnote{font-size:.8em;opacity:.6;margin-top:.2em}
.eqpick{position:absolute;inset:0;display:none;z-index:60;align-items:center;justify-content:center;background:rgba(2,4,20,.7)}
.eqpick.on{display:flex}
.epc{min-width:min(92%,560px);max-height:88%;overflow:auto;padding:1em 1.2em;background:linear-gradient(180deg,rgba(32,52,120,.98),rgba(12,20,64,.99));border:2px solid #eae6ff;border-radius:6px;box-shadow:0 0 0 2px #0a1030,0 0 0 4px #6f80d0;color:#fff;font-size:clamp(11px,1.6cqw,16px)}
.epc h3{margin:0 0 .3em;font-size:1.2em;color:#ffdc8a}.epc h3 small{color:#9fb4ff;font-weight:400}
.epn{opacity:.8;margin-bottom:.5em}
.epr{display:grid;grid-template-columns:1.2fr 1.6fr auto;gap:.6em;align-items:center;padding:.35em .5em;margin:.2em 0;background:rgba(0,0,0,.25);border-radius:4px}
.epr.dis{opacity:.55}.epr em{font-style:normal;opacity:.75}
.epb{margin-top:.6em;text-align:right}.epb button{font:inherit;padding:.2em 1em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}
#shop .smsg{margin:.2em 0 .6em;padding:.3em .8em;background:rgba(60,120,70,.5);border-radius:4px;color:#caffd4}
.shlist{display:flex;flex-direction:column;gap:.25em}
.srow{display:grid;grid-template-columns:1fr auto auto auto auto;gap:.7em;align-items:center;padding:.35em .7em;background:rgba(40,60,130,.4);border-radius:4px;font-size:clamp(11px,1.6cqw,16px)}
.srow .sn1 small{display:block;opacity:.7;font-size:.85em}.srow em{font-style:normal;opacity:.75;font-size:.9em}
.srow .own{opacity:.7}.srow .pr{color:#ffe27a;min-width:4.5em;text-align:right}
.selall{margin-left:.8em}
.gtabs{display:flex;gap:.4em;margin:.2em 0 .6em;flex-wrap:wrap}
.gtab{font:inherit;font-size:.95em;padding:.25em 1em;color:#cfd8ff;background:rgba(40,60,130,.45);border:1px solid #6f80d0;border-radius:4px;cursor:pointer}
.gtab.on{color:#241800;background:#ffdc8a;border-color:#fff0b8;font-weight:700}
#shop .smsg.warn{background:rgba(160,110,20,.6);color:#fff0c0}#shop .smsg button{margin-left:.6em;font:inherit;font-size:.85em;padding:.05em .8em;color:#fff;background:#a03030;border:1px solid #ffb0b0;border-radius:4px;cursor:pointer}#shop .smsg button[data-sconf=no]{background:#2d44a0;border-color:#9fb4ff}
#shop select{font:inherit;font-size:.9em;color:#fff;background:#1c2a6a;border:1px solid #9fb4ff;border-radius:4px;padding:.1em .4em}
.selall:disabled{opacity:.35;cursor:not-allowed}
.ginfo{padding:.5em .8em;background:rgba(40,60,130,.4);border-radius:4px;font-size:clamp(11px,1.6cqw,16px);display:flex;flex-direction:column;gap:.4em}
.grates{display:flex;gap:.5em;flex-wrap:wrap}.grates span{padding:.1em .6em;border:1px solid var(--rc);border-radius:4px;background:rgba(0,0,0,.3)}
.gnote{display:block;opacity:.8;font-size:.85em}.gnote.warn{margin:.4em 0;padding:.3em .8em;background:rgba(160,110,20,.5);border-radius:4px;color:#fff0c0;opacity:1}
.gpity{padding:.3em .7em;background:rgba(160,110,20,.35);border-radius:4px;font-size:.9em}
.gbtns{display:flex;gap:.8em;margin:.7em 0;flex-wrap:wrap;align-items:stretch}
.gpull{font:inherit;padding:.5em 1.4em;color:#fff;background:linear-gradient(180deg,#c0392b,#7a1e14);border:2px solid #ffd9a0;border-radius:6px;cursor:pointer;font-weight:700;display:flex;flex-direction:column;align-items:center}
.gpull.ten{background:linear-gradient(180deg,#d4a017,#7a5a08)}.gpull small{font-weight:400;opacity:.9}
.gpull:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.6)}.gpull:not(:disabled):hover{filter:brightness(1.15)}
.gskip{font:inherit;padding:.3em 1em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:6px;cursor:pointer}
.gstage{position:relative;min-height:9.5em;display:flex;align-items:center;justify-content:center;padding:.6em;margin-bottom:.4em;background:radial-gradient(ellipse at 50% 40%,rgba(255,220,140,.18),rgba(0,0,0,.35));border:1px solid rgba(255,220,140,.35);border-radius:6px;overflow:hidden}
.gtube,.gpaper{font-size:4.5em;line-height:1}.gtube.idle{opacity:.75}
.gtube.shake{animation:gshake .17s infinite}
@keyframes gshake{0%{transform:rotate(-16deg) translateY(0)}50%{transform:rotate(16deg) translateY(-6px)}100%{transform:rotate(-16deg) translateY(0)}}
.gstick{font-size:3em;position:absolute;animation:gstick .45s ease-in forwards}
@keyframes gstick{0%{transform:translateY(-3.2em) rotate(-40deg);opacity:0}30%{opacity:1}100%{transform:translateY(2.6em) rotate(8deg);opacity:1}}
.gpaper{animation:gunfold .45s ease-out}
@keyframes gunfold{0%{transform:scaleX(.1) rotate(-6deg);opacity:0}100%{transform:scaleX(1) rotate(0);opacity:1}}
.gres{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center;width:100%}
.gres.many{display:grid;grid-template-columns:repeat(5,1fr)}
.gcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15em;padding:.5em .5em .4em;min-width:7.5em;text-align:center;background:linear-gradient(180deg,rgba(30,40,110,.9),rgba(10,14,50,.95));border:2px solid var(--rc);border-radius:6px;font-size:clamp(10px,1.4cqw,14px);animation:gcard .35s ease-out backwards}
.gcard .ico{width:48px;height:48px}.gcard small{opacity:.7;font-size:.8em}.gcard .rk{position:absolute;top:3px;left:3px}
.gcard.hi{box-shadow:0 0 10px var(--rc),inset 0 0 8px rgba(255,255,255,.12)}.gcard.s{box-shadow:0 0 18px var(--rc),0 0 36px var(--rc);animation:gcard .35s ease-out backwards,gglow 1.2s ease-in-out infinite alternate}
@keyframes gcard{0%{transform:scale(.3) rotateY(90deg);opacity:0}100%{transform:scale(1) rotateY(0);opacity:1}}
@keyframes gglow{from{filter:brightness(1)}to{filter:brightness(1.35)}}
.ghist{display:flex;flex-wrap:wrap;gap:.3em;font-size:clamp(10px,1.4cqw,14px)}
.gh{padding:.1em .5em;border:1px solid var(--rc);border-radius:4px;background:rgba(0,0,0,.3)}.gh em{font-style:normal;opacity:.6;font-size:.85em}
#bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.shopb{position:absolute;transform:translate(-50%,-100%);padding:.2em .8em;font-size:clamp(11px,1.7cqw,16px);font-weight:700;color:#3a2200;background:#fff6c8;border:2px solid #d89a20;border-radius:12px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:opacity .2s}
.shopb::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#d89a20;border-bottom:0}

/* ---------- จัดทีม ---------- */
#team .smsg.warn{background:rgba(160,110,20,.55);color:#fff0c0}#team .smsg button{margin-left:.8em;font:inherit;font-size:.85em;padding:.05em .8em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.7em}
.tcard{display:flex;gap:.7em;padding:.6em .7em;background:linear-gradient(180deg,rgba(32,52,120,.8),rgba(12,20,64,.9));border:2px solid #6f80d0;border-radius:6px;font-size:clamp(11px,1.5cqw,15px)}
.tcard.empty{opacity:.5;border-style:dashed;align-items:center}
.tcard canvas{flex:none;width:clamp(56px,9cqw,92px);height:auto;image-rendering:pixelated;align-self:flex-start}
.tcard .tb{flex:1;min-width:0}.tcard .sn{font-size:1.15em;font-weight:700}.tcard .sn small{display:block;font-size:.7em;font-weight:400;color:#9fb4ff}
.tst{display:flex;flex-wrap:wrap;gap:.2em .8em;margin:.3em 0;font-size:.9em}.tsk{font-size:.8em;opacity:.7;margin-bottom:.3em}
.tbtn{display:flex;gap:.4em;flex-wrap:wrap;align-items:center}
.tbtn button{font:inherit;font-size:.85em;padding:.1em .8em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}.tbtn button:disabled{opacity:.35;cursor:not-allowed}.tbtn button:not(:disabled):hover{background:#3e5ad0}
.slotno{color:#ffdc8a;font-weight:700}
.badge.ok{display:inline-block;padding:0 .5em;border-radius:3px;font-size:.85em;font-weight:600;background:#1f5a34;color:#b8ffcc}
.inteam{display:inline-block;margin-left:.6em;padding:0 .5em;border-radius:3px;font-size:.6em;font-weight:600;background:#1f5a34;color:#b8ffcc;vertical-align:middle}.inteam.rest{background:#4a4a5a;color:#d0d0e0}

/* ---------- สถานะผิดปกติ/บัฟ ---------- */
.sti{display:inline-flex;align-items:center;margin-left:.15em;padding:0 .25em;border-radius:3px;font-style:normal;font-size:.8em;line-height:1.35;background:rgba(40,70,60,.8);border:1px solid rgba(150,255,210,.5)}
.sti.bad{background:rgba(80,30,100,.8);border-color:rgba(210,150,255,.6)}.sti b{margin-left:.15em;font-size:.8em;opacity:.85}
.stb{margin-left:.3em}.el .est:empty{display:none}.el .est{display:flex;justify-content:center;overflow:hidden;max-width:100%}
.dn.status{font-size:clamp(13px,2.2cqw,22px);color:#cfe}.dn.status.bad{color:#d8a8ff}.dn.status.good{color:#9affd0}.dn.poison{color:#9aff7a;font-size:clamp(14px,2.4cqw,26px)}

.shopb.bossb{background:#ffd8d0;border-color:#c8322e;color:#5a0a0a}.shopb.bossb::after{border-top-color:#c8322e}
.rk{display:inline-block;min-width:1.4em;padding:0 .3em;border-radius:3px;font-size:.78em;font-weight:800;color:#14102a;text-align:center;line-height:1.35}

.mlist{display:flex;flex-direction:column;gap:.4em;margin-top:.4em}.mrow{padding:.3em .6em;background:rgba(40,60,130,.35);border-radius:4px;font-size:.92em}
.mrow .mk{display:flex;flex-wrap:wrap;gap:.3em .5em;margin-top:.2em;font-size:.9em}.mrow .oc em{font-style:normal;opacity:.7;font-size:.88em}

.pp .stbar{display:inline-flex;flex-wrap:nowrap;gap:.1em;margin-left:.3em;font-size:.8em;flex:none}      /* ชิปสถานะต่อท้ายบรรทัดชื่อ ไม่ดันความสูงแถว */

/* ---------- เลเวล / EXP ---------- */
.lv{font-style:normal;font-size:.8em;color:#ffe27a;margin-left:.2em}
.lvtag{display:inline-block;padding:0 .45em;border-radius:3px;font-size:.62em;font-weight:700;background:#8a6a10;color:#fff0b0;vertical-align:middle}
.lvrow{display:flex;align-items:center;gap:.5em;font-size:.82em;color:#ffe27a;margin:.15em 0}.lvrow .tr{flex:1;height:.4em;background:rgba(0,0,0,.6);position:relative;max-width:12em}.lvrow .tr i{position:absolute;inset:0 auto 0 0;display:block;background:#ffd23f}
.lvup{margin:.2em 0;padding:.15em .6em;background:rgba(160,110,20,.45);border-radius:4px;color:#fff0b0;animation:lvPop .6s ease-out}.lvup em{font-style:normal;opacity:.85;font-size:.85em;margin-left:.4em}
@keyframes lvPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ---------- ทักษะ: เลือก/จัด ---------- */
#skillPick{z-index:70}.spc{min-width:min(94%,640px)}
.spgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:.7em;margin:.6em 0}
.spcard{padding:.6em .8em;background:rgba(0,0,0,.3);border:2px solid #6f80d0;border-radius:6px;display:flex;flex-direction:column;gap:.3em}
.spcard .spn{font-weight:700;font-size:1.1em}.spcard .spd{opacity:.85}.spcard .spi{font-size:.9em;color:#bfe0ff}
.spcard button,.skbtn{font:inherit;font-size:.85em;padding:.15em .9em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer;align-self:flex-start}
.skbtn{margin-left:.5em}.skbtn.hot{background:#8a6a10;border-color:#ffe27a;color:#fff0b0;animation:hotp 1.1s ease-in-out infinite}
@keyframes hotp{50%{box-shadow:0 0 8px #ffd23f}}
.epr.off{opacity:.65}.epr button:disabled{opacity:.35;cursor:not-allowed}

.dn.hurt small,.dn small{white-space:nowrap}

/* ---------- เลือกเซฟ ---------- */
.stat.slots{z-index:90;background:radial-gradient(circle at 50% 30%,#1b2a60,#06081e 70%)}
.slgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1em;margin-top:1.5em}
.slcard{padding:.8em 1em;background:linear-gradient(180deg,rgba(32,52,120,.85),rgba(12,20,64,.92));border:2px solid #6f80d0;border-radius:8px;font-size:clamp(12px,1.6cqw,16px)}
.slcard.last{border-color:#ffdc8a;box-shadow:0 0 12px rgba(255,220,138,.4)}
.slh{font-size:1.3em;font-weight:700;color:#ffdc8a;margin-bottom:.4em}.slh small{font-size:.6em;color:#9fb4ff;font-weight:400}
.sli{margin:.25em 0;line-height:1.5}.sli.empty{opacity:.55;padding:1.2em 0;text-align:center}.sli em{font-style:normal;opacity:.6;font-size:.85em}
.slb{display:flex;gap:.5em;flex-wrap:wrap;margin-top:.8em}.slb button{font:inherit;font-size:.9em;padding:.25em .9em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}
.slb button.go{background:#2a7a3a;border-color:#9affb0;font-weight:700}.slb button.del{background:#7a2a2a;border-color:#ffb0b0}
.slnote{margin-top:1.2em;text-align:center;opacity:.65;font-size:.9em}

.mrow.here{border:1px solid #ffdc8a;background:rgba(160,110,20,.25)}

.mapbtn{bottom:calc(4% + 2.4em + env(safe-area-inset-bottom,0px))}
.bt.on ~ .mapbtn{display:none}
.stat#wmap{z-index:55}
.wmwrap{max-width:min(92cqw,760px);margin:0 auto}.wm{width:100%;height:auto;display:block;border:1px solid rgba(180,200,255,.4);border-radius:6px}
.wm .we{stroke:#9fb4ff;stroke-width:.9;opacity:.8}.wm .we.dim{stroke-dasharray:1.6 1.6;opacity:.35}
.wm .wn{cursor:pointer}.wm .nd{fill:#2d44a0;stroke:#9fb4ff;stroke-width:.7}.wm .nd.t{fill:#8a5a1c;stroke:#ffdc8a}
.wm .wn.unk .nd{fill:#222a52;stroke:#667;stroke-dasharray:1.2 1}.wm .wn:hover .nd,.wm .wn.sel .nd{stroke:#fff;stroke-width:1.3}
.wm .ic{font-size:5px;text-anchor:middle;dominant-baseline:middle}.wm .nm{font-size:3.5px;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#000;stroke-width:.7px}
.wm .bk{font-size:4.6px;fill:#ff8a8a}
.wm .ring{fill:none;stroke:#ffdc8a;stroke-width:.9;animation:wmp 1.4s ease-in-out infinite}@keyframes wmp{0%,100%{opacity:.35;transform:scale(.88)}50%{opacity:1;transform:scale(1.1)}}
.wm .wn.cur .nd{stroke:#ffdc8a}
.wml{display:flex;flex-wrap:wrap;gap:.3em 1.2em;font-size:clamp(10px,1.4cqw,13px);opacity:.75;margin:.4em 0}
.wi{background:rgba(40,60,130,.35);border-radius:6px;padding:.5em .8em;max-width:min(92cqw,760px);margin:.6em auto}
.wi .mk{display:flex;flex-wrap:wrap;gap:.3em .8em;align-items:center;margin-top:.3em}
.wi .go{font:inherit;padding:.3em 1em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}.wi .go:disabled{opacity:.4;cursor:not-allowed}

/* =========================================================
   กรอบ UI ตอนต่อสู้/บทสนทนา — ภาพพิกเซลจาก PixelLab (assets/ui/*.png) ตัดแบบ 9-slice (border-image)
   พื้นน้ำเงินกรมท่า ขอบขาว-ทอง ลายกนกที่มุม · ไม่มีไฟล์ = กรอบ CSS เดิมด้านบน
   ========================================================= */
.tbar{border:14px solid transparent;border-image:url(../assets/ui/ui_turnbar.png) 10 fill/14px stretch;image-rendering:pixelated;background:none;box-shadow:none;border-radius:0;padding:0 .3em}
.ti{border:0;border-radius:0;overflow:visible;box-shadow:none;padding:16%;background:url(../assets/ui/ui_turnbar_ally.png) center/100% 100% no-repeat;image-rendering:pixelated}
.ti canvas{border-radius:1px}
.tc.e .ti{background-image:url(../assets/ui/ui_turnbar_enemy.png)}
.tc.cur .ti{background-image:url(../assets/ui/ui_turnbar_cur.png);padding:14%;filter:drop-shadow(0 0 6px rgba(255,220,138,.8))}
.tc.brk .ti{filter:grayscale(.85)}
/* .pp ไม่ใช้กรอบ 9-slice ภาพ (ui_party*.png) แล้ว — HUD โปร่งแบบ Octopath · ดูบล็อก .pp ด้านบน */
.menu{border:16px solid transparent;border-top-width:40px;border-image:url(../assets/ui/ui_menu.png) 35 15 15 15 fill/40px 16px 16px 16px stretch;image-rendering:pixelated;background:none;box-shadow:none;border-radius:0;padding:0 .2em .1em}
.menu .mh{margin:-34px -4px .45em;height:30px;padding:0 .2em;border-bottom:0}
.dlg{border:12px solid transparent;border-image:url(../assets/ui/ui_dialog.png) 9 fill/12px stretch;image-rendering:pixelated;background:none;box-shadow:none;border-radius:0}
.rb button,.menu .boost button{border:8px solid transparent;border-image:url(../assets/ui/ui_button.png) 6 fill/8px stretch;image-rendering:pixelated;background:none;border-radius:0;padding:0 .7em;line-height:1.2}
.rb button:hover,.menu .boost button:hover{border-image-source:url(../assets/ui/ui_button_sel.png)}

/* ปุ่มสู้ออโต้ */
.autowrap{position:absolute;right:1.4%;top:calc(8.5% + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:flex-end;gap:.3em;pointer-events:none}      /* ปุ่มไอเทม/ออโต้: มุมขวาบนใต้นาฬิกา · คอลัมน์ทีมอยู่มุมขวาล่าง */
.autobtn.itm{font-size:clamp(7px,.74cqw,9.5px);padding:.25em .8em}      /* ลดลง ~27% (เดิม 13px → 9.5px ที่สเตจ 1280) */
.autobtn{pointer-events:auto;font:inherit;font-size:clamp(8px,.86cqw,11px);font-weight:600;padding:.35em 1em;color:#fff;cursor:pointer;border:7px solid transparent;border-image:url(../assets/ui/ui_button.png) 6 fill/7px stretch;image-rendering:pixelated;background:none}
.autobtn small{opacity:.65;margin-left:.3em}
.autobtn.on{border-image-source:url(../assets/ui/ui_button_sel.png);color:#ffe9a0;text-shadow:0 0 8px rgba(255,220,138,.7);animation:autop 1.4s ease-in-out infinite}
@keyframes autop{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* แนวหน้า/แนวหลังในหน้าจัดทีมและการ์ดปาร์ตี้ตอนต่อสู้ */
.rowlbl{margin:.7em 0 .3em;padding:.2em .7em;font-weight:600;font-size:clamp(11px,1.7cqw,16px);border-left:4px solid #ffb04a;background:linear-gradient(90deg,rgba(255,176,74,.18),transparent)}
.rowlbl.b{border-left-color:#6fb0ff;background:linear-gradient(90deg,rgba(111,176,255,.18),transparent)}
.rowlbl small{font-weight:400;opacity:.75;margin-left:.6em}
.pp .row{font-style:normal;font-size:.72em;padding:0 .4em;margin-left:.3em;border-radius:3px;color:#14183a;background:#ffb04a}.pp .row.b{background:#8cc4ff}

/* ไอคอนไอเทม (PixelLab 48×48 → แสดงคมชัดแบบพิกเซล) */
.ico{width:24px;height:24px;image-rendering:pixelated;vertical-align:-7px;margin-right:3px}   /* 48px ÷ 2 = ย่อพอดีเท่าตัว ไม่แตก */
.srow .ico,.result .ico,.rc .ico{width:32px;height:32px;image-rendering:auto}
.wm .we.plan{stroke:#d8c89a;stroke-dasharray:1 1.8;opacity:.4}
.wm .wn.lock .nd{fill:#2a2a36;stroke:#9a9aae;stroke-dasharray:1.4 1;opacity:.9}.wm .wn.lock .nm{fill:#d0d0dc}.wm .wn.lock .nm.sm{font-size:2.8px;fill:#e8d8a0}
.wm .wmbg{image-rendering:pixelated}
.wm .wic{image-rendering:pixelated;pointer-events:none}
/* ---- UI-P6: แผนที่โลกแบบใหม่ (src/63-travel.js) — แผนที่ซ้าย ≈66% + การ์ดรายละเอียดขวา ≈34% · PC/NB เท่านั้น (ไม่มีกฎมือถือ) · ทรานซิชันเปิด/ปิดใช้ .mf ของ UI-P5 ---- */
.stat#wmap.mf{padding:0;overflow:hidden;background:none;z-index:55}
#wmap .wmx-in{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;width:100%;max-width:1500px;box-sizing:border-box;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:.55em;padding:2.2% 3% 1.8%;font-family:var(--font-ui);font-size:clamp(12px,1.25cqw,16px);color:#fff}
#wmap .wmx-num{font-family:var(--font-num)}
#wmap .wmx-head{display:flex;align-items:center;gap:1em;min-width:0}
#wmap .wmx-title{margin:0;font-family:var(--font-title);font-weight:400;line-height:1.3;font-size:clamp(22px,3cqw,34px);color:#ffdc8a;text-shadow:0 2px 0 #3a2a00,0 0 14px rgba(255,200,90,.35);white-space:nowrap}
#wmap .wmx-title small{font-family:var(--font-ui);font-size:.42em;color:#cfd8ff;text-shadow:none;margin-left:.8em;letter-spacing:0}
#wmap .wmx-top{margin-left:auto;display:flex;gap:1.2em;align-items:center;color:#ffe9a8;font-size:1.15em;padding:.2em .3em .2em 1.4em;border-bottom:2px solid rgba(255,220,138,.5);background:linear-gradient(90deg,transparent,rgba(10,14,48,.72) 35%);white-space:nowrap}
#wmap .wmx-x{font:inherit;font-size:.95em;padding:.2em .9em;color:#fff;background:rgba(36,54,122,.85);border:1px solid #9fb4ff;border-radius:4px;cursor:pointer;white-space:nowrap}
#wmap .wmx-x:hover{background:#3e5ad0}#wmap .wmx-x small{opacity:.6;margin-left:.3em}
#wmap .wmx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4em .5em}
#wmap .wmx-f{font:inherit;padding:.25em .85em;color:#dfe6ff;background:rgba(20,32,84,.85);border:1px solid #6f80d0;border-radius:999px;cursor:pointer;white-space:nowrap}
#wmap .wmx-f em{font-style:normal;margin-left:.3em;color:#ffdc8a}
#wmap .wmx-f:hover{border-color:#ffdc8a}
#wmap .wmx-f.on{color:#1a1200;background:linear-gradient(180deg,#ffe9a8,#e7b84a);border-color:#fff3c4;font-weight:600}#wmap .wmx-f.on em{color:#5a3200}
#wmap .wmx-plan{margin-left:auto;display:flex;align-items:center;gap:.4em;cursor:pointer;color:#cfd8ff;white-space:nowrap}
#wmap .wmx-plan input{width:1.1em;height:1.1em;accent-color:#ffdc8a;cursor:pointer}
#wmap .wmx-main{display:grid;grid-template-columns:minmax(0,66fr) minmax(0,34fr);gap:.9em;min-height:0}
#wmap .wmx-map{position:relative;min-height:0;min-width:0;display:flex;flex-direction:column;border:3px solid #e8e4ff;border-radius:4px;background:#0a1030;box-shadow:0 0 0 2px #0a1030,0 0 0 4px #6f80d0,0 10px 30px rgba(0,0,0,.55);overflow:hidden}
#wmap .wmx-mapsvg{flex:1;min-height:0;display:flex}
#wmap .wmx-svg{width:100%;height:100%;border:0;border-radius:0}
#wmap .wmx-leg{flex:none;display:flex;flex-wrap:wrap;gap:.2em 1.1em;padding:.25em .8em;font-size:.82em;color:#cfd8ff;background:rgba(6,10,40,.85);border-top:1px solid rgba(159,180,255,.35)}
#wmap .wmx-leg .uic{width:1.15em;height:1.15em}
#wmap .wmx-lg-path{color:#ffdc8a}
#wmap .wmx-svg .nm{font-family:var(--font-ui);font-size:4.9px;font-weight:600;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#050820;stroke-width:1.1px;stroke-linejoin:round;pointer-events:none}
#wmap .wmx-svg .nm.sel{fill:#ffe9a8}
#wmap .wmx-svg .nm.plan{font-size:4px;fill:#d0d0dc;font-weight:400}
#wmap .wmx-svg .nm.dm{opacity:.25}
#wmap .wmx-svg .we.path{stroke:#ffd24a;stroke-width:1.8;opacity:1;stroke-dasharray:none;stroke-linecap:round;filter:drop-shadow(0 0 1px rgba(255,200,60,.8))}
#wmap .wmx-svg .wmx-ar{fill:#fff3c4;stroke:#7a4a00;stroke-width:.4;pointer-events:none}
#wmap .wmx-svg .hit{fill:transparent;stroke:none}
#wmap .wmx-svg .wn{transition:opacity .12s}
#wmap .wmx-svg .wn.dm{opacity:.25}
#wmap .wmx-svg .wn.plan{opacity:.35}#wmap .wmx-svg .wn.plan.sel{opacity:.85}#wmap .wmx-svg .wn.plan.dm{opacity:.2}
#wmap .wmx-svg .wmx-sel{fill:rgba(255,236,160,.16);stroke:#fff3c4;stroke-width:1.1;filter:drop-shadow(0 0 1.6px rgba(255,230,140,.95))}
#wmap .wmx-svg .wn:hover .nd{stroke:#fff;stroke-width:1.3}
#wmap .wmx-svg .wn.cur .nd{stroke:#ffdc8a}
#wmap .wmx-svg .wmx-lk{font-size:5.4px}
#wmap .wmx-svg .wmx-qs{filter:drop-shadow(0 0 .8px #000)}
#wmap .wmx-svg .wmx-bs{filter:drop-shadow(0 0 .8px #000)}
#wmap .wmx-card{min-height:0;min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:.55em;padding:.8em 1em 1em;line-height:1.5;color:#fff;border:3px solid #e8e4ff;border-radius:4px;background:linear-gradient(180deg,rgba(32,52,120,.94),rgba(12,20,64,.97));box-shadow:0 0 0 2px #0a1030,0 0 0 4px #6f80d0,0 10px 30px rgba(0,0,0,.55)}
#wmap .wmx-empty{opacity:.7;font-style:italic}
#wmap .wmx-ch{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;font-family:var(--font-title);font-size:1.5em;color:#ffdc8a;line-height:1.3}
#wmap .wmx-ch b{font-weight:400}
#wmap .wmx-ch .uic{image-rendering:pixelated}
#wmap .wmx-tag{font-family:var(--font-ui);font-size:.5em;padding:.05em .7em;border-radius:999px;border:1px solid currentColor;vertical-align:middle;white-space:nowrap}
#wmap .wmx-tag.here{color:#ffdc8a;background:rgba(255,220,138,.15)}
#wmap .wmx-tag.alive{color:#ffb0a0}#wmap .wmx-tag.done{color:#a8f0b0}#wmap .wmx-tag.lockt{color:#d0d0dc}
#wmap .wmx-safe{padding:.25em .7em;border-left:4px solid #6fd08a;background:rgba(80,200,120,.14);font-weight:600}
#wmap .wmx-safe.fight{border-left-color:#ff9a6a;background:rgba(255,120,70,.14)}
#wmap .wmx-svc{display:flex;flex-wrap:wrap;gap:.35em}
#wmap .wmx-chip{padding:.1em .7em;border:1px solid #9fb4ff;border-radius:999px;background:rgba(36,54,122,.7);white-space:nowrap}
#wmap .wmx-row{font-size:1em}#wmap .wmx-row.dim{color:#cfd8ff}
#wmap .wmx-row .uic{width:1.2em;height:1.2em}
#wmap .wmx-qs{display:flex;flex-direction:column;gap:.3em;padding:.3em .6em;border:1px dashed rgba(255,220,138,.55);border-radius:4px;background:rgba(255,220,138,.07)}
#wmap .wmx-qi{display:flex;gap:.4em;align-items:flex-start}
#wmap .wmx-qi .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.95em}
#wmap .wmx-gobox{margin-top:auto;display:flex;flex-direction:column;gap:.5em;padding-top:.6em;border-top:2px solid rgba(255,220,138,.4)}
#wmap .wmx-trip{display:flex;flex-wrap:wrap;gap:.4em 1.1em;align-items:baseline}
#wmap .wmx-st{font-size:1em;color:#cfd8ff;white-space:nowrap}
#wmap .wmx-st b{font-size:1.45em;color:#ffe9a8;font-weight:600}
#wmap .wmx-go{font:inherit;font-size:1.3em;font-weight:600;padding:.55em .8em;color:#1a1200;background:linear-gradient(180deg,#ffe9a8,#e7b84a);border:2px solid #fff3c4;border-radius:6px;cursor:pointer;box-shadow:0 3px 0 #7a4a00,0 6px 14px rgba(0,0,0,.45)}
#wmap .wmx-go:hover:not(:disabled){filter:brightness(1.08)}
#wmap .wmx-go:disabled{color:#9a9ab0;background:#2a2a40;border-color:#55557a;box-shadow:none;cursor:not-allowed}
#wmap .wmx-go kbd{font-family:var(--font-num);font-size:.6em;margin-left:.5em;padding:0 .5em;border:1.5px solid currentColor;border-radius:4px;opacity:.7}
#wmap .wmx-why{padding:.25em .7em;border-left:4px solid #8a8aa8;color:#d0d0dc}
#wmap .wmx-why.warn{border-left-color:#ff8a7a;color:#ffb8a8;background:rgba(255,90,70,.16);font-weight:600}
#wmap .wmx-hint{padding:.5em 1.1em;font-size:clamp(12px,1.4cqw,16px);color:#e8ecff;background:linear-gradient(90deg,rgba(10,14,48,.9),rgba(10,14,48,.9) 80%,transparent);border-left:4px solid #ffdc8a;line-height:1.5}
@media (prefers-reduced-motion:reduce){#wmap .ring{animation:none}#wmap .wmx-svg .wn{transition:none}}

/* ---------- มินิแมป / แผนผังเต็ม / ข้อความรับของ (src/52-dungeon.js) ---------- */
.mini{position:absolute;left:1.2%;top:calc(6% + 4.6em + env(safe-area-inset-top,0px));width:clamp(96px,17cqmin,150px);height:clamp(96px,17cqmin,150px);image-rendering:pixelated;border:2px solid rgba(190,205,255,.55);border-radius:6px;background:#05060f;box-shadow:0 2px 10px rgba(0,0,0,.5);cursor:pointer;opacity:.9;z-index:4}
.mapbtn2{bottom:calc(4% + 4.8em + env(safe-area-inset-bottom,0px))}
.bt.on ~ .mapbtn2{display:none}
.stat#areamap{z-index:55}
.amwrap{display:flex;justify-content:center;margin:.4em 0}.amwrap canvas{max-width:92cqw;image-rendering:pixelated;border:2px solid rgba(190,205,255,.5);border-radius:6px;background:#05060f}
.pickup{position:absolute;left:50%;top:22%;transform:translateX(-50%) translateY(-8px);min-width:min(80cqw,300px);padding:.6em 1.2em;font-size:clamp(13px,2cqw,19px);color:#fff;background:linear-gradient(180deg,rgba(26,30,82,.95),rgba(12,14,46,.95));border:2px solid #ffd878;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;text-align:center}
.pickup.on{opacity:1;transform:translateX(-50%) translateY(0)}.pickup b{color:#ffd878}.pickup div{margin-top:.2em}

/* ---------- สมุดเควสต์ / เรื่องราวตัวละคร (src/64-quests.js) ---------- */
.mapbtn3{bottom:calc(4% + 7.2em + env(safe-area-inset-bottom,0px))}
.bt.on ~ .mapbtn3{display:none}
.stat#journal{z-index:55}
.jtabs,.jchars{display:flex;flex-wrap:wrap;gap:.4em;margin:.5em 0}
.jtabs button,.jchars button{font:inherit;font-size:.95em;padding:.3em .9em;color:#fff;background:rgba(20,26,80,.8);border:1px solid rgba(180,200,255,.4);border-radius:6px;cursor:pointer}
.jtabs button.on,.jchars button.on{background:#3a4ab0;border-color:#ffd878;color:#ffe9a8}.jchars button.dis{opacity:.45}
.jstep{opacity:.7;margin-left:.5em}
.jpage b{color:#ffd878}.jpage.lock b{color:#8a90c0}.jtxt{margin-top:.3em;line-height:1.7;opacity:.95;font-size:.95em}.jpage.lock .jtxt{opacity:.5;font-style:italic}
.shopb.questb{background:#e8d8ff;border-color:#8a52d8;color:#2a0a5a}.shopb.questb::after{border-top-color:#8a52d8}

/* ---------- คัตซีน (src/65-cutscene.js) ---------- */
.cutbar,.cutnarr,.cutcard,.cuttitle,.cutskip{display:none}
.cutscene .cutbar,.cutscene .cutskip{display:block}
.cutscene .cutnarr,.cutscene .cutcard,.cutscene .cuttitle{display:flex}
.cutscene #loc,.cutscene .mini,.cutscene .statbtn,.cutscene .clock,.cutscene #hint,.cutscene #bubbles,.cutscene #help,.cutscene .pickup,.cutscene .wxb{display:none!important}
.cutbar{position:absolute;left:0;right:0;height:11%;background:#000;z-index:70;pointer-events:none}.cutbar.top{top:0}.cutbar.bot{bottom:0}
.cutskip{position:absolute;right:2%;top:12.5%;z-index:80;font:inherit;font-size:clamp(11px,1.6cqw,15px);padding:.3em .9em;color:#fff;background:rgba(10,14,48,.7);border:1px solid rgba(180,200,255,.5);border-radius:6px;cursor:pointer}.cutskip small{opacity:.6;margin-left:.3em}
.cutnarr{position:absolute;left:8%;right:8%;top:44%;z-index:72;justify-content:center;text-align:center;font-size:clamp(15px,2.9cqw,28px);line-height:1.7;color:#f3eaff;text-shadow:0 2px 8px #000,0 0 18px rgba(140,90,255,.5);opacity:0;transition:opacity .5s;pointer-events:none}
.cutnarr.on{opacity:1}
.cutcard{position:absolute;left:6%;bottom:22%;z-index:72;flex-direction:column;padding:.5em 1.6em .6em;background:linear-gradient(90deg,rgba(8,10,40,.88),rgba(8,10,40,0));border-left:4px solid #ffd878;opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .4s;pointer-events:none;color:#fff}
.cutcard.on{opacity:1;transform:none}.cutcard b{font-size:clamp(20px,4cqw,38px);letter-spacing:.04em}.cutcard span{font-size:clamp(12px,2.1cqw,19px);color:#ffd878;font-style:italic}
.cuttitle{position:absolute;inset:0;z-index:90;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;opacity:0;transition:opacity .8s;pointer-events:none;text-shadow:0 2px 14px #000}
.cuttitle.on{opacity:1}.cuttitle small{font-size:clamp(12px,2cqw,18px);letter-spacing:.3em;color:#ffd878;margin-bottom:.4em}.cuttitle b{font-size:clamp(26px,6cqw,60px);letter-spacing:.06em}
.cutscene .dlg{z-index:75}
.jrep{font:inherit;padding:.35em 1em;color:#fff;background:#4a2a7a;border:1px solid #c8a0ff;border-radius:6px;cursor:pointer}

/* ---------- บทเรียนการต่อสู้ (src/66-tutorial.js) ---------- */
.tut{position:absolute;left:50%;top:15%;transform:translateX(-50%);width:min(88cqw,560px);padding:.9em 1.2em 1em;font-size:clamp(13px,2.1cqw,19px);line-height:1.65;color:#fff;background:linear-gradient(180deg,rgba(30,22,86,.97),rgba(14,10,52,.97));border:2px solid #ffd878;border-radius:10px;box-shadow:0 6px 30px rgba(0,0,0,.6);z-index:96;display:none}
.tut.on{display:block}.tut>b{display:block;font-size:1.15em;color:#ffd878;margin-bottom:.3em}.tut em{opacity:.8}
.tut button{display:block;margin:.7em 0 0 auto;font:inherit;font-size:.9em;padding:.3em 1.1em;color:#fff;background:#3a4ab0;border:1px solid #ffd878;border-radius:6px;cursor:pointer}.tut button small{opacity:.65;margin-left:.3em}
/* ป้ายชื่อเหนือประตูเปลี่ยนฉาก (src/58-portals.js) */
.pgate{position:absolute;transform:translate(-50%,-100%);padding:.15em .75em .2em;text-align:center;font-size:clamp(11px,1.6cqw,15px);font-weight:700;line-height:1.35;color:#ffe9b0;background:rgba(12,10,34,.84);border:1.5px solid rgba(255,196,104,.75);border-radius:10px;white-space:nowrap;text-shadow:0 1px 2px #000;box-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .3s;pointer-events:none}
.pgate .pg-ar{color:#ffb347;margin-right:.35em}
.pgate .pg-t{display:inline-block;vertical-align:top;text-align:left}
.pgate small{display:block;font-size:.78em;font-weight:600;color:#cfc8ee}
.pgate .pg-sub{display:block}
.pgate .pg-lv{color:#cfc8ee}
.pgate.pg-warn{border-color:rgba(255,200,70,.95)}.pgate.pg-warn .pg-lv{color:#ffd060}
.pgate.pg-dead{border-color:rgba(255,90,80,.95);background:rgba(40,8,14,.88)}.pgate.pg-dead .pg-lv{color:#ff9a90}
.pgate.pg-lock{border-color:rgba(160,160,190,.8);color:#c8c4dc;background:rgba(18,16,30,.9)}.pgate .pg-lk{color:#ffb8b0}
@media (prefers-reduced-motion:reduce){.pgate{transition:none}}

/* ---------- ท่าไม้ตาย "วิชาครู" (59-ult.js): คัตอิน #ultcut + แถวเมนู + บรรทัดหน้าสถานะ ---------- */
#ultcut{position:absolute;inset:0;display:none;pointer-events:none;z-index:6;overflow:hidden}
#ultcut.on{display:block}
#ultcut .ub{position:absolute;left:0;right:0;height:13%;background:#000;transition:transform .22s ease-out}
#ultcut .ub.t{top:0;transform:translateY(-101%)}#ultcut .ub.b{bottom:0;transform:translateY(101%)}
#ultcut.in .ub{transform:none}
#ultcut .uvig{position:absolute;inset:0;opacity:0;transition:opacity .22s;background:radial-gradient(ellipse at 50% 50%,rgba(8,6,28,0) 25%,rgba(8,6,28,.72) 100%)}
#ultcut.in .uvig{opacity:1}
#ultcut .uimg{position:absolute;left:0;bottom:13%;height:60%;height:calc(192px*var(--uscale,2));image-rendering:pixelated;opacity:0;transform:translateX(-45cqw);filter:drop-shadow(0 0 .6em var(--uc,#ffd878))}
#ultcut.run .uimg{animation:ultSlide 2s linear forwards}   /* วิ่งเข้า 0.44s → หยุดนิ่งให้เห็น ~1s → วิ่งออก 0.56s (เจ้าของเกมสั่ง: ไปไวเกิน) */
@keyframes ultSlide{0%{opacity:0;transform:translateX(-45cqw);animation-timing-function:cubic-bezier(.15,.7,.3,1)}12%{opacity:1}22%{opacity:1;transform:translateX(5cqw)}72%{opacity:1;transform:translateX(8cqw);animation-timing-function:cubic-bezier(.6,0,.9,.5)}100%{opacity:1;transform:translateX(105cqw)}}
#ultcut .uname{position:absolute;right:27%;top:50%;transform:translate(8cqw,-50%);opacity:0;text-align:right;color:#fff;text-shadow:0 0 .5em var(--uc,#ffd878),0 .1em 0 #3a2a00;transition:opacity .2s,transform .25s ease-out}
#ultcut.name .uname{opacity:1;transform:translate(0,-50%)}
#ultcut .uname small{display:block;letter-spacing:.3em;font-size:clamp(11px,1.8cqw,18px);color:var(--uc,#ffd878)}
#ultcut .uname b{display:block;font-size:clamp(26px,6.2cqw,64px);letter-spacing:.04em}
#ultcut .usay{margin-top:.3em;font-style:italic;font-size:clamp(12px,2cqw,20px);opacity:.9}
.menu .it.ult{border-top:1px solid rgba(255,216,120,.35);margin-top:.3em;padding-top:.35em}
.menu .it.ult.ready{background:linear-gradient(90deg,rgba(255,216,120,.22),rgba(255,216,120,.04));animation:pickPulse 1.2s ease-in-out infinite}
.menu .it.ult em{font-style:normal;opacity:.7;font-size:.8em}
.ultline{margin:.15em 0 .3em;font-size:.82em}.ultline .ttl{color:#9aa4d8}.ultline .ttl.on{color:#ffd878;font-weight:600}.ultline .ultl{margin-left:.8em;color:#8a90c0}.ultline .ultl.on{color:#ffe9a8}
@media (prefers-reduced-motion:reduce){#ultcut.run .uimg{animation-duration:.01s}}

/* =========================================================
   UI-P1 (ROADMAP §8.7) — ฟอนต์ 3 บทบาท + เฟรมเมนูกลาง + เมนูหลัก + กล่องยืนยันมาตรฐาน (src/68-menu.js)
   สินทรัพย์ศิลป์วาดเอง (tools/ui-art-gen.py): assets/ui/ui_hand.png (เคอร์เซอร์มือ) · ui_kanok.png (มุมลายกนก) · ui_paper.png (กระดาษสา)
   ========================================================= */
/* ---- ฟอนต์ title: ชื่อหน้า/ชื่อบท/ชื่อท่าไม้ตาย/ป้ายชื่อหลัก ---- */
.stat h2,.epc h3,.tmc h3,.rc h2,.slh,.cutcard b,.cuttitle b,#ultcut .uname b,.banner,.loc,.dlg .nm,.tut>b,.mf-title,.mf-bt,.mfc-t{font-family:var(--font-title);font-weight:400;line-height:1.35}
.stat h2 small,.epc h3 small,.slh small{font-family:var(--font-ui)}
/* ---- ฟอนต์ num: ตัวเลข HP/SP/ราคา/ดาเมจลอย/เลเวล/เวลา (ตัวไทยในกล่องเดียวกันจะตกไปใช้ --font-ui อัตโนมัติ) ---- */
.bar .v,.lv,.lvtag,.dn,.srow .pr,.srow .own,.clock .ct,.clock .cg,.tc .sv,.rk,.stat h2 .gold,.el .espd,.lvrow>span:first-child,.mf-top,.mf-it .k,.mf-pc .lv,.mf-kr kbd,.mf-loc span+span{font-family:var(--font-num)}
.stat h2 .gold{font-weight:600}

/* ---- ปุ่มเมนูมุมจอ ---- */
.menubtn{bottom:calc(4% + 9.6em + env(safe-area-inset-bottom,0px));border-color:rgba(255,220,138,.75);color:#ffe9a8}
.bt.on ~ .menubtn{display:none}

/* ---- ตัวตกแต่งมุมกนก (ใช้ซ้ำ: เมนูหลัก/กล่องยืนยัน) ---- */
.kc{position:absolute;width:var(--kc,48px);height:var(--kc,48px);background:url(../assets/ui/ui_kanok.png) no-repeat 0 0/100% 100%;image-rendering:pixelated;pointer-events:none;z-index:3}
.kc.tl{left:0;top:0}.kc.tr{right:0;top:0;transform:scaleX(-1)}.kc.bl{left:0;bottom:0;transform:scaleY(-1)}.kc.br{right:0;bottom:0;transform:scale(-1,-1)}

/* ---- เฟรมเมนูกลาง ---- */
.mf{position:absolute;inset:0;z-index:52;display:none;color:#fff;font-family:var(--font-ui);--kc:48px}
.mf.on{display:block}
.mf-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,30,.93),rgba(8,10,30,.88))}      /* ทึบ ≥.88 ไล่เฉดคงที่ · ไม่ใช้ backdrop-filter/blur (ซ้อนบนศึกต้องไม่เห็น HUD ทะลุ) */
.mf-in{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,27%,330px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head top" "board party" "hint hint";gap:.7em 1.2em;padding:calc(3% + env(safe-area-inset-top,0px)) 3% calc(2.6% + env(safe-area-inset-bottom,0px));overflow:auto;font-size:clamp(12px,1.55cqw,16px)}
.mf-head{grid-area:head;display:flex;align-items:center;gap:1em;min-width:0}
.mf-title{margin:0;font-size:clamp(24px,3.6cqw,38px);color:#ffdc8a;text-shadow:0 2px 0 #3a2a00,0 0 14px rgba(255,200,90,.35);letter-spacing:.04em}
.mf-x{margin-left:auto;font:inherit;font-size:.95em;padding:.2em .9em;color:#fff;background:rgba(36,54,122,.85);border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}.mf-x small{opacity:.6;margin-left:.3em}
.mf-top{grid-area:top;justify-self:end;align-self:center;display:flex;gap:1.3em;align-items:center;font-size:clamp(13px,1.9cqw,20px);color:#ffe9a8;padding:.25em .3em .25em 1.6em;border-bottom:2px solid rgba(255,220,138,.5);background:linear-gradient(90deg,transparent,rgba(10,14,48,.72) 35%);white-space:nowrap}
.mf-board{grid-area:board;position:relative;display:grid;grid-template-columns:clamp(270px,42%,380px) minmax(0,1fr);align-content:start;min-height:0;overflow:auto;color:#fff;border:3px solid #e8e4ff;border-radius:4px;background:linear-gradient(180deg,rgba(32,52,120,.94),rgba(12,20,64,.97));box-shadow:0 0 0 2px #0a1030,0 0 0 4px #6f80d0,0 10px 30px rgba(0,0,0,.55)}
.mf-in.paper .mf-board{color:#3a2410;border:3px solid #3a2410;background:#e9dcba url(../assets/ui/ui_paper.png) 0 0/256px;box-shadow:0 0 0 2px #d6a046,0 0 0 4px #3a2410,0 10px 30px rgba(0,0,0,.55)}
.mf-list{position:relative;padding:40px .7em 1.3em .7em}
.mf-items{display:flex;flex-direction:column;gap:.12em}
.mf-it{position:relative;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:.2em .7em .2em 52px;font-size:clamp(14px,1.8cqw,18px);cursor:pointer;border-radius:3px;-webkit-tap-highlight-color:transparent}
.mf-it .ic{width:1.5em;text-align:center;flex:none}
.mf-it .nm{flex:1;min-width:0;line-height:1.35}
.mf-it .k{flex:none;margin-left:auto;font-size:.68em;padding:0 .45em;border:1px solid currentColor;border-radius:3px;opacity:.6}
.mf-it.sel{color:#fff;background:linear-gradient(90deg,#1f3070,#3a52b0 65%,rgba(58,82,176,.25));box-shadow:inset 0 0 0 1px rgba(255,220,138,.55)}
.mf-it.dis{opacity:.42}
.mf-body{padding:44px 1.4em 1.3em 1.2em;border-left:2px solid rgba(58,36,16,.28);min-width:0;line-height:1.6}
.mf-in:not(.paper) .mf-body{border-left-color:rgba(180,200,255,.3)}
.mf-loc{display:flex;flex-wrap:wrap;gap:.2em 1.2em;justify-content:space-between;margin-bottom:.9em;padding-bottom:.4em;border-bottom:1px dashed rgba(58,36,16,.45);font-size:.88em;opacity:.85}
.mf-bt{margin:0 0 .3em;font-size:clamp(20px,2.7cqw,28px);color:#7a2a12}
.mf-in:not(.paper) .mf-bt{color:#ffdc8a}
.mf-bd{margin:0 0 .8em;font-size:1.05em}
.mf-kr{font-size:.9em;opacity:.85}.mf-kr kbd{display:inline-block;padding:0 .55em;margin-left:.3em;border:1.5px solid currentColor;border-radius:4px;background:rgba(58,36,16,.1)}
.mf-warn{margin-top:.7em;padding:.3em .7em;border-left:4px solid #b8322e;background:rgba(184,50,46,.14);color:#8a1f1a;font-weight:600}
.mf-in:not(.paper) .mf-warn{color:#ffb0a0;background:rgba(255,90,70,.16)}
/* เคอร์เซอร์มือพิกเซล (ภาพ 22×14 ขยาย 2 เท่า) — ขยับตามแถวที่เลือก มีจังหวะโยกเบา ๆ */
.mf-cur{position:absolute;left:4px;top:0;width:44px;height:28px;background:url(../assets/ui/ui_hand.png) no-repeat 0 0/100% 100%;image-rendering:pixelated;pointer-events:none;z-index:4;display:none;transition:top .08s steps(3);animation:mfNudge .7s steps(2,jump-none) infinite}
@keyframes mfNudge{0%{margin-left:0}50%{margin-left:5px}}
/* แผงปาร์ตี้ขวา (ถาวรทุกหน้าที่ใช้เฟรมนี้) */
.mf-party{grid-area:party;position:relative;min-height:0;padding-left:30px}
.mf-party .mf-cur{left:-8px;z-index:6}
.mf-pcs{display:flex;flex-direction:column;gap:.55em}
.mf-pc{position:relative;display:flex;gap:.65em;align-items:center;padding:.45em .65em .5em .5em;font-size:.98em;color:#fff;background:linear-gradient(180deg,rgba(32,52,120,.95),rgba(12,20,64,.97));border:2px solid #7f8fe0;border-radius:6px;box-shadow:0 0 0 1px #0a1030,0 3px 8px rgba(0,0,0,.5)}
.mf-pc.sel{border-color:#ffdc8a;box-shadow:0 0 0 1px #0a1030,0 0 12px rgba(255,220,138,.6),0 3px 8px rgba(0,0,0,.5);background:linear-gradient(180deg,rgba(48,74,160,.97),rgba(18,30,84,.98))}
.mf-pc canvas{flex:none;width:3.5em;height:auto;image-rendering:pixelated;background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.14),rgba(0,0,0,.3));border:1px solid #9fb4ff;border-radius:3px}
.mf-pc .pb{flex:1;min-width:0}
.mf-pc .pn{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;font-weight:600;white-space:nowrap}
.mf-pc .lv{font-style:normal;font-size:.9em;color:#ffd26a;margin:0}
.mf-pc .bar{font-size:.82em;margin:.12em 0}
.mf-pc .bar .v{width:auto;min-width:5.4em;flex:none;font-size:1.12em}
.mf-pc.ko{filter:grayscale(.55);opacity:.75}.mf-pc .pko{font-size:.8em;color:#ffb0b0}
.mf-hint{grid-area:hint;padding:.5em 1.1em;font-size:clamp(12px,1.65cqw,16px);color:#e8ecff;background:linear-gradient(90deg,rgba(10,14,48,.9),rgba(10,14,48,.9) 80%,transparent);border-left:4px solid #ffdc8a;line-height:1.5}
.mf-hint.bad{color:#ffb8a8;border-left-color:#ff8a7a}
@container (max-width:720px){
  .mf{--kc:24px}
  .mf-in{align-content:start;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;grid-template-areas:"head" "top" "board" "party" "hint";gap:.5em;padding:calc(2.5% + env(safe-area-inset-top,0px)) 3% calc(2% + env(safe-area-inset-bottom,0px));font-size:13px}
  .mf-title{font-size:26px}
  .mf-top{justify-self:stretch;justify-content:flex-end;font-size:14px;gap:1em;padding-left:.6em}
  .mf-board{grid-template-columns:minmax(0,1fr);overflow:visible}
  .mf-list{padding:30px .5em .5em .5em}
  .mf-items{display:grid;grid-template-columns:1fr 1fr;gap:.15em .3em}
  .mf-it{min-height:2.7em;padding:.15em .4em .15em 50px;font-size:14px}.mf-it .k{display:none}
  .mf-body{padding:.6em 1em .9em;border-left:0;border-top:2px solid rgba(58,36,16,.28);line-height:1.5}
  .mf-in:not(.paper) .mf-body{border-top-color:rgba(180,200,255,.3)}
  .mf-loc{margin-bottom:.4em}.mf-bd{margin-bottom:.4em}
  .mf-party{padding-left:0}
  .mf-party .mf-cur{left:-2px;top:0}
  .mf-pcs{display:grid;grid-template-columns:1fr 1fr;gap:.4em}
  .mf-pc{padding:.35em .45em;gap:.45em;font-size:12px}.mf-pc canvas{width:2.9em}
  .mf-pc .bar .v{min-width:4.6em}
  .mf-hint{font-size:13px;padding:.35em .8em}
}
@container (max-height:520px) and (min-width:721px){
  .mf-in{font-size:12px}.mf-title{font-size:22px}.mf-board{grid-template-columns:minmax(0,58%) minmax(0,1fr)}.mf-it .k{display:none}.mf-it{padding-left:48px}
  .mf-list{padding-top:30px}.mf-items{display:grid;grid-template-columns:1fr 1fr;gap:.1em .3em}
  .mf-it{min-height:2.2em;font-size:13px;padding-left:50px}.mf-body{padding-top:32px}
  .mf-pc canvas{width:2.6em}.mf-pcs{gap:.3em}
}

/* ---- กล่องยืนยันมาตรฐาน (ใช่/ไม่) ---- */
.mfc{position:absolute;inset:0;z-index:95;display:none;align-items:center;justify-content:center;font-family:var(--font-ui)}
.mfc.on{display:flex}
.mfc-bg{position:absolute;inset:0;background:rgba(2,4,20,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mfc-box{position:relative;width:min(88cqw,460px);padding:1.5em 1.7em 1.1em;text-align:center;color:#fff;font-size:clamp(14px,2cqw,18px);background:linear-gradient(180deg,rgba(32,52,120,.98),rgba(12,20,64,.99));border:3px solid #eae6ff;border-radius:6px;box-shadow:0 0 0 2px #0a1030,0 0 0 5px #6f80d0,0 14px 40px rgba(0,0,0,.6);--kc:48px}
.mfc-box .kc.tl{left:-10px;top:-10px}.mfc-box .kc.tr{right:-10px;top:-10px}.mfc-box .kc.bl{left:-10px;bottom:-10px}.mfc-box .kc.br{right:-10px;bottom:-10px}
.mfc-t{margin:0 0 .35em;font-size:1.45em;color:#ffdc8a}
.mfc-x{line-height:1.6;opacity:.95}
.mfc-b{display:flex;gap:.9em;justify-content:center;flex-wrap:wrap;margin-top:1.1em}
.mfc-b button{position:relative;font:inherit;font-weight:600;min-width:8em;padding:.5em 1.3em .5em 56px;color:#cfd8ff;background:rgba(20,28,80,.9);border:2px solid #6f80d0;border-radius:4px;cursor:pointer;text-align:left}
.mfc-b button.sel{color:#fff;background:linear-gradient(90deg,#1f3070,#3a52b0);border-color:#ffdc8a;box-shadow:0 0 10px rgba(255,220,138,.45)}
.mfc-hand{position:absolute;left:.4em;top:50%;width:44px;height:28px;margin-top:-14px;background:url(../assets/ui/ui_hand.png) no-repeat 0 0/100% 100%;image-rendering:pixelated;display:none;animation:mfNudge .7s steps(2,jump-none) infinite}
.mfc-b button.sel .mfc-hand{display:block}
.mfc-h{margin-top:.8em;font-size:.78em;opacity:.65}
@media (prefers-reduced-motion:reduce){.mf-cur,.mfc-hand{animation:none}.mf-cur{transition:none}}

.mf-map{position:relative;margin-top:1em;width:min(100%,300px);border:3px solid #3a2410;border-radius:3px;box-shadow:0 0 0 2px #d6a046,0 3px 8px rgba(0,0,0,.35);transform:rotate(-1.2deg);overflow:hidden;opacity:.92}
.mf-map img{display:block;width:100%;height:auto;image-rendering:pixelated}
.mf-map span{position:absolute;left:0;right:0;bottom:0;padding:.1em .6em;font-size:.8em;color:#fff3c8;background:linear-gradient(0deg,rgba(58,36,16,.85),transparent);text-align:right}
.mf-in:not(.paper) .mf-map{border-color:#6f80d0;box-shadow:0 0 0 2px #0a1030}
@container (max-width:720px) or (max-height:520px){.mf-map{display:none}}
.mf-items.dimsel .mf-it.sel{background:linear-gradient(90deg,rgba(31,48,112,.55),rgba(58,82,176,.3) 65%,transparent);box-shadow:inset 0 0 0 1px rgba(58,36,16,.35);color:inherit}
.mf-in:not(.paper) .mf-items.dimsel .mf-it.sel{color:#fff}

/* =========================================================
   UI-P2 (ROADMAP §8.7) — หน้าสถานะรายตัว: แท็บตัวละครซ้าย · เนื้อหาทีละคน · แผงปาร์ตี้ขวา (src/57-status.js, สเปก docs/ui/UI_P2_STATUS_SPEC.md)
   ใช้เฟรมกลาง .mf (68-menu.js) ครอบ #status เฉพาะนอกต่อสู้ — ในต่อสู้ #status ยังเป็น .stat เดิม
   ========================================================= */
.stat.mf{padding:0;overflow:hidden;background:none;z-index:52}
.mf-in.stx{grid-template-columns:minmax(0,1fr) clamp(220px,25%,290px);font-size:clamp(12px,1.3cqw,14px)}
.stx .mf-title{font-size:clamp(22px,3cqw,32px)}
.stx .mf-head{flex-wrap:wrap;gap:.5em .7em}
.mf-x2{font:inherit;font-size:.9em;padding:.2em .8em;color:#fff;background:rgba(36,54,122,.85);border:1px solid #9fb4ff;border-radius:4px;cursor:pointer;white-space:nowrap}
.mf-x2:hover{background:#3e5ad0}
.stx .mf-x{margin-left:auto}
.stx-res{margin:.8em .3em 0;padding-top:.4em;border-top:1px dashed rgba(180,200,255,.4);font-size:.82em;color:#cfe0ff;white-space:nowrap;font-family:var(--font-num)}
.stx .mf-board{grid-template-columns:clamp(176px,26%,220px) minmax(0,1fr)}
.stx .mf-board{overflow:hidden;align-content:stretch}
.stx .mf-list,.stx .mf-body{overflow-y:auto;min-height:0}
.stx .mf-list{padding:34px .4em 1em .4em}
.stx .mf-it{min-height:2.6em;padding:.15em .3em .15em 40px;font-size:14px;gap:.35em}
.stx .mf-it .ic{width:28px;flex:none}
.stx .mf-it .ic canvas{display:block;width:28px;height:31px;image-rendering:pixelated;background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.14),rgba(0,0,0,.3));border:1px solid #6f80d0;border-radius:3px}
.stx .mf-it .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stx .mf-it .k{font-size:.62em;padding:0 .3em}
.stx .mf-it:last-child{margin-top:.7em;border-top:1px dashed rgba(180,200,255,.4);border-radius:0 0 3px 3px;padding-top:.3em}
.stx .mf-body{padding:.9em 1.1em 1.2em;line-height:1.5;border-left:2px solid rgba(180,200,255,.3)}
.stx .n{font-family:var(--font-num);letter-spacing:.02em}
.stx-hero{display:grid;grid-template-columns:144px minmax(0,1fr);gap:.9em;align-items:start}
.stx-art canvas{display:block;width:144px;height:144px;image-rendering:pixelated;background:radial-gradient(circle at 50% 78%,rgba(255,255,255,.18),rgba(0,0,0,.25) 72%);border:2px solid #6f80d0;border-radius:6px}
.stx .sn{font-size:1.5em;font-weight:700;color:#fff;line-height:1.3}
.stx .sn small{display:block;font-size:.55em;font-weight:400;color:#9fb4ff;letter-spacing:.05em}
.stx .lvrow{max-width:none}.stx .lvrow .tr{max-width:14em}
.stx .job{font-size:.82em;color:#bfe0ff;margin:.15em 0}
.stx .si{margin:.15em 0 .4em;opacity:.8;line-height:1.45;font-size:.85em}
.stx-act{display:flex;flex-wrap:wrap;gap:.4em}
.stx-act button,.stx .skbtn{font:inherit;font-size:.9em;padding:.2em .9em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}
.stx-act button:hover:not(:disabled),.stx .skbtn:hover:not(:disabled){background:#3e5ad0}
.stx-act button:disabled,.stx .skbtn:disabled,.stx .eqrow button:disabled{opacity:.35;cursor:not-allowed}
.stx .skbtn.hot{background:#8a6a10;border-color:#ffe27a;color:#fff0b0}
.stx-tbl{display:grid;grid-template-columns:1fr 1fr;gap:.12em .9em;margin:.8em 0 .4em;padding:.5em .7em;background:rgba(0,0,0,.22);border-radius:4px}
.stx-r{display:grid;grid-template-columns:5em minmax(0,1fr);gap:.5em;align-items:baseline;padding:.12em 0;border-bottom:1px dotted rgba(180,200,255,.15)}
.stx-r.w{grid-column:1/-1}
.stx-r>b{color:#9fb4ff;font-weight:600;white-space:nowrap}
.stx-r>span{min-width:0;overflow-wrap:anywhere}
.stx-r em{font-style:normal;opacity:.75;font-size:.86em}
.stx-r em.up{opacity:1;color:#9affb0}.stx-r em.bad{opacity:1;color:#ff8a8a}
.stx-r .bar .v{min-width:6.2em}
.stx-r .bar{font-size:1em;margin:.1em 0}.stx-r .bar .tr{height:.5em}
.stx-sub{margin-top:.1em;font-size:.88em}
.stx .badge{display:inline-block;padding:0 .5em;margin-right:.3em;border-radius:3px;font-size:.85em;font-weight:600;background:#3a4a8a}
.stx .badge.def{background:#2a6a8a;color:#bfeaff}.stx .badge.ko{background:#6a1a1a;color:#ffb0b0}.stx .badge.ok{background:#1f5a34;color:#b8ffcc}
.stx-sec{margin-top:.8em;padding-top:.5em;border-top:1px solid rgba(180,200,255,.25)}
.stx-sh{font-family:var(--font-title);color:#ffdc8a;font-size:1.05em;margin-bottom:.25em}
.stx-h2{color:#9fb4ff}
.stx-abg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.5em 1em}
.stx-abg .sk,.stx-abg .psv{margin:0;padding:0;border:0}
.stx-abg .sk div,.stx-abg .psv div{margin:.2em 0;line-height:1.45}
.stx-abg .sk small,.stx-abg .psv small{opacity:.75;display:block;font-size:.85em}
.stx-abg .psv .psvempty,.stx-abg .psv .psvlock{opacity:.5}
.stx-ult{margin-top:.5em}.stx-ult .ultline{display:inline-block;margin:0 0 0 .5em;font-size:.95em}.stx-ult .ultline .ultl{margin-left:.6em}
.stx .eqrow{grid-template-columns:5.4em minmax(0,1fr) auto}
.stx-info .sec:first-child{margin-top:0}
.stx .mf-pc{cursor:pointer}
@container (max-width:720px){
  .mf-in.stx{grid-template-columns:minmax(0,1fr);font-size:13px}
  .stx .mf-head{gap:.4em .5em}.stx .mf-title{flex:1 1 100%}.stx .mf-x{margin-left:0}
  .stx .mf-board{grid-template-columns:minmax(0,1fr);overflow:visible}
  .stx .mf-list,.stx .mf-body{overflow:visible;min-height:auto}.stx .mf-board{min-height:auto}
  .stx .mf-list{padding:28px .4em .4em .4em}
  .stx .mf-items{grid-template-columns:1fr 1fr}
  .stx .mf-it{font-size:13px}.stx .mf-it .k{display:none}
  .stx .mf-it:last-child{margin-top:0;border-top:0;padding-top:.15em}
  .stx .mf-body{padding:.7em .8em 1em;border-left:0;border-top:2px solid rgba(180,200,255,.3)}
  .stx-hero{grid-template-columns:minmax(0,1fr)}
  .stx-art{display:none}
  .stx-tbl{grid-template-columns:1fr}
  .stx-r.w{grid-column:auto}
  .stx-r{grid-template-columns:4.6em minmax(0,1fr)}
  .stx-abg{grid-template-columns:minmax(0,1fr)}
  .stx .mf-title{font-size:24px}
}
@container (max-height:520px) and (min-width:721px){
  .stx .mf-board{grid-template-columns:minmax(0,26%) minmax(0,1fr)}
  .stx .mf-it{padding-left:42px}
}

/* =========================================================
   UI-P3 — หน้าอุปกรณ์ 6 ช่อง (src/57-equip.js · ใช้เฟรม .mf ใน #status) + ป๊อปอัปเลือกของ reskin (.eqp-w ใน renderPicker)
   ========================================================= */
.mf-in.eqx{grid-template-columns:minmax(0,1fr) clamp(220px,25%,290px);font-size:clamp(12px,1.3cqw,14px)}
.eqx .mf-title{font-size:clamp(22px,3cqw,32px)}
.eqx .mf-head{flex-wrap:wrap;gap:.5em .7em}
.eqx .mf-x{margin-left:auto}.eqx .mf-x2[hidden]{display:none}
.eqx .mf-board{grid-template-columns:clamp(150px,22%,200px) minmax(0,1fr);overflow:hidden;align-content:stretch}
.eqx .mf-list,.eqx .mf-body{overflow-y:auto;min-height:0}
.eqx .mf-list{padding:34px .4em 1em .4em}
.eqx .mf-it{min-height:2.6em;padding:.15em .3em .15em 40px;font-size:14px;gap:.35em}
.eqx .mf-it .ic{width:28px;flex:none}
.eqx .mf-it .ic canvas{display:block;width:28px;height:31px;image-rendering:pixelated;background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.14),rgba(0,0,0,.3));border:1px solid #6f80d0;border-radius:3px}
.eqx .mf-it .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eqx .mf-body{padding:.8em 1.1em 1.2em;line-height:1.5;border-left:2px solid rgba(180,200,255,.3)}
.eqx .mf-pc{cursor:pointer}
.eqx .n,.eqx-sum .n{font-family:var(--font-num);font-style:normal;letter-spacing:.02em}
.eqx-hero{display:grid;grid-template-columns:120px minmax(0,1fr);gap:.9em;align-items:start}
.eqx-art canvas{display:block;width:120px;height:120px;image-rendering:pixelated;background:radial-gradient(circle at 50% 78%,rgba(255,255,255,.18),rgba(0,0,0,.25) 72%);border:2px solid #6f80d0;border-radius:6px}
.eqx .sn{font-size:1.45em;font-weight:700;color:#fff;line-height:1.3}
.eqx .sn small{display:block;font-size:.55em;font-weight:400;color:#9fb4ff;letter-spacing:.05em}
.eqx .job{font-size:.8em;color:#bfe0ff;margin:.1em 0 .5em;line-height:1.4}
.eqx-psv{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.7em;align-items:center;padding:.35em .7em;background:rgba(0,0,0,.24);border:1.5px solid #6f80d0;border-radius:5px;cursor:pointer}
.eqx-psv>b{grid-column:1/-1;color:#ffd9a0;font-weight:600}
.eqx-psv>span{min-width:0;overflow-wrap:anywhere}.eqx-psv>span em{font-style:normal;opacity:.6}
.eqx-psv .go{font-style:normal;font-size:.8em;color:#ffdc8a;white-space:nowrap}
.eqx-psv.foc{border-color:#ffdc8a;background:linear-gradient(90deg,#1f3070,rgba(58,82,176,.45));box-shadow:0 0 8px rgba(255,220,138,.4)}
.eqx-slots{margin-top:.7em;display:flex;flex-direction:column;gap:.2em}
.eqx-slot{display:grid;grid-template-columns:7.8em minmax(0,1fr) 1.3em;grid-template-areas:"sl it go" "sl fx go";align-items:center;column-gap:.6em;min-height:2.6em;padding:.3em .6em;background:rgba(0,0,0,.22);border:1px solid transparent;border-radius:4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.eqx-slot .sl{grid-area:sl;color:#9fb4ff;white-space:nowrap}
.eqx-slot .sl i{font-style:normal;display:inline-block;width:1.7em}
.eqx-slot .it{grid-area:it;min-width:0;overflow-wrap:anywhere}
.eqx-slot .fx{grid-area:fx;font-style:normal;font-size:.84em;opacity:.8;color:#cfe0ff;overflow-wrap:anywhere}
.eqx-slot .go{grid-area:go;font-style:normal;color:#ffdc8a;font-size:1.5em;line-height:1;text-align:center}
.eqx-slot .it>em{font-style:normal;opacity:.6}
.eqx-slot.foc{background:linear-gradient(90deg,#1f3070,#3a52b0 70%,rgba(58,82,176,.35));border-color:rgba(255,220,138,.65)}
.eqx-slot.dis{opacity:.4;cursor:not-allowed}
.eqx-slot .lk{font-style:normal}
.eqx-tag{display:inline-block;padding:0 .45em;border-radius:3px;font-size:.78em;background:#6a3a8a;color:#f3d8ff;vertical-align:middle}
.eqx-sum{margin-top:.6em;padding:.4em .8em;background:rgba(0,0,0,.22);border-radius:4px;display:flex;flex-wrap:wrap;gap:.1em 1.1em;align-items:baseline}
.eqx-sum>b{flex:0 0 auto;color:#ffdc8a;font-family:var(--font-title);font-weight:400}
.eqx-sum span b{color:#9fb4ff;font-weight:600}
.eqx-sum>b small{font-family:var(--font-ui);font-size:.8em;color:#9fb4ff}
.eqx-btns{display:flex;flex-wrap:wrap;gap:.6em;position:sticky;bottom:0;margin:.4em -1.1em -1.2em;padding:.8em 1.1em 1em;background:linear-gradient(180deg,rgba(12,20,64,0),rgba(12,20,64,.97) 12px);z-index:2}
.eqx-btns button{font:inherit;padding:.4em 1.2em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}
.eqx-btns button:last-child{background:#8a6a10;border-color:#ffe27a;color:#fff0b0}
.eqx-btns button.foc{background:#3e5ad0;border-color:#ffdc8a;box-shadow:0 0 8px rgba(255,220,138,.5)}
.eqx-btns button:last-child.foc{background:#b08a18;color:#fff}
.eqx-btns button:disabled{opacity:.35;cursor:not-allowed}
.eqx-msg{flex:1 0 100%;color:#ffe9a8;font-size:.92em;line-height:1.35}.eqx-msg:empty{display:none}
/* ป๊อปอัปเลือกของ: กรอบมุม kc + แถวที่เลือกด้วยคีย์บอร์ด (เนื้อหา/ผลต่างค่าสถานะเดิมทุกจุด) */
.eqp-w{position:relative;display:flex;width:min(94%,720px);max-height:88%;--kc:34px}
.eqp-w>.kc.tl{left:-9px;top:-9px}.eqp-w>.kc.tr{right:-9px;top:-9px}.eqp-w>.kc.bl{left:-9px;bottom:-9px}.eqp-w>.kc.br{right:-9px;bottom:-9px}
.eqp-w>.epc{flex:1;min-width:0;max-height:none;min-height:0;overflow:auto;border-width:3px}
.epc.eqp .epr{cursor:pointer;border:1px solid transparent}.epc.eqp .epr.dis{cursor:default}
.epc.eqp .epr.sel{background:linear-gradient(90deg,#1f3070,#3a52b0 70%,rgba(58,82,176,.35));border-color:rgba(255,220,138,.65)}
.epc.eqp .epr.sel>span:first-child::before{content:'▶ ';color:#ffdc8a}
.epc.eqp .epr .n,.epc.eqp .epr em{font-family:inherit}
.eqp-h{float:left;opacity:.65;font-size:.85em;padding-top:.3em}
.epc.eqp .epb{position:sticky;bottom:-1em;margin:.6em -1.2em -1em;padding:.5em 1.2em 1em;background:linear-gradient(180deg,rgba(12,20,64,0),rgba(12,20,64,.98) 12px);z-index:2}
.mfc-x{white-space:pre-line}
@container (max-width:720px){
  .mf-in.eqx{grid-template-columns:minmax(0,1fr);font-size:13px}
  .eqx .mf-head{gap:.4em .5em}.eqx .mf-title{flex:1 1 100%;font-size:24px}.eqx .mf-x{margin-left:0}
  .eqx .mf-board{grid-template-columns:minmax(0,1fr);overflow:visible}
  .eqx .mf-list,.eqx .mf-body{overflow:visible;min-height:auto}.eqx .mf-board{min-height:auto}
  .eqx .mf-list{padding:28px .4em .4em .4em}
  .eqx .mf-items{grid-template-columns:1fr 1fr}
  .eqx .mf-it{font-size:13px}.eqx .mf-it .k{display:none}
  .eqx .mf-body{padding:.7em .8em 1em;border-left:0;border-top:2px solid rgba(180,200,255,.3)}
  .eqx-hero{grid-template-columns:minmax(0,1fr)}.eqx-art{display:none}
  .eqx-slot{grid-template-columns:5.6em minmax(0,1fr) 1.1em;padding:.35em .45em}
  .eqx-slot .sl i{width:1.5em}
  .eqx-btns{position:static;margin:.6em 0 0;padding:0;background:none}.eqx-btns button{flex:1 1 40%}
  .eqx .mf-list .mf-cur{display:none!important}      /* ตารางแท็บ 2 คอลัมน์: ไฮไลต์แถวพอ ไม่ใช้มือชี้ซ้าย (ชี้ผิดคอลัมน์) */
  .epc.eqp .epr{grid-template-columns:minmax(0,1fr) auto}.epc.eqp .epr>span:nth-child(2){grid-column:1/-1;grid-row:2}.epc.eqp .epr>button{grid-row:1;grid-column:2}
  .eqp-h{display:none}
}
@container (max-height:520px) and (min-width:721px){
  .eqx .mf-board{grid-template-columns:minmax(0,26%) minmax(0,1fr)}
  .eqx .mf-it{padding-left:42px}
}

/* =========================================================
   UI-P4 — ร้านค้า/ช่างตีเหล็ก/ย่อย/กาชา (src/58-shop.js · 67-gacha.js) + จัดทีมสองคอลัมน์ (src/59-team.js) ใช้เฟรม .mf ใน #shop/#team (สเปก docs/ui/UI_P4_SHOP_PARTY_SPEC.md)
   ชื่อคลาสใหม่ขึ้นต้น shx-/tmx- (ร้าน/จัดทีม) — ตัวเลขใช้ --font-num (Cinzel) เหมือนทุกหน้า
   ========================================================= */
.mf-in.shx{grid-template-columns:minmax(0,1fr) clamp(230px,24%,290px);font-size:clamp(12px,1.3cqw,14px)}
.mf-in.nopty{grid-template-columns:minmax(0,1fr);grid-template-areas:"head top" "board board" "hint hint"}
.shx .mf-title,.tmx .mf-title{font-size:clamp(22px,3cqw,32px)}
.shx .mf-head{min-width:0}.shx .mf-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shx .mf-top{gap:.1em 1em;flex-wrap:wrap;justify-content:flex-end}.mf-mt{flex:0 0 100%;text-align:right;font-size:.8em;color:#cfe0ff}
.shx .mf-board{grid-template-columns:clamp(66px,11%,84px) minmax(0,1fr);overflow:hidden;align-content:stretch}
.shx .mf-board.nolist{grid-template-columns:minmax(0,1fr)}
.shx .mf-list,.shx .mf-body{overflow-y:auto;min-height:0}
.shx .mf-board.nolist .mf-body{padding-top:30px;padding-left:1.4em}
.shx .mf-x{flex:none;white-space:nowrap}
.shx .mf-list{padding:30px .3em .6em;display:flex;flex-direction:column;gap:.3em;border-right:2px solid rgba(180,200,255,.25)}
.shx .mf-body{padding:.7em 1em 1.2em;line-height:1.45;border-left:0}
.shx .mf-party{padding-left:0}
.shx-ct{font:inherit;font-size:.78em;display:flex;flex-direction:column;align-items:center;gap:.05em;padding:.35em .1em .3em;color:#cfd8ff;background:rgba(40,60,130,.35);border:1.5px solid rgba(111,128,208,.5);border-radius:4px;cursor:pointer;line-height:1.2}
.shx-ct .ic{font-size:2em;line-height:1.15}
.shx-ct:hover{background:rgba(62,90,208,.55)}
.shx-ct.on{color:#241800;background:#ffdc8a;border-color:#fff0b8;font-weight:700}
.shx .smsg{position:sticky;top:-.7em;z-index:3;margin:-.2em 0 .6em;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.shx .gtabs{margin-top:0}
.shx .sec{margin:.8em 0 .3em}
.shx .sec:first-child{margin-top:0}
/* ตาราง: ชื่อ · ชนิด · ที่มี · ราคา (· จำนวน · รวม) · ปุ่ม */
.shx-h,.shx-r{display:grid;align-items:center;column-gap:.6em;padding:.3em .6em}
.shx-h{font-size:.78em;color:#9fb4ff;border-bottom:1px solid rgba(159,180,255,.28);padding-top:0;padding-bottom:.1em;margin-bottom:.2em}
.shx-h>:nth-child(n+2){text-align:center}
.shx-h.g,.shx-r.g{grid-template-columns:minmax(0,1fr) 4.8em 3.6em 5.4em 5.2em}
.shx-h.g.m,.shx-r.g.m{grid-template-columns:minmax(0,1fr) 4.8em 3.6em 5.4em 11em}
.shx-h.c,.shx-r.c{grid-template-columns:minmax(0,1fr) 3.4em 4.6em 6.6em 5.6em 4.6em}
.shx-h.l,.shx-r.l{grid-template-columns:minmax(0,1fr) 3.4em 5em 10.6em}
.shx .shlist{gap:.25em}
.shx-r{background:rgba(40,60,130,.4);border:1.5px solid transparent;border-radius:4px;cursor:default}
.shx-r .nm{min-width:0;overflow-wrap:anywhere}
.shx-r .nm small{display:block;opacity:.7;font-size:.82em}
.shx-r .nm em{font-style:normal;opacity:.75;font-size:.86em;margin-left:.3em}
.shx-r .ty{text-align:center}.shx-r .ty .chip{white-space:nowrap}
.shx-r .own{opacity:.8;text-align:center;font-family:var(--font-num);white-space:nowrap}
.shx-r .pr,.shx-r .tt{color:#ffe27a;text-align:right;white-space:nowrap;font-family:var(--font-num)}
.shx-r .tt .n{font-weight:400}
.shx-r .qt{display:flex;align-items:center;justify-content:center;gap:.3em}
.shx-r .qt .n{min-width:1.6em;text-align:center;font-family:var(--font-num);font-weight:600}
.shx-r .ac{display:flex;gap:.3em;justify-content:flex-end;flex-wrap:wrap}
.shx-r button{font:inherit;font-size:.9em;padding:.12em .8em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer;white-space:nowrap}
.shx-r button:hover:not(:disabled){background:#3e5ad0}
.shx-r button:disabled,.shx-r button.dis{opacity:.4;cursor:not-allowed}
.shx-r button.warn{background:#a03030;border-color:#ffb0b0}
.shx-r .qb{padding:.05em .55em;min-width:1.9em}
.shx-r.foc{border-color:#ffdc8a;background:linear-gradient(90deg,#1f3070,#3a52b0 65%,rgba(58,82,176,.35));box-shadow:0 0 0 1px #0a1030,0 0 10px rgba(255,220,138,.4)}
.shx-r.pend{border-color:#ffb04a;background:linear-gradient(90deg,#5a3a10,rgba(122,80,20,.5))}
/* สีจางเมื่อซื้อไม่ได้ — แยกเหตุผล: gold = เงินไม่พอ (ราคาแดง) · own = มีแล้ว/ซื้อแล้ว/แลกแล้ว · lock = ล็อก/ชั้นร้านยังไม่ปลด (เทาลง) · ปุ่มใน .ac ไม่จาง (ปลดล็อก/ล็อกยังกดได้) */
.shx-r.dim>:not(.ac){opacity:.5}
.shx-r.dim.gold>.pr,.shx-r.dim.gold>.tt{color:#ff9a8a;opacity:.85}
.shx-r.dim.lock>:not(.ac){filter:grayscale(.7);opacity:.45}
.shx-r.dim.own>.ac button:disabled{opacity:.55}
.shx-r.dim.lock>.ac button:disabled{opacity:.4}
.shx-r .ico{width:28px;height:28px}
.shx .selall{margin-left:.8em}
.shx-r.foc.dim>:not(.ac){opacity:.7}
/* กาชา: ใช้เนื้อหาเดิมทั้งหมด (อนิเมชันเซียมซี) ในเฟรมใหม่ */
.shx.gacha .ginfo{margin-bottom:.4em}
.shx.gacha .gres.many{grid-template-columns:repeat(5,minmax(0,1fr))}
.shx.gacha .gcard{min-width:0}
@container (max-width:720px){
  .mf-in.shx{grid-template-columns:minmax(0,1fr);font-size:13px}
  .mf-in.nopty{grid-template-areas:"head" "top" "board" "hint"}
  .shx .mf-head{gap:.4em .5em}
  .shx .mf-title{font-size:22px}
  .shx .mf-top{flex-wrap:wrap;gap:.2em 1em}
  .shx .mf-board{grid-template-columns:minmax(0,1fr);overflow:visible;min-height:auto}
  .shx .mf-list,.shx .mf-body{overflow:visible;min-height:auto}
  .shx .mf-list{flex-direction:row;gap:.3em;padding:.5em .4em .5em 28px;border-right:0;border-bottom:2px solid rgba(180,200,255,.25);overflow-x:auto}
  .shx-ct{flex:1 1 0;min-width:0;font-size:.74em}
  .shx .mf-title{white-space:normal;font-size:20px;line-height:1.25}
  .shx .mf-body,.shx .mf-board.nolist .mf-body{padding:.6em .7em 1em}
  .shx .smsg{top:0}
  .shx-h{display:none}
  .shx-r{column-gap:.5em;row-gap:.2em;font-size:13px}
  .shx-r .nm{grid-area:nm}.shx-r .ty{grid-area:ty;text-align:left}.shx-r .own{grid-area:own;text-align:left}.shx-r .pr{grid-area:pr;text-align:left}.shx-r .qt{grid-area:qt;justify-content:flex-start}.shx-r .tt{grid-area:tt;text-align:left}.shx-r .ac{grid-area:ac}
  .shx-r.g{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"nm nm nm nm" "ty own pr ac"}
  .shx-r.c{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"nm nm nm" "own pr qt" "tt ac ac"}
  .shx-r.l{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"nm nm nm" "own pr ac"}
  .shx-r button{padding:.25em .7em}
  .shx .mf-party{padding-left:0}
  .shx.gacha .gres.many{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* จัดทีม: สองคอลัมน์ พักอยู่ | ปาร์ตี้ (มือถือพับเป็นแท็บ) */
.mf-in.tmx{font-size:clamp(12px,1.3cqw,14px)}
.tmx .mf-board{grid-template-columns:minmax(0,40%) minmax(0,1fr);overflow:hidden;align-content:stretch}
.tmx-tabs{display:none}
.tmx-col{min-width:0;min-height:0;overflow-y:auto;padding:30px .8em 1em}
.tmx-col.tmx-rest{border-right:2px solid rgba(180,200,255,.28)}
.tmx-h{margin:0 0 .5em;font-family:var(--font-title);font-size:1.25em;color:#ffdc8a;line-height:1.35}
.tmx-h small{font-family:var(--font-ui);font-size:.62em;opacity:.65;margin-left:.6em;color:#cfd8ff}
.tmx-list{display:flex;flex-direction:column;gap:.5em}
.tmx .tcard{border:2px solid #6f80d0}
.tmx .tcard.empty{border-style:dashed}
.tmx .tcard.foc{border-color:#ffdc8a;box-shadow:0 0 0 1px #0a1030,0 0 12px rgba(255,220,138,.5)}
.tmx .tcard.pend{border-color:#ffb04a;background:linear-gradient(180deg,rgba(110,72,20,.85),rgba(50,30,10,.92))}
.tmx .tcard.pick{cursor:pointer;border-color:#ffb04a;animation:tmxPick 1.1s ease-in-out infinite alternate}
@keyframes tmxPick{from{box-shadow:0 0 0 1px #0a1030,0 0 4px rgba(255,176,74,.3)}to{box-shadow:0 0 0 1px #0a1030,0 0 14px rgba(255,176,74,.85)}}
.tmx .smsg{margin:.2em 0 .6em;padding:.35em .8em;background:rgba(160,110,20,.6);color:#fff0c0;border-radius:4px}
.tmx .smsg button{margin-left:.6em;font:inherit;font-size:.85em;padding:.05em .8em;color:#fff;background:#2d44a0;border:1px solid #9fb4ff;border-radius:4px;cursor:pointer}
.tmx .rowlbl{margin:.4em 0 .1em}
.tmx .tbtn .badge.lock{display:inline-block;padding:0 .6em;border-radius:3px;font-size:.85em;font-weight:600;background:#4a3a5a;color:#e0d0f0}
.mf-hint.msg{color:#caffd4;border-left-color:#7ad08a}
@container (max-width:720px){
  .mf-in.tmx{font-size:13px}
  .tmx .mf-board{grid-template-columns:minmax(0,1fr);overflow:visible;min-height:auto}
  .tmx-tabs{display:flex;gap:.4em;padding:.6em .7em 0}
  .tmx-tabs .gtab{flex:1}
  .tmx-col{display:none;overflow:visible;padding:.6em .6em 1em}
  .tmx-col.tmx-rest{border-right:0}
  .tmx-board.show-rest .tmx-col.tmx-rest,.tmx-board.show-party .tmx-col.tmx-party{display:block}
  .tmx .tcard canvas{width:56px}
}

/* ===== U-ICON: ไอคอน UI ภาพจริง assets/ui/ic_*.png (32×32 พื้นโปร่ง) แทนอีโมจิ — ภาพหาย = onerror ตกกลับเป็นอีโมจิเอง ===== */
.uic{width:1em;height:1em;image-rendering:pixelated;vertical-align:-.15em}
.uic16{width:16px;height:16px}.uic24{width:24px;height:24px}.uic32{width:32px;height:32px}
.bar b{width:2.7em;white-space:nowrap}.bar b .uic{margin-right:.1em}   /* ป้าย HP/SP มีไอคอนนำหน้า */

/* =========================================================
   UI-P5 — ทรานซิชันเปิด/ปิดเฟรมเมนู (68-menu.js mfShow/mfHide · MF_TRANSITION_MS=180)
   เปิด: .opening (opacity 0 · scale .97) ถอดแล้วไล่ขึ้นใน 180ms · ปิด: .closing ไล่กลับแล้วค่อยถอด .on · เคารพ prefers-reduced-motion
   ========================================================= */
.mf,.mfc{--mf-ms:180ms;transition:opacity .18s ease,transform .18s ease}
.mf.opening,.mf.closing{opacity:0;transform:scale(.97)}
.mfc.opening,.mfc.closing{opacity:0}
.mf.closing,.mfc.closing{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .mf,.mfc{transition:none}
  .mf.opening,.mf.closing{opacity:1;transform:none}
  .mfc.opening,.mfc.closing{opacity:1}
}

/* ---- UI-P5: สมุดเควสต์/เรื่องราวตัวละครในเฟรม .mf (64-quests.js · #journal) ---- */
.stat#journal.mf{padding:0;overflow:hidden;background:none;z-index:55}
.mf-in.jnx{font-size:clamp(12px,1.3cqw,14px)}
.jnx .mf-board{grid-template-columns:clamp(170px,24%,220px) minmax(0,1fr);overflow:hidden;align-content:stretch}
.jnx .mf-list,.jnx .mf-body{overflow-y:auto;min-height:0}
.jnx .mf-list{padding:34px .4em 1em .4em}
.jnx .mf-it{min-height:2.5em;padding:.15em .3em .15em 40px;font-size:15px;gap:.35em}
.jnx .mf-it .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jnx .mf-it[data-i="2"]{margin-top:.7em;border-top:1px dashed rgba(180,200,255,.4);border-radius:0 0 3px 3px;padding-top:.3em}   /* เส้นคั่นระหว่างแท็บกับรายชื่อตัวละคร */
.jnx .mf-body{padding:.9em 1.2em 1.2em;line-height:1.6;border-left:2px solid rgba(180,200,255,.3)}
.jnx .mf-body .sec{margin:.7em 0 .3em}
.jnx .jtxt{overflow-wrap:anywhere}

/* =========================================================
   UI-P5 — เมนูต่อสู้ธีมเดียวกับเฟรม mf (src/55-battle.js renderMenu) · ไม่ใช้ blur/backdrop-filter (ต้องเห็นสนามรบ + ประสิทธิภาพ)
   - ฟอนต์: ชื่อ = --font-title · ตัวหนังสือ = --font-ui · ตัวเลข = --font-num · สีทอง #ffdc8a · เส้นกรอบ #6f80d0 · มุม .kc บาง (--kc 28px) ที่มุมบนสองข้าง
   - เมนูย่อยแคสเคด: #menu (หลัก) คงขนาด · #submenu แผงข้างขวา (JS วาง left) · แถวหลักหรี่ · .ghost = รายละเอียดแถวหลักซ่อนแต่กินที่เท่าเดิม
   ========================================================= */
.menu{font-family:var(--font-ui);--kc:28px}
.menu .mh b{font-family:var(--font-title);font-weight:400;color:#ffdc8a;text-shadow:0 1px 0 #3a2a00}
.menu .boost,.menu .sr span,.menu .it>span+span,.menu .it>em{font-family:var(--font-num)}
.menu .boost button{font-family:var(--font-num)}
.menu .it.sel{color:#fff;background:linear-gradient(90deg,#1f3070,#3a52b0 65%,rgba(58,82,176,.25));box-shadow:inset 0 0 0 1px rgba(255,220,138,.55)}
.menu .it.sel::before{color:#ffdc8a}
.menu .mdet{border-color:rgba(111,128,208,.55)}
.menu .mhelp{color:#cfd8ff}
.menu::before,.menu::after{content:'';position:absolute;top:-30px;width:var(--kc);height:var(--kc);background:url(../assets/ui/ui_kanok.png) no-repeat 0 0/100% 100%;image-rendering:pixelated;pointer-events:none;opacity:.9}
.menu::before{left:-14px}
.menu::after{right:-14px;transform:scaleX(-1)}
#submenu{z-index:2}
#submenu .subscroll{height:11em;max-height:11em;overflow-y:auto;overflow-x:hidden}      /* ข้อ 1 (รอบ D): overflow ย้ายมาที่กล่องภายใน เพราะหัวแผง .mh ถูกดึงขึ้นขอบบนด้วย margin ลบ — ถ้า overflow อยู่ที่ #submenu หัวจะถูกตัดหาย */
#submenu::before,#submenu::after{display:none}
.menu.sub .it,.menu.sub .mhelp{opacity:.6}
.menu.sub .it.par{opacity:1}
#submenu.enter{animation:btSubIn .14s ease-out}
@keyframes btSubIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#submenu.enter{animation:none}}

/* ---- เมนูศึกขนาดคงที่ (ทุกโหมด) ----
   #menu = หัว + แถวคำสั่ง (แถวสูงตายตัว) + สล็อตช่วย 1 อัน · #submenu = แผงข้อมูลขวาของเมนู ชิดขอบล่างเดียวกัน กว้าง 24em · สูงเท่า #menu · เนื้อหาเกินเลื่อนใน .subscroll
   ห้ามมี transition ของ width/height/max-height · ไม่ใช้ backdrop-filter · เปลี่ยนแถว = เปลี่ยนเนื้อหาเท่านั้น (fade 90ms · ปิดตอน reduced-motion)
   ความสูง = 11.5em(เนื้อใน) + 56px(กรอบ 40 บน + 16 ล่าง) → 1280×720 (ฟอนต์ 16px) = 240px ≈ 33% ของจอ */
#menu,#submenu{box-sizing:border-box;font-size:clamp(11px,1.3cqw,16px);line-height:1.3;height:calc(11.5em + 56px);min-width:0}
#menu{width:22em}
#submenu{width:24em;left:calc(2.4% + 22em + 10px)}      /* ชิดขวาเมนูหลัก (#menu left 2.4% + กว้าง 22em) + ช่อง 10px = BT_SUB_GAP — CSS ล้วน ไม่พึ่ง offsetWidth ตอน render */
#menu .it{height:1.4em;padding-top:0;padding-bottom:0;gap:.5em;overflow:hidden;box-sizing:border-box}
#menu .it>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu .it>span+span,#menu .it>.chip,#menu .it>.pk{flex:none;white-space:nowrap}
#menu .it.ult{margin-top:0;padding-top:0;border-top:1px solid rgba(255,216,120,.35)}
#menu .it .uic,.menu .it img.ico{width:1.1em;height:1.1em;vertical-align:-.2em}
#menu .mh{margin-bottom:.45em}
#menu .mh b{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92em}
#menu .mh .boost{flex:0 0 auto;font-size:.66em;gap:.2em}
#menu .mh .boost button{min-width:2.2em;padding:0;text-align:center;line-height:1.1;font-size:1.25em;border-width:6px}
#menu .mfoot .mhelp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menu .mrows{min-height:8.5em}
#menu .mfoot{height:2.2em;overflow:hidden;margin-top:.2em}
#menu .mfoot .mhelp{margin:0;font-size:.72em;line-height:1.35;opacity:.85}
#menu .mfoot .mgd{margin:0;padding:.1em .45em;font-size:.72em;line-height:1.3;max-height:2.95em;overflow:hidden}
#menu.sub .mfoot .mhelp{opacity:.85}
#submenu .mdet{margin-top:.2em;min-width:0;font-size:.85em;line-height:1.4}
#submenu .it{min-height:1.5em;padding-top:.05em;padding-bottom:.05em;gap:.5em;line-height:1.3}
#submenu .it>span:first-child{min-width:0}
#submenu .it>span+span{flex:none;white-space:nowrap}
#submenu .it>.in,#submenu .ir>.in{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#submenu .it>.iq,#submenu .ir>.iq{flex:none;margin-left:auto;white-space:nowrap}
#submenu .ir{display:flex;align-items:center;gap:.5em;line-height:1.5}
#submenu .ir .ico{width:1.1em;height:1.1em;vertical-align:-.2em}
#submenu .subscroll{animation:btInfoFade .09s ease-out}
@keyframes btInfoFade{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#submenu .subscroll{animation:none}}
/* ไกด์สอนเล่น .pick: เส้นทองในกรอบ ไม่ฟุ้งออกนอกแถว (เดิม glow ล้นไปแถวข้าง ๆ ดูเหมือนแถวบนสุดถูกไฮไลต์ซ้อนกับลูกศร) · แถวที่เป็นทั้ง pick+sel = สีพื้น sel + กรอบทองหนา */
.menu .it.pick{background:rgba(255,216,120,.16);box-shadow:inset 0 0 0 2px #ffd878;animation:none}
.menu .it.pick.sel{background:linear-gradient(90deg,#1f3070,#3a52b0 65%,rgba(58,82,176,.25));box-shadow:inset 0 0 0 2px #ffd878}

/* ---- แถบทีมฝั่งขวาในศึก: รูปหน้าเล็กลง (HUD Octopath: 1.6em → 1.2em · ซ่อนแถบกรอบหนา) ---- */
.pp{padding:.25em .6em .3em 1.75em}
.pp .pic{left:.3em;width:1.2em;height:1.2em;border-width:1px}
/* มุมลายกนกเฉพาะตัวที่ถึงตา */
.pp.act::before,.pp.act::after{content:'';position:absolute;top:-5px;width:14px;height:14px;background:url(../assets/ui/ui_kanok.png) no-repeat 0 0/100% 100%;image-rendering:pixelated;pointer-events:none;opacity:.9}
.pp.act::before{left:-5px}.pp.act::after{right:-5px;transform:scaleX(-1)}

/* =========================================================
   HUD_MINIMAL — HUD เรียบแบบ Octopath (เจ้าของเกมสั่ง 8 ต.ค. · src/00-config.js ค่า HUD_MINIMAL / HUD)
   ทุกกฎผูกกับ #wrap.hudmin (JS hudApplyCss ใส่คลาสเมื่อ HUD_MINIMAL=true) → false = กลับไปใช้กฎด้านบนทั้งหมด
   ตัวแปร --hud-* (ขนาด/ความโปร่ง) ถูกตั้งจาก JS (HUD ใน 00-config.js) · ค่าหลัง var( , ) คือค่าตั้งต้นเมื่อ JS ยังไม่ตั้ง (ต้องตรงกับ HUD)
   ซ่อนด้วย opacity/visibility เท่านั้น ไม่ลบ DOM · หน้าต่างเต็มจอ (.mfopen) ยังซ่อน HUD ตามกฎเดิมด้านบน (ห้ามแก้ visibility ของ HUD ที่ถูกซ่อน)
   ========================================================= */
/* 3) ป้ายสถานที่: โผล่ชั่วคราว (JS hudTick ตั้ง opacity ตามเวลา hudFade) · ไม่เลื่อนเข้า · พื้นโปร่งขึ้น */
#wrap.hudmin .loc,#wrap.hudmin .loc.show{animation:none;transform:none;font-size:clamp(12px,1.9cqw,20px);padding:.35em 1.8em .35em 1.2em;background:linear-gradient(90deg,rgba(10,14,48,.55),rgba(10,14,48,.55) 70%,transparent)}
/* 4) แถบคีย์ลัด: JS hudTick ตั้ง opacity · ซ่อนในศึก (เฉพาะแถบคีย์ลัด .keys — ข้อความแจ้งสั้นยังโชว์ได้) */
#wrap.hudmin .help,#wrap.hudmin .help.show{animation:none;background:rgba(10,14,48,.5)}
#wrap.hudmin .bt.on ~ .help.keys{visibility:hidden}
/* 5) ปุ่มลัด: เหลือ "เมนู Esc" ปุ่มเดียว เล็กและจาง · ที่เหลือซ่อนด้วย opacity/visibility (DOM/ตัวจัดการคลิกอยู่ครบ · คีย์ลัดบนคีย์บอร์ดใช้ได้เหมือนเดิม) */
#wrap.hudmin .statbtn:not(.menubtn){opacity:0;visibility:hidden;pointer-events:none}
#wrap.hudmin .menubtn{right:1.2%;bottom:calc(2.6% + env(safe-area-inset-bottom,0px));font-size:clamp(10px,1.15cqw,13px);padding:.2em .7em;background:rgba(10,14,48,.5);border-color:rgba(255,220,138,.4);opacity:var(--hud-btn-alpha,.5);transition:opacity .2s}
#wrap.hudmin .menubtn:hover,#wrap.hudmin .menubtn:focus-visible{opacity:1}
#wrap.hudmin:has(.dlg.on) .menubtn{opacity:0;pointer-events:none}
/* 6) มินิแมป: เล็กลง 35% · โปร่งตอนนิ่ง (ชี้เมาส์ = เต็ม) · JS ซ่อนตอนคุย/ร้าน/เมนู/ศึก/คัตซีน (hudMiniShow) */
#wrap.hudmin .mini{width:calc(clamp(96px,17cqmin,150px) * var(--hud-mini-scale,.65));height:calc(clamp(96px,17cqmin,150px) * var(--hud-mini-scale,.65));border-width:1px;opacity:var(--hud-mini-alpha,.6);transition:opacity .2s}
#wrap.hudmin .mini:hover{opacity:1}
/* 7) นาฬิกา/ทอง: เล็กลงเล็กน้อย · โปร่งตอนนิ่ง · เต็มชั่วคราวเมื่อค่าเปลี่ยน (.clkon จาก JS hudClockNote — ห้ามใช้ชื่อ .flash เพราะชนกับแฟลชเต็มจอ) */
#wrap.hudmin .clock{font-size:clamp(11px,1.6cqw,16px)}
#wrap.hudmin #clock{opacity:var(--hud-clock-alpha,.65);transition:opacity .4s}
#wrap.hudmin #clock.clkon{opacity:1}
@media (prefers-reduced-motion:reduce){#wrap.hudmin #clock,#wrap.hudmin .menubtn,#wrap.hudmin .mini{transition:none}}
/* 1) แผงลำดับเทิร์นในศึก: แถบเรียวสูง ~40px (1280×720) · ไม่มีหัวข้อ (เป็น title) · กรอบบางโปร่ง แทนกรอบกนกหนา · ไอคอนเล็กลง ~40% */
#wrap.hudmin .tbar{top:calc(3.5% + env(safe-area-inset-top,0px));padding:2px 6px;border:1px solid rgba(234,230,255,.32);border-image:none;border-radius:4px;background:rgba(12,20,64,.5);box-shadow:none}
#wrap.hudmin .tbar .tl{align-items:flex-start;gap:3px}
#wrap.hudmin .ti{width:clamp(14px,1.56cqw,20px);height:clamp(14px,1.56cqw,20px);padding:10%}
#wrap.hudmin .tc{gap:1px}
#wrap.hudmin .tc.cur .ti{width:clamp(17px,1.9cqw,24px);height:clamp(17px,1.9cqw,24px);padding:10%;filter:drop-shadow(0 0 4px rgba(255,220,138,.8))}
#wrap.hudmin .tc.cur::after{display:none}
#wrap.hudmin .tc .sv{font-size:clamp(8px,.78cqw,10px);line-height:10px}
#wrap.hudmin .tbar .sep{width:1px;margin:0 2px;background:rgba(255,255,255,.35)}
/* 2) เมนูศึกซ้ายล่าง + แผงข้อมูลขวา: เตี้ยลง ~15% (240px → 204px ที่ 1280×720) · แถว 1.4em → 1.2em · ยังคงที่ทุกโหมด ไม่ยืดหด
   ความสูง = 9.5em (เนื้อใน) + 52px (กรอบ 40 บน + 16 ล่าง − หัวแผงที่ดึงขึ้น 4px) · เนื้อใน = หัว .3em + 6 แถว 7.2em + บรรทัดช่วย 1.9em */
#wrap.hudmin #menu,#wrap.hudmin #submenu{height:calc(9.5em + 52px);bottom:calc(3% + env(safe-area-inset-bottom,0px))}      /* ชิดล่างขึ้นอีก (เดิม 5%) ให้ขอบบนกล่องต่ำกว่าเท้ามอนสเตอร์แนวหน้า — คู่กับ HUD.battleCamUp ใน 00-config.js */
#wrap.hudmin #menu .it{height:1.2em}
#wrap.hudmin #menu .mh,#wrap.hudmin #submenu .mh{margin-bottom:.3em}
#wrap.hudmin #menu .mrows{min-height:7.2em}
#wrap.hudmin #menu .mfoot{height:1.9em;margin-top:0}
#wrap.hudmin #submenu .subscroll{height:9.1em;max-height:9.1em}
#wrap.hudmin #submenu .mdet{font-size:.8em;line-height:1.28}      /* แผงข้อมูลเตี้ยลง → ตัวอักษรกระชับขึ้นเล็กน้อยให้เห็นรายละเอียดท่า/จุดอ่อนครบกว่าเดิมโดยไม่ต้องเลื่อน */
#wrap.hudmin #submenu .mdet .sr{gap:.5em}

/* =========================================================
   หน้าต่างเต็มจอ (.mf/.stat) ซ้อนบนศึก/โลก: ซ่อน HUD ที่อยู่ใต้ (กันตัวหนังสือซ้อน/เห็นทะลุ)
   - JS: mfShow/mfHide (src/68-menu.js) ใส่/ถอดคลาส .mfopen บน #wrap (ตัวนับ) · :has(.stat.on) เป็นตัวสำรองสำหรับหน้าที่เปิดด้วย .on ตรง ๆ (#areamap #slots)
   - ใช้ visibility:hidden (layout คงอยู่ → eldPlace วางป้ายศัตรูต่อได้ · HUD ที่ซ่อนไม่รับเมาส์) ไม่ใช้ display:none
   - z-index: .mf 52 / .stat 50+ สูงกว่า HUD ศึกทุกชั้น (.party 2 · #submenu 2 · #ultcut 6) และนาฬิกา (auto)
   ========================================================= */
#wrap.mfopen .bt,
#wrap.mfopen #tbar,
#wrap.mfopen #party,
#wrap.mfopen .autowrap,
#wrap.mfopen #elabels,
#wrap.mfopen #cursor,
#wrap.mfopen #menu,
#wrap.mfopen #submenu,
#wrap.mfopen #banner,
#wrap.mfopen #clock,
#wrap.mfopen .clock,
#wrap.mfopen #loc,
#wrap.mfopen .loc,
#wrap.mfopen .mini,
#wrap.mfopen .statbtn,
#wrap.mfopen #bubbles,
#wrap.mfopen .pickup,
#wrap.mfopen .hint,
#wrap:has(.stat.on) .bt,
#wrap:has(.stat.on) #tbar,
#wrap:has(.stat.on) #party,
#wrap:has(.stat.on) .autowrap,
#wrap:has(.stat.on) #elabels,
#wrap:has(.stat.on) #cursor,
#wrap:has(.stat.on) #menu,
#wrap:has(.stat.on) #submenu,
#wrap:has(.stat.on) #banner,
#wrap:has(.stat.on) #clock,
#wrap:has(.stat.on) .clock,
#wrap:has(.stat.on) #loc,
#wrap:has(.stat.on) .loc,
#wrap:has(.stat.on) .mini,
#wrap:has(.stat.on) .statbtn,
#wrap:has(.stat.on) #bubbles,
#wrap:has(.stat.on) .pickup,
#wrap:has(.stat.on) .hint{visibility:hidden}
/* แถบเลื่อนในกรอบหน้าต่าง: บาง ไม่ทับเนื้อหา (เนื้อหายาวเกินสเตจเลื่อนในกรอบ ไม่ใช่ที่สเตจ) */
.stat,.mf-in,.mf-board,.mf-list,.mf-body,.epc,.tmx-col,#wmap .wmx-card{scrollbar-width:thin;scrollbar-color:#6f80d0 rgba(8,10,30,.6)}

/* ═══ อุปกรณ์สัมผัส — มือถือ/แท็บเล็ตแนวนอน (11 ต.ค. · src/70-touch.js · ด่านใน index.html) ═══
   ทุกกฎผูกกับ html.touchdev / #wrap.touch / #touchUI (ใส่ให้เฉพาะ window.TOUCH_UI) → PC ไม่เปลี่ยนหน้าตา
   --sa-* = safe-area (รอยบาก/แถบโฮม) ให้ JS อ่าน (stageSafe ใน 00-config.js) · ปุ่มใน #touchUI เป็นพิกเซลจอจริง (ไม่ถูกย่อตามสเตจ) */
:root{--sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px);--sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px)}
html.touchdev,html.touchdev body{touch-action:pan-x pan-y;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.touchdev #gl{touch-action:none}
#touchUI .tc-btn,#touchUI .tc-stick{position:absolute;display:none;box-sizing:border-box;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
#touchUI .tc-btn{align-items:center;justify-content:center;flex-direction:column;border-radius:50%;color:#f3e6c4;background:rgba(10,14,48,.55);border:2px solid rgba(255,220,138,.55);box-shadow:0 2px 8px rgba(0,0,0,.45);font-family:var(--font-ui,sans-serif);line-height:1;opacity:.8;transition:opacity .12s,transform .08s}
#touchUI .tc-btn b{font-size:22px;font-weight:700}
#touchUI .tc-btn small{font-size:11px;margin-top:2px;opacity:.85}
#touchUI .tc-btn.down{opacity:1;transform:scale(.92);background:rgba(58,82,176,.85);border-color:#ffdc8a}
#touchUI .tc-ok{background:rgba(120,90,20,.6);border-color:rgba(255,220,138,.85)}
#touchUI .tc-arr b{font-size:18px}
#touchUI .tc-stick{border-radius:50%;background:radial-gradient(circle,rgba(10,14,48,.25),rgba(10,14,48,.5));border:2px solid rgba(220,225,255,.35);opacity:.55;align-items:center;justify-content:center}
#touchUI .tc-stick.held{opacity:.9;border-color:rgba(255,220,138,.7)}
#touchUI .tc-knob{display:block;width:44%;height:44%;border-radius:50%;background:rgba(243,230,196,.55);border:2px solid rgba(255,220,138,.8);box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
#touchUI[data-kind=overlay] .tc-btn{opacity:.6}
/* ตัวอักษรเล็กสุดอ่านออกบนจอเล็ก (สเตจถูกย่อ ~0.5 เท่า) — ขยายเฉพาะข้อความหลัก · เลย์เอาต์สเตจเดิม */
#wrap.touch #menu,#wrap.touch #submenu{font-size:19px}
#wrap.touch .dlg{font-size:27px}
#wrap.touch .hint{font-size:21px}
#wrap.touch .help{font-size:19px}
#wrap.touch .pp{font-size:15px}
#wrap.touch .mf-hint{font-size:19px}
#wrap.touch .menubtn{display:none}      /* ปุ่ม ☰ ของ #touchUI แทน (ตอนเดิน = เปิดเมนูหลัก) */
/* ─── โหมดอ่านง่ายบนอุปกรณ์สัมผัส (12 ต.ค. · เจ้าของเกมสั่งก่อนขึ้นเว็บ) ───
   เป้า (จอ 844×390 สเกลสเตจ ≈ .54): ตัวอักษรที่ต้องอ่าน ≥ 11px จริง → สเตจ ≥ 21px (--tcf) · แถว/ปุ่มที่แตะได้ ≥ 40px จริง → สเตจ ≥ 78px (--tct)
   วิธี: ลูกหลานทุกตัวในหน้าต่างเต็มจอ/ศึก/จอโหลด ใช้ font-size:max(--tcf,1em) = ไม่เล็กกว่าพ่อแม่และไม่ต่ำกว่าพื้น (ยกเว้นหัวเรื่อง/ไอคอนที่ตั้งใจให้ใหญ่ — อยู่ใน :where จึงไม่เพิ่ม specificity)
        + แถว/ปุ่มที่แตะได้ min-height --tct + ลดคอลัมน์/ซ่อนข้อมูลรอง (ป้ายปุ่มคีย์บอร์ด · แผงทีมที่ซ้ำกับรายการซ้าย · SPD ในแถบลำดับเทิร์น) + เลื่อนได้แทนการตัดข้อความ
   วัดจริง: สคริปต์ CDP วัด getComputedStyle × สเกล ต่อหน้า (ผลใน RUNBOOK M11) · กฎทั้งหมดผูก #wrap.touch / html.touchdev (PC ไม่เปลี่ยน) */
#wrap.touch,html.touchdev .boot{--tcf:21px;--tct:78px}      /* 78 × สเกล .52–.54 (844×390) = 40.6–42px จริง (74 เดิมได้ 38.9px บางปุ่ม) */
#wrap.touch :is(#mainmenu,#status,#shop,#team,#wmap,#areamap,#journal,#eqPick,#skillPick,#mfConfirm,#slots,#result,#tut,#menu,#submenu,#party,#elabels,#dlg,#hint,#toast,.autowrap) :not(:where(svg,svg *,h2,h3,.mf-title,.mf-bt,.mfc-t,.wmx-title,.wmx-ch,.gtube,.ic,.uic,.ico,canvas,img)){font-size:max(var(--tcf),1em)}
#wrap.touch :is(#mainmenu,#status,#shop,#team,#wmap,#areamap,#journal,#eqPick,#skillPick,#mfConfirm,#slots,#result,#tut,#submenu) :is(button,.mf-it,.mf-pc,[data-i],[data-p],[data-c]){min-height:var(--tct)}
#wrap.touch :is(.mf-x,.mf-x2,.autobtn,.tut button) small,#wrap.touch .mf-kr,#wrap.touch .tbar .sv,#wrap.touch .el .espd{display:none}
/* หน้าเต็มจอที่มีรายการตัวละคร/ตารางของตัวเอง: ซ่อนแผงทีมขวา (ซ้ำ) ให้เนื้อหากว้างขึ้น · เมนูหลักคงแผงทีมไว้ (ใช้เลือกตัวละครตอนจัดทักษะ/วิชา) */
#wrap.touch :is(#status,#shop,#journal) .mf-party{display:none}
#wrap.touch :is(#status,#shop,#journal) .mf-in{grid-template-areas:"head top" "board board" "hint hint"}
#wrap.touch .mf-pc .bar .tr{min-width:2.5em}
#wrap.touch .mf-pc .pn{flex-wrap:wrap}
#wrap.touch .stx .sn,#wrap.touch .eqx .sn{font-size:30px}
#wrap.touch :is(.stx,.eqx) .sn *{font-size:var(--tcf)}
#wrap.touch :is(.stx,.eqx) .mf-board{grid-template-columns:clamp(200px,24%,260px) minmax(0,1fr)}
/* ศึก: เมนูคำสั่ง 2 คอลัมน์ × 3 แถว (แถวละ --tct) + คอลัมน์ BOOST −/+ ด้านขวา · ซับเมนูชิดขวา เลื่อนได้ · การ์ดทีมกว้างขึ้น */
#wrap.touch #menu,#wrap.touch #submenu{height:auto;bottom:calc(3% + env(safe-area-inset-bottom,0px))}
#wrap.touch #menu{width:480px}
#wrap.touch #menu .mh .boost{position:absolute;right:0;top:0;width:92px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 0;white-space:normal;text-align:center;line-height:1.2}
#wrap.touch #menu .mh .boost .uic{display:none}
#wrap.touch #menu .mh .boost button{width:100%;min-height:var(--tct);font-size:30px}
#wrap.touch #menu .mrows{margin-right:100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;min-height:0}
#wrap.touch #menu .it{height:var(--tct);padding-left:1.2em}
#wrap.touch #menu .it>span:first-child{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25}
#wrap.touch #menu .it.ult>span+span{display:none}
#wrap.touch #menu .mfoot{height:auto;margin-right:100px}
#wrap.touch #menu .mfoot .mhelp{display:none}
#wrap.touch #menu .mfoot .mgd{max-height:none}
#wrap.touch #submenu{left:calc(2.4% + 490px);width:400px}
#wrap.touch #submenu .subscroll{height:auto;max-height:calc(3 * var(--tct) + 16px)}
#wrap.touch #submenu .it{min-height:var(--tct)}
#wrap.touch #submenu .it>.in,#wrap.touch #submenu .ir>.in{white-space:normal}
#wrap.touch .party{min-width:27%;gap:4px}      /* กว้างขั้นต่ำชนะ style.width ที่ partyFit ตั้ง (19–22%) */
#wrap.touch .pp{min-height:var(--tct);padding-left:2em;display:flex;flex-direction:column;justify-content:center}
#wrap.touch .pp .bar .tr{min-width:1.6em}
#wrap.touch .el{max-width:320px}
#wrap.touch .el .wk .chip{padding:0 .2em;margin-left:.1em}
#wrap.touch .autowrap{gap:6px}
#wrap.touch .autobtn{min-height:var(--tct)}
#wrap.touch .rc{max-width:86%}
/* จอโหลด: ข้อความใต้แถบไม่ตัดบรรทัดทิ้ง (2 บรรทัด) */
html.touchdev .boot .boottitle{font-size:26px}
html.touchdev .boot .bootinfo{font-size:var(--tcf);height:28px;line-height:28px}
html.touchdev .boot .bootbox{top:500px}
html.touchdev .boot .boottip{top:628px;height:auto;max-height:84px;font-size:var(--tcf);line-height:1.45;padding-top:6px;padding-bottom:6px;white-space:normal;text-overflow:clip}
/* ป้ายศัตรู (แตะเลือกเป้าตอนเล็ง): ขยายพื้นที่แตะด้วย ::after โปร่งใส (ไม่ขยายกล่อง → ไม่ดันป้ายชนกัน) ≥ 40px จริง */
#wrap.touch .el::after{content:'';position:absolute;left:-6px;right:-6px;top:-8px;bottom:-8px}
/* แผนที่โลก: ชื่อจุดในแผนที่ย่อเหลือ ~3–5px จริงบนจอเล็ก อ่านไม่ได้ → ซ่อนชื่อจุดที่ไม่ได้เลือก · ชื่อจุดที่เลือกขยายเป็น ≈ 11px จริง (ชื่อ/รายละเอียดเต็มอยู่ในการ์ดขวา) */
#wrap.touch #wmap .wmx-svg .nm:not(.sel){display:none}
#wrap.touch #wmap .wmx-svg .nm.sel{font-size:10px;stroke-width:2.2px;opacity:1}
/* แถบทีมในศึก: ซ่อน Lv (ข้อมูลรอง · ดูในหน้าสถานะ) ให้ชื่อ + ป้ายหน้า/หลัง + BP พอดีการ์ด ไม่ถูกตัด */
#wrap.touch .pp .lv{display:none}
/* ร้าน: ปุ่มหมวดซ้าย (ไอคอน + ชื่อ) ไม่ถูกบีบจนชื่อหมวดล้นขอบ — ไม่หด ไอคอนเล็กลง (หมวดเกินเลื่อนในคอลัมน์) */
#wrap.touch .shx-ct{flex:none;padding:.2em .1em}
#wrap.touch .shx-ct .ic{font-size:28px;line-height:1.1}