/* MUGEN — Codex c1. Locked gold design; source baseline m96. */

:root {
  --bg: #000000;
  --bg-panel: #060a0c;
  --ink: #e8f6f8;
  --ink-dim: #7fa0a8;
  --cyan: #00e5ff;
  --cyan-soft: rgba(240, 189, 98,0.55);
  --cyan-faint: rgba(240, 189, 98,0.12);
  --teal: #0e7c8c;
  --line: rgba(240, 189, 98,0.22);
  /* โทนทองล้วนทั้งเว็บ (New ตัดสิน 2026-07-29 — supersede dual-tone); ตัวแปร cyan คงไว้เผื่อ accent อนาคต แต่ห้ามใช้ในธีมหลัก */
  --gold: #f0bd62;
  --gold-bright: #ffd98a;
  --gold-soft: rgba(240, 189, 98, 0.55);
  --gold-faint: rgba(240, 189, 98, 0.14);
  --gold-line: rgba(240, 189, 98, 0.32);
  --gold-ink: #1a1206;
  --danger: #ff3b5c;
  --font-display: "Bahnschrift", "Segoe UI", "Arial Narrow", sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --font-mono: "Consolas", "Cascadia Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}
img, canvas, video { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.55) 70%, transparent);
  backdrop-filter: blur(6px);
}
.nav .logo {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.35rem; letter-spacing: 0.42em;
  color: var(--ink); text-shadow: 0 0 14px var(--gold-soft);
}
.nav .logo span { color: var(--gold); }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em;
  color: var(--ink-dim); text-transform: uppercase;
  padding: 6px 2px; border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-links a.cta {
  color: var(--gold-ink); background: var(--gold);
  padding: 8px 16px; border-bottom: none;
  box-shadow: 0 0 18px var(--gold-soft);
}
.nav-links a.cta:hover { background: var(--gold-bright); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 96px 20px 64px;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; opacity: 0.5; pointer-events: none;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.hero.video-live .hero-video { display: block; }
.hero.video-live .hero-canvas { display: none; }
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, transparent 40%, rgba(0,0,0,0.45)),
    linear-gradient(180deg, rgba(0,0,0,0.55), transparent 26%, transparent 72%, #000 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }
.hero-sub {
  margin-top: 20px; font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--ink-dim); letter-spacing: 0.06em;
}
.hero-sub b { color: var(--ink); font-weight: 600; }
/* hero sub + โลโก้ Synchro (2026-08-19): "From the studio behind [โลโก้]" บรรทัดเดียว จัดกลาง inline */
.hero-sub-logo { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; color: var(--ink); /* ขาว (New สั่ง 2026-08-19) */ }
.synchro-logo {
  height: auto; width: 220px; max-width: 46vw;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.85));
}
.hero-ctas { margin-top: 38px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ระยะโลโก้→ปุ่ม: เดิมมี hero-sub คั่น (~20 margin + บรรทัดข้อความ) พอตัดออกปุ่มชิดโลโก้ — New สั่ง 2026-08-19 ให้ห่างเท่าเดิม */
/* จัดสัดส่วนใหม่ (New 2026-08-19 "สัดส่วนไม่สวย"): ปุ่ม 2 กล่องขึ้นชิดใต้โลโก้ → ช่องไฟใหญ่ → ข้อความ+ฟอร์มเมลเป็นกลุ่มล่าง
   (เดิมช่องว่างใต้โลโก้ 132 แล้วปุ่ม/ข้อความ/ฟอร์มเบียดกัน 34/18) */
.hero .hero-ctas { margin-top: 150px; } /* New เคาะตัวเลขเอง 2026-08-19: 150 / 26 / 26 */
.hero .hero-ctas .btn { min-width: 200px; text-align: center; } /* 2 ปุ่มกว้างเท่ากัน */
@media (max-width: 480px) {
  /* มือถือ: ปุ่มคู่กันในแถวเดียว (min-width 200 ทำซ้อน 2 บรรทัด) */
  .hero .hero-ctas { gap: 10px; }
  /* เหลือปุ่มเดียวบนมือถือ (Play Demo ถูกลบ) → กว้างตามเนื้อหาเหมือน desktop ไม่ยืดเต็มจอ (New 2026-08-19) */
  .hero .hero-ctas .btn { min-width: 0; flex: 0 0 auto; padding-left: 26px; padding-right: 26px; }
}
/* ปุ่ม Watch/Play ใน hero: ถมพื้นทอง 40% อ่านง่ายบนวิดีโอ (New สั่ง 2026-08-19) — เฉพาะ hero, .btn ที่อื่นคงโปร่ง */
.hero .hero-ctas .btn {
  background: rgba(240, 189, 98, 0.4);
  color: var(--ink);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.hero .hero-ctas .btn:hover { background: rgba(240, 189, 98, 0.6); box-shadow: 0 0 18px var(--gold-faint); }
/* ปุ่ม Play the Demo บนมือถือ (JS ใส่ .disabled): จาง กดไม่ได้ */
.hero .hero-ctas .btn.disabled { opacity: 0.45; cursor: default; pointer-events: none; background: rgba(240,189,98,0.18); }
.btn {
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.16em;
  text-transform: uppercase; cursor: pointer;
  padding: 13px 26px; border: 1px solid var(--gold);
  background: transparent; color: var(--gold);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--gold-faint); box-shadow: 0 0 16px var(--gold-faint); }
.btn.primary { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 22px var(--gold-soft); }
.btn.primary:hover { background: var(--gold-bright); }
.hero-scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.3em;
  color: var(--ink-dim); animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* ---------- sections ---------- */
.section { padding: 96px 24px; max-width: 1080px; margin: 0 auto; }
.section[id] { scroll-margin-top: 58px; }
.section-kicker {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.35em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: 0.12em;
  margin-bottom: 22px;
}
.section p.lead { color: var(--ink-dim); max-width: 640px; font-size: 1.05rem; }

/* world section: 3 ส่วนย่อย (Story / Game / Who We Are) */
.world-part { margin-top: 90px; }
.world-part:first-of-type { margin-top: 0; }
.sub-kicker {
  font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: 0.3em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 16px;
  border-left: 3px solid var(--gold); padding-left: 14px;
}

/* who-we-are: ภาพซ้าย / อักษรขวา — ภาพขอบเบลนด์เข้าพื้นดำด้วย mask */
.who-grid {
  display: grid; grid-template-columns: 1.22fr 1fr;
  /* stretch: ภาพซ้ายสูงเท่าคอลัมน์ข้อความ (ขอบบน = หัวข้อ, ขอบล่าง = ปุ่มล่างสุด)
     คอลัมน์ซ้ายกว้างพอให้เห็นภาพเต็มใบ ไม่ crop (contain โดยความสูงเป็นตัวคุม) */
  gap: 44px; align-items: stretch; margin-top: 10px;
}
.ads-wrap { display: block; height: 100%; }
.ads-wrap .synchro-ads { height: 100%; object-fit: contain; }
.who-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.who-head .section-title { margin-bottom: 0; }
.nge-mark { height: 80px; width: auto; flex-shrink: 0; }
.synchro-ads { width: 100%; }

/* board game reveal (01 Story) — โผล่ต่อจาก video hero */
.boxall-stage { margin: 46px 0 0; position: relative; }
.boxall {
  width: 100%; height: auto; margin: 0 auto;
  /* ก่อนเข้า viewport: ใหญ่เกินจริง + เบลอ + จาง เหมือนภาพยังไม่ก่อตัว */
  opacity: 0; transform: scale(1.14) translateY(26px);
  filter: blur(14px) brightness(0.5);
  transition: opacity 1s ease-out, transform 1.15s cubic-bezier(0.2, 0.7, 0.25, 1),
              filter 1.15s ease-out;
}
.boxall-stage.on .boxall {
  opacity: 1; transform: none; filter: none;
}
.boxall-stage figcaption {
  margin-top: 14px; text-align: center;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em;
  color: var(--ink-dim); text-transform: uppercase;
  opacity: 0; transition: opacity 0.7s 0.5s;
}
.boxall-stage.on figcaption { opacity: 1; }

/* 01 Story: kicker อยู่ใต้ภาพกล่อง (New สั่ง 2026-08-04) — เว้นระยะจาก figcaption */
.story-kicker { margin-top: 64px; }

/* 01 Story (จัดใหม่ 2026-08-04 หลัง New บอก "ไม่สวย"): หัวข้อ+ปีเต็มกว้าง
   แล้วค่อย 2 คอลัมน์: เนื้อความซ้าย / key art ขวา — ย่อหน้าต้องมีช่องไฟ */
.story-grid {
  margin-top: 8px; display: grid; grid-template-columns: 1fr 460px;
  /* align center: รูปอยู่กึ่งกลางแนวตั้งเทียบกับบล็อกข้อความ (New สั่ง — เดิมชิดบนแล้วเหลือโพรงล่าง) */
  gap: 56px; align-items: center;
}
.story-copy .lead { max-width: none; }
.story-copy .lead + .lead { margin-top: 18px; }
.story-art { margin: 0; }
.story-art img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--gold-line);
  box-shadow: 0 0 40px rgba(0,0,0,0.9);
}

