/* ---------------------------------------------------------------------------
   Chain Reaction V2
   One stylesheet: page frame, the chain board, the result card and the
   leaderboard. The palette matches /games/ so the bar and the page agree.
   --------------------------------------------------------------------------- */

:root
{
    --bg: #070b14;
    --panel: #0f1728;
    --panel-2: #131d31;
    --line: #24314a;
    --text: #e6edf7;
    --muted: #93a3bd;
    --dot-a: #93a3bd;
    --dot-b: #64748f;
    --accent: #38bdf8;
    --accent-2: #22d3ee;
    --gold: #fbbf24;
    --green: #34d399;
    --red: #fb7185;
    --radius: 16px;
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    color-scheme: dark;
}

body
{
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font);
    line-height: 1.5;
    background-color: var(--bg);
    background-image:
        radial-gradient(1000px 520px at 12% -10%, rgba(56, 189, 248, 0.14), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgba(34, 211, 238, 0.09), transparent 55%),
        radial-gradient(800px 600px at 50% 110%, rgba(251, 191, 36, 0.06), transparent 60%);
    background-attachment: fixed;
}

a
{
    color: var(--accent);
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

.skip-link
{
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--accent);
    color: #04121f;
    font-weight: 700;
    border-radius: 0 0 10px 0;
}

.skip-link:focus
{
    left: 0;
}

.visually-hidden
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.page
{
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}

/* --- hero ---------------------------------------------------------------- */

.hero
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 4px 0 22px;
}

.hero__text
{
    min-width: 0;
}

.eyebrow
{
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero h1
{
    margin: 0;
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.tagline
{
    margin: 8px 0 0;
    color: var(--muted);
    max-width: 46ch;
}

.hero__actions
{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 0;
}

.hero__side
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.verified
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.1);
    color: #a7f3d0;
    font-size: 0.78rem;
    font-weight: 600;
}

.verified__check
{
    font-weight: 900;
}

.hud
{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hud__item
{
    min-width: 84px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    text-align: center;
}

.hud__label
{
    display: block;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hud__value
{
    display: block;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.hud__strikes
{
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    min-height: 1.65rem;
}

.strike
{
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(251, 113, 133, 0.5);
    background: rgba(251, 113, 133, 0.12);
}

.strike--used
{
    border-color: var(--red);
    background: var(--red);
    box-shadow: 0 0 8px rgba(251, 113, 133, 0.55);
}

/* --- notice -------------------------------------------------------------- */

.notice
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.08);
    color: #fde68a;
    font-size: 0.9rem;
}

.notice strong
{
    color: #fef3c7;
}

.notice--info
{
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.08);
    color: #bae6fd;
}

.notice--info strong
{
    color: #e0f2fe;
}

/* --- layout -------------------------------------------------------------- */

.layout
{
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 1fr);
    gap: 18px;
    align-items: start;
}

/* --- buttons ------------------------------------------------------------- */

.button
{
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.button:disabled
{
    opacity: 0.55;
    cursor: not-allowed;
}

.button--primary
{
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #04121f;
}

.button--primary:hover:not(:disabled)
{
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3);
}

.button--ghost
{
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
}

.button--ghost:hover:not(:disabled)
{
    border-color: var(--accent);
    color: var(--accent);
}

/* --- the board ----------------------------------------------------------- */

.board-card,
.panel
{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(19, 29, 49, 0.9), rgba(15, 23, 40, 0.94));
    box-shadow: var(--shadow);
}

.board-card
{
    padding: 18px 18px 16px;
}

.board-card__head
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.board-card__head h2,
.panel h2
{
    margin: 0;
    font-size: 1.05rem;
}

.board-card__hint
{
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.board-card__badge
{
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.14);
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.board
{
    padding: 14px 0 6px;
}

.chain
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chain__row
{
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 7px 0;
}

/* The vertical line between neighbouring words. */
.chain__row + .chain__row::before
{
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 2px;
    height: 14px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.55), rgba(56, 189, 248, 0.12));
    transform: translateX(-50%);
}

.word
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 170px;
    min-height: 46px;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.word--anchor
{
    border-color: rgba(56, 189, 248, 0.5);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.04));
    color: #bae6fd;
}

.word--solved
{
    border-color: rgba(52, 211, 153, 0.55);
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.12), rgba(52, 211, 153, 0.03));
    color: #bbf7d0;
}

.word--given
{
    border-color: rgba(251, 191, 36, 0.45);
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02));
    color: #fde68a;
}

/* A word nobody has called yet. Dashed, because it is still blank: the player
   calls it by clicking it (or tabbing into it) and the first letter is free. */
.word--uncalled
{
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.45);
    cursor: pointer;
}

.word--uncalled:hover
{
    border-color: rgba(56, 189, 248, 0.55);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.08), rgba(56, 189, 248, 0.02));
}

.word__letter
{
    min-width: 0.8ch;
    text-align: center;
}

/* Missing letters are drawn as a filled circle rather than a bullet glyph, so
   the dot is the same size in every font and sits dead centre in the pill. The
   text node stays for screen readers, only its glyph is collapsed. Neighbouring
   dots alternate between two close shades so a run can be counted at a glance;
   the alternation follows the letter position, so revealing a letter does not
   reshuffle the shades. */
.word__letter--hidden
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0.78rem;
    color: transparent;
    font-size: 0;
}

.word__letter--hidden::after
{
    content: "";
    display: block;
    width: 0.66rem;
    height: 0.66rem;
    border-radius: 50%;
    background: var(--dot-a);
}

.word__letter--hidden:nth-child(even)::after
{
    background: var(--dot-b);
}

.slot
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 360px;
}

.slot__form
{
    display: flex;
    gap: 6px;
}

.slot__input
{
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0a1220;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
}

.slot__input:focus
{
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

.slot__input::placeholder
{
    color: #5b6b85;
}

.slot__reveal
{
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.slot__reveal:hover
{
    border-color: var(--gold);
    color: var(--gold);
}

.slot__tag
{
    align-self: center;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.slot__tag--points
{
    color: var(--green);
}

.slot__tag--given
{
    color: var(--gold);
}

.chain__row--good .word
{
    animation: flash-good 0.7s ease;
}

.chain__row--bad .word
{
    animation: flash-bad 0.5s ease;
}

@keyframes flash-good
{
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.65); }
    100% { box-shadow: 0 0 0 15px rgba(52, 211, 153, 0); }
}

@keyframes flash-bad
{
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.links
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

.links__item
{
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.74rem;
}

.streak-banner
{
    display: grid;
    gap: 2px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 12px;
    background: rgba(52, 211, 153, 0.12);
    animation: streak-in 240ms ease-out;
}

.streak-banner[hidden]
{
    display: none;
}

.streak-banner__title
{
    margin: 0;
    color: #a7f3d0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.streak-banner__words
{
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    word-spacing: 0.1em;
}

@keyframes streak-in
{
    from
    {
        opacity: 0;
        transform: translateY(-4px);
    }

    to
    {
        opacity: 1;
        transform: none;
    }
}

.board-card__actions
{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.status
{
    min-height: 1.3em;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

/* --- side panels --------------------------------------------------------- */

.side
{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel
{
    padding: 16px 16px 14px;
}

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

.panel__hint
{
    color: var(--muted);
    font-size: 0.76rem;
}

.result
{
    border-color: rgba(52, 211, 153, 0.35);
}

.result h2
{
    color: #a7f3d0;
}

.result__score
{
    margin: 6px 0 2px;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.result__score span
{
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.result__note
{
    margin: 6px 0 12px;
    color: var(--muted);
    font-size: 0.86rem;
}

.score-form
{
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 10px;
}

.score-form label
{
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.score-form input
{
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0a1220;
    color: var(--text);
    font: inherit;
}

.score-form input:focus
{
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

.score-form input[readonly]
{
    opacity: 0.75;
}

.score-form__note
{
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.form-status
{
    min-height: 1.2em;
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

/* --- leaderboard --------------------------------------------------------- */

.table-wrap
{
    overflow-x: auto;
}

.scores
{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.scores th
{
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.scores td
{
    padding: 7px 8px;
    border-bottom: 1px solid rgba(36, 49, 74, 0.6);
    font-variant-numeric: tabular-nums;
}

.scores td:first-child
{
    width: 2.2rem;
    color: var(--muted);
}

.scores td:nth-child(3)
{
    font-weight: 700;
}

.scores tr:last-child td
{
    border-bottom: 0;
}

.scores__name
{
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scores__check
{
    color: var(--green);
    font-weight: 900;
}

.scores tr.is-you td
{
    background: rgba(56, 189, 248, 0.08);
}

.empty
{
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.footer
{
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

/* --- help dialog --------------------------------------------------------- */

.dialog
{
    width: min(560px, calc(100vw - 32px));
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow);
}

.dialog::backdrop
{
    background: rgba(3, 7, 15, 0.72);
    backdrop-filter: blur(3px);
}

.dialog__title
{
    margin: 0 0 10px;
    font-size: 1.1rem;
}

.rules
{
    margin: 0 0 16px;
    padding-left: 18px;
    color: var(--muted);
    font-size: 0.88rem;
}

.rules li
{
    margin-bottom: 6px;
}

.rules em
{
    color: var(--text);
    font-style: normal;
    font-weight: 600;
}

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

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

@media (max-width: 520px)
{
    .page
    {
        padding: 20px 14px 44px;
    }

    .hero__side
    {
        align-items: flex-start;
        width: 100%;
    }

    .hud
    {
        justify-content: flex-start;
    }

    .board-card
    {
        padding: 14px 12px;
    }

    .word
    {
        min-width: 150px;
    }
}