/* 塔羅牌抽牌頁專用樣式；共用元件沿用 site.css */
.tr-fun { background: #fff7ed; border-left: 4px solid var(--warn); padding: 10px 14px; border-radius: 6px; font-size: 1rem; margin: .75rem 0; }
.tr-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.tr-modes .btn { flex-direction: column; gap: 2px; flex: none; min-height: 52px; line-height: 1.3; padding: 6px 8px; }
.tr-chk { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.tr-chk input { width: 22px; height: 22px; flex: none; }
.tr-draw { display: block; width: 100%; max-width: 480px; margin: 12px auto 4px; min-height: 52px; font-size: 1.2rem; }
.tr-out { display: grid; gap: 14px; margin-top: 12px; grid-template-columns: 1fr; }
.tr-out.n1 { max-width: 320px; margin-left: auto; margin-right: auto; }
.tr-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.tr-pos { margin: 0 0 6px; font-weight: 700; color: var(--brand-dark); text-align: center; }
.tr-flip { position: relative; width: min(100%, 200px); margin: 0 auto; aspect-ratio: 300 / 520; perspective: 800px; }
.tr-face { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; transition: transform .6s; overflow: hidden; background: #f3f5f8; }
.tr-front { transform: rotateY(0deg); }
.tr-back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #1e3a8a 0 8px, #27479f 8px 16px); box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px #1e3a8a; }
.is-down .tr-front { transform: rotateY(-180deg); }
.is-down .tr-back { transform: rotateY(0deg); }
.tr-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.is-rev .tr-img { transform: rotate(180deg); }
.tr-info h3 { margin: 10px 0 2px; font-size: 1.15rem; line-height: 1.4; }
.tr-en { font-size: .95rem; color: var(--muted); font-weight: 400; }
.tr-state { margin: 0 0 6px; font-weight: 700; }
.tr-state.up { color: var(--ok); }
.tr-state.rev { color: var(--bad); }
.tr-group { color: var(--muted); font-weight: 400; font-size: .95rem; }
.tr-kw, .tr-text { margin: 4px 0; font-size: 1rem; }
.tr-shuffle { position: relative; height: 200px; width: 130px; margin: 0 auto; }
.tr-shuffle span { position: absolute; left: 0; top: 20px; width: 120px; height: 170px; border-radius: 8px; background: repeating-linear-gradient(45deg, #1e3a8a 0 8px, #27479f 8px 16px); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px #1e3a8a, 0 1px 3px rgba(0,0,0,.3); animation: tr-sh .55s ease-in-out infinite alternate; }
.tr-shuffle span:nth-child(2) { animation-delay: .08s; }
.tr-shuffle span:nth-child(3) { animation-delay: .16s; }
.tr-shuffle span:nth-child(4) { animation-delay: .24s; }
.tr-shuffle span:nth-child(5) { animation-delay: .32s; }
@keyframes tr-sh { from { transform: translateX(-14px) rotate(-4deg); } to { transform: translateX(14px) rotate(4deg); } }
.tr-source li { margin: .35rem 0; }
@media (min-width: 560px) { .tr-out.n3 { grid-template-columns: repeat(3, 1fr); } .tr-out.n5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tr-out.n5 { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tr-face { transition: none; } .tr-shuffle span { animation: none; } }