/* The seat picker - bb/js/battle/seat-picker.js, Story 18.5.

   Moved out of The Old World's magic.css, where it had lived since this
   was its picker alone. Linked by the shell at the position that sheet
   holds, so the cascade is exactly what it was. */

/* -- Seat picker -------------------------------------------------------
   The table seen from above: two sides, two chairs each. Teammates sit
   together because the pairing IS the authority model — seats 1 and 3
   share the host's controls, 2 and 4 share the guest's — and a player who
   misreads which side they are on gets the wrong half of the game. */
.seat-picker-modal { max-width: min(560px, calc(100vw - 2 * var(--space-md))); }

/* Who you are, above where you sit. Asked here because this is the only
   moment the app has a fourth player's attention — setup runs on the
   host's phone and can only ever know about the host. */
.seat-identity {
    display: grid;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color, #4a4238);
}
.seat-identity .form-group { margin-bottom: 0; }

.seat-table {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.seat-side {
    border: 2px solid var(--border-color, #4a4238);
    border-radius: 8px;
    padding: var(--space-sm);
}
/* Named as well as positioned. A games hall is dark and a projector is
   worse; a team told apart only by border colour is a team told apart by
   nothing. */
.seat-side-title {
    margin: 0 0 var(--space-sm);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #9a8f80);
}
.seat-side-1 { border-color: var(--accent-gold, #c9a227); }
.seat-side-2 { border-color: var(--accent-blue, #4a7fb5); }

.seat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}
.seat-chair {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Tapped by someone standing at a table holding dice. */
    min-height: 72px;
    padding: var(--space-sm);
    border: 1px solid var(--border-color, #4a4238);
    border-radius: 6px;
    background: var(--bg-elevated, #241f1a);
    color: var(--text-primary, #e8dfd0);
    cursor: pointer;
    font: inherit;
}
.seat-chair:hover:not(:disabled),
.seat-chair:focus-visible:not(:disabled) {
    border-color: var(--accent-gold, #c9a227);
    outline: none;
}
.seat-chair-slot {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #9a8f80);
}
.seat-chair-who { font-weight: 600; }
.seat-chair.is-taken {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (min-width: 480px) {
    .seat-table-teams { grid-template-columns: 1fr 1fr; }
}

/* A free-for-all has no sides: one row of chairs. */
.seat-table-free .seat-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }