/* ============================================================
   Scrabble Scoreboard - "felt & tiles" theme
   Visual language taken from scrabble-ledger-44-rounds.html:
   dark felt ground, cream Scrabble tiles with score subscripts,
   gold accents, Fraunces italic headings, IBM Plex Mono figures.

   Written against the REAL nextgen player DOM, confirmed by
   inspecting the running app:

     div#flow-app
       main.flow.nav-horizontal
         section.content
           nav.historical-navigation
           div.outcomes
             button.button.button-outcome > span.loader

   Earlier revisions guessed at .main, .container, .mw-navigation and
   nav.navbar - none of which exist in this player, so none of that
   CSS ever applied. Do not reintroduce them.
   ============================================================ */

:root {
    --felt:      #14261f;
    --felt-deep: #0e1c17;
    --felt-card: rgba(243,234,211,0.055);
    --tile:      #f3ead3;
    --tile-hi:   #faf4e4;
    --ink:       #26211a;
    --ink-soft:  #5b5344;
    --gold:      #c9a227;
    --gold-soft: #e0c369;
    --line:      rgba(243,234,211,0.14);
    --muted:     rgba(243,234,211,0.55);
    --z: #c1443c;   /* Zakir   */
    --f: #3170a0;   /* Fathema */
    --n: #7c5295;   /* Nazmin  */
    --a: #2e8b79;   /* Amina   */
    --sb-tap: 52px;
    /* Makes the native datetime picker and its calendar icon
       render dark; without it the control drew dark-on-dark. */
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,0.035), transparent 40%),
        radial-gradient(circle at 85% 92%, rgba(255,255,255,0.03), transparent 45%),
        var(--felt);
    color: var(--tile);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;              /* 16px stops mobile zoom on focus */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---- app shell ----------------------------------------------
   The player paints its OWN white background on #flow-app / main /
   section, which left a white column down the middle with cream and
   gold text on it - all but unreadable. These must be forced
   transparent so the felt body shows through the whole page, and the
   min-height keeps the felt full-bleed on short pages. */
html, body, div#flow-app { min-height: 100%; }
div#flow-app,
main.flow,
main.flow > section,
section.content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
main.flow {
    max-width: 520px;
    margin: 0 auto;
    padding: 26px 20px calc(var(--sb-tap) + 34px);
}
nav.historical-navigation { display: none; }

/* ---- headings -----------------------------------------------
   These need an explicit colour. There was no generic h1/h2 rule
   after the theme rewrite, so page titles inherited the player's
   grey and read as faint against the felt. */
h1, h2, h3 {
    margin: 0 0 6px;
    color: var(--tile-hi);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1 { font-size: 30px; font-style: italic; line-height: 1.1; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

/* Standfirst under a page title. This used to be an inline
   var(--sb-muted) - a token that stopped existing when the palette
   was renamed, so the text silently fell back to a faint grey.
   As a class it cannot break that way again. */
.sb-lede {
    margin: 8px 0 24px;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(243,234,211,0.78);
}

/* The player prints a "Selected Rows: 0" counter above every table.
   Nothing here is selectable, so it is noise. */
.sb-table > *:first-child:not(table):not(.sb-tablewrap) { display: none; }

/* ---- section headings (01 / 02 / 03) ------------------------ */
.sb-sec {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 40px 0 0;
}
.sb-idx {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--gold);
}
.sb-sec h2 {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--tile-hi);
}
.sb-rule { height: 1px; background: var(--line); margin: 10px 0 14px; }
.sb-note {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

/* ---- champion card ------------------------------------------
   The one deliberately loud element. Gold on felt rather than the
   old purple gradient, and centred properly - the previous version
   had the eyebrow, name and sub-line all fighting for spacing. */
.sb-champion {
    background: linear-gradient(160deg, rgba(201,162,39,0.14), rgba(201,162,39,0.035));
    border: 1px solid rgba(201,162,39,0.32);
    border-radius: 16px;
    padding: 26px 22px 24px;
    margin: 0 0 26px;
    text-align: center;
}
.sb-champ-eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 12px;
}
.sb-champ-name {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(38px, 12vw, 52px);
    line-height: 1.02;
    color: var(--tile-hi);
    margin-bottom: 10px;
}
.sb-champ-sub {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(243,234,211,0.72);
    max-width: 34ch;
    margin: 0 auto;
}

/* ---- player cards ------------------------------------------- */
.sb-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.sb-pcard {
    background: linear-gradient(160deg, rgba(243,234,211,0.055), rgba(243,234,211,0.02));
    border: 1px solid rgba(243,234,211,0.1);
    border-radius: 14px;
    padding: 18px;
}
.sb-pc-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }

/* The Scrabble tile: cream face, letter in Fraunces, wins as the
   little score in the corner. */
.sb-tile {
    position: relative;
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 8px;
    background: linear-gradient(155deg, var(--tile-hi), var(--tile));
    box-shadow: 0 2px 0 rgba(0,0,0,0.22), 0 6px 12px rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: 21px;
    color: var(--ink);
}
.sb-tile span {
    position: absolute; bottom: 3px; right: 5px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 8px; font-weight: 600;
    color: var(--ink-soft);
}
.sb-pc-id { min-width: 0; }
.sb-pc-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: 19px;
    color: var(--tile-hi);
}
.sb-pc-tag { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

.sb-pc-bar {
    height: 5px; border-radius: 3px;
    background: rgba(243,234,211,0.1);
    overflow: hidden;
    margin-bottom: 16px;
}
.sb-pc-fill { height: 100%; border-radius: 3px; background: var(--gold); }
.sb-p-zakir   .sb-pc-fill { background: var(--z); }
.sb-p-fathema .sb-pc-fill { background: var(--f); }
.sb-p-nazmin  .sb-pc-fill { background: var(--n); }
.sb-p-amina   .sb-pc-fill { background: var(--a); }

.sb-pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sb-st-label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(243,234,211,0.45);
    margin-bottom: 4px;
}
.sb-st-value {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 600; font-size: 17px;
    color: var(--tile-hi);
}

/* ---- leaderboard rows ---------------------------------------
   Presentation markup, not a table: tile + name + bar + figures.
   Which player sits in each row is decided by the macro's
   Rank1..Rank4 values, so this static markup still re-ranks. */
.sb-lb { margin-bottom: 6px; }
.sb-lb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
}
.sb-lb-row:last-child { border-bottom: none; }
.sb-lb-pos {
    flex-shrink: 0;
    width: 20px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    color: rgba(243,234,211,0.4);
}
.sb-lb-mid { flex: 1; min-width: 0; }
.sb-lb-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--tile-hi);
}
.sb-lb-track {
    height: 5px;
    border-radius: 3px;
    background: rgba(243,234,211,0.1);
    overflow: hidden;
    margin: 8px 0 9px;
}
.sb-lb-fill { height: 100%; border-radius: 3px; }

/* The three figures the leaderboard must show: wins, win rate,
   average points. Wraps rather than truncating on a narrow phone. */
.sb-lb-figs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 11.5px;
    color: rgba(243,234,211,0.5);
}
.sb-lb-figs b {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 13px;
    color: var(--tile-hi);
}

/* ---- tables -------------------------------------------------- */
.sb-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: transparent;
}
th {
    padding: 10px 8px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    text-align: left; white-space: nowrap;
    color: rgba(243,234,211,0.45);
    border-bottom: 1px solid var(--line);
}
td {
    padding: 12px 8px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: rgba(243,234,211,0.9);
    border-bottom: 1px solid rgba(243,234,211,0.07);
}
tbody tr:last-child td { border-bottom: none; }

/* ---- inputs -------------------------------------------------
   Size and colour only. No `appearance`, `pointer-events`,
   `transform` or `overflow` on form controls - see the note below
   about the keyboard. */
label {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 7px;
}
/* main.flow prefix is deliberate. A bare `input` selector loses to
   the player's own `.flow .page-component input` rules, which is why
   the fields stayed at their HTML size=25 intrinsic width (narrower
   than the buttons beside them) and kept the player's grey text.
   The prefix outranks it, so width and colour actually apply. */
