/* หน้ารายละเอียดเกม PG — เว็บลูกลิงก์ไฟล์นี้ไปใช้ได้เลย
   https://ag2.manga69.app/pg-assets/article.css  (คู่กับ html จาก /api/pg-games/article/<slug>)

   โหมดสี: ค่าเริ่มต้นตามเครื่องผู้ใช้ (prefers-color-scheme)
     บังคับสว่าง  → <div class="pg-doc" data-pg-theme="light">
     บังคับมืด    → <div class="pg-doc" data-pg-theme="dark">
   สีทุกตัวเป็นตัวแปร ทับจากธีมเว็บลูกได้ทั้งหมด */

/* ── สว่าง (ค่าเริ่มต้น) ── */
.pg-doc{
  --pg-card:#f6f8fc; --pg-line:#e2e8f0;
  --pg-text:#33415c; --pg-dim:#5b6b85; --pg-head:#0f172a;
  --pg-accent:#ff4d6d; --pg-accent2:#7c5cff;
  --pg-shadow:0 18px 40px rgba(15,23,42,.14);
  --pg-imgshadow:0 12px 22px rgba(15,23,42,.22);
  color:var(--pg-text);font:16px/1.8 "Noto Sans Thai","Kanit",system-ui,sans-serif;
  max-width:1120px;margin:0 auto;padding:0 16px 56px;
}
/* ── มืด: ตามเครื่อง (เว้นแต่สั่งบังคับสว่าง) ── */
@media (prefers-color-scheme: dark){
  .pg-doc:not([data-pg-theme="light"]){
    --pg-card:rgba(255,255,255,.045); --pg-line:rgba(148,163,184,.22);
    --pg-text:#e6ebf5; --pg-dim:#a7b3c8; --pg-head:#fff;
    --pg-shadow:0 22px 60px rgba(0,0,0,.45);
    --pg-imgshadow:0 12px 22px rgba(0,0,0,.45);
  }
}
/* ── มืด: สั่งบังคับ ── */
.pg-doc[data-pg-theme="dark"]{
  --pg-card:rgba(255,255,255,.045); --pg-line:rgba(148,163,184,.22);
  --pg-text:#e6ebf5; --pg-dim:#a7b3c8; --pg-head:#fff;
  --pg-shadow:0 22px 60px rgba(0,0,0,.45);
  --pg-imgshadow:0 12px 22px rgba(0,0,0,.45);
}

.pg-doc *{box-sizing:border-box}
.pg-doc img{max-width:100%;height:auto;display:block}
.pg-doc h1{font-size:clamp(26px,4vw,40px);line-height:1.25;margin:6px 0 10px;color:var(--pg-head)}
.pg-doc h2{font-size:clamp(20px,2.6vw,27px);margin:0 0 14px;color:var(--pg-head);position:relative;padding-left:14px}
.pg-doc h2::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:5px;border-radius:3px;
  background:linear-gradient(180deg,var(--pg-accent),var(--pg-accent2))}
.pg-doc h3{font-size:clamp(17px,2vw,20px);margin:22px 0 8px;color:var(--pg-head)}
.pg-doc ul{margin:0;padding-left:20px;color:var(--pg-dim)}
.pg-col>p{color:var(--pg-dim);margin:9px 0}
.pg-doc li{margin:9px 0}

/* hero: โลโก้+ข้อความซ้าย · ภาพเกมขวา */
.pg-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;padding:26px 0 12px}
.pg-logo{max-width:min(420px,100%);margin-bottom:10px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.28))}
.pg-story{margin:2px 0 14px;color:var(--pg-text)}
.pg-story p{margin:10px 0;font-size:15.5px}
.pg-story p:first-child{font-size:17px;color:var(--pg-head)}
.pg-lead{color:var(--pg-dim);font-size:14px;margin:0 0 18px;padding-top:12px;border-top:1px solid var(--pg-line)}
.pg-hero-r{position:relative}
/* ภาพ hero เป็น PNG โปร่ง — ห้ามใส่เงา/มุมมน ไม่งั้นเห็นเป็นกล่องทับพื้นหลัง */
.pg-hero-r>img{margin:0 auto}
/* เดสก์ท็อปใช้แบนเนอร์กว้างของ pgsoft · มือถือใช้คีย์อาร์ตจัตุรัสจาก pgslot.tw
   สองใบสัดส่วนไม่เท่ากัน จองพื้นที่ด้วย aspect-ratio ต่อเกม (ตัวแปรมากับ HTML) กัน CLS */
