:root {
    /* Felt / brand greens */
    --color-felt: #2c7a2c;
    --color-felt-dark: #1a5c1a;
    --color-felt-light: #e8f5e9;
    --color-accent: #2E7D32;
    --color-accent-hover: #256427;
    --color-accent-deep: #1B5E20;

    /* Card colors */
    --color-card-red: #C62828;
    --color-card-black: #1a1a1a;

    /* Hint / highlight */
    --color-hint: #FFD700;
    --color-hint-alt: #FFA500;

    /* Surfaces & text */
    --color-surface: #ffffff;
    --color-on-felt: rgba(255, 255, 255, 0.92);
    --color-on-felt-muted: rgba(255, 255, 255, 0.6);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 999px;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: var(--color-felt);
    background-image:
        radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.24) 100%),
        url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.3%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27200%27 height=%27200%27 filter=%27url%28%23n%29%27 opacity=%270.12%27/%3E%3C/svg%3E");
    background-attachment: fixed;
    min-height: 100vh;
}

#game {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
}

#game-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    position: relative;
}

/* Only the game links scroll horizontally; the logo (left) and auth control
   (right) stay pinned and always tappable, even at narrow widths. Keeping the
   nav itself non-scrolling also lets the auth dropdown overflow it vertically. */
#game-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#game-nav-links::-webkit-scrollbar {
    display: none;
}

/* Hamburger toggle — hidden until NavMenu.js (measuring the links' natural,
   unshrunk width via an off-screen ruler clone) decides they no longer fit
   inline and adds .nav-collapsed to #game-nav. */
#nav-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

#nav-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
}

#game-nav.nav-collapsed #nav-menu-toggle {
    display: flex;
    /* #game-nav-links is what normally fills the row (flex: 1 1 auto) and
       pushes trailing siblings to the edge; it's display:none while
       collapsed, so pull the toggle to the far right explicitly instead. */
    margin-left: auto;
}

#game-nav.nav-collapsed #game-nav-links {
    display: none;
}

#game-nav.nav-collapsed.nav-menu-open #game-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 6px;
    gap: 2px;
    background: var(--color-felt-dark);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    z-index: 1150;
    max-height: 70vh;
    overflow-y: auto;
}

#game-nav.nav-collapsed.nav-menu-open #game-nav-links a {
    padding: 10px 14px;
}

/* The auth control (NavMenu.js reparents it here while collapsed) sits below
   the game links as its own row instead of the header's right-pinned pill. */
#game-nav.nav-collapsed #game-nav-links .auth-control {
    justify-content: flex-end;
    min-width: 0;
    width: auto;
    margin: 4px 0 0;
    padding: 10px 14px 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#game-nav a {
    padding: 3px 14px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s;
    flex-shrink: 0;
    line-height: 1.8;
}

#game-nav a:hover {
    color: rgba(255, 255, 255, 0.85);
}

#game-nav a.active {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-felt-dark);
}

#game-nav .site-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 3px 10px 3px 0;
    margin-right: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    font-size: unset;
    font-weight: unset;
    letter-spacing: unset;
    line-height: unset;
}

#game-nav .site-logo:hover {
    opacity: 0.85;
    color: white;
}

#game-nav .site-logo-icon {
    height: 16px;
    width: auto;
    flex-shrink: 0;
}

#game-nav .site-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    font-family: 'Montserrat', sans-serif;
}

#game-nav .site-logo-line1 {
    font-size: 0.4rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.65);
}

#game-nav .site-logo-line2 {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: white;
}

/* --- Auth control (T013) ------------------------------------------------ */
.auth-control {
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Reserve width so the Sign-in button <-> avatar swap never reflows the
       nav links (or shifts on the /api/me resolution). Covers both states. */
    min-width: 84px;
    margin-left: 6px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.auth-signin {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
    box-shadow: none;
    white-space: nowrap;
}

.auth-signin:hover {
    background: rgba(255, 255, 255, 0.24);
    color: white;
}

.auth-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    padding: 2px 6px 2px 2px;
    box-shadow: none;
    cursor: pointer;
}

.auth-chip:hover {
    background: rgba(255, 255, 255, 0.2);
}

.auth-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.auth-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.auth-caret {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.6rem;
    line-height: 1;
}

.auth-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--color-surface);
    color: var(--color-felt-dark);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    padding: 6px;
    z-index: 1200;
}

