/* style.css — เลย์เอาต์ คอมโพเนนต์ 3D หน้าแรก เมนู และ responsive (สีทั้งหมดมาจาก theme.css) */
:root{--cw:clamp(130px,40vw,200px);--sh:clamp(280px,62vw,400px);--r:14px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{background:var(--bg);scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:var(--ff-b);font-size:clamp(15px,1.4vw + 10px,17px);line-height:1.65;color:var(--tx);
  background:radial-gradient(900px 520px at 50% -140px,var(--glow),transparent 70%) no-repeat,var(--bg)}
h1,h2,.brand{font-family:var(--ff-h);font-weight:500}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ปุ่ม */
button{font:inherit;color:var(--tx);background:var(--card);border:1px solid var(--bd);padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
button.on{background:var(--ac);border-color:var(--ac);color:var(--onac)}
@media (hover:hover){button:hover:not(.on){border-color:var(--ac)}}
@media (pointer:coarse){button,.up{min-height:44px}}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cta{padding:12px 30px;font-weight:600;margin:14px 0 30px}

/* หน้าคู่มือ */
.w{max-width:860px;margin:0 auto;padding:24px 16px 56px}
.w h1{margin:0 0 4px;font-size:1.7rem}
.sub{color:var(--mut);margin:0 0 20px}
.note{color:var(--mut);font-size:.85rem}
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--bd);margin-bottom:18px}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:10px 10px 0 0;background:none;padding:10px 16px;margin-bottom:-1px}
.tabs button.on{background:none;color:var(--ac);border-bottom-color:var(--ac)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:20px;margin-bottom:16px}
.card h2{margin:0 0 12px;font-size:1.15rem;color:var(--ac)}
.ov{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:420px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--bd);vertical-align:top}
th{color:var(--mut);font-weight:500;font-size:.85rem}
tr:last-child td{border-bottom:0}
@media (hover:hover){td{transition:background .15s}tr:hover td{background:var(--bg2)}}
.bar{display:flex;align-items:center;gap:12px;margin:10px 0}
.bar b{width:44px;font-family:var(--ff-h);font-weight:500}
.bar i{flex:1;height:12px;background:var(--bg2);border-radius:99px;overflow:hidden}
.bar i span{display:block;height:100%;background:var(--ac);border-radius:99px}
.bar em{width:44px;text-align:right;font-style:normal;color:var(--mut)}
.im{max-width:120px;max-height:90px;border-radius:10px;border:1px solid var(--bd);display:block;margin-bottom:4px}
.im.hero{max-width:100%;max-height:220px;margin:12px 0 0}
.up{display:inline-block;font-size:.8rem;color:var(--mut);border:1px dashed var(--bd);border-radius:10px;padding:4px 10px;cursor:pointer}
.rm{font-size:.75rem;padding:2px 10px}
[hidden]{display:none!important}

/* หน้าแรก */
.hero{text-align:center;padding:40px 16px 8px;max-width:960px;margin:0 auto;animation:in .6s ease both}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.eyebrow{color:var(--ac);font-weight:600;font-size:.95rem;margin:0}
.big{font-size:clamp(1.9rem,6vw,3.2rem);margin:6px 0 10px;line-height:1.2;font-weight:600}
.stage{position:relative;perspective:1200px;margin:28px auto 4px;user-select:none}
.stage::before{content:"";position:absolute;left:50%;bottom:4%;width:min(86%,900px);height:60px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow2),transparent);filter:blur(10px);opacity:.7}
.ring{position:relative;display:flex;justify-content:center;gap:clamp(12px,2.4vw,32px);padding:28px 8px 36px;transform-style:preserve-3d}
.face{position:relative;flex:none;width:clamp(150px,17vw,200px);aspect-ratio:3/4;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;color:#fff;text-align:center;cursor:pointer;
  transform-style:preserve-3d;transform:translateZ(var(--lift,0px)) rotateY(var(--ry,var(--t,0deg))) rotateX(var(--rx,0deg));transition:transform .2s ease-out;
  box-shadow:0 22px 44px rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(255,214,120,.55),inset 0 -70px 90px rgba(0,0,0,.3)}
.face:hover,.face:focus-visible{--lift:36px}
.emb{font-size:calc(var(--cw)*.24);line-height:1;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4));transform:translateZ(30px)}
.face b{font-family:var(--ff-h);font-weight:500;font-size:1.15rem}
.face small{opacity:.85;font-size:.78rem}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 28px;max-width:860px;margin:0 auto;padding:0 16px 56px}
.feat .card{background:none;border:0;border-top:2px solid var(--ac);border-radius:0;padding:14px 0 0;margin:0 0 20px}
.feat .card b{display:block;margin-bottom:4px;font-family:var(--ff-h);font-weight:500}

/* แถบเมนู: PC = บนสุด / มือถือ = ลิ้นชักซ้าย */
#nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;gap:14px;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--bd)}
.brand{color:var(--ac);white-space:nowrap;font-size:1.1rem}
#burger{display:none;padding:6px 12px;font-size:1.2rem;line-height:1;border-radius:10px}
#menu{display:flex;align-items:center;gap:4px;flex:1}
#menu button{border:0;background:none;border-radius:10px;padding:8px 14px}
#menu button.on{background:var(--ac);color:var(--onac)}
@media (hover:hover){#menu button:hover:not(.on){background:var(--card)}}
#adminBtn{margin-left:auto}
#scrim{display:none}
#dlg{border:1px solid var(--bd);border-radius:var(--r);background:var(--card);color:var(--tx);padding:20px}
#dlg::backdrop{background:rgba(0,0,0,.55)}
input{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--bd);background:var(--bg);color:var(--tx)}

