/* ============================================================
   ชวนเพื่อน · ภารกิจปลดล็อกธีมเรือนลับแล (invite-friend.js)
   แผ่นนี้ใช้โทนคืนฮาโลวีนของตัวเองเสมอ ไม่ตามธีมที่เลือกอยู่ — มันคือ "ตัวอย่าง" ของรางวัล
   โทเคนอยู่บน .iv-sheet / .iv-entry เท่านั้น ไม่แตะ :root ของแอป
   ============================================================ */
.iv-sheet, .iv-entry {
  --iv-night: #0b1817;
  --iv-dusk: #142c25;
  --iv-plum: #2d4739;
  --iv-pumpkin: #9dbb92;
  --iv-ember: #d7c293;
  --iv-candle: #e8d7ad;
  --iv-ghost: #f0ead5;
  --iv-mist: rgba(240, 234, 213, .66);
  --iv-line: rgba(189, 164, 113, .28);
  --iv-slime: #acd5b6;
}

.iv-sheet { position: absolute; inset: 0; z-index: 61; display: flex; align-items: flex-end; justify-content: center; }
/* display:flex ชนะ display:none ของ [hidden] — ต้องมีบรรทัดนี้ ไม่งั้นแผ่นใสกินการแตะทั้งแอป (ดู .rp-sheet) */
.iv-sheet[hidden] { display: none; }
.iv-back { position: absolute; inset: 0; background: rgba(8, 3, 16, .66); backdrop-filter: blur(2px); }

.iv-card {
  position: relative; width: 100%; max-width: 440px; max-height: 94%;
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--iv-ghost);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(189, 164, 113, .20), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(166, 227, 93, .08), transparent 60%),
    linear-gradient(180deg, var(--iv-dusk) 0%, var(--iv-night) 70%);
  border: 1px solid var(--iv-line); border-bottom: 0;
  border-radius: 26px 26px 0 0;
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 60px rgba(189, 164, 113, .18), 0 -2px 0 rgba(232, 215, 173, .12) inset;
  display: flex; flex-direction: column; gap: 14px;
  isolation: isolate;
}
.iv-card.iv-in { animation: iv-rise .32s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes iv-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- ฟ้ากลางคืน: จันทร์ ค้างคาว หยากไย่ หมอก ---------- */
.iv-sky {
  position: absolute; inset: 0 0 auto 0; height: 190px; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;
  /* จางลงก้นฟ้า ไม่งั้นหมอกถูกตัดเป็นเส้นตรงพาดกลางตั๋ว */
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.iv-moon {
  position: absolute; top: 8px; right: 62px; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff8e2 0%, #ffe7a8 45%, #f6c86a 100%);
  box-shadow: 0 0 34px 8px rgba(232, 215, 173, .35), 0 0 90px 30px rgba(189, 164, 113, .12);
}
.iv-moon::after { /* หลุมบนดวงจันทร์ */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 64% 62%, rgba(214, 160, 70, .45) 0 4px, transparent 5px),
              radial-gradient(circle at 40% 70%, rgba(214, 160, 70, .35) 0 3px, transparent 4px),
              radial-gradient(circle at 58% 30%, rgba(214, 160, 70, .3) 0 2.5px, transparent 3.5px);
}
.iv-bat { position: absolute; width: 34px; color: #0b0614; fill: currentColor; filter: drop-shadow(0 0 6px rgba(189, 164, 113, .35)); }
.iv-bat svg { width: 100%; display: block; fill: currentColor; }
.iv-bat.b1 { top: 26px; left: 18%; animation: iv-fly 7s ease-in-out infinite; }
.iv-bat.b2 { top: 66px; left: 64%; width: 22px; animation: iv-fly 9s ease-in-out -3s infinite reverse; }
.iv-bat.b3 { top: 14px; left: 48%; width: 16px; animation: iv-fly 11s ease-in-out -6s infinite; opacity: .8; }
@keyframes iv-fly {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  25% { transform: translate(14px, -8px) scaleY(.6); }
  50% { transform: translate(28px, 4px) scaleY(1); }
  75% { transform: translate(10px, 10px) scaleY(.6); }
}
.iv-web { position: absolute; top: 0; left: 0; width: 84px; color: rgba(240, 234, 213, .22); }
.iv-web svg { width: 100%; display: block; }
.iv-fog {
  position: absolute; left: -20%; right: -20%; bottom: 0; height: 70px;
  background: radial-gradient(50% 60% at 30% 100%, rgba(240, 234, 213, .10), transparent 70%),
              radial-gradient(40% 50% at 75% 100%, rgba(240, 234, 213, .08), transparent 70%);
  animation: iv-fog 14s ease-in-out infinite alternate;
}
@keyframes iv-fog { to { transform: translateX(8%); } }

.iv-x {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--iv-line); background: rgba(18, 10, 34, .6); color: var(--iv-ghost);
  font-size: 15px; line-height: 1; cursor: pointer; z-index: 2;
}
.iv-x:focus-visible, .iv-btn:focus-visible, .iv-entry:focus-visible, .iv-redeem summary:focus-visible {
  outline: 2px solid var(--iv-candle); outline-offset: 2px;
}

/* ---------- หัว ---------- */
.iv-head { text-align: center; padding: 40px 8px 0; }
.iv-kicker {
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .22em;
  color: var(--iv-ember); text-shadow: 0 0 12px rgba(189, 164, 113, .6);
}
.iv-head h2 {
  margin: 6px 0 4px; font-size: 22px; line-height: 1.25; font-weight: 800; color: #fff6e6;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 22px rgba(189, 164, 113, .35);
}
.iv-sub { margin: 0; font-size: 13.5px; color: var(--iv-mist); }
.iv-sub b { color: var(--iv-candle); }

/* ---------- ตั๋วเชิญ: QR + รหัส ---------- */
.iv-ticket {
  position: relative; margin: 0 4px; padding: 18px 16px 16px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 246, 230, .07), rgba(255, 246, 230, .03));
  border: 1.5px dashed var(--iv-line);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* รอยเจาะตั๋วสองข้าง */
