/* แบบ 3 — มาตรวัด: หน้าตาแบบแผง UI ในเกม · เลื่อนหน้า = มาตรวัดการกลืนกินขึ้น */
body{background:#0E0A0D;color:var(--bone);overflow-x:hidden}
.wrap{width:min(1140px,100% - 48px);margin-inline:auto}
section{position:relative;padding:100px 0}
@media(min-width:1100px){.wrap{translate:26px 0}}

/* แผงมีมิติ: ขอบสว่างบน เงาล่าง (แสงมาจากบน) */
.panel{position:relative;border-radius:14px;background:linear-gradient(180deg,#2A2420,#1B1714);border:1px solid #8c7a5f55;box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -4px 0 #0006,0 24px 50px #000a}
.panel.in{background:linear-gradient(180deg,#151110,#1B1714);box-shadow:inset 0 3px 8px #000c,inset 0 -1px 0 #fff1;border-color:#0008}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.22em;padding:6px 14px 6px 10px;border-radius:6px;background:#1B1714;border:1px solid #8c7a5f55;color:var(--bone-mid)}
.kicker i{width:9px;height:15px;background:var(--crystal);clip-path:polygon(50% 0,100% 35%,50% 100%,0 35%)}
h2{font-size:clamp(30px,4.4vw,54px);line-height:1.14;font-weight:700;margin:18px 0 14px}
.lead{color:var(--bone-mid);font-size:18px;max-width:58ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:10px;font-weight:700;font-size:16px;border:1px solid transparent;transition:transform .12s,filter .15s}
.btn svg{width:18px;height:18px}
.btn.pri{background:linear-gradient(180deg,var(--bone-hi),var(--bone));color:var(--ink);box-shadow:inset 0 1px 0 #fff9,inset 0 -4px 0 #0003,0 10px 26px #0009}
.btn.sec{background:linear-gradient(180deg,#9A886C,#8C7A5F);color:var(--ink);box-shadow:inset 0 1px 0 #fff4,inset 0 -4px 0 #0004}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0006}

/* มาตรวัดการกลืนกิน — ตามการเลื่อนหน้า */
.vein{position:fixed;left:22px;top:50%;translate:0 -50%;z-index:60;display:flex;flex-direction:column;align-items:center;gap:10px;width:46px}
.vein .gem{width:26px;height:38px;background:linear-gradient(160deg,var(--crystal-hi),var(--crystal) 55%,#2c6f69);clip-path:polygon(50% 0,100% 30%,66% 100%,26% 88%,0 32%);transition:background .5s,clip-path .5s}
.vein .tube{position:relative;width:14px;height:min(46vh,380px);border-radius:8px;background:#0b0809;box-shadow:inset 0 2px 6px #000,0 0 0 1px #8c7a5f66,0 1px 0 1px #fff1}
.vein .fill{position:absolute;inset:auto 2px 2px;height:calc(var(--p,0)*1% - 4px);min-height:0;border-radius:6px;background:linear-gradient(0deg,#3f8f86,var(--crystal) 60%,var(--crystal-hi));box-shadow:inset 2px 0 0 #fff4;transition:background .5s}
.vein .mark{position:absolute;left:-7px;right:-7px;bottom:80%;height:2px;background:var(--bone-dark)}
.vein .mark::after{content:"80";position:absolute;left:calc(100% + 4px);top:-8px;font-size:11px;font-weight:700;color:var(--bone-dark)}
.vein b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.vein small{font-size:10px;letter-spacing:.12em;color:var(--bone-dark);writing-mode:vertical-rl;margin-top:2px}
body.over .vein .gem{background:linear-gradient(160deg,#d9c6ff,var(--devour) 45%,var(--devour-deep));clip-path:polygon(40% 0,100% 22%,80% 58%,96% 100%,30% 84%,0 40%)}
body.over .vein .fill{background:linear-gradient(0deg,var(--devour-deep),var(--devour) 60%,#d9c6ff)}
body.over .vein b{color:#cdb6ff}
/* เกิน 80% ขอบจอมืด — เหมือนในเกม */
.edge{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;transition:opacity .8s;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,#24103dcc 85%,#0b0410 100%)}
body.over .edge{opacity:1}
@media(max-width:1099px){.vein{left:auto;right:10px;top:auto;bottom:14px;translate:none;flex-direction:row;width:auto;padding:8px 12px;border-radius:12px;background:#1b1714ee;border:1px solid #8c7a5f66;box-shadow:0 10px 24px #000a}
  .vein .tube{width:84px;height:12px}.vein .fill{inset:2px auto 2px 2px;height:auto;width:calc(var(--p,0)*1% - 4px)}
  .vein .mark{left:80%;right:auto;bottom:-5px;top:-5px;width:2px;height:auto}.vein .mark::after{display:none}
  .vein .gem{width:16px;height:24px}.vein small{display:none}}

/* แถบบน */
.nav{position:fixed;inset:14px 0 auto;z-index:58;pointer-events:none}
.nav .bar{pointer-events:auto;display:flex;align-items:center;gap:8px;height:58px;padding:0 10px 0 18px;border-radius:14px;background:linear-gradient(180deg,#2a2420f2,#1b1714f2);border:1px solid #8c7a5f55;box-shadow:inset 0 1px 0 #fff2,inset 0 -3px 0 #0006,0 14px 34px #000a;backdrop-filter:blur(8px)}
.nav img{height:26px;margin-right:auto}
.nav a.t{padding:8px 14px;border-radius:8px;font-weight:600;font-size:15px;color:var(--bone-mid)}
.nav a.t:hover{background:#0006;color:var(--bone-hi);box-shadow:inset 0 2px 5px #000a}
.nav .btn{padding:9px 18px;font-size:14px;margin-left:6px}
@media(max-width:860px){.nav a.t{display:none}}

/* hero */
.hero{padding:0;min-height:min(100svh,max(720px,60vw));display:grid;align-items:end;isolation:isolate;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-2;background:url(img/hero-violet.webp?v=20261008b) center 40%/cover;animation:pan 36s ease-in-out infinite alternate}
@keyframes pan{from{transform:scale(1.04)}to{transform:scale(1.14) translateX(-2%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0e0a0d99 0,#0e0a0d33 30%,#0e0a0d99 62%,#0E0A0D 96%)}
.hero .wrap{padding:150px 0 70px;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end}
.hero-logo{width:min(640px,100%);margin:0 0 4px -14px;filter:drop-shadow(0 16px 36px #000d)}
.hero .th{letter-spacing:.55em;font-weight:600;color:var(--bone-mid);font-size:15px}
.hero h1{font-size:clamp(28px,3.8vw,48px);line-height:1.18;font-weight:700;margin:22px 0 12px;text-wrap:balance}
.hero h1 em{font-style:normal;color:#d9c6ff;text-shadow:0 0 30px #9b6fe0}
.hero p{color:var(--bone);font-size:18px;max-width:52ch;margin-bottom:28px;text-shadow:0 1px 8px #000}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.room{padding:20px}
.room h3{font-size:15px;letter-spacing:.14em;color:var(--bone-mid);display:flex;justify-content:space-between;margin-bottom:14px}
.room h3 span{color:var(--bone-hi)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{aspect-ratio:1/1.12;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(180deg,#151110,#211c18);box-shadow:inset 0 3px 8px #000c;border:1px solid #0008;display:grid;place-items:center;color:#5c5245}
.slot img{position:absolute;inset:0;width:100%;height:150%;object-fit:cover;object-position:top}
.slot svg{width:22px;height:22px}
.slot.me{outline:2px solid var(--bone);outline-offset:-2px}
.room .st{margin-top:14px;display:flex;justify-content:space-between;font-size:13.5px;color:var(--bone-mid)}
.room .st b{color:var(--bone-hi)}
/* สถานะ server สด ใต้แผงห้อง — แผงบุ๋ม (ข้อมูล ไม่ใช่ปุ่ม) */
.side{display:grid;gap:12px}
.live{padding:14px 18px 16px}
.lv-h{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--bone-mid)}
.lv-s{display:inline-flex;align-items:center;gap:9px;letter-spacing:.04em;color:var(--bone-mid)}
/* รูปทรงกำกับสถานะ: พร้อม = ผลึกทึบ · กำลังตรวจ = ผลึกโปร่ง · ติดต่อไม่ได้ = สี่เหลี่ยมโปร่ง */
.lv-s i{width:10px;height:16px;background:var(--bone-dark);clip-path:polygon(50% 0,100% 35%,50% 100%,0 35%,50% 0,50% 22%,22% 38%,50% 78%,78% 38%,50% 22%)}
.live[data-state=ok] .lv-s{color:var(--crystal-hi)}
.live[data-state=ok] .lv-s i{background:var(--crystal);clip-path:polygon(50% 0,100% 35%,50% 100%,0 35%);filter:drop-shadow(0 0 6px #6fc0b4aa)}
.live[data-state=off] .lv-s i{width:12px;height:12px;background:none;clip-path:none;border:2px solid var(--bone-mid);border-radius:2px}
.live:not([data-state=wait]) .s-wait,.live:not([data-state=ok]) .s-ok,.live:not([data-state=off]) .s-off{display:none}
.lv-n{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #8c7a5f33}
.lv-n b{display:block;font-size:30px;line-height:1.1;font-weight:700;color:var(--bone-hi);font-variant-numeric:tabular-nums}
.lv-n small{font-size:13px;color:var(--bone-mid)}
.live[data-state=off] .lv-n b{color:var(--bone-dark)}
@media(max-width:940px){.hero .wrap{grid-template-columns:1fr;padding-top:120px}.side{max-width:420px}}

/* กฎโลก */
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.rule{padding:26px 24px 28px}
.rule .n{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--bone-dark);margin-bottom:16px}
.rule .n i{width:22px;height:34px;clip-path:polygon(50% 0,100% 30%,66% 100%,26% 88%,0 32%);background:linear-gradient(160deg,var(--crystal-hi),var(--crystal) 55%,#2c6f69)}
.rule.dv .n i{background:linear-gradient(160deg,#d9c6ff,var(--devour) 45%,var(--devour-deep));clip-path:polygon(40% 0,100% 22%,80% 58%,96% 100%,30% 84%,0 40%)}
.rule h3{font-size:23px;margin-bottom:8px}
.rule p{color:var(--bone-mid);font-size:16px}
@media(max-width:860px){.rules{grid-template-columns:1fr}}

/* เลือกตัวละคร */
.pick{display:grid;grid-template-columns:230px 1fr;gap:18px;margin-top:44px;padding:18px}
.tabs{display:grid;gap:10px;align-content:start}
.tab{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;padding:8px;border-radius:10px;text-align:left;background:linear-gradient(180deg,#322B25,#241F1B);border:1px solid #8c7a5f44;box-shadow:inset 0 1px 0 #fff2,inset 0 -3px 0 #0006;transition:transform .12s}
.tab:hover{transform:translateX(3px)}
.tab .th{width:64px;height:64px;border-radius:8px;overflow:hidden;background:#151110;box-shadow:inset 0 2px 6px #000}
.tab .th img{width:100%;transform:scale(1.5);transform-origin:50% 8%}
.tab b{display:block;font-size:19px;line-height:1.1}
.tab span{font-size:13px;color:var(--bone-mid)}
.tab[aria-selected=true]{background:linear-gradient(180deg,var(--bone-hi),var(--bone));color:var(--ink);border-color:var(--bone-hi)}
.tab[aria-selected=true] span{color:#4a3f31}
.stage{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;min-height:520px;overflow:hidden;border-radius:10px}
.stage .fig{position:relative;display:grid;place-items:end center;overflow:hidden}
.stage .fig::before{content:"";position:absolute;left:50%;bottom:7%;width:68%;aspect-ratio:3/1;translate:-50% 0;border-radius:50%;background:radial-gradient(#6fc0b455,transparent 68%)}
.stage .fig::after{content:"";position:absolute;left:50%;top:-10%;width:60%;height:120%;translate:-50% 0;background:linear-gradient(180deg,#e3d6bb1f,transparent 75%);clip-path:polygon(34% 0,66% 0,100% 100%,0 100%)}
.stage .fig img{position:relative;z-index:1;height:500px;width:auto;max-width:none;filter:drop-shadow(0 18px 18px #000b);animation:pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.sheet{padding:30px 30px 30px 6px;display:flex;flex-direction:column;justify-content:center}
.sheet .en{font-size:13px;letter-spacing:.34em;color:var(--bone-dark);font-weight:700}
.sheet h3{font-size:clamp(40px,5vw,64px);line-height:1}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 14px}
.chips span{padding:4px 12px;border-radius:6px;font-size:13.5px;font-weight:600;background:#151110;box-shadow:inset 0 2px 4px #000a;color:var(--bone)}
.sheet p{color:var(--bone-mid);margin-bottom:20px}
@media(max-width:940px){.pick{grid-template-columns:1fr}.tabs{grid-template-columns:repeat(4,1fr)}.tab{grid-template-columns:1fr;justify-items:center;text-align:center;padding:8px 4px}.tab span{display:none}.tab b{font-size:15px}.tab .th{width:52px;height:52px}
  .stage{grid-template-columns:1fr}.stage .fig img{height:340px}.sheet{padding:8px 16px 22px}}

/* แผนที่โซน */
.map{margin-top:44px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zn{position:relative;min-height:250px;border-radius:10px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;border:1px solid #0008}
.zn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s}
.zn:hover img{transform:scale(1.06)}
.zn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0e0a0d22,#0e0a0df0 82%);box-shadow:inset 0 3px 10px #000c}
.zn .t{padding:20px 22px;width:100%}
.zn .hd{display:flex;align-items:center;gap:12px}
.zn .ic{width:44px;height:44px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--c);color:var(--ink);box-shadow:inset 0 1px 0 #fff6,inset 0 -3px 0 #0004}
.zn .ic svg{width:24px;height:24px}
.zn small{font-size:12px;letter-spacing:.2em;color:var(--bone-mid);font-weight:700}
.zn h3{font-size:25px;line-height:1.1}
.zn p{margin-top:10px;color:var(--bone);font-size:15.5px;max-width:44ch}
@media(max-width:860px){.map{grid-template-columns:1fr}}

/* เกมเพลย์ */
.shots{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:14px;margin-top:44px}
.shots figure{border-radius:12px;overflow:hidden;border:1px solid #8c7a5f55;box-shadow:0 20px 44px #000a}
.shots figure:first-child{grid-row:1/3}
.shots img{width:100%;height:100%;object-fit:cover}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.feat li{padding:20px}
.feat svg{width:38px;height:38px;padding:8px;border-radius:8px;background:#151110;box-shadow:inset 0 2px 5px #000a;color:var(--bone-hi);margin-bottom:12px}
.feat b{display:block;font-size:16.5px}
.feat span{font-size:14.5px;color:var(--bone-mid)}
@media(max-width:940px){.shots{grid-template-columns:1fr;grid-template-rows:none}.shots figure:first-child{grid-row:auto}.feat{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.feat{grid-template-columns:1fr}}

/* พาร์ตเนอร์ */
#partners{padding:70px 0}

/* ปิดท้าย */
.end{text-align:center;padding:130px 0 110px;isolation:isolate;overflow:hidden}
.end::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0E0A0D,#24103d99 45%,#0E0A0D),url(img/core-floating.webp?v=20261008b) center/cover}
.end img{width:min(520px,82%);margin:0 auto 6px}
.end h2 span{color:#d9c6ff;text-shadow:0 0 34px #9b6fe0}
.end p{color:var(--bone);margin:0 auto 30px;max-width:46ch}
footer{position:relative;z-index:56;border-top:1px solid #8c7a5f33;padding:26px 0;font-size:13px;color:#968A76;background:#0E0A0D}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* สองภาษา — ซ่อนภาษาที่ไม่ได้เลือก */
html[data-lang=th] body [lang=en],html[data-lang=en] body [lang=th]{display:none!important}
.lang{display:flex;padding:3px;border-radius:9px;background:#0b0809;box-shadow:inset 0 2px 5px #000c,0 1px 0 #fff1;margin-left:6px}
.lang button{border:0;background:none;padding:6px 11px;border-radius:7px;font-weight:700;font-size:13px;color:var(--bone-mid)}
.lang button[aria-pressed=true]{background:linear-gradient(180deg,var(--bone-hi),var(--bone));color:var(--ink);box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 0 #0003}
/* ยังไม่เปิดให้กด — สีปุ่มปิดตาม CI (#968A76 บน #241F18) */
.soon{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:10px;font-weight:700;font-size:16px;background:#241F18;color:#968A76;border:1px dashed #8c7a5f88;cursor:default}
.soon svg{width:18px;height:18px}
.nav .soon{padding:8px 14px;font-size:13px;margin-left:6px}
@media(max-width:480px){.nav .soon{display:none}}
/* แผ่นตัวละคร: ระยะ + คอมโบ */
.rows{display:grid;gap:12px;margin-top:6px;padding-top:18px;border-top:1px solid #8c7a5f44}
.row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:14px;font-size:13px;font-weight:700;color:var(--bone-mid)}
.pips{display:flex;gap:6px}
.pips i{flex:1;max-width:54px;height:12px;border-radius:6px;background:#0b0809;box-shadow:inset 0 2px 4px #000,0 1px 0 #fff1}
.pips i.on{background:linear-gradient(180deg,var(--bone-hi),var(--bone-mid));box-shadow:inset 0 2px 0 #fff6}
/* สร้างด้วย */
#made{padding:70px 0}
.mbox{padding:28px}
.mbox h3{font-size:13px;letter-spacing:.26em;color:var(--bone-mid);text-align:center}
.mbox>p{text-align:center;color:var(--bone-mid);font-size:15px;margin:6px 0 22px}
.made{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.made a,.made div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:112px;padding:14px 10px;border-radius:10px;text-align:center;color:var(--bone-mid);background:linear-gradient(180deg,#151110,#1f1a17);box-shadow:inset 0 3px 8px #000b;border:1px solid #0008;transition:.2s}
.made a:hover{color:var(--bone-hi);background:linear-gradient(180deg,#322B25,#241F1B);box-shadow:inset 0 1px 0 #fff2,inset 0 -3px 0 #0006}
.made b{font-size:21px;line-height:1.15;font-weight:700;color:var(--bone);letter-spacing:.01em}
.made a:hover b{color:var(--bone-hi)}
.made img{height:44px;width:auto;opacity:.86}
.made a:hover img{opacity:1}
.made small{font-size:12.5px;color:#968A76}
.made .big{grid-column:span 2;min-height:132px}
.made .big b{font-size:30px}
.mnote{text-align:center;margin-top:16px;font-size:12.5px;color:#968A76}
@media(max-width:900px){.made{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.made .big{grid-column:span 2}.made b{font-size:18px}}
/* ตัวห่อภาษาต้องไม่รับสไตล์ของ span ลูกในบล็อกเดียวกัน */
.tab b span,.feat b span{font-size:inherit;color:inherit;display:inline}
.room h3 span[lang]{color:inherit}
.end h2>span[lang]{color:inherit;text-shadow:none}