/* ==========================================================================
   decks.css — หน้าเปิดไพ่ดิจิทัลบนเว็บ (/decks/)

   แยกจาก .tarot-deck ของหน้า /tarot-reading/ เดิมโดยสิ้นเชิง
   ใช้ชื่อคลาสคนละชุด (.fan / .fan-card) จะได้ไม่ทับกฎกันข้ามหน้า
   สีทั้งหมดมาจาก token ใน style.css ไม่ประกาศสีใหม่
   ========================================================================== */

.deck-app {
  /* .site-header เป็น position: fixed จึงไม่กินที่ในสายเลย์เอาต์
     ทุกหน้าต้องเผื่อระยะบนเอง ไม่งั้นเนื้อหาแรกจะไปนอนอยู่ใต้ header */
  padding-top: var(--header-height);
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

/* --------------------------------------------------------------------------
   แถบหัวเรื่อง
   -------------------------------------------------------------------------- */

.deck-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 5;
  border-bottom: 1px solid var(--gold-a18);
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.deck-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 60px;
}

.deck-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 44px คือขนาดขั้นต่ำที่กดด้วยนิ้วได้ถนัด */
  width: 44px;
  height: 44px;
  margin-inline-start: -0.5rem;

  border-radius: 50%;
  color: var(--color-gold);
  transition: background .2s ease, color .2s ease;
}

.deck-back:hover,
.deck-back:focus-visible {
  background: var(--gold-a10);
  color: var(--color-gold-bright);
}

.deck-bar-title {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-cream);
}

/* --------------------------------------------------------------------------
   ส่วนร่วมของทุกจอ
   -------------------------------------------------------------------------- */

.deck-screen {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

.deck-deckname {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.deck-heading {
  margin-top: 0.35rem;
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-gold-bright);
}

.deck-hint {
  margin-top: 0.4rem;
  font-size: var(--fs-small);
  color: var(--cream-a70);
}

.deck-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* --------------------------------------------------------------------------
   จอ 1 — เลือกรูปแบบการวางไพ่
   -------------------------------------------------------------------------- */

.spread-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.spread-card {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);

  width: 100%;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  text-align: start;

  border: var(--border-gold);
  border-radius: var(--radius-lg);
  background: var(--surface-card-soft);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition),
              background var(--transition);
}

.spread-card:hover,
.spread-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold-a60);
  background: var(--surface-card);
}

/* --- แผนผังไพ่ --- */

.spread-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dg-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(38px, 9vw, 52px);
  aspect-ratio: 100 / 160;

  border: 1px solid var(--gold-a40);
  border-radius: 6px;
  background: var(--gold-a10);
  transition: border-color var(--transition), background var(--transition);
}

.spread-card:hover .dg-card {
  border-color: var(--color-gold);
  background: var(--gold-a18);
}

.dg-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-gold-bright);
  font-size: 0.7rem;
  line-height: 1;
}

.spread-title {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-gold-bright);
}

.spread-desc {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--cream-a70);
}

/* --------------------------------------------------------------------------
   จอ 2 — ช่องรอไพ่
   -------------------------------------------------------------------------- */

.slot-row {
  display: flex;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.25rem);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.slot {
  text-align: center;
}

.slot-box {
  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(72px, 18vw, 104px);
  aspect-ratio: 500 / 857;

  border: 1px dashed var(--gold-a40);
  border-radius: 10px;
  background: rgba(49, 12, 10, 0.35);
  transition: border-color var(--transition), background var(--transition);
}

/* ช่องที่มีไพ่ลงแล้ว — เปลี่ยนเป็นเส้นทึบและสว่างขึ้น */
.slot-box.is-filled {
  border-style: solid;
  border-color: var(--color-gold);
  background: var(--gold-a18);
}

.slot-num {
  font-size: var(--fs-small);
  color: var(--cream-a55);
}

.slot-box.is-filled .slot-num { opacity: 0; }

.slot-name {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--cream-a70);
}

/* --------------------------------------------------------------------------
   จอ 2 — กองไพ่กางเป็นพัด

   จุดหมุนต้องอยู่ใต้ไพ่ลงไปไกลๆ ไม่ใช่ในตัวไพ่
   ถ้าตั้งใกล้ ไพ่จะหมุนอยู่กับที่จนซ้อนเป็นก้นหอย แทนที่จะกางเป็นพัด
   -------------------------------------------------------------------------- */