.auth-menu[hidden] {
    display: none;
}

.auth-menu-ident {
    padding: 6px 10px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 6px;
}

.auth-menu-name {
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-menu-email {
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-felt-dark);
    cursor: pointer;
}

.auth-menu-item:hover {
    background: var(--color-felt-light);
}

/* Nav chrome stays compact on mobile: keep the auth targets tappable but don't
   let the global 44px min-height inflate the nav row. */
@media (max-width: 768px) {
    .auth-signin,
    .auth-chip {
        min-height: 34px;
    }
}

#game-info {
    display: flex;
    gap: 2rem;
}

#moves, #timer {
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--color-felt-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* Daily-deal badge in the header; shown by JS only while playing that deal. */
.daily-indicator {
    padding: 0.5rem 1rem;
    background-color: var(--color-accent);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    white-space: nowrap;
}

.daily-indicator[hidden] {
    display: none;
}

.pause-btn {
    background: none;
    border: none;
    color: var(--color-felt-dark);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-pill);
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.pause-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.pause-btn:active {
    background-color: rgba(255, 255, 255, 0.3);
}

#header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#util-btns {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

#controls {
    display: flex;
    gap: 0.5rem;
}

#controls button:first-child {
    background-color: var(--color-accent);
    color: white;
    font-weight: 600;
    border: 1px solid transparent;
}

#controls button:first-child:hover {
    background-color: var(--color-accent-hover);
}

.fullscreen-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
    font-size: 1.2rem;
    padding: 0.3rem;
    min-width: 34px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: white;
    opacity: 1;
}

.util-icon-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
    font-size: 1.1rem;
    padding: 0.3rem;
    min-width: 34px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}

.util-icon-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: white;
    opacity: 1;
}

.util-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.util-icon-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.12);
    opacity: 0.35;
}

/* Hidden for the time being — remove this rule to bring the button back. */
#daily-deal[hidden] {
    display: none;
}

/* Game of the day button lights up while its deal is the active one. */
#daily-deal.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    opacity: 1;
}

#daily-deal.active:hover {
    background: var(--color-accent-hover);
}

.fullscreen-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: rgba(15, 15, 15, 0.92);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1000;
}

.fullscreen-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 10px;
    border-width: 0 5px 6px;
    border-style: solid;
    border-color: transparent transparent rgba(15, 15, 15, 0.92);
}

.fullscreen-tooltip.visible {
    opacity: 1;
}

#game-board {
    width: 100%;
    max-width: calc(7 * var(--card-width, 100px) + 6 * 12px + 2rem); /* overridden by JS per-game */
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

button {
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-felt-dark);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

button:hover {
    background-color: var(--color-felt-light);
}

button:active {
    transform: scale(0.97);
}

.blank {
    background-color: #ffffff;
    width: var(--card-width, 100px);
    height: calc(var(--card-width, 100px) * 1.4);
    position: relative;
    perspective: 1000px;
    cursor: default;
}

.pile {
    width: var(--card-width, 100px);
    height: calc(var(--card-width, 100px) * 1.4);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    position: relative;
    min-height: calc(var(--card-width, 100px) * 1.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pile:hover:not(#tableau .pile) {
    border-color: rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Foundation suit placeholders */
.foundation-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--card-width, 100px) * 0.38);
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    user-select: none;
}

.pile.foundation:has(.card) .foundation-placeholder {
    display: none;
}

/* Waste pile empty indicator */
#waste:not(:has(.card))::after {
    content: "←";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--card-width, 100px) * 0.35);
    color: rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

/* Hover effect for face-up cards in tableau — mouse only, not touch */
@media (hover: hover) and (pointer: fine) {
    #tableau .pile .card.flipped:hover {
        transform: translateY(-8px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        z-index: 10;
    }

    /* Apply hover effect to all cards stacked above the hovered card */
    #tableau .pile .card.flipped:hover ~ .card {
        transform: translateY(-8px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        z-index: 10;
    }
}

.pile-group {
    display: flex;
    gap: 12px; /* Fixed gap that works well within constrained game area */
    margin-bottom: 20px;
}

#top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Cancel pile-group's margin-bottom inside top-row; #game-board's gap handles spacing */
#top-row .pile-group {
    margin-bottom: 0;
}

#stock-waste {
    display: flex;
    gap: 12px; /* Fixed gap that works well within constrained game area */
}

#foundation {
    justify-content: flex-end;
}

/* Spider: 8 foundation slots in a single row */
.spider-foundation-group {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 4px;
    align-self: flex-start;
    margin-bottom: 0;
}

.spider-foundation {
    position: relative !important;
    flex: none;
    width: var(--spider-slot, 90px) !important;
    height: calc(var(--spider-slot, 90px) * 1.4) !important;
    min-height: calc(var(--spider-slot, 90px) * 1.4) !important;
    overflow: hidden;
}

.spider-foundation .foundation-placeholder {
    font-size: calc(var(--spider-slot, 90px) * 0.38);
}

/* Stock deals-left counter */
#stock-deals-left {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
}

#tableau {
    flex: 1;
    width: 100%;
}

#tableau .pile {
    flex: 1;
    min-width: 0;
    min-height: calc(var(--card-width, 100px) * 1.6);
    overflow: visible;
    border: none;
}

#tableau .pile .card {
    position: absolute;
    left: 0;
}

#tableau .pile .card:not(:first-child) {
    margin-top: 0;
}

/* Hint system styles */
.hint-source {
    box-shadow: 0 0 15px var(--color-hint), 0 0 25px var(--color-hint) !important;
    border: 2px solid var(--color-hint) !important;
    animation: pulse-hint 1.5s ease-in-out infinite;
}

.hint-target {
    background-color: rgba(255, 215, 0, 0.3) !important;
    border-color: var(--color-hint) !important;
    border-width: 3px !important;
    animation: pulse-target 1.5s ease-in-out infinite;
}

@keyframes pulse-hint {
    0%, 100% { 
        box-shadow: 0 0 15px var(--color-hint), 0 0 25px var(--color-hint);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 20px var(--color-hint), 0 0 35px var(--color-hint), 0 0 45px var(--color-hint);
        transform: scale(1.05);
    }
}

@keyframes pulse-target {
    0%, 100% { 
        background-color: rgba(255, 215, 0, 0.3);
        border-color: var(--color-hint);
    }
    50% { 
        background-color: rgba(255, 215, 0, 0.6);
        border-color: var(--color-hint-alt);
    }
}

/* Touch feedback animation */
@keyframes touch-ripple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    /* Better button sizing for touch */
    button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.6rem 1rem;
        font-size: 1rem;
        border-radius: 8px;
    }
    
    /* Compact single-row header on mobile */
    #game-header {
        padding: 0.4rem 0.6rem;
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: center;
    }

    /* Score and timer in a single row on the left */
    #game-info {
        flex: 0 0 auto;
        min-width: auto;
        flex-direction: row;
        gap: 0.25rem;
    }

    #moves, #timer, .daily-indicator {
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .pause-btn {
        font-size: 0.8rem;
        min-width: 22px;
        min-height: 22px;
    }

    /* Actions container takes the remaining space on the right */
    #header-actions {
        flex: 1;
        gap: 0.25rem;
    }

    /* 2×2 button grid fills the actions container */
    #controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
        flex: 1;
    }

    /* Fullscreen icon stacks to the right of the grid */
    #util-btns {
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        padding-left: 0.25rem;
        align-self: stretch;
        flex-direction: column;
        justify-content: center;
    }

    .fullscreen-btn,
    .util-icon-btn {
        font-size: 0.9rem;
        min-width: 28px;
        min-height: 28px;
        padding: 0.2rem;
    }

    #controls button {
        font-size: 0.8rem;
        padding: 0.3rem 0.4rem;
        min-height: 32px;
        min-width: 0;
    }
    
    /* Better pile spacing */
    .pile {
        min-height: calc(var(--card-width, 100px) * 1.4);
        border-width: 1px;
    }
    
    /* Improved tableau for mobile */
    #tableau .pile {
        min-height: calc(var(--card-width, 100px) * 1.6);
    }
    
    .pile-group {
        gap: 0.4vw; /* Smaller gaps for mobile */
    }
    
    /* Better foundation pile visibility */
    #foundation .pile {
        border-width: 2px;
        border-style: solid;
    }
    
    /* Touch-friendly waste pile */
    #waste {
        border-width: 2px;
    }
    
    /* Prevent text selection on mobile */
    #game {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Improve accessibility for mobile */
    button:focus,
    .card:focus {
        outline: 2px solid #4CAF50;
        outline-offset: 2px;
    }
    
    /* Better visual feedback for active states */
    button:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .card:active {
        transform: scale(1.02);
        transition: transform 0.1s ease;
    }
}

