/* Word Hold'em styles — built on the site design tokens in mainStyle.css */

.status-banner {
    text-align: center;
    color: var(--fgColor-muted);
    font-size: 0.95rem;
    min-height: 1.4em;
    margin: 4px 0 16px;
}

/* --- the table ---------------------------------------------------------- */
#table-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto 20px;
}

#poker-table {
    position: relative;
    width: min(680px, 92vw);
    aspect-ratio: 16 / 11;
    border-radius: 50% / 50%;
    background:
        radial-gradient(ellipse at center, #2e7d52 0%, #1f5d3c 70%, #184a30 100%);
    border: 10px solid #5b3a1f;
    box-shadow: 0 10px 30px var(--shadowColor), inset 0 0 40px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
    #poker-table {
        background: radial-gradient(ellipse at center, #285f44 0%, #1a4a33 70%, #123524 100%);
        border-color: #3d2814;
    }
}

#table-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 70%;
}

#pot-display {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    min-height: 1.2em;
    margin-bottom: 8px;
}

#community {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 56px;
}

#board-msg {
    margin-top: 10px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    font-size: 0.95rem;
}

/* --- seats -------------------------------------------------------------- */
#seats { position: absolute; inset: 0; }

.seat {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 96px;
    padding: 6px 8px;
    background: var(--bgColor-elevated);
    border: 1px solid var(--borderColor-default);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadowColor);
    text-align: center;
    font-size: 0.78rem;
    transition: box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
}

.seat.acting {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 3px var(--accent), 0 2px 10px var(--shadowColor);
}

.seat.you { border-color: var(--accent-strong); }
.seat.folded { opacity: 0.5; }
.seat.sitting-out { opacity: 0.6; }

