* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

@font-face {
    font-family: 'Rubik-SemiBold';
    src: url('Fonts/Rubik-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Default values - will be overridden by JavaScript */
    --card-width: 120px;
    --card-height: 168px;
    /* NUEVO SISTEMA: Espaciado fijo entre pilas */
    /* Estos valores son calculados dinámicamente por ResponsiveLayoutSystem */
    /* con espaciado fijo constante y cartas que se redimensionan */
    --tableau-spacing: 8px;
    --foundation-spacing: 8px;
    --top-row-spacing: 12px;
    --board-width: 1000px;
    --top-row-width: 1000px;
    /* --card-spacing is now set dynamically by JavaScript */
    
    /* Fixed design tokens */
    --primary-color: #3b82f6;
    --secondary-color: #10b981;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --background-color: #f8fafc;
    --ui-background: #f8fafc;
    --card-background: #ffffff;
    --card-border: #e2e8f0;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --title-color: #1f2937;
    --modal-text-color: #1f2937;
    --modal-option-background: #f8fafc;
    --modal-border: #e2e8f0;
    --dropdown-background: #ffffff;
    --dropdown-text-color: #1f2937;
    --dropdown-border: #e2e8f0;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Layout tokens */
    --game-area-width: 100vw;
    
    /* Logo styling */
    --logo-filter: none;
}

body {
    background: var(--background-color);
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-color);
    height: 100vh;
    line-height: 1.5;
    overflow-y: hidden;
    overflow-x: hidden;
}

.game-container {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.game-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    width: 100vw; /* Usar todo el viewport width */
    max-width: none; /* Sin restricción de ancho máximo */
    box-sizing: border-box;
    margin: 0; /* Eliminar márgenes */
}

/* Base styles - Full Width Layout */
.desktop-hidden {
    display: none !important;
}

.mobile-hidden {
    display: none !important;
}



/* Mobile Portrait: 320px - 767px (portrait) */
@media (max-width: 767px) and (orientation: portrait) {
    .desktop-hidden {
        display: none !important;
    }
    
    .mobile-hidden {
        display: none !important;
    }
    

    
    .mobile-banner-ad.ads-visible {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background: var(--card-background);
        border-top: 1px solid var(--card-border);
        z-index: 999;
    }
    
    .game-board {
        margin-top: 15vh !important; /* Move game down moderately for thumb access */
    }
    
    .ads-active .game-board {
        padding-bottom: 60px !important; /* Space for banner ad when visible */
    }
    

    
    .sidebar {
        display: none !important;
    }
    
    /* Extra large center symbol in mobile portrait */
    .center-suit {
        font-size: clamp(3rem, 25vw, 6.5rem) !important; /* Even larger in portrait */
    }
    
    .card-center {
        top: 65% !important; /* Much lower positioning to avoid collision with top corner */
    }
    
    /* Larger top corner in mobile portrait */
    .corner-rank {
        font-size: clamp(1rem, 3.5vw, 1.3rem) !important;
        font-weight: 900 !important;
    }
    
    .corner-suit {
        font-size: clamp(0.9rem, 3vw, 1.2rem) !important;
    }
    
    /* Very minimal border radius in mobile portrait */
    .card, .card-pile, .foundation, .stock, .waste, .tableau-pile {
        border-radius: 3px !important;
    }
    
    .card.face-down::before {
        border-radius: 1px !important;
    }
}

/* Mobile Landscape: 480px - 767px (landscape) */
@media (max-width: 767px) and (orientation: landscape) {
    .desktop-hidden {
        display: none !important;
    }
    
    .mobile-hidden {
        display: none !important;
    }
    
    .game-layout {
        flex-direction: column !important;
        height: 100vh;
        overflow: hidden; /* Evitar scroll vertical */
    }
    
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Evitar scroll */
        min-height: 0; /* Permitir que el contenido se encoja */
    }
    
    .mobile-banner-ad,
    .mobile-game-stats {
        display: none !important;
    }

    
    /* Make the game header more compact */
    .game-header {
        padding: 0.1rem 1rem; /* Reducir padding vertical aún más */
        margin-bottom: 0.1rem; /* Reducir margen inferior aún más */
        flex-shrink: 0; /* No permitir que se encoja */
    }
    
    .game-header h1 {
        font-size: 1.3rem; /* Reducir tamaño de fuente */
        margin: 0;
    }
    
    .game-logo {
        height: 1.3rem; /* Reducir altura del logo */
        filter: var(--logo-filter);
    }
    
    /* Optimize game board padding and position for thumb accessibility */
    .game-board {
        padding: 0; /* Eliminar todo el padding */
        /* Centrar verticalmente el tablero para mejor ergonomía */
        justify-content: flex-start; /* Alinear al inicio para subir más el tablero */
        margin-top: 0 !important; /* Remover margen superior */
        padding-top: 0;
        flex: 1; /* Tomar todo el espacio disponible */
        overflow: visible; /* Permitir que las cartas se vean por encima */
        min-height: 0; /* Permitir que se encoja si es necesario */
        /* Reducir gap interno del tablero */
        gap: 1rem !important; /* Gap mínimo entre elementos */
    }
    
    /* Optimize card symbols for mobile landscape */
    .center-suit {
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important; /* Smaller in landscape */
    }
    
    .card-center {
        top: 52% !important;
    }
    
    .corner-rank {
        font-size: clamp(0.7rem, 2vw, 0.9rem) !important;
        font-weight: 700 !important;
    }
    
    .corner-suit {
        font-size: clamp(0.6rem, 1.8vw, 0.8rem) !important;
    }
    
    /* Slightly larger border radius in mobile landscape */
    .card, .card-pile, .foundation, .stock, .waste, .tableau-pile {
        border-radius: 4px !important;
    }
    
    .card.face-down::before {
        border-radius: 2px !important;
    }
}

/* Tablet Portrait: 768px - 1023px (portrait) - Bottom controls layout */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .desktop-hidden {
        display: none !important;
    }
    
    .mobile-hidden {
        display: none !important;
    }
    
    .game-layout {
        flex-direction: column !important;
        height: 100vh;
    }
    
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-right: 0;
    }
    
    .sidebar {
        display: none !important;
    }
    

    
    .mobile-banner-ad.ads-visible {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem;
        background: var(--card-background);
        border-top: 1px solid var(--card-border);
        z-index: 999;
    }
    

    
    /* Tablet portrait banner ad styling */
    .mobile-banner-content {
        height: 60px !important;
        font-size: 0.95rem !important;
    }
    
    .mobile-banner-icon {
        font-size: 1.5rem !important;
    }
    
    .mobile-banner-text {
        font-size: 0.9rem !important;
    }
    
    .mobile-banner-size {
        font-size: 0.75rem !important;
    }
    
    /* Adjust game board padding and position */
    .game-board {
        padding-bottom: 80px !important; /* Space for banner ad */
    }
    
    /* Tablet game stats below controls */
    .mobile-game-stats {
        display: flex !important;
        justify-content: space-around;
        background: var(--card-background);
        border-bottom: 1px solid var(--card-border);
        padding: 1.25rem 1rem;
        margin-bottom: 1rem;
        font-size: 1rem;
    }
    
    .mobile-game-stats .stat {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }
    
    .mobile-game-stats .stat-label {
        display: block;
        font-size: 0.85rem;
        color: var(--game-stats-text-color);
        line-height: 1;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    .mobile-game-stats .stat-value {
        display: block;
        font-weight: 600;
        color: var(--game-stats-value-color);
        font-family: monospace;
        font-size: 1.2rem;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        line-height: 1;
    }

    .mobile-game-stats .time-container {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        justify-content: center;
    }

    .mobile-game-stats .timer-toggle-btn {
        font-size: 1rem;
        min-width: 32px;
        height: 28px;
        padding: 0.3rem 0.5rem;
    }
    
    /* Slightly larger center symbol in tablet portrait */
    .center-suit {
        font-size: clamp(2.2rem, 6vw, 3.5rem) !important;
    }
    
    .card-center {
        top: 53% !important;
    }
    
    /* Moderate border radius for tablet */
    .card, .card-pile, .foundation, .stock, .waste, .tableau-pile {
        border-radius: 6px !important;
    }
    
    .card.face-down::before {
        border-radius: 4px !important;
    }
}

/* Tablet Landscape: 768px - 1023px (landscape) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .desktop-hidden {
        display: none !important;
    }
    
    .mobile-hidden {
        display: none !important;
    }
    
    .game-layout {
        flex-direction: column !important;
        height: 100vh;
    }
    
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .mobile-banner-ad,
    .mobile-game-stats {
        display: none !important;
    }
    
    /* Moderate border radius for tablet landscape */
    .card, .card-pile, .foundation, .stock, .waste, .tableau-pile {
        border-radius: 6px !important;
    }
    
    .card.face-down::before {
        border-radius: 4px !important;
    }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
    .desktop-hidden {
        display: none !important;
    }
    
    .mobile-hidden {
        display: none !important;
    }
    
    .game-layout {
        flex-direction: column !important;
        height: 100vh;
    }
    
    .main-content {
        flex: 1;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    
    .game-board {
        flex: 1;
        min-height: 0;
    }
    
    .mobile-banner-ad,
    .mobile-game-stats {
        display: none !important;
    }
}

/* Compact Layout for Small Frames - High Specificity Rules */
body.compact-layout .game-layout,
.compact-layout .game-layout {
    flex-direction: column !important;
    height: 100vh !important;
}