.fan {
  --card-w: clamp(84px, 15vw, 130px);
  --fan-step: 5deg;      /* องศาห่างระหว่างใบ */
  --fan-lift: 320%;      /* ระยะจุดหมุน นับจากขอบบนของไพ่ */
  --fan-count: 13;

  /* ท่าไพ่ตอนถูกยกขึ้น — ประกาศที่เดียวเพราะใช้ทั้งตอน hover และตอนเริ่มบินลงช่อง
     ถ้าสองที่ใช้ค่าคนละชุด ไพ่จะกระตุกกลับลงหนึ่งจังหวะก่อนบิน */
  --pick-lift: -34px;
  --pick-scale: 1.09;
  --pick-straighten: 0.45;

  position: relative;
  height: calc(var(--card-w) * 1.714 * 1.55);
  margin: clamp(2rem, 6vw, 3.5rem) auto 0;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   ไพ่แต่ละใบ

   ท่าของไพ่คุมด้วยตัวแปร 4 ตัว แล้วประกอบเป็น transform ชุดเดียว
   ทุกสถานะจึงแค่เปลี่ยนค่าตัวแปร ไม่ต้องเขียน transform ซ้ำทั้งก้อน
   ผลคือเบราว์เซอร์ทรานซิชันจากท่าหนึ่งไปอีกท่าได้ต่อเนื่อง ไม่กระตุก
     --spread     เบนออกด้านข้าง (ใช้ตอนใบข้างๆ หลบให้ใบที่ชี้)
     --lift       ยกขึ้น
     --scale      ขยาย
     --straighten 1 = คงมุมพัดเดิม, น้อยลง = ตั้งตรงขึ้น
   -------------------------------------------------------------------------- */

.fan-card {
  /* มุมพัดของใบนี้ — ลบด้วยกึ่งกลางเพื่อให้พัดสมมาตรไม่ว่าจะมีกี่ใบ */
  --angle: calc((var(--i) - (var(--fan-count) - 1) / 2) * var(--fan-step));

  --spread: 0deg;
  --lift: 0px;
  --scale: 1;
  --straighten: 1;

  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--card-w);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;

  transform-origin: 50% var(--fan-lift);

  /* ใบขวาทับใบซ้าย ไม่งั้นเงาซ้อนกันจนดูมั่ว */
  z-index: calc(var(--i) + 1);

  transform:
    translateX(-50%)
    rotate(calc(var(--angle) * var(--straighten) + var(--spread)))
    translateY(var(--lift))
    scale(var(--scale));

  /* แยกจังหวะ: ท่าไพ่ช้าและนุ่ม ส่วนเงาไล่ตามเร็วกว่าเล็กน้อย
     ถ้าใช้เวลาเท่ากันทั้งคู่ เงาจะดูหนืดตามไม่ทันตัวไพ่ */
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1),
    filter 0.3s ease,
    opacity 0.3s ease;

  /* เงาใต้ใบ ทำให้เห็นเป็นไพ่แยกใบตอนซ้อนกัน ไม่กลายเป็นก้อนเดียว */
  filter: drop-shadow(-6px 4px 8px rgba(20, 4, 4, 0.55));
}

.fan-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--gold-a25);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* บอกเบราว์เซอร์ล่วงหน้าเฉพาะตอนเมาส์อยู่ในกองไพ่
   ถ้าเปิดค้างไว้ตลอด จะกินหน่วยความจำเปล่าๆ ทั้งที่ไพ่ไม่ได้ขยับ */
.fan:hover .fan-card { will-change: transform; }

/* --- ท่าตอนถูกเลือกชี้ ---
   ยกขึ้น ขยาย และตั้งตรงขึ้นพร้อมกัน เหมือนดึงไพ่ออกมาจากพัดจริงๆ
   ไม่ใช่แค่เลื่อนขึ้นตรงๆ ทั้งที่ยังเอียงอยู่ */

.fan-card:focus-visible:not(.is-picked) {
  z-index: 99;
  --lift: var(--pick-lift);
  --scale: var(--pick-scale);
  --straighten: var(--pick-straighten);
  filter: drop-shadow(0 16px 32px rgba(20, 4, 4, 0.65));
}

.fan-card:focus-visible:not(.is-picked) img {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 1px var(--gold-a40), 0 0 22px var(--gold-a25);
}

/* กติกา hover แยกไว้ใน (hover: hover) — บนมือถือการแตะจะค้างสถานะ hover ไว้
   ทำให้ไพ่ที่แตะไปแล้วยกค้างจนกว่าจะแตะที่อื่น */
@media (hover: hover) {
  .fan-card:hover:not(.is-picked) {
    z-index: 99;
    --lift: var(--pick-lift);
    --scale: var(--pick-scale);
    --straighten: var(--pick-straighten);
    filter: drop-shadow(0 16px 32px rgba(20, 4, 4, 0.65));
  }

  .fan-card:hover:not(.is-picked) img {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--gold-a40), 0 0 22px var(--gold-a25);
  }

  /* --- ใบข้างๆ หลบให้ ---
     ใบทางขวาของใบที่ชี้เบนขวา ใบทางซ้ายเบนซ้าย เกิดเป็นช่องว่างรอบใบที่ชี้
     ใบที่ติดกันหลบมากกว่าใบที่อยู่ไกล จึงดูเป็นคลื่นไล่ออกไป ไม่ใช่ขยับพร้อมกันทั้งแถว

     :has() ใช้เลือกใบที่อยู่ "ก่อน" ใบที่ถูกชี้ ซึ่ง CSS ไม่มีตัวเลือกพี่น้องย้อนหลัง
     เบราว์เซอร์ที่ยังไม่รองรับจะข้ามกฎนี้ไป ได้แค่ใบขวาหลบ ซึ่งยังใช้งานได้ปกติ */
  .fan-card:hover ~ .fan-card      { --spread: 1.5deg; }
  .fan-card:hover + .fan-card      { --spread: 3.2deg; }

  .fan-card:has(~ .fan-card:hover) { --spread: -1.5deg; }
  .fan-card:has(+ .fan-card:hover) { --spread: -3.2deg; }

  /* ใบที่หลบอยู่จมลงเล็กน้อย ใบที่ชี้จะได้เด่นขึ้นอีก */
  .fan-card:hover ~ .fan-card,
  .fan-card:has(~ .fan-card:hover) {
    --lift: 5px;
    filter: drop-shadow(-6px 4px 8px rgba(20, 4, 4, 0.55)) brightness(0.82);
  }
}

/* --- กางออกมาครั้งแรก: ไพ่บินออกจากกองตรงกลางทีละใบ --- */
.fan.is-dealing .fan-card {
  /* backwards ไม่ใช่ both — both จะล็อกท่าไพ่ไว้ที่เฟรมสุดท้ายตลอดไป
     และอนิเมชันมีลำดับสูงกว่า transform ปกติ ทำให้ hover ใช้ไม่ได้หลังกางจบ
     backwards ให้ผลเหมือนกันตอนหน่วงก่อนเริ่ม แต่ปล่อยคืนให้ CSS ปกติเมื่อจบ */
  animation: fanDeal 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) backwards;
  animation-delay: calc(var(--i) * 45ms);
}

@keyframes fanDeal {
  from {
    opacity: 0;
    transform: translateX(-50%) rotate(0deg) translateY(26px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) rotate(var(--angle)) translateY(0) scale(1);
  }
}

/* --- ใบที่เลือกแล้ว ---
   ตัวอนิเมชันบินลงช่องสั่งจาก decks.js ด้วย Web Animations API ไม่ใช่ CSS
   เพราะต้องย้ายจุดหมุนมากลางไพ่พร้อมชดเชยเมทริกซ์ก่อน ซึ่ง CSS ทำเองไม่ได้
   ตรงนี้จึงเหลือแค่ให้ไพ่อยู่บนสุดและกดซ้ำไม่ได้ */
.fan .fan-card.is-picked {
  z-index: 100;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   จอ 3 — ผล
   -------------------------------------------------------------------------- */

.result-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.result-card {
  display: flex;
  gap: clamp(1rem, 3vw, 1.5rem);
  padding: 1rem;
  border: var(--border-gold);
  border-radius: var(--radius-lg);
  background: var(--surface-card-soft);

  animation: fadeUp 0.5s ease both;
}

.result-card:nth-child(2) { animation-delay: 0.12s; }
.result-card:nth-child(3) { animation-delay: 0.24s; }

.result-face {
  flex: 0 0 clamp(110px, 18vw, 168px);
}

.result-face img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--gold-a25);
}

.result-text {
  min-width: 0;   /* ไม่งั้นข้อความยาวจะดันการ์ดจนล้น */
}

.result-pos {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.result-name {
  margin-top: 0.2rem;
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-gold-bright);
}

.result-hint {
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  color: var(--cream-a70);
}