.seat-name {
    font-weight: 700;
    color: var(--fgColor-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.seat-name--editable { cursor: pointer; }
.seat-name--editable:hover { text-decoration: underline; }
.name-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.name-error { color: #d33; font-size: 0.85rem; margin-top: 6px; }
.name-error.hidden { display: none; }
.seat-chips { color: var(--fgColor-muted); font-size: 0.72rem; }
.seat-bet {
    color: var(--fgColor-accent);
    font-size: 0.72rem;
    font-weight: 600;
}
.seat-tag {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fgColor-subtle);
}

.dealer-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #fff;
    color: #1f2328;
    font-weight: 800;
    font-size: 0.7rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.seat-hole { display: flex; gap: 3px; justify-content: center; margin-top: 4px; }

/* --- CPU management ----------------------------------------------------- */
/* Placeholder seat that holds the "+ add CPU" control between rounds. */
.seat-add {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
    padding: 0;
}
.seat-add.open {
    background: var(--bgColor-elevated);
    border-style: solid;
}
.cpu-add-plus {
    width: 100%;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--fgColor-muted);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border-radius: 10px;
    transition: color 0.15s, background 0.15s;
}
.cpu-add-plus:hover {
    color: var(--fgColor-accent);
    background: var(--bgColor-muted, rgba(127, 127, 127, 0.12));
}
.cpu-add-menu { padding: 6px; }
.cpu-add-title {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fgColor-subtle);
    margin-bottom: 4px;
}
.cpu-diff {
    display: block;
    width: 100%;
    margin: 3px 0;
    padding: 4px 6px;
    border: 1px solid var(--borderColor-default);
    border-radius: 6px;
    background: var(--bgColor-default, transparent);
    color: var(--fgColor-default);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.cpu-diff:hover {
    border-color: var(--accent-strong);
    color: var(--fgColor-accent);
}
/* "×" to remove a CPU, mirrored from the dealer button's top corner. */
.cpu-remove {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--danger, #b62324);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
.cpu-remove:hover { filter: brightness(1.15); }

/* --- tiles -------------------------------------------------------------- */
.tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    background: linear-gradient(180deg, #fdf6e3 0%, #f2e6c5 100%);
    color: #3a2c12;
    border-radius: 6px;
    border: 1px solid #d8c79a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    font-weight: 800;
    font-family: var(--serif);
}

.tile .tile-letter { font-size: 1.25rem; line-height: 1; }
.tile .tile-pts {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.8;
}
.tile.blank { color: #8a6d2f; }

.tile.big { width: 54px; height: 60px; }
.tile.big .tile-letter { font-size: 1.7rem; }
.tile.big .tile-pts { font-size: 0.75rem; }

.tile.mini {
    width: 18px;
    height: 22px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.tile.mini .tile-letter { font-size: 0.7rem; }
.tile.mini .tile-pts { display: none; }
.tile.mini.back {
    background: repeating-linear-gradient(45deg, #8a3b3b, #8a3b3b 4px, #a14747 4px, #a14747 8px);
    border-color: #6f2f2f;
}
.tile.mini.back .tile-letter { display: none; }

/* --- showdown panel (everyone's best word) ------------------------------ */
#showdown {
    max-width: min(860px, 96vw);
    margin: 0 auto 20px;
    padding: 14px 16px;
    border: 1px solid var(--borderColor-default);
    border-radius: 12px;
    background: var(--bgColor-elevated);
    box-shadow: 0 4px 16px var(--shadowColor);
}
.sd-title {
    text-align: center;
    font-weight: 700;
    color: var(--fgColor-default);
    margin-bottom: 12px;
}
.sd-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-top: 1px solid var(--borderColor-muted);
    flex-wrap: wrap;
}
.sd-row:first-of-type { border-top: none; }
.sd-winner {
    background: var(--bgColor-neutral-muted);
    border-radius: 8px;
}
.sd-name {
    flex: 0 0 110px;
    font-weight: 600;
    color: var(--fgColor-default);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sd-badge {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--accent-strong);
    padding: 1px 5px;
    border-radius: 4px;
}
.sd-play { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Keep the letters of a single word together; only wrap between words. */
.sd-play .play-word { flex-wrap: nowrap; }

/* Compact tiles for the showdown table so long words fit on one line. */
.tile.sd { width: 28px; height: 32px; border-radius: 4px; }
.tile.sd .tile-letter { font-size: 0.9rem; }
.tile.sd .tile-pts { font-size: 0.5rem; right: 2px; bottom: 1px; }
.sd-noword { color: var(--fgColor-subtle); font-style: italic; }

/* Folded players still appear in showdown so their word is visible, but they
   didn't contend for the pot — dim the row and tag the name with "(fold)". */
.sd-folded { opacity: 0.55; }
.sd-fold-mark {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--fgColor-muted);
    font-style: italic;
}
.sd-score {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--fgColor-accent);
}

/* --- start button ------------------------------------------------------- */
#start-area { text-align: center; margin: 0 0 20px; }
#btn-start { padding: 12px 28px; font-size: 1.05rem; }

/* --- your area ---------------------------------------------------------- */
#your-area { text-align: center; }

.hole-label {
    font-size: 0.8rem;
    color: var(--fgColor-muted);
    margin-bottom: 6px;
}
.hole-tiles {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Slim divider between your hole tiles and the shared community tiles. */
.hole-sep {
    align-self: stretch;
    width: 1px;
    margin: 2px 6px;
    background: var(--borderColor-default);
    opacity: 0.7;
}

.best-score {
    color: var(--fgColor-accent);
    font-weight: 700;
    margin-left: 6px;
}

/* Words spelled out in tiles (showdown reveal + live preview). */
.play-word { display: inline-flex; gap: 4px; }
.play-plus {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--fgColor-muted);
    margin: 0 2px;
}
/* River tiles in the word are distinguished elsewhere; no colored border. */
.tile.from-river { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
/* River tiles consumed by your word, shaded darker in the community row. */
.tile.used {
    filter: brightness(0.62) saturate(0.6);
    opacity: 0.9;
}

/* --- word composition --------------------------------------------------- */
#word-zone {
    position: relative;
    max-width: min(560px, 94vw);
    margin: 0 auto 14px;
    padding: 12px 14px;
    border: 1px solid var(--borderColor-default);
    border-radius: 12px;
    background: var(--bgColor-elevated);
    box-shadow: 0 2px 10px var(--shadowColor);
}
#word-kept {
    font-size: 0.9rem;
    color: var(--fgColor-muted);
    margin-bottom: 10px;
}
#word-kept .best-none { color: var(--fgColor-subtle); font-style: italic; }

/* The whole tile area is the input surface: tap it to type, letters appear as
   tiles. The real <input> is an invisible overlay that captures keystrokes. */
#word-block {
    position: relative;
    margin-bottom: 6px;
    cursor: text;
}
#word-preview {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 80px;
    align-items: center;
    padding: 8px 10px;
    border: 2px dashed var(--borderColor-default);
    border-radius: 10px;
    background: var(--bgColor-muted);
    transition: border-color 0.15s, box-shadow 0.15s;
}
#word-zone.focused #word-preview {
    border-style: solid;
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 3px var(--accent);
}
/* Faint prompt shown when nothing is typed yet. */
.word-placeholder {
    color: var(--fgColor-subtle);
    font-style: italic;
    font-size: 0.95rem;
}
/* Blinking caret after the last tile while the block is focused. */
.word-caret {
    display: inline-block;
    width: 2px;
    height: 40px;
    background: var(--accent-strong);
    border-radius: 1px;
    animation: word-caret-blink 1s step-end infinite;
}
@keyframes word-caret-blink { 50% { opacity: 0; } }
/* Transparent overlay across the tile block — keeps focus/keyboard but shows
   nothing itself, so the tiles are the only visible text. */
#word-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font-size: 16px; /* avoid iOS zoom-on-focus */
    text-align: center;
    cursor: text;
}
#word-input:focus { outline: none; }
#word-feedback {
    min-height: 1.8em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fgColor-muted);
    margin-bottom: 10px;
}
#word-feedback.ok { color: var(--accent-strong, #2da44e); }
#word-feedback.bad { color: #c0564f; }

#word-entry {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#btn-submit-word:disabled { opacity: 0.5; cursor: not-allowed; }

/* A typed letter the player doesn't actually hold. */
.tile.missing {
    background: repeating-linear-gradient(45deg, #e9d7d7, #e9d7d7 4px, #f2e2e2 4px, #f2e2e2 8px);
    color: #9a5a5a;
    opacity: 0.85;
}
/* Showdown countdown to lock in a word. */
#submit-timer {
    max-width: min(360px, 80vw);
    margin: 0 auto 14px;
}
#submit-timer-text {
    text-align: center;
    font-weight: 700;
    color: var(--fgColor-accent);
    margin-bottom: 6px;
}
#submit-timer-track {
    height: 8px;
    background: var(--bgColor-neutral-muted);
    border-radius: 4px;
    overflow: hidden;
}
#submit-timer-bar {
    height: 100%;
    width: 100%;
    background: var(--accent-strong);
    transition: width 0.5s linear;
}

#action-bar {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* Pin to the bottom of the viewport so the actions are always in reach
       without ever covering the community tiles in the middle of the board. */
    position: sticky;
    bottom: 30px;
    z-index: 30;
    margin: 16px -16px 0;
    padding: 14px 16px;
    background: var(--bgColor-default);
    border-top: 2px solid var(--borderColor-default);
    box-shadow: 0 -6px 18px var(--shadowColor);
}

.act-btn {
    padding: 14px 30px;
    border-radius: 10px;
    border: 2px solid var(--borderColor-default);
    background: var(--bgColor-elevated);
    color: var(--fgColor-default);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--shadowColor);
    transition: background 0.15s, transform 0.05s, filter 0.15s;
}
.act-btn:hover { filter: brightness(1.08); }
.act-btn:active { transform: translateY(1px); }
/* Bold, color-coded actions so the choice is unmistakable at a glance. */
.act-btn.fold {
    background: #c0564f;
    border-color: #c0564f;
    color: #fff;
}
.act-btn.call {
    background: #2f6fde;
    border-color: #2f6fde;
    color: #fff;
}
.act-btn.raise {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
}

#raise-group { display: flex; align-items: center; gap: 8px; }
#raise-slider { width: 140px; accent-color: var(--accent-strong); }
#raise-amount {
    min-width: 3ch;
    font-weight: 700;
    color: var(--fgColor-default);
}

/* Lives inside #action-bar — full-width row beneath the buttons so it's clear
   the countdown belongs to "your turn to act". */