body.compact-layout .main-content,
.compact-layout .main-content {
    flex: 1 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
}

body.compact-layout .sidebar,
.compact-layout .sidebar,
body.compact-layout .mobile-hidden,
.compact-layout .mobile-hidden {
    display: none !important;
}

/* Force desktop hidden elements to be visible in compact mode */
body.compact-layout .desktop-hidden,
.compact-layout .desktop-hidden {
    display: flex !important;
}



body.compact-layout .mobile-game-stats {
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.85rem !important;
    gap: 2rem !important;
}

body.compact-layout .mobile-game-stats .stat {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-align: left !important;
}

body.compact-layout .mobile-game-stats .stat-label {
    font-size: 0.75rem !important;
    color: var(--stats-label-color) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    font-weight: 500 !important;
}

body.compact-layout .mobile-game-stats .stat-value {
    font-size: 0.9rem !important;
    color: var(--stats-value-color) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    font-weight: 600 !important;
    font-family: monospace !important;
}



body.compact-layout .game-board {
    flex: 1;
    padding: 0.2rem !important;
    margin: 5px 2px 10px 2px !important; /* top right bottom left - márgenes mínimos */
    width: calc(100vw - 4px) !important; /* Compensar márgenes laterales */
    max-width: none !important;
    box-sizing: border-box !important;
}



.game-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Hide Score in mobile game stats for consistency */
.mobile-game-stats .stat:first-child {
    display: none;
}

.stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(244, 208, 63, 0.2);
}

.stat:last-child {
    border-bottom: none;
}

