/* Runout named character mode — the table view and its setup editor (issue #290).
 *
 * The table geometry is forked from the replayer: .ct-table and .ct-felt copy
 * replay.css's #poker-table and #table-felt sizes per orientation, because
 * the seat positions in character-table.js are relative to them. These
 * copies belong to the character table and may diverge; replay.css is never
 * shared. The table always has ten seats; the dealer's slot is optional and,
 * when shown, the same size as a seat.
 *
 * Seat cards reuse .position-btn, so action states, hero, selection and
 * illegal-amount styling come from hhh.css and stay identical to the grid.
 */

:root {
    --ct-rail: #3d2817;
    --ct-tray: #262a31;
    --ct-button-face: #f4f1e8;
    --ct-button-ink: #1f2937;
    --ct-empty-ink: rgba(229, 231, 235, 0.6);
    --ct-empty-line: rgba(229, 231, 235, 0.3);
    --ct-empty-fill: rgba(0, 0, 0, 0.35);
    --ct-name-ink: #f3f4f6;
    --ct-stack-ink: #d1d5db;
    --ct-panel: #1f2937;
    --ct-panel-line: #374151;
    --ct-error: #fca5a5;
    /* Narrower than replay.css .player-seat: five slots share the dealer's side */
    --ct-seat-w: clamp(72px, 15vw, 112px);
}

[data-theme="light"] {
    --ct-rail: #5a4530;
    --ct-tray: #4a4238;
    --ct-button-face: #fffdf7;
    --ct-button-ink: #1a1208;
    --ct-empty-ink: rgba(255, 253, 247, 0.85);
    --ct-empty-line: rgba(255, 253, 247, 0.5);
    --ct-empty-fill: rgba(44, 36, 24, 0.35);
    --ct-name-ink: #1a1208;
    --ct-stack-ink: #3a3025;
    --ct-panel: #e8e2d8;
    --ct-panel-line: #c4bdb2;
    --ct-error: #b91c1c;
}

/* ---------- Stage: the grid area holds the table ---------- */

#position-grid.ct-active,
.ct-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

/* replay.css #poker-table. character-table.js scales it down to fit the stage. */
.ct-table {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: clamp(300px, 55vw, 500px);
    flex-shrink: 0;
}

/* replay.css #table-felt, drawn as an outline: no fill, a thin rail */
.ct-felt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 85vw, 700px);
    height: clamp(150px, 42.5vw, 350px);
    border-radius: clamp(75px, 21vw, 175px);
    border: 2px solid var(--ct-rail);
}

/* replay.css #table-center: the board over the pot, in the middle of the felt */
.ct-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ct-board {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 56px;
}

.ct-board .community-cards-preflop-hint {
    white-space: nowrap;
}