/* PC */
@media (min-width:1024px){
 .w{max-width:1040px}.hero,.feat{max-width:1040px}
 .card{padding:24px}.card h2{font-size:1.25rem}
 .im{max-width:160px;max-height:120px}.im.hero{max-height:300px}
}
/* แท็บเล็ต/มือถือ */
@media (max-width:768px){
 #burger{display:block}
 #menu{position:fixed;top:0;left:0;bottom:0;width:min(280px,80vw);z-index:70;flex-direction:column;align-items:stretch;gap:4px;flex:none;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 12px 16px;background:var(--bg2);border-right:1px solid var(--bd);
  transform:translateX(-105%);transition:transform .25s ease;overflow-y:auto}
 #menu.open{transform:translateX(0);box-shadow:6px 0 24px rgba(0,0,0,.35)}
 #menu button{text-align:left;padding:12px 14px}
 #adminBtn{margin:auto 0 0;border-top:1px solid var(--bd);border-radius:0;padding-top:14px}
 #scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60}
}
@media (max-width:640px){
 .w{padding:16px 12px 40px}
 .hero{padding:24px 12px 4px}
 .row,.tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .row button,.tabs button{flex:0 0 auto}
 .cta{width:100%;max-width:320px}
 .feat{grid-template-columns:1fr 1fr;padding:0 12px 40px}
 .card{padding:16px}
 table{min-width:0}
 table tr:first-child:has(th){display:none}
 table tr{display:block;padding:10px 0;border-bottom:1px solid var(--bd)}
 table tr:last-child{border-bottom:0}
 table td{display:block;border:0;padding:2px 0}
 table td:first-child{font-weight:600;color:var(--ac)}
 td[data-l]::before{content:attr(data-l) ": ";color:var(--mut);font-size:.8rem}
 .im{max-width:100%;max-height:160px}
 #dlg{width:calc(100vw - 32px)}
}
/* ===== แผนที่/รูปภาพ 3D + หมุด ===== */
button:disabled{opacity:.4;cursor:default}
.mc{align-items:center;margin:0 0 12px}
.mapimg{perspective:1000px;position:relative}
.mapimg.pinning{cursor:crosshair}
.tilt{position:relative;transform-style:preserve-3d;transition:transform .12s ease-out}
.tilt img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--bd);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.pin{position:absolute;width:0;height:0;transform:translateZ(26px);cursor:pointer}
.pin b{position:absolute;left:-14px;top:-34px;width:28px;height:28px;display:grid;place-items:center;background:var(--ac);color:var(--onac);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 10px rgba(0,0,0,.45);font-size:.75rem}
.pin u{text-decoration:none;transform:rotate(45deg);font-weight:700}
.pin em{position:absolute;left:0;bottom:42px;transform:translateX(-50%);white-space:nowrap;background:var(--bg2);color:var(--tx);border:1px solid var(--bd);padding:3px 10px;border-radius:8px;font-style:normal;font-size:.8rem;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
.pin:hover em,.pin.show em{opacity:1}
.pinning .pin{cursor:grab}
.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.legend li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer}
.legend li>b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ac);color:var(--onac);font-size:.75rem;flex:none}
.legend li>span:first-of-type{flex:1;min-width:0}
/* ===== หน้าต่าง Status แบบในเกม ===== */
.rwin{max-width:620px;border-radius:6px;background:#f2f5fb;color:#1f2a44;border:1px solid #8fa3c4;box-shadow:0 14px 34px rgba(0,0,0,.4);overflow:hidden;font-size:.92rem;margin-bottom:12px}
.rtitle{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;background:linear-gradient(#d4e0f4,#b0c1e2);font-weight:600;border-bottom:1px solid #8fa3c4}
.rtitle i{display:flex;gap:8px;font-style:normal}.rtitle s{text-decoration:none;color:#4a5f8a}
.rbody{padding:10px 12px 12px}
.rcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6px 18px}
.rs{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:6px;margin-bottom:4px}
.rs b{font-weight:600}
.rv,.rc{background:#fff;border:1px solid #b6c3dc;padding:1px 8px;text-align:right}
.rdr{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-content:start}
.rdr>div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #d3dcee;padding:3px 2px}
.rdr b{font-weight:600}
.radv{margin:12px 0 8px;padding-top:8px;border-top:1px solid #b6c3dc;font-weight:600}
@media (max-width:640px){.rcols{grid-template-columns:1fr}.rwin{max-width:none}}
/* ===== รูปตัวละคร ===== */
.chead{display:flex;gap:20px;align-items:flex-start}
.portrait{flex:none;width:clamp(110px,26vw,180px)}
.portrait .im{width:100%;max-width:none;max-height:none;aspect-ratio:3/4;object-fit:cover;margin:0 0 6px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.ph{aspect-ratio:3/4;display:grid;place-items:center;font-size:3rem;background:var(--bg2);border:1px dashed var(--bd);border-radius:12px;margin-bottom:6px}
.fimg{width:52%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:2px solid rgba(255,214,120,.6);box-shadow:0 8px 16px rgba(0,0,0,.4);transform:translateZ(30px)}
@media (max-width:480px){.chead{flex-direction:column}.portrait{width:min(180px,60%)}}
@media (max-width:768px){
 .stage{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .ring{width:max-content;min-width:100%;justify-content:flex-start;padding:24px 20px 32px}
 .face{width:150px;scroll-snap-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.hero{animation:none}.tilt{transform:none!important}.face{transform:none!important}}
/* ===== เอฟเฟกต์แสงฟุ้ง / ประกายระยิบระยับ / ลอยขึ้นลง (เพิ่มใหม่) =====
   ใช้ property "translate" แยกจาก "transform" จึงไม่ชนกับการเอียง 3D ตามเมาส์ */
@keyframes flt{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes fltS{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes cardGlow{
 0%,100%{box-shadow:0 22px 44px rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(255,214,120,.55),inset 0 -70px 90px rgba(0,0,0,.3),0 0 16px rgba(255,214,120,.22)}
 50%{box-shadow:0 22px 44px rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(255,226,150,.9),inset 0 -70px 90px rgba(0,0,0,.3),0 0 40px rgba(255,214,120,.55)}}
@keyframes iconGlow{
 0%,100%{filter:drop-shadow(0 6px 6px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(255,220,130,.5))}
 50%{filter:drop-shadow(0 6px 6px rgba(0,0,0,.4)) drop-shadow(0 0 16px rgba(255,232,165,.95))}}
@keyframes imgGlow{
 0%,100%{box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 14px var(--glow2)}
 50%{box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 34px var(--glow2),0 0 64px var(--glow)}}
@keyframes shine{0%,55%{background-position:0% 0}100%{background-position:100% 0}}
@keyframes twinkle{
 0%{opacity:0;background-position:18% 20%,80% 14%,62% 48%,24% 70%,84% 82%}
 22%{opacity:1}
 49%{opacity:0;background-position:18% 20%,80% 14%,62% 48%,24% 70%,84% 82%}
 50%{opacity:0;background-position:70% 22%,30% 12%,14% 52%,76% 62%,46% 86%}
 72%{opacity:1}
 100%{opacity:0;background-position:70% 22%,30% 12%,14% 52%,76% 62%,46% 86%}}
@keyframes pinGlow{
 0%,100%{box-shadow:0 4px 10px rgba(0,0,0,.45),0 0 0 0 transparent}
 50%{box-shadow:0 4px 10px rgba(0,0,0,.45),0 0 16px 4px color-mix(in srgb,var(--ac) 75%,transparent)}}
@keyframes pinRing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2);opacity:0}}
@keyframes pinStar{0%,100%{opacity:.15;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}

/* ประกายดาว (ใช้ร่วมกันระหว่างการ์ดอาชีพกับรูปแผนที่) */
.face::before,.tilt::before{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:
  radial-gradient(circle,#fff 0,#fff 1.5px,rgba(255,255,255,0) 4.5px),
  radial-gradient(circle,#fff 0,#fff 1.5px,rgba(255,255,255,0) 4.5px),
  radial-gradient(circle,#fff 0,#fff 1.5px,rgba(255,255,255,0) 4.5px),
  radial-gradient(circle,#fff 0,#fff 1.5px,rgba(255,255,255,0) 4.5px),
  radial-gradient(circle,#fff 0,#fff 1.5px,rgba(255,255,255,0) 4.5px);
 background-size:11px 11px;background-repeat:no-repeat;
 background-position:18% 20%,80% 14%,62% 48%,24% 70%,84% 82%;
 filter:drop-shadow(0 0 4px #fff);opacity:0;animation:twinkle 3.4s ease-in-out infinite}
/* แสงสะท้อนพาดผ่าน */
.face::after,.tilt::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 48%,rgba(255,255,255,.08) 54%,transparent 62%);
 background-size:300% 100%;background-position:0% 0;animation:shine 6s ease-in-out infinite}

/* การ์ดอาชีพหน้าแรก */
.face{animation:flt 6s ease-in-out infinite,cardGlow 3.6s ease-in-out infinite}
.face::before{border-radius:inherit;transform:translateZ(40px)}
.face::after{border-radius:inherit;transform:translateZ(2px)}
.face:nth-child(2){animation-delay:-1.2s,-.7s}.face:nth-child(2)::before{animation-delay:-.8s}.face:nth-child(2)::after{animation-delay:-1.2s}
.face:nth-child(3){animation-delay:-2.4s,-1.4s}.face:nth-child(3)::before{animation-delay:-1.6s}.face:nth-child(3)::after{animation-delay:-2.4s}
.face:nth-child(4){animation-delay:-3.6s,-2.1s}.face:nth-child(4)::before{animation-delay:-2.4s}.face:nth-child(4)::after{animation-delay:-3.6s}
.face:nth-child(5){animation-delay:-4.8s,-2.8s}.face:nth-child(5)::before{animation-delay:-3.2s}.face:nth-child(5)::after{animation-delay:-4.8s}
.face:hover,.face:focus-visible{animation-play-state:paused}
.emb,.fimg{animation:iconGlow 3s ease-in-out infinite}

/* รูปแผนที่ + หมุด */
.mapimg:not(.pinning) .tilt{animation:fltS 7s ease-in-out infinite}
.mapimg:hover .tilt{animation-play-state:paused}
.tilt img{animation:imgGlow 4s ease-in-out infinite}
.tilt::before{border-radius:12px;transform:translateZ(10px);background-size:13px 13px}
.tilt::after{border-radius:12px;transform:translateZ(12px)}
.pin b{animation:pinGlow 2.4s ease-in-out infinite}
.pin b::before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--ac);opacity:0;animation:pinRing 2.4s ease-out infinite}
.pin::after{content:"✦";position:absolute;left:10px;top:-52px;font-size:.8rem;line-height:1;color:#fff;text-shadow:0 0 6px #fff,0 0 12px var(--ac);pointer-events:none;animation:pinStar 2s ease-in-out infinite}
.pin:nth-of-type(2n) b,.pin:nth-of-type(2n) b::before,.pin:nth-of-type(2n)::after{animation-delay:-1.1s}

/* รูปตัวละครในหน้าคู่มือ */
.portrait .im{animation:fltS 6s ease-in-out infinite,imgGlow 4s ease-in-out infinite}

@media (max-width:768px){@keyframes flt{0%,100%{translate:0 0}50%{translate:0 -8px}}}
@media (prefers-reduced-motion:reduce){
 .face,.face::before,.face::after,.emb,.fimg,.tilt,.tilt::before,.tilt::after,.tilt img,.pin b,.pin b::before,.pin::after,.portrait .im{animation:none!important}
}