.stat-label {
    font-weight: 500;
    color: var(--game-stats-text-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.stat-value {
    font-weight: 600;
    color: var(--game-stats-value-color);
    font-family: monospace;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.time-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timer-toggle-btn {
    background: var(--action-button-background);
    border: 1px solid var(--action-button-border);
    border-radius: var(--border-radius-sm);
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    color: var(--action-button-text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
}

.timer-toggle-btn:hover {
    background: var(--action-button-background);
    color: var(--action-button-text-color);
    border-color: var(--action-button-border);
    filter: brightness(1.1);
    transform: scale(1.05);
}

.timer-toggle-btn:active {
    transform: scale(0.95);
}

.timer-toggle-btn.paused {
    background: var(--action-button-background);
    color: var(--action-button-text-color);
    border-color: var(--action-button-border);
}

.timer-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    filter: brightness(0) invert(1); /* White icons for consistent theming */
}

.timer-toggle-btn:hover .timer-icon {
    filter: brightness(0) invert(1); /* Keep white on hover */
}

.timer-toggle-btn.paused .timer-icon {
    filter: brightness(0) invert(1); /* Keep white when paused */
}

/* These old icon rules are now handled by the sidebar-controls rules above */



[data-theme="Classic Solitaire"] .toggle-option.active {
    background: #F4D03F; /* Classic golden */
    color: #2C3E50;
}

[data-theme="Classic Solitaire"] .toggle-option:hover {
    background: rgba(244, 208, 63, 0.2); /* Light golden */
}

[data-theme="Classic Solitaire"] .toggle-option.active .draw-icon,
[data-theme="Classic Solitaire"] .toggle-option.active .shuffle-icon {
    filter: invert(0.2) sepia(1) saturate(0.8) hue-rotate(180deg); /* Dark icons */
}

/* Classic theme modal buttons */
[data-theme="Classic Solitaire"] .modal-btn.primary {
    background: #E6B800;
    border: 1px solid #CC9A00;
    color: #2C3E50;
    box-shadow: 
        0 3px 0 #CC9A00,
        0 6px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="Classic Solitaire"] .modal-btn.primary:hover {
    background: #D4AC0D;
    border: 1px solid #B7950B;
    color: #2C3E50;
    box-shadow: 
        0 3px 0 #B7950B,
        0 6px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="Classic Solitaire"] .modal-btn.secondary {
    color: #F4D03F;
    border-color: #F4D03F;
}

[data-theme="Classic Solitaire"] .modal-btn.secondary:hover {
    background: #F4D03F;
    color: #2C3E50;
}

/* Classic theme timer button */
[data-theme="Classic Solitaire"] .timer-toggle-btn {
    background: #E6B800;
    border: 1px solid #CC9A00;
    color: #2C3E50;
    box-shadow: 
        0 2px 0 #CC9A00,
        0 4px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="Classic Solitaire"] .timer-toggle-btn:hover {
    background: #D4AC0D;
    border: 1px solid #B7950B;
    color: #2C3E50;
    box-shadow: 
        0 2px 0 #B7950B,
        0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="Classic Solitaire"] .timer-toggle-btn.paused {
    background: #E6B800;
    border: 1px solid #CC9A00;
    color: #2C3E50;
    box-shadow: 
        0 2px 0 #CC9A00,
        0 4px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="Classic Solitaire"] .timer-toggle-btn:hover .timer-icon,
[data-theme="Classic Solitaire"] .timer-toggle-btn.paused .timer-icon {
    filter: invert(0.2) sepia(1) saturate(0.8) hue-rotate(180deg);
}



/* Classic theme header controls */
[data-theme="Classic Solitaire"] .controls button {
    background: #E6B800;
    border: 1px solid #CC9A00;
    color: #2C3E50;
    box-shadow: 
        0 3px 0 #CC9A00,
        0 6px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="Classic Solitaire"] .controls button:hover {
    background: #D4AC0D;
    border: 1px solid #B7950B;
    color: #2C3E50;
    box-shadow: 
        0 3px 0 #B7950B,
        0 6px 8px rgba(0, 0, 0, 0.3);
}

/* Custom Theme overrides - these should override Classic Solitaire rules */
[data-theme="Custom Theme"] .circular-button .button-icon {
    /* Remove filter to allow color inheritance */
    filter: none !important;
}

[data-theme="Custom Theme"] .circular-button:hover .button-icon {
    /* Remove filter to allow color inheritance */
    filter: none !important;
}

[data-theme="Custom Theme"] .menu-option-icon {
    /* Remove filter to allow color inheritance */
    filter: none !important;
}

[data-theme="Custom Theme"] .menu-option-button:hover .menu-option-icon {
    /* Remove filter to allow color inheritance */
    filter: none !important;
}






/* Advertisement section */
.ad-section {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: auto;
    display: none; /* Hidden by default, shown only when ADS is typed */
}

.ad-section.ads-visible {
    display: block;
}

.ad-container {
    border: 2px dashed var(--text-muted);
    border-radius: var(--border-radius);
    padding: 1rem;
    background: linear-gradient(45deg, transparent 25%, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.02) 50%, transparent 50%, transparent 75%, rgba(0,0,0,0.02) 75%);
    background-size: 8px 8px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-container:hover {
    border-color: var(--primary-color);
    border-style: solid;
    background: linear-gradient(45deg, transparent 25%, rgba(59, 130, 246, 0.1) 25%, rgba(59, 130, 246, 0.1) 50%, transparent 50%, transparent 75%, rgba(59, 130, 246, 0.1) 75%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.7;
}

.ad-container:hover .ad-placeholder {
    opacity: 1;
}

.ad-icon {
    font-size: 2rem;
    filter: grayscale(50%);
    transition: filter 0.3s ease;
}

.ad-container:hover .ad-icon {
    filter: grayscale(0%);
}

.ad-text {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-color);
    line-height: 1.2;
}

.ad-subtext {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.1;
}

/* Advertisement animations */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}



/* Mobile Banner Ad */
.mobile-banner-ad {
    display: none; /* Hidden by default, shown only when ADS is typed */
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.mobile-banner-ad.ads-visible {
    display: flex;
}

.mobile-banner-content {
    width: 100%;
    max-width: 320px;
    height: 40px;
    background: linear-gradient(45deg, transparent 25%, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.02) 50%, transparent 50%, transparent 75%, rgba(0,0,0,0.02) 75%);
    background-size: 8px 8px;
    border: 2px dashed var(--text-muted);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.mobile-banner-content:hover {
    border-color: var(--primary-color);
    border-style: solid;
    opacity: 1;
    background: linear-gradient(45deg, transparent 25%, rgba(59, 130, 246, 0.05) 25%, rgba(59, 130, 246, 0.05) 50%, transparent 50%, transparent 75%, rgba(59, 130, 246, 0.05) 75%);
}

.mobile-banner-icon {
    font-size: 1.2rem;
}

.mobile-banner-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
}

.mobile-banner-size {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Responsive ad adjustments */
@media (max-width: 767px) and (orientation: portrait) {
    .ad-section {
        display: none !important;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .ad-section {
        display: block !important;
    }
}

/* New Layout: Game UI Overlay */
.game-ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
}

.game-ui-overlay > * {
    pointer-events: auto;
}

/* Fixed Stats Bar - Texto flotante minimalista */
.fixed-stats-bar {
    position: fixed;
    top: 1rem; /* Alineado con menu button y action buttons */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center; /* Centrado vertical perfecto */
    justify-content: center;
    gap: 2rem; /* Reducido de 3rem a 2rem */
    /* Sin fondo, sin bordes - solo texto flotante */
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    z-index: 1001;
    box-shadow: none;
    height: 56px; /* Altura igual a los botones circulares para alineación perfecta */
    min-height: 56px; /* Altura mínima igual a los botones */
}

/* Menu Button (ahora independiente en la esquina) */
.menu-button {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 56px;
    height: 56px;
    background: var(--action-button-background);
    border: 2px solid var(--action-button-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 
        0 3px 0 var(--action-button-shadow),
        0 6px 8px rgba(0, 0, 0, 0.2);
}

.menu-button:hover {
    background: var(--action-button-background);
    border-color: var(--action-button-border);
    filter: brightness(1.1);
    transform: scale(1.1) translateY(-1px);
    box-shadow: 
        0 3px 0 var(--action-button-shadow),
        0 8px 15px rgba(0, 0, 0, 0.3);
}

.menu-button:active {
    transform: scale(0.95) translateY(1px);
    box-shadow: 
        0 1px 0 var(--action-button-shadow),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 16px;
}

.hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--action-button-text-color);
    border-radius: 1px;
    transition: all 0.3s ease;
}

.menu-button:hover .hamburger-icon span {
    background: var(--action-button-text-color);
}

/* Fixed Stats Bar Stats - TODO EN UNA LÍNEA HORIZONTAL */
.fixed-stats-bar .stat {
    display: flex;
    flex-direction: row; /* FORZAR dirección horizontal */
    align-items: center; /* Centrado vertical perfecto */
    gap: 0.4rem; /* Menos espacio entre label y valor */
    padding: 0;
    border: none;
    min-width: 0;
    height: 56px; /* Altura fija igual al contenedor padre */
    white-space: nowrap; /* Evitar salto de línea */
}

.fixed-stats-bar .stat-label {
    font-size: 0.9rem;
    color: var(--stats-label-color);
    font-weight: 600;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra más fuerte para legibilidad sin fondo */
}

.fixed-stats-bar .stat-value {
    font-weight: 700;
    color: var(--stats-value-color);
    font-family: monospace;
    font-size: 1.1rem;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra más fuerte para legibilidad sin fondo */
}

/* Legacy support para stats-overlay y header-stats */
.header-stats .stat,
.stats-overlay .stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: none;
    min-width: 0;
}

.header-stats .stat-label,
.stats-overlay .stat-label {
    font-size: 0.9rem;
    color: var(--stats-label-color);
    font-weight: 600;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.header-stats .stat-value,
.stats-overlay .stat-value {
    font-weight: 700;
    color: var(--stats-value-color);
    font-family: monospace;
    font-size: 1.1rem;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Fixed Stats Bar Timer - TODO EN LÍNEA HORIZONTAL */
.fixed-stats-bar .time-container {
    display: flex;
    flex-direction: row; /* FORZAR dirección horizontal */
    align-items: center; /* Centrado vertical perfecto */
    gap: 0.4rem;
    height: 56px; /* Altura fija igual al contenedor padre */
    white-space: nowrap; /* Evitar salto de línea */
}

.fixed-stats-bar .timer-toggle-btn {
    background: var(--action-button-background); /* Use theme colors */
    border: 1px solid var(--action-button-border); /* Use theme colors */
    border-radius: 4px;
    padding: 0.2rem; /* Padding reducido para mejor alineación */
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px; /* Ancho ligeramente reducido */
    height: 20px; /* Altura reducida para mejor alineación */
    flex-shrink: 0; /* No permitir que se encoja */
}

.fixed-stats-bar .timer-toggle-btn:hover {
    background: var(--action-button-background); /* Use theme colors */
    border-color: var(--action-button-border);
    filter: brightness(1.1);
    transform: scale(1.05);
}

.fixed-stats-bar .timer-toggle-btn:active {
    transform: scale(0.95);
    background: var(--action-button-background); /* Use theme colors */
}

.fixed-stats-bar .timer-icon {
    width: 12px; /* Ligeramente más pequeño para mejor proporción */
    height: 12px;
    filter: brightness(0) invert(1); /* White icons for consistent theming */
    flex-shrink: 0; /* No permitir que se encoja */
}

/* Legacy support para header-stats y stats-overlay */
.header-stats .time-container,
.stats-overlay .time-container {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.header-stats .timer-toggle-btn,
.stats-overlay .timer-toggle-btn {
    background: var(--action-button-background); /* Use theme colors */
    border: 1px solid var(--action-button-border); /* Use theme colors */
    border-radius: 4px;
    padding: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
}

.header-stats .timer-toggle-btn:hover,
.stats-overlay .timer-toggle-btn:hover {
    background: var(--action-button-background); /* Use theme colors */
    border-color: var(--action-button-border);
    filter: brightness(1.1);
    transform: scale(1.05);
}

.header-stats .timer-toggle-btn:active,
.stats-overlay .timer-toggle-btn:active {
    transform: scale(0.95);
    background: var(--action-button-background); /* Use theme colors */
}

.header-stats .timer-icon,
.stats-overlay .timer-icon {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1); /* White icons for consistent theming */
}

/* Bottom Action Buttons - Simplified positioning */
.bottom-action-buttons {
    position: absolute;
    display: flex;
    gap: 1rem;
    z-index: 1000;
}

/* Legacy support para action-buttons */
.action-buttons {
    position: absolute;
    display: flex;
    gap: 1rem;
    z-index: 1000;
}

.circular-button {
    width: 56px;
    height: 56px;
    background: var(--action-button-background);
    border: 2px solid var(--action-button-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 3px 0 var(--action-button-shadow),
        0 6px 8px rgba(0, 0, 0, 0.2);
}

.circular-button:hover {
    background: var(--action-button-background);
    border-color: var(--action-button-border);
    filter: brightness(1.1);
    transform: scale(1.1) translateY(-1px);
    box-shadow:
        0 3px 0 var(--action-button-shadow),
        0 8px 15px rgba(0, 0, 0, 0.3);
}

.circular-button:active {
    transform: scale(0.95) translateY(1px);
    box-shadow:
        0 1px 0 var(--action-button-shadow),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

.circular-button .button-icon {
    width: 24px;
    height: 24px;
    transition: all 0.2s ease;
}

/* If the icon is inline SVG, color via currentColor and avoid filter */
.circular-button .button-icon path,
.circular-button .button-icon rect,
.circular-button .button-icon circle,
.circular-button .button-icon polygon {
    fill: currentColor;
}

.circular-button .button-icon { color: var(--action-button-text-color); }

/* Hint counter styles */
.hint-counter {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--action-button-background);
    color: var(--action-button-text-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid var(--background-color);
    z-index: 10;
    transition: all 0.3s ease;
}

.hint-counter svg {
    width: 12px;
    height: 12px;
    color: var(--action-button-text-color);
}

.hint-button {
    position: relative;
}

.hint-counter.hidden {
    display: none;
}

.circular-button:hover .button-icon { transform: scale(1.1); }

/* Bottom Action Buttons - Responsive adjustments */
/* Landscape: botones arriba a la derecha, a la misma altura que el menú */
@media (orientation: landscape) {
    .bottom-action-buttons {
        right: 1rem; /* A la derecha */
        top: 1rem; /* Arriba, a la misma altura que el menú */
        left: auto;
        bottom: auto;
        transform: none;
        flex-direction: row; /* Horizontal en landscape */
    }
}

/* Portrait: botones abajo centrados */
@media (orientation: portrait) {
    .bottom-action-buttons {
        bottom: 1rem;
        left: 50%;
        right: auto;
        top: auto;
        transform: translateX(-50%);
        flex-direction: row;
    }
}

/* Portrait with ads: move buttons up to avoid banner */
.ads-active .bottom-action-buttons {
    bottom: 70px;
}

/* Legacy positioning for action-buttons (para compatibilidad) */
/* Landscape: buttons on the right top, aligned with menu height */
@media (orientation: landscape) {
    .action-buttons {
        right: 1rem; /* A la derecha */
        top: 1rem; /* Arriba, a la misma altura que el menú */
        left: auto;
        bottom: auto;
        transform: none;
        flex-direction: row; /* Horizontal en landscape */
    }
}

/* Portrait: buttons at the bottom center */
@media (orientation: portrait) {
    .action-buttons {
        bottom: 1rem;
        left: 50%;
        right: auto;
        top: auto;
        transform: translateX(-50%);
        flex-direction: row;
    }
}

/* Portrait with ads: move buttons up to avoid banner */
@media (orientation: portrait) {
    .ads-active .action-buttons {
        bottom: 70px;
    }
}

/* Game Menu Modal */
.game-menu-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.game-menu-modal.show {
    opacity: 1;
}

.menu-modal-content {
    background: var(--new-game-modal-background);
    border: 4px solid var(--new-game-modal-border);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(251, 191, 36, 0.3);
    width: 320px;
    max-width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.game-menu-modal.show .menu-modal-content {
    transform: scale(1);
}

.menu-modal-header {
    padding: 1.5rem 2rem 0.5rem 2rem;
    text-align: center;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.menu-modal-header h3 {
    color: var(--new-game-text-color);
    font-size: 2rem;
    font-weight: 400;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.menu-modal-body {
    padding: 1.5rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.menu-option-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--modal-button-primary);
    border: 2px solid var(--modal-button-border);
    border-radius: 12px;
    color: var(--modal-button-text);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    box-shadow:
        0 3px 0 var(--modal-button-border),
        0 6px 8px rgba(0, 0, 0, 0.2);
}

.menu-option-button:hover {
    background: var(--modal-button-primary);
    border-color: var(--modal-button-border);
    color: var(--modal-button-text);
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow:
        0 3px 0 var(--modal-button-border),
        0 8px 15px rgba(0, 0, 0, 0.3);
}

.menu-option-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* If the icon is inline SVG, color via currentColor and avoid filter */
.menu-option-icon path,
.menu-option-icon rect,
.menu-option-icon circle,
.menu-option-icon polygon {
    fill: currentColor;
}

.menu-option-icon { color: var(--button-text-color); }

.menu-option-button:hover .menu-option-icon {
    transform: scale(1.1);
}

/* Modal close button */
.menu-modal-header .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--new-game-modal-border);
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
}

.menu-modal-header .modal-close:hover {
    background: rgba(251, 191, 36, 0.2);
    color: var(--new-game-text-color);
    transform: rotate(90deg);
}

/* Responsive adjustments for fixed stats bar */
@media (max-width: 767px) {
    .fixed-stats-bar {
        top: 0.75rem; /* Alineado proporcionalmente con botones móviles */
        gap: 1.5rem; /* Menos espacio entre stats en móvil */
        height: 48px; /* Altura ajustada para móvil */
        min-height: 48px; /* Altura mínima para móvil */
    }
    
    .fixed-stats-bar .stat {
        gap: 0.3rem; /* Menos espacio entre label y valor en móvil */
        flex-direction: row !important; /* FORZAR horizontal en móvil */
        white-space: nowrap !important;
        height: 48px !important; /* Altura ajustada para móvil */
    }
    
    .fixed-stats-bar .stat-label {
        font-size: 0.75rem;
    }
    
    .fixed-stats-bar .stat-value {
        font-size: 0.9rem;
    }
    
    .fixed-stats-bar .timer-toggle-btn {
        min-width: 24px;
        height: 20px;
        padding: 0.2rem;
    }
    
    .fixed-stats-bar .timer-icon {
        width: 12px;
        height: 12px;
    }
    
    .menu-button {
        width: 48px;
        height: 48px;
        top: 0.75rem; /* Alineado con stats */
        left: 0.75rem;
    }
    
    .hamburger-icon {
        width: 18px;
        height: 14px;
    }
}

/* Pantallas muy anchas - estadísticas aún más compactas */
@media (min-width: 1200px) and (min-aspect-ratio: 16/10) {
    .fixed-stats-bar {
        top: 0.25rem; /* Muy arriba en pantallas anchas */
        gap: 1.5rem; /* Gap compacto */
    }
    
    .menu-button {
        top: 0.5rem; /* Alineado con la zona superior */
    }
}

/* Mobile landscape specific adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    .fixed-stats-bar {
        top: 0.5rem !important; /* Alineado con botones en landscape */
        gap: 1rem !important; /* Más compacto en landscape */
        height: 44px !important; /* Altura compacta para landscape */
        min-height: 44px !important;
    }
    
    .fixed-stats-bar .stat {
        gap: 0.25rem !important; /* Muy compacto entre label y valor */
        flex-direction: row !important; /* FORZAR horizontal en landscape */
        white-space: nowrap !important;
        height: 44px !important; /* Altura compacta para landscape */
    }
    
    .fixed-stats-bar .stat-label {
        font-size: 0.7rem !important;
    }
    
    .fixed-stats-bar .stat-value {
        font-size: 0.8rem !important;
    }
    
    .fixed-stats-bar .timer-toggle-btn {
        min-width: 22px !important;
        height: 18px !important;
        padding: 0.15rem !important;
    }
    
    .fixed-stats-bar .timer-icon {
        width: 10px !important;
        height: 10px !important;
    }
    
    .menu-button {
        top: 0.5rem !important; /* Alineado con stats */
        left: 0.5rem !important;
        width: 44px; /* Botón más pequeño */
        height: 44px;
    }
    
    .circular-button {
        width: 48px;
        height: 48px;
    }
    
    .circular-button .button-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .stats-overlay {
        flex-direction: row;
        gap: 0.75rem;
        max-width: 280px; /* Layout horizontal minimalista */
    }
    
    .stats-overlay .stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 0;
    }
    
    .stats-overlay .stat-label {
        font-size: 0.7rem;
    }
    
    .stats-overlay .stat-value {
        font-size: 0.85rem;
    }
    
    .stats-overlay .timer-toggle-btn {
        min-width: 24px;
        height: 20px;
        padding: 0.2rem;
    }
    
    .stats-overlay .timer-icon {
        width: 11px;
        height: 11px;
    }
    
    .menu-modal-content {
        width: 280px;
    }
    
    .menu-modal-header {
        padding: 1rem 1.5rem 0.5rem 1.5rem;
    }
    
    .menu-modal-header h3 {
        font-size: 1.5rem;
    }
    
    .menu-modal-body {
        padding: 1rem 1.5rem 1.5rem 1.5rem;
    }
    
    .menu-option-button {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    
    .menu-option-icon {
        width: 20px;
        height: 20px;
    }
}

/* Game board layout with EXTREME minimal margins */
.game-board {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 1vh, 0.5rem);
    padding: 0.1rem 0;
    overflow: visible !important;
    min-height: 0;
    /* MÁRGENES EXTREMADAMENTE MÍNIMOS - evitar cortes */
    margin-top: 10px; /* Reducido de 45px a 10px - subir más el tablero */
    margin-bottom: 30px; /* Reducido de 50px a 30px */
    /* Usar todo el ancho disponible sin restricciones */
    width: 100vw; /* Usar todo el viewport width */
    max-width: none; /* Eliminar restricción de ancho máximo */
    box-sizing: border-box;
    /* Márgenes laterales mínimos */
    margin-left: 5px;
    margin-right: 5px;
}

/* Landscape: reglas base para overflow y z-index */
@media (orientation: landscape) {
    .game-board {
        padding-top: 0 !important; /* Sin padding superior */
        padding-bottom: 0 !important; /* Sin padding inferior */
        /* Permitir que las cartas se extiendan más allá del contenedor */
        overflow: visible !important;
        position: relative;
        z-index: 10; /* Asegurar que las cartas estén por encima de otros elementos */
    }
    
    /* Asegurar que el contenedor principal use todo el espacio */
    body {
        overflow: hidden; /* Evitar scroll del body */
        height: 100vh; /* Altura fija del viewport */
    }
    
    .game-container {
        height: 100vh !important; /* Usar toda la altura del viewport */
        overflow: hidden !important;
        position: relative;
    }
    
    /* Permitir que las pilas del tableau se extiendan sin restricciones */
    .tableau {
        overflow: visible !important;
        z-index: 10;
    }
    
    .tableau-pile {
        overflow: visible !important;
    }
    
    .card {
    }
    
    .card.selected {
        z-index: 200 !important;
    }
    
    .card.dragging {
        z-index: 300 !important;
    }
    
    /* Asegurar que main-content usa todo el espacio disponible */
    .main-content {
        height: 100vh !important;
        max-height: 100vh !important;
    }
}

@media (max-width: 480px) {
    .game-board {
        margin-top: 30px !important; /* Reducido de 45px a 30px */
        margin-bottom: 35px !important; /* Reducido de 45px a 35px */
    }
}

@media (min-width: 768px) {
    .game-board {
        width: 100%;
        max-width: 100%;
        /* En desktop, márgenes extremos */
        margin-top: 20px !important; /* Reducido de 40px a 20px */
        margin-bottom: 35px !important; /* Reducido de 45px a 35px */
    }
}

@media (min-width: 1024px) {
    .game-board {
        /* En desktop grande, márgenes mínimos absolutos */
        margin-top: 15px !important; /* Reducido de 35px a 15px */
        margin-bottom: 30px !important; /* Reducido de 40px a 30px */
    }
}

/* Pantallas muy anchas - botones laterales, márgenes mínimos */
@media (min-width: 1200px) and (min-aspect-ratio: 16/10) {
    .game-board {
        /* En pantallas muy anchas, márgenes mínimos absolutos */
        margin-top: 10px !important; /* Reducido de 30px a 10px */
        margin-bottom: 20px !important; /* Reducido de 30px a 20px */
    }
}

/* Landscape: botones arriba a la derecha */
@media (orientation: landscape) {
    .game-board {
        margin-bottom: 15px !important; /* Margen mínimo abajo */
        margin-top: 5px !important; /* Espacio mínimo para stats y botones arriba */
        margin-right: 5px !important; /* Margen mínimo a la derecha */
        margin-left: 5px !important; /* Margen mínimo a la izquierda */
        width: calc(100vw - 10px) !important; /* Usar casi todo el ancho */
        max-width: none !important;
    }
}

/* Portrait: botones abajo centrados */
@media (orientation: portrait) {
    .game-board {
        margin-bottom: 40px !important; /* Espacio para botones abajo */
        margin-top: 25px !important; /* Espacio para stats arriba */
        margin-right: 2px !important; /* Margen mínimo a la derecha */
        margin-left: 2px !important; /* Margen mínimo a la izquierda */
    }
}

.top-row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

/* Mobile landscape - reducir spacing entre top-row y tableau */
@media (max-width: 767px) and (orientation: landscape) {
    .top-row {
        margin-bottom: -5px !important; /* Margen negativo para acercar más */
    }
}

.stock-waste-foundations {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: var(--top-row-width);
    max-width: none; /* Permitir que use todo el ancho calculado */
    gap: var(--top-row-spacing);
}

.stock-waste {
    display: flex;
    gap: var(--foundation-spacing);
    align-items: flex-start;
}

.foundations {
    display: flex;
    gap: var(--foundation-spacing);
    align-items: flex-start;
}

.tableau {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: var(--board-width);
    max-width: none; /* Permitir que use todo el ancho calculado */
    gap: var(--tableau-spacing);
}

/* Card pile base styles */
.card-pile, .tableau-pile, .foundation, .stock, .waste {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    min-width: var(--card-width);
    min-height: var(--card-height);
    background: var(--empty-pile-background);
    border: none;
    border-radius: var(--dynamic-border-radius, var(--border-radius));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: all 0.2s ease;
}

.card-pile.drop-target {
    background: rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.waste {
    background: var(--empty-pile-background);
    border: none;
    position: relative;
}

.waste::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    /* Color the icon with the game background color using mask */
    -webkit-mask: url('Sprites/waste_icon.svg') no-repeat center / contain;
    mask: url('Sprites/waste_icon.svg') no-repeat center / contain;
    background-color: var(--background-color);
    opacity: 1;
}

.waste:hover {
    background: var(--empty-pile-hover-background);
}

.waste:hover::before { opacity: 1; }

.foundation {
    background: var(--empty-pile-background);
    border: none;
    position: relative;
}

.foundation::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    /* Color the icon with the game background color using mask */
    -webkit-mask: url('Sprites/foundation_icon.svg') no-repeat center / contain;
    mask: url('Sprites/foundation_icon.svg') no-repeat center / contain;
    background-color: var(--background-color);
    opacity: 1;
}

.foundation:hover {
    background: var(--empty-pile-hover-background);
}

.foundation:hover::before {
    opacity: 1;
}

.stock {
    background-image: url('Sprites/color/back.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stock:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stock.empty {
    background-image: url('Sprites/color/back.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    cursor: default;
}

.stock.empty:hover {
    transform: none;
    box-shadow: none;
}

.stock.empty::after {
    content: '↻';
    color: rgba(0, 0, 0, 0.6);
    font-size: clamp(1.5rem, 4vw, 2rem);
    z-index: 1;
}

/* Card styles */
.card {
    position: absolute;
    width: var(--card-width);
    height: var(--card-height);
    background: var(--card-background);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--dynamic-border-radius, var(--border-radius));
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden; /* Mask the face card figures to card shape */
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card.selected {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.card.dragging {
    transform: scale(1.05);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3), 0 8px 16px -4px rgba(0, 0, 0, 0.2);
    z-index: 99999 !important;
}

.card.face-down {
    background-image: url('Sprites/color/back.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.card-corner {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0rem;
    font-weight: 600;
    line-height: .5;
}

.card-corner.top-left {
    /* top: 0.4rem;
    left: 0.4rem; */

}

.card-corner.bottom-right {
    display: none; /* Hide bottom corner completely to prevent interference with face card figures */
}

.corner-rank {
    font-size: clamp(0.8rem, 2.5vw, 1.1rem);
    font-weight: 700;
    margin-bottom: -0.1rem;
    margin-right: -0.4rem;
}

.corner-suit {
    font-size: clamp(0.8rem, 2.2vw, 1.1rem);
    /* line-height: 1; */
}

.card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-center.desktop-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    display: block;
}

/* Fix rotation pivot for suit pattern symbols */
.card-center.desktop-pattern > div {
    transform-origin: center !important;
}

.center-suit {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
}

/* Face card SVG styles - Bottom aligned with overflow for better positioning */
.face-card-svg {
    position: absolute !important;
    bottom: -10px !important; /* Lower positioning to show more of the figure */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--face-card-width, 130%) !important; /* Larger width */
    height: var(--face-card-height, 115%) !important; /* Larger height */
    min-width: var(--face-card-min-width, 60px);
    min-height: var(--face-card-min-height, 80px);
    pointer-events: none;
}

.face-card-svg svg {
    width: 100%;
    height: 100%;
    min-width: 50px;
    min-height: 50px;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

/* Face card container - override centering when it contains PNG figures or layered system */
.card-center:has(.face-card-png),
.card-center:has(.face-card-single),
.card-center:has(.face-card-layered),
.card-center.face-card-container,
.device-mobile .card-center:has(.face-card-png),
.device-mobile .card-center:has(.face-card-single),
.device-mobile .card-center:has(.face-card-layered),
.device-mobile .card-center.face-card-container,
.size-tiny .card-center:has(.face-card-png),
.size-tiny .card-center:has(.face-card-single),
.size-tiny .card-center:has(.face-card-layered),
.size-tiny .card-center.face-card-container {
    top: auto !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Face card single image styles */
.face-card-single {
    position: absolute !important;
    bottom: -15px !important; /* Lower positioning for better figure display */
    left: -10% !important; /* Center the larger image */
    right: 0 !important;
    width: 120% !important; /* Larger width */
    height: 100% !important; /* Larger height */
    pointer-events: none;
}

.face-card-single img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

/* Face card PNG styles - Bottom aligned (legacy fallback) with overflow for better positioning */
.face-card-png {
    position: absolute !important;
    bottom: -15px !important; /* Lower positioning for better figure display */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--face-card-width, 120%) !important; /* Larger width */
    height: var(--face-card-height, 140%) !important; /* Larger height */
    min-width: var(--face-card-min-width, 70px);
    min-height: var(--face-card-min-height, 100px);
    max-width: none !important; /* Remove max-width constraint */
    max-height: none !important; /* Remove max-height constraint to allow overflow */
    pointer-events: none;
}

/* OVERRIDE base rule for mobile with proportional width */
@media (max-width: 768px) {
    html body .face-card-single.face-card-single.face-card-single {
        width: 130% !important;
        height: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    html body .face-card-png.face-card-png.face-card-png {
        width: 80% !important;
        height: 60% !important;
        min-width: 40px !important;
        min-height: 50px !important;
        max-width: none !important;
        max-height: 65% !important;
    }
    
    /* FORCE override the CSS variables with proportional values for mobile */
    :root {
        --face-card-width: 130% !important; /* Larger on mobile too */
        --face-card-height: 100% !important; /* Larger height on mobile */
        --face-card-min-width: 40px !important;
        --face-card-min-height: 50px !important;
        --face-card-max-height: none !important; /* Remove constraint to allow overflow */
    }
}

/* Mobile face card sizing - allow larger figures with card masking */
body.device-mobile .card .card-center .face-card-single,
body.device-mobile .face-card-single,
.device-mobile .card .card-center .face-card-single {
    width: 130% !important; /* Larger figures on mobile */
    height: 100% !important;
    left: -10% !important; /* Center the larger image */
    right: 0 !important;
    bottom: -10px !important; /* Lower positioning */
}

body.device-mobile .card .card-center .face-card-png,
body.device-mobile .face-card-png,
.device-mobile .card .card-center .face-card-png {
    width: 100% !important; /* Larger PNG figures on mobile */
    height: 80% !important;
    min-width: 30px !important;
    min-height: 40px !important;
    bottom: -10px !important; /* Lower positioning */
}

.face-card-png img {
    width: 100%;
    height: 100%;
    min-width: 50px;
    min-height: 50px;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    transform-origin: center bottom;
}



/* SVG Layer stacking order */
.face-card-svg.base-layer {
    z-index: 1;
}

.face-card-svg.middle-layer {
    z-index: 2;
}

.face-card-svg.color-layer {
    z-index: 3;
}

/* New layered face card system - 3 stacked SVGs */
.face-card-layered {
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--face-card-width, 110%) !important;
    height: var(--face-card-height, 115%) !important;
    min-width: var(--face-card-min-width, 60px);
    min-height: var(--face-card-min-height, 80px);
    pointer-events: none;
}

.face-card-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
}

.face-card-layer svg {
    width: 100%;
    height: 100%;
    min-width: 50px;
    min-height: 50px;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

/* Layer stacking order - layer-01 on top */
.face-card-layer.layer-01 {
    z-index: 3;
}

.face-card-layer.layer-02 {
    z-index: 2;
}

.face-card-layer.layer-03 {
    z-index: 1;
}

/* Layer 01: Color del palo */
.card.red .face-card-layer.layer-01 {
    color: var(--red-card-color);
}
.card.black .face-card-layer.layer-01 {
    color: var(--black-card-color);
}

/* Layer 02: Color secundario del palo */
.card.red .face-card-layer.layer-02 {
    color: var(--red-card-color-secondary);
}
.card.black .face-card-layer.layer-02 {
    color: var(--black-card-color-secondary);
}

/* Layer 03: Color terciario de las figuras */
.face-card-layer.layer-03 {
    color: var(--figure-third-color);
}

/* Error indicator for failed SVG loads */
.svg-error {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: var(--text-muted);
    opacity: 0.5;
}

/* PNG filters are now applied dynamically via JavaScript */

.loading-face-card {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

/* Face card placeholder styles - temporary until proper images are available */
.face-card-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.face-card-suit-large {
    font-size: clamp(2.5rem, 8vw, 4rem);
    line-height: 1;
    color: currentColor;
    text-align: center;
}

.face-card-rank {
    font-size: clamp(0.8rem, 2.5vw, 1.2rem);
    font-weight: 700;
    color: currentColor;
    text-align: center;
    margin-top: -0.5rem;
}



/* Sidebar audio button spacing */
/* Audio button now uses the same styles as other sidebar buttons */

.suit-symbol {
    user-select: none;
    -webkit-user-select: none;
    /* Scale font size based on card width - approximately 22% of card width with bounds */
    font-size: clamp(16px, calc(var(--card-width) * 0.22), 35px);
    width: clamp(16px, calc(var(--card-width) * 0.22), 35px);
    height: clamp(16px, calc(var(--card-width) * 0.22), 35px);
    object-fit: contain;
}

.corner-suit-img {
    user-select: none;
    -webkit-user-select: none;
    width: clamp(12px, calc(var(--card-width) * 0.16), 20px);
    height: clamp(12px, calc(var(--card-width) * 0.16), 20px);
    object-fit: contain;
}

.center-suit-img {
    user-select: none;
    -webkit-user-select: none;
    width: clamp(30px, calc(var(--card-width) * 0.35), 50px);
    height: clamp(30px, calc(var(--card-width) * 0.35), 50px);
    object-fit: contain;
}

.face-card-suit-img {
    user-select: none;
    -webkit-user-select: none;
    width: clamp(40px, calc(var(--card-width) * 0.4), 60px);
    height: clamp(40px, calc(var(--card-width) * 0.4), 60px);
    object-fit: contain;
}

/* Color the suit symbols correctly */
.card.red .suit-symbol {
    color: var(--red-card-color);
}

.card.black .suit-symbol {
    color: var(--black-card-color, var(--text-color));
}

/* Base styles for PNG suit images */
.suit-symbol,
.corner-suit-img,
.center-suit-img,
.face-card-suit-img {
    display: inline-block;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: center;
}

/* Size variants */
.suit-symbol {
    width: clamp(20px, calc(var(--card-width) * 0.28), 45px);
    height: clamp(20px, calc(var(--card-width) * 0.28), 45px);
}

.corner-suit-img {
    width: clamp(12px, calc(var(--card-width) * 0.16), 20px);
    height: clamp(12px, calc(var(--card-width) * 0.16), 20px);
}

.center-suit-img {
    width: clamp(40px, calc(var(--card-width) * 0.45), 65px);
    height: clamp(40px, calc(var(--card-width) * 0.45), 65px);
}

/* Ace cards get much larger center symbols like real playing cards */
.card[data-rank="A"] .center-suit-img {
    width: clamp(60px, calc(var(--card-width) * 0.65), 100px);
    height: clamp(60px, calc(var(--card-width) * 0.65), 100px);
}

/* Also make the center suit symbol larger for Aces in mobile */
.card[data-rank="A"] .center-suit {
    font-size: clamp(3rem, 8vw, 5rem);
}

/* Make Aces same size as other cards in mobile */
.device-mobile .card[data-rank="A"] .center-suit {
    font-size: clamp(2.5rem, 8vw, 4rem) !important; /* Same size as other cards in mobile */
}

.device-mobile .card[data-rank="A"] .center-suit-img {
    width: clamp(40px, calc(var(--card-width) * 0.45), 65px) !important; /* Same size as other cards */
    height: clamp(40px, calc(var(--card-width) * 0.45), 65px) !important;
}

/* Mobile media query override for Aces - force same size as other cards */
@media (max-width: 767px) {
    .card[data-rank="A"] .center-suit {
        font-size: clamp(2.5rem, 8vw, 4rem) !important; /* Same as mobile center-suit */
    }
    
    .card[data-rank="A"] .center-suit-img {
        width: clamp(40px, calc(var(--card-width) * 0.45), 65px) !important;
        height: clamp(40px, calc(var(--card-width) * 0.45), 65px) !important;
    }
    
    /* Override desktop pattern for Aces too */
    .card[data-rank="A"] .desktop-pattern .suit-symbol,
    .card[data-rank="A"] .desktop-pattern img {
        width: clamp(40px, calc(var(--card-width) * 0.45), 65px) !important;
        height: clamp(40px, calc(var(--card-width) * 0.45), 65px) !important;
        font-size: clamp(40px, calc(var(--card-width) * 0.45), 65px) !important;
    }
    
    /* Better centering for card center symbols in mobile */
    .card-center {
        transform: translate(-50%, -30%) !important;
    }
    

}

/* Make Ace symbols larger in desktop pattern too */
.card[data-rank="A"] .desktop-pattern .suit-symbol,
.card[data-rank="A"] .desktop-pattern img {
    width: clamp(50px, calc(var(--card-width) * 0.55), 80px) !important;
    height: clamp(50px, calc(var(--card-width) * 0.55), 80px) !important;
    font-size: clamp(50px, calc(var(--card-width) * 0.55), 80px) !important;
}

.face-card-suit-img {
    width: clamp(40px, calc(var(--card-width) * 0.4), 60px);
    height: clamp(40px, calc(var(--card-width) * 0.4), 60px);
}

/* SVG images as CSS masks - works with white SVGs with transparent background */
.suit-hearts {
    -webkit-mask: url('Sprites/suit_hearts.svg') no-repeat center / contain;
    mask: url('Sprites/suit_hearts.svg') no-repeat center / contain;
}

.suit-diamonds {
    -webkit-mask: url('Sprites/suit_diamonds.svg') no-repeat center / contain;
    mask: url('Sprites/suit_diamonds.svg') no-repeat center / contain;
}

.suit-clubs {
    -webkit-mask: url('Sprites/suit_clubs.svg') no-repeat center / contain;
    mask: url('Sprites/suit_clubs.svg') no-repeat center / contain;
}

.suit-spades {
    -webkit-mask: url('Sprites/suit_spades.svg') no-repeat center / contain;
    mask: url('Sprites/suit_spades.svg') no-repeat center / contain;
}

/* Color the masked elements using theme colors */
.card.red .suit-hearts,
.card.red .suit-diamonds {
    background-color: var(--red-card-color);
}

.card.black .suit-clubs,
.card.black .suit-spades {
    background-color: var(--black-card-color, var(--text-color));
}

/* SVG images as CSS masks for ranks/letters - works with white SVGs with transparent background */
.rank-A {
    -webkit-mask: url("Sprites/Rank_A.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_A.svg") no-repeat center / contain;
}

.rank-2 {
    -webkit-mask: url("Sprites/Rank_2.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_2.svg") no-repeat center / contain;
}

.rank-3 {
    -webkit-mask: url("Sprites/Rank_3.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_3.svg") no-repeat center / contain;
}

.rank-4 {
    -webkit-mask: url("Sprites/Rank_4.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_4.svg") no-repeat center / contain;
}

.rank-5 {
    -webkit-mask: url("Sprites/Rank_5.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_5.svg") no-repeat center / contain;
}

.rank-6 {
    -webkit-mask: url("Sprites/Rank_6.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_6.svg") no-repeat center / contain;
}

.rank-7 {
    -webkit-mask: url("Sprites/Rank_7.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_7.svg") no-repeat center / contain;
}

.rank-8 {
    -webkit-mask: url("Sprites/Rank_8.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_8.svg") no-repeat center / contain;
}

.rank-9 {
    -webkit-mask: url("Sprites/Rank_9.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_9.svg") no-repeat center / contain;
}

.rank-10 {
    -webkit-mask: url("Sprites/Rank_10.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_10.svg") no-repeat center / contain;
}

.rank-J {
    -webkit-mask: url("Sprites/Rank_J.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_J.svg") no-repeat center / contain;
}

.rank-Q {
    -webkit-mask: url("Sprites/Rank_Q.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_Q.svg") no-repeat center / contain;
}

.rank-K {
    -webkit-mask: url("Sprites/Rank_K.svg") no-repeat center / contain;
    mask: url("Sprites/Rank_K.svg") no-repeat center / contain;
}

/* Size variants for rank images */
.corner-rank-img {
    display: inline-block;
    width: clamp(16px, calc(var(--card-width) * 0.22), 24px);
    height: clamp(16px, calc(var(--card-width) * 0.22), 24px);
    transform-origin: center;
}

.face-card-rank-img {
    display: inline-block;
    width: clamp(20px, calc(var(--card-width) * 0.25), 24px);
    height: clamp(20px, calc(var(--card-width) * 0.25), 24px);
    transform-origin: center;
}

/* Color the rank images using theme colors */
.card.red .corner-rank-img,
.card.red .face-card-rank-img {
    background-color: var(--red-card-color);
}

.card.black .corner-rank-img,
.card.black .face-card-rank-img {
    background-color: var(--black-card-color, var(--text-color));
}

.card.red .corner-rank,
.card.red .face-card-rank {
    color: var(--red-card-color);
}

.card.black .corner-rank,
.card.black .face-card-rank {
    color: var(--black-card-color, var(--text-color));
}

/* Obsolete color rules for suit elements - now handled by filters */
.card.red .corner-suit,
.card.red .center-suit,
.card.red .face-card-suit-large {
    color: var(--red-card-color);
}

.card.black .corner-suit,
.card.black .center-suit,
.card.black .face-card-suit-large {
    color: var(--black-card-color, var(--text-color));
}

/* Animation states */
.animating-card {
    pointer-events: none;
    z-index: 1000;
}

.drag-ghost {
    opacity: 0.8;
    transform: rotate(5deg);
    z-index: 999;
}

/* Device-specific optimizations */
.touch-device .card {
    cursor: default;
}

.touch-device .controls button {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
}

/* Mobile-specific card optimizations */
.device-mobile .card-corner.bottom-right {
    display: none; /* Hide bottom corner on mobile to prevent overlapping */
}

.device-tablet .card-corner.bottom-right {
    display: none; /* Hide bottom corner on tablets too for consistency */
}

/* Enlarge center symbol on mobile */
.device-mobile .center-suit {
    font-size: clamp(2.5rem, 8vw, 4rem); /* Increased from 2rem-3rem to 2.5rem-4rem */
}

.device-mobile .card-center {
    /* Center the symbol more precisely on mobile */
    top: 65%; /* Much lower to avoid collision with top corner */
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Make top corner slightly larger on mobile for better visibility */
.device-mobile .corner-rank {
    font-size: clamp(0.9rem, 3vw, 1.2rem); /* Increased from 0.8rem-1.1rem */
    font-weight: 800; /* Bolder text */
}

.device-mobile .corner-suit {
    font-size: clamp(0.8rem, 2.5vw, 1.1rem); /* Increased from 0.7rem-1rem */
}

/* Reduce border radius on mobile for better proportions */
.device-mobile .card {
    border-radius: 4px; /* Reduced from default 12px to 4px for mobile */
}

.device-mobile .card-pile, 
.device-mobile .tableau-pile, 
.device-mobile .foundation, 
.device-mobile .stock, 
.device-mobile .waste {
    border-radius: 4px; /* Consistent border radius for all card areas on mobile */
}

.device-mobile .card.face-down::before {
    border-radius: 2px; /* Adjust inner pattern border radius */
}

/* Mobile spacing optimizations - REMOVED fixed gaps to use dynamic spacing from ResponsiveLayoutSystem */
/* The spacing is now controlled entirely by CSS variables set by JavaScript */

/* Ensure card back symbols don't overflow on mobile */
.device-mobile .card.face-down::after {
    max-width: calc(100% - calc(var(--card-back-inset, 3px) * 2));
    text-align: center;
    box-sizing: border-box;
    font-size: calc(var(--card-back-font-size, 1rem) * 1.1); /* 10% larger font on mobile */
    letter-spacing: calc(var(--card-back-letter-spacing, 2px) * 0.8); /* Slightly tighter letter spacing on mobile */
}

/* Mobile Portrait: Even larger back symbols */
@media (max-width: 767px) and (orientation: portrait) {
    .card.face-down::after {
        font-size: calc(var(--card-back-font-size, 1rem) * 1.3) !important; /* 30% larger in portrait */
        letter-spacing: calc(var(--card-back-letter-spacing, 2px) * 0.9) !important;
    }
}

/* Mobile Landscape: Smaller back symbols to fit */
@media (max-width: 767px) and (orientation: landscape) {
    .card.face-down::after {
        font-size: calc(var(--card-back-font-size, 1rem) * 0.9) !important; /* 10% smaller in landscape */
        letter-spacing: calc(var(--card-back-letter-spacing, 2px) * 0.6) !important;
    }
}

/* Size-specific adjustments */
.size-tiny .game-header h1 {
    font-size: 1.5rem;
}

.size-tiny .game-logo {
    height: 1.5rem;
    filter: var(--logo-filter);
}

.size-tiny .controls {
    gap: 0.5rem;
}

.size-tiny .controls button {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

.size-tiny .card-corner {
    top: 0.25rem;
    left: 0.25rem;
}

.size-tiny .card-corner.bottom-right {
    bottom: 0.25rem;
    right: 0.25rem;
}

/* Extra optimizations for very small cards */
.size-tiny .center-suit {
    font-size: clamp(1.5rem, 7vw, 2.5rem) !important; /* Ensure minimum readability */
}

.size-tiny .card-center {
    top: 50% !important; /* Center better on tiny cards */
}

/* Override for face card PNGs - keep them bottom-aligned even on tiny cards with masking */
.size-tiny .face-card-png {
    top: auto !important;
    bottom: -5px !important; /* Lower positioning for tiny cards */
    width: 110% !important; /* Larger figures even on tiny cards */
    height: 100% !important;
    max-height: none !important; /* Remove constraint, let card mask the overflow */
}

.size-tiny .corner-rank {
    font-size: clamp(0.6rem, 2.5vw, 0.8rem) !important;
    font-weight: 800 !important;
}

.size-tiny .corner-suit {
    font-size: clamp(0.5rem, 2vw, 0.7rem) !important;
}

/* For extremely small cards (less than 60px width), hide corner and make center huge */
@media (max-width: 360px) {
    .device-mobile .card-corner.top-left {
        display: none !important;
    }
    
    .device-mobile .center-suit {
        font-size: clamp(2rem, 12vw, 3rem) !important;
    }
    
    .device-mobile .card-center {
        top: 50% !important;
    }
    
    /* Override for face card PNGs on mobile - larger figures with card masking */
    .device-mobile .face-card-png,
    .device-mobile .card .face-card-png,
    .device-mobile .card-center .face-card-png {
        top: auto !important;
        bottom: -10px !important; /* Lower positioning */
        width: 110% !important; /* Larger figures */
        height: 90% !important;
        max-width: none !important; /* Remove constraints to allow overflow */
        max-height: none !important;
    }
    
    /* Additional mobile media query - allow larger figures with card masking */
    @media (max-width: 768px) {
        .face-card-png,
        .card .face-card-png,
        .card-center .face-card-png,
        .card .card-center .face-card-png {
            width: 120% !important; /* Larger figures */
            height: 100% !important;
            min-width: 40px !important;
            min-height: 50px !important;
            bottom: -15px !important; /* Lower positioning */
        }
        
        /* Even more specific - target all layers */
        .face-card-png.base-layer,
        .face-card-png.middle-layer,
        .face-card-png.color-layer {
            width: 120% !important; /* Larger figures */
            height: 100% !important;
            bottom: -15px !important; /* Lower positioning */
        }
        
        /* Card will mask the overflow, no need to clip card-center */
        .card-center:has(.face-card-png) {
            overflow: visible !important;
        }
    }
    
    /* Minimal border radius for very small screens */
    .card, .card-pile, .foundation, .stock, .waste, .tableau-pile {
        border-radius: 2px !important;
    }
    
    .card.face-down::before {
        border-radius: 1px !important;
    }
}

/* Orientation-specific adjustments */
.orientation-landscape.device-mobile .game-container {
    padding: 0.5rem;
}

.orientation-landscape.device-mobile .game-header {
    margin-bottom: 0.5rem;
}

.orientation-landscape.device-mobile .game-board {
    gap: 1rem;
}

.orientation-landscape.device-mobile .card:hover {
    transform: translateY(-1px);
}

/* Utility classes */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast support */
@media (prefers-contrast: high) {
    :root {
        --card-border: #000000;
        --text-color: #000000;
        --background-color: #ffffff;
    }
    
    .card {
        border-width: 2px;
    }
    
    .foundation {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
    
    .card:hover {
        transform: none;
    }
    
    .controls button:hover {
        transform: none;
    }
}

/* Hint System Styles */
.hint-highlight {
    /* Use box-shadow instead of outline to avoid affecting internal content */
    box-shadow: 
        0 0 0 2px var(--primary-color),  /* Solid border effect */
        0 0 8px rgba(59, 130, 246, 0.4) !important; /* Glow effect */
    border-radius: var(--border-radius) !important;
    z-index: 1000 !important;
    /* Removed position: relative !important to avoid conflicts */
}

/* Ensure tableau containers don't clip the box-shadow */
.tableau-pile {
    overflow: visible !important;
}

/* Hint wiggle animation - clean horizontal movement only */
@keyframes hint-wiggle {
    0% { transform: translateX(0px) translateY(0px); }
    50% { transform: translateX(-6px) translateY(0px); }
    100% { transform: translateX(0px) translateY(0px); }
}

/* Removed hint-wiggle-tableau - all cards now use the same animation */

/* Respect reduced motion preference for hint animation */
@media (prefers-reduced-motion: reduce) {
    .hint-highlight {
        animation: none !important;
    }
    
    @keyframes hint-wiggle {
        0%, 100% { transform: translateX(0px); }
    }
}

/* Victory Celebration Modal */
.victory-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.victory-modal.show {
    opacity: 1;
}

.victory-content {
    background: var(--victory-modal-background);
    /* background-image: url('Sprites/color/cottom_pattern.png'); */
    background-repeat: repeat;
    background-size: auto;
    border: 4px solid var(--victory-modal-border);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(251, 191, 36, 0.3);
    padding: 40px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.victory-modal.show .victory-content {
    transform: scale(1);
}

.victory-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--victory-text-color);
    font-weight: 400;
    letter-spacing: 1px;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Removed victoryBounce animation - cleaner design without icons */

.victory-header p {
    font-size: 1.2rem;
    color: var(--victory-text-color);
    margin-bottom: 30px;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.victory-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #fbbf24;
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--victory-text-color);
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.stat-value {
    font-size: 1.8rem;
    color: var(--victory-stat-color);
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.victory-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.victory-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 140px;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.5px;
    text-transform: none;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.victory-btn.primary {
    background: linear-gradient(135deg, var(--modal-button-primary) 0%, var(--modal-button-secondary) 100%);
    color: var(--modal-button-text);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.victory-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.6);
    filter: brightness(1.1);
}

.victory-btn.secondary {
    background: transparent;
    color: var(--modal-button-secondary-text);
    border: 2px solid var(--modal-button-secondary);
}

.victory-btn.secondary:hover {
    background: rgba(251, 191, 36, 0.2);
    transform: translateY(-2px);
    color: var(--victory-text-color);
}

.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 20px;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ff6b6b;
    animation: confettiFall linear;
    animation-fill-mode: forwards;
    border-radius: 2px;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(600px) rotate(720deg);
        opacity: 0;
    }
}

/* Falling cards animation (Windows XP style) */
.falling-card {
    position: fixed;
    width: var(--card-width, 120px);
    height: var(--card-height, 180px);
    z-index: 9999;
    pointer-events: none;
    border-radius: var(--dynamic-border-radius, 8px);
    box-shadow: var(--shadow-md);
    transition: none;
}

@keyframes cardFallBounce {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(200vh);
        opacity: 0.8;
    }
}

@keyframes cardBounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0,-4px,0);
    }
}

/* Mobile responsive adjustments for victory modal */
@media (max-width: 600px) {
    .victory-content {
        padding: 30px 20px;
        margin: 20px;
        max-width: none;
        width: calc(100% - 40px);
    }
    
    .victory-header h2 {
        font-size: 1.8rem;
    }
    
    .victory-stats {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: center;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .victory-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .victory-btn {
        width: 100%;
        max-width: 200px;
    }
}

/* New Game Modal Styles */
.new-game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.new-game-modal.show {
    opacity: 1;
}

.modal-content {
    background: var(--new-game-modal-background);
    border: 4px solid var(--new-game-modal-border);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(251, 191, 36, 0.3);
    width: 400px;
    max-width: 90vw; /* Prevent modal from going off-screen on wide resolutions */
    transform: scale(0.9);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.new-game-modal.show .modal-content {
    transform: scale(1);
}

.modal-header {
    padding: 1.5rem 2rem 0.5rem 2rem;
    text-align: center;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--new-game-modal-border);
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(251, 191, 36, 0.2);
    color: var(--new-game-text-color);
    transform: rotate(90deg);
}

.modal-header h3 {
    color: var(--new-game-text-color);
    font-size: 2.5rem;
    font-weight: 400;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.modal-body {
    padding: 1rem 2rem;
    flex: 1;
}

.setting-group {
    margin-bottom: 1.5rem;
}

.setting-group:last-child {
    margin-bottom: 0;
}

.setting-label {
    display: block;
    color: var(--new-game-text-color);
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    text-align: left;
}

.toggle-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
}

.toggle-option {
    flex: 1;
    padding: 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--new-game-modal-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--toggle-inactive-color);
    min-height: 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    outline: none; /* Remove default focus outline */
}

.toggle-option:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--new-game-modal-border);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(244, 208, 63, 0.3);
}

.toggle-option:focus {
    background: var(--modal-button-primary);
    border-color: var(--modal-button-border);
    color: var(--modal-button-text);
    transform: translateY(0);
    box-shadow:
        0 2px 0 var(--modal-button-border),
        0 4px 6px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(244, 208, 63, 0.3); /* Focus ring */
}

.toggle-option.active {
    background: var(--modal-button-primary);
    border-color: var(--modal-button-border);
    color: var(--modal-button-text);
    box-shadow:
        0 3px 0 var(--modal-button-border),
        0 6px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

.toggle-option.active:hover {
    background: var(--modal-button-primary);
    border-color: var(--modal-button-border);
    filter: brightness(1.1);
    box-shadow:
        0 3px 0 var(--modal-button-border),
        0 8px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.toggle-text {
    color: var(--button-text-color);
    font-weight: 500;
    font-size: 0.9rem;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.toggle-option:focus .toggle-text,
.toggle-option.active .toggle-text {
    color: var(--button-text-color);
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.draw-icon,
.shuffle-icon {
    width: 48px;
    height: 48px;
    display: block;
    margin: 0;
    flex-shrink: 0;
    transition: all 0.3s ease;
    /* Use standard color inheritance like other buttons */
    color: var(--toggle-inactive-color, var(--modal-text-color, var(--button-text-color)));
}

.toggle-option:focus .draw-icon,
.toggle-option:focus .shuffle-icon,
.toggle-option.active .draw-icon,
.toggle-option.active .shuffle-icon {
    /* Active state uses modal button text color */
    color: var(--modal-button-text, var(--button-text-color));
    transform: scale(1.1);
}

.modal-footer {
    padding: 1rem 2rem 1.5rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    border-radius: 0 0 20px 20px;
}

.modal-btn {
    padding: 1rem 2rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.2rem;
    font-family: 'Rubik-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    letter-spacing: 0.5px;
    text-transform: none;
    position: relative;
    overflow: hidden;
}

.modal-btn.primary {
    background: var(--modal-button-primary);
    border: 2px solid var(--modal-button-border);
    color: var(--modal-button-text);
    box-shadow:
        0 3px 0 var(--modal-button-border),
        0 6px 8px rgba(0, 0, 0, 0.2);
}

.modal-btn.primary:hover {
    background: var(--modal-button-primary);
    border-color: var(--modal-button-border);
    color: var(--modal-button-text);
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow:
        0 3px 0 var(--modal-button-border),
        0 8px 15px rgba(0, 0, 0, 0.3);
}

.modal-btn.secondary {
    background: transparent;
    border: 2px solid var(--modal-button-secondary);
    color: var(--modal-button-secondary-text);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal-btn.secondary:hover {
    background: var(--modal-button-secondary);
    border-color: var(--modal-button-secondary);
    color: var(--modal-button-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 208, 63, 0.3);
}

/* Wide screen adjustments - prevent modal from being too small */
@media (min-width: 1400px) {
    .modal-content {
        width: 450px; /* Slightly larger on wide screens */
        max-width: 30vw; /* But still limited to prevent going off-screen */
    }
}

/* Mobile Portrait adjustments */
@media (max-width: 767px) and (orientation: portrait) {
    /* Sidebar controls - already optimized for mobile */
         .sidebar-controls button {
         padding: 0.65rem 0.85rem;
         min-height: 40px;
         font-size: 0.8rem;
     }
     
     .sidebar-controls .new-game-icon,
     .sidebar-controls .undo-icon,
     .sidebar-controls .hint-icon,
     .sidebar-controls .audio-icon {
         width: 20px;
         height: 20px;
         margin-right: 10px;
     }
    
    /* Modal adjustments */
    .modal-content {
        width: 95%;
        margin: 1rem;
    }
    
    .modal-header {
        padding: 1.25rem 1.25rem 0.75rem 1.25rem;
    }
    
    .modal-header h3 {
        font-size: 1.8rem;
    }
    
    .modal-body {
        padding: 1.25rem;
    }
    
    .setting-group {
        margin-bottom: 1.5rem;
    }
    
    .toggle-container {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .toggle-option {
        padding: 1rem;
        min-height: 70px;
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }
    
    .draw-icon,
    .shuffle-icon {
        width: 24px;
        height: 24px;
    }
    
    .modal-footer {
        padding: 0.75rem 1.25rem 1.25rem 1.25rem;
        flex-direction: column;
    }
    
    .modal-btn {
        width: 100%;
        padding: 0.875rem 1rem;
    }
}

/* Mobile Landscape adjustments - Compact horizontal layout */
@media (max-width: 767px) and (orientation: landscape) {
    .modal-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 85vh; /* Limit height to fit screen */
        margin: 0.5rem;
    }
    
    .modal-header {
        padding: 0.75rem 1rem 0.5rem 1rem;
    }
    
    .modal-header h3 {
        font-size: 1.4rem;
        margin: 0;
    }
    
    .modal-body {
        padding: 0.75rem 1rem;
        display: flex;
        flex-direction: row; /* Horizontal layout for landscape */
        gap: 1.5rem;
        align-items: flex-start;
    }
    
    .setting-group {
        flex: 1;
        margin-bottom: 0;
    }
    
    .setting-label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .toggle-container {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .toggle-option {
        padding: 0.75rem;
        min-height: 60px;
        flex-direction: row;
        text-align: left;
        gap: 10px;
    }
    
    .toggle-text {
        font-size: 0.8rem;
    }
    
    .draw-icon,
    .shuffle-icon {
        width: 20px;
        height: 20px;
    }
    
    .modal-footer {
        padding: 0.5rem 1rem 0.75rem 1rem;
    }
    
    .modal-btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* Tablet Landscape adjustments - Compact horizontal layout like mobile landscape */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .modal-content {
        width: 90vw;
        max-width: 90vw;
        max-height: 80vh; /* Limit height to fit screen */
        margin: 1rem;
    }
    
    .modal-header {
        padding: 1rem 1.5rem 0.75rem 1.5rem;
    }
    
    .modal-header h3 {
        font-size: 1.8rem;
        margin: 0;
    }
    
    .modal-body {
        padding: 1rem 1.5rem;
        display: flex;
        flex-direction: row; /* Horizontal layout for landscape */
        gap: 2rem;
        align-items: flex-start;
    }
    
    .setting-group {
        flex: 1;
        margin-bottom: 0;
    }
    
    .setting-label {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .toggle-container {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .toggle-option {
        padding: 1rem;
        min-height: 80px;
        flex-direction: row;
        text-align: left;
        gap: 15px;
    }
    
    .toggle-text {
        font-size: 0.9rem;
    }
    
    .draw-icon,
    .shuffle-icon {
        width: 32px;
        height: 32px;
    }
    
    .modal-footer {
        padding: 0.75rem 1.5rem 1rem 1.5rem;
    }
    
    .modal-btn {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}