/* บรรทัดบอกแนวเกม เหนือภาพกล่อง (New สั่ง 2026-08-04; ขยายใหญ่ขึ้นตามที่สั่งรอบสอง) */
.genre-line {
  font-family: var(--font-display); font-weight: 700;
  /* min 1.25rem: กันไม่ให้ "TACTICAL DEXTERITY" ล้นจนตัดเป็น 3 บรรทัดบนจอ 375px */
  font-size: clamp(1.25rem, 4.4vw, 2.7rem); letter-spacing: 0.16em; line-height: 1.24;
  text-transform: uppercase; text-align: center; color: var(--gold);
  text-shadow: 0 0 22px var(--gold-soft);
}
.genre-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.7vw, 0.95rem); letter-spacing: 0.2em;
  text-transform: uppercase; text-align: center; color: var(--ink-dim);
  margin-top: 12px;
}

/* The Game — 3 จุดขาย (02.1 flick / 02.2 manga story / 02.3 tech cards)
   แถว 2 คอลัมน์ ข้อความข้างวิดีโอ สลับฝั่งด้วย .media-left */
.game-feature {
  margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.game-feature .sub-kicker { font-size: 0.92rem; }
.feature-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem); letter-spacing: 0.1em;
  margin-bottom: 14px;
}
/* วิดีโอ crop ตามมวลจริงแล้ว → สัดส่วนต่างกันทั้ง 3 ตัว (แนวตั้ง/จัตุรัส/แนวนอน)
   จึงคุมด้วย "กล่องสูงสุด 380px กว้างสุด 400px" ไม่ใช่บังคับกว้าง 100% —
   ไม่งั้นตัวแนวตั้งจะสูงพุ่ง 500px แล้วดันแถวให้ห่างกว่าเดิม (เจอจริงตอน verify) */
.feature-media { margin: 0; width: 100%; max-width: 400px; justify-self: end; }
.feature-media .boxall {
  width: auto; max-width: 100%; max-height: 380px;
  margin: 0 auto; display: block;
}
.game-feature.media-left .feature-media { order: -1; justify-self: start; }
/* ปุ่มเข้าเกม flick ใต้ข้อความ 02.1 (New สั่ง 2026-08-14) */
.feature-cta { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.feature-cta-note {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em;
  color: var(--ink-dim); text-transform: uppercase;
}

/* world hook statement lines */
.world-lines { margin-top: 44px; display: grid; gap: 30px; }
.world-line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 3.6vw, 2.2rem); letter-spacing: 0.08em;
  color: var(--ink); border-left: 3px solid var(--gold);
  padding-left: 22px;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s, transform 0.7s;
}
.world-line small {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.2em; color: var(--ink-dim); margin-top: 8px;
}
.world-line.on { opacity: 1; transform: none; }
.year-mark {
  font-family: var(--font-mono); color: var(--gold);
  font-size: clamp(4rem, 14vw, 9rem); letter-spacing: 0.1em;
  text-shadow: 0 0 30px var(--gold-soft);
  margin: 10px 0 4px;
}
/* suffix "Years Ahead" ต่อท้ายเลขนับ (2026-08-20) — เล็กกว่าเลข อยู่ baseline เดียวกัน */
.year-suffix {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.32em; letter-spacing: 0.18em; text-transform: uppercase;
  margin-left: 0.3em; color: var(--gold); opacity: 0.9;
}

