/* ═══════════════════════════════════════════════════════
   XI-DACH — Bàn chơi Xì Dách & Lobby board
   ═══════════════════════════════════════════════════════ */

.board-container {
    background:
        radial-gradient(ellipse at 50% 30%, var(--felt-light) 0%, var(--felt-mid) 40%, var(--felt-dark) 100%);
    border-radius: 20px;
    border: 3px solid #1f5c2e;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.45),
        0 0 0 5px #0d200f,
        0 0 0 7px rgba(255,215,0,0.08),
        0 8px 32px rgba(0,0,0,0.7);
    padding: 16px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 150px;
    margin-bottom: 0;
}

.players-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
}

/* Opponent boxes */
.op-box {
    background: rgba(0,0,0,0.5);
    border-radius: var(--radius-card);
    padding: 10px 8px;
    width: calc(50% - 10px);
    min-width: 110px;
    max-width: 155px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.op-box.host {
    border-color: rgba(255,215,0,0.4);
    background: rgba(255,215,0,0.06);
    box-shadow: 0 0 14px rgba(255,215,0,0.08);
}

.op-name   { font-weight: bold; font-size: 0.86rem; margin-bottom: 2px; color: #eee; }
.op-role   { font-size: 0.68rem; color: var(--gold); margin-bottom: 8px; letter-spacing: 0.5px; }

.op-cards {
    display: flex;
    justify-content: center;
    height: 55px;
    position: relative;
    margin-bottom: 8px;
    width: 100%;
}
.op-cards .card { margin: 0 !important; }

.op-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: bold;
    background: rgba(0,0,0,0.5);
    color: var(--text-sub);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Host action area */
.game-actions {
    text-align: center;
    padding: 8px 0 4px;
    flex-shrink: 0;
}

/* My play area */
.my-area-wrapper {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-card);
    padding: 12px 10px;
    backdrop-filter: blur(6px);
    flex-shrink: 0;
    margin-top: 8px;
}

.my-area-title {
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.8;
}

.my-cards-row {
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.my-status-text {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 10px;
}

.play-actions-row {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Lobby waiting board (inside dynamic-game-area) */
.lobby-board {
    background:
        radial-gradient(ellipse at 50% 30%, var(--felt-light) 0%, var(--felt-mid) 45%, var(--felt-dark) 100%);
    border-radius: 20px;
    border: 3px solid #1f5c2e;
    box-shadow:
        inset 0 0 50px rgba(0,0,0,0.4),
        0 0 0 5px #0d200f,
        0 0 0 7px rgba(255,215,0,0.08);
    padding: 20px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

.lobby-title {
    font-size: 0.78rem;
    font-weight: bold;
    color: rgba(255,215,0,0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Room header (compat) */
.room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}
.room-header > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }