/* ============================================================
   mock ประตูบอกทางออกจาก in-app browser — สไตล์ร่วมทุกแบบ
   ฉากหลัง = จุดรับ ✦12 ท้ายพิธี (keep beat) ลอกหน้าตา/คำจากของจริง
   overlay เคารพสองตระกูลของเว็บจริง: ม่านเต็มจอ / กรอบลอย (mv-box)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--ink-950);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }

/* ---------- ฉากหลัง: จุดรับ ✦12 ท้ายพิธี ---------- */
.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-6) var(--space-4) var(--space-5);
  text-align: center;
  gap: var(--space-4);
}
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.scene > * { position: relative; z-index: 1; }
.keep-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--ivory);
  text-wrap: balance;
  line-height: var(--leading-ritual);
  max-width: 24ch;
}
.keep-gold { color: var(--gold-300); }
.keep-gifts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.keep-gifts li {
  max-width: 40ch;
  font-family: var(--font-prose);
  font-weight: 400;
  color: var(--ivory);
  line-height: var(--leading-ritual);
  text-wrap: balance;
}
.keep-gate { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.keep-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  background: transparent;
  color: var(--ivory);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 0.8em 2.2em;
  cursor: pointer;
  transition: box-shadow var(--dur-step) var(--ease-ritual);
}
.keep-btn svg { flex: 0 0 auto; }
.keep-btn:focus-visible { box-shadow: 0 0 28px var(--gold-glow), inset 0 0 14px var(--gold-glow); }
@media (hover: hover) {
  .keep-btn:hover { box-shadow: 0 0 28px var(--gold-glow), inset 0 0 14px var(--gold-glow); }
}
.keep-sub { max-width: 44ch; color: var(--muted); font-size: 0.82rem; line-height: var(--leading-prose); }

/* ---------- ชิ้นร่วมของจอบอกทาง ---------- */
/* จุดหมาย ••• — วงแหวนทองหายใจเกาะมุมขวาบน (ลมหายใจเดียวของจอ) */
.corner-beacon {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  pointer-events: none;
}
.corner-beacon .ring {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 72px;
  height: 72px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  animation: beacon calc(var(--dur-breath) * 2.6) var(--ease-ritual) infinite;
}
.corner-beacon .ring.r2 { animation-delay: calc(var(--dur-breath) * 1.3); }
@keyframes beacon {
  0% { transform: scale(0.55); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .corner-beacon .ring { animation: none; opacity: 0.7; transform: scale(0.85); }
  .corner-beacon .ring.r2 { display: none; }
}
/* ปุ่ม ••• จำลองของ TikTok (อยู่เหนือหน้าเว็บจริง — วางชิดมุมเพื่อชี้ "เหนือขึ้นไปตรงนี้") */
.dots-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0.45em 0.9em;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  color: var(--gold-300);
  font-size: 1rem;
  letter-spacing: 0; /* ตัวเลข/สัญลักษณ์ล้วน */
  line-height: 1;
  background: rgba(4, 6, 15, 0.55);
}
/* เส้นทองวาดตัวเองชี้ขึ้นมุม (pathLength trick) */
.point-arc { position: absolute; pointer-events: none; overflow: visible; }
.point-arc path {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw calc(var(--dur-breath) * 1.5) var(--ease-ritual) 0.4s forwards;
}
.point-arc .head { fill: var(--gold-300); opacity: 0; animation: appear var(--dur-step) var(--ease-ritual) calc(var(--dur-breath) * 1.5) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .point-arc path { animation: none; stroke-dashoffset: 0; }
  .point-arc .head { animation: none; opacity: 1; }
}
/* ปุ่มถอยเงียบ (ตระกูล ow-quiet ของจริง) */
.quiet {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.9em 1.4em; /* hit area พอนิ้ว */
  cursor: pointer;
}
.quiet:focus-visible { color: var(--ivory); outline: none; }
@media (hover: hover) { .quiet:hover { color: var(--ivory); } }