/* ---------- video slot ---------- */
.video-slot {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--bg-panel); border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(240,189,98,0.08);
}
.video-slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* วิดีโอทีเซอร์จริง (2026-08-19) เต็มกรอบ 16:9 */
.video-slot .teaser-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* YouTube facade (เมื่อ YT_ID ถูกตั้ง): poster + ปุ่มเล่น, กดแล้วแทนด้วย iframe */
.video-slot .yt-facade {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #000 center / cover no-repeat; border: 0; cursor: pointer; padding: 0;
}
.video-slot .yt-facade::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.video-slot .yt-facade > * { position: relative; }
.video-slot .yt-facade:hover .play-ring { box-shadow: 0 0 40px var(--gold-soft), inset 0 0 20px var(--gold-faint); }
.video-slot .yt-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.teaser-note {
  margin-top: 14px; text-align: center;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em;
  color: var(--ink-dim); text-transform: uppercase;
}
.video-slot .slot-label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.slot-label .play-ring {
  width: 74px; height: 74px; border: 2px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px var(--gold-soft), inset 0 0 14px var(--gold-faint);
  animation: pulse 2.6s ease-in-out infinite;
}
.slot-label .play-ring::after {
  content: ""; margin-left: 5px;
  border-left: 18px solid var(--gold); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
@keyframes pulse { 50% { box-shadow: 0 0 40px var(--gold-soft), inset 0 0 20px var(--gold-faint); } }
.slot-label .slot-text {
  font-family: var(--font-mono); letter-spacing: 0.3em; font-size: 0.8rem;
  color: var(--ink-dim); text-transform: uppercase;
}
.slot-label .slot-text b { color: var(--gold); }

/* ---------- hero showcase panels (แบบ A — จัดเหลื่อมสลับฝั่ง ไม่เรียงแนวตรง) ---------- */
.hero-showcase { margin-top: 44px; }
.hs-panel {
  position: relative; overflow: hidden;
  /* เต็มสเกลภาพจริง (3261x2552) — ไม่ crop */
  aspect-ratio: 3261 / 2552;
  width: 72%;
  border: 1px solid var(--line); background: var(--bg-panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hs-panel.flip { margin-left: auto; }
.hs-panel + .hs-panel { margin-top: 38px; }
.hs-panel:hover { border-color: var(--gold); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 30px var(--gold-faint); }
/* crop เลื่อนขึ้น 10% จากกึ่งกลาง (หัวตัวละครอยู่ค่อนบน) — จูนรายตัวได้ด้วย --crop-y บน .hs-panel */
.hs-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% var(--crop-y, 40%);
}
.hs-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.82), rgba(0,0,0,0.25) 40%, transparent 60%);
}
.hs-panel.flip .hs-grad {
  background: linear-gradient(270deg, rgba(0,0,0,0.82), rgba(0,0,0,0.25) 40%, transparent 60%);
}
.hs-info { position: absolute; left: 28px; bottom: 24px; max-width: 48%; }
.hs-panel.flip .hs-info { left: auto; right: 28px; text-align: right; }
.hs-info .tag {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em;
  color: var(--gold); border: 1px solid var(--gold-line); padding: 3px 8px;
  background: rgba(0,0,0,0.6); display: inline-block;
}
/* ชื่อ hero สไตล์ทหารแอนะล็อก (New เคาะ 2026-08-04): ตราปั๊ม/สเตนซิลพ่นลัง —
   ฟอนต์ Stencil ถ้ามี (ตกมาเป็นพิมพ์ดีด Courier) + กรอบตรายาง + เอียงนิด + ขอบสึกด้วย noise mask */
.hs-name {
  font-family: "Stencil Std", "Stencil", "Courier New", monospace;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.4rem); letter-spacing: 0.2em;
  margin-top: 10px; line-height: 1.15;
  display: inline-block; padding: 6px 16px 6px 18px;
  color: var(--gold);
  border: 3px solid var(--gold);
  transform: rotate(-2deg);
  opacity: 0.92;
  /* คราบสึกแบบหมึกปั๊มไม่ทั่ว: SVG turbulence เป็น alpha mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.4 3.4 3.4 0 -3.1'/%3E%3C/filter%3E%3Crect width='240' height='90' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.4 3.4 3.4 0 -3.1'/%3E%3C/filter%3E%3Crect width='240' height='90' filter='url(%23n)'/%3E%3C/svg%3E");
  text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}
.hs-panel.flip .hs-name { transform: rotate(2deg); }

/* ---------- logo images (แบบ D) ---------- */
.nav .logo-img { height: 38px; width: auto; display: block; }
.hero-logo-wrap { margin: 0; position: relative; }
/* แสงทองนุ่มๆ หลังโลโก้ + หายใจช้าๆ (ใช้ opacity บน pseudo — ถูกกว่า animate filter) */
.hero-logo-wrap::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(95vw, 760px); height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 196, 92, 0.28), rgba(255, 170, 60, 0.10) 55%, transparent 75%);
  pointer-events: none;
  animation: logo-breathe 4.5s ease-in-out infinite;
}
@keyframes logo-breathe { 50% { opacity: 0.55; } }
.hero-logo {
  position: relative;
  width: min(85vw, 620px); height: auto; margin: 0 auto;
  filter: drop-shadow(0 0 16px rgba(255, 205, 95, 0.5))
          drop-shadow(0 0 55px rgba(255, 180, 60, 0.28))
          drop-shadow(0 4px 22px rgba(0, 0, 0, 0.8));
}

/* acronym M.U.G.E.N — อักษรแรกทองเด่น */
.acronym {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.2em;
  color: var(--ink-dim); text-transform: uppercase;
  margin: 4px 0 18px;
}
.acronym b {
  color: var(--gold); font-size: 1.25em; font-weight: 700;
  text-shadow: 0 0 12px var(--gold-faint);
}
.acr-dot { color: var(--gold); opacity: 0.5; }