#turn-timer {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 4px;
}
#turn-timer-text {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fgColor-muted);
    letter-spacing: 0.04em;
}
#turn-timer-bar {
    height: 6px;
    width: 100%;
    background: var(--accent-strong);
    border-radius: 3px;
    transition: width 0.5s linear, background 0.2s;
}
/* Heat up the bar as time runs out. */
#turn-timer.warn #turn-timer-bar { background: #d4a72c; }
#turn-timer.warn #turn-timer-text { color: #d4a72c; }
#turn-timer.danger #turn-timer-bar { background: #c0564f; }
#turn-timer.danger #turn-timer-text { color: #c0564f; }

#how-to-play {
    margin-top: 28px;
    color: var(--fgColor-muted);
    font-size: 0.9rem;
}
#how-to-play summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--fgColor-default);
}

/* --- letter values reference ------------------------------------------- */
#letter-values {
    margin-top: 16px;
    color: var(--fgColor-muted);
    font-size: 0.9rem;
}
#letter-values summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--fgColor-default);
}
#letter-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.letter-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    border: 1px solid var(--borderColor-muted);
    border-radius: 8px;
    background: var(--bgColor-muted);
}
.letter-count { font-weight: 700; color: var(--fgColor-default); }

/* --- overlay (name prompt) --------------------------------------------- */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.overlay.hidden { display: none; }
.overlay-card {
    background: var(--bgColor-default);
    border: 1px solid var(--borderColor-default);
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 12px 40px var(--shadowColor);
}
.overlay-card h2 { margin-top: 0; }
.overlay-card input {
    width: 100%;
    padding: 10px 12px;
    margin: 12px 0;
    border-radius: 8px;
    border: 1px solid var(--borderColor-default);
    background: var(--bgColor-muted);
    color: var(--fgColor-default);
    font-size: 1rem;
    box-sizing: border-box;
}

.hidden { display: none !important; }

/* On phones and tablets a full table (up to 10 players) crowds the oval, so we
   drop the ellipse layout and lay players out as a horizontally-scrollable
   carousel strip pinned to the top of the table. The seat cards' inline
   left/top (set by seatPosition) are ignored once the seats become statically
   positioned, so no JS layout change is needed here. */
@media (max-width: 768px) {
    #poker-table {
        /* Squarer corners so the top strip isn't clipped, and a min-height so
           there's room for the strip plus the centered pot/community. */
        aspect-ratio: auto;
        min-height: 320px;
        border-radius: 18px;
    }

    #seats {
        inset: auto;
        top: 8px;
        left: 8px;
        right: 8px;
        display: flex;
        gap: 8px;
        padding: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 12px;
        scrollbar-width: thin;
    }
    #seats::-webkit-scrollbar { height: 5px; }
    #seats::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }

    .seat {
        /* relative (not static) so the absolutely-positioned dealer/remove
           badges anchor to the card and scroll with it; the inline left/top set
           by seatPosition() are neutralized so they don't offset the card. */
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: none;
        flex: 0 0 auto;
        scroll-snap-align: center;
        width: 74px;
        font-size: 0.68rem;
        padding: 4px 5px;
    }

    #table-center {
        /* Drop below the carousel strip rather than sitting at the very middle. */
        top: 58%;
    }

    /* The dealer/remove badges normally overhang the seat's top corners, but the
       carousel strip clips overflow — tuck them just inside the card instead. */
    .seat { padding-top: 12px; }
    .dealer-btn { top: 1px; right: 1px; width: 16px; height: 16px; line-height: 16px; font-size: 0.6rem; }
    .cpu-remove { top: 1px; left: 1px; width: 16px; height: 16px; line-height: 14px; font-size: 0.72rem; }

    .tile { width: 32px; height: 36px; }
    .tile .tile-letter { font-size: 1rem; }
    .tile.big { width: 44px; height: 50px; }
}

.admin-link {
    display: block;
    text-align: center;
    margin: 2rem 0 1rem;
    font-size: 0.8rem;
    color: var(--fgColor-muted, #8b949e);
    text-decoration: none;
    opacity: 0.7;
}
.admin-link:hover { opacity: 1; text-decoration: underline; }