.container { 
    text-align: center; 
    padding: 0; 
    max-width: 100%; 
}

.header {
    margin-bottom: 40px;
}

h2 { 
    color: var(--priColor); 
    background: linear-gradient(to top left, #0000FF 0%, #800080 76%); 
    background-clip: border-box; 
    background-clip: border-box; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    margin: 5rem 0 0;
}

.header h1 {
    font-size: 3rem;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    margin-bottom: 10px;
}

.header p {
    font-size: 1.2rem;
    color: #c9b037;
    font-style: italic;
}

.card.position-1 span { 
    padding: 0 0 10rem; 
}

.deck-area p { 
    font-size: 1.2rem; 
    font-weight: 600; 
}

.table-surface { 
    padding: 40px; 
    margin: 20px auto; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.39), inset 0 1px 0 rgba(255, 255, 255, 0.04); 
    position: relative; 
    min-height: 59rem; 
    overflow: visible; 
    width: 100%; 
    border-radius: var(--radious); 
    margin: 5rem 0 0;
}

.deck-area {
    position: absolute;
    bottom: 100px;
    left: 7rem;
    width: 120px;
    height: 200px;
    overflow: visible;
}

.deck {
    position: relative;
    width: 120px;
    height: 180px;
    margin: 0 auto;
    overflow: visible;
}

.tarot-card { 
    position: absolute; 
    width: 120px; 
    height: 287px; 
    padding: 5px; 
    background: url('../images/tarot-card-image/card-bg.jpg') no-repeat; 
    background-size: auto; 
    background-size: contain; 
    cursor: pointer; 
    transform-origin: center center; 
    transition: all 0.1s ease-out; 
}

.status-text { 
    position: absolute; 
    bottom: 7rem; 
    left: 50%; 
    transform: translateX(-50%); 
    color: var(--priColor); 
    font-size: 1.2rem; 
    padding: 10px 20px; 
    border-radius: 10px; 
    backdrop-filter: blur(5px); 
}

.spread-container {
    position: relative;
    width: 100%;
    height: 600px;
    margin-top: 20px;
}

element {
    font-size: 0.8rem;
    text-align: center;
    --landing-transform: rotate(0deg);
}

.card.position-6 {
    top: 240px;
    left: calc(50% + 60px);
}

.card.placed {
    background: url('../images/tarot-card-image/card-bg.jpg') no-repeat;
    background-size: auto;
    background-size: contain;
    box-shadow: 0 4px 8px rgba(0,0,0,0.9);
}

.card { 
    position: absolute; 
    width: 120px; 
    height: 211px; 
    border-radius: 8px; 
    transition: all 0.5s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.8rem; 
    text-align: center; 
    padding: 5px; 
    cursor: pointer; 
    transform-style: preserve-3d; 
}

.tarot-sidebar { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin: 2rem 0 0;
    justify-content: start; 
    gap: 2rem; 
}

.card.empty { 
    background: #218B8D59; 
    border: 2px dashed var(--thirdColor); 
    color: var(--priColor); 
    font-weight: 600; 
    font-size: 1rem; 
}

.container h3 { 
    text-align: left; 
    margin: 6rem 0 0; 
}

.card.dealing { 
    z-index: 100; 
    box-shadow: 0 8px 25px rgba(255,215,0,0.5); 
}

.tarot-sidebar section { 
    width: 22%;
    border-radius: var(--radious); 
    overflow: hidden; 
}

.tarot-sidebar h4 { 
    text-align: left; 
}

.card.flipped { 
    color: #333; 
    border-color: #8b4513; 
    font-size: 0.65rem; 
    font-weight: bold; 
    padding: 2px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-between; 
    overflow: hidden; 
    position: absolute; 
    transform-origin: center center; 
}

.card.flipped .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.card.flipped .card-name {
    display: none;
}

.card.reversed.flipped .card-image {
    transform: rotate(180deg);
}

.card.position-2.flipped .card-image {
    transform: scale(1.02);
}

.card.position-2.reversed.flipped .card-image {
    transform: rotate(270deg);
}

.card.reversed.flipped .card-name {
    transform: rotate(180deg);
}

.card.position-2.flipped .card-name {
    transform: rotate(90deg);
}

.card.position-2.reversed.flipped .card-name {
    transform: rotate(270deg);
}

.card.flipped:hover {
    transform: scale(1.05) rotate(var(--card-rotation, 0deg));
    box-shadow: 0 6px 15px rgba(255,215,0,0.3);
    z-index: 1000;
}

.card.position-2.flipped {
    --card-rotation: 90deg;
}

.card.reversed.flipped:not(.position-2) {
    --card-rotation: 180deg;
}

.card.position-2.reversed.flipped {
    --card-rotation: 270deg;
}

.card.flipped:not(.reversed):not(.position-2) {
    --card-rotation: 0deg;
}

.card.reversed {
    transform: rotate(180deg);
}

.card.reversed:hover {
    transform: rotate(180deg) scale(1.05);
}

/* Celtic Cross positioning - centered in the spread area */
.card.position-1 { top: 240px; left: calc(50% - -3rem); } /* Present */
.card.position-2 { top: 240px; left: calc(50% - -3rem); transform: rotate(90deg); } /* Challenge */
.card.position-3 { top: 28.3rem; left: calc(50% - -3rem); } /* Foundation */
.card.position-4 { top: 240px; left: calc(50% - 170px); } /* Past */
.card.position-5 { top: 1.6rem; left: calc(50% - -3rem); } /* Crown */
.card.position-6 { top: 240px; left: calc(50% + 17rem); } /* Future */
.card.position-7 { top: 39.3rem; left: calc(50% + 27rem); } /* Approach */
.card.position-8 { top: 414px; left: calc(50% + 27rem); } /* External */
.card.position-9 { top: 200px; left: calc(50% + 27rem); } /* Hopes/Fears */
.card.position-10 { top: -14px; left: calc(50% + 27rem); } /* Outcome */