/* ---------- signup ---------- */
.signup { text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signup-form {
  margin: 34px auto 0; display: flex; gap: 10px; max-width: 460px;
}
.signup-form input {
  flex: 1; min-width: 0; padding: 13px 16px;
  background: var(--bg-panel); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.9rem;
}
.signup-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 14px var(--gold-faint); }
/* ข้อความกระตุ้นลงทะเบียนเหนือช่องเมล (2026-08-19) */
.hero-pitch {
  margin-top: 26px; font-size: clamp(1rem, 2.3vw, 1.15rem);
  color: var(--ink); letter-spacing: 0.04em; line-height: 1.55;
  /* ขาว + เงาหนา: เดิม ink-dim อ่านไม่ออกบนวิดีโอ (New แจ้ง 2026-08-19) */
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 2px 14px rgba(0,0,0,0.9);
}
.hero-pitch b { color: var(--gold); font-weight: 600; }
.hero-signup { margin: 26px auto 0; max-width: 440px; }
/* มือถือ: ช่องไฟปุ่ม→ข้อความลดลง (ต้องอยู่หลังกฎ .hero-pitch หลัก — specificity เท่ากัน ตัวหลังชนะ) */
@media (max-width: 480px) { .hero .hero-ctas { margin-top: 200px; } } /* มือถือห่างกว่า desktop (New ขอเพิ่ม 2026-08-19) — ต้องอยู่หลังกฎหลัก */
.hero .signup-note { opacity: 0.75; }
.signup-note {
  margin-top: 16px; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; color: var(--ink-dim);
}
.signup-done {
  margin-top: 18px; font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--gold); display: none;
}

/* ---------- boss section (Ashura — ยักษ์จมเงา เห็นรายละเอียดบางๆ) ---------- */
/* ระยะ characters → threat ใช้ padding มาตรฐานของ .section = เท่ากับ teaser → characters พอดี */
.boss { text-align: center; }
.boss-stage {
  position: relative; margin-top: 24px; height: 78vh; overflow: hidden;
  /* ค่าจูนตำแหน่ง Ashura (ย้ายมาจาก inline เพื่อให้ mobile override ได้) */
  --boss-x: -53%;
  --boss-shift: -20%;
}
.loom { opacity: 0; transform: scale(1.06); transition: opacity 1.8s, transform 1.8s cubic-bezier(0.2, 0.7, 0.3, 1); }
.loom.on { opacity: 1; transform: none; }
/* กรอบ fade: mask อยู่ที่นี่ — ขอบหน้าต่างที่มองเห็นจางหาย ไม่โดนตัวหนังสือ boss-info */
.boss-fade {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 45%, #000 50%, transparent 84%);
  mask-image: radial-gradient(ellipse 60% 56% at 50% 45%, #000 50%, transparent 84%);
}
.boss-art {
  position: absolute; left: 50%; top: 0;
  /* ขนาดยักษ์แบบเดิม — --boss-x จัดหัวให้กลาง / --boss-shift เลื่อน crop ลง (% ของความสูงภาพ) */
  /* fallback = ค่า desktop จริง กันเคส var หาย/ไฟล์ผสมเวอร์ชัน */
  transform: translateX(var(--boss-x, -53%)) translateY(var(--boss-shift, -15%));
  width: var(--boss-w, 150%); max-width: none;
  /* จมเงา: มืดเกือบหมด เหลือ highlight บางๆ ให้เดารูปทรง (--boss-bright จูนแยกจอได้) */
  filter: brightness(var(--boss-bright, 0.26)) contrast(1.1);
  animation: boss-float 9s ease-in-out infinite alternate;
}
@keyframes boss-float {
  to { transform: translateX(var(--boss-x, -53%)) translateY(calc(var(--boss-shift, -15%) - 16px)); }
}
.boss-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 28%, transparent 30%, rgba(0, 0, 0, 0.5) 80%),
    linear-gradient(180deg, transparent 50%, #000 96%);
}
.boss-info { position: absolute; left: 0; right: 0; bottom: 42px; z-index: 2; }
.boss-info .tag {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em;
  color: var(--danger); border: 1px solid rgba(255, 59, 92, 0.4); padding: 3px 10px;
  background: rgba(0, 0, 0, 0.65); display: inline-block;
}
.boss-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 5.2rem); letter-spacing: 0.4em; text-indent: 0.4em;
  margin-top: 12px; color: var(--ink);
  text-shadow: 0 0 34px var(--gold-faint), 0 4px 20px rgba(0, 0, 0, 0.95);
}
.boss-signup { margin-top: 34px; text-align: center; }
.boss-signup .lead {
  max-width: 520px; margin: 0 auto; font-size: 0.98rem;
}
.boss-signup .signup-form { margin-left: auto; margin-right: auto; }
.boss-sub {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.26em;
  color: var(--ink-dim); text-transform: uppercase; margin-top: 8px;
}

/* ---------- proto banner & footer ---------- */
/* ปุ่มกลับขึ้นบน — โผล่หลังเลื่อนพ้น hero */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  padding: 12px 18px; cursor: pointer;
  border: 1px solid var(--gold); background: rgba(0, 0, 0, 0.72);
  color: var(--gold);
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s, background 0.15s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold-faint); box-shadow: 0 0 16px var(--gold-faint); }

