/* ============================================================
   Tarot Games — Common Stylesheet
   All selectors are namespaced with .ts- to avoid collisions.
   ============================================================ */

/* ---------- Custom properties ---------- */
:root {
    --ts-gold:          #D4AF37;
    --ts-gold-dim:      rgba(212,175,55,0.35);
    --ts-gold-glow:     rgba(212,175,55,0.15);
    --ts-dark:          #0a0708;
    --ts-dark-mid:      #130f10;
    /* Mobile-first card sizing:
       width-derived: 25vw — phone portrait baseline (≈ 95 px on 380 px screen)
       height-derived: 16vh — keeps card-h around 30% of viewport-h so two cards
                              + altar fit vertically without scroll
       floor 70 px / cap 130 px so we never disappear on tiny screens or
       overgrow on huge ones. Larger card caps are added in min-width tiers. */
    --ts-vh:            1vh;
    --ts-card-w:        max(70px, min(25vw, calc(16 * var(--ts-vh)), 130px));
    --ts-card-h:        calc(var(--ts-card-w) * 1.928); /* actual image ratio: 1817×3500 */
    --ts-card-radius:   8px;
    --ts-font:          'Georgia', 'Times New Roman', serif;
}

/* ---------- Game wrapper ---------- */
.ts-game {
    position:       relative;
    width:          100%;
    min-height:     100%;
    height:         auto;
    background:     var(--ts-dark);
    font-family:    var(--ts-font);
    color:          #e8dcc8;
    user-select:    none;
    -webkit-user-select: none;
    touch-action:   pan-y;
    display:        flex;
    flex-direction: column;
    overflow-y:     hidden;
    
    will-change:    height;

    /* Tapete de fondo global */
    background-image:    var(--ts-tapete);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

/* --- Fix for floating header jumping --- */
header.fixed-menu {
    animation: none !important;
}

/* ---------- Scenes ---------- */
.ts-scene {
    position:   relative;
    width:      100%;
    flex:       1;
    display:    flex;
    align-items:    center;
    justify-content: center;
    flex-direction: column;
}

/* --- Common Card & Altar components --- */
.ts-card-wrapper {
    position:       relative;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.75rem;
    cursor:         grab;
    pointer-events: auto;
    touch-action:   none;
}

.ts-card-wrapper--dragging {
    cursor: grabbing;
}

.ts-card-wrapper:focus-visible {
    outline: 2px solid var(--ts-gold);
    outline-offset: 8px;
    border-radius: 4px;
}

.ts-card {
    width:          var(--ts-card-w);
    height:         var(--ts-card-h);
    border-radius:  var(--ts-card-radius);
    overflow:       hidden;
    box-shadow:     0 8px 30px rgba(0,0,0,0.7);
    transform:      rotate(var(--tilt, 0deg));
    position:       relative;
}

.ts-card img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    background: var(--ts-dark);
    display:    block;
    pointer-events: none;
}

.ts-card-face {
    width:  100%;
    height: 100%;
}

.ts-card--hover {
    transform:  translateY(-10px) rotate(var(--tilt, 0deg)) scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 25px rgba(212,175,55,0.2);
}

.ts-altar {
    width:         var(--ts-card-w);
    height:        var(--ts-card-h);
    border:        2px dashed rgba(212,175,55,0.45);
    border-radius: var(--ts-card-radius);
    background:    rgba(212,175,55,0.05);
    position:      relative;
}

/* Reset for MultiPickCard widgets to avoid double borders and layout issues */
.ts-altar:has(.ts-altar__visual) {
    width:      auto;
    height:     auto;
    border:     none;
    background: none;
    display:    flex;
    flex-direction: column;
    align-items:    center;
}

.ts-altar__visual {
    width:         var(--ts-card-w);
    border:        2px dashed rgba(212,175,55,0.45);
    border-radius: var(--ts-card-radius);
    background:    rgba(212,175,55,0.05);
    position:      relative;
    display:       flex;
    flex-direction: column;
    align-items:    center;
}

.ts-altar--active .ts-altar__visual {
    border-color: var(--ts-gold);
    border-style: solid;
    background:   rgba(212,175,55,0.08);
    box-shadow:   0 0 30px rgba(212,175,55,0.35), inset 0 0 20px rgba(212,175,55,0.1);
}

