/* ===== TABLE & SEATS ===== */
.table {
    position: relative;
}

#score-bar, #watch-score-bar, #replay-score-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: clamp(0.85rem, 1vw, 1.05rem);
}

#contract-display, #watch-contract-display, #replay-contract-display {
    color: #d4af37;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.1vw, 1.15rem);
}

.seats {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-areas:
        ".     north  ."
        "west  trick  east"
        ".     south  .";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(4px, 0.5vh, 10px);
}

.seat { text-align: center; }
.seat.north { grid-area: north; }
.seat.south { grid-area: south; }
.seat.west  { grid-area: west; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.seat.east  { grid-area: east; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.seat-label {
    font-size: clamp(0.65rem, 0.75vw, 0.85rem);
    color: #8a8a7a;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.seat-label.active-player {
    color: #d4af37;
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
}

#trick-area, #watch-trick-area, #replay-trick-area {
    grid-area: trick;
    display: grid;
    grid-template-areas:
        ". n ."
        "w . e"
        ". s .";
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    gap: clamp(2px, 0.5vw, 8px);
    align-items: center;
    justify-items: center;
    min-height: 0;
}

#trick-n, #watch-trick-n, #replay-trick-n { grid-area: n; }
#trick-s, #watch-trick-s, #replay-trick-s { grid-area: s; }
#trick-w, #watch-trick-w, #replay-trick-w { grid-area: w; }
#trick-e, #watch-trick-e, #replay-trick-e { grid-area: e; }

/* ===== LAST TRICK PANEL ===== */
#last-trick, #replay-last-trick {
    position: absolute;
    top: 42px;
    right: 8px;
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    padding: 6px 10px;
    z-index: 20;
    border: 1px solid rgba(255,255,255,0.08);
}

.last-trick-label {
    font-size: clamp(0.6rem, 0.7vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 4px;
    text-align: center;
    color: #8a8a7a;
}
.last-trick-label.team-partner { color: #a5d6a7; }
.last-trick-label.team-opponent { color: #ef9a9a; }

.last-trick-grid {
    --lt-card-w: calc(var(--card-w) * 0.55);
    --lt-card-h: calc(var(--card-h) * 0.55);
    display: grid;
    grid-template-areas:
        ". n ."
        "w . e"
        ". s .";
    grid-template-columns: var(--lt-card-w) var(--lt-card-w) var(--lt-card-w);
    grid-template-rows: var(--lt-card-h) var(--lt-card-h) var(--lt-card-h);
    gap: 1px;
    align-items: center;
    justify-items: center;
}

.lt-n { grid-area: n; }
.lt-e { grid-area: e; }
.lt-s { grid-area: s; }
.lt-w { grid-area: w; }

#last-trick .card, #replay-last-trick .card {
    width: calc(var(--card-w) * 0.55);
    height: calc(var(--card-h) * 0.55);
}

/* ===== PLAY TABLE GRID ===== */
#play-table {
    --card-w: clamp(65px, min(6vw, calc((100vh - 200px) / 7.5)), 150px);
    --card-h: calc(var(--card-w) * 1.43);
    --card-overlap: calc(var(--card-w) * -0.2);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr;
    flex: 1;
    min-height: 0;
    gap: 0 12px;
}

#play-table #score-bar { grid-column: 1 / -1; grid-row: 1; }
#play-table .cfn-box { grid-column: 1 / -1; grid-row: 2; }
#play-table .seats { grid-column: 1; grid-row: 3; min-height: 0; overflow: hidden; align-content: end; }
#play-table #bid-history-panel {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    width: clamp(170px, 14vw, 220px);
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    padding: 10px 12px;
}
#play-table #play-review {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    width: clamp(200px, 18vw, 280px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 100%;
}
#play-bid-history, #play-tricks-history {
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 8px 10px;
}
#play-bid-entries {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 20px;
}
#play-tricks-list {
    max-height: 250px;
    overflow-y: auto;
}
#play-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    text-align: center;
    padding: 6px 16px;
    font-size: clamp(0.85rem, 1vw, 1.05rem);
    color: #c0b890;
    font-weight: 500;
    letter-spacing: 0.5px;
    pointer-events: none;
    white-space: nowrap;
}
#play-status:empty { display: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    #play-table {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 4px 0;
        min-height: 0;
    }
    #play-table #score-bar { grid-column: 1; grid-row: 1; }
    #play-table .cfn-box { display: none; }
    #play-table .seats { grid-column: 1; grid-row: 2; min-height: 0; }
    /* South hand: span full screen width, cards overlap dynamically */
    #play-table .seat.south .hand {
        width: calc(100vw - 16px);
    }
    #play-table #bid-history-panel {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
    }
    #play-table #play-review {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
    }
}

/* Welcome state: center config when no game is running */
#app:has(#play-config):not(:has(#play-table:not(.hidden))) #play-config {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 40px 32px;
    margin-bottom: 0;
    font-size: clamp(1rem, 1.1vw, 1.15rem);
}
#play-intro {
    display: none;
    margin: 0;
    text-align: center;
    color: #b0b0a0;
    line-height: 1.5;
    max-width: 420px;
}
#app:has(#play-config):not(:has(#play-table:not(.hidden))) #play-intro {
    display: block;
}
#app:has(#play-config):not(:has(#play-table:not(.hidden))) #play-config label {
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
}
#app:has(#play-config):not(:has(#play-table:not(.hidden))) #play-config select {
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    padding: 7px 10px;
}
#app:has(#play-config):not(:has(#play-table:not(.hidden))) #play-config #start-game {
    font-size: clamp(1.1rem, 1.3vw, 1.4rem);
    padding: 14px 36px;
    margin-top: 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* ===== GAME ID TAG ===== */
.game-id-tag {
    font-family: monospace;
    color: #d4af37;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 2px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 1px 10px;
}

/* ===== CFN BOX ===== */
.cfn-box {
    font-family: monospace;
    font-size: clamp(0.55rem, 0.7vw, 0.72rem);
    color: #8a8a7a;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 2px 8px;
    margin-bottom: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s, border-color 0.2s;
    max-width: 100%;
    user-select: all;
}
.cfn-box:hover {
    color: #d4af37;
    border-color: rgba(212, 175, 55, 0.3);
}
.cfn-box.copied {
    color: #a5d6a7;
    border-color: rgba(76, 175, 80, 0.4);
}

/* ===== REPORT BUTTON ===== */
.report-btn {
    background: transparent;
    color: #888;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}
.report-btn:hover {
    color: #ef9a9a;
    border-color: rgba(229, 115, 115, 0.4);
    background: rgba(229, 115, 115, 0.1);
}

/* Replay tag in stats */
.stats-replay-tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #d4af37;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    letter-spacing: 1px;
}