/* ---------- ตระกูล 1: ม่านเต็มจอ (ภาษาม่านคำพยากรณ์) ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  /* ทึบสนิท — บทเรียนภาพจริงสองรอบ: แม้ alpha 0.97 ตัวหนังสืองาช้างข้างหลังยังลอดให้ตาจับได้
     ภาษาม่านของเว็บจริงก็ทึบ (ฟ้า/ดาวยังอยู่เพราะเราวาดดาวใหม่บนม่านได้ ไม่ใช่เพราะโปร่ง) */
  background: var(--ink-950);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-step) var(--ease-ritual);
}
.veil.on { opacity: 1; pointer-events: auto; }
.veil-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(200, 162, 74, 0.45);
  border-radius: 18px;
  pointer-events: none;
}
.veil-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
.veil-label { color: var(--muted); font-size: 0.78rem; }
.veil-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2rem);
  color: var(--gold-300);
  line-height: 1.6;
}
.gold-dotline { display: flex; align-items: center; gap: 0.6em; color: var(--gold-line); width: min(60vw, 14rem); }
.gold-dotline::before, .gold-dotline::after { content: ''; flex: 1; height: 1px; background: var(--gold-line); }
.gold-dotline span { font-size: 0.5rem; color: var(--gold-300); }

/* ---------- ตระกูล 2: กรอบลอย (ภาษา popup พบฟ้า / mv-box) ---------- */
.oc {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(4, 6, 15, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-step) var(--ease-ritual);
}
.oc.on { opacity: 1; pointer-events: auto; }
.oc-box {
  position: relative;
  isolation: isolate;
  width: min(88vw, 22rem);
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(20, 29, 51, 0.75), transparent 70%),
    var(--ink-900);
  border: 1px solid rgba(200, 162, 74, 0.45);
  border-radius: 18px;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform var(--dur-step) var(--ease-ritual);
}
.oc.on .oc-box { transform: none; }
.oc-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.oc-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(4, 6, 15, 0.55);
  border: 1px solid rgba(200, 162, 74, 0.4);
  color: var(--gold-300);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.oc-label { color: var(--muted); font-size: 0.78rem; }
.oc-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gold-300);
  line-height: 1.6;
}
.oc-line {
  font-family: var(--font-prose);
  font-weight: 400;
  color: var(--ivory);
  line-height: var(--leading-ritual);
  max-width: 30ch;
}
.oc-line.oc-gold { color: var(--gold-300); text-wrap: balance; }
.oc-fine { color: var(--muted); opacity: 0.75; font-size: 0.8rem; line-height: 1.7; max-width: 32ch; }
.ow-pill {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  background: transparent;
  color: var(--gold-300);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 0.7em 2em;
  cursor: pointer;
  transition: box-shadow var(--dur-step) var(--ease-ritual), color var(--dur-step);
}
.ow-pill:focus-visible { color: var(--ivory); box-shadow: 0 0 28px var(--gold-glow), inset 0 0 14px var(--gold-glow); }
@media (hover: hover) { .ow-pill:hover { color: var(--ivory); box-shadow: 0 0 28px var(--gold-glow), inset 0 0 14px var(--gold-glow); } }

/* ก้อนคำห้ามหั่น — WebKit ไม่เคารพ U+2060 กับคำไทย (พิสูจน์จากภาพจริง 390@3x) */
.nb { white-space: nowrap; }

/* ---------- ขั้นตอน 1-2 แบบจารึก ---------- */
.steps { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.step { display: flex; align-items: center; gap: var(--space-3); text-align: left; max-width: 21rem; }
.step-num {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  color: var(--gold-300);
  font-size: 0.95rem;
}
.step-text { font-size: 1.02rem; line-height: 1.7; font-weight: 400; }
.step-text .menu-word { color: var(--gold-300); }
.step-text .dots-chip { font-size: 0.8rem; padding: 0.3em 0.7em; margin: 0 0.15em; vertical-align: -0.15em; }

/* ---------- แถบชี้ทางของผู้รีวิว (ไม่ใช่ส่วนหนึ่งของดีไซน์) ---------- */
.rev {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.5em 0.9em calc(0.5em + env(safe-area-inset-bottom));
  background: rgba(4, 6, 15, 0.85);
  border-top: 1px dashed rgba(139, 147, 168, 0.35);
  font-size: 0.78rem;
  color: var(--muted);
}
.rev a { color: var(--muted); text-decoration: none; padding: 0.5em 0.7em; }
.rev a:hover, .rev a:focus-visible { color: var(--ivory); }
.rev .rev-name { flex: 1; text-align: center; }