.iv-ticket::before, .iv-ticket::after {
  content: ''; position: absolute; top: 58%; width: 18px; height: 18px; border-radius: 50%;
  background: var(--iv-night); border: 1.5px dashed var(--iv-line);
}
.iv-ticket::before { left: -10px; clip-path: inset(0 0 0 50%); }
.iv-ticket::after { right: -10px; clip-path: inset(0 50% 0 0); }
.iv-ticket small { font-size: 12px; color: var(--iv-mist); }
.iv-ticket-off p { margin: 4px 0; font-size: 14px; color: var(--iv-mist); }

.iv-qr {
  width: 178px; aspect-ratio: 1; border-radius: 20px; padding: 8px; background: #fff8ec;
  box-shadow: 0 0 0 4px rgba(189, 164, 113, .25), 0 10px 30px rgba(0, 0, 0, .45), 0 0 40px rgba(189, 164, 113, .25);
  display: grid; place-items: center;
}
.iv-qr-svg { width: 100%; height: 100%; display: block; }
.iv-qr-bg { fill: #fff8ec; }
.iv-qr-dot { fill: #1c0d2e; }
.iv-qr-ring { fill: none; stroke: #1c0d2e; stroke-width: 1; }
.iv-qr-pupil { fill: #1c0d2e; }  /* ตาโคมต้องเข้มพอให้กล้องหาเจอ — สีส้มถูกอ่านเป็นช่องสว่าง สแกนไม่ติด */
.iv-qr-pumpkin ellipse { fill: #9dbb92; stroke: #b84a05; stroke-width: .5; }
.iv-qr-pumpkin .stem { fill: #3f7a1e; }
.iv-qr-pumpkin .face { fill: #142c25; }
.iv-qr-none { font-size: 12px; color: #6b5a80; padding: 0 12px; }
.iv-qr-wait { background: rgba(255, 248, 236, .08); }
.iv-candle {
  width: 12px; height: 34px; border-radius: 3px; background: linear-gradient(#fff3d8, #e9cfa0); position: relative;
}
.iv-candle::before {
  content: ''; position: absolute; left: 50%; top: -16px; width: 10px; height: 16px; margin-left: -5px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6c8, #d7c293 60%, rgba(189, 164, 113, 0) 75%);
  animation: iv-flicker 1.2s ease-in-out infinite alternate;
}
@keyframes iv-flicker { from { transform: scale(1) rotate(-3deg); opacity: .9; } to { transform: scale(1.12, .92) rotate(3deg); opacity: 1; } }

.iv-code {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700; font-size: 22px; letter-spacing: .08em;
  color: #fff6e6; text-shadow: 0 0 14px rgba(189, 164, 113, .45);
  user-select: all; -webkit-user-select: all;
}
.iv-code i { font-style: normal; color: var(--iv-pumpkin); }

.iv-btns { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.iv-btn {
  flex: 1; min-height: 46px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--iv-ghost); background: rgba(240, 234, 213, .08); border: 1px solid rgba(240, 234, 213, .18);
  transition: transform .12s ease, filter .12s ease;
}
.iv-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.iv-btn:active { transform: scale(.97); }
.iv-save { width: 100%; justify-content: center; }  /* บันทึกโปสเตอร์ QR · 24 ต.ค. 69 */
.iv-pri {
  color: #2a1000; border-color: transparent;
  background: linear-gradient(180deg, #d7c293 0%, #9dbb92 100%);
  box-shadow: 0 6px 18px rgba(189, 164, 113, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.iv-pri:hover { filter: brightness(1.06); }

/* ---------- ภารกิจ ---------- */
.iv-quests { display: flex; flex-direction: column; gap: 8px; }
.iv-q {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: rgba(240, 234, 213, .05); border: 1px solid rgba(240, 234, 213, .10);
}
.iv-q.done { border-color: rgba(166, 227, 93, .35); background: rgba(166, 227, 93, .07); }
.iv-q-ic { display: flex; gap: 3px; flex: none; }
.iv-slot {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-size: 16px;
  border: 1.5px dashed rgba(189, 164, 113, .45); background: rgba(18, 10, 34, .5);
}
.iv-slot.on { border: 0; background: radial-gradient(circle, rgba(189, 164, 113, .35), transparent 70%); animation: iv-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes iv-pop { from { transform: scale(.4); } to { transform: none; } }
.iv-q-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iv-q-t b { font-size: 14.5px; color: #fff6e6; }
.iv-q-t small { font-size: 12px; color: var(--iv-mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-q-n { font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700; font-size: 14px; color: var(--iv-ember); }
.iv-q.done .iv-q-n { color: var(--iv-slime); }

.iv-reward {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(189, 164, 113, .16), rgba(61, 27, 90, .4));
  border: 1px solid var(--iv-line);
}
.iv-reward > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iv-reward b { font-size: 14.5px; color: var(--iv-candle); }
.iv-reward small { font-size: 12px; color: var(--iv-mist); }
.iv-reward .iv-btn { flex: none; min-height: 40px; }
.iv-lock { font-size: 22px; }
.iv-reward.on { box-shadow: 0 0 24px rgba(189, 164, 113, .3); animation: iv-glow 2.4s ease-in-out infinite alternate; }
@keyframes iv-glow { to { box-shadow: 0 0 36px rgba(189, 164, 113, .5); } }

/* ---------- ใช้รหัสของเพื่อน ---------- */
.iv-redeem { border-radius: 14px; background: rgba(240, 234, 213, .04); border: 1px solid rgba(240, 234, 213, .1); }
.iv-redeem summary { padding: 12px 14px; cursor: pointer; font-size: 14px; color: var(--iv-ember); font-weight: 700; list-style: none; }
.iv-redeem summary::-webkit-details-marker { display: none; }
.iv-redeem summary::after { content: ' ›'; }
.iv-redeem[open] summary::after { content: ' ⌄'; }
.iv-redeem form { display: flex; gap: 8px; padding: 0 12px 12px; }
.iv-redeem input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 12px;
  font: inherit; font-family: 'Space Mono', ui-monospace, monospace; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff6e6; background: rgba(18, 10, 34, .7); border: 1px solid var(--iv-line);
}
.iv-redeem input::placeholder { color: rgba(240, 234, 213, .35); text-transform: none; letter-spacing: 0; }
.iv-redeem .iv-btn { flex: none; }

.iv-fine { margin: 0; text-align: center; font-size: 11.5px; color: rgba(240, 234, 213, .5); }

/* ---------- การ์ดทางเข้าในจอเพื่อน ---------- */
.iv-entry {
  width: 100%; margin: 4px 0 12px; padding: 12px 14px; border-radius: 18px; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px; font: inherit; color: var(--iv-ghost);
  background:
    radial-gradient(80% 120% at 0% 50%, rgba(189, 164, 113, .35), transparent 60%),
    linear-gradient(120deg, var(--iv-plum), var(--iv-night));
  border: 1px solid var(--iv-line);
  box-shadow: 0 8px 22px rgba(42, 19, 64, .35);
}
.iv-entry-art { position: relative; font-size: 30px; line-height: 1; filter: drop-shadow(0 0 10px rgba(189, 164, 113, .6)); }
.iv-entry-art i { position: absolute; top: -8px; right: -14px; width: 20px; color: #0b0614; }
.iv-entry-art i svg { width: 100%; display: block; fill: currentColor; }
.iv-entry-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iv-entry-t b { font-size: 15px; color: #fff6e6; }
.iv-entry-t small { font-size: 12.5px; color: var(--iv-mist); }
.iv-entry-go { font-size: 26px; color: var(--iv-ember); }
.iv-entry.done { border-color: rgba(166, 227, 93, .4); }

/* ปุ่มธีมที่ปลดด้วยภารกิจ — โชว์ไว้ให้เห็นว่ามีอยู่ แต่ติดกุญแจจนกว่าจะครบ */
#themePick button.th-mission { position: relative; opacity: .72; }
#themePick button.th-mission::after {
  content: '🔒'; position: absolute; top: 4px; right: 6px; font-size: 12px;
}

@media (min-width: 700px) {
  .iv-sheet { align-items: center; }
  .iv-card { border-radius: 26px; border-bottom: 1px solid var(--iv-line); }
}
@media (prefers-reduced-motion: reduce) {
  .iv-card.iv-in, .iv-bat, .iv-fog, .iv-candle::before, .iv-slot.on, .iv-reward.on { animation: none !important; }
}

.iv-sky{background:linear-gradient(#0b18171a,#0b1817),url(thai-estate.svg) 50% 40%/cover no-repeat;opacity:.75}
.iv-sky :is(.iv-bat,.iv-web,.iv-moon){display:none}
.iv-entry-art{background:url(thai-estate.svg) center/cover;border:1px solid #bda47166;border-radius:12px;color:transparent}
.iv-entry-art i{display:none}
.iv-theme-try{margin:10px auto 0;display:inline-flex}