/* replay.css #pot-display */
.ct-pot {
    padding: 6px 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.ct-pot-label { color: #aaa; }
.ct-pot-amount { color: #ffd700; }

[data-theme="light"] .ct-pot { background: rgba(44, 36, 24, 0.12); }
[data-theme="light"] .ct-pot-label { color: #5a4530; }
[data-theme="light"] .ct-pot-amount { color: #8a5a00; }

/* Seats and the dealer's slot are positioned inline, against the felt */
.ct-seat,
.ct-setup-seat,
.ct-dealer {
    position: absolute;
    width: var(--ct-seat-w);
    box-sizing: border-box;
}

/* The dealer's slot: seat-sized, labelled, over a chip rack. Not a seat. */
.ct-dealer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 54px;
    padding: 5px 6px;
    border-radius: 8px;
    border: 2px solid var(--ct-rail);
    background: var(--ct-tray);
    color: var(--ct-button-face);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

.ct-dealer::after {
    content: '';
    width: 70%;
    height: 7px;
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg,
            #b91c1c 0 7px, #e5e7eb 7px 9px, #1d4ed8 9px 16px, #e5e7eb 16px 18px,
            #15803d 18px 25px, #e5e7eb 25px 27px);
}

/* In the setup editor it matches the setup seats */
.ct-stage .ct-dealer {
    min-height: 44px;
}

/* The dealer button rides on its seat's corner */
.ct-button-chip {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ct-button-face);
    color: var(--ct-button-ink);
    font-size: 11px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18) inset, 0 2px 4px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 2;
}

/* ---------- Seats on the live table ---------- */

.position-btn.ct-seat {
    min-width: 0;
    min-height: 54px;
    padding: 5px 6px;
    gap: 1px;
    z-index: 1;
}

.ct-seat-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ct-name-ink);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.position-btn.ct-seat .pos-label {
    font-size: 11px;
    font-weight: 600;
}

.position-btn.ct-seat .pos-action {
    font-size: 11px;
}

/* Remaining stack (amount behind), #297. Explicit color: .position-btn sets
   none in the dark theme, so a button's default black ink would show through. */
.ct-seat-stack {
    font-size: 11px;
    font-weight: 600;
    color: var(--ct-stack-ink);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.position-btn.ct-seat.ct-seat-inert {
    cursor: default;
}

.ct-seat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px dashed var(--ct-empty-line);
    border-radius: 8px;
    background: var(--ct-empty-fill);
    color: var(--ct-empty-ink);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* A fold stays maroon through its own street, then the seat goes black.
   Opaque, since the half-transparent fold fill would let the felt through. */
.position-btn.ct-seat.acted-fold.folded-earlier {
    background-color: #000;
    color: #6b7280;
    opacity: 1;
}

.position-btn.ct-seat.folded-earlier .ct-seat-name { color: #9ca3af; }
.position-btn.ct-seat.folded-earlier .ct-seat-stack { color: #6b7280; }

/* ---------- Abandon hand control on the action screen ---------- */

.btn-table-setup {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--ct-panel-line);
    border-radius: 4px;
    background: var(--ct-panel);
    color: var(--hhh-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-table-setup:focus-visible,
.ct-setup-seat:focus-visible,
.ct-flip-btn:focus-visible,
.ct-picker-option:focus-visible {
    outline: 2px solid #eab308;
    outline-offset: 2px;
}

/* Change table sits under the output toolbar, which has no room for a fifth button on a phone */
.ct-output-row {
    display: flex;
    justify-content: center;
    padding: 0 0 12px;
    flex-shrink: 0;
}

/* ---------- Setup editor ---------- */

.ct-setup-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 16px 0;
}

.ct-setup-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hhh-text);
}

.ct-setup-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-flip-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 17px;
    border: 1px solid var(--ct-panel-line);
    background: var(--ct-panel);
    color: var(--hhh-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ct-setup-seat {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px;
    border-radius: 8px;
    border: 2px solid var(--ct-panel-line);
    background: var(--ct-panel);
    cursor: pointer;
    z-index: 1;
}

.ct-setup-seat:disabled {
    cursor: default;
    opacity: 0.7;
}

.ct-setup-seat .ct-seat-name {
    color: var(--hhh-text);
}

.ct-setup-seat.is-hero {
    border-color: #eab308;
}

.ct-setup-seat.is-hero .ct-seat-name {
    color: #eab308;
}

.ct-setup-seat-empty {
    background: var(--ct-empty-fill);
    border-style: dashed;
    border-color: var(--ct-empty-line);
}

.ct-setup-seat-empty .ct-seat-name {
    color: var(--ct-empty-ink);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.ct-setup-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 16px 14px;
}

.ct-setup-hint {
    font-size: 13px;
    color: var(--hhh-text);
    opacity: 0.8;
    text-align: center;
}

.ct-setup-error,
.ct-picker-error,
.ct-mode-error {
    font-size: 13px;
    color: var(--ct-error);
}

.ct-setup-actions {
    display: flex;
    gap: 10px;
}

#btn-character-setup-done:disabled {
    opacity: 0.45;
    cursor: default;
}

.ct-setup-message {
    margin: auto 16px 12px;
    text-align: center;
    font-size: 14px;
    color: var(--hhh-text);
}

.ct-setup-retry {
    align-self: center;
    margin-bottom: auto;
}

/* ---------- Seat picker ---------- */

.ct-picker .modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-picker-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ct-picker-option {
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid var(--ct-panel-line);
    background: var(--ct-panel);
    color: var(--hhh-text);
    font-size: 14px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-picker-option.ct-picker-hero {
    border-color: #eab308;
    color: #eab308;
    font-weight: 700;
}

.ct-picker-form {
    display: flex;
    gap: 8px;
}

.ct-picker-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--ct-panel-line);
    background: var(--ct-panel);
    color: var(--hhh-text);
    font-size: 14px;
}

.ct-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ct-picker-actions .btn-secondary,
.ct-picker-form .btn-primary {
    padding: 8px 14px;
}

.ct-picker-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 40vh;
    overflow-y: auto;
}

.ct-picker-suggestions[hidden] {
    display: none;
}

.ct-picker-suggestions .ct-picker-option {
    text-align: left;
}

.ct-picker-hint {
    opacity: 0.7;
    font-weight: 400;
}

.ct-picker-prompt {
    margin: 0;
    font-size: 13px;
    color: var(--hhh-text);
}

/* A pending roster request disables every picker control except Close */
.ct-picker .modal-body button:disabled,
.ct-picker-input:disabled {
    opacity: 0.45;
    cursor: default;
}

.ct-picker-close {
    align-self: flex-end;
}

/* ---------- Landscape phones: replay.css's landscape table ---------- */

@media (orientation: landscape) and (max-height: 500px) {
    .ct-table {
        height: clamp(220px, 58vh, 320px);
    }
    .ct-felt {
        height: clamp(160px, 50vh, 280px);
    }
    /* replay.css's landscape table center: the pot beside the board */
    .ct-center { flex-direction: row; gap: 8px; }
    .ct-board { gap: 3px; min-height: 40px; }
    .ct-board .community-card { width: 34px; height: 40px; font-size: 15px; }
    .ct-pot { padding: 4px 8px; font-size: 11px; border-radius: 10px; }
    .position-btn.ct-seat,
    .ct-setup-seat,
    .ct-dealer,
    .ct-stage .ct-dealer {
        min-height: 40px;
        padding: 2px 4px;
    }
    .ct-seat-name { font-size: 12px; }
    .ct-setup-bar { padding-top: 4px; }
    .ct-setup-footer { padding-bottom: 6px; }
}

/* ---------- Portrait phones: replay.css's upright table ----------
 * Keyed to .ct-portrait, which the same viewport test that picks the
 * portrait layout sets, so the sizes and the positions always agree. */

.ct-table.ct-portrait {
    --ct-seat-w: clamp(70px, 20vw, 95px);
    height: 100%;
    min-height: 280px;
}

.ct-table.ct-portrait .ct-felt {
    width: clamp(200px, 62vw, 280px);
    height: clamp(280px, 48vh, 400px);
    border-radius: clamp(90px, 28vw, 140px);
}

/* replay.css's narrower board for the upright table */
.ct-table.ct-portrait .ct-board { gap: 3px; min-height: 44px; }
.ct-table.ct-portrait .ct-board .community-card { width: 32px; height: 44px; font-size: 15px; }
.ct-table.ct-portrait .ct-pot { padding: 4px 10px; font-size: 12px; }

.ct-table.ct-portrait .position-btn.ct-seat,
.ct-table.ct-portrait .ct-dealer {
    min-height: 48px;
    padding: 4px 2px;
}

.ct-stage .ct-table.ct-portrait .ct-dealer {
    min-height: 44px;
}

.ct-table.ct-portrait .ct-setup-seat {
    padding: 6px 3px;
}

.ct-table.ct-portrait .ct-seat-name { font-size: 12px; letter-spacing: 0; }
.ct-table.ct-portrait .ct-seat-stack { font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
    .position-btn.ct-seat { transition: none; }
}