/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --card-w: clamp(72px, 21vw, 100px);
    --card-h: calc(var(--card-w) * 1.4);
    --card-r: 7px;
    --card-peek: clamp(30px, 8.5vw, 40px);
    --gap: clamp(5px, 1.6vw, 10px);

    --felt-1: #1e6b34;
    --felt-2: #165a28;
    --felt-3: #0f3d1a;

    --card-bg: #fdfdfa;
    --card-border: #ccc8bc;

    --suit-hearts: #c0392b;
    --suit-spades: #1a1a1c;
    --suit-diamonds: #c0392b;
    --suit-clubs: #1a1a1c;

    --gold: #c9a84c;
    --gold-light: #dfc06a;

    --text: #ece6d0;
    --text-dim: rgba(236,230,208,0.55);
}

/* 4 renk modu */
body.four-color {
    --suit-diamonds: #1565c0;
    --suit-clubs: #2e7d32;
}

html, body { height: 100%; overflow: hidden; background: var(--felt-3); }

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--text);
    display: flex; justify-content: center;
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* === SCREEN READER ONLY === */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}