/* =====================================================================
   The replay dialog — one design, every screen.

   Opened by replay-modal.js from the classroom, the tournament hall and the
   standings alike (Kamal, 2026-08-28).

   BOTH THEMES ARE WRITTEN HERE, together, not left to variables that may not
   exist on the layout a page happens to use — that is how this card came out
   white on a dark screen once already. `body.theme-dark` is set by
   every signed-in layout, the phone's included, and the dialog is a child of
   body, so it always knows which side it is on.

       LIGHT   card #FFFFFF, hairline rgba(28,22,8,0.18)
               header #EEF2FF→#E0E7FF, lettering #1E1B4B      13.2:1
               names #1C1814 on #FFFFFF                       16.4:1
               quiet line #6B6558 on #FFFFFF                   5.3:1
               buttons #312E81 on #E0E7FF  11.4:1, border #A5B4FC 1.9:1 on white

       DARK    card #1A1A2E, hairline rgba(255,255,255,0.1)
               header #16213E→#0F3460, lettering #FFFFFF      16.8:1
               names #FFFFFF on #1A1A2E                       17.4:1
               quiet line rgba(255,255,255,0.65)               9.4:1
               buttons rgba(255,255,255,0.8) on a 10% white wash 11.6:1

   The dark side is the floating chat panel's palette, carried over on Kamal's
   ask; the light side is the school's indigo, the same pair used for the room's
   hint balloon.
   ===================================================================== */

/* The backdrop's own padding is what stands between the card and the edge of a
   phone. It is nearly nothing here, so the board reaches both sides. */
.erp-container {
    padding: 10px !important;
}

.erp-modal {
    /* No padding at all: the header runs edge to edge and the board sits flush
       to the card's sides. Every point of the card is the game. */
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(28, 22, 8, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px -14px rgba(28, 22, 8, 0.45) !important;
    overflow: hidden !important;
}

    .erp-modal .swal2-html-container {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: #1C1814 !important;
        font-size: 1rem;
    }

    /* SweetAlert's title, icon, action and footer slots are all empty here, and
       each one was leaving a band of dead space above or below the board. */
    .erp-modal .swal2-title,
    .erp-modal .swal2-icon,
    .erp-modal .swal2-actions,
    .erp-modal .swal2-footer,
    .erp-modal .swal2-image,
    .erp-modal .swal2-validation-message {
        display: none !important;
    }

body.theme-dark .erp-modal {
    background: #1a1a2e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

    body.theme-dark .erp-modal .swal2-html-container {
        color: #fff !important;
    }

.erp-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    direction: ltr;                 /* a board is read the same way in every language */
}

/* ===== The header: Black, the score, and the way out ===== */
.erp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    line-height: 1.15;
    font-size: 0.78rem;
    color: #6B6558;
}

body.theme-dark .erp-row {
    color: rgba(255, 255, 255, 0.65);
}

.erp-row-top {
    padding: 4px 10px;
    background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
    border-bottom: 1px solid rgba(28, 22, 8, 0.12);
    color: #1E1B4B;
}

body.theme-dark .erp-row-top {
    background: linear-gradient(135deg, #16213e, #0f3460);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* On a desktop the header is also the card's handle — see the drag in
   replay-modal.js. The hand says so, and a held header never selects text. */
@media (min-width: 769px) {
    .erp-row-top {
        cursor: move;
        user-select: none;
    }
}

.erp-row-bottom {
    padding: 4px 10px 5px;
}

.erp-seat {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .erp-seat .erp-name {
        font-weight: 600;
        font-size: 0.85rem;
        color: #1C1814;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .erp-row-top .erp-name { color: #1E1B4B; }

    body.theme-dark .erp-seat .erp-name,
    body.theme-dark .erp-row-top .erp-name { color: #fff; }

    .erp-seat .erp-rating {
        font-size: 0.72rem;
        color: #6B6558;
        flex-shrink: 0;
    }

    body.theme-dark .erp-seat .erp-rating {
        color: rgba(255, 255, 255, 0.65);
    }

.erp-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(28, 22, 8, 0.3);
}

    .erp-dot.w { background: #f8fafc; }
    .erp-dot.b { background: #1e293b; }

    body.theme-dark .erp-dot { border-color: rgba(255, 255, 255, 0.25); }
    body.theme-dark .erp-dot.b { background: #0b1020; }

/* The score keeps the right of the header, beside the way out, rather than
   hanging off the end of Black's name. */
/*  The clock as it stood at the move being looked at, beside the rating it
    belongs to. Tabular figures so it does not jiggle as the game steps, and a
    weight above the rating because it is the part that changes. Ink #1E1B4B on
    the header, #fff in the dark — both the header's own. */
.erp-seat .erp-clock {
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    color: #1E1B4B;
}

body.theme-dark .erp-seat .erp-clock { color: #fff; }

/*  The announcer and the speed, together, one space clear of the seat and a
    wider one clear of the result — they belong to the reading, not to the
    game (Kamal, 2026-08-31). */
/*  The reading controls, in FIXED places: the megaphone, the voice beside it,
    then the speed. The voice only means anything while the announcer is on,
    so it is hidden the rest of the time — hidden, never removed, or the
    speed would slide left and back again every time the megaphone is pressed
    (Kamal, 2026-08-31). Nothing in this row moves while it is used.

    The gaps say what belongs to what: 8 between the megaphone and its voice
    — one pair — and 16 from there to the speed, which is a control of its
    own. */
.erp-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /*  A clear step from the player above them — 14 read as part of the seat,
        with the megaphone crowding the rating and the clock (Kamal,
        2026-08-31). 30 says these belong to the reading, not to the player. */
    margin-inline-start: 30px;
    margin-inline-end: 22px;
}

.erp-tools .erp-speed { margin-inline-start: 8px; }

/*  Out of sight, but not out of the row: the space it holds is what keeps
    everything after it still. */
.erp-tool.erp-hidden {
    visibility: hidden;
    pointer-events: none;
}

.erp-tool {
    border: 1px solid rgba(30, 27, 75, 0.25);
    background: rgba(255, 255, 255, 0.55);
    color: #1E1B4B;         /* on the header's pale indigo, 12.6:1 */
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.78rem;
    line-height: 1.5;
    cursor: pointer;
}

.erp-tool:hover { background: #fff; }

/* Announcing: filled indigo, white on #4f46e5 is 6.3:1 */
.erp-tool.on {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

.erp-speed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.erp-speed-now {
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 26px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.theme-dark .erp-tool {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;            /* on the dark header, 12.1:1 */
}

body.theme-dark .erp-tool:hover { background: rgba(255, 255, 255, 0.22); }
body.theme-dark .erp-tool.on { background: #4f46e5; border-color: #4f46e5; }

/*  A phone has no room for the pair; the arrows below the board are its whole
    set of controls, as before. */
@media (max-width: 768px) {
    .erp-tools { display: none; }
}

.erp-result {
    font-weight: 800;
    color: #1E1B4B;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-inline-start: auto;
}

body.theme-dark .erp-result { color: #fff; }

/* ===== Buttons ===== */
.erp-close,
.erp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #A5B4FC;
    border-radius: 7px;
    background: #E0E7FF;
    color: #312E81;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .erp-close:hover,
    .erp-btn:hover:not(:disabled) {
        background: #C7D2FE;
        border-color: #818CF8;
    }

body.theme-dark .erp-close,
body.theme-dark .erp-btn {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

    body.theme-dark .erp-close:hover,
    body.theme-dark .erp-btn:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

/* The way out: always the last thing on the header, which is the top right
   corner of the board. Red on hover — the one button that ends the reading. */
.erp-close {
    width: 28px;
    height: 26px;
    font-size: 1rem;
    line-height: 1;
}

    .erp-close:hover,
    body.theme-dark .erp-close:hover {
        background: #FEE2E2;
        border-color: #EF4444;
        color: #991B1B;                 /* 7.4:1 on #FEE2E2 */
    }

.erp-btn {
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.95rem;
    line-height: 1;
}

    .erp-btn:disabled {
        opacity: 0.35;
        cursor: default;
    }

.erp-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* First thing in the row now, standing a little apart from the arrows. */
.erp-count {
    font-size: 0.72rem;
    color: #6B6558;
    min-width: 50px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-inline-end: 8px;
}

body.theme-dark .erp-count { color: rgba(255, 255, 255, 0.65); }

/* The board's box. Only its width is written in by the script — the board is
   the site's own, laid out as a CSS grid with a 1:1 aspect ratio, so its height
   follows and there is no pixel arithmetic to go wrong at any page
   magnification. A finger on it moves the game, never the page. */
.erp-board-wrap {
    width: 100%;
    touch-action: none;
}

    /*  dialogs.css caps EVERY board inside a SweetAlert at 340px — right for a
        board sitting beside a form, and exactly what left this one stranded in
        the middle of the card with a strip either side (Kamal, 2026-08-28).
        Lifted here: this card holds nothing but the board, and its width is
        the board's width. */
    .erp-modal .swal2-html-container .erp-board-wrap .elbe-board,
    .erp-board-wrap .elbe-board {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;                /* flush to the card's sides */
        box-shadow: none;
    }

/* =====================================================================
   A phone: nothing on this card may hold a point it is not using.

   The header loses most of its height, the two name lines are as tall as their
   own text, the backdrop's padding drops to almost nothing so the board reaches
   both edges of the screen, and everything that is saved goes to the board —
   see boardSize in replay-modal.js.

   The arrows keep the row Kamal asked for, and since the whole row is theirs
   they are spread across it with real space between them rather than huddled at
   one end.
   ===================================================================== */
@media (max-width: 768px) {
    .erp-container {
        padding: 4px !important;
    }

    .erp-modal {
        border-radius: 12px !important;
    }

    .erp-row-top {
        padding: 3px 8px;
    }

    .erp-row-bottom {
        padding: 3px 8px 4px;
        flex-wrap: wrap;
        row-gap: 0;
    }

    .erp-seat .erp-name { font-size: 0.82rem; max-width: 52vw; }

    .erp-nav {
        width: 100%;
        margin-inline-start: 0;
        justify-content: space-between;
        gap: 4px;
        padding: 3px 2px 1px;
    }

    .erp-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 30px;
    }

    .erp-count {
        flex: 0 0 auto;
        min-width: 46px;
        margin-inline-end: 0;   /* the spread row spaces things itself */
    }
}

/*  The game's facts, one slim line under everything (Kamal, 2026-09-03):
    its clock, when it began and ended, how long it ran. The header's own
    inks — #1E1B4B on the pale indigo, white on the dark — dimmed a step.
    Present only when the caller knew them. */
.erp-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    padding: 2px 10px 4px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: #1E1B4B;
    opacity: 0.8;
}

body.theme-dark .erp-foot { color: #fff; }

@media (max-width: 768px) {
    .erp-foot { padding: 1px 6px 3px; font-size: 0.68rem; }
}

/*  The gear beside the ✕ (Kamal, 2026-09-06): the same box as the ✕, a clear
    space between the two, and the result standing off from both. Its hover is
    indigo, not the ✕'s red — nothing is being closed. The menu it opens is a
    small white card under it, one fixed palette on every theme:
    #1E1B4B on #fff 15:1, border #a8bcd0. */
.erp-row-top { position: relative; }
.erp-gear { margin-inline-start: 14px; margin-inline-end: 10px; font-size: 0.9rem; }
.erp-analyse { margin-inline-end: 0; }
.erp-analyse:hover, body.theme-dark .erp-analyse:hover { background: #E0E7FF; border-color: #A5B4FC; color: #312E81; }
/* the phone card's analyze icon: indigo on press, not the ✕'s red */
.epb-analyse { margin-inline-end: 6px; font-size: 0.85rem; }
.erp-analyse.on, .epb-analyse.on, body.theme-dark .erp-analyse.on, body.theme-dark .epb-analyse.on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
/*  The engine panel (Kamal, 2026-09-18): score and depth, then three lines. Tight
    rows — it sits under the board on a phone. Text #1e293b on the popup's white
    #ffffff (14.6:1); on the dark card #e2e8f0 on #1e293b (12.6:1). */
.rpe-panel { width: 100%; padding: 4px 10px 6px; font-size: 0.8rem; line-height: 1.35; color: #1e293b; border-top: 1px solid #e2e8f0; }
body.theme-dark .rpe-panel { color: #e2e8f0; border-top-color: rgba(255, 255, 255, 0.12); }
.rpe-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; height: 1.35em; }
.rpe-line { height: 1.35em; }
.rpe-score { font-size: 0.95rem; font-weight: 800; }
.rpe-depth { color: #64748b; font-size: 0.74rem; }
body.theme-dark .rpe-depth { color: #94a3b8; }
.rpe-line { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpe-eval { flex: 0 0 auto; min-width: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rpe-moves { overflow: hidden; text-overflow: ellipsis; }
.epb-engine { direction: ltr; }
.epb-analyse:active, body.theme-dark .epb-analyse:active { background: #C7D2FE; border-color: #818CF8; color: #312E81; }
.erp-result { margin-inline-end: 4px; }
.erp-gear:hover,
body.theme-dark .erp-gear:hover {
    background: #E0E7FF;
    border-color: #A5B4FC;
    color: #312E81;
}
.erp-menu {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-end: 10px;
    z-index: 5;
    min-width: 200px;
    background: #fff;
    border: 1px solid #a8bcd0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    padding: 4px;
    display: flex;
    flex-direction: column;
    text-align: start;
}
.erp-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #1E1B4B;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}
.erp-menu-item:hover, .erp-menu-item:active { background: #E0E7FF; color: #312E81; }
.erp-menu-item i { font-size: 1rem; color: #4f46e5; }
.erp-menu-none { padding: 8px 12px; color: #64748b; font-size: 0.85rem; }
@media (max-width: 768px) {
    .erp-gear { margin-inline-start: 10px; margin-inline-end: 10px; width: 26px; height: 26px; font-size: 0.85rem; }
}


/* =====================================================================
   THE ONE PHONE BOARD (elbe-phone-board.js) — what every phone opens, live
   or finished (Kamal, 2026-09-13/14). It wears the old replay card's looks,
   which he preferred: a white card with the pale indigo header band, the
   indigo buttons; in the dark, the navy card and its band. Under the board,
   three rows: the seat with the three small tools, the count with the five
   arrows spread across the row, the score with the game's facts.

   Inks, measured: header #1E1B4B on the #EEF2FF–#E0E7FF band (12:1); names
   #1C1814 on #fff; dim text #6B6558 on #fff (5.2:1); buttons #312E81 on
   #E0E7FF (8.9:1) with an #A5B4FC edge; the live word #15803d on #fff
   (5.0:1). Dark: white and rgba(255,255,255,.65) on #1a1a2e; buttons
   rgba(255,255,255,.8) on rgba(255,255,255,.1); the live word #4ade80. The
   pressed megaphone is #1C1814 on the school's brass #FFC200 in both.
   ===================================================================== */
.epb-modal {
    background: #fff !important;
    border: 1px solid rgba(28, 22, 8, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 50px -14px rgba(28, 22, 8, 0.45) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    /*  Measured from the backdrop, which is pinned to the screen's edges, so
        100% is the screen under any magnifier — where 100vw came out wider
        than the screen and the card was cut off on the right (the Honor). */
    width: 100% !important;
    max-width: 100% !important;
}
body.theme-dark .epb-modal {
    background: #1a1a2e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
.epb-wrap { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
.epb-modal .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #1C1814 !important;
}
body.theme-dark .epb-modal .swal2-html-container { color: #fff !important; }
.epb-modal .swal2-title,
.epb-modal .swal2-icon,
.epb-modal .swal2-actions,
.epb-modal .swal2-footer,
.epb-modal .swal2-image { display: none !important; }

.epb-body { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; max-width: 100%; overflow-x: hidden; direction: ltr; }

/* ----- The two seats ----- */
.epb-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%; max-width: 100%; box-sizing: border-box;
    line-height: 1.15; font-size: 0.78rem; color: #6B6558;
}
body.theme-dark .epb-row { color: rgba(255, 255, 255, 0.65); }
.epb-row-top {
    padding: 3px 8px;
    background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
    border-bottom: 1px solid rgba(28, 22, 8, 0.12);
    color: #1E1B4B;
}
body.theme-dark .epb-row-top {
    background: linear-gradient(135deg, #16213e, #0f3460);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.epb-row-seat { padding: 4px 8px 2px; }
.epb-seat { display: flex; align-items: center; gap: 6px; min-width: 0; }
.epb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(28, 22, 8, 0.3); }
.epb-dot.w { background: #f8fafc; }
.epb-dot.b { background: #1e293b; }
body.theme-dark .epb-dot { border-color: rgba(255, 255, 255, 0.25); }
body.theme-dark .epb-dot.b { background: #0b1020; }
.epb-name { font-weight: 600; font-size: 0.85rem; color: #1C1814; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epb-row-top .epb-name { color: #1E1B4B; }
body.theme-dark .epb-name { color: #fff; }
.epb-rating { font-size: 0.72rem; color: #6B6558; flex-shrink: 0; }
body.theme-dark .epb-rating { color: rgba(255, 255, 255, 0.65); }
.epb-clock {
    font-family: var(--elbe-mono, ui-monospace, Consolas, monospace);
    font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0;
    color: #1E1B4B;
}
body.theme-dark .epb-clock { color: #fff; }
.epb-right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-shrink: 0; }
.epb-modal .hall-watch-eye { font-size: 1.5rem; }
.epb-modal .hall-game-meta { font-size: 0.7rem; color: #6B6558; }
body.theme-dark .epb-modal .hall-game-meta { color: rgba(255, 255, 255, 0.65); }

/* ----- Buttons: the old card's indigo ----- */
.epb-close, .epb-btn, .epb-tool {
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 1px solid #A5B4FC; border-radius: 7px; background: #E0E7FF; color: #312E81;
    line-height: 1; cursor: pointer; flex-shrink: 0;
}
.epb-btn:active, .epb-tool:active, .epb-close:active { background: #C7D2FE; border-color: #818CF8; }
body.theme-dark .epb-close,
body.theme-dark .epb-btn,
body.theme-dark .epb-tool { border-color: transparent; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); }
body.theme-dark .epb-btn:active,
body.theme-dark .epb-tool:active { background: rgba(255, 255, 255, 0.2); color: #fff; }
.epb-btn:focus-visible, .epb-tool:focus-visible, .epb-close:focus-visible { outline: 2px solid #818CF8; outline-offset: 1px; }
.epb-close { width: 28px; height: 26px; font-size: 1rem; }
.epb-close:active, body.theme-dark .epb-close:active { background: #FEE2E2; border-color: #EF4444; color: #991B1B; }

/*  The three small tools, on the right of the seat row. */
.epb-small { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-shrink: 0; }
.epb-tool { min-width: 34px; height: 28px; padding: 0 7px; font-size: 0.9rem; }
.epb-tool.epb-speed { font-family: var(--elbe-mono, ui-monospace, Consolas, monospace); font-size: 0.72rem; font-weight: 700; }
.epb-tool[aria-pressed="true"], body.theme-dark .epb-tool[aria-pressed="true"] { background: #FFC200; border-color: transparent; color: #1C1814; }

/*  The count and the five arrows, spread across the whole row. */
.epb-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; max-width: 100%; box-sizing: border-box; padding: 3px 8px 2px; }
.epb-btn { flex: 1 1 0; min-width: 0; height: 34px; font-size: 1.15rem; }
.epb-btn:disabled { opacity: 0.35; cursor: default; }
.epb-count {
    flex: 0 0 auto; min-width: 52px; text-align: center;
    font-family: var(--elbe-mono, ui-monospace, Consolas, monospace); font-size: 0.78rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: #6B6558;
}
body.theme-dark .epb-count { color: rgba(255, 255, 255, 0.65); }

/*  The score and the game's facts, one line. */
.epb-line {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px;
    width: 100%; box-sizing: border-box; padding: 2px 8px 6px;
    font-size: 0.72rem; font-variant-numeric: tabular-nums; color: #1E1B4B; opacity: 0.85;
}
body.theme-dark .epb-line { color: #fff; }
.epb-line b { font-size: 0.82rem; }
.epb-line .epb-sep { opacity: 0.5; }
.epb-line .epb-live { color: #15803d; font-weight: 800; font-size: 0.78rem; }
body.theme-dark .epb-line .epb-live { color: #4ade80; }

/* ----- The board ----- */
.epb-board-wrap { margin: 0; width: 100%; touch-action: none; }
.epb-board { width: 100% !important; max-width: 100% !important; }
/* dialogs.css caps every board in a popup at 340 points; not this one. */
.swal2-popup.epb-modal .elbe-board { max-width: none; }

/*  A word from the card itself — why the megaphone stays quiet, say. Inside
    the card, since a second SweetAlert would take the board's place. */
.epb-note { width: 100%; text-align: center; font-size: 12.5px; line-height: 1.35; padding: 6px 10px; border-top: 1px solid rgba(28, 22, 8, 0.12); background: #EEF2FF; color: #1E1B4B; box-sizing: border-box; }
body.theme-dark .epb-note { border-top-color: rgba(255, 255, 255, 0.1); background: #16213e; color: #fff; }

/*  Small phones (380 and under): the card is the screen's whole width — no
    padding on the backdrop's sides — so the board's left edge IS the
    screen's left edge. The corners and side borders go with it. */
@media (max-width: 380px) {
    .epb-wrap { padding-left: 0 !important; padding-right: 0 !important; }
    .epb-modal { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
}

/*  A game still being played (Kamal, 2026-09-18): the word sits beside the
    result's place and goes when the result arrives. White on #dc2626 = 4.5:1. */
.erp-live {
    background: #dc2626;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 1px 8px;
    margin-inline-end: 6px;
    animation: erp-live-pulse 1.6s ease-in-out infinite;
}
@keyframes erp-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }