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

/* ---------- Custom properties ---------- */
:root {
    --ts-gold:          #FFC107;
    --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;
}

.ts-game::before {
    content:        "";
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
    background-image:
            radial-gradient(circle at 33.1% 16.5%, rgba(255,255,255,0.43) 0%, rgba(255,255,255,0.43) 0.93px, transparent 0.93px),
            radial-gradient(circle at 53.4% 37.1%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 0.63px, transparent 0.63px),
            radial-gradient(circle at 5.6% 43.6%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.44) 0.63px, transparent 0.63px),
            radial-gradient(circle at 42.8% 81.4%, rgba(255,255,255,0.49) 0%, rgba(255,255,255,0.49) 0.66px, transparent 0.66px),
            radial-gradient(circle at 62.2% 93.0%, rgba(255,255,255,0.56) 0%, rgba(255,255,255,0.56) 0.89px, transparent 0.89px),
            radial-gradient(circle at 95.7% 6.5%, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.52) 1.03px, transparent 1.03px),
            radial-gradient(circle at 15.8% 13.3%, rgba(255,255,255,0.73) 0%, rgba(255,255,255,0.73) 0.75px, transparent 0.75px),
            radial-gradient(circle at 19.3% 57.8%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.55) 0.92px, transparent 0.92px),
            radial-gradient(circle at 54.6% 8.0%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.48) 0.63px, transparent 0.63px),
            radial-gradient(circle at 67.3% 43.0%, rgba(255,255,255,0.63) 0%, rgba(255,255,255,0.63) 0.76px, transparent 0.76px),
            radial-gradient(circle at 45.5% 30.8%, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.68) 1.0px, transparent 1.0px),
            radial-gradient(circle at 25.4% 57.1%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 0.86px, transparent 0.86px),
            radial-gradient(circle at 72.0% 29.6%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.45) 1.09px, transparent 1.09px),
            radial-gradient(circle at 42.1% 74.7%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 0.68px, transparent 0.68px),
            radial-gradient(circle at 5.8% 66.1%, rgba(255,255,255,0.63) 0%, rgba(255,255,255,0.63) 0.98px, transparent 0.98px),
            radial-gradient(circle at 86.0% 32.1%, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0.64) 0.95px, transparent 0.95px),
            radial-gradient(circle at 57.7% 45.8%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.78) 1.02px, transparent 1.02px),
            radial-gradient(circle at 47.5% 65.8%, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.68) 0.63px, transparent 0.63px),
            radial-gradient(circle at 64.1% 97.3%, rgba(255,255,255,0.51) 0%, rgba(255,255,255,0.51) 1.01px, transparent 1.01px),
            radial-gradient(circle at 39.0% 66.2%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.58) 0.61px, transparent 0.61px),
            radial-gradient(circle at 18.1% 13.2%, rgba(255,255,255,0.71) 0%, rgba(255,255,255,0.71) 0.63px, transparent 0.63px),
            radial-gradient(circle at 14.4% 25.8%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 0.8px, transparent 0.8px),
            radial-gradient(circle at 9.7% 45.1%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 0.87px, transparent 0.87px),
            radial-gradient(circle at 80.7% 84.9%, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.57) 0.74px, transparent 0.74px),
            radial-gradient(circle at 36.4% 86.9%, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.46) 1.08px, transparent 1.08px),
            radial-gradient(circle at 18.9% 24.3%, rgba(255,255,255,0.59) 0%, rgba(255,255,255,0.59) 0.72px, transparent 0.72px),
            radial-gradient(circle at 58.6% 27.2%, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.57) 0.6px, transparent 0.6px),
            radial-gradient(circle at 37.4% 56.4%, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.68) 1.08px, transparent 1.08px),
            radial-gradient(circle at 51.5% 61.3%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.42) 0.94px, transparent 0.94px),
            radial-gradient(circle at 88.4% 76.9%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.72) 1.04px, transparent 1.04px),
            radial-gradient(circle at 39.7% 40.3%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.65) 0.65px, transparent 0.65px),
            radial-gradient(circle at 8.0% 8.5%, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.46) 0.7px, transparent 0.7px),
            radial-gradient(circle at 34.6% 7.0%, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.46) 0.6px, transparent 0.6px),
            radial-gradient(circle at 11.7% 36.9%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 0.61px, transparent 0.61px),
            radial-gradient(circle at 61.0% 16.3%, rgba(255,255,255,0.54) 0%, rgba(255,255,255,0.54) 0.73px, transparent 0.73px),
            radial-gradient(circle at 37.0% 13.8%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 1.02px, transparent 1.02px),
            radial-gradient(circle at 46.7% 48.4%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.44) 0.64px, transparent 0.64px),
            radial-gradient(circle at 34.9% 27.4%, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.46) 1.01px, transparent 1.01px),
            radial-gradient(circle at 4.2% 93.3%, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.46) 0.86px, transparent 0.86px),
            radial-gradient(circle at 54.1% 4.6%, rgba(255,255,255,0.79) 0%, rgba(255,255,255,0.79) 0.86px, transparent 0.86px),
            radial-gradient(circle at 84.9% 68.8%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.55) 0.73px, transparent 0.73px),
            radial-gradient(circle at 18.0% 76.1%, rgba(255,255,255,0.71) 0%, rgba(255,255,255,0.71) 0.87px, transparent 0.87px),
            radial-gradient(circle at 33.6% 23.4%, rgba(255,255,255,0.79) 0%, rgba(255,255,255,0.79) 1.01px, transparent 1.01px),
            radial-gradient(circle at 83.9% 79.4%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 1.01px, transparent 1.01px),
            radial-gradient(circle at 23.8% 51.7%, rgba(255,255,255,0.41) 0%, rgba(255,255,255,0.41) 0.78px, transparent 0.78px);
    animation: tarotTwinkleA 4s ease-in-out infinite;
}
.ts-game::after {
    content:        "";
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
    background-image:
            radial-gradient(circle at 4.7% 28.8%, rgba(255,255,255,0.81) 0%, rgba(255,255,255,0.81) 1.08px, transparent 1.08px),
            radial-gradient(circle at 93.8% 44.9%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.94) 1.56px, transparent 1.56px),
            radial-gradient(circle at 93.7% 37.0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 1.05px, transparent 1.05px),
            radial-gradient(circle at 20.9% 21.6%, rgba(255,255,255,0.91) 0%, rgba(255,255,255,0.91) 1.34px, transparent 1.34px),
            radial-gradient(circle at 82.7% 48.0%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.86) 1.36px, transparent 1.36px),
            radial-gradient(circle at 10.1% 65.4%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 1.54px, transparent 1.54px),
            radial-gradient(circle at 74.0% 47.9%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.86) 1.02px, transparent 1.02px),
            radial-gradient(circle at 33.9% 78.9%, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.68) 1.58px, transparent 1.58px),
            radial-gradient(circle at 40.5% 92.9%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.58) 1.41px, transparent 1.41px),
            radial-gradient(circle at 14.2% 16.5%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.86) 1.53px, transparent 1.53px),
            radial-gradient(circle at 16.0% 81.3%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 1.59px, transparent 1.59px),
            radial-gradient(circle at 35.6% 54.7%, rgba(255,255,255,0.51) 0%, rgba(255,255,255,0.51) 0.99px, transparent 0.99px),
            radial-gradient(circle at 95.2% 64.4%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.92) 1.27px, transparent 1.27px),
            radial-gradient(circle at 43.6% 85.7%, rgba(255,255,255,0.59) 0%, rgba(255,255,255,0.59) 1.48px, transparent 1.48px),
            radial-gradient(circle at 26.2% 30.1%, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.76) 1.07px, transparent 1.07px),
            radial-gradient(circle at 26.9% 42.2%, rgba(255,255,255,0.91) 0%, rgba(255,255,255,0.91) 0.99px, transparent 0.99px),
            radial-gradient(circle at 36.0% 46.0%, rgba(255,255,255,0.91) 0%, rgba(255,255,255,0.91) 1.31px, transparent 1.31px),
            radial-gradient(circle at 42.4% 90.1%, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.74) 1.25px, transparent 1.25px),
            radial-gradient(circle at 52.3% 3.8%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.58) 1.21px, transparent 1.21px),
            radial-gradient(circle at 2.4% 78.7%, rgba(255,255,255,0.71) 0%, rgba(255,255,255,0.71) 1.02px, transparent 1.02px),
            radial-gradient(circle at 71.6% 55.4%, rgba(255,255,255,0.73) 0%, rgba(255,255,255,0.73) 1.13px, transparent 1.13px),
            radial-gradient(circle at 55.3% 77.3%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 0.97px, transparent 0.97px),
            radial-gradient(circle at 25.9% 28.6%, rgba(255,255,255,0.73) 0%, rgba(255,255,255,0.73) 1.44px, transparent 1.44px),
            radial-gradient(circle at 55.9% 75.0%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 1.54px, transparent 1.54px),
            radial-gradient(circle at 60.8% 50.5%, rgba(255,255,255,0.81) 0%, rgba(255,255,255,0.81) 1.26px, transparent 1.26px),
            radial-gradient(circle at 45.4% 53.2%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.92) 1.23px, transparent 1.23px),
            radial-gradient(circle at 69.1% 86.1%, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.62) 1.56px, transparent 1.56px),
            radial-gradient(circle at 55.7% 92.6%, rgba(255,255,255,0.56) 0%, rgba(255,255,255,0.56) 1.49px, transparent 1.49px),
            radial-gradient(circle at 13.7% 44.4%, rgba(255,255,255,0.61) 0%, rgba(255,255,255,0.61) 0.95px, transparent 0.95px),
            radial-gradient(circle at 9.0% 66.3%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 1.45px, transparent 1.45px);
    animation: tarotTwinkleB 5s ease-in-out infinite 1.2s;
}
@keyframes tarotTwinkleA {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
@keyframes tarotTwinkleB {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.9; }
}

