/* Shared layout/theme used by shared-lobby.html, shared-game.html, and
   shared-results.html. Page-specific widgets (lobby forms, seat-scorer
   hand picker, payout table) stay inline in each page. Shared
   .app-container base (max-width/background/border-radius/box-shadow)
   lives in shared.css, but it has no margin/padding of its own (that
   part varies per app) — this page's centering (margin:0 auto) and
   padding need to be added back here. Header does need its own
   row-layout breakpoint too (shared.css has no header-layout
   breakpoint at all, since apps differ on this). */
.app-container {
    margin: 0 auto;
    padding: clamp(12px, 4vw, 20px);
}

@media (min-width: 650px) {
    .header { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px 32px; }
    /* Reserves room for the absolutely-positioned settings gear (36px button
       + gap) pinned to the header's top-right corner, so the room code badge
       doesn't flow underneath it once the header switches to a row layout. */
    .room-code-badge { margin-right: 46px; }
}

.room-code-badge {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    background: #e8f0fb;
    color: #185fa5;
    padding: 3px 10px;
    border-radius: 6px;
}

/* .meta-item/.meta-checkbox-label/checkbox styling/.meta-select/
   .hidden-element all live in shared.css now. */

.hand-info-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.hand-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.hand-info-row + .hand-info-row {
    border-top: 1px solid #f0f0f0;
    padding-top: 6px;
}
.hand-info-label { color: #888; }
.hand-info-value { font-weight: 600; color: #222; }

/* 1 row of 4 whenever there's room; only collapse to 2x2 (see the
   narrow-width override below) once that would otherwise squish the
   labels or force uneven wrapping — same pattern as .action-bar. */
.other-seats-status {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
@media (max-width: 480px) {
    .other-seats-status { grid-template-columns: repeat(2, 1fr); }
}
.seat-status-chip {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background: #f8f8f8;
    color: #888;
}
.seat-status-chip.submitted {
    background: #eaf6ec;
    color: #2e7d32;
    border-color: #2e7d32;
}

.sync-toast {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 50;
}
.sync-toast.show { opacity: 0.92; }

.action-bar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
}

/* .btn base/.modal-* all live in shared.css — just this page's own
   :disabled addition on top. */
.btn:disabled { opacity: 0.55; cursor: not-allowed; }