/* ═══════════════════════════════════════════════════════════════════════
   v1.53 «Гадания на картах Таро» (tarots.php) — стол гадания.
   Палитра сайта: фон #05080e, циан #5ee2f0, сине-фиолетовый #5580f7,
   золото #ffb347. Карты ВСЕГДА видны целиком (object-fit: contain).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Выбор расклада ── */
.tt-picker { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tt-chip {
    cursor: pointer;
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    padding: 10px 16px;
    background: rgba(94, 226, 240, .04);
    border: 1px solid rgba(94, 226, 240, .18);
    border-radius: 12px;
    color: rgba(222, 240, 248, .85);
    font: 600 14px/1.2 'Onest', sans-serif;
    transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
}
.tt-chip small { font: 400 11.5px/1.3 'Onest', sans-serif; color: rgba(214, 238, 246, .55); }
.tt-chip:hover { border-color: rgba(94, 226, 240, .45); transform: translateY(-1px); }
.tt-chip.active {
    border-color: rgba(94, 226, 240, .65);
    background: rgba(94, 226, 240, .1);
    box-shadow: 0 0 18px -6px rgba(94, 226, 240, .5);
    color: #eefaff;
}
.tt-desc { margin: 14px auto 0; text-align: center; font: 400 14.5px/1.6 'Onest', sans-serif; color: rgba(214, 238, 246, .7); max-width: 640px; }

/* ── Стол: колода + слоты ── */
.tt-stage { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; margin-top: 22px; }
.tt-deck-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tt-src { font: 400 12px/1.5 'Onest', sans-serif; color: rgba(214, 238, 246, .5); text-align: center; min-height: 18px; }
.tt-src b { font-weight: 600; }
.tt-src b.q  { color: #ffb347; }   /* квантовый — золото */
.tt-src b.p  { color: #5ee2f0; }   /* физический — циан */
.tt-src b.l  { color: #9aa7c7; }   /* локальный — приглушённый */

/* Колода: три лежащие друг на друге рубашки */
.tt-deck { position: relative; width: 190px; aspect-ratio: 2 / 3; perspective: 1000px; }
.tt-back {
    position: absolute; inset: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 179, 71, .4);
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(94, 226, 240, .16), transparent 55%),
        radial-gradient(100% 90% at 50% 110%, rgba(85, 128, 247, .22), transparent 60%),
        linear-gradient(165deg, #14273a, #070d17);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .03);
    transition: transform .35s ease, opacity .35s ease;
}
.tt-back::before {
    content: ''; position: absolute; inset: 9px;
    border: 1px dashed rgba(255, 179, 71, .3);
    border-radius: 9px;
}
.tt-back-l1 { z-index: 3; }
.tt-back-l2 { z-index: 2; transform: translateY(-7px) scale(.965); opacity: .85; }
.tt-back-l3 { z-index: 1; transform: translateY(-13px) scale(.93); opacity: .6; }
.tt-deck:hover .tt-back-l2 { transform: translateY(-9px) translateX(-7px) rotate(-4deg) scale(.965); }
.tt-deck:hover .tt-back-l3 { transform: translateY(-15px) translateX(8px) rotate(5deg) scale(.93); }
.tt-back-star, .tt-back-moon {
    position: absolute; left: 50%; transform: translateX(-50%);
    color: #f0c75e; text-shadow: 0 0 22px rgba(255, 179, 71, .65);
    pointer-events: none;
}
.tt-back-star { top: 34%; font-size: 46px; animation: tt-pulse 2.6s ease-in-out infinite; }
.tt-back-moon { bottom: 12%; font-size: 20px; color: rgba(94, 226, 240, .75); text-shadow: 0 0 18px rgba(94, 226, 240, .6); }
@keyframes tt-pulse { 0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }

/* v1.54: рубашка колоды из админки — картинка вместо нарисованного узора.
   cover: рубашка — заливка на всю карту (как у настоящей колоды);
   нарисованные рамку/звёзды при этом прячем. */
.tt-back-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    display: block;
}
.tt-back.has-img::before { display: none; }
.tt-back.has-img .tt-back-star, .tt-back.has-img .tt-back-moon { display: none; }
.tt-face.back.has-img::before, .tt-face.back.has-img::after { display: none; }

/* «Квантовое зачарование» колоды во время расклада */
.tt-deck.strong { animation: tt-entangle .9s ease-in-out infinite; }
.tt-deck.strong::after {
    content: ''; position: absolute; inset: 0; z-index: 4; border-radius: 14px;
    background: linear-gradient(115deg, transparent 30%, rgba(94, 226, 240, .35) 48%, rgba(255, 255, 255, .18) 50%, rgba(94, 226, 240, .35) 52%, transparent 70%);
    background-size: 260% 100%;
    animation: tt-sweep 1.1s linear infinite;
    pointer-events: none;
}
@keyframes tt-sweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes tt-entangle { 0%, 100% { filter: drop-shadow(0 0 4px rgba(94, 226, 240, .25)); } 50% { filter: drop-shadow(0 0 16px rgba(94, 226, 240, .6)); } }

/* ── Слоты под карты ── */
.tt-slots-zone { min-width: 0; }
.tt-slots { --cw: 150px; display: flex; flex-wrap: wrap; gap: 18px 16px; justify-content: center; align-items: start; min-height: 240px; }
.tt-slots.tt-sp-one { --cw: 185px; }
.tt-slots.tt-sp-cross5 { --cw: 128px; display: grid; grid-template-columns: repeat(3, var(--cw)); gap: 14px; justify-content: center; }
.tt-sp-cross5 .ar-t { grid-column: 2; grid-row: 1; }
.tt-sp-cross5 .ar-l { grid-column: 1; grid-row: 2; }
.tt-sp-cross5 .ar-c { grid-column: 2; grid-row: 2; }
.tt-sp-cross5 .ar-r { grid-column: 3; grid-row: 2; }
.tt-sp-cross5 .ar-b { grid-column: 2; grid-row: 3; }

.tt-slot { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tt-label { font: 600 11.5px/1.25 'Unbounded', sans-serif; color: rgba(155, 234, 255, .75); text-align: center; min-height: 15px; letter-spacing: .02em; }
.tt-slot-box { position: relative; width: var(--cw); aspect-ratio: 2 / 3; perspective: 1100px; }

/* Карта: рубашка ↔ лицо, 3D-переворот */
.tt-card {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transition: transform .75s cubic-bezier(.2, .7, .25, 1);
    /* ⚠ только transform: will-change с opacity — «групповое» свойство,
       оно сплющивает preserve-3d и ломает backface-visibility (карта
       оставалась рубашкой вверх после переворота) */
    will-change: transform;
}
.tt-card.flipped { transform: rotateY(180deg); }
.tt-card.fly { transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)) scale(.55); opacity: 0; }

.tt-face {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 179, 71, .38);
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(94, 226, 240, .14), transparent 55%),
        linear-gradient(165deg, #12243568, #060c15), linear-gradient(165deg, #122435, #060c15);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .85);
}
.tt-face.back::before { content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(255, 179, 71, .3); border-radius: 8px; }
.tt-face.back::after { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .3); color: rgba(240, 199, 94, .8); text-shadow: 0 0 18px rgba(255, 179, 71, .5); }

.tt-face.front { transform: rotateY(180deg); display: flex; flex-direction: column; padding: 7px; gap: 5px; background: linear-gradient(165deg, #10202e, #050a12); }
.tt-front-rot { position: relative; flex: 1 1 auto; min-height: 0; }
.tt-card.rev .tt-front-rot { transform: rotate(180deg); }
.tt-front-rot img {
    width: 100%; height: 100%;
    object-fit: contain;              /* карта видна ЦЕЛИКОМ, без обрезки */
    object-position: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 179, 71, .3);
    background: rgba(5, 10, 18, .6);
    display: block;
}
.tt-front-sym { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .34); color: rgba(240, 199, 94, .85); text-shadow: 0 0 20px rgba(255, 179, 71, .45); }
.tt-card-name { flex: 0 0 auto; font: 700 calc(var(--cw) * .082)/1.2 'Unbounded', sans-serif; color: #eefaff; text-align: center; padding: 0 2px; }
.tt-rev-chip {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    font: 600 9.5px/1 'Onest', sans-serif; letter-spacing: .04em;
    color: #ffd9a1; background: rgba(20, 12, 4, .78);
    border: 1px solid rgba(255, 179, 71, .5);
    border-radius: 999px; padding: 3px 7px;
}

/* Карта вспыхивает при перевороте */
.tt-card.flash { animation: tt-flash .6s ease-out; }
@keyframes tt-flash { 0% { box-shadow: 0 0 0 0 rgba(94, 226, 240, .55); } 100% { box-shadow: 0 0 34px 12px rgba(94, 226, 240, 0); } }

/* Искры на перевороте (спавнит tarots.js) */
.tt-spark { position: fixed; z-index: 90; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fff 0%, #7ee9f5 45%, transparent 70%);
    animation: tt-spark .85s ease-out forwards; }
.tt-spark.gold { background: radial-gradient(circle, #fff 0%, #ffcf7d 45%, transparent 70%); }
@keyframes tt-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ── Вердикт Да/Нет ── */
.tt-verdict { margin-top: 16px; text-align: center; padding: 14px 18px; border-radius: 12px;
    background: rgba(94, 226, 240, .06); border: 1px solid rgba(94, 226, 240, .3); }
.tt-verdict b { display: block; font: 700 21px/1.25 'Unbounded', sans-serif;
    background: linear-gradient(90deg, #5ee2f0, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tt-verdict span { display: block; margin-top: 5px; font: 400 13.5px/1.5 'Onest', sans-serif; color: rgba(214, 238, 246, .75); }
.tt-verdict.no b { background: linear-gradient(90deg, #f0a55e, #ef5350); -webkit-background-clip: text; background-clip: text; }

/* ── Чтение расклада ── */
.tt-reading { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 20px; }
.tt-read { padding: 13px 15px; border-radius: 10px; background: rgba(94, 226, 240, .04); border: 1px solid rgba(94, 226, 240, .14); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.tt-read.show { opacity: 1; transform: none; }
.tt-read h4 { margin: 0 0 4px; font: 700 12px/1.3 'Unbounded', sans-serif; color: #ffb347; letter-spacing: .03em; }
.tt-read .rc-name { font: 700 15.5px/1.3 'Onest', sans-serif; color: #eefaff; }
.tt-read .rc-name i { font-style: normal; font-size: 11px; color: #ffd9a1; border: 1px solid rgba(255, 179, 71, .45); border-radius: 999px; padding: 1.5px 7px; margin-left: 6px; vertical-align: 2px; }
.tt-read .rc-k { margin: 3px 0 6px; font: 600 12.5px/1.4 'Onest', sans-serif; color: #9beaff; }
.tt-read p { margin: 0; font: 400 13.5px/1.62 'Onest', sans-serif; color: rgba(222, 240, 248, .82); }

.tt-empty { grid-column: 1 / -1; text-align: center; font: 400 14px/1.6 'Onest', sans-serif; color: rgba(214, 238, 246, .5); padding: 40px 10px; }

.tt-card-wrap { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ── Мобильная версия ── */
@media (max-width: 860px) {
    .tt-stage { grid-template-columns: 1fr; }
    .tt-deck { width: 150px; }
    .tt-slots { --cw: 104px; gap: 12px 10px; min-height: 200px; }
    .tt-slots.tt-sp-one { --cw: 150px; }
    .tt-slots.tt-sp-cross5 { --cw: 88px; gap: 10px; }
    .tt-label { font-size: 10px; }
    .tt-chip { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 380px) {
    .tt-slots { --cw: 92px; }
    .tt-slots.tt-sp-cross5 { --cw: 78px; }
}

/* Уважение к настройке «меньше анимаций» */
@media (prefers-reduced-motion: reduce) {
    .tt-deck.strong, .tt-deck.strong::after, .tt-back-star, .tt-card, .tt-spark { animation: none !important; transition: none !important; }
    .tt-card.fly { transform: none; opacity: 1; }
}

/* ── v1.55: ссылки на страницы значений арканов в чтении расклада ── */
.rc-name a { color: inherit; text-decoration: underline; text-decoration-color: rgba(240,199,94,.5); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.rc-name a:hover { color: #f0c75e; text-decoration-color: #f0c75e; }