/* /scrabble. One parent class, .scrabble; the script builds its markup with data- attributes and plain elements, no classes on children.
   Compact on purpose: the score band, one entry row, a short scrolling turn list, then the record folded away. */
.scrabble {
    --bg: #eef2ee; --surface: #ffffff; --fg: #1d2a24; --muted: #5f6f67; --line: #d3ddd6;
    --board: #1f6b55; --board-ink: #eaf5ef; --tile: #f1dfb4; --tile-ink: #2b2215;
    --accent: #c8463a; --good: #2f7d4f;
    max-width: 520px; margin: 0 auto; padding: 0.6rem 1rem 2rem; display: flex; flex-direction: column; gap: 0.6rem;
    font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--fg);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .scrabble {
        --bg: #121815; --surface: #1b2420; --fg: #e4ece7; --muted: #9aaba2; --line: #2e3b35;
        --board: #174d3e; --board-ink: #e2f1e9; --tile: #e6d2a2; --accent: #e0675a; --good: #5cbf86;
    }
}
:root[data-theme="dark"] .scrabble {
    --bg: #121815; --surface: #1b2420; --fg: #e4ece7; --muted: #9aaba2; --line: #2e3b35;
    --board: #174d3e; --board-ink: #e2f1e9; --tile: #e6d2a2; --accent: #e0675a; --good: #5cbf86;
}
.scrabble h1 { margin: 0; font: 700 1.2rem Georgia, "Times New Roman", serif; display: flex; justify-content: space-between; align-items: center; }
.scrabble h1 button { padding: 0.2rem 0.7rem; min-height: 36px; font-size: 0.8rem; }
.scrabble h1 span[data-pie] { --left: 1; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted); background: conic-gradient(var(--muted) calc(var(--left) * 1turn), transparent 0); }
.scrabble > div { display: flex; flex-direction: column; gap: 0.6rem; }
.scrabble [data-status] { margin: 0; font-size: 0.72rem; color: var(--muted); text-align: right; }
.scrabble button { font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 0.55rem 0.8rem; min-height: 44px; }
.scrabble button[data-primary] { background: var(--accent); border-color: var(--accent); color: #fff; }
.scrabble button:disabled { opacity: 0.45; cursor: default; }
.scrabble input { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.7rem; min-width: 0; width: 100%; min-height: 44px; box-sizing: border-box; }
.scrabble button:focus-visible, .scrabble input:focus-visible { outline: 3px solid #6fa6bf; outline-offset: 2px; }

/* New game: one tap on who starts. */
.scrabble [data-newgame] { display: grid; grid-template-columns: auto 1fr 1fr; gap: 0.4rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.4rem 0.6rem; }
.scrabble [data-newgame] > span { font-weight: 700; white-space: nowrap; }
.scrabble [data-newgame] button { padding: 0.35rem 0.3rem; font-size: 0.85rem; white-space: nowrap; min-height: 40px; }

/* The score band: one panel per player holding the name, the total, the box that adds to it, and the points so far. */
.scrabble [data-board] { background: var(--board); color: var(--board-ink); border-radius: 12px; padding: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.scrabble [data-board] form { background: rgba(255, 255, 255, 0.08); border: 0; border-radius: 10px; padding: 0.5rem 0.6rem; display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; align-content: start; }
.scrabble [data-board] form > span { grid-column: 1 / -1; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
.scrabble [data-board] form[data-waiting] { outline: 2px solid var(--tile); }
.scrabble [data-board] form:not([data-waiting]) { margin-top: 0.35rem; }
.scrabble [data-board] input:disabled { opacity: 0.35; }
.scrabble [data-board] form > span em { font: 700 0.95rem Georgia, serif; font-style: normal; font-variant-numeric: tabular-nums; color: var(--tile); }
.scrabble [data-board] strong { grid-column: 1 / -1; font: 700 2.6rem/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.scrabble [data-board] input[type=number] { text-align: center; font: 700 1.1rem Georgia, serif; }
.scrabble [data-board] button { padding: 0.4rem 0.7rem; }
.scrabble [data-board] ol { grid-column: 1 / -1; list-style: none; margin: 0.2rem 0 0; padding: 0; max-height: 6rem; overflow-y: auto; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.scrabble [data-board] li { border-bottom: 1px dashed rgba(255, 255, 255, 0.25); padding: 1px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.scrabble [data-board] li small { font-size: 0.6rem; opacity: 0.45; }
.scrabble [data-board] p { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 0.78rem; opacity: 0.85; }
.scrabble > div > button[data-endgame] { align-self: flex-end; padding: 0.35rem 0.8rem; min-height: 40px; font-size: 0.85rem; }

/* Finishing the game. */
.scrabble form[data-end] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem; }
.scrabble form[data-end] > label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.scrabble form[data-end] > label:first-child { grid-column: 1 / -1; }
.scrabble form[data-end] [data-preview] { grid-column: 1 / -1; margin: 0; font-weight: 700; }
.scrabble form[data-end] > div { grid-column: 1 / -1; display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Record: folded. */
.scrabble details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.1rem 0.8rem; }
.scrabble details summary { cursor: pointer; padding: 0.6rem 0; font-weight: 700; min-height: 24px; }
.scrabble details > div { padding-bottom: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.scrabble [data-games] > div { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.scrabble [data-games] em { font: normal 700 0.8rem Georgia, serif; color: var(--muted); min-width: 1.6rem; font-variant-numeric: tabular-nums; }
.scrabble [data-games] strong { font-variant-numeric: tabular-nums; }
.scrabble [data-games] strong span[data-win] { color: var(--good); }
.scrabble [data-games] > div > span { display: flex; align-items: baseline; gap: 0.6rem; }
.scrabble [data-games] small { color: var(--muted); font-size: 0.72rem; opacity: 0.6; }
.scrabble [data-games] button { padding: 0.25rem 0.6rem; min-height: 36px; font-size: 0.78rem; }
.scrabble p[data-note] { margin: 0; color: var(--muted); font-size: 0.85rem; }

/* The compliment after a score. */
.scrabble p[data-praise] { margin: 0; text-align: center; font: italic 700 1.05rem Georgia, serif; color: var(--good); }

/* The finished game's summary above New game. */
.scrabble p[data-last] { margin: 0; padding: 0.6rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 0.9rem; }

/* The record: one card, the head to head on top, the games under it. */
.scrabble div[data-record] { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.scrabble div[data-record] > header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.scrabble div[data-record] > header small { color: var(--muted); font-size: 0.8rem; }
.scrabble div[data-record] > button { align-self: center; padding: 0.35rem 0.9rem; min-height: 40px; font-size: 0.85rem; }
.scrabble [data-games] > div[data-replaying] { display: block; }
.scrabble [data-games] > div > div[data-actions] { display: flex; gap: 0.4rem; }

/* Replay in place of a game's row: names with their scores (the one whose turn it is, the one the time is going to, is filled in), the graph, the clock. */
.scrabble [data-replay] { display: flex; flex-direction: column; gap: 0.4rem; }
.scrabble [data-replay] canvas { width: 100%; display: block; }
.scrabble [data-replay] p { margin: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.scrabble [data-replay] p[data-line] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.scrabble [data-replay] p[data-line] span { --color: #888; border-left: 4px solid var(--color); color: var(--fg); padding: 0.1rem 0.5rem; font-weight: 700; min-width: 0; }
.scrabble [data-replay] > div { display: flex; gap: 0.5rem; }

/* The time pie under the replay graph on the left half; on the right half each player's share of the time, their time, turns and average, the first player on top. */
.scrabble [data-replay] div[data-times] { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0.6rem; }
.scrabble [data-replay] canvas[data-pie] { display: block; justify-self: center; }
.scrabble [data-replay] div[data-times] > div { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.scrabble [data-replay] [data-time] { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; border-left: 4px solid var(--color, #888); padding-left: 0.5rem; font-variant-numeric: tabular-nums; }
.scrabble [data-replay] [data-time] b { --color: #888; font-size: 0.95rem; }
.scrabble [data-replay] [data-time] span { font: 700 1.3rem Georgia, serif; }
.scrabble [data-replay] [data-time] small { color: var(--muted); font-size: 0.72rem; }
.scrabble [data-replay] [data-time='M'] { --color: #e0675a; }
.scrabble [data-replay] [data-time='J'] { --color: #4aa3c7; }

/* The photo of the board: the prompt when ending a game (a file box that opens the camera, drawn as a button), and the picture under the replay. */
.scrabble label[data-photo] { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 44px; border: 1px dashed var(--muted); border-radius: 8px; padding: 0.4rem; font-weight: 600; cursor: pointer; text-align: center; }
.scrabble label[data-photo] input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scrabble label[data-photo] img { height: 44px; border-radius: 6px; }
.scrabble form[data-end] > label[data-photo] { grid-column: 1 / -1; flex-direction: row; font-size: 0.9rem; color: var(--fg); }
.scrabble [data-replay] [data-photobox] img { width: 100%; display: block; border-radius: 8px; }