.proto-banner {
  position: fixed; bottom: 10px; left: 10px; z-index: 60;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--ink-dim); border: 1px dashed rgba(127,160,168,0.4);
  padding: 4px 9px; background: rgba(0,0,0,0.7);
}
.footer {
  padding: 44px 24px 70px; text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--ink-dim);
}
.footer b { color: var(--ink); }
/* พื้นที่กดโลโก้ NGE = เท่าตัวโลโก้เอง (New แจ้ง 2026-08-14: anchor เดิมกินกว้างทั้งแถว)
   inline-block หดตามรูป + footer text-align:center จัดกลางให้เอง */
.footer .footer-logo { display: inline-block; }
.footer .nge-logo {
  height: 62px; width: auto; margin: 0 0 16px;
  opacity: 0.85; transition: opacity 0.15s, filter 0.15s;
}
.footer a:hover .nge-logo { opacity: 1; filter: drop-shadow(0 0 14px var(--gold-faint)); }
.footer a.studio-link { color: var(--gold); }

/* ---------- scroll animations (แกะ pattern จาก nikke-sea: reveal + parallax layer) ---------- */
.section { position: relative; overflow: hidden; }

/* reveal variants */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s, transform 0.7s; }
.reveal.on { opacity: 1; transform: none; }
.zoom { opacity: 0; transform: scale(0.94); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); }
.zoom.on { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-64px); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); }
.reveal-r { opacity: 0; transform: translateX(64px); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); }
.reveal-l.on, .reveal-r.on { opacity: 1; transform: none; }
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.6, 0.05, 0.2, 1); }
.wipe.on { clip-path: inset(0 0 0 0); }

/* section title: underline สแกนตาม */
.section-title { position: relative; padding-bottom: 12px; }
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), transparent);
  box-shadow: 0 0 12px var(--gold-soft);
  transition: width 0.9s 0.2s;
}
.section-title.on::after { width: 100%; }

/* parallax word ยักษ์หลัง section (สไตล์ layer ของ nikke แต่เป็น typography) */
.bg-word {
  position: absolute; right: 0; top: 26px; z-index: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4rem, 17vw, 11rem); letter-spacing: 0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(240, 189, 98,0.09);
  pointer-events: none; user-select: none; white-space: nowrap;
  will-change: transform;
}
.bg-word.left { left: 0; right: auto; }

@media (prefers-reduced-motion: reduce) {
  .boss-art { animation: none; }
  .reveal, .reveal-l, .reveal-r, .zoom, .wipe, .loom, .world-line,
  .boxall, .boxall-stage figcaption {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important; clip-path: none !important;
  }
  .section-title::after { transition: none; }
  .bg-word { transform: none !important; }
}

/* ---------- demo hub (Phase 2 prelaunch — demo.html) ---------- */
/* หน้าย่อยไม่มี hero เต็มจอ → กันเนื้อหาโดน nav fixed ทับ */
body.subpage { padding-top: 64px; }
.demo-hub { min-height: calc(100svh - 64px - 210px); }
/* แถวบน: ข้อความซ้าย / ภาพกล่องขวา (New สั่ง 2026-08-14 — รูปเต็มกว้างใหญ่ไป) */
.demo-intro {
  display: grid; grid-template-columns: 1fr 440px;
  grid-template-areas: "thanks card" "promo card";
  gap: 28px 48px; align-items: center;
}
.demo-intro-copy { grid-area: thanks; align-self: end; }
.demo-intro .promo-card { grid-area: card; }
.promo-copy-block { grid-area: promo; align-self: start; }
.demo-intro-copy .lead { max-width: none; }
.demo-box { margin: 0; width: 100%; }
.demo-box .boxall { width: 100%; }
/* 3 ทางเข้า = พระเอกของหน้า (New สั่งเน้นให้เด่นกว่า intro) — การ์ดใหญ่ ขอบทอง ปุ่มเต็มกว้าง */
.demo-ways { margin-top: 64px; }
.demo-grid {
  margin-top: 22px; display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}
.demo-status {
  align-self: stretch; margin-top: 10px; text-align: center;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.22em; font-weight: 700;
  color: var(--ink-dim); border: 1px solid var(--line); padding: 12px 14px;
  text-transform: uppercase;
}
.demo-status.live {
  color: var(--gold-ink); background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 22px var(--gold-soft);
}

