/* octordly.org – look of the game. Loaded after /static/css/octordle.css, which stays as shipped (only its Google Fonts
   @import is removed by the build). Every selector starts with ":root body" so it ties with or outranks the body.dark rules
   of octordle.css (and wins the tie, being loaded later).
   --k-*: colours of the 8 parts of each key (read by the patched bundle as var(--k-…)) and of the board tiles. */
:root {
  --k-empty: #dde3ea;
  --k-absent: #8b95a1;
  --k-correct: #2e9e5b;
  --k-elsewhere: #d4a514;
  --t-empty: #e9edf3;
  --t-line: #b9c2cf;
  --g-ink: #14181f;
  --g-muted: #55606f;
  --g-surface: #ffffff;
  --g-soft: #f3f5f8;
  --g-line: rgba(15, 23, 42, .09);
  --g-btn: #008a3e;
  --g-btn-hover: #007535;
  --g-halo: rgba(255, 255, 255, .9);
  --g-icon-bg: #ebedf3;
  --g-icon: #5b6782;
}
body.dark {
  --k-empty: #5d6575;
  --k-absent: #343a46;
  --k-correct: #2f9a58;
  --k-elsewhere: #b8920f;
  --t-empty: #262b35;
  --t-line: #5a6272;
  --g-ink: #eef1f6;
  --g-muted: #9aa4b2;
  --g-surface: #1c2029;
  --g-soft: #252a35;
  --g-line: rgba(255, 255, 255, .09);
  --g-halo: rgba(10, 12, 16, .85);
  --g-icon-bg: #2a303b;
  --g-icon: #c3cad6;
}

:root body #root { background: transparent; color: var(--g-ink); font-family: inherit; }

/* ---------------------------------------------------------------- board tiles */
:root body .Row-letter { border: 0; border-radius: 5px; background: var(--t-empty); color: var(--g-ink); font-weight: 800; }
:root body .Row-current .Row-letter { background: var(--g-surface); box-shadow: inset 0 0 0 2px var(--t-line); }
:root body .Row-letter.letter-correct { background: var(--k-correct); box-shadow: none; color: #fff !important; }
:root body .Row-letter.letter-elsewhere { background: var(--k-elsewhere); box-shadow: none; color: #fff !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
:root body .Row-letter.letter-absent { background: var(--k-absent); box-shadow: none; color: #fff !important; }

/* help page example row and the inline letters in its text */
:root body .about-example td.Row-letter { border: 0; border-radius: 6px; background: var(--t-empty); color: var(--g-ink); font-weight: 800; }
:root body .about-example td.Row-letter.letter-correct { background: var(--k-correct); color: #fff; }
:root body .about-example td.Row-letter.letter-elsewhere { background: var(--k-elsewhere); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
:root body .about-example td.Row-letter.letter-absent { background: var(--k-absent); color: #fff; }
:root body .App-about b { border-radius: 5px; background: var(--k-absent); color: #fff; }
:root body .App-about b.green-bg { background: var(--k-correct); }
:root body .App-about b.yellow-bg { background: var(--k-elsewhere); text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
:root body .App-about hr, :root body .App-container hr { border-top-color: var(--g-line); }

/* ---------------------------------------------------------------- keyboard (fixed to the bottom while the boards are on screen) */
:root body .keyboard__container { background: var(--g-surface); box-shadow: 0 -1px 0 var(--g-line), 0 -10px 24px rgba(15, 23, 42, .06); }
:root body .Game-keyboard { padding: 4px 4px 6px; }
:root body .Game-keyboard-button {
  margin: 3px;
  border-radius: 7px;
  background-color: var(--k-empty);
  color: var(--g-ink);
  font-size: 15px;
  font-weight: 900;
  /* the letter sits on up to 8 different colours: a halo keeps it readable on all of them */
  text-shadow: 0 0 2px var(--g-halo), 0 0 4px var(--g-halo), 0 0 6px var(--g-halo);
  transition: filter .1s;
}
:root body .Game-keyboard-button:active { filter: brightness(.92); }
:root body .Game-keyboard-button-wide { font-size: 12px; letter-spacing: 0; text-shadow: none; }
:root body.dark .Game-keyboard-button-wide { color: #fff; }
/* long Enter/Backspace labels (Greek ΚΑΤΑΧΩΡΗΣΗ) on phones */
@media (max-width: 480px) { :root body .Game-keyboard-button-wide { font-size: 10.5px; } }

/* ---------------------------------------------------------------- buttons, options, timer */
:root body .App-button, :root body .link-button {
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: var(--g-soft);
  color: var(--g-ink);
  font-weight: 800;
}
:root body .App-button:hover, :root body .link-button:hover { background: var(--g-surface); border-color: var(--t-line); color: var(--g-ink); }
:root body .App-button-marked, :root body #select-show-button { border: 0; background: var(--g-btn); color: #fff; }
:root body .App-button-marked:hover { background: var(--g-btn-hover); color: #fff; }
:root body .App-button-circle, :root body .App-button-circle-fixed { border-color: var(--g-line); background: var(--g-soft); color: var(--g-ink); }
:root body .App-button-circle:hover, :root body .App-button-circle-fixed:hover,
:root body .App-button-circle:disabled, :root body .App-button-circle-fixed:disabled { border-color: var(--g-btn); background: var(--g-btn); color: #fff; }
:root body .Game-options .App-button { height: 30px; padding: 0 14px; font-size: 13px; }
:root body .Game-seed-info { color: var(--g-muted); opacity: 1; font-size: 13px; }
:root body .Timer-time { color: var(--g-muted); }
/* the row under the game bar now holds only Give up / Start over; the timer is in the bar (#ok_timer, left) */
:root body .Game-options, :root body .Game-options-playing { justify-content: center; }
:root body .game-timer .Timer-time { margin: 0 4px 0 2px; color: var(--g-ink); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
:root body .game-timer .Timer-button { width: 36px; height: 36px; }

/* ---------------------------------------------------------------- header icons of the game (placed in our game bar) */
:root body .page-icon { margin-left: 6px; }
:root body .page-icon, :root body .page-icon svg { width: 36px; height: 36px; }
:root body .page-icon svg { padding: 7px; border-radius: 10px; background: var(--g-icon-bg); color: var(--g-icon); }
:root body .page-icon svg:hover { background: var(--k-correct); color: #fff; }

/* full-width button (after the game's icons; assets/js/site.js shows it from 1320px with a mouse) */
:root body .game-wide { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 6px; padding: 0; border: 0; border-radius: 10px; background: var(--g-icon-bg); color: var(--g-icon); cursor: pointer; }
:root body .game-wide:hover { background: var(--k-correct); color: #fff; }
:root body .game-wide .i { width: 22px; height: 22px; }
:root body .game-wide[hidden], :root body .game-wide .i-collapse, :root.ok-wide body .game-wide .i-expand { display: none; }
:root.ok-wide body .game-wide .i-collapse { display: block; }

/* ---------------------------------------------------------------- desktop layout options
   html.ok-wide (full-width button) and html.ok-rows2 (Settings: boards 1–4 above 5–8), set by assets/js/site.js and the
   patched Settings. They work only with a mouse and from 1200px (two rows; octordle.css shows the 8 boards in one row
   there) / 1320px (full width: the card is 1240px otherwise; same query as site.js), and do nothing elsewhere.
   Tile width --tw comes from the board width (container units) and the word length --n (4–6 tiles per row; each tile
   has 4px of margin, each board 8px of padding). --ok-tile caps the tile, and with it the width of the boards.
   Full width, one row: square tiles; the 13 rows stay about one screen high.
   Two rows: only the row being typed in (.Row-current) is square; every other row (guesses, empty rows, solved boards)
   is .55 of it, at least 14px, with its letters at .36 (at least 10px). The rows only swap sizes on Enter, so the
   height does not change while typing. The keyboard and the bars around the boards are tighter. --ok-tile is chosen so
   that site header + game bar + 2 x 13 rows + keyboard fit the window height (15.2 x tile + 412px); at the 28px minimum
   (windows under about 840px) the header scrolls away, under about 755px the game scrolls too. */
:root body .ok-rows2-setting { display: none; }
:root body .game__boards { --n: 5; }
:root body .game__boards:has(.Row > :nth-child(6)) { --n: 6; }
:root body .game__boards:not(:has(.Row > :nth-child(5))) { --n: 4; }
@media (min-width: 1200px) and (pointer: fine) {
  :root body .ok-rows2-setting { display: flex; }
  :root.ok-rows2 body { --ok-per-line: 4; --ok-tile: clamp(28px, calc((100vh - 412px) / 15.2), 64px); }
  :root.ok-rows2 body .game-bar { padding-top: 8px; }
  :root.ok-rows2 body .Game { padding-bottom: 0; }
  :root.ok-rows2 body .game__container-outer { padding-bottom: 4px; }
  :root.ok-rows2 body .Game-challenge-bar:empty { min-height: 0; margin: 0; }
  :root.ok-rows2 body .Game-keyboard-button { min-height: 42px; }
  :root.ok-rows2 body .game__boards { flex-wrap: wrap; padding-bottom: 2px; }
  :root.ok-rows2 body .game__boards-row { flex: 0 0 50%; width: 50%; }
  :root.ok-rows2 body .game__boards-anchor { flex: 0 0 100%; height: 6px; }
  :root.ok-rows2 body .game__boards { max-width: min(100%, calc(var(--ok-per-line) * (var(--n) * (var(--ok-tile) + 4px) + 8px))); }
  :root.ok-rows2 body .row__field { container-type: inline-size; --tw: calc((100cqw - var(--n) * 4px) / var(--n)); }
  :root.ok-rows2 body .game__boards .row__field .Row { margin: 1px 2px; height: max(14px, calc(var(--tw) * .55)); font-size: max(10px, calc(var(--tw) * .36)); }
  :root.ok-rows2 body .game__boards .row__field .Row.Row-current { margin: 2px; height: var(--tw); font-size: calc(var(--tw) * .55); }
}
@media (min-width: 1320px) and (pointer: fine) {
  :root.ok-wide body { --ok-per-line: 8; --ok-tile: clamp(30px, calc((100vh - 120px) / 13 - 4px), 80px); }
  :root.ok-wide.ok-rows2 body { --ok-per-line: 4; --ok-tile: clamp(28px, calc((100vh - 412px) / 15.2), 80px); }
  :root.ok-wide body .game-card { max-width: none; margin-right: 12px; margin-left: 12px; }
  :root.ok-wide body .Game-keyboard { max-width: 680px; }
  :root.ok-wide body .game__boards { max-width: min(100%, calc(var(--ok-per-line) * (var(--n) * (var(--ok-tile) + 4px) + 8px))); }
  :root.ok-wide body .row__field { container-type: inline-size; --tw: calc((100cqw - var(--n) * 4px) / var(--n)); }
  :root.ok-wide body .game__boards .Row { height: var(--tw); font-size: calc(var(--tw) * .55); }
}

/* ---------------------------------------------------------------- popups (help, settings, statistics, result) */
:root body .Top-window-background { background: rgba(15, 23, 42, .45); }
:root body .Top-window-frame { border-radius: 18px; background: var(--g-surface); box-shadow: 0 18px 50px rgba(15, 23, 42, .25); }
:root body .Top-window-title { border-bottom: 1px solid var(--g-line); background: var(--g-surface); color: var(--g-ink); font-weight: 900; }
:root body .App-button-close { color: var(--g-ink); }
:root body .App-title { border-bottom-color: var(--g-line); color: var(--g-ink); font-weight: 900; }
:root body .Settings-setting { border-radius: 12px; background: var(--g-soft); }
:root body .Settings-param-title { color: var(--g-ink); }
:root body .Settings-param-desc, :root body .stat-description { color: var(--g-muted); }
:root body .App-switch-checkbox:checked { border-color: var(--g-btn); background-color: var(--g-btn); }
:root body .Settings-setting.ok-lang-setting { flex-direction: row; align-items: center; gap: 12px; padding-right: 16px; }
:root body .ok-lang-text { flex: 1 1 auto; min-width: 0; }
:root body .ok-lang-select { flex: 0 1 auto; max-width: 55%; height: 38px; padding: 0 8px 0 10px; border: 1px solid var(--t-line); border-radius: 10px; background: var(--g-surface); color: var(--g-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
:root body.dark .ok-lang-select { color-scheme: dark; }
:root body .stat-item { border-radius: 12px; background: var(--g-soft); color: var(--g-ink); }
:root body .stats-chart table .percentage { background: var(--t-empty); color: var(--g-muted); }
:root body .stats-chart table td .percentage span { background: var(--k-correct); }
:root body .stats-share-button { border-radius: 10px; background: var(--g-soft); color: var(--g-ink); font-family: inherit; }
:root body .Game-result-content > span { color: var(--g-ink); font-weight: 800; }
:root body .Game-result-answer, :root body a.Game-result-answer:visited { border-radius: 8px; background: var(--g-soft); color: var(--g-ink); text-decoration: none; }
:root body a.Game-result-answer:hover { background: var(--k-correct); color: #fff; }
:root body .Game-result-link { color: var(--g-muted); font-weight: 700; }
:root body .Hint-window { border-radius: 12px; background: var(--g-ink); color: var(--g-surface); box-shadow: 0 10px 30px rgba(15, 23, 42, .25); }
:root body .Generator-content-input { border: 1px solid var(--t-line); border-radius: 10px; background: var(--g-surface); color: var(--g-ink); font-family: inherit; }