/* ---------------------------------------------------------------------------
   Chain Reaction - the game show page
   Loaded after chainreaction.css, which keeps the palette, the buttons, the
   panels and the dialog. This file adds the lobby, the room, the scoreboard,
   the show board overrides and the chat.
   --------------------------------------------------------------------------- */

.show-page
{
    max-width: 1200px;
}

/* A hidden attribute always wins over a display rule below. This has to cover
   the whole page, not just .show: the peek notice sits above <main>. */
[hidden]
{
    display: none !important;
}

/* --- the lobby ----------------------------------------------------------- */

.lobby
{
    display: block;
}

.lobby__grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 16px;
    align-items: start;
}

.lobby__card
{
    padding: 18px 18px 16px;
}

.lobby__card h2
{
    margin: 0 0 4px;
    font-size: 1.05rem;
}

.lobby__rooms
{
    grid-column: 1 / -1;
    padding: 16px 18px 14px;
}

.hint
{
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.85rem;
}

.form
{
    display: grid;
    gap: 8px;
}

/* Direct children only: the mode cards are <label>s too, and they must not
   inherit the small uppercase field-label treatment. */
.form > label,
.modes legend
{
    padding: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.form input[type="text"],
.form input[type="number"],
.form select,
.guess input,
.wager__input,
.chat__form input
{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0b1220;
    color: var(--text);
    font: inherit;
}

.form input:focus,
.form select:focus,
.guess input:focus,
.wager__input:focus,
.chat__form input:focus
{
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 1px;
    border-color: var(--accent);
}

.form input:disabled,
.guess input:disabled
{
    opacity: 0.6;
    cursor: not-allowed;
}

.form .button
{
    margin-top: 4px;
    justify-self: start;
}

/* --- modes --------------------------------------------------------------- */

.modes
{
    display: grid;
    gap: 8px;
    margin: 4px 0 2px;
    padding: 0;
    border: 0;
}

.mode
{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px 10px;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(11, 18, 32, 0.6);
    cursor: pointer;
}

.mode:hover
{
    border-color: rgba(56, 189, 248, 0.45);
}

.mode input
{
    grid-row: 1 / span 2;
    margin: 0;
    accent-color: var(--accent);
}

.mode:has(input:checked)
{
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.1);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45);
}

.mode__name
{
    grid-column: 2;
    font-weight: 700;
}

.mode__note
{
    grid-column: 2;
    color: var(--muted);
    font-size: 0.79rem;
}

/* --- open rooms ---------------------------------------------------------- */

.rooms
{
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rooms__item
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(11, 18, 32, 0.55);
}

.rooms__id
{
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.rooms__id strong
{
    font-size: 1.05rem;
    letter-spacing: 0.18em;
}

.rooms__meta
{
    color: var(--muted);
    font-size: 0.78rem;
}

/* --- status lines -------------------------------------------------------- */

.status--warn
{
    color: var(--red);
    font-weight: 600;
}

.status--good
{
    color: var(--green);
}

/* --- the room ------------------------------------------------------------ */

.room
{
    display: grid;
    gap: 14px;
    max-width: 960px;
    margin: 0 auto;
}

.room__bar
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.room__id
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
}

.room__label
{
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.room__code
{
    font-size: 1.35rem;
    letter-spacing: 0.22em;
}

.room__tools
{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill
{
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    color: #bae6fd;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pill--quiet
{
    border-color: var(--line);
    background: rgba(19, 29, 49, 0.85);
    color: var(--muted);
}

/* --- scoreboard ---------------------------------------------------------- */

.scoreboard
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.seat
{
    --seat: var(--muted);
    padding: 14px 16px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(19, 29, 49, 0.92), rgba(15, 23, 40, 0.94));
    box-shadow: var(--shadow);
}

.seat--blue
{
    --seat: var(--accent);
}

.seat--gold
{
    --seat: var(--gold);
}

.seat.is-live
{
    border-color: var(--seat);
    box-shadow: 0 0 0 1px var(--seat), 0 14px 30px rgba(0, 0, 0, 0.35);
}

.seat__head
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.seat__name
{
    color: var(--seat);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.seat__words
{
    color: var(--muted);
    font-size: 0.74rem;
}

.seat__bank
{
    margin: 2px 0 6px;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.seat__badges
{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

.seat__badges:empty
{
    display: none;
}

.seat__players
{
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seat__player
{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
}

.seat__empty
{
    color: var(--muted);
    font-size: 0.8rem;
}

.seat__host
{
    margin-left: auto;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dot
{
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot-b);
}

.dot.is-on
{
    background: var(--green);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

/* --- stage --------------------------------------------------------------- */

.stage
{
    display: grid;
    gap: 12px;
}

.turnbar
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(19, 29, 49, 0.95), rgba(15, 23, 40, 0.95));
}

.turnbar:empty
{
    display: none;
}

.turnbar--blue
{
    border-left-color: var(--accent);
}

.turnbar--gold
{
    border-left-color: var(--gold);
}

.turnbar__team
{
    flex: none;
    padding: 3px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.turnbar--blue .turnbar__team
{
    color: var(--accent);
}

.turnbar--gold .turnbar__team
{
    color: var(--gold);
}

.turnbar__text
{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.turnbar__text strong
{
    font-size: 1rem;
}

.turnbar__text span
{
    color: var(--muted);
    font-size: 0.82rem;
}

.clock
{
    margin-left: auto;
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.clock--quiet
{
    display: none;
}

.clock.is-low
{
    color: var(--red);
}

.clock.is-out
{
    color: var(--muted);
}

/* --- the chain on the show board ----------------------------------------- */

.show .chain
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
}

.chain__word
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(11, 18, 32, 0.62);
    color: var(--text);
    font: inherit;
    text-align: left;
}

button.chain__word
{
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

button.chain__word:hover
{
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.1);
    transform: translateY(-1px);
}

button.chain__word:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.chain__word--anchor
{
    border-style: dashed;
    background: rgba(19, 29, 49, 0.5);
}

.chain__word--keyword
{
    border-style: solid;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.08);
}

.chain__word.is-solved
{
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.1);
}

.chain__word.is-blue
{
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(56, 189, 248, 0.12);
}

.chain__word.is-gold
{
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.12);
}

.chain__word.is-dead
{
    border-color: rgba(251, 113, 133, 0.35);
    opacity: 0.65;
}

.chain__word.is-live
{
    box-shadow: inset 0 0 0 1px var(--accent);
}

.chain__word.is-passed
{
    opacity: 0.5;
}

.chain__letters
{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* One letter slot. Blank slots keep their height so a hidden word still reads
   as a word rather than a rule. */
.chain__letter
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1em;
    /* Blank slots have no text, so they need height of their own or the row
       reads as a single dashed line instead of a word. */
    min-height: 1.45em;
    padding: 0 0.1em;
    border-bottom: 2px solid var(--line);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.chain__letter.is-shown
{
    border-bottom-color: var(--muted);
}

.is-solved .chain__letter
{
    color: var(--green);
    border-bottom-color: rgba(52, 211, 153, 0.5);
}

.is-dead .chain__letter
{
    color: var(--red);
    border-bottom-color: rgba(251, 113, 133, 0.5);
    text-decoration: line-through;
}

.chain__tag
{
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.chain__tag--blue
{
    border-color: rgba(56, 189, 248, 0.5);
    color: var(--accent);
}

.chain__tag--gold
{
    border-color: rgba(251, 191, 36, 0.5);
    color: var(--gold);
}

.chain__tag--dead
{
    border-color: rgba(251, 113, 133, 0.45);
    color: var(--red);
}

/* --- controls ------------------------------------------------------------ */

.controls
{
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 23, 40, 0.9);
}

.controls__hint
{
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.controls__meta
{
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.controls__row
{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.guess
{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.guess input
{
    flex: 1 1 200px;
    width: auto;
}

.wager
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wager__side
{
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.wager--blue .wager__side
{
    color: var(--accent);
}

.wager--gold .wager__side
{
    color: var(--gold);
}

.wager__bank
{
    color: var(--muted);
    font-size: 0.82rem;
}

.wager__input
{
    width: 110px;
}

/* --- result, log, chat --------------------------------------------------- */

.room__side
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: start;
}

.result h2
{
    color: var(--green);
}

.result__line
{
    margin: 0 0 12px;
    font-size: 0.92rem;
}

.result__actions
{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.log
{
    display: grid;
    gap: 6px;
    max-height: 250px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    font-size: 0.85rem;
}

.log:empty::after
{
    content: 'Nothing called yet.';
    color: var(--muted);
    font-size: 0.82rem;
}

.log__item
{
    padding-left: 10px;
    border-left: 2px solid var(--line);
    color: var(--muted);
}

.log__item--blue
{
    border-left-color: rgba(56, 189, 248, 0.55);
    color: #cfe8f7;
}

.log__item--gold
{
    border-left-color: rgba(251, 191, 36, 0.55);
    color: #f7e8c2;
}

.chat__list
{
    display: grid;
    gap: 6px;
    max-height: 220px;
    margin: 0 0 10px;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    font-size: 0.85rem;
}

.chat__list:empty::after
{
    content: 'No messages yet.';
    color: var(--muted);
    font-size: 0.82rem;
}

.chat__item
{
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.chat__who
{
    flex: none;
    font-weight: 700;
}

.chat__item--blue .chat__who
{
    color: var(--accent);
}

.chat__item--gold .chat__who
{
    color: var(--gold);
}

.chat__body
{
    min-width: 0;
    overflow-wrap: anywhere;
}

.chat__form
{
    display: flex;
    gap: 8px;
}

.chat__form input
{
    flex: 1 1 auto;
    width: auto;
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 700px)
{
    .scoreboard
    {
        grid-template-columns: 1fr;
    }

    .seat__bank
    {
        font-size: 1.55rem;
    }

    .lobby__rooms
    {
        grid-column: auto;
    }

    .turnbar
    {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .turnbar__text
    {
        flex: 1 1 100%;
        order: 3;
    }

    .clock
    {
        margin-left: auto;
    }

    .chain__letter
    {
        min-width: 1em;
    }
}

@media (max-width: 430px)
{
    .room__code
    {
        font-size: 1.15rem;
    }

    .chain__word
    {
        padding: 9px 11px;
    }

    .chain__tag
    {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce)
{
    button.chain__word:hover
    {
        transform: none;
    }
}