.ts-altar-glow {
    position:      absolute;
    inset:         -16px;
    border-radius: calc(var(--ts-card-radius) + 4px);
    background:    radial-gradient(ellipse, rgba(212,175,55,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.ts-altar--active {
    border-color: var(--ts-gold);
    border-style: solid;
    background:   rgba(212,175,55,0.08);
    box-shadow:   0 0 30px rgba(212,175,55,0.35), inset 0 0 20px rgba(212,175,55,0.1);
}

/* --- Pick Card Scene (Shared) --- */
.ts-scene--pick {
    position:      relative;
    width:         100%;
    min-height:    100%;
    flex:          1 1 auto;
    touch-action: pan-y;
    overflow:     visible;
    display:      flex;
    flex-direction: column;
    padding-top:   10px;
}

.ts-pick-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 10px;
}

.ts-sacred-space {
    position: relative;
    width:    100%;
    flex:     0 0 auto;
    min-height: 140px;
    display:  flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.ts-scene--pick .ts-altar {
    margin: 0 auto;
}

.ts-tapestry-area {
    position: relative;
    width:    100%;
    flex:     0 0 auto;
    height:   35vh;
    max-height: 550px;
    cursor:   grab;
    overflow: visible;
    z-index:  20;
}

.ts-tapestry-area:active {
    cursor: grabbing;
}

.ts-tapestry {
    position: absolute;
    top:      0;
    left:     0;
    height:   100%;
    pointer-events: none;
    will-change: transform;
}

.ts-tapestry .ts-card-wrapper {
    position: absolute;
    width:    var(--ts-card-w);
    height:   var(--ts-card-h);
    pointer-events: auto;
    will-change: transform;
}

.ts-tapestry-fade {
    position: absolute;
    z-index: 500; /* Sobre el tapete y mazo, bajo los textos interactivos y cartas seleccionadas */
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0;
}

.ts-tapestry-fade--left,
.ts-tapestry-fade--right {
    top: -40px;
    bottom: -20px;
    width: 80px;
}

.ts-tapestry-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--ts-dark), transparent);
}

.ts-tapestry-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--ts-dark), transparent);
}


.ts-altar-card-shape {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: var(--ts-card-radius);
}

.ts-scene--reveal {
    position:   relative;
    width:      100%;
    min-height: 100%;
    flex:       1 0 auto;
    display:    flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 2rem;
}

/* ---------- Tapete background ---------- */
/* El tapete se gestiona ahora de forma global en .ts-game para asegurar cobertura total */
.ts-tapete {
    display: none;
}

/* ============================================================
   PHASE 1 — Intention
   ============================================================ */
.ts-scene--intention {
}

/* Vignette overlay */
.ts-vignette {
    position:   absolute;
    inset:      0;
    pointer-events: none;
}

.ts-vignette--active {
    opacity: 1.2;
}

.ts-vignette--focused {
    opacity: 0;
}

.ts-intention-content {
    position:    relative;
    z-index:     2;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         1.2rem;
    padding:     2rem 1.5rem;
    max-width:   520px;
    width:       90%;
    text-align:  center;
}

.ts-intention-subtitle {
    font-size:      1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--ts-gold);
    opacity:        0.7;
    margin:         0;
}

.ts-intention-title {
    font-size:   clamp(1.6rem, 5vw, 2.5rem);
    font-weight: normal;
    letter-spacing: 0.05em;
    margin:      0;
    color:       #f0e6d3;
    text-shadow: 0 0 40px rgba(212,175,55,0.25);
}

.ts-intention-hint {
    font-size:   1rem;
    color:       rgba(232,220,200,0.55);
    margin:      0;
    font-style:  italic;
}

.ts-intention-form {
    width:       100%;
    box-sizing:  border-box;
}

.ts-intention-label {
    align-self:     stretch;
    font-size:      0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          rgba(212,175,55,0.7);
    text-align:     left;
    margin:         0.6rem 0 -0.4rem 0.15rem;
}

.ts-intention-select {
    width:          100%;
    background:     rgba(255,255,255,0.04);
    border:         1px solid rgba(212,175,55,0.25);
    border-radius:  6px;
    color:          #f0e6d3;
    font-family:    var(--ts-font);
    font-size:      1rem;
    line-height:    1.6;
    padding:        0.85rem 1.1rem;
    outline:        none;
    
    appearance:     none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ts-gold) 50%),
        linear-gradient(135deg, var(--ts-gold) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size:    6px 6px, 6px 6px;
    background-repeat:  no-repeat;
    cursor:         pointer;
}

