/* =============================================================
   Tarocchi — stesa a 3 carte (RWS) con carte da girare al click.
   Colori per seme via classi (niente stili inline).
   ============================================================= */

.tool-hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.tool-intro { color: var(--lavanda); font-size: 1.1rem; margin-bottom: 2.2rem; }

/* Colori per seme (--c usato da dorso, bordo e accenti) */
.sm-maggiore { --c: #E8B95A; }
.sm-coppe    { --c: #4AA3C7; }
.sm-denari   { --c: #CFA14E; }
.sm-spade    { --c: #9AA7C7; }
.sm-bastoni  { --c: #D1642F; }

/* --- Pescata (intro) --- */
.taro-deck-hero {
    position: relative; height: 220px; margin: 1rem 0 2rem;
    display: flex; justify-content: center; align-items: center;
}
.taro-deck-card {
    position: absolute; width: 128px; aspect-ratio: 300 / 519;
    border-radius: 12px; border: 1px solid rgba(232,182,90,.35);
    background:
        radial-gradient(circle at 50% 30%, rgba(232,182,90,.18), transparent 60%),
        linear-gradient(160deg, var(--indaco-700), var(--indaco-900, #0b0b1a));
    box-shadow: 0 14px 40px -18px rgba(0,0,0,.8);
}
.taro-deck-1 { transform: rotate(-10deg) translateX(-30px); }
.taro-deck-2 { transform: rotate(0deg) translateY(-6px); z-index: 2; }
.taro-deck-3 { transform: rotate(10deg) translateX(30px); }
.taro-draw-form { text-align: center; margin-top: .5rem; }

/* Scelta del tema */
.taro-choose {
    font-family: var(--font-display); font-size: 1.25rem; color: var(--panna);
    margin: 0 0 1.1rem;
}
.taro-themes { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.taro-theme {
    padding: .8rem 1.6rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--indaco-600); background: rgba(255,255,255,.02);
    color: var(--lavanda); font-size: 1rem; letter-spacing: .02em;
    transition: border-color .2s var(--ease), background .2s, color .2s, transform .15s;
}
.taro-theme:hover { border-color: var(--oro); color: var(--panna); transform: translateY(-2px); }
.taro-theme:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.taro-theme-amore:hover    { border-color: #E4738B; }
.taro-theme-lavoro:hover   { border-color: #6C7A89; }
.taro-theme-denaro:hover   { border-color: #CFA14E; }
.taro-theme-generale:hover { border-color: #7A4EA3; }

/* Lettura completa (sintesi) */
.taro-synthesis { padding: 1.8rem 2rem; margin: .5rem 0 1.6rem; }
.taro-synthesis .eyebrow { display: block; margin-bottom: 1rem; }
.taro-synthesis p { color: var(--lavanda); font-size: 1.04rem; line-height: 1.65; margin: 0 0 .9rem; }
.taro-syn-intro { color: var(--panna) !important; font-family: var(--font-display); font-size: 1.2rem !important; }
.taro-advice {
    margin: 0 !important; padding-top: .9rem; border-top: 1px solid rgba(232,182,90,.2);
    color: var(--panna) !important;
}

/* --- Stesa --- */
.taro-spread {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.6rem; margin: 1.5rem 0 2rem; align-items: start;
}
.taro-slot { display: flex; flex-direction: column; align-items: center; }
.taro-pos {
    font-family: var(--font-num); text-transform: uppercase; letter-spacing: .18em;
    font-size: .74rem; color: var(--oro); margin-bottom: .8rem;
}

/* Carta con flip 3D */
.taro-card {
    width: 100%; aspect-ratio: 300 / 519;
    perspective: 1200px;
}
.taro-flip {
    display: block; width: 100%; height: 100%; padding: 0; border: 0;
    background: none; cursor: pointer;
}
.taro-inner {
    position: relative; display: block; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform .8s var(--ease);
}
.taro-slot.is-flipped .taro-inner { transform: rotateY(180deg); }
.taro-face {
    position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border: 1px solid var(--c);
}
/* Dorso */
.taro-back {
    background:
        radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c) 40%, transparent), transparent 60%),
        linear-gradient(160deg, var(--indaco-700), var(--indaco-900, #0b0b1a));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 40px -14px var(--c) inset;
}
.taro-back-mark {
    width: 46%; aspect-ratio: 1; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 25%, transparent), transparent 70%);
    position: relative;
}
.taro-back-mark::before {
    content: "✦"; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--c); font-size: 1.8rem;
}
/* Fronte (immagine) */
.taro-front {
    transform: rotateY(180deg);
    background: #0b0b1a;
    display: flex; align-items: center; justify-content: center;
}
.taro-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.taro-card.is-reversed .taro-img { transform: rotate(180deg); }

/* Didascalia (rivelata dopo il flip) */
.taro-caption {
    margin-top: 1rem; text-align: center;
    opacity: 0; transform: translateY(6px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.taro-slot.is-flipped .taro-caption { opacity: 1; transform: none; }
.taro-name { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--panna); margin: 0 0 .2rem; }
.taro-orient {
    font-family: var(--font-num); text-transform: uppercase; letter-spacing: .14em;
    font-size: .68rem; color: var(--c);
}
.taro-meaning { color: var(--lavanda); font-size: .98rem; line-height: 1.55; margin: .5rem 0 0; }

@media (prefers-reduced-motion: reduce) {
    .taro-inner { transition: none; }
    .taro-caption { transition: none; }
}

/* Selezione del tema: radio nascosti + label cliccabili, invio separato */
.taro-theme-radio {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.taro-theme-radio:checked + .taro-theme {
    border-color: var(--oro); color: var(--panna); background: rgba(232,182,90,.08);
}
.taro-theme-radio:focus-visible + .taro-theme {
    outline: 2px solid var(--oro); outline-offset: 2px;
}
.taro-submit { display: flex; margin: 1.8rem auto 0; }