/* badge buttons (New ส่งภาพ 2026-08-18) — แทนการ์ดข้อความ: ภาพคือปุ่ม, hover ยก+glow */
/* 2×2 ตั้งแต่มีปุ่มที่ 4 (Facebook, New เคาะ 2026-08-28) — คุม max-width ให้ปุ่มขนาดเท่าตอน 3 คอลัมน์ */
.demo-grid.badges {
  /* kicker "Choose your deployment" ตัดออกแล้ว (New 2026-08-28) → margin นี้คือช่องไฟจาก intro ตรงๆ */
  align-items: center; gap: 28px; margin-top: 48px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.demo-badge {
  position: relative; display: block;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.65));
  transition: transform 0.15s, filter 0.15s;
}
.demo-badge img { width: 100%; height: auto; display: block; }
.demo-badge:hover {
  transform: translateY(-4px) scale(1.02);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.7)) drop-shadow(0 0 18px var(--gold-faint));
}
/* ยังไม่มีลิงก์ (JS ใส่ .soon): จาง + ขาวดำ + ป้าย COMING SOON ทับกลาง */
.demo-badge.soon { opacity: 0.45; filter: grayscale(0.85) drop-shadow(0 12px 22px rgba(0,0,0,0.65)); cursor: default; }
.demo-badge.soon:hover { transform: none; }
.demo-badge .demo-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg);
  margin: 0; align-self: auto; white-space: nowrap;
  color: var(--gold); border: 2px solid var(--gold); background: rgba(0,0,0,0.85);
  padding: 8px 16px; font-size: 0.78rem; letter-spacing: 0.26em;
  box-shadow: 0 0 20px rgba(0,0,0,0.9);
}
/* สลับตำแหน่ง 2026-08-26: การ์ด promo อยู่ intro บน (ขวาของ thank you) / รูปกล่องลงล่าง */
.demo-intro .promo-card { max-width: 360px; justify-self: center; }
.promo-copy-block .promo-title { margin-top: 0; }
.demo-intro-copy .gold, .promo-copy-block .gold { color: var(--gold); }
.promo-copy-block .lead { max-width: none; }
.demo-box-bottom { margin: 72px auto 0; max-width: 640px; }
@media (max-width: 900px) {
  .demo-intro .promo-card { max-width: 260px; }
  .demo-box-bottom { margin-top: 56px; }
}
/* (คลาส promo เดิม — ยังใช้กับการ์ดใน intro) */
/* ใช้ล่างสุด index ตั้งแต่ 2026-08-28 (New สั่ง — แทน boss-signup เดิม): copy ซ้าย / การ์ดใหญ่ 360 ขวา แบบหน้า demo */
.promo-reward {
  margin-top: 96px; display: grid; grid-template-columns: 1fr 360px;
  gap: 48px; align-items: center;
}
.promo-copy .signup-form { margin-left: 0; }
/* การ์ดขวาชิดขอบ section (overflow:hidden) → glow โดนตัด (New แจ้ง 2026-08-28): เว้นที่หายใจขวา+ล่าง */
#promo { padding-right: 80px; padding-bottom: 56px; } /* 56/40 ยัง "ติดหน่อยๆ" (New 2026-08-28) — เผื่อ hover scale1.03 ด้วย */
.promo-card { margin: 0; width: 100%; justify-self: center; }
.promo-card img {
  width: 100%; height: auto; display: block;
  overflow: visible; /* กัน UA img{overflow:clip} ตัด ink overflow ของ filter glow */
  transform: rotate(-3deg);
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.7)) drop-shadow(0 0 24px var(--gold-faint));
  transition: transform 0.2s, filter 0.2s;
}
.promo-card img:hover {
  transform: rotate(-1deg) scale(1.03);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.75)) drop-shadow(0 0 34px var(--gold-soft));
}
.promo-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 2rem); letter-spacing: 0.1em;
  margin-bottom: 14px; text-shadow: 0 0 18px var(--gold-faint);
}
.promo-copy .lead { max-width: none; }
.promo-copy .lead b { color: var(--gold); }
@media (max-width: 900px) {
  .promo-reward { grid-template-columns: 1fr; gap: 30px; margin-top: 56px; }
  /* width+justify-self กัน grid item ยุบตอนรูปยังไม่โหลด (บทเรียน story-art) */
  .promo-card { max-width: 280px; }
  /* มือถือ: การ์ดขึ้นก่อน copy (pattern เดียวกับหน้า demo) + ฟอร์มกลับมากลาง */
  .promo-reward .promo-card { order: -1; }
  #promo { padding-right: 0; padding-bottom: 0; } /* มือถือการ์ดอยู่กลาง ไม่ชนขอบ clip */
  .promo-copy { text-align: center; }
  .promo-copy .signup-form { margin-left: auto; }
  .promo-copy .sub-kicker { display: inline-block; }
}
.demo-note {
  margin-top: 26px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--ink-dim); text-transform: uppercase;
}
@media (max-width: 900px) {
  /* มือถือ: การ์ดอยู่เหนือหัวข้อ "Something special..." (New สั่ง 2026-08-26) */
  .demo-intro { grid-template-columns: 1fr; grid-template-areas: "thanks" "card" "promo"; gap: 28px; }
  /* width+justify-self แทน margin:auto — กัน grid item ยุบตอนรูปยังไม่โหลด (บทเรียน story-art) */
  .demo-box { max-width: 520px; justify-self: center; }
  .demo-ways { margin-top: 48px; }
  /* .badges เซ็ตคอลัมน์เองแล้ว (specificity สูงกว่า) → ต้อง override ตรงๆ ให้กลับคอลัมน์เดียว */
  .demo-grid, .demo-grid.badges { grid-template-columns: 1fr; }
  .demo-grid.badges { max-width: none; }
  .demo-hub { min-height: 0; }
}

