* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: 
        radial-gradient(ellipse at center, #2d5f3f 0%, #1a3d28 50%, #0f2419 100%);
    color: #ffffff;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0.05) 2px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0.05) 2px),
        radial-gradient(circle at 30% 40%, rgba(45, 95, 63, 0.8), transparent),
        radial-gradient(circle at 70% 60%, rgba(26, 61, 40, 0.8), transparent);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

#app {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh;
}

.screen {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.hidden {
    display: none !important;
}

.lobby-container {
    text-align: center;
    max-width: 500px;
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    padding: 60px 40px;
    border-radius: 30px;
    border: none;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 4px rgba(255, 215, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    color: #333;
}

.game-title {
    font-size: 72px;
    font-weight: 900;
    letter-spacing: 12px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ffd93d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.subtitle {
    font-size: 18px;
    margin-bottom: 10px;
    color: #666;
    letter-spacing: 2px;
    font-weight: 600;
}

.attribution {
    font-size: 10px;
    margin-bottom: 40px;
    color: #999;
    letter-spacing: 0.5px;
    font-weight: 400;
    font-style: italic;
}

.mode-selection {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mode-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.btn-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 30px;
    border-radius: 12px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    font-weight: 700;
    min-height: 140px;
}

.btn-mode:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.mode-text {
    font-size: 22px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.mode-desc {
    font-size: 13px;
    opacity: 0.7;
    font-weight: 400;
}

input[type="text"] {
    padding: 16px;
    font-size: 16px;
    background: white;
    border: 3px solid #e0e0e0;
    border-radius: 12px;
    color: #333;
    transition: all 0.3s;
}

input[type="text"]:focus {
    outline: none;
    border-color: #ff6b6b;
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.2);
}

input[type="text"]::placeholder {
    color: #999;
}

.btn-primary, .btn-secondary {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(79, 195, 247, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 195, 247, 0.5);
}

.btn-primary:disabled, .btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

#waitingArea {
    margin-top: 30px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 107, 107, 0.2);
    border-top: 4px solid #ff6b6b;
    border-right: 4px solid #ffd93d;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#playerList {
    margin: 20px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.player-item {
    padding: 10px;
    margin: 5px 0;
    border-radius: 10px;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    transition: all 0.3s;
}

.player-item.filled {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(67, 160, 71, 0.3) 100%);
    border: 2px solid rgba(76, 175, 80, 0.5);
}

.player-item.empty {
    background: rgba(0, 0, 0, 0.05);
    border: 2px dashed rgba(0, 0, 0, 0.2);
    opacity: 0.5;
    font-style: italic;
}

#game {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.game-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: #333;
    z-index: 100;
    height: 50px;
}

.game-info {
    display: flex;
    gap: 25px;
    align-items: center;
}

.info-item {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

.label {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.value {
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-content {
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
}

.table-container {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 180px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    overflow: hidden !important;
}

.table-middle {
    display: none;
}

.table-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 25px;
    padding: 0;
    align-items: center;
    justify-content: center;
    max-width: 95%;
    overflow: hidden;
}

.card-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-shrink: 0;
    min-width: 100px;
}

.played-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

.played-set {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-height: 150px;
    background: transparent;
    padding: 4px;
}

.played-set-header {
    font-size: 9px;
    margin-bottom: 4px;
    color: #ffd93d;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 8px;
    border-radius: 4px;
}

.played-set-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.drop-zone-existing.drop-active {
    outline: 2px dashed rgba(255, 215, 0, 0.7);
    border-radius: 8px;
}

.round-summary {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 16px 16px 0 0;
    padding: 20px;
    color: #fff;
    z-index: 500;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.6);
}

.round-summary.hidden {
    display: none;
}

.round-summary-header {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffd700;
}

.round-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.round-summary-row:first-of-type {
    border-top: none;
}

.round-summary-row.went-out {
    color: #4caf50;
    font-weight: 600;
}

.round-summary-player {
    min-width: 180px;
}

.round-summary-hand {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.round-summary-hand .card {
    width: 50px;
    height: 70px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.round-summary-points {
    min-width: 80px;
    text-align: right;
    font-weight: 700;
}

.round-summary-empty {
    font-size: 12px;
    opacity: 0.7;
    font-style: italic;
}

.round-summary-note {
    margin-top: 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-align: right;
}

.played-set-cards .card {
    margin-top: -65px;
}

.played-set-cards .card:first-child {
    margin-top: 0;
}

.played-set-cards .card.wild.played {
    margin-top: -50px;
}

.player-position {
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.player-position.top {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    text-align: center;
    min-width: 200px;
    z-index: 50;
}

.player-position.bottom {
    position: fixed;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    min-width: 200px;
    z-index: 50;
}

.player-position.left {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    text-align: center;
    min-width: 100px;
    z-index: 50;
}

.player-position.right {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    text-align: center;
    min-width: 100px;
    z-index: 50;
}

.player-info {
    color: white;
    font-weight: 600;
}

.player-info.active {
    color: #FFD700;
}

.player-info.current-turn {
    color: #4caf50;
}

.player-info .name {
    font-size: 13px;
    margin-bottom: 2px;
}

.player-info .stats {
    font-size: 10px;
    opacity: 0.75;
    line-height: 1.2;
}

.hand-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%);
    border-top: 2px solid rgba(139, 69, 19, 0.6);
    padding: 10px 20px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}

.hand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.hand-header h3 {
    font-size: 16px;
    color: #ffd700;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hand-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.hand-actions button {
    padding: 8px 16px;
    font-size: 12px;
}

.sort-buttons {
    display: flex;
    gap: 8px;
    margin-right: auto;
}

.btn-sort {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.btn-sort:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.6);
}

.btn-sort.active {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    border-color: #ff6b6b;
}

.play-area {
    display: none;
}

.hand-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 130px;
    padding: 20px 10px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-radius: 12px;
    border: 2px solid rgba(139, 69, 19, 0.4);
    position: relative;
    flex-wrap: wrap;
    overflow: hidden;
}

.card {
    width: 80px;
    height: 112px;
    background: transparent;
    border-radius: 6px;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    margin: 0;
    user-select: none;
    flex-shrink: 0;
}

.card img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    pointer-events: none;
    object-fit: contain;
}

.card:active {
    cursor: grabbing;
}

.card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    z-index: 5;
}

.card.selected {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 
        0 8px 20px rgba(255, 215, 0, 0.6),
        0 0 0 3px #ffd700;
    z-index: 10;
}

.card.wild.played,
.card.selected.wild.played {
    transform-origin: center center;
}

.card-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.9;
}

.card-corner.top {
    top: 4px;
    left: 4px;
}

.card-corner.bottom {
    bottom: 4px;
    right: 4px;
    transform: rotate(180deg);
}

.corner-rank {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Georgia', serif;
}

.corner-suit {
    font-size: 16px;
    line-height: 0.8;
}

.card-center {
    font-size: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px 8px;
    position: relative;
}

.card-face {
    font-size: 48px;
    font-weight: bold;
}

.card-pips {
    position: relative;
    width: 100%;
    height: 100%;
}

.pip {
    position: absolute;
    font-size: 18px;
    line-height: 1;
}

.pip.flip {
    transform: rotate(180deg);
}

.pip.top-left { top: 5%; left: 25%; }
.pip.top-center { top: 5%; left: 50%; transform: translateX(-50%); }
.pip.top-middle { top: 20%; left: 50%; transform: translateX(-50%); }
.pip.top-right { top: 5%; right: 25%; }

.pip.upper-middle { top: 28%; left: 50%; transform: translateX(-50%); }

.pip.middle-left { top: 50%; left: 25%; transform: translateY(-50%); }
.pip.middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pip.middle-right { top: 50%; right: 25%; transform: translateY(-50%); }

.pip.lower-middle-flip { bottom: 28%; left: 50%; transform: translateX(-50%) rotate(180deg); }

.pip.bottom-left-flip { bottom: 5%; left: 25%; transform: rotate(180deg); }
.pip.bottom-center-flip { bottom: 5%; left: 50%; transform: translateX(-50%) rotate(180deg); }
.pip.bottom-middle-flip { bottom: 20%; left: 50%; transform: translateX(-50%) rotate(180deg); }
.pip.bottom-right-flip { bottom: 5%; right: 25%; transform: rotate(180deg); }

.card.hearts .corner-rank,
.card.hearts .corner-suit,
.card.hearts .card-center {
    color: #d32f2f;
}

.card.diamonds .corner-rank,
.card.diamonds .corner-suit,
.card.diamonds .card-center {
    color: #d32f2f;
}

.card.clubs .corner-rank,
.card.clubs .corner-suit,
.card.clubs .card-center {
    color: #000;
}

.card.spades .corner-rank,
.card.spades .corner-suit,
.card.spades .card-center {
    color: #000;
}

.card-back {
    background: url('https://deckofcardsapi.com/static/img/back.png');
    background-size: cover;
    border: none;
}

.card-back img {
    display: none;
}

.passing-info {
    text-align: center;
    padding: 8px;
    background: rgba(255, 193, 7, 0.15);
    border-radius: 6px;
    margin-top: 8px;
    font-weight: 600;
    font-size: 11px;
    color: #FFD700;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

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

.modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border: none;
    border-radius: 25px;
    padding: 40px;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: #333;
}

.close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 32px;
    font-weight: 700;
    color: #ff6b6b;
    cursor: pointer;
    transition: all 0.3s;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 107, 107, 0.1);
}

.close:hover {
    transform: rotate(90deg) scale(1.1);
    background: rgba(255, 107, 107, 0.2);
}

.rules-content {
    margin-top: 20px;
}

.rules-content h2 {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ffd93d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    text-align: center;
    font-size: 32px;
    font-weight: 900;
}

.rules-content h3 {
    color: #ff6b6b;
    margin-top: 25px;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
}

.rules-content ul, .rules-content ol {
    margin-left: 20px;
    line-height: 1.8;
}

.rules-content li {
    margin-bottom: 8px;
}

.rules-content p {
    line-height: 1.8;
    margin-bottom: 10px;
}

@media (max-width: 1200px) {
    .table-middle {
        grid-template-columns: 1fr;
    }
    
    .player-position.left,
    .player-position.right {
        writing-mode: horizontal-tb;
    }
}

@media (max-width: 1024px) {
    .game-info {
        flex-direction: column;
        gap: 15px;
    }
}

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.go-down-dialog,
.add-to-set-dialog {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border-radius: 20px;
    padding: 30px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    color: #333;
}

.go-down-dialog h3,
.add-to-set-dialog h3 {
    color: #ff6b6b;
    margin-bottom: 15px;
}

.card-groups {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin: 20px 0;
}

.available-cards,
.groups-area {
    background: rgba(0, 0, 0, 0.05);
    padding: 15px;
    border-radius: 10px;
}

.cards-list,
.group-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 140px;
    padding: 10px;
    background: white;
    border-radius: 8px;
    border: 2px dashed #ccc;
}

.card-group {
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 8px;
}