.pg-hero-r>picture{display:block}
.pg-hero-r>picture>img{display:block;width:100%;height:auto;margin:0 auto;aspect-ratio:var(--pg-m,1/1)}
@media(min-width:769px){.pg-hero-r>picture>img{aspect-ratio:var(--pg-d,1/1)}}
.pg-play{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:700;text-decoration:none;
  color:#fff;background:linear-gradient(135deg,var(--pg-accent),var(--pg-accent2));box-shadow:0 10px 26px rgba(255,77,109,.32)}
.pg-play:hover{filter:brightness(1.08)}

/* สัญลักษณ์ประกอบมุมภาพ hero — วางนิ่ง ไม่มีอนิเมชัน */
.pg-float{position:absolute;width:22%;min-width:70px;max-width:150px;pointer-events:none;z-index:2}
.pg-float img{filter:drop-shadow(var(--pg-imgshadow))}
.pg-float.a{left:-6%;top:4%;animation:pg-bob 4.2s ease-in-out infinite}
.pg-float.b{right:-5%;bottom:6%;width:26%;animation:pg-bob 5.4s ease-in-out infinite .6s}

@keyframes pg-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.pg-float{animation:none}}

/* บล็อกเนื้อหา: สลับซ้าย-ขวา */
.pg-block{margin:44px 0}
.pg-row{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.pg-row.rev .pg-col:first-child{order:2}
.pg-pic img{border-radius:18px;margin:0 auto;max-height:520px;width:auto}

/* ตาราง */
.pg-doc table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--pg-card);
  border:1px solid var(--pg-line);border-radius:14px;overflow:hidden}
.pg-doc th,.pg-doc td{padding:11px 14px;border-bottom:1px solid var(--pg-line);text-align:left;vertical-align:top}
.pg-doc th{width:44%;color:var(--pg-dim);font-weight:600}
.pg-doc td{color:var(--pg-head)}
.pg-doc tr:last-child th,.pg-doc tr:last-child td{border-bottom:0}
.pg-stats th{width:52%}
.pg-statimg{margin-top:18px}
.pg-statimg img{border-radius:14px;border:1px solid var(--pg-line)}

/* สัญลักษณ์ + ภาพในเกม */
.pg-symbols{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}
.pg-symbols img{margin:0 auto;filter:drop-shadow(var(--pg-imgshadow))}
.pg-feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;align-items:center}
.pg-feats img{margin:0 auto;max-height:320px;width:auto;filter:drop-shadow(var(--pg-imgshadow))}
/* ภาพในเกมมีเยอะ (บางเกม 10+ ใบ) — เลื่อนแนวนอนแทนการเรียงเต็มหน้า */
.pg-shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;
  scrollbar-width:thin;scrollbar-color:var(--pg-line) transparent}
.pg-shots img{flex:0 0 auto;align-self:flex-start;width:200px;border-radius:14px;border:1px solid var(--pg-line);scroll-snap-align:start}
.pg-shots::-webkit-scrollbar{height:8px}
.pg-shots::-webkit-scrollbar-thumb{background:var(--pg-line);border-radius:99px}
@media(max-width:620px){.pg-shots img{width:150px}}

@media(max-width:820px){
  .pg-hero,.pg-row{grid-template-columns:1fr;gap:20px}
  .pg-row.rev .pg-col:first-child{order:0}
  .pg-block{margin:32px 0}
  .pg-doc th{width:42%}
}

/* ── Lightbox (ต้องมี /pg-assets/article.js ด้วย) ── */
.pg-doc .pg-pic img,.pg-doc .pg-symbols img,.pg-doc .pg-feats img,.pg-doc .pg-shots img,.pg-doc .pg-statimg img{cursor:zoom-in}
.pg-hero img{cursor:default}
.pg-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(6,10,18,.92);padding:24px;cursor:zoom-out}
.pg-lightbox.on{display:flex}
.pg-lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pg-lb-close{position:absolute;top:14px;right:18px;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.pg-lb-close:hover{background:rgba(255,255,255,.22)}