/* Card Animation Styles */
.card {
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced flip animation */
.card.flipping {
    animation: enhanced-flip 150ms ease-in-out;
}

@keyframes enhanced-flip {
    0% {
        transform: rotateY(0deg) scale(1);
    }
    50% {
        transform: rotateY(90deg) scale(1.05);
    }
    100% {
        transform: rotateY(180deg) scale(1);
    }
}

/* Card reveal animation (for stock pile) */
.card.revealing {
    animation: card-reveal 100ms ease-out;
}

@keyframes card-reveal {
    0% {
        transform: scale(0.9) rotateY(-10deg);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05) rotateY(5deg);
        opacity: 0.9;
    }
    100% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}

/* Smooth movement for drag and drop. Duration scales with the animation-speed
   setting via --anim-scale (0 = instant); AnimationManager keeps it in sync. */
.card.moving {
    transition: transform calc(150ms * var(--anim-scale, 1)) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
}

/* Auto-move animation (faster) */
.card.auto-moving {
    transition: transform calc(100ms * var(--anim-scale, 1)) ease-out;
    z-index: 1000;
}

/* Foundation landing — brief scale-pop and glow when a card lands on a
   foundation pile. --landing-duration is set inline by AnimationManager
   (shorter for autocomplete's rapid-fire placements). */
.card.foundation-landing {
    animation: foundation-land var(--landing-duration, 300ms) ease-out;
}

@keyframes foundation-land {
    0% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
    45% {
        transform: scale(1.1);
        box-shadow: 0 0 16px 6px rgba(255, 215, 0, 0.55);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .card,
    .card.flipping,
    .card.revealing,
    .card.moving,
    .card.auto-moving,
    .card.foundation-landing {
        transition: none !important;
        animation: none !important;
    }
}

/* Additional mobile adjustments */
@media (max-width: 768px) {
    #game-board {
        padding: 0.25rem; /* Even less padding */
        gap: 8px;
    }

    .pile-group {
        gap: 0.3vw; /* Tighter gaps */
    }

    #stock-waste {
        gap: 0.3vw;
    }

    #top-row {
        flex-direction: row-reverse;
        gap: 6px; /* Smaller gap */
        margin-bottom: 0;
    }

    /* Klondike: reverse stock/waste so waste appears to the left of stock */
    #stock-waste:not(:has(#stock-deals-left)) {
        flex-direction: row-reverse;
    }

    /* Spider: take the deals-left label out of horizontal flow to prevent top-row overflow.
       8 foundation slots + stock alone already fills the viewport width on narrow phones. */
    #stock-waste:has(#stock-deals-left) {
        position: relative;
        flex-direction: row;
    }

    #stock-deals-left {
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        text-align: center;
        margin-top: 0;
        font-size: 0.6rem;
        pointer-events: none;
    }
}

/* Landscape mobile — sidebar layout */
@media (orientation: landscape) and (max-height: 500px) {
    body {
        overflow: hidden;
    }

    #game {
        flex-direction: row;
        height: 100vh;
        min-height: unset;
        overflow: hidden;
    }

    #game-nav {
        display: none;
    }

    /* Sidebar */
    #game-header {
        width: 80px;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0.4rem 0.3rem;
        gap: 0.35rem;
        box-sizing: border-box;
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        overflow-y: auto;
    }

    #game-info {
        flex-direction: column;
        gap: 0.25rem;
        flex: 0 0 auto;
    }

    #moves, #timer {
        padding: 0.2rem 0.3rem;
        font-size: 0.65rem;
        justify-content: flex-start;
        gap: 0.2rem;
        overflow: hidden;
    }

    .pause-btn {
        display: none;
    }

    #header-actions {
        flex-direction: column;
        flex: 1;
        gap: 0.25rem;
    }

    #controls {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        flex: 1;
    }

    #controls button {
        font-size: 0.65rem;
        padding: 0.2rem 0.2rem;
        min-height: 0;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #util-btns {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 0.25rem;
        flex: 0 0 auto;
    }

    .fullscreen-btn,
    .util-icon-btn {
        background: white;
        color: black;
        font-size: 1rem;
        min-height: 28px;
        min-width: 0;
        width: 100%;
        padding: 0.2rem;
        opacity: 0.7;
    }

    .fullscreen-btn:hover,
    .util-icon-btn:hover {
        background: #eeeeee;
        color: black;
        opacity: 1;
    }

    :fullscreen .fullscreen-btn,
    :-webkit-full-screen .fullscreen-btn {
        opacity: 0.5;
    }

    .fullscreen-tooltip {
        display: none;
    }

    /* Game board fills remaining space */
    #game-board {
        flex: 1;
        min-width: 0;
        max-width: none !important;
        padding: 0.25rem 0.25rem;
        gap: 4px;
    }

    #top-row {
        margin-bottom: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
    }

    .pile-group {
        gap: 0.4vw;
    }

    #stock-waste {
        gap: 0.3vw;
        flex-direction: row;
    }

    #stock-waste:has(#stock-deals-left) {
        position: relative;
    }

    #stock-deals-left {
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        text-align: center;
        margin-top: 0;
        font-size: 0.6rem;
        pointer-events: none;
    }
}

/* SEO Content Section */
#game-info-section {
    max-width: 800px;
    margin: 60px auto 40px;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    color: #333;
    line-height: 1.7;
}

#game-info-section h1 {
    font-size: 2rem;
    color: var(--color-felt-dark);
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--color-felt);
    padding-bottom: 0.5rem;
}

#game-info-section h2 {
    font-size: 1.5rem;
    color: var(--color-felt-dark);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#game-info-section h3 {
    font-size: 1.2rem;
    color: var(--color-felt);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

#game-info-section p {
    margin-bottom: 1rem;
    text-align: justify;
}

#game-info-section ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

#game-info-section li {
    margin-bottom: 0.75rem;
}

#game-info-section strong {
    color: var(--color-felt-dark);
}

.content-section {
    margin-bottom: 2rem;
}

.content-section:last-child {
    margin-bottom: 0;
}

.quick-instructions-box {
    margin: 1rem 0;
    border-left: 3px solid var(--color-felt);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
}

.qi-header {
    background: rgba(44, 122, 44, 0.15);
    padding: 0.45rem 0.75rem !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--color-felt-dark) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(44, 122, 44, 0.2);
    margin-top: 0 !important;
}

.quick-instructions {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(44, 122, 44, 0.06);
}

.quick-instructions li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0;
    line-height: 1.5;
}

.quick-instructions li + li {
    border-top: 1px solid rgba(44, 122, 44, 0.15);
}

.qi-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    width: 1.6rem;
    text-align: center;
    color: var(--color-felt);
    font-style: normal;
}

.game-table-image {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 1.5rem auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile styles for content section */
@media (max-width: 768px) {
    #game-info-section {
        margin: 40px 16px 24px;
        padding: 24px;
        border-radius: 8px;
    }

    #game-info-section h1 {
        font-size: 1.5rem;
    }

    #game-info-section h2 {
        font-size: 1.25rem;
    }

    #game-info-section h3 {
        font-size: 1.1rem;
    }

    #game-info-section p {
        text-align: left;
    }
}

/* Site Footer */
#site-footer {
    background-color: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 1rem;
    margin-top: 2rem;
}

#footer-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

#footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.5rem;
}

#footer-nav a {
    color: rgba(255, 255, 255, 0.87);
    text-decoration: none;
    font-size: 0.82rem;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    transition: color 0.15s;
}

#footer-nav a:hover {
    color: white;
}

#footer-nav a:not(:last-child)::after {
    content: '·';
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
}

#footer-copyright {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin: 0;
}

.footer-social {
    display: flex;
    gap: 0.25rem 0.5rem;
    justify-content: center;
}

.footer-social a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.82rem;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    transition: color 0.15s;
}

.footer-social a:hover {
    color: white;
}

.footer-social a:not(:last-child)::after {
    content: '·';
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
}

/* ===== Penguin Solitaire layout ===== */

#penguin-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Cancel pile-group's margin-bottom inside penguin-top; gap handles spacing */
#penguin-top .pile-group {
    margin-bottom: 0;
}

#flipper {
    display: flex;
    justify-content: flex-start;
}

#flipper .pile {
    position: relative;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#flipper .pile::before {
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.2rem;
    font-weight: bold;
    pointer-events: none;
    position: absolute;
}

#flipper .pile:nth-child(1)::before { content: 'F'; }
#flipper .pile:nth-child(2)::before { content: 'L'; }
#flipper .pile:nth-child(3)::before { content: 'I'; }
#flipper .pile:nth-child(4)::before { content: 'P'; }
#flipper .pile:nth-child(5)::before { content: 'P'; }
#flipper .pile:nth-child(6)::before { content: 'E'; }
#flipper .pile:nth-child(7)::before { content: 'R'; }

#flipper .pile.occupied {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.5);
}

#flipper .pile.occupied::before {
    display: none;
}

#flipper .pile.hint-target {
    border-color: var(--color-hint);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Penguin foundation row shares the same flex layout as Klondike */
#penguin-foundation-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

#penguin-top #foundation {
    flex: 1;
    justify-content: center;
    gap: 12px;
}

#penguin-top #foundation .pile {
    box-sizing: border-box;
}

#beak-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.beak-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.beak-card-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
}

.beak-rank {
    font-size: calc(var(--card-width, 100px) * 0.22);
    font-weight: bold;
    line-height: 1;
    color: rgba(255, 255, 255, 0.5);
}

.beak-suit {
    font-size: calc(var(--card-width, 100px) * 0.28);
    font-weight: bold;
    line-height: 1;
    color: rgba(255, 255, 255, 0.5);
}

/* Penguin mobile: smaller rank/suit text to fit in narrow cascade strips.
   Scoped to Penguin via #penguin-top (absent in all other games). */
@media (max-width: 768px) {
    #penguin-top ~ #tableau .card-rank,
    #penguin-top .card-rank {
        font-size: calc(var(--card-width, 100px) * 0.28);
    }
    #penguin-top ~ #tableau .card-suit,
    #penguin-top .card-suit {
        width: calc(var(--card-width, 100px) * 0.20);
        height: calc(var(--card-width, 100px) * 0.20);
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    #penguin-top ~ #tableau .card-rank,
    #penguin-top .card-rank {
        font-size: calc(var(--card-width, 100px) * 0.28);
    }
    #penguin-top ~ #tableau .card-suit,
    #penguin-top .card-suit {
        width: calc(var(--card-width, 100px) * 0.20);
        height: calc(var(--card-width, 100px) * 0.20);
    }
}

/* ── FreeCell ──────────────────────────────────────────────────────────────── */

#freecell-top {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

#freecell-top .pile-group {
    margin-bottom: 0;
}

#freecells {
    display: flex;
    justify-content: flex-start;
}

#freecells .pile {
    position: relative;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#freecells .pile::before {
    color: rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
    font-weight: bold;
    pointer-events: none;
    position: absolute;
}

#freecells .pile:nth-child(1)::before { content: 'F'; }
#freecells .pile:nth-child(2)::before { content: 'R'; }
#freecells .pile:nth-child(3)::before { content: 'E'; }
#freecells .pile:nth-child(4)::before { content: 'E'; }

#freecells .pile.occupied {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.5);
}

#freecells .pile.occupied::before {
    display: none;
}

#freecells .pile.hint-target {
    border-color: var(--color-hint);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

#freecell-top #foundation {
    flex: 1;
    justify-content: flex-end;
}

/* ── Pyramid ───────────────────────────────────────────────────────────────── */

#pyramid-top {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}

#pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Rows overlap vertically (like a real dealt pyramid) instead of stacking at
   full card height each — 7 full-height rows would run well past the
   viewport otherwise. Each row after the first pulls up to reveal only
   its top ~30% over the row above; a row's DOM position (later = higher
   row index) already paints it on top with no z-index needed, which
   matches the game's own covering rule (a card's children sit visually
   above it, same as they cover it in the rules). The bottom (final) row
   is never covered by anything below it, so it always renders full-size. */
.pyramid-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pyramid-row:not(:first-child) {
    margin-top: calc(var(--card-width, 100px) * -1.05);
}

.pyramid-slot {
    width: var(--card-width, 100px);
    height: calc(var(--card-width, 100px) * 1.4);
    position: relative;
}

.pyramid-slot-empty {
    visibility: hidden;
}

.card.pyramid-covered {
    /* Dimmed but fully opaque — with rows now overlapping (T073), opacity
       would let the card(s) underneath bleed through the one on top. */
    filter: grayscale(45%) brightness(0.72);
    cursor: default;
}

.card.pyramid-exposed {
    cursor: pointer;
}

.card.pyramid-selected {
    box-shadow: 0 0 12px var(--color-hint-alt), 0 0 20px var(--color-hint-alt) !important;
    border: 2px solid var(--color-hint-alt) !important;
    transform: translateY(-6px);
}

#pyramid-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
}

#pyramid-discard:not(:has(.card))::after {
    content: "—";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--card-width, 100px) * 0.35);
    color: rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

@media (max-width: 768px) {
    #pyramid-top {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    #pyramid-side {
        flex-direction: row;
    }

    .pyramid-row {
        gap: 0.8vw;
    }
}

/* PWA install banner */
#install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    background: linear-gradient(135deg, var(--color-accent-deep), var(--color-accent));
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease-out;
}

#install-banner[hidden] { display: none; }

#install-banner span { flex: 1; }

#install-banner #install-btn {
    background: #fff;
    color: var(--color-accent-deep);
    border: none;
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

#install-banner #install-btn:hover { background: var(--color-felt-light); }

#install-banner #install-dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    flex-shrink: 0;
}

#install-banner #install-dismiss:hover { color: #fff; }

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

#install-banner.install-banner--hiding {
    animation: slideDown 0.3s ease-in forwards;
}

@media (min-width: 600px) {
    #install-banner {
        max-width: 480px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border-radius: 12px 12px 0 0;
    }
}
.card {
    width: var(--card-width, 100px);
    height: calc(var(--card-width, 100px) * 1.4);
    position: relative;
    perspective: 1000px;
    cursor: default;
}

.card.interactive {
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    border: 1px solid #ccccccb0;
}

.card-front {
    background: linear-gradient(160deg, #ffffff 0%, #f6f6f6 55%, #eeeeee 100%);
    transform: rotateY(180deg);
    padding: 5px;
    box-sizing: border-box;
}

.card-back {
    background-image: url(/1e1c1adec8b7ad4f0280.webp);
    background-image: -webkit-image-set(url(/1e1c1adec8b7ad4f0280.webp) type('image/webp'), url(/assets/images/card-back3.0181701ad4960bfc5240.png) type('image/png'));
    background-image: image-set(url(/1e1c1adec8b7ad4f0280.webp) type('image/webp'), url(/assets/images/card-back3.0181701ad4960bfc5240.png) type('image/png'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.card-corner {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.top-left {
    top: 5px;
    left: 5px;
}

.bottom-right {
    bottom: 5px;
    right: 5px;
    transform: rotate(180deg);
}

.card-rank {
    font-size: calc(var(--card-width, 100px) * 0.19);
    font-weight: 600;
}

/* Corner suit pip — a vector icon masked with the current text color,
   not a unicode glyph, so it renders identically across platforms/fonts */
.card-suit {
    display: inline-block;
    width: calc(var(--card-width, 100px) * 0.2);
    height: calc(var(--card-width, 100px) * 0.2);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.card[data-suit="hearts"] .card-suit,
.card[data-suit="diamonds"] .card-suit {
    color: #C62828;
}

.card[data-suit="hearts"] .card-rank,
.card[data-suit="diamonds"] .card-rank {
    color: #C62828;
}

.card[data-suit="clubs"] .card-suit,
.card[data-suit="spades"] .card-suit {
    color: #1a1a1a;
}

.card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
}

/* Large centered suit mark */
.card-suit-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--card-width, 100px) * 0.42);
    height: calc(var(--card-width, 100px) * 0.42);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.card[data-suit="hearts"] .card-suit-center,
.card[data-suit="diamonds"] .card-suit-center {
    color: #C62828;
}

.card[data-suit="clubs"] .card-suit-center,
.card[data-suit="spades"] .card-suit-center {
    color: #1a1a1a;
}

.card[data-suit="hearts"] .card-suit,
.card[data-suit="hearts"] .card-suit-center {
    -webkit-mask-image: url(/assets/images/heart.acd8dd7b5fef9dd14282.svg);
    mask-image: url(/assets/images/heart.acd8dd7b5fef9dd14282.svg);
}

.card[data-suit="diamonds"] .card-suit,
.card[data-suit="diamonds"] .card-suit-center {
    -webkit-mask-image: url(/assets/images/diamond.bbeaa821e1bb4a124b6a.svg);
    mask-image: url(/assets/images/diamond.bbeaa821e1bb4a124b6a.svg);
}

.card[data-suit="clubs"] .card-suit,
.card[data-suit="clubs"] .card-suit-center {
    -webkit-mask-image: url(/assets/images/club.0a2da8b404f6fc0feddb.svg);
    mask-image: url(/assets/images/club.0a2da8b404f6fc0feddb.svg);
}

.card[data-suit="spades"] .card-suit,
.card[data-suit="spades"] .card-suit-center {
    -webkit-mask-image: url(/assets/images/spade.3386bb1871d63810dae8.svg);
    mask-image: url(/assets/images/spade.3386bb1871d63810dae8.svg);
}

/* Mobile-specific card styling */
@media (max-width: 768px) {
    /* Keep top-left corner positioned as normal but adjust content */
    .card-corner.top-left {
        top: 4px;
        left: 4px;
    }

    /* Bottom-right corner is desktop-only — mobile cards are too small and
       the centered suit mark already carries the primary-identifier role */
    .card-corner.bottom-right {
        display: none;
    }

    /* On mobile the centered suit mark is the primary identifier (the corner
       pip is too small to read at a glance), so it's shown larger */
    .card-suit-center {
        top: 60%;
        width: calc(var(--card-width, 100px) * 0.8);
        height: calc(var(--card-width, 100px) * 0.8);
    }

    /* Style the rank on mobile - slightly larger */
    .card-rank {
        font-size: calc(var(--card-width, 100px) * 0.42);
        font-weight: bold;
    }

    /* Show the suit inline with rank on mobile */
    .card-suit {
        width: calc(var(--card-width, 100px) * 0.26);
        height: calc(var(--card-width, 100px) * 0.26);
    }
}

/* Landscape phones use the same compact card treatment as portrait mobile */
@media (orientation: landscape) and (max-height: 500px) {
    .card-corner.bottom-right {
        display: none;
    }
}
.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    box-sizing: border-box;
}

.settings-overlay[hidden] {
    display: none;
}

.settings-panel {
    background: var(--color-surface);
    border-radius: 16px;
    width: min(420px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-felt-dark);
}

.settings-close {
    background: none;
    border: none;
    box-shadow: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.35rem 0.6rem;
    color: var(--color-felt-dark);
    border-radius: var(--radius-pill);
}

.settings-close:hover {
    background: var(--color-felt-light);
}

.settings-body {
    padding: 0.5rem 1.5rem 1.5rem;
}

.settings-section + .settings-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.settings-section h3 {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-felt);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    font-size: 0.95rem;
    color: #333;
}

.settings-row + .settings-row {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.settings-row--disabled {
    opacity: 0.55;
}

.settings-row-label {
    font-weight: 600;
    display: flex;
    flex-direction: column;
}

.settings-row-value {
    font-size: 0.85rem;
    color: #666;
    text-align: right;
    display: flex;
    flex-direction: column;
}

.settings-soon,
.settings-hint {
    font-size: 0.7rem;
    font-weight: 500;
    color: #999;
    text-transform: none;
    letter-spacing: normal;
}

/* Dropdowns for card back / animation speed */
.settings-select {
    flex-shrink: 0;
    font-size: 0.9rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-pill, 8px);
    background: white;
    color: #333;
    cursor: pointer;
    max-width: 55%;
}

.settings-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-track {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color 0.15s;
}

.settings-toggle-track::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}

.settings-toggle input:checked + .settings-toggle-track {
    background: var(--color-felt, #35654d);
}

.settings-toggle input:checked + .settings-toggle-track::before {
    transform: translateX(16px);
}

.settings-toggle input:focus-visible + .settings-toggle-track {
    outline: 2px solid var(--color-felt, #35654d);
    outline-offset: 2px;
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-pill, 8px);
    padding: 2px;
}

.zoom-btn {
    background: none;
    border: none;
    box-shadow: none;
    min-width: 28px;
    min-height: 28px;
    color: #333;
    cursor: pointer;
    border-radius: var(--radius-pill, 8px);
}

.zoom-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.zoom-level {
    background: none;
    border: none;
    box-shadow: none;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 36px;
    padding: 0.2rem 0.1rem;
    color: #333;
    cursor: pointer;
    border-radius: var(--radius-pill, 8px);
}

.zoom-level:hover {
    background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 480px) {
    .settings-header {
        padding: 1rem 1.25rem;
    }

    .settings-body {
        padding: 0.5rem 1.25rem 1.25rem;
    }
}