.card-group h4 {
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

.dialog-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.sets-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.set-option {
    background: rgba(0, 0, 0, 0.05);
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.set-option:hover {
    background: rgba(255, 107, 107, 0.2);
    transform: scale(1.02);
}

.set-cards-preview {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .hand-cards {
        justify-content: center;
    }
    
    .card {
        width: 60px;
        height: 90px;
    }
    
    .card-rank {
        font-size: 18px;
    }
    
    .card-suit {
        font-size: 24px;
    }
    
    .card-groups {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================
   MOBILE PORTRAIT REBUILD  (overrides the desktop table layout)
   Layout goal: a BIG board / drop surface, with a slim opponents strip
   above it and a compact card fan + action bar pinned at the bottom.
   ====================================================================== */
html, body {
  overscroll-behavior: none;            /* no rubber-band bounce */
  touch-action: manipulation;           /* kill native double-tap zoom */
}

.game-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: auto; min-height: 40px;
  flex-wrap: wrap; gap: 2px 12px; padding: 5px 12px;
  padding-top: max(5px, env(safe-area-inset-top));
  align-items: center;
  background: rgba(4, 40, 28, 0.96);
}
/* fixed 2x2 grid so the header is always exactly 2 short rows (never 4) */
.game-info { display: grid; grid-template-columns: auto auto; gap: 1px 16px; align-content: center; }
.info-item { gap: 4px; align-items: baseline; }
.info-item .label { font-size: 8.5px; white-space: nowrap; }
.value { font-size: 12px; white-space: nowrap; }
#rulesBtn { padding: 5px 10px; font-size: 11px; }

.game-content { position: static; height: auto; overflow: visible; }

/* seats: strip ALL rotation + fixed positioning from the desktop layout */
.player-position.top, .player-position.left,
.player-position.right, .player-position.bottom {
  position: static !important; transform: none !important;
  top: auto !important; left: auto !important; right: auto !important;
  bottom: auto !important; min-width: 0 !important; z-index: auto !important;
}
#playerBottom { display: none !important; }   /* human info lives by the hand */

/* vertical stack: [slim opponents row] over [BIG board] */
.table-container {
  position: fixed; left: 0; right: 0;
  top: calc(env(safe-area-inset-top) + 66px);
  bottom: calc(env(safe-area-inset-bottom) + 150px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 46px minmax(0, 1fr);
  grid-template-areas: "o1 o2 o3" "board board board";
  gap: 5px; padding: 5px 6px; overflow: hidden;
}
#playerTop   { grid-area: o1; }
#playerLeft  { grid-area: o2; }
#playerRight { grid-area: o3; }
.player-position {
  padding: 3px 4px; text-align: center; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(0,0,0,0.28); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
.player-info .name  { font-size: 11px; margin-bottom: 0; line-height: 1.15; }
.player-info .stats { font-size: 9px; opacity: .85; }

/* board = pan/zoom viewport; fills the whole grid "board" area */
.table-center {
  grid-area: board; position: relative !important;
  top: auto !important; left: auto !important; transform: none !important;
  width: 100%; height: 100%; max-width: none; overflow: hidden;
  display: block; touch-action: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.05), rgba(0,0,0,0.14));
  border: 1px dashed rgba(255,215,0,.18); border-radius: 12px;
}
/* the ENTIRE board is a drop surface -> glow while a card hovers over it */
.table-center.drop-hot {
  border-color: rgba(255,215,0,.7);
  box-shadow: inset 0 0 0 3px rgba(255,215,0,.35);
  background: radial-gradient(ellipse at 50% 45%, rgba(255,215,0,0.14), rgba(0,0,0,0.14));
}
.drop-target.drop-hot {
  background: rgba(255,215,0,0.24) !important;
  box-shadow: inset 0 0 0 2px rgba(255,215,0,.65);
}
.board-zoom {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  display: flex; gap: 18px; padding: 16px; align-items: flex-start;
  will-change: transform;
}
.played-sets { flex-wrap: nowrap; gap: 18px; align-items: flex-start; }
.board-hint {
  position: absolute; bottom: 5px; left: 0; right: 0; z-index: 5; text-align: center;
  font-size: 10px; color: rgba(255,255,255,.35); pointer-events: none;
}
/* centered call-to-action shown on an empty board */
.board-empty-cta {
  position: absolute; inset: 0; z-index: 2; display: flex;
  align-items: center; justify-content: center; text-align: center;
  color: rgba(255,215,0,.45); font-size: 13px; line-height: 1.4;
  pointer-events: none; padding: 24px;
}

/* hand area: compact fan + action bar, pinned to the bottom */
.hand-area {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  height: calc(150px + env(safe-area-inset-bottom));
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(4, 40, 28, 0.97);
  border-top: 1px solid rgba(255,215,0,.18);
  box-shadow: 0 -4px 14px rgba(0,0,0,.4);
}
.hand-header { flex-direction: column; align-items: stretch; gap: 5px; margin-bottom: 0; }
.hand-header h3 { display: none; }        /* reclaim vertical space */
.hand-actions { justify-content: center; gap: 5px; flex-wrap: wrap; }
.hand-actions button, .btn-sort { padding: 7px 11px; font-size: 11px; }
.sort-buttons { margin-right: 0; gap: 5px; }
/* passing instruction: floating banner just above the hand, always visible */
.passing-info {
  position: fixed; left: 8px; right: 8px; z-index: 56; margin: 0;
  bottom: calc(156px + env(safe-area-inset-bottom));
  font-size: 11px; line-height: 1.3; padding: 7px 12px; text-align: center;
  background: linear-gradient(135deg, #ffd166, #e0a92a); color: #2a1e00;
  border-radius: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.passing-info p { margin: 0; }
.passing-info small { display: block; margin-top: 2px; font-size: 9.5px; opacity: .8; }
.passing-info.hidden { display: none !important; }
.play-area { display: none !important; }  /* legacy desktop play groups */

/* ---- hand as a horizontally SCROLLABLE strip (Balatro-style) ---- */
.hand-cards {
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;     /* swipe horizontally through the hand */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;                      /* browser scrolls horizontally; JS handles the vertical drag-to-play */
  scrollbar-width: none;                     /* hide scrollbar (Firefox) */
  justify-content: safe center;              /* center when they fit; scroll from the start when they overflow */
  gap: 0; padding: 26px 12px 6px; min-height: 96px;
}
.hand-cards::-webkit-scrollbar { display: none; }   /* hide scrollbar (WebKit) */
.hand-cards .card {
  width: 60px; height: 84px; flex-shrink: 0;
  margin-left: -22px;                        /* lighter overlap — more of each card shows, scroll for the rest */
  transition: transform .15s, margin .15s;
}
.hand-cards .card:first-child { margin-left: 0; }
.hand-cards .card:last-child  { margin-right: 4px; }
.hand-cards .card.selected {
  transform: translateY(-16px) scale(1.06); z-index: 20;
}
.hand-cards .card:active { z-index: 25; }
/* breathing room between neighbors when one is picked */
.hand-cards .card.selected + .card { margin-left: -18px; }


/* ======================================================================
   FIRST-GAME TUTORIAL  (friendly, low-bar onboarding)
   ====================================================================== */
.how-to-play {
  margin-top: 14px; width: 100%;
  padding: 12px; font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,0.10); color: #ffd700;
  border: 1.5px solid rgba(255,215,0,0.35); border-radius: 12px;
  cursor: pointer; transition: all .2s;
}
.how-to-play:active { background: rgba(255,215,0,0.2); }

.tutorial {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
}
.tutorial.hidden { display: none; }
.tut-card {
  width: 100%; max-width: 460px; max-height: 100%;
  background: linear-gradient(160deg, #0e5138 0%, #083826 100%);
  border: 1.5px solid rgba(255,215,0,0.35); border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  padding: 22px 20px 18px; display: flex; flex-direction: column;
  overflow-y: auto;
}
.tut-progress { display: flex; gap: 7px; justify-content: center; margin-bottom: 16px; }
.tut-progress .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.22); transition: all .2s;
}
.tut-progress .dot.on { background: #ffd166; width: 22px; border-radius: 4px; }

.tut-body { flex: 1; text-align: center; color: #eaf5ee; }
.tut-body .tut-emoji { font-size: 40px; line-height: 1; }
.tut-body h2 {
  font-size: 21px; margin: 10px 0 8px; color: #ffd700; letter-spacing: .3px;
}
.tut-body p { font-size: 14.5px; line-height: 1.5; margin: 0 auto 10px; max-width: 92%; color: #dbe9e0; }
.tut-body p .hl { color: #ffd166; font-weight: 700; }

/* mini card chips used to illustrate sets & runs */
.tut-cards { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.mini-card {
  width: 40px; height: 56px; border-radius: 7px; background: #fff; color: #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.15);
}
.mini-card.red { color: #d32f2f; }
.mini-card.wild {
  background: linear-gradient(135deg,#ffe28a,#f6b93b); color:#3a2a00;
  transform: rotate(90deg);
}
.tut-tag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:1px;
  padding:3px 10px; border-radius:20px; margin-bottom:2px; text-transform:uppercase; }
.tut-tag.set { background: rgba(102,187,255,.22); color:#8fd0ff; }
.tut-tag.run { background: rgba(140,255,170,.20); color:#8effb0; }

.tut-nav { display: flex; gap: 10px; margin-top: 16px; }
.tut-skip, .tut-next {
  flex: 1; padding: 13px; font-size: 15px; font-weight: 800; border-radius: 12px;
  cursor: pointer; border: none;
}
.tut-skip { flex: 0 0 90px; background: rgba(255,255,255,0.12); color: #cfe; }
.tut-next { background: linear-gradient(135deg,#ff6b6b,#ee5a6f); color: #fff; }
.tut-next:active, .tut-skip:active { filter: brightness(0.9); }


/* ======================================================================
   BOARD ZOOM CONTROLS + horizontal melds (mobile). Appended last so these
   win over the desktop vertical-stack meld layout.
   ====================================================================== */
.board-ctrls {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  display: flex; gap: 6px;
}
.board-ctrls button {
  min-width: 38px; height: 38px; padding: 0; border-radius: 10px;
  background: rgba(0,0,0,0.5); color: #ffd166;
  border: 1px solid rgba(255,215,0,0.4); font-size: 20px; font-weight: 800;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.board-ctrls button[data-z=fit] { min-width: auto; padding: 0 12px; font-size: 13px; letter-spacing: .5px; }
.board-ctrls button:active { background: rgba(255,215,0,0.28); }

/* melds as a horizontal row of cards (reads like a real run/set on a phone) */
.played-set-cards {
  flex-direction: row !important;
  align-items: center; justify-content: center;
  gap: 0; min-height: 92px;
}
.played-set-cards .card {
  margin-top: 0 !important;
  margin-left: -26px;              /* gentle overlap so a full run fits */
  width: 58px; height: 82px;
}
.played-set-cards .card:first-child { margin-left: 0 !important; }
/* a wild 2 laid sideways: rotate about its center and reserve the sideways
   width so it sits inline with the run instead of overlapping its neighbors */
.played-set-cards .card.wild.played {
  margin-top: 0 !important;
  transform: rotate(90deg) !important;
  transform-origin: center center;
  margin-left: 4px; margin-right: 26px;   /* 82w sideways ≈ 82; reserve the gap */
  z-index: 1;
}
.played-set-cards .card.wild.played + .card { margin-left: 0; }


/* ======================================================================
   MOBILE PLAYED-AREA REWORK (v2) — upright, wrapping, readable melds.
   Appended last to win the cascade over earlier rules.
   ====================================================================== */
.board-zoom {
  flex-direction: column !important; align-items: center; gap: 12px; padding: 14px;
}
#middleCard { flex: 0 0 auto; }
.played-sets {
  flex-direction: row !important; flex-wrap: wrap !important;
  justify-content: center; align-items: flex-start; align-content: flex-start;
  gap: 10px 12px; max-width: 360px; padding: 0;
}
.played-set {
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px; padding: 6px 8px 8px; min-width: 0; margin: 0;
}
.played-set.staged-set { border-color: rgba(255,215,0,0.55); background: rgba(255,215,0,0.10); }
.played-set.existing-set.mine { border-color: rgba(120,220,150,0.5); }
.played-set-header {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.72);
  text-transform: none; letter-spacing: 0; margin-bottom: 5px; text-align: center; white-space: nowrap;
}
.played-set-header .pill {
  display: inline-block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .4px;
  background: rgba(255,255,255,0.15); padding: 1px 6px; border-radius: 10px; margin-left: 3px; color: #fff;
}
.played-set-header.staged { color: #ffe08a; }
.played-set-header .hint { font-size: 8.5px; opacity: .6; font-weight: 500; margin-left: 4px; }
/* vertical solitaire-style overlapping stacks (this is the look that worked) */
.played-set-cards {
  flex-direction: column !important; align-items: center; justify-content: flex-start;
  gap: 0; transform: none !important; position: relative; min-height: 0;
}
.played-set-cards .card {
  margin-top: -54px !important; margin-left: 0 !important; width: 52px; height: 73px;
}
.played-set-cards .card:first-child { margin-top: 0 !important; }
.played-set-cards .card.wild.played {
  margin-top: -40px !important; transform: rotate(90deg) !important; transform-origin: center center;
  /* Off-center on purpose: a sideways wild sticks OUT to the side, the way you'd
     physically lay it in the run. But it must NOT float on top — z-index:auto so
     the next card overlaps it and it reads as sitting *between* its neighbors. */
  margin-left: 0 !important; margin-right: 22px !important; z-index: auto !important;
}
.new-set-box {
  min-width: 56px; min-height: 70px; display: flex; align-items: center; justify-content: center;
  text-align: center; border: 2px dashed rgba(255,215,0,0.45); border-radius: 10px;
  color: rgba(255,215,0,0.7); font-size: 11px; font-weight: 800; line-height: 1.15; padding: 6px;
}
/* zoom controls: a touch smaller / cleaner */
.board-ctrls button { min-width: 34px; height: 34px; font-size: 18px; }
.board-ctrls button[data-z=fit] { min-width: auto; padding: 0 10px; font-size: 12px; }


/* ======================================================================
   ROUND-SUMMARY as a centered, scrollable modal that fits a phone, with the
   Next/New-Game button ALWAYS visible inside it (appended last to win).
   ====================================================================== */
.round-summary {
  bottom: auto !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 24px) !important; max-width: 460px;
  max-height: 84vh; border-radius: 16px !important; padding: 16px !important;
  display: flex; flex-direction: column; z-index: 9996;
  background: rgba(8, 40, 28, 0.97); box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.round-summary-header { font-size: 17px !important; margin-bottom: 10px !important; text-align: center; }
.round-summary-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.round-summary-row {
  flex-direction: column !important; align-items: stretch !important;
  gap: 5px !important; padding: 8px 0 !important;
}
.round-summary-player { min-width: 0 !important; font-size: 12.5px; font-weight: 700; }
.round-summary-player .round-summary-points {
  min-width: 0 !important; text-align: right; float: right; color: #ffd166; font-size: 12px;
}
.round-summary-hand { gap: 3px !important; }
.round-summary-hand .card { width: 32px !important; height: 45px !important; margin: 0 !important; }
.round-summary-note { display: none; }
.round-summary-next {
  flex: 0 0 auto; width: 100%; margin-top: 12px; padding: 14px; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 800; letter-spacing: .3px; cursor: pointer;
  background: linear-gradient(135deg,#ff6b6b,#ee5a6f); color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,107,0.4);
}
.round-summary-next:active { filter: brightness(0.92); }


/* header: two buttons + let the goal shrink/wrap so it never clips */
.header-btns { display: flex; gap: 6px; align-items: center; }
.header-btns .btn-secondary { padding: 5px 9px; font-size: 11px; }
#roundReq { white-space: normal; font-size: 11px; line-height: 1.1; }
.game-info .info-item .label { font-size: 8px; }


/* ======================================================================
   STATS & HISTORY (reuses the .tutorial overlay / .tut-card shell)
   ====================================================================== */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-box {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px; padding: 10px 4px; text-align: center;
}
.stat-n { font-size: 22px; font-weight: 800; color: #ffd166; line-height: 1; }
.stat-l { font-size: 10px; opacity: .75; margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; }
.hist-list { max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hist-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px;
}
.hist-mid { flex: 1; opacity: .85; text-transform: capitalize; }
.hist-date { opacity: .6; font-size: 11px; }
.hist-tag { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }
.hist-tag.win { background: rgba(120,220,150,.25); color: #8effb0; }
.hist-tag.loss { background: rgba(255,120,120,.22); color: #ff9d9d; }
.hist-tag.ab { background: rgba(255,255,255,.14); color: #ccc; }
#statsBtn { margin-top: 8px; }


/* ======================================================================
   DESIGN SYSTEM v2  — one cohesive typeface set + refined card-table palette.
   (Appended last so it supersedes the old gradient/gold "AI" look.)
   ====================================================================== */
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-900.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Outfit'; src:url('fonts/outfit-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Outfit'; src:url('fonts/outfit-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Outfit'; src:url('fonts/outfit-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --felt:#123a2a; --felt-2:#0c2c20; --felt-3:#082016;
  --ink:#efe7d6; --ink-dim:rgba(239,231,214,.60); --ink-faint:rgba(239,231,214,.40);
  --line:rgba(239,231,214,.16); --brass:#caa14e; --card-red:#c0433b;
}

/* base typography + calmer felt background */
body{
  font-family:'Outfit',-apple-system,system-ui,sans-serif !important;
  color:var(--ink);
  background:radial-gradient(120% 120% at 50% 0%, #1a4a35 0%, var(--felt) 42%, var(--felt-3) 100%) !important;
}
body::before{
  background-image:
    radial-gradient(60% 50% at 50% 38%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(100% 100% at 50% 100%, rgba(0,0,0,.35), transparent 60%) !important;
  opacity:1 !important;
}

/* ---- lobby / home: no white card; content sits elegantly on the felt ---- */
.lobby-container{
  background:transparent !important; box-shadow:none !important; border:none !important;
  color:var(--ink) !important; max-width:420px; padding:40px 26px !important;
}
.game-title{
  font-family:'Fraunces',serif !important; font-weight:900 !important;
  font-size:clamp(46px,15vw,68px) !important; line-height:.92; letter-spacing:0 !important;
  background:none !important; -webkit-text-fill-color:var(--ink) !important; color:var(--ink) !important;
  text-shadow:0 2px 18px rgba(0,0,0,.35) !important; filter:none !important; margin-bottom:6px !important;
}
.game-title .accent{ color:var(--brass); }
.subtitle{
  font-family:'Outfit',sans-serif; color:var(--ink-dim) !important; font-weight:500 !important;
  font-size:13px !important; letter-spacing:3px !important; text-transform:uppercase; margin-bottom:6px !important;
}
.attribution{ color:var(--ink-faint) !important; font-style:normal !important; letter-spacing:.3px !important; margin-bottom:30px !important; }

.mode-buttons{ gap:12px !important; }
.btn-mode{
  min-height:auto !important; flex-direction:row !important; gap:12px !important;
  justify-content:flex-start !important; text-align:left;
  padding:16px 18px !important; border-radius:14px !important; border:1px solid var(--line) !important;
  background:rgba(255,255,255,.05) !important; color:var(--ink) !important;
  grid-column:1 / -1;   /* stack full-width, not side-by-side */
}
.btn-mode:hover{ transform:none !important; box-shadow:none !important; background:rgba(255,255,255,.09) !important; border-color:var(--brass) !important; }
.btn-mode .mode-ic{ flex:0 0 34px; width:34px; height:34px; color:var(--brass); }
.btn-mode .mode-tx{ display:flex; flex-direction:column; gap:1px; }
.mode-text{ font-size:16px !important; letter-spacing:.2px !important; text-transform:none !important; font-weight:700; color:var(--ink); }
.mode-desc{ font-size:12px !important; opacity:.6 !important; font-weight:400; }
/* the primary (Single Player) gets a parchment fill */
#singlePlayerBtn{ background:var(--ink) !important; border-color:var(--ink) !important; }
#singlePlayerBtn .mode-text{ color:var(--felt-3); }
#singlePlayerBtn .mode-desc{ color:rgba(8,32,22,.7); }
#singlePlayerBtn .mode-ic{ color:var(--card-red); }

input[type="text"]{
  background:rgba(255,255,255,.06) !important; border:1px solid var(--line) !important; color:var(--ink) !important;
  border-radius:12px !important; text-align:center; font-family:'Outfit',sans-serif; font-size:15px !important;
}
input[type="text"]::placeholder{ color:var(--ink-faint) !important; }
input[type="text"]:focus{ border-color:var(--brass) !important; box-shadow:0 0 0 3px rgba(202,161,78,.18) !important; }

/* subtle secondary text-links for How to Play / Stats */
.how-to-play{
  background:transparent !important; border:1px solid var(--line) !important; color:var(--ink-dim) !important;
  border-radius:11px !important; font-weight:600 !important; font-size:13px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px !important;
}
.how-to-play:active{ background:rgba(255,255,255,.06) !important; }
.how-to-play svg{ width:17px; height:17px; opacity:.8; }

/* ---- modals (tutorial + stats) reskinned to the same system ---- */
.tut-card{
  background:linear-gradient(180deg, var(--felt-2), var(--felt-3)) !important;
  border:1px solid var(--line) !important; box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
}
.tut-body h2{ font-family:'Fraunces',serif !important; color:var(--ink) !important; font-weight:600 !important; letter-spacing:0 !important; }
.tut-body p{ color:var(--ink-dim) !important; }
.tut-body p .hl{ color:var(--brass) !important; }
.tut-ic{ width:44px; height:44px; margin:0 auto 4px; color:var(--brass); display:block; }
.tut-progress .dot{ background:var(--line); }
.tut-progress .dot.on{ background:var(--brass); }
.tut-tag.set{ background:rgba(202,161,78,.16); color:var(--brass); }
.tut-tag.run{ background:rgba(239,231,214,.12); color:var(--ink); }
.tut-next{ background:var(--ink) !important; color:var(--felt-3) !important; box-shadow:none !important; }
.tut-skip{ background:transparent !important; border:1px solid var(--line); color:var(--ink-dim) !important; }
.mini-card{ box-shadow:0 2px 8px rgba(0,0,0,.4); }
.mini-card.wild{ background:linear-gradient(135deg,#e9d9a8,var(--brass)); color:var(--felt-3); }

.stat-box{ background:rgba(255,255,255,.05) !important; border:1px solid var(--line) !important; }
.stat-n{ color:var(--ink) !important; font-family:'Fraunces',serif; }
.hist-tag.win{ background:rgba(120,200,140,.2); color:#a8e6b8; }
.hist-tag.loss{ background:rgba(192,67,59,.22); color:#f0a9a4; }


/* tutorial: real-card mini stacks (match the in-game vertical meld look) */
.tut-melds { display:flex; gap:26px; justify-content:center; align-items:flex-start; margin:10px 0 8px; }
.tut-meld { display:flex; flex-direction:column; align-items:center; gap:8px; }
.tut-stack { display:flex; flex-direction:column; align-items:center; }
.tut-stack.center { margin:12px 0 6px; }
.tut-stack .tmini { width:50px; height:70px; border-radius:5px; background:#fff;
  box-shadow:0 3px 9px rgba(0,0,0,.5); margin-top:-46px; }
.tut-stack .tmini:first-child { margin-top:0; }
.tut-stack .tmini.side { transform:rotate(90deg); transform-origin:center center;
  margin-top:-28px; margin-bottom:0; box-shadow:0 3px 12px rgba(0,0,0,.55); }
.tut-stack .tmini.side + .tmini { margin-top:-4px; }   /* card below the wild shows fully */


/* ======================================================================
   v3 tweaks: one-line wordmark, bottom footer, clearer menu buttons,
   Solo config (Players + Teams/Individuals).
   ====================================================================== */
.game-title{ font-size:clamp(84px,28vw,128px) !important; line-height:.9; white-space:nowrap; letter-spacing:2px !important; }
.attribution.site-footer{
  position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 12px);
  text-align:center; margin:0 !important; color:var(--ink-faint) !important;
  font-size:11px; letter-spacing:.3px; pointer-events:none;
}
/* clearer, legible secondary buttons */
.how-to-play{ color:var(--ink) !important; font-size:14px !important; }
.how-to-play svg{ opacity:.95; width:18px; height:18px; }

.solo-config{ display:flex; flex-direction:column; gap:14px; margin-top:2px; }
.solo-config.hidden{ display:none; }
.cfg-title{ font-family:'Fraunces',serif; font-size:22px; color:var(--ink); text-align:center; margin-bottom:2px; }
.cfg-row{ display:flex; flex-direction:column; gap:7px; }
.cfg-label{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-dim); }
.seg{ display:flex; gap:8px; }
.seg button{ flex:1; padding:12px 8px; border-radius:11px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--ink-dim); font:600 13px 'Outfit',sans-serif; cursor:pointer; }
.seg button.seg-on{ background:var(--ink); color:var(--felt-3); border-color:var(--ink); }
.seg button:disabled{ opacity:.3; }
.cfg-deal{ padding:15px !important; border-radius:12px !important; font-size:16px !important; font-weight:800 !important;
  background:var(--ink) !important; color:var(--felt-3) !important; border:none !important; box-shadow:none !important;
  text-transform:none !important; letter-spacing:0 !important; }
.cfg-back{ background:none; border:none; color:var(--ink-dim); font:600 13px 'Outfit',sans-serif; padding:4px; cursor:pointer; }

/* ---- Multiplayer: private-room menu + join code + room-code banner ---- */
.mp-menu{ gap:12px; margin-top:4px; }
.mp-menu .btn-mode{ background:rgba(255,255,255,.05) !important; }

.code-input{
  width:100%; box-sizing:border-box; margin:6px 0 4px;
  font-family:'Fraunces',serif !important; font-size:30px !important; font-weight:600 !important;
  letter-spacing:8px !important; padding:14px !important; border-radius:12px !important;
  background:rgba(255,255,255,.06) !important; border:1px solid var(--line) !important; color:var(--ink) !important;
}
.code-input::placeholder{ font-family:'Outfit',sans-serif !important; font-size:15px !important; letter-spacing:.5px !important; font-weight:500 !important; }

.room-code-banner{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(202,161,78,.12); border:1px solid rgba(202,161,78,.4);
  border-radius:14px; padding:14px 18px; margin:0 auto 18px; max-width:320px;
}
.room-code-banner .rc-label{ font:600 11px 'Outfit',sans-serif; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink-dim); }
.room-code-banner .rc-value{ font:600 34px 'Fraunces',serif; letter-spacing:6px; color:var(--brass); }

/* room-code banner action buttons: Copy + native Share */
.room-code-banner .rc-actions{ display:flex; gap:10px; margin-top:10px; }
.rc-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:700 14px 'Outfit',sans-serif; padding:9px 16px; border-radius:10px;
  background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--ink);
}
.rc-btn svg{ width:17px; height:17px; }
.rc-btn:active{ background:rgba(255,255,255,.14); }
.rc-btn.primary{ background:var(--brass); border-color:var(--brass); color:var(--felt-3); }
.rc-btn.primary:active{ filter:brightness(1.05); }

/* ---- waiting room / lobby list reskinned to the felt palette (fixes the
       old white-card overflow + off-brand pink Start button) ---- */
#waitingArea{ text-align:center; width:100%; }
#waitingArea .spinner{
  border:4px solid rgba(202,161,78,.22); border-top-color:var(--brass); border-right-color:var(--ink);
}
#waitingMessage{ color:var(--ink-dim); font:600 15px 'Outfit',sans-serif; margin:6px 0 4px; }
#playerList{
  box-sizing:border-box; width:100%; max-width:340px; margin:16px auto; padding:12px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:14px;
}
#playerList .player-item{
  box-sizing:border-box; width:100%; text-align:center; padding:12px; margin:8px 0;
  font:600 15px 'Outfit',sans-serif; color:var(--ink); background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:10px; font-style:normal; opacity:1;
}
#playerList .player-item.filled{
  background:rgba(202,161,78,.16); border-color:rgba(202,161,78,.45); color:var(--ink);
}
#playerList .player-item.empty{
  background:transparent; border:1px dashed var(--line); color:var(--ink-faint); font-style:normal;
}
#startBtn{
  display:block; width:100%; max-width:340px; margin:6px auto 8px; padding:15px !important;
  border-radius:12px !important; font:800 16px 'Outfit',sans-serif !important;
  background:var(--ink) !important; color:var(--felt-3) !important; border:none !important;
  box-shadow:none !important; text-transform:none !important; letter-spacing:0 !important;
}
#waitCancelBtn{ display:block; margin:0 auto; }

/* "You're playing as" — edit your name in the lobby */
.wait-name-row{ max-width:340px; margin:0 auto 14px; text-align:center; }
.wait-name-row .wnr-label{ display:block; font:600 11px 'Outfit',sans-serif; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--ink-dim); margin-bottom:7px; }
.wait-name-row .wnr-edit{ display:flex; gap:8px; }
.wait-name-row .wnr-input{
  flex:1; box-sizing:border-box; text-align:center; margin:0 !important;
  font:600 16px 'Outfit',sans-serif !important; padding:11px 12px !important; border-radius:10px !important;
  background:rgba(255,255,255,.06) !important; border:1px solid var(--line) !important; color:var(--ink) !important;
}
.wait-name-row .rc-btn{ flex:0 0 auto; }

/* ======================================================================
   MOBILE WEB scroll fix. The site and the packaged app share this CSS, and
   the app locks the screen (body overflow:hidden, height:100vh) so it feels
   native. In a phone BROWSER the toolbars shrink the visible area, so that
   same lock left the menus cut off with no way to scroll. Here we let ONLY
   mobile web (html.is-web, narrow) scroll, and use dynamic viewport height so
   full-screen views fit the visible area. The app (html.is-app) is untouched;
   desktop web (wide) is untouched.
   ====================================================================== */
@media (max-width: 860px) {
  html.is-web, html.is-web body {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100dvh;
    position: static !important;
  }
  html.is-web #lobby.screen {
    height: auto !important;
    min-height: 100dvh;
    align-items: flex-start;          /* top-align so tall menus scroll instead of clipping */
    padding: 20px 0 34px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* full-screen views fit the *visible* area (accounts for the browser toolbar) */
  html.is-web #game { height: 100dvh; }
}

/* ======================================================================
   Sub-panel layout fix (solo setup, multiplayer menu, private-room waiting).
   On the main menu we center content and show the fixed footer. But the taller
   panels — especially the private-match waiting screen (room code + Copy/Share
   + spinner + 4 seats + Start + Cancel) — overflowed a phone screen: it clipped
   "GO" off the top and the Cancel button landed on top of the footer. When any
   panel other than the main menu is showing, drop the footer and let the lobby
   top-align + scroll so nothing clips or overlaps. (Uses :has(), supported in
   modern iOS/Safari + the app's WKWebView.)
   ====================================================================== */
#lobby:has(#modeSelection.hidden) .site-footer { display: none; }
#lobby:has(#modeSelection.hidden).screen {
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 0 28px;
}
/* tighten the waiting screen so it usually fits without needing to scroll */
#waitingArea .spinner { width: 38px; height: 38px; margin: 14px auto; border-width: 3px; }
#waitingArea .room-code-banner { margin-bottom: 12px; padding: 12px 16px; }
#waitingArea .room-code-banner .rc-value { font-size: 30px; }
#playerList { margin: 12px auto; }
#playerList .player-item { padding: 10px; margin: 6px 0; }

/* Host team-arrange controls in the private-room lobby */
#playerList .player-item.filled { display:flex; align-items:center; justify-content:center; gap:8px; position:relative; }
.team-move {
  margin-left:8px; padding:5px 10px; line-height:1; border-radius:8px; cursor:pointer; white-space:nowrap;
  background:rgba(202,161,78,.16); border:1px solid rgba(202,161,78,.45); color:var(--ink);
  font:700 12px 'Outfit',sans-serif;
}
.team-move:active { background:rgba(202,161,78,.3); }
.seat-hint { max-width:340px; margin:2px auto 10px; text-align:center; color:var(--ink-dim);
  font:600 11px 'Outfit',sans-serif; letter-spacing:.3px; }

/* In-game Menu overlay */
.game-menu-overlay { position:fixed; inset:0; z-index:200; background:rgba(4,20,14,.72);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.game-menu { width:100%; max-width:300px; display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg,var(--felt-2),var(--felt-3)); border:1px solid var(--line);
  border-radius:16px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.55); }
.game-menu-title { font-family:'Fraunces',serif; font-size:22px; color:var(--ink); text-align:center; margin-bottom:2px; }
.game-menu button { padding:13px !important; border-radius:11px !important; font:800 15px 'Outfit',sans-serif !important; }

/* Keep the meld's "who placed" header visible above the stacked cards */
.played-set-header { position:relative; z-index:3; }
.played-set-cards { margin-top:5px; }

/* Turn-timer chip in the header + thin HUD strip under it */
.turn-timer {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; padding:5px 8px; border-radius:9px; margin-right:6px;
  font:800 13px 'Outfit',sans-serif; color:var(--felt-3); background:var(--brass);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.turn-timer.low { background:var(--card-red); color:#fff; animation:tpulse .8s ease-in-out infinite; }
@keyframes tpulse { 50% { opacity:.55; } }
.hud-strip {
  position:fixed; left:0; right:0; z-index:59;
  top:calc(env(safe-area-inset-top) + 44px);
  display:flex; gap:18px; justify-content:center; flex-wrap:nowrap; overflow:hidden;
  padding:3px 8px; font:700 12px 'Outfit',sans-serif; color:var(--ink);
  background:rgba(4,40,28,.96); pointer-events:none; white-space:nowrap;
}
.hud-strip .hc { flex:0 0 auto; }
.hud-strip b { color:#fff; font-weight:800; display:inline-block; min-width:1.1em; text-align:center; }
/* nudge the opponents strip down so the HUD strip doesn't overlap it */
.table-container { top: calc(env(safe-area-inset-top) + 84px) !important; }

/* Pin the game screen to the true visible height (set from JS on rotate) so the
   header stops drifting down after a landscape→portrait round-trip. */
#game { height: var(--app-height, 100vh); }

/* ======================================================================
   LANDSCAPE layout — the portrait stack is too tall for a short landscape
   viewport (board + hand got crushed / unplayable). Compress the vertical
   chrome, respect the notch on the sides, and shrink the hand so the board
   and your cards both fit and stay usable.
   ====================================================================== */
@media (orientation: landscape) and (max-height: 600px) {
  /* Header: keep it clear of the side notch so Rules isn't cut off. */
  .game-header {
    min-height:30px !important; padding:2px 0 !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  /* Header info on ONE row (portrait's 2x2 grid was overlapping + cutting off
     the HUD strip below it). Plenty of width in landscape. */
  .game-info { display:flex !important; flex-direction:row !important; align-items:center; gap:0 16px !important; }
  .header-btns { gap:6px !important; }
  .hud-strip {
    top: calc(env(safe-area-inset-top) + 34px);
    left: env(safe-area-inset-left); right: env(safe-area-inset-right);
    font-size:11px; padding:2px 8px; gap:16px; justify-content:center;
  }
  /* Use the WIDTH: opponents in a slim LEFT column hugging the edge, board fills
     the rest. Cleaner look — no dashed board rectangle, no boxed opponents. */
  .table-container {
    top: calc(env(safe-area-inset-top) + 54px) !important;
    bottom: calc(env(safe-area-inset-bottom) + 92px) !important;
    left: env(safe-area-inset-left) !important;
    right: env(safe-area-inset-right) !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto 1fr !important;
    grid-template-areas: "o1 board" "o2 board" "o3 board" "pad board" !important;
    gap:2px 6px !important; padding:0 !important;
  }
  #playerTop   { grid-area: o1 !important; }
  #playerLeft  { grid-area: o2 !important; }
  #playerRight { grid-area: o3 !important; }
  /* opponents: borderless, left-aligned, hugging the edge — no wasted box */
  .player-position { padding:5px 6px !important; text-align:left !important; background:transparent !important; border:none !important; }
  .player-info .name  { font-size:11.5px; }
  .player-info .stats { font-size:9px; }
  /* the board is one clean surface — drop the dashed rectangle + hint clutter */
  .table-center { border:none !important; background:none !important; }
  .board-hint { display:none !important; }
  /* passing banner: a compact centered chip just above the hand (not a huge
     yellow bar across the board). */
  .passing-info {
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    left:50% !important; right:auto !important; transform:translateX(-50%);
    max-width:70%; font-size:10.5px !important; padding:5px 12px !important;
  }
  .passing-info small { display:none !important; }
  /* Hand: full-width slim bar at the bottom. */
  .hand-area {
    height: calc(88px + env(safe-area-inset-bottom)) !important;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .hand-cards { padding:14px 12px 4px !important; min-height:72px !important; }
  .hand-cards .card { width:46px !important; height:64px !important; margin-left:-15px !important; }
  .hand-header { gap:3px !important; }
  .hand-actions button, .btn-sort { padding:6px 9px !important; font-size:10.5px !important; }
}

/* ======================================================================
   PERSISTENT SWAP-CARD INDICATOR — pinned to the board viewport corner so
   the swappable middle card is always visible while panning / zooming.
   ====================================================================== */
#swapIndicator {
  position: absolute; top: 8px; left: 8px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 7px; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#swapIndicator.ready { border-color: rgba(255,215,0,0.75); box-shadow: 0 0 0 2px rgba(255,215,0,.4); }
#swapIndicator .swap-cap { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.78); white-space: nowrap; }
#swapIndicator.ready .swap-cap { color: #ffd166; }
#swapIndicator .swap-mini { pointer-events: none; line-height: 0; }
#swapIndicator .swap-mini .card {
  width: 40px !important; height: 56px !important; margin: 0 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.4) !important; transform: none !important;
}
#swapIndicator .swap-mini .card:hover { transform: none !important; }

/* ======================================================================
   TABLET / iPad — scale the whole UI up (bigger cards + text) so it's easy
   to read and play on a large screen, especially for older eyes.
   Targets touch tablets in ANY orientation (both dimensions large); phones
   in landscape are excluded (their short side is < 700px), and desktop
   browsers are excluded (hover: hover). Appended last to win the cascade.
   ====================================================================== */
@media (hover: none) and (min-width: 700px) and (min-height: 700px) {
  /* ---- header ---- */
  .game-header { min-height: 60px !important; padding: 10px 22px !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important; gap: 4px 26px !important; }
  .game-info { gap: 3px 30px !important; }
  .info-item .label, .game-info .info-item .label { font-size: 14px !important; }
  .value { font-size: 20px !important; }
  #roundReq { font-size: 18px !important; }
  #rulesBtn, .header-btns .btn-secondary { padding: 11px 20px !important; font-size: 18px !important; border-radius: 12px !important; }

  /* ---- HUD strip (Deck / Hand / Added) ---- */
  .hud-strip { top: calc(env(safe-area-inset-top) + 64px) !important;
    font-size: 19px !important; gap: 34px !important; padding: 7px 12px !important; }
  .turn-timer { min-width: 84px !important; padding: 9px 14px !important; font-size: 21px !important; }

  /* ---- opponents strip ---- */
  .table-container {
    top: calc(env(safe-area-inset-top) + 128px) !important;
    bottom: calc(env(safe-area-inset-bottom) + 312px) !important;
    grid-template-rows: 88px minmax(0, 1fr) !important;
    gap: 14px !important; padding: 14px 18px !important;
  }
  .player-position { padding: 8px 12px !important; border-radius: 14px !important; }
  .player-info .name  { font-size: 20px !important; }
  .player-info .stats { font-size: 15px !important; }

  /* ---- board: deck + middle card (base .card) ---- */
  .card { width: 156px; height: 218px; border-radius: 12px; }
  .card img { border-radius: 12px; }
  /* the deck pile + face-down backs carry hard-coded inline 80x112 sizes from
     the JS; override them so the enlarged card-backs don't overflow their box
     and crash into the melds below. */
  #deckPile { width: 156px !important; height: 218px !important; }
  #middleCard .card-back { width: 156px !important; height: 218px !important; }
  .board-zoom { gap: 26px !important; padding: 28px !important; }
  .board-hint { font-size: 17px !important; bottom: 12px !important; }
  .board-empty-cta { font-size: 24px !important; }
  .board-ctrls button { min-width: 56px !important; height: 56px !important; font-size: 30px !important; border-radius: 14px !important; }
  .board-ctrls button[data-z=fit] { padding: 0 20px !important; font-size: 20px !important; }

  /* ---- played melds ---- */
  .played-sets { max-width: 880px !important; gap: 20px 26px !important; }
  .played-set { padding: 12px 16px 16px !important; border-radius: 16px !important; }
  .played-set-header { font-size: 18px !important; margin-bottom: 9px !important; }
  .played-set-header .pill { font-size: 14px !important; padding: 2px 10px !important; }
  .played-set-cards .card { width: 108px !important; height: 151px !important; margin-top: -110px !important; }
  .played-set-cards .card:first-child { margin-top: 0 !important; }
  .played-set-cards .card.wild.played { margin-top: -84px !important; margin-right: 46px !important; }
  .new-set-box { min-width: 116px !important; min-height: 148px !important; font-size: 20px !important; border-radius: 16px !important; }

  /* ---- persistent swap indicator (bigger) ---- */
  #swapIndicator { top: 14px !important; left: 14px !important; padding: 10px !important; gap: 6px !important; border-radius: 16px !important; }
  #swapIndicator .swap-cap { font-size: 14px !important; }
  #swapIndicator .swap-mini .card { width: 74px !important; height: 104px !important; }

  /* ---- hand area + cards ---- */
  .hand-area { height: calc(344px + env(safe-area-inset-bottom)) !important;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom)) !important; }
  .hand-header { gap: 12px !important; }
  /* CENTERED hand. Centering only clips when content overflows, so the overlap
     is tuned tight enough that a full hand (up to ~13 cards) fits within the
     width — result: the hand stays centered AND no card is ever cut off. */
  .hand-cards { padding: 42px 30px 14px !important; min-height: 200px !important; justify-content: center !important; }
  .hand-cards .card { width: 128px !important; height: 179px !important; margin-left: -58px !important; }
  /* first card keeps a 0 left margin so the flex line width equals the visible
     span (first card's left edge → last card's right edge) — only then does
     justify-content:center actually look centered despite the overlap. */
  .hand-cards .card:first-child { margin-left: 0 !important; }
  .hand-cards .card:last-child { margin-right: 0 !important; }
  .hand-cards .card.selected { transform: translateY(-30px) scale(1.06) !important; }
  .hand-actions { gap: 14px !important; }
  .hand-actions button, .btn-sort { padding: 16px 28px !important; font-size: 21px !important; border-radius: 13px !important; }

  /* ---- passing banner ---- */
  .passing-info { bottom: calc(314px + env(safe-area-inset-bottom)) !important;
    font-size: 20px !important; padding: 13px 24px !important; border-radius: 16px !important; }
  .passing-info small { font-size: 16px !important; }

  /* ---- modals: tutorial / stats / round summary ---- */
  .tut-card { max-width: 680px !important; padding: 34px 32px 28px !important; }
  .tut-body .tut-emoji { font-size: 58px !important; }
  .tut-body h2 { font-size: 30px !important; }
  .tut-body p { font-size: 21px !important; max-width: 88% !important; }
  .mini-card { width: 58px !important; height: 82px !important; font-size: 24px !important; }
  .tut-tag { font-size: 15px !important; padding: 4px 14px !important; }
  .tut-skip, .tut-next { padding: 18px !important; font-size: 21px !important; border-radius: 14px !important; }
  .tut-skip { flex: 0 0 130px !important; }
  .round-summary { max-width: 640px !important; padding: 24px !important; }
  .round-summary-header { font-size: 24px !important; }
  .round-summary-player { font-size: 18px !important; }
  .round-summary-player .round-summary-points { font-size: 18px !important; }
  .round-summary-hand .card { width: 48px !important; height: 67px !important; }
  .round-summary-next { padding: 18px !important; font-size: 22px !important; }
  .stat-n { font-size: 32px !important; }
  .stat-l { font-size: 14px !important; }
  .hist-row { font-size: 17px !important; }
}