.ts-intention-select:focus {
    border-color: var(--ts-gold);
    box-shadow:   0 0 20px rgba(212,175,55,0.12);
}

.ts-intention-select option {
    background: var(--ts-dark);
    color:      #f0e6d3;
}

.ts-intention-input {
    width:          100%;
    background:     rgba(255,255,255,0.04);
    border:         1px solid rgba(212,175,55,0.25);
    border-radius:  6px;
    color:          #f0e6d3;
    font-family:    var(--ts-font);
    font-size:      1rem;
    line-height:    1.6;
    padding:        0.9rem 1.1rem;
    resize:         none;
    outline:        none;
    
    text-align:     center;
}

.ts-intention-input:focus {
    border-color: var(--ts-gold);
    box-shadow:   0 0 20px rgba(212,175,55,0.12);
}

.ts-intention-input::placeholder {
    color:   rgba(232,220,200,0.3);
    font-style: italic;
}

/* ---------- Buttons ---------- */
.ts-btn {
    cursor:         pointer;
    border:         1px solid var(--ts-gold);
    border-radius:  4px;
    background:     transparent;
    color:          var(--ts-gold);
    font-family:    var(--ts-font);
    font-size:      1.1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding:        0.75rem 2.5rem;
    
}

.ts-btn:not(:disabled):hover {
    background: var(--ts-gold);
    color:      var(--ts-dark);
    box-shadow: 0 0 30px rgba(212,175,55,0.35);
}

.ts-btn:disabled {
    opacity:  0.3;
    cursor:   not-allowed;
}

.ts-btn--primary {
    padding: 0.85rem 3rem;
}

.ts-btn--secondary {
    font-size: 0.95rem;
    padding:   0.6rem 1.8rem;
    opacity:   0.8;
}

/* ============================================================
   PHASE 2 — Shuffle
   ============================================================ */
.ts-scene--shuffle {
    cursor:       none;
    /* Allow native vertical scroll. Shuffle is handled by pointer events. */
    touch-action: pan-y;
}

.ts-shuffle-canvas {
    position:       absolute;
    inset:          0;
    pointer-events: none;
}

.ts-deck-zone {
    position: relative;
    display:  flex;
    align-items: center;
    justify-content: center;
    width:  200px;
    height: 200px;
    /* Block browser scroll on the deck to allow shuffle gestures. */
    touch-action: none;
}

.ts-deck-stack {
    position:   relative;
    width:      var(--ts-card-w);
    height:     var(--ts-card-h);
    
    filter:     drop-shadow(0 8px 30px calc(var(--glow-intensity, 0.3) * rgba(212,175,55,0.8)));
}

.ts-deck-card {
    position:       absolute;
    width:          100%;
    height:         100%;
    border-radius:  var(--ts-card-radius);
    background:     #1c1520;
    border:         1px solid rgba(212,175,55,0.2);
    box-shadow:     0 4px 20px rgba(0,0,0,0.6);
}

.ts-deck-card--3 { transform: translate(-5px,-5px) rotate(-2deg); }
.ts-deck-card--2 { transform: translate(-3px,-3px) rotate(-1deg); }
.ts-deck-card--1 { transform: translate(-1px,-1px) rotate( 0.5deg); }
.ts-deck-card--top {
    background: linear-gradient(135deg, #241b28 0%, #1c1320 100%);
    border:     1px solid rgba(212,175,55,0.35);
}

.ts-deck-stack--ready {
}

/* Idle: gentle float to invite interaction */
.ts-deck-stack--idle {
}

/* Active: energetic wiggle while user shuffles */
.ts-deck-stack--shuffling {
}



/* Circular progress ring */
.ts-deck-ring {
    position:       absolute;
    inset:          -30px;
    pointer-events: none;
}

.ts-ring-svg {
    width:  100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ts-ring-track {
    fill:           none;
    stroke:         rgba(212,175,55,0.1);
    stroke-width:   3;
}

.ts-ring-fill {
    fill:               none;
    stroke:             var(--ts-gold);
    stroke-width:       3;
    stroke-linecap:     round;
    stroke-dasharray:   276.46; /* 2π × 44 */
    stroke-dashoffset:  276.46;
    filter:             drop-shadow(0 0 6px rgba(212,175,55,0.8));
}

/* ============================================================
   PHASE 4 — Reveal
   ============================================================ */

.ts-reveal-question {
    position:      relative;
    width:         90%;
    max-width:     90%;
    text-align:    center;
    font-size:     clamp(1.3rem, 4vw, 1.8rem);
    font-style:    italic;
    line-height:   1.4;
    color:         #f4ecd8;
    background:    rgba(0,0,0,0.55);
    border:        1px solid rgba(212,175,55,0.35);
    border-radius: 8px;
    padding:       0.75rem 1.4rem;
    box-shadow:    0 4px 20px rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 5;
    margin-top: 5%;
}

.ts-reveal-stage {
    position:       relative;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
    flex:           1 1 auto;
    padding:        40px 0;
    box-sizing:     border-box;
}

.ts-reveal-stage--revealed {
    min-height:      0;
    flex:            0 0 auto;
    justify-content: flex-start;
    padding-top:     30px;
    padding-bottom:  0;
}

.ts-reveal-cards-container {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    align-items:     baseline;
    gap:             40px 20px;
    width:           100%;
    max-width:       1000px;
    margin:          0 auto 20px;
    position:        relative;
}

.ts-reveal-stage--revealed .ts-reveal-cards-container {
    min-height:      0;
}

/* Visual Timer for Auto-Reveal */
.ts-reveal-timer {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 20;
}

.ts-reveal-timer--visible {
    opacity: 1;
}

.ts-reveal-timer-fill {
    height: 100%;
    width: 100%;
    background: var(--ts-gold);
    transform-origin: left;
    transform: scaleX(0);
}

.ts-reveal-card-wrapper--in-grid {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto;
}

.ts-reveal-card-wrapper--in-grid .ts-reveal-card-scaler {
    transform: none !important;
}

.ts-reveal-card-wrapper--in-grid .ts-grid-pos,
.ts-reveal-card-wrapper--in-grid .ts-grid-name,
.ts-reveal-card-wrapper--in-grid .ts-result-card-name {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
}

.ts-reveal-card-wrapper--in-grid .ts-reveal-card-shadow {
    opacity: 0;
}

.ts-reveal-grid {
    display:             grid;
    grid-template-columns: repeat(4, 1fr);
    width:               95%;
    max-width:           800px;
    gap:                 100px 10px;
    margin:              0 auto;
    opacity:             0;
}

@media (max-width: 767px) {
    .ts-reveal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 80px 10px;
    }
}

.ts-reveal-grid--visible {
    opacity: 1;
}

.ts-grid-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
}

.ts-grid-pos {
    font-size:      clamp(0.7rem, 2vw, 0.95rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ts-gold);
    min-height:     1.2em;
    text-align:     center;
    white-space:    normal;
}

.ts-grid-pos:empty,
.ts-card-widget__label:empty,
.ts-altar__label:empty {
    display: none;
}

.ts-grid-card-target {
    width:          calc(var(--ts-card-w) * 0.65);
    height:         calc(var(--ts-card-h) * 0.65);
    border:         none;
    border-radius:  var(--ts-card-radius);
    position:       relative;
}

.ts-grid-name {
    font-size:      clamp(0.85rem, 2.5vw, 1.1rem);
    color:          #e8dcc8;
    text-align:     center;
    min-height:     2.4em;
    display:        flex;
    align-items:    center;
    justify-content: center;
    line-height:    1.2;
}

.ts-scene--reveal .ts-card-widget {
    position:   relative;
    top:        auto;
    left:       auto;
    transform:  none;
    margin:     0 auto;
}

.ts-card-widget {
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    perspective: 1000px;
    z-index:     10;
}

.ts-card-widget__scaler,
.ts-altar__scaler {
    width:              100%;
    height:             100%;
    position:           relative;
    transform-origin:   center center;
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    transform-style:    preserve-3d;
}

.ts-card-widget__visual,
.ts-altar__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ts-card-widget__label,
.ts-altar__label {
    font-size:      clamp(0.75rem, 2.2vw, 0.9rem);
    color:          var(--ts-gold);
    min-height:     1.2em;
    text-align:     center;
    white-space:    normal;
}

.ts-card-widget__name,
.ts-altar__name {
    font-size:      1rem;
    font-weight:    700;
    color:          #e8dcc8;
    text-align:     center;
    min-height:     2.4em;
    display:        flex;
    align-items:    center;
    justify-content: center;
    line-height:    1.2;
}

.ts-reveal-card-wrapper {
}

.ts-reveal-card-scaler {
}

.ts-reveal-card {
    width:          var(--ts-card-w);
    height:         var(--ts-card-h);
    cursor:         ew-resize;
    touch-action:   pan-y;
    outline:        none;
}

.ts-reveal-card:focus-visible {
    outline: 2px solid var(--ts-gold);
    outline-offset: 8px;
    border-radius: var(--ts-card-radius);
}

.ts-reveal-card-inner {
    width:              100%;
    height:             100%;
    position:           relative;
    transform-style:    preserve-3d;
    border-radius:      var(--ts-card-radius);
    box-shadow:         0 12px 50px rgba(0,0,0,0.8);
}

.ts-reveal-card-back,
.ts-reveal-card-front {
    position:           absolute;
    inset:              0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius:      var(--ts-card-radius);
    overflow:           hidden;
}

.ts-reveal-card-front {
    transform: rotateY(180deg);
}

.ts-reveal-card-back img,
.ts-reveal-card-front img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    background: var(--ts-dark);
    display:    block;
    pointer-events: none;
}

.ts-reveal-card-shadow {
    position:       absolute;
    bottom:         -20px;
    left:           10%;
    right:          10%;
    height:         40px;
    background:     radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
    filter:         blur(10px);
    pointer-events: none;
    
}

.ts-reveal-card-wrapper--revealed .ts-reveal-card-shadow {
    transform: translateY(-10px) scaleX(1.2);
}

.ts-reveal-card--revealed {
}

/* Breathe targets the front face only — never the preserve-3d container,
   which would flatten the 3D context and flip the card back to the back face. */
.ts-reveal-card--breathe .ts-reveal-card-front {
}

/* Result overlay */
.ts-reveal-result {
    position:   relative;
    width:      90%;
    max-width:  760px;
    margin:     20px auto;
    display:    none;
    flex-direction: column;
    align-items: center;
    gap:        1.2rem;
    opacity:    0;
    transform:  translateY(15px);
    text-align: center;
    z-index:    50;
}

.ts-text-header {
    display:    block;
    font-size:  1.2rem;
    font-weight: 700;
    color:      var(--ts-gold);
    margin-top: 0.5rem;
}

.ts-reveal-result--visible,
.ts-reading--visible {
    display:        flex;
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}


.ts-result-card-name {
    font-size:      1.3rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(212,175,55,0.6);
    font-weight:    700;
    position:       absolute;
    top:            100%;
    left:           50%;
    transform:      translateX(-50%);
    margin-top:     15px;
    width:          100%;
    white-space:    normal;
    text-align:     center;
}

.ts-reveal-card-wrapper--revealed .ts-result-card-name {
    opacity: 1;
}

/* ============================================================
   TUTORIAL overlays  (shared across scenes)
   ============================================================ */
.ts-tutorial {
    position:       absolute;
    inset:          0;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding-bottom: 0;
    pointer-events: none;
    z-index:        1000;
    opacity:        0;
    transition:     opacity 0.5s ease;
}

.ts-tutorial--pick {
    justify-content: flex-end;
    padding-bottom: clamp(1rem, calc(4 * var(--ts-vh)), 3rem);
    top: auto;
    bottom: 0;
    height: 40%;
}

.ts-tutorial--tapestry {
    justify-content: flex-start;
    top:             8%;
    height:          20%;
}

.ts-tutorial--shuffle {
    position:        relative;
    inset:           auto;
    width:           280px;
    margin-bottom:   20px;
}

.ts-tutorial--inline {
    position:       relative;
    inset:          auto;
    height:         auto;
    width:          100%;
    z-index:        10;
}

.ts-tutorial-text {
    margin-bottom: 1rem;
}

.ts-tutorial--visible {
    opacity: 1;
}

.ts-tutorial-text {
    font-size:      1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color:          rgba(232,220,200,0.6);
    text-align:     center;
    margin-bottom:  0;
    line-height:    1.7;
}

.ts-tutorial--pick .ts-tutorial-text,
.ts-tutorial--tapestry .ts-tutorial-text,
.ts-tutorial--shuffle .ts-tutorial-text,
.ts-tutorial--reveal .ts-tutorial-text {
    background:      rgba(0, 0, 0, 0.6);
    padding:         0.6rem 1rem;
    border-radius:   8px;
    color:           rgba(232, 220, 200, 0.95);
    backdrop-filter: blur(2px);
    max-width:       80%;
}