main.flow input,
main.flow select,
main.flow textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    min-height: var(--sb-tap);
    padding: 13px 15px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 16px;
    /* Same cream as the page titles, as asked. */
    color: #faf4e4 !important;
    background: rgba(243,234,211,0.06);
    border: 1px solid rgba(243,234,211,0.16);
    border-radius: 10px;
}
/* The player wraps each field in .page-component; if that is not
   full width the input cannot be either. */
main.flow .page-component { width: 100%; }
main.flow input:focus, main.flow select:focus, main.flow textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(243,234,211,0.09);
}
main.flow input::placeholder { color: rgba(243,234,211,0.42); }
.sb-score input { text-align: center; font-size: 20px; font-weight: 600; }

/* The password field binds to a ContentString value, not
   ContentPassword: the nextgen player renders no editable input for
   that content type, so the field appeared but no keyboard ever
   opened on mobile. Text is therefore visible as typed. */

/* ---- outcome buttons ----------------------------------------
   Forced to a full-width stack. Without the explicit stretch and
   zero margin the player's own rules left the buttons at slightly
   different offsets, so they stepped diagonally down the page
   instead of aligning. */
div.outcomes {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
    width: 100%;
    margin: 26px 0 0;
    padding: 0 !important;
}
div.outcomes > button.button-outcome {
    width: 100% !important;
    margin: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box;
    min-height: var(--sb-tap);
    padding: 15px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 15px; font-weight: 600;
    letter-spacing: .01em;
    color: var(--felt-deep);
    background: linear-gradient(155deg, var(--gold-soft), var(--gold));
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.22);
    cursor: pointer;
}
/* Only the first outcome is the primary action. Anything after it
   (Cancel) becomes a quiet outline button, so two gold slabs don't
   compete for the same attention. */
div.outcomes > button.button-outcome:not(:first-of-type) {
    background: transparent;
    color: var(--gold-soft);
    border: 1px solid rgba(201,162,39,0.45);
    box-shadow: none;
}
button.button-outcome:active { transform: translateY(1px); filter: brightness(.96); }
/* The player injects a loader span into every outcome button; it must
   not add height when idle or the buttons jump on click. */
button.button-outcome .loader:empty { display: none; }

/* ---- bottom nav --------------------------------------------- */
.sb-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
    background: rgba(14,28,23,0.96);
    border-top: 1px solid var(--line);
}
.sb-nav div.outcomes {
    flex-direction: row; margin: 0 auto; max-width: 480px;
}

/* ---- security page ------------------------------------------ */
.sb-lock { text-align: center; padding: 40px 0 8px; }
.sb-lock .sb-mark {
    width: 58px; height: 58px;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: 24px;
    color: var(--ink);
    background: linear-gradient(155deg, var(--tile-hi), var(--tile));
    border-radius: 10px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.22), 0 6px 14px rgba(0,0,0,0.4);
}
.sb-lock h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic; font-weight: 600;
    font-size: 34px; line-height: 1.05;
    color: var(--tile-hi);
    margin: 0 0 10px;
}
.sb-lock p { font-size: 14px; color: var(--muted); margin: 0; }

.sb-error {
    padding: 12px 14px;
    margin: 14px 0 0;
    font-size: 13px;
    color: #f0b6ae;
    background: rgba(193,68,60,0.14);
    border: 1px solid rgba(193,68,60,0.4);
    border-radius: 10px;
    text-align: left;
}
/* :empty alone misses it - the player wraps the merged value - so
   :has covers the "wrapper present but no text" case. */
.sb-error:empty,
.sb-error:has(> :only-child:empty) {
    display: none; padding: 0; border: none; margin: 0;
}

@media (max-width: 360px) {
    .sb-pc-stats { gap: 7px; }
    .sb-st-value { font-size: 15px; }
    td, th { padding-left: 6px; padding-right: 6px; }
}


/* ---- Add Game form -----------------------------------------
   Centred to match the login page, and with no container padding
   so the inputs sit at exactly the same width as the buttons in
   the sibling container below them. */
.sb-formhead { text-align: center; padding: 14px 0 4px; }
.sb-formhead h1 { margin-bottom: 8px; }
.sb-formhead .sb-lede { margin: 6px auto 6px; max-width: 30ch; }

.sb-form { padding: 0; }
.sb-form label { text-align: center; }
.sb-form input { text-align: center; }