/* ---------- 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-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:      17px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--ts-gold);
    opacity:        0.7;
    margin:         0;
}

.ts-intention-title {
    font-size:   24px;
    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:   15px;
    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:      17px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--ts-gold);
    text-align:     center;
    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:      17px;
    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:      17px;
    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;
    font-family:    var(--ts-font);
    font-size:      1.1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding:        0.75rem 2.5rem;
    background: var(--ts-gold);
    color:      var(--ts-dark);
}

.ts-btn:not(:disabled):hover {
    background:     transparent;
    color:          var(--ts-gold);
    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:     22px;
    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:      17px;
    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:  22px;
    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:      12px;
    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: 17px;
        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:      24px;
    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:     17px;
    color:         white;
}

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

.ts-reading-paragraph--gradient-blurred {
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 45%, rgba(0,0,0,0.2) 95%);
    mask-image: linear-gradient(to bottom, black 45%, rgba(0,0,0,0.2) 95%);
}

.ts-reading-paragraph--gradient-blurred::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    mask-image: linear-gradient(to bottom, transparent 40%, black 90%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 90%);
}

.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-actions {
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    z-index:    2;
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.ts-reading-actions-final {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.ts-reading-actions .ts-reading-reveal {
    position:   static;
    transform:  none;
    margin:     0;
    left:       auto;
    top:        auto;
}

.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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.ts-reading-retry {
    margin-top: 1rem;
}

.ts-reading-spinner {
    display:     inline-block;
    width:       48px;
    height:      48px;
    border:      3px solid rgba(212,175,55,0.25);
    border-top-color: var(--ts-gold);
    border-radius: 50%;
    margin-bottom: 0.8rem;
    animation: ts-spin 0.9s linear infinite;
}

@keyframes ts-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Paywall ---------- */
.ts-paywall-fomo {
    margin-bottom: 1.5rem;
    text-align: center;
}

.ts-fomo-line {
    font-size: 17px;
    line-height: 1.6;
    margin: 0.4rem 0 1.1rem;
    color: white;
    font-style: italic;
}

.ts-reading-card--paywall {
    border: 1px solid var(--ts-gold);
    box-shadow: 0 0 20px rgba(212,175,55,0.15);
}

.ts-reading-loading-text {
    margin: 0;
    color: rgba(232,220,200,0.7);
    font-style: italic;
    opacity: 0;
    min-height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 200ms ease-in-out; /* debe coincidir con FADE_MS del JS */
}

.ts-reading-loading-text.is-visible {
    opacity: 1;
}

.ts-reading-loading-text.is-visible::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    color: var(--ts-gold);
    animation: ts-caret-blink 0.8s steps(1) infinite;
}

@keyframes ts-caret-blink {
    50% { opacity: 0; }
}

@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 svg {
    width: 1.15rem;
    height: 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 svg {
    width: 1.15rem;
    height: 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: var(--ts-gold);
    color: var(--ts-dark) !important;
    padding: 10px 25px;
    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: all 0.3s ease;
    box-shadow: 0 0 20px rgba(212,175,55,0.3);
}

.ts-btn-gradient:hover {
    background: white;
    transform: translateY(-2px);
}