.ts-tutorial-cursor-swipe-h {
    position:        relative;
    width:           140px;
    height:          30px;
    margin-bottom:   0.8rem;
    display:         flex;
    align-items:     center;
}

.ts-tutorial-cursor-swipe-h .ts-tutorial-cursor {
    position:        absolute;
    width:           16px;
    height:          16px;
    border:          2px solid var(--ts-gold);
    border-radius:   50%;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
}

/* --- Cursor: circular orbit (shuffle - DEPRECATED) --- */
.ts-tutorial-cursor-orbit {
    position: relative;
    width:    80px;
    height:   80px;
}

/* --- Cursor: tap/hold (new shuffle) --- */
.ts-tutorial-cursor-tap {
    position: relative;
    width:    40px;
    height:   40px;
}

.ts-tutorial--shuffle .ts-tutorial-cursor {
    position:   absolute;
    width:      16px;
    height:     16px;
    border:     2px solid var(--ts-gold);
    border-radius: 50%;
    top:        50%;
    left:       50%;
    margin:     -8px 0 0 -8px;
}



/* --- Cursor: drag (duality/pick) --- */
.ts-tutorial-cursor-drag,
.ts-tutorial-cursor-drag-down {
    position:   relative;
    width:      40px;
    height:     100px;
}

.ts-tutorial--duality .ts-tutorial-cursor,
.ts-tutorial--pick .ts-tutorial-cursor {
    position:   absolute;
    width:      16px;
    height:     16px;
    border:     2px solid var(--ts-gold);
    border-radius: 50%;
    left:       50%;
    margin-left: -8px;
}

.ts-tutorial-cursor-drag .ts-tutorial-cursor {
    bottom: 0;
}

.ts-tutorial-cursor-drag-down .ts-tutorial-cursor {
    top: 0;
}



.ts-altar .ts-tutorial--duality {
    inset:           -40px -20px;
    justify-content: center;
    padding-bottom:  0;
}

.ts-altar .ts-tutorial--duality .ts-tutorial-text {
    margin-bottom: 0;
    margin-top:    1rem;
}

/* --- Cursor: swipe (reveal) --- */
.ts-tutorial-cursor-swipe {
    position:   relative;
    width:      120px;
    height:     50px;
}

.ts-tutorial--reveal .ts-tutorial-cursor {
    position:   absolute;
    width:      16px;
    height:     16px;
    border:     2px solid var(--ts-gold);
    border-radius: 50%;
    top:        50%;
    left:       0;
    margin-top: -8px;
}

/* ============================================================
   Particles (spawned via JS)
   ============================================================ */
.tarot-particle {
    position:       absolute;
    border-radius:  50%;
    pointer-events: none;
    z-index:        20;
}

/* ============================================================
   Responsive tiers — mobile-first
   Base styles target portrait phones; tiers below enhance for larger viewports.
   ============================================================ */

