/* MOCK-DECKMAIN-1 — จอเด็คสุ่มปัดเลือกแมพ ผนวกเป็นฉากหนึ่งของเกมหลัก
   ก๊อปกติกาภาพจาก mock-mapdeck/site/style.css (ground truth ผ่านเครื่องจริงเจ้าของ 07-15) ทั้งดุ้น
   ต่างจากต้นทางเฉพาะการผนวก: position fixed → absolute ใน #scr-deck (เต็ม #stage ซึ่ง = จอมือถือ 390
   เหมือน viewport ของ mapdeck เป๊ะ) · id/คลาสที่ชนกับเกมหลักเปลี่ยนชื่อ (#bg→#deck-bg ·
   #home→#deck-home · #hint→#deck-hint · #toast→#deck-toast · .spark→.dk-spark เพราะเกมหลักมี
   .spark+spark-fly ของตัวเองอยู่แล้ว) · ทุก selector scope ใต้ #scr-deck — ตัวเลขภาพทุกตัวคงเดิม */

#scr-deck {
  background: #05040f;
  font-family: "Leelawadee UI", "Noto Sans Thai", "Thonburi", -apple-system, sans-serif;
  color: #f2eeff;
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  z-index: 25;
}

/* พื้นหลังจักรวาลรวม: ภาพเดียว โหลดครั้งเดียวตลอดชีพ ไม่เปลี่ยนตอนปัด */
#deck-bg {
  position: absolute; inset: 0;
  background: #05040f url('assets/bg-cosmos.webp') center / cover no-repeat;
}

#deck { position: absolute; inset: 0; touch-action: none; }

/* ---------- การ์ด (pool 3 ใบ ใช้หมุนเวียน — โปร่งใส เห็นพื้นหลังรวมทะลุ) ---------- */
#scr-deck .card {
  position: absolute; inset: 0;
  will-change: transform;
  background: transparent;
  overflow: hidden;
}
#scr-deck .card .blob {  /* ก้อนแสง/เนบิวลาเอกลักษณ์แมพ — หลังวงแหวน โหลดตอนจอด แล้วเฟดเข้า */
  position: absolute; pointer-events: none;
  opacity: 0; transition: opacity .28s ease;
}
#scr-deck .card.full .blob { opacity: .92; }
#scr-deck .card .stars { /* กลุ่มดาวจริงจากข้อมูลพิกัด (วาดครั้งเดียวตอน assign — โชว์ทุกโหมด) */
  position: absolute; left: 0; top: 0; pointer-events: none;
}
/* วงแหวนขลัง (สไตล์ต้นแบบพรีวิวแมงป่อง mock-sky) — โชว์ทุกโหมดรวมตอนบิน */
#scr-deck .card .ring {
  position: absolute; pointer-events: none; border-radius: 50%;
  border: 2px dashed var(--ring-c);
  box-shadow: 0 0 18px var(--ring-glow), inset 0 0 18px var(--ring-glow);
  opacity: .55; transition: opacity .35s ease;
}
#scr-deck .card.settled .ring { opacity: .85; animation: ring-spin 26s linear infinite; }
#scr-deck .card .ring::after { /* วงนอกบาง */
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid var(--ring-c); opacity: .35;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
#scr-deck .card .ring.flash { animation: ring-spin 26s linear infinite, ring-flash .9s ease-out 1; }
@keyframes ring-flash {
  0%   { transform: scale(.92); box-shadow: 0 0 6px var(--ring-glow), inset 0 0 6px var(--ring-glow); }
  35%  { transform: scale(1.06); box-shadow: 0 0 46px var(--ring-glow), inset 0 0 30px var(--ring-glow); }
  100% { transform: scale(1); box-shadow: 0 0 18px var(--ring-glow), inset 0 0 18px var(--ring-glow); }
}

/* ดาวระยิบบนใบที่จอด (CSS ล้วน — transform/opacity เท่านั้น) */
#scr-deck .card .twinkles { position: absolute; inset: 0; pointer-events: none; }
#scr-deck .card .tw {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--tw-c) 45%, transparent 70%);
  opacity: 0;
}
#scr-deck .card.settled .tw { animation: tw-pulse var(--tw-dur) ease-in-out var(--tw-delay) infinite alternate; }
@keyframes tw-pulse {
  from { opacity: .15; transform: scale(.7); }
  to   { opacity: .95; transform: scale(1.6); }
}

/* ประกายวูบพิเศษใบคึกตอนจอด (สร้างชั่วคราว ลบทิ้งเมื่อจบ) */
#scr-deck .dk-spark {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd98c 42%, transparent 72%);
  pointer-events: none; opacity: 0;
  animation: dk-spark-fly 1s ease-out 1 forwards;
}
@keyframes dk-spark-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1.25); }
  70%  { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.35); }
}

/* ---------- เวอร์ชันเบา (ตอนบินเร็ว): พื้นนิ่ง + วงแหวน + กลุ่มดาว + ชื่อ ----------
   ชื่อ = ตำแหน่งเดียวถาวรทุกสถานะ (จุดแก้ด่วนเจ้าของ 07-15: ตัวอักษรห้ามเด้ง)
   ตอนบินซ่อนเฉพาะชิป/ของดรอป/ปุ่ม — title-row ไม่ขยับเลย */
#deck.flying .card .blob { opacity: 0; transition: opacity .12s ease; }
#deck.flying .card .chips,
#deck.flying .card .drops-label,
#deck.flying .card .drops { opacity: 0; transition: opacity .12s ease; }

/* ---------- แถบมืดล่าง + ปุ่มเข้าแมพ: ตรึงกับจอ ไม่เลื่อนตามใบ ---------- */
#deck-scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 44%;   /* = 44dvh ของ mapdeck (#stage สูง 100dvh — หน่วยสัดส่วนกัน vh iOS เพี้ยนเหมือนเดิม) */
  background: linear-gradient(180deg, transparent 0%, rgba(5,4,15,.62) 30%, rgba(5,4,15,.92) 72%);
  pointer-events: none;
}
#enter-btn {
  position: absolute; left: 20px; right: 20px; z-index: 35;
  bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 14px 0;
  font: inherit; font-size: 18px; font-weight: 700; color: #1a1030;
  background: linear-gradient(90deg, #ffd98c, #ffb86b);
  border: none; border-radius: 14px; cursor: pointer;
  box-shadow: 0 4px 22px rgba(255,180,90,.32);
}
#enter-btn:active { transform: scale(.97); }
#enter-btn.nudge { animation: dk-nudge .4s ease 1; }
/* ระหว่างปัด/ภาพแมพยังไม่ครบ = เทาแบบ disable → จอดสนิท+ของครบ = ไฟติดกลับเป็นทอง */
#enter-btn { transition: filter .22s ease, box-shadow .22s ease; }
#enter-btn.wait {
  filter: grayscale(1) brightness(.58);
  box-shadow: none;
  pointer-events: none;
}

/* ---------- แผงข้อมูลล่าง (ของประจำใบ — เลื่อนตามใบ) ---------- */
#scr-deck .card .info {
  position: absolute; left: 0; right: 0;
  bottom: calc(78px + env(safe-area-inset-bottom));
  padding: 0 20px;
}
#scr-deck .title-row { display: flex; align-items: baseline; gap: 10px; }
#scr-deck .info .name { font-size: 34px; font-weight: 700; line-height: 1.15; }
#scr-deck .info .latin { font-size: 13px; letter-spacing: 4px; color: rgba(210,202,240,.7); }
#scr-deck .chips { display: flex; gap: 8px; margin-top: 8px; }
#scr-deck .card .chips, #scr-deck .card .drops-label, #scr-deck .card .drops { transition: opacity .15s ease; }
#scr-deck .chip {
  font-size: 12.5px; padding: 4px 12px; border-radius: 20px;
  background: rgba(120,112,170,.22); border: 1px solid rgba(170,160,220,.3);
  color: #d8d2f0;
}
#scr-deck .chip.status.hot {
  background: linear-gradient(90deg, rgba(255,178,64,.28), rgba(255,120,50,.2));
  border-color: rgba(255,190,90,.65); color: #ffd98c;
  text-shadow: 0 0 10px rgba(255,190,90,.6);
}
#scr-deck .chip.sample { display: none; font-size: 11px; opacity: .6; }
#scr-deck .card.is-sample .chip.sample { display: inline-block; }

