/* ============================================================
   来源：views/tools/west/tarot.html 内联 <style> 第 1 块（原位抽离，50 行）
   说明：在原位置以 <link rel="stylesheet"> 引入，来源顺序不变，
        层叠结果与抽离前逐字一致，不会引起样式变化。
   ============================================================ */
/* —— 选阵 —— */
.tp-sel { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-sel button { border: 1px solid #e8d3b0; background: #fffaf0; color: #54498f; border-radius: 10px; padding: 6px 12px; font-size: .84rem; cursor: pointer; text-align: left; transition: all .15s; }
.tp-sel button:hover { border-color: #8f7fd6; }
.tp-sel button.on { background: linear-gradient(135deg, #c0392b, #8f1017); color: #fff; border-color: #8f1017; box-shadow: 0 4px 12px rgba(93, 71, 201, .28); }
.tp-sel button b { display: block; font-size: .86rem; }
.tp-sel button small { display: block; font-size: .64rem; font-weight: 400; opacity: .82; margin-top: 2px; }
/* —— 牌局 —— */
.tp-banner { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.tp-banner .tt { font-size: 1.02rem; font-weight: 800; color: #3a3256; }
.tp-chip { font-size: .72rem; background: #fdf0e0; color: #a84b3a; border-radius: 12px; padding: 2px 10px; }
.tp-sum { background: linear-gradient(135deg, #fcf3e6, #fbeed8); border: 1px solid #d6cbe9; border-left: 4px solid #c0392b; border-radius: 10px; padding: 11px 15px; color: #4c4185; font-size: .86rem; line-height: 1.9; margin: 12px 0 4px; }
.tp-board { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin-top: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.tp-board .tp-card { flex: 1 1 0; min-width: 132px; max-width: 250px; }
@media (max-width: 700px) { .tp-board .tp-card { min-width: 120px; } }
.tp-card { position: relative; perspective: 900px; animation: tp-deal .5s both; }
.tp-card:nth-child(1) { animation-delay: .05s; }
.tp-card:nth-child(2) { animation-delay: .18s; }
.tp-card:nth-child(3) { animation-delay: .31s; }
.tp-card:nth-child(4) { animation-delay: .44s; }
.tp-card:nth-child(5) { animation-delay: .57s; }
@keyframes tp-deal { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.tp-card .tp-in { position: relative; width: 100%; height: 300px; transform-style: preserve-3d; transition: transform .55s ease; cursor: pointer; }
.tp-card.flipped .tp-in { transform: rotateY(180deg); }
.tp-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden; }
/* 卡背 */
.back { background: linear-gradient(145deg, #e5742c 0%, #c11a23 55%, #7a0d13 100%); border: 1px solid #e5742c; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffe0c2; box-shadow: 0 8px 18px rgba(130, 18, 20, .28); }
.back .pat { font-size: 1.7rem; letter-spacing: 4px; }
.back .pos { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.14); border-radius: 8px; padding: 1px 8px; font-size: .68rem; }
.back .hint { position: absolute; bottom: 8px; left: 8px; right: 8px; text-align: center; font-size: .7rem; opacity: .9; line-height: 1.6; }
.back .openme { margin-top: 10px; font-size: .7rem; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; padding: 2px 10px; }
/* 正面 */
.front { background: #fffdf6; border: 1px solid #e2d3ab; transform: rotateY(180deg); display: flex; flex-direction: column; box-shadow: 0 8px 18px rgba(120, 95, 40, .18); }
.front .f-top { padding: 10px 12px 8px; border-bottom: 1px dashed #eadfc4; }
.front .f-pos { font-size: .7rem; color: #9b6d2f; background: #f9f0da; border: 1px dashed #e5d3a8; border-radius: 10px; padding: 1px 8px; display: inline-block; margin-bottom: 5px; }
.front .f-name { font-size: 1.06rem; font-weight: 800; color: #3a2f17; line-height: 1.3; }
.front .f-en { font-size: .66rem; color: #b39a66; }
.front.rev .f-name { color: #7a3b8f; }
.front .f-badge { display: inline-block; font-size: .66rem; border-radius: 8px; padding: 0 7px; margin-top: 4px; }
.front.rev .f-badge { background: #f9ecd9; color: #8a3fa0; }
.front .f-badge.up { background: #e8f5ec; color: #2e7d32; }
.front .f-body { flex: 1; overflow: auto; padding: 8px 12px; font-size: .76rem; color: #5a5238; line-height: 1.75; }
.front .f-meta { padding: 5px 12px 9px; display: flex; gap: 5px; flex-wrap: wrap; }
.front .f-meta i { font-style: normal; font-size: .64rem; background: #f4efe2; color: #8a7a4e; border-radius: 9px; padding: 1px 8px; }
.tp-face .front .f-adv { flex: 0 0 100%; margin-top: 8px; background: #fff8e8; border: 1px dashed #ecd9a6; color: #9a7a2e; border-radius: 8px; padding: 6px 9px; font-size: .76rem; line-height: 1.7; text-align:left; box-sizing:border-box; }
.tp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tp-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 46px 0; color: #a84b3a; }
.tp-loading .sp { width: 46px; height: 46px; border: 4px solid #ecdcc0; border-top-color: #c0392b; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tp-empty { text-align: center; color: #a39ac9; padding: 40px 10px; font-size: .88rem; line-height: 2; }