.result-meaning {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

/* ข้อความชั่วคราวระหว่างที่ยังไม่มีข้อมูลคำทำนาย */
.result-todo {
  margin-top: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--cream-a55);
}

/* --------------------------------------------------------------------------
   จอแคบ
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .spread-card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* จอแคบ วางไพ่ไว้บนข้อความ ไพ่จะได้ใหญ่พอมองเห็นลายชัด */
  .result-card { flex-direction: column; align-items: center; }
  .result-face  { flex: 0 0 auto; width: min(52%, 168px); }
  .result-text  { width: 100%; }

  .spread-diagram { justify-content: flex-start; }

  .fan {
    --card-w: clamp(64px, 22vw, 88px);
    --fan-step: 3.6deg;
  }

  /* ยกน้อยลงเพราะไพ่เล็กลง — แก้ที่ตัวแปร keyframe บินลงช่องจะตามเอง */
  .fan {
    --pick-lift: -18px;
    --pick-scale: 1.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fan-card,
  .spread-card { transition: none; }

  .fan.is-dealing .fan-card,
  .result-card { animation: none; }

  /* ไม่มีอนิเมชันบินแล้ว ต้องซ่อนใบที่เลือกทันที ไม่งั้นค้างอยู่ในพัด */
  .fan-card.is-picked { opacity: 0; }
}

/* ==========================================================================
   จอ 0 — หน้าร้านไพ่ดิจิตอล
   ป้ายสถานะ (ฟรี / ราคา / เป็นเจ้าของแล้ว) อยู่มุมขวาล่างของการ์ดเสมอ
   ========================================================================== */

.deck-store {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.deck-store-card {
  display: flex;
  flex-direction: column;
  border: var(--border-gold);
  border-radius: 14px;
  background: var(--surface-card-soft);
  overflow: hidden;
}

.deck-store-card.is-owned { border-color: rgba(120, 200, 140, 0.45); }

.deck-store-media {
  aspect-ratio: 1 / 1;
  background: var(--gold-a10);
}

.deck-store-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deck-store-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .4rem;
  padding: .9rem;
}

.deck-store-name { margin: 0; font-size: 1rem; }

.deck-store-desc {
  margin: 0;
  font-size: .85rem;
  color: var(--cream-a70);
}

/* ปุ่มอยู่ซ้าย ป้ายสถานะถูกดันไปชิดขวาล่างของการ์ด */
.deck-store-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: auto;
  padding-top: .6rem;
}

.deck-badge {
  margin-left: auto;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  white-space: nowrap;
}

.deck-badge.is-owned  { background: rgba(120, 200, 140, 0.16); color: #8fd6a5; }
.deck-badge.is-free   { background: var(--gold-a10); color: var(--cream-a70); }
.deck-badge.is-member { background: var(--gold-a10); color: var(--cream-a70); }
.deck-badge.is-price  { background: var(--gold-a10); color: var(--color-gold-bright); }

/* ป๊อปอัปเตือนก่อนซื้อไพ่ดิจิตอล — ใช้โครง .modal ของ style.css */
.deck-buy-modal .modal-dialog {
  max-width: 420px;
  text-align: center;
}

.deck-buy-name {
  margin: .35rem 0 0;
  color: var(--color-gold-bright);
}

.deck-buy-note {
  margin: .6rem 0 1.1rem;
  font-size: .9rem;
  color: var(--cream-a70);
}

.deck-buy-modal .modal-actions {
  display: flex;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   คลังไพ่ของฉัน — ปุ่มลอยมุมซ้ายล่าง มีเฉพาะหน้า /decks/
   ========================================================================== */

.deck-library-fab {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: var(--border-gold-strong);
  background: linear-gradient(165deg, #6b1514, #35100d 70%);
  color: var(--color-gold-bright);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.deck-library-fab:hover { border-color: var(--gold-a60); }

.deck-library-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--color-gold);
  color: #35100d;
  font-size: .72rem;
  line-height: 20px;
}

.deck-library-modal .modal-dialog { max-width: 520px; }

.deck-library-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
  text-align: left;
}

.deck-library-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .7rem;
  border: var(--border-gold);
  border-radius: 12px;
  background: var(--surface-card-soft);
}

.deck-library-item img {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

.deck-library-name { flex: 1; font-size: .92rem; }

.deck-library-empty {
  color: var(--cream-a70);
  font-size: .9rem;
}

@media (max-width: 560px) {
  .deck-library-item { flex-wrap: wrap; }
  .deck-library-name { flex: 1 1 100%; }
}