/* Tablet portrait & up: more breathing room, slightly larger cards */
@media (min-width: 768px) {
    :root {
        --ts-card-w: max(110px, min(20vw, calc(18 * var(--ts-vh)), 150px));
    }

    .ts-tutorial {
        padding-bottom: clamp(2rem, calc(6 * var(--ts-vh)), 4rem);
    }

    .ts-tutorial-text {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .ts-intention-input {
        font-size: 1.1rem;
    }
}

/* Desktop: full size, more horizontal spread */
@media (min-width: 1200px) {
    :root {
        --ts-card-w: max(130px, min(14vw, calc(20 * var(--ts-vh)), 155px));
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:  0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   READING — interpretation container shown below the game
   (Reusable across reading-style games via the same markup contract.)
   ============================================================ */
.ts-stage {
    position: relative;
    width:    100%;
    /* Mobile-first: 80% of viewport height (20% shorter than tablet/desktop)
       to leave more breathing room for the reading panel below. */
    min-height:   calc(80 * var(--ts-vh) - 100px);
    height:       auto;
}

@media (min-width: 768px) {
    .ts-stage {
        min-height: calc(100 * var(--ts-vh) - 100px);
        height:     auto;
    }
}

.ts-reading {
    width:           90%;
    max-width:       760px;
    margin:          1.5rem auto 3rem;
    padding:         0 1rem;
    opacity:         0;
    transform:       translateY(20px);
    
    pointer-events:  none;
    box-sizing:      border-box;
    scroll-margin-top: 90px;
}

.ts-reading--visible {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

.ts-reading-card {
    background:    transparent;
    border:        1px solid rgba(212,175,55,0.3);
    border-radius: 12px;
    padding:       1.6rem 1.4rem;
    box-shadow:    0 8px 40px rgba(0,0,0,0.55);
    color:         #e8dcc8;
    font-family:   var(--ts-font);
    line-height:   1.65;
}

.ts-reading-title {
    margin:         0 0 1rem;
    font-size:      clamp(1.3rem, 3.6vw, 1.8rem);
    letter-spacing: 0.08em;
    color:          var(--ts-gold);
    text-shadow:    0 0 30px rgba(212,175,55,0.25);
    text-align:     center;
}

.ts-reading-paragraph {
    margin:        0 0 1.1rem;
    font-size:     1.6rem;
    color:         #f0e6d3;
}

.ts-reading-paragraph--first {
    font-style: italic;
}

.ts-reading-veil {
    position: relative;
    margin-top: 1.2rem;
}

.ts-reading-paragraph--second {
}

.ts-reading-paragraph--blurred {
    filter:         blur(7px);
    user-select:    none;
    -webkit-user-select: none;
    pointer-events: none;
    opacity:        0.85;
}

.ts-reading-reveal {
    display:    block;
    margin:     0.6rem auto 0;
    position:   absolute;
    left:       50%;
    top:        0;
    transform:  translateX(-50%);
    z-index:    2;
    white-space: nowrap;

    /* Inverted colors */
    background: var(--ts-gold);
    color:      var(--ts-dark);
    box-shadow: 0 0 30px rgba(212,175,55,0.35);
}

.ts-reading-reveal:hover {
    background: transparent;
    color:      var(--ts-gold);
    box-shadow: none;
}

.ts-reading-card--loading,
.ts-reading-card--error {
    text-align: center;
    padding:    1.8rem 1.4rem;
}

.ts-reading-spinner {
    display:     inline-block;
    width:       28px;
    height:      28px;
    border:      2px solid rgba(212,175,55,0.25);
    border-top-color: var(--ts-gold);
    border-radius: 50%;
    margin-bottom: 0.8rem;
}

.ts-reading-loading-text {
    margin: 0;
    color: rgba(232,220,200,0.7);
    font-style: italic;
}

@media (min-width: 768px) {
    .ts-reading-card {
        padding: 2rem 2.2rem;
    }
}

/* ---------- Sound toggle button ---------- */
.ts-sound-toggle {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-gold);
    cursor: pointer;
    padding: 0;
    outline: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-self: flex-end;
    margin: 1rem;
    flex-shrink: 0;
    position: absolute;
    z-index: 1;
}

.ts-sound-toggle:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--ts-gold);
    transform: scale(1.08);
}

.ts-sound-toggle i {
    font-size: 1.15rem;
}

.ts-sound-toggle--muted {
    color: rgba(232, 220, 200, 0.5);
    border-color: rgba(232, 220, 200, 0.2);
}

/* ---------- Scroll arrow button ---------- */
.ts-scroll-arrow {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-gold);
    cursor: pointer;
    padding: 0;
    outline: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: fixed;
    left: 20px;
    bottom: 30px;
    z-index: 2000;
    opacity: 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.ts-scroll-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--ts-gold);
}

.ts-scroll-arrow i {
    font-size: 1.15rem;
    will-change: transform;
}


/* Auto pick button & Selection */
.ts-auto-pick-container {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    position: relative;
    z-index: 30;
}

.ts-auto-pick-btn {
    background: rgba(184, 134, 11, 0.2);
    border: 1px solid var(--ts-gold-dim);
    color: var(--ts-gold);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ts-auto-pick-btn:hover {
    background: rgba(184, 134, 11, 0.4);
    border-color: var(--ts-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.ts-auto-pick-btn:active {
    transform: translateY(0);
}

.ts-scene--auto-picking .ts-tapestry-area {
    pointer-events: none;
}

.ts-scene--auto-picking .ts-card-wrapper:not(.ts-card-wrapper--selected) {
    opacity: 0.6;
    filter: grayscale(0.4);
    transition: all 0.5s ease;
}

.ts-btn-gradient {
    background: linear-gradient(90deg, #8a5cf5 0%, #f55cc0 100%);
    color: white !important;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin-top: 15px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.ts-btn-gradient:hover {
    opacity: 0.9;
}