.position-labels {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.label { 
    position: absolute; 
    font-weight: bold; 
    color: var(--priColor); 
}

.label-1 { top: 16rem; left: calc(50% - -11rem); z-index: 1;}
.label-2 { top: 25.5em; left: calc(50% - -11rem); z-index: 2; }
.label-3 { top: 42rem; left: calc(50% - -4rem); z-index: 2; }
.label-4 { top: 13rem; left: calc(50% - 8rem); }
.label-5 { top: 0rem; left: calc(50% - -4.8rem); }
.label-6 { top: 13rem; left: calc(50% + 18.8rem); }
.label-7 { top: 44rem; left: calc(50% + 35rem); }
.label-8 { top: 31rem; left: calc(50% + 33.3rem); }
.label-9 { top: 18rem; left: calc(50% + 34.7rem); }
.label-10 {top: 5rem; left: calc(50% + 35rem); }

.flying-card {
    position: absolute;
    width: 120px;
    height: 211px;
    background: url('../images/tarot-card-image/card-bg.jpg') no-repeat;
    background-size: contain;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(255,215,0,0.4);
    z-index: 1000;
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

.card.landing {
    animation: cardLanding 0.3s ease-out;
}

@keyframes cardLanding {
    0% {
        transform: var(--landing-transform) scale(1.1);
        box-shadow: 0 15px 30px rgba(255,215,0,0.6);
    }
    30% {
        transform: var(--landing-transform) scale(0.95);
        box-shadow: 0 8px 20px rgba(255,215,0,0.4);
    }
    60% {
        transform: var(--landing-transform) scale(1.02);
        box-shadow: 0 6px 15px rgba(255,215,0,0.3);
    }
    100% {
        transform: var(--landing-transform) scale(1);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
}

.controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.create-deck-btn, .shuffle-btn, .deal-btn, .reset-btn { 
    background: var(--btnColor); 
    color: white; 
    border: none; 
    padding: 15px 30px; 
    border-radius: 2rem; 
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    transition: all 0.3s ease; 
    font-family: inherit; 
    margin: 0 10px; 
}

.create-deck-btn:hover, .shuffle-btn:hover, .deal-btn:hover, .reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.shuffle-btn {
    background: linear-gradient(45deg, #2e7d32, #4caf50);
}

.deal-btn {
    background: linear-gradient(45deg, #1976d2, #42a5f5);
}

.reset-btn {
    background: linear-gradient(45deg, #a52a2a, #dc143c);
}

.interpretations {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    text-align: left;
}

.interpretation {
    background: rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--thirdColor);
    backdrop-filter: blur(10px);
}

.interpretation h3 {
    color: var(--thirdColor);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.card-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content { 
    padding: 30px; 
    border-radius: 15px;
    max-width: 55%; 
    text-align: center; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    display: flex; 
    flex-direction: row-reverse; 
    background: var(--whiteColor); 
    position: relative; 
}

.modal-content figure { 
    width: 50%; 
}

.modal-content .content { 
    width: 50%; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
}

.modal-content img { 
    width: 40% !important; 
    height: 100%; 
}

.close-modal { 
    color: #000; 
    border: none; 
    cursor: pointer; 
    font-family: inherit; 
    margin-top: 15px; 
    position: absolute; 
    top: 0; 
    right: 2rem; 
    font-size: 1.5rem; 
    background: unset; 
}

.modal-content .meaning { 
    text-align: left; 
    font-size: 1.2rem; 
    color: #000; 
}

#modalCardMeaning { 
    text-align: left; 
    font-size: clamp(0.95rem, 0.9219rem + 0.125vw, 1rem); 
    color: var(--textColor);  
    margin: .8rem 0 0;
}

.content h3 { 
    text-align: left; 
}

.modal-content p { 
    text-align: left; 
}

.modal-card-image {
    width: 120px;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #ffd700;
    margin: 0 auto 20px auto;
    display: block;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.modal-card-image.error-placeholder {
    background: linear-gradient(45deg, #4a148c, #7b1fa2);
    background-image: 
        radial-gradient(circle at 25% 25%, #ffd700 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, #ffd700 2px, transparent 2px);
    background-size: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd700;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

.error-message {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    font-size: 0.9rem;
}

/* ========== ENHANCED MOBILE RESPONSIVE STYLES ========== */

/* Large Tablets and Small Desktops (769px - 1024px) */
@media (max-width: 1024px) {
    .table-surface {
        padding: 30px;
    }
    
    .spread-container {
        transform: scale(0.9);
        transform-origin: center top;
        height: 540px;
    }
}

/* Large Mobile Screens (481px - 768px) */
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
    
    .header h1 {
        font-size: 2.5rem;
    }
    
    .header p {
        font-size: 1rem;
    }
    
    .table-surface {
        padding: 20px;
        margin: 2rem 0 0;
        min-height: 55rem;
    }
    
    .spread-container {
        transform: scale(0.8);
        transform-origin: center top;
        height: 600px;
    }
    
    /* Move bottom row cards to horizontal layout for mobile - centered, bigger, with gaps */
    .card.position-7 { top: 500px; left: calc(50% - 240px);  }
    .card.position-8 { top: 500px; left: calc(50% - 80px);  }
    .card.position-9 { top: 500px; left: calc(50% + 80px);  }
    .card.position-10 { top: 500px; left: calc(50% + 240px);  }
    
    /* Adjust bottom row labels for mobile - centered with gaps */
    .label-7 { top: 45rem; left: calc(50% - 17rem); }
    .label-8 { top: 45rem; left: calc(50% - 6rem); }
    .label-9 { top: 45rem; left: calc(50% + 6rem); }
    .label-10 { top: 45rem; left: calc(50% + 17rem); }  
    .deck-area { bottom: 60px; left: 3rem; width: 80px; height: 120px; }  
    .deck { width: 80px; height: 100px; }   
    .tarot-card { width: 80px; height: 180px; } 
    .status-text { bottom: 4rem; font-size: 1rem; padding: 8px 15px; max-width: 90%; text-align: center; }
    .controls { position: relative; bottom: auto; left: auto; transform: none; margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .create-deck-btn, .shuffle-btn, .deal-btn, .reset-btn { padding: 12px 20px; margin: 5px; font-size: 0.9rem; min-width: 120px; }
    .modal-content { max-width: 90%; flex-direction: column; max-height: 90vh; overflow-y: auto; }
    
    .modal-content figure,
    .modal-content .content { width: 100%; }
    
    .modal-content img { width: 60% !important; }
    .interpretations { grid-template-columns: 1fr; gap: 15px; margin-top: 20px; }
    .interpretation { padding: 15px; }
    .tarot-sidebar { flex-direction: column; gap: 1rem; }
    
    .tarot-sidebar section {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .tarot-sidebar figure {
        width: 80px;
        flex-shrink: 0;
    }
    
    .tarot-sidebar h4 {
        margin: 0;
        font-size: 1rem;
    }
    
    .flying-card {
        width: 70px;
        height: 120px;
    }
}


/* Standard Mobile Screens (360px width - most common) */
@media (max-width: 600px) {
    .container { padding: 0 5px; }
    
    .header h1 { font-size: 2rem; margin-bottom: 5px; }
    .controls { justify-content: end; }
    .header p { font-size: 0.9rem; }
    .status-text {right: 0;width: 68%;}
    h2 { margin: 2.5rem 0 0; font-size: 1.5rem; }
    
    .container h3 { margin: 2.5rem 0 0; font-size: 1.3rem; }
    
    .table-surface { margin: 1rem 0 0; min-height: 53rem; border-radius: 8px; padding: 0; box-shadow: unset;}
    .spread-container { transform: unset; transform-origin: center top; height: 80vh; margin-top: 5px; }
    /* Optimized Celtic Cross positions for 360px */
    .card.position-1 { top: 12rem;left: 50%; transform: translateX(-50%); }
    .card.position-2 { top: 12rem; left: 38%; transform: rotate(90deg); }
    .card.position-3 { top: 22rem; left: 50%; transform: translateX(-50%); }
    .card.position-4 { top: 12rem; left: 0; }
    .card.position-5 { top: 2rem; left: 50%; transform: translateX(-50%);}
    .card.position-6 { top: 12rem; left: unset; right: 0;}
    
    /* Bottom row optimized for 360px - centered, bigger, with gaps */
    .card.position-7 { top: 32rem; left: -1rem;  }
    .card.position-8 { top: 32rem; left: 4.5rem;  }
    .card.position-9 { top: 32rem; left: 10.4rem;  }
    .card.position-10 { top: 32rem; right: -1rem; left: unset; }
    
    /* Optimized labels for 360px bottom row - centered with gaps */
    .label {
        font-size: 0.7rem;
        font-weight: bold;
    }
    
    .label-1 { top: 11rem; left: calc(50% + 40px); }
    .label-2 { top: 21rem; left: calc(50% + -2rem); }
    .label-3 { top: 26rem; left: calc(50% - -3rem); }
    .label-4 { top: 10.5rem; left: calc(50% - 9rem); }
    .label-5 { top: 0.5rem; left: calc(50% - 1.5rem); }
    .label-6 { top: 11rem; left: calc(50% + 7rem);}
    .label-7 { top: 41.5rem; left: calc(50% - 10.5rem); }
    .label-8 { top: 41.5rem; left: calc(50% - 6.5rem) }
    .label-9 { top: 41.5rem; left: calc(50% + 0.5rem) }
    .label-10 { top: 41.5rem; left: calc(50% + 7rem); }
    
    .card {
        width: 80px;
        height: 140px;
        font-size: 0.7rem;
    }
    
    .flying-card {
        width: 60px;
        height: 100px;
    }
    
    .deck-area {
        bottom: 40px;
        left: 1rem;
        width: 60px;
        height: 80px;
    }
    
    .deck {
        width: 60px;
        height: 80px;
    }
    
    .deck-area p {
        font-size: 0.95rem;
        margin-top: 10px;
    }
    
    .tarot-card {
        width: 60px;
        height: 140px;
    }
    
    .status-text {
        bottom: 2rem;
        font-size: 0.85rem;
        padding: 6px 12px;
        max-width: 95%;
        line-height: 1.3;
    }
    
    .controls {
        margin-top: 15px;
        gap: 6px;
    }
    
    .create-deck-btn, .shuffle-btn, .deal-btn, .reset-btn {
        padding: 10px 15px;
        margin: 3px;
        font-size: 0.8rem;
        min-width: 100px;
        border-radius: 1.5rem;
    }
    
    .modal-content {
        max-width: 95%;
        padding: 20px;
        margin: 10px;
        border-radius: 10px;
    }
    
    .modal-content img {
        width: 80% !important;
        max-width: 150px;
    }
    
    .modal-content .meaning {
        font-size: 1rem;
    }
    
    #modalCardMeaning {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .modal-content h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .close-modal {
        top: 10px;
        right: 15px;
        font-size: 1.3rem;
        padding: 5px;
        background: rgba(255,255,255,0.8);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .interpretations {
        margin-top: 15px;
        gap: 10px;
    }
    
    .interpretation {
        padding: 12px;
    }
    
    .interpretation h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .interpretation p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .tarot-sidebar section {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .tarot-sidebar figure {
        width: 100%;
        max-width: 120px;
    }
    
    .tarot-sidebar h4 {
        font-size: 0.9rem;
    }
}