/* ===========================================================================
   assets/css/tarot-mini.css — 🔮 ทาโรต์มินิ ในกล่องพิมพ์
   ---------------------------------------------------------------------------
   [เพิ่ม 3 ก.ย. 2569] แยกจาก composer.css (ไฟล์กลาง) โดยตั้งใจ — โหลดจาก
   app/partials/tarot-mini.php เท่านั้น ส่วน .mes-tarot-post-* (การ์ดที่แทรกลงโพสต์)
   ต้องโหลดตอนอ่านด้วย → layout-head โหลด composer.css ทุกหน้าอยู่แล้ว แต่ไฟล์นี้
   ไม่ได้อยู่ที่นั่น จึงใช้ inline style ที่ SafeHtml อนุญาตเป็นหลักในการ์ดผล
   และไฟล์นี้แค่ "แต่งเพิ่ม" ตอนมี — ไม่พึ่งไฟล์นี้ก็ยังอ่านออก
   =========================================================================== */

/* 🔴 [แก้บั๊ก 3 ก.ย. 2569 — ทาโรต์มินิเปิดแล้วใช้ไม่ได้]
   ---------------------------------------------------------------------------
   โมดัลนี้ถูก render ไว้ "นอก" #composer-modal-overlay โดยตั้งใจ (ดูเหตุผล
   ใน composer.php ตรง require tarot-mini.php — กัน Enter ไป submit โพสต์)
   แต่มันใช้คลาส .mes-modal-overlay ร่วมกับโมดัลอื่น ซึ่ง z-index = 9000

   พอกล่องพิมพ์ถูกยกเป็น 200040 (แก้ปัญหาเครื่องมือถูกหัวเว็บบัง) โมดัลทาโรต์
   ที่อยู่คนละก้อนและยังเป็น 9000 จึงถูกกล่องพิมพ์ทับจนกดอะไรไม่ได้เลย
   — เป็นผลข้างเคียงจากการแก้รอบก่อน ไม่ใช่บั๊กเดิมของทาโรต์

   ต้องสูงกว่ากล่องพิมพ์ (200040) เพราะเปิดทับกล่องพิมพ์อีกที
   ใช้เลขเดียวกับ Mes Studio (200050) เพราะเป็นโมดัลระดับเดียวกัน
   เปิดพร้อมกันไม่ได้อยู่แล้ว จึงไม่ต้องแย่งลำดับกัน
   ⚠️ ถ้าจะเปลี่ยนเลขกล่องพิมพ์อีก ต้องเปลี่ยนที่นี่ตามด้วยเสมอ */
/* [ปรับ 3 ก.ย. 2569 รอบที่ 3] ไม่ต้องตั้งเลขเองแล้ว -- .mes-modal-overlay (คลาสฐานที่ #mes-tarot-modal ใช้ร่วมอยู่แล้ว) อ้างตัวแปรกลาง --mes-z-composer-app จาก composer.css ให้แล้วโดยอัตโนมัติ เก็บบันทึกนี้ไว้เป็นหลักฐาน กันสับสนว่าทำไมไม่มีเลขตรงนี้อีก */

.mes-tarot-box {
    max-width: 560px;
    max-height: 92dvh;
    border-color: rgba(244, 114, 182, .45);
}
.mes-tarot-step { padding: 4px 2px 8px; }
.mes-tarot-lead { margin: 6px 0 12px; color: var(--text-dim, #a1938c); font-size: .9rem; }

/* เลือกแบบ 1/3 ใบ */
.mes-tarot-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mes-tarot-mode {
    background: var(--bg, #0c0a0a);
    border: 1px solid var(--line, #2e2323);
    border-radius: 12px;
    padding: 16px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer; color: inherit; font: inherit;
}
.mes-tarot-mode:hover, .mes-tarot-mode:focus-visible { border-color: #f472b6; }
.mes-tarot-mode-ic { font-size: 1.4rem; letter-spacing: -6px; }
.mes-tarot-mode b { font-size: 1.05rem; }
.mes-tarot-mode small { color: var(--text-mute, #6f6360); font-size: .78rem; }
.mes-tarot-q { display: block; margin-top: 14px; font-size: .84rem; color: var(--text-dim, #a1938c); }
.mes-tarot-q input {
    display: block; width: 100%; margin-top: 5px; box-sizing: border-box;
    background: var(--bg, #0c0a0a); border: 1px solid var(--line, #2e2323);
    border-radius: 9px; color: var(--text, #ece5e0); padding: 9px 11px; font: inherit;
}

/* กางไพ่คว่ำ — แตะเพื่อเปิด (ผู้ใช้เลือกเอง ไม่สุ่มให้ ตามหลักเกมเต็ม) */
.mes-tarot-fan { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px 0 4px; }
.mes-tarot-back {
    width: 52px; height: 84px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(212, 175, 55, .45);
    background:
      repeating-linear-gradient(45deg, rgba(212,175,55,.10) 0 4px, transparent 4px 8px),
      linear-gradient(160deg, #2a1a24, #140c12);
    transition: transform .15s, border-color .15s;
    position: relative;
}
.mes-tarot-back:hover { transform: translateY(-6px); border-color: #f472b6; }
.mes-tarot-back.is-taken { opacity: .25; pointer-events: none; }
.mes-tarot-back::after {
    content: '✦'; position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; color: rgba(212,175,55,.6); font-size: 1.1rem;
}

/* ผล — ไพ่หงาย */
/* [แก้ 3 ก.ย. 2569 ตามคำสั่ง] จัดไพ่ให้หัวเท่ากัน ท้ายเท่ากัน
   align-items:stretch (ค่าเริ่มต้นของ grid) ทำให้ทุกใบสูงเท่าแถวอยู่แล้ว
   แต่ของข้างในยังลอยไม่ตรงกัน จึงทำแต่ละใบเป็น flex คอลัมน์
   แล้วดันคำทำนายให้ยืดเต็มพื้นที่ที่เหลือ → ขอบล่างจึงเสมอกันทุกใบ
   ใบที่เนื้อหาน้อยจะเหลือช่องว่างด้านล่างแทนที่จะทำให้การ์ดเตี้ยกว่าเพื่อน */
.mes-tarot-res { display: grid; gap: 12px; align-items: stretch; }
.mes-tarot-res.is-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .mes-tarot-res.is-3 { grid-template-columns: 1fr; } }
.mes-tarot-card {
    background: var(--bg, #0c0a0a); border: 1px solid rgba(212,175,55,.35);
    border-radius: 12px; padding: 10px; text-align: center;
    animation: mes-tarot-flip .45s ease-out;
    display: flex; flex-direction: column;   /* หัวชิดบน ท้ายยืดเต็ม */
}
/* คำทำนายกินพื้นที่ที่เหลือทั้งหมด → การ์ดทุกใบจบขอบล่างพร้อมกัน */
.mes-tarot-card > p:not(.caution) { flex: 1 1 auto; }
@keyframes mes-tarot-flip { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mes-tarot-card .pos { font-size: .72rem; color: #f472b6; font-weight: 700; margin-bottom: 4px; }
.mes-tarot-card img { width: 100%; max-width: 160px; border-radius: 8px; display: block; margin: 0 auto 6px; }
.mes-tarot-card .face {
    width: 100%; max-width: 160px; aspect-ratio: 5 / 8; margin: 0 auto 6px; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: linear-gradient(160deg, #241a1a, #120c0c); border: 1px solid rgba(212,175,55,.3);
    color: var(--gold, #d4af37);
}
/* [แก้ 3 ก.ย.] ไม่โชว์เลขไพ่แล้ว เหลือแค่ชื่อตามที่สั่ง
   เก็บ .num ไว้เป็นสัญลักษณ์ ✦ อย่างเดียว (ฝั่ง JS ส่งมาแค่นั้นแล้ว) */
.mes-tarot-card .face .num { font-size: 1.6rem; }
.mes-tarot-card .face .nm { font-size: .86rem; padding: 0 6px; font-weight: 600; }
.mes-tarot-card .rev { display: inline-block; font-size: .7rem; color: #e0434d; border: 1px solid #e0434d; border-radius: 999px; padding: 1px 8px; margin-bottom: 4px; }
.mes-tarot-card h4 { margin: 2px 0; font-size: .95rem; }
.mes-tarot-card .en { font-size: .72rem; color: var(--text-mute, #6f6360); }
.mes-tarot-card p { margin: 6px 0 0; font-size: .82rem; line-height: 1.55; text-align: left; color: var(--text, #ece5e0); }
.mes-tarot-card p.caution { color: var(--text-dim, #a1938c); }
.mes-tarot-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; align-items: center; }
.mes-tarot-actions a.composer-pill { text-decoration: none; }
.mes-tarot-err { color: #e0434d; font-size: .85rem; margin: 8px 0 0; }

/* การ์ดที่แทรกลงโพสต์ (แต่งเพิ่มถ้าไฟล์นี้โหลด — inline style เป็นฐาน) */
.mes-tarot-post { border-radius: 14px; }
.mes-tarot-post-card img { border-radius: 8px; }