#scr-deck .drops-label { margin-top: 14px; font-size: 13px; color: rgba(210,202,240,.72); }
#scr-deck .drops { display: flex; gap: 10px; margin-top: 8px; }
#scr-deck .drop {
  width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 6px; border-radius: 12px;
  background: rgba(20,18,44,.6); border: 1px solid rgba(150,140,210,.22);
}
#scr-deck .drop img { width: 38px; height: 38px; object-fit: contain; }
#scr-deck .drop span { font-size: 10.5px; color: rgba(216,210,240,.85); white-space: nowrap; }
#scr-deck .drop.rare { border-color: rgba(255,200,110,.55); box-shadow: 0 0 12px rgba(255,190,90,.18); }
#scr-deck .drop.rare span { color: #ffd98c; }
/* ของดรอปเผยตัวตอนจอด — มี transition ฐานกันวูบหาย (จุดแก้ "ขาดๆ") */
#scr-deck .card .drop {
  opacity: 0; transform: translateY(10px);
  transition: opacity .16s ease, transform .16s ease;
}
#scr-deck .card.settled .drop {
  opacity: 1; transform: translateY(0);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2,.9,.3,1.2);
}
#scr-deck .card.settled .drop:nth-child(1) { transition-delay: .04s; }
#scr-deck .card.settled .drop:nth-child(2) { transition-delay: .08s; }
#scr-deck .card.settled .drop:nth-child(3) { transition-delay: .12s; }
#scr-deck .card.settled .drop:nth-child(4) { transition-delay: .16s; }

@keyframes dk-nudge {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-7px); } 60% { transform: translateX(6px); }
}

/* ---------- ปุ่มกลับบ้าน (ของจริง — กลับจอบ้านเกมหลัก) ---------- */
#deck-home {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 41;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(16,14,38,.72); color: #e8dfb8;
  border: 1px solid rgba(220,195,130,.4); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#deck-home:active { transform: scale(.92); }

/* ---------- คำใบ้ / toast ---------- */
#deck-hint {
  /* แถวบนแนวเดียวกับปุ่มบ้าน — จัดกลางจอจริง (ห้ามเผื่อขอบข้างเดียว: เคยทำเยื้องซ้าย เจ้าของจับได้) */
  position: absolute; left: 0; right: 0; z-index: 30; text-align: center;
  top: calc(10px + env(safe-area-inset-top)); line-height: 42px;
  font-size: 14px; color: rgba(235,230,252,.9); pointer-events: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.8); transition: opacity .5s ease;
}
#deck-hint .arr { display: inline-block; margin: 0 8px; animation: hint-x 1.4s ease-in-out infinite alternate; }
#deck-hint .arr:first-child { animation-name: hint-xl; }
@keyframes hint-x  { from { transform: translateX(0); } to { transform: translateX(7px); } }
@keyframes hint-xl { from { transform: translateX(0); } to { transform: translateX(-7px); } }
#deck-hint.gone { opacity: 0; }
#deck-toast {
  position: absolute; left: 24px; right: 24px; z-index: 46; text-align: center;
  bottom: calc(110px + env(safe-area-inset-bottom));
  background: rgba(14,12,34,.95); border: 1px solid rgba(160,150,220,.35);
  border-radius: 12px; padding: 11px 14px; font-size: 13.5px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#deck-toast.show { opacity: 1; transform: translateY(0); }

/* พับแท็บ = หยุดแอนิเมชันฝั่งเด็คทั้งหมด (เกมหลักมี tab-hidden ของตัวเองอยู่แล้ว — ไม่ก้าวก่าย) */
body.deck-paused #scr-deck * { animation-play-state: paused !important; }