/* จอแคบกว่า 900px: คอลัมน์ 1fr+500px จะบีบข้อความจนอ่านไม่ได้ → ยุบเป็นคอลัมน์เดียว
   (ภาพ key art ลงไปอยู่ใต้ข้อความ) */
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  /* width+justify-self แทน margin:auto — margin auto ทำให้ grid item shrink-to-fit
     แล้วยุบเหลือ 2px ตอนรูปยังโหลดไม่เสร็จ (เจอจริงตอน verify) */
  .story-art { width: 100%; max-width: 560px; justify-self: center; }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .nav { padding: 12px 16px; }
  .nav .logo { font-size: 1.1rem; letter-spacing: 0.3em; }
  .nav .logo-img { height: 28px; }
  .hs-info, .hs-panel.flip .hs-info { left: 14px; right: 14px; bottom: 14px; max-width: none; text-align: left; }
  .hs-grad, .hs-panel.flip .hs-grad {
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85));
  }
  .boss-stage {
    height: 64vh;
    /* mobile: จอมือถือมืดกว่า desktop มาก — เร่งสว่างขึ้นเยอะให้เห็นรายละเอียด (New แจ้ง "ไม่เห็นหน้าไรเลย") */
    --boss-bright: 0.55;
    /* จูนหลัง fix aspect (New เห็นเว็บ live มือถือจริง 2026-09-07): หน้าอยู่ ~40% ของ stage */
    --boss-shift: -16%;
  }
  /* height:auto จำเป็น — attribute height="2034" ใน HTML ค้างเป็น presentational hint
     ตอน CSS override แค่ width → ภาพโดนบีบข้าง 1.6 เท่า (New แจ้ง "หน้าโดนบี้" จากมือถือจริง 2026-09-07)
     แก้เฉพาะ mobile: desktop สัดส่วนเพี้ยนแค่ ~10% และ New approve หน้าตาปัจจุบันไปแล้ว */
  .boss-art { width: var(--boss-w-m, 240%); height: auto; }
  .who-grid { grid-template-columns: 1fr; gap: 24px; }
  .nge-mark { height: 54px; }
  /* มือถือคอลัมน์เดียว: ภาพกลับเป็นสัดส่วนปกติ ไม่ crop */
  .ads-wrap { height: auto; }
  .ads-wrap .synchro-ads { height: auto; object-fit: contain; }
  /* มือถือจอแคบ: เลิกเหลื่อม เรียงตรงเต็มกว้าง เต็มสเกลภาพเหมือนกัน */
  .hs-panel { width: 100%; height: auto; }
  .hs-panel + .hs-panel { margin-top: 16px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 0.68rem; letter-spacing: 0.1em; }
  .nav-links a.cta { padding: 7px 10px; }
  .section { padding: 70px 18px; }
  .signup-form { flex-direction: column; }
  .story-grid { gap: 28px; margin-top: 44px; }
  /* game features: มือถือยุบคอลัมน์เดียว ข้อความก่อนวิดีโอทุกข้อ */
  .game-feature { grid-template-columns: 1fr; gap: 20px; margin-top: 52px; }
  .game-feature.media-left .feature-media { order: 0; }
  .feature-media, .game-feature.media-left .feature-media { justify-self: center; max-width: 420px; }
}

/* จอเล็กกว่า 400px: nav 4 ลิงก์ (เพิ่ม Demo เฟส 2) พอดีเป๊ะที่ 375px —
   บีบ gap/ฟอนต์ลงอีกนิดกันล้นบนจอ 360px */
@media (max-width: 400px) {
  .nav { padding: 12px 10px; }
  .nav-links { gap: 8px; }
  .nav-links a { font-size: 0.62rem; letter-spacing: 0.06em; }
  .nav-links a.cta { padding: 7px 8px; }
}

/* Pause decorative motion away from the viewport, retaining its current phase. */
.motion-paused .boss-art,
.hero.motion-paused .hero-logo-wrap::before,
.hero.motion-paused .hero-scroll { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-logo-wrap::before, .hero-scroll, .play-ring { animation: none; }
}