/* NVIDIAddict — Ticker (2026-10-03). Every rule is scoped under .ag-ticker.
   Palette: teal for the right spot, amber for a letter in the wrong spot, grey for a miss. Teal and amber differ
   in hue on the blue-yellow axis and in lightness, so they stay apart for red-green colour blindness; the
   high-contrast option swaps to orange and blue. */
.ag-ticker {
  --tk-right: #12846A; --tk-right-ink: #FFFFFF;
  --tk-near: #D99A1E; --tk-near-ink: #1A1305;
  --tk-miss: #6F7970; --tk-miss-ink: #FFFFFF;
  --tk-empty: color-mix(in srgb, var(--ink) 16%, var(--bg));
  --tk-filled: color-mix(in srgb, var(--ink) 55%, var(--bg));
  --tk-key: #D7DDCF; --tk-key-ink: var(--ink);
  --tk-key-miss: #6F7970; --tk-key-miss-ink: #FFFFFF;
  position: relative;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ag-ticker {
    --tk-right: #12846A; --tk-near: #E2AD38; --tk-miss: #2E3730; --tk-miss-ink: #A9B4A4;
    --tk-key: #3A453D; --tk-key-miss: #1A201C; --tk-key-miss-ink: #74806E;
  }
}
:root[data-theme="dark"] .ag-ticker {
  --tk-right: #12846A; --tk-near: #E2AD38; --tk-miss: #2E3730; --tk-miss-ink: #A9B4A4;
  --tk-key: #3A453D; --tk-key-miss: #1A201C; --tk-key-miss-ink: #74806E;
}
.ag-ticker .tk[data-hc="1"] { --tk-right: #F07C14; --tk-right-ink: #1B0E00; --tk-near: #2B72D6; --tk-near-ink: #FFFFFF; }

/* ---- layout ---- */
.ag-ticker .tk { --tk-tile: 52px; --tk-gap: 5px; --tk-key-h: 52px; --tk-kgap: 6px; --tk-kb-w: 100%; --tk-kb-ml: 0px; --tk-bar-w: 100%;
  position: relative; height: var(--tk-h, auto); min-height: 280px; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar" "board" "kb"; row-gap: 8px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ag-ticker .tk[data-layout="side"] { grid-template-columns: auto auto; grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "board ." "board bar" "board kb" "board ."; column-gap: 32px; row-gap: 14px; justify-content: center; }
.ag-ticker .tk-bar { grid-area: bar; justify-self: center; width: var(--tk-bar-w); max-width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-ticker .tk-boardwrap { grid-area: board; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.ag-ticker .tk-board { display: grid; gap: var(--tk-gap); }
.ag-ticker .tk-row { display: grid; grid-template-columns: repeat(5, var(--tk-tile)); gap: var(--tk-gap); }

/* ---- tool bar ---- */
.ag-ticker .tk-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); }
.ag-ticker .tk-seg button { min-height: 36px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 14px var(--sans); cursor: pointer; }
.ag-ticker .tk-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.ag-ticker .tk-seg button.locked[aria-pressed="false"] { opacity: .55; }
.ag-ticker .tk-icons { display: flex; gap: 2px; }
.ag-ticker .tk-ib { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.ag-ticker .tk-ib:active { background: var(--raised); }
.ag-ticker .tk-ib svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- tiles ---- */
.ag-ticker .tk-tile { width: var(--tk-tile); height: var(--tk-tile); display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 2px solid var(--tk-empty); border-radius: 7px; background: transparent; color: var(--ink);
  font: 700 calc(var(--tk-tile) * .52) / 1 var(--sans); text-transform: uppercase; letter-spacing: 0; }
.ag-ticker .tk-tile[data-s="tbd"] { border-color: var(--tk-filled); }
.ag-ticker .tk-tile[data-s="right"] { background: var(--tk-right); border-color: var(--tk-right); color: var(--tk-right-ink); }
.ag-ticker .tk-tile[data-s="near"] { background: var(--tk-near); border-color: var(--tk-near); color: var(--tk-near-ink); }
.ag-ticker .tk-tile[data-s="miss"] { background: var(--tk-miss); border-color: var(--tk-miss); color: var(--tk-miss-ink); }

/* ---- message ---- */
.ag-ticker .tk-msg { position: absolute; left: 50%; top: 4px; z-index: 3; transform: translate(-50%, -6px); max-width: calc(100% - 16px); padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font: 700 15px/1.25 var(--sans); text-align: center; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.ag-ticker .tk-msg.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- keyboard ---- */
.ag-ticker .tk-kb { grid-area: kb; justify-self: start; box-sizing: border-box; width: var(--tk-kb-w); margin-left: var(--tk-kb-ml); display: grid; gap: var(--tk-kgap); }
.ag-ticker .tk-krow { display: flex; gap: calc(var(--tk-kgap) - 1px); }
.ag-ticker .tk-half { flex: .5 1 0; }
.ag-ticker .tk-key { flex: 1 1 0; min-width: 0; height: var(--tk-key-h); padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px;
  background: var(--tk-key); color: var(--tk-key-ink); font: 700 clamp(15px, calc(var(--tk-key-h) * .36), 20px) / 1 var(--sans); text-transform: uppercase; cursor: pointer;
  transition: background-color .2s, color .2s; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.ag-ticker .tk-key:active { filter: brightness(1.18); transform: translateY(1px); }
.ag-ticker .tk-key.tk-wide { flex: 1.55 1 0; font-size: clamp(12px, calc(var(--tk-key-h) * .27), 15px); text-transform: none; letter-spacing: .01em; }
.ag-ticker .tk-key svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ag-ticker .tk-key[data-s="right"] { background: var(--tk-right); color: var(--tk-right-ink); }
.ag-ticker .tk-key[data-s="near"] { background: var(--tk-near); color: var(--tk-near-ink); }
.ag-ticker .tk-key[data-s="miss"] { background: var(--tk-key-miss); color: var(--tk-key-miss-ink); }

/* ---- after the word is done: the keyboard makes way for what is next ---- */
.ag-ticker .tk-done { grid-area: kb; justify-self: center; width: min(100%, var(--tk-kb-w)); min-height: calc(var(--tk-key-h) * 3 + var(--tk-kgap) * 2); display: flex; align-items: center; justify-content: center; }
.ag-ticker .tk-done[hidden] { display: none; }
.ag-ticker .tk-done-in { width: 100%; max-width: 440px; display: grid; gap: 6px; text-align: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.ag-ticker .tk-done-h { font: 800 20px/1.2 var(--display); }
.ag-ticker .tk-done-h b { letter-spacing: .06em; }
.ag-ticker .tk-done-sub { color: var(--muted); font-size: 14px; }
.ag-ticker .tk-done-sub b { color: var(--ink); font-family: var(--mono); font-weight: 600; }

/* ---- sheets: help, stats, settings, result ---- */
.ag-ticker .tk-sheet { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(5, 8, 5, .62); }
.ag-ticker .tk-sheet[hidden] { display: none; }
.ag-ticker .tk-card { width: min(100%, 430px); max-height: 100%; overflow: auto; overscroll-behavior: contain; display: grid; gap: 10px; padding: 16px; border-radius: 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); user-select: text; -webkit-user-select: text; }
.ag-ticker .tk-card:focus { outline: none; }
.ag-ticker .tk-cols, .ag-ticker .tk-col { display: contents; }
.ag-ticker .tk-take { order: 1; }
.ag-ticker .tk-acts, .ag-ticker .tk-copied, .ag-ticker .tk-copybox, .ag-ticker .tk-col .tk-next { order: 2; }
@media (max-height: 560px) and (min-width: 640px) {
  .ag-ticker .tk-card.tk-two { width: min(100%, 780px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 22px; }
  .ag-ticker .tk-card.tk-two .tk-card-head { grid-column: 1 / -1; }
  .ag-ticker .tk-card.tk-two .tk-col { display: grid; gap: 10px; align-content: start; }
}
.ag-ticker .tk-card p { font-size: 15px; line-height: 1.45; }
.ag-ticker .tk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ag-ticker .tk-card h4 { font: 800 22px/1.15 var(--display); margin: 0; }
.ag-ticker .tk-x { width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; }
.ag-ticker .tk-demo { display: flex; gap: 5px; --tk-tile: 42px; margin-top: 2px; }
.ag-ticker .tk-demo-sm { --tk-tile: 36px; justify-content: center; }
.ag-ticker .tk-ex { margin-top: -4px; }
.ag-ticker .tk-fine { color: var(--muted); font-size: 14px !important; }
.ag-ticker .tk-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ag-ticker .tk-acts .btn { flex: 1 1 0; min-width: 120px; min-height: 46px; justify-content: center; font-size: 15px; border-radius: 10px; }
.ag-ticker .tk-res-sub { color: var(--muted); margin-top: -6px; }
.ag-ticker .tk-res-sub b { color: var(--ink); letter-spacing: .06em; }
.ag-ticker .tk-mini { display: grid; gap: 3px; justify-content: center; padding: 2px 0; }
.ag-ticker .tk-mini div { display: flex; gap: 3px; }
.ag-ticker .tk-mini i { width: 16px; height: 16px; border-radius: 3px; background: var(--tk-miss); }
.ag-ticker .tk-mini i[data-s="right"] { background: var(--tk-right); }
.ag-ticker .tk-mini i[data-s="near"] { background: var(--tk-near); }
.ag-ticker .tk-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; }
.ag-ticker .tk-nums[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-ticker .tk-nums div { display: grid; gap: 2px; padding: 8px 2px; border-radius: 10px; background: var(--raised); }
.ag-ticker .tk-nums b { font: 800 24px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.ag-ticker .tk-nums span { font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.ag-ticker .tk-dist-h { font: 600 11px var(--mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: -4px; }
.ag-ticker .tk-dist { display: grid; gap: 4px; }
.ag-ticker .tk-dbar { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; font: 600 13px var(--mono); }
.ag-ticker .tk-dbar i { display: flex; justify-content: flex-end; width: var(--w); min-width: 26px; padding: 3px 7px; border-radius: 4px; background: var(--tk-miss); color: var(--tk-miss-ink); font-style: normal; box-sizing: border-box; }
.ag-ticker .tk-dbar.on i { background: var(--tk-right); color: var(--tk-right-ink); }
.ag-ticker .tk-dbar b { font-weight: 700; }
.ag-ticker .tk-take { padding: 10px 12px; border-radius: 10px; background: var(--raised); border-left: 3px solid var(--accent); font-size: 14px !important; color: var(--ink); }
.ag-ticker .tk-next { text-align: center; color: var(--muted); font-size: 14px !important; }
.ag-ticker .tk-next b, .ag-ticker .tk-cd { font-family: var(--mono); color: var(--ink); font-weight: 600; }
.ag-ticker .tk-copied { text-align: center; color: var(--good); font-size: 14px !important; min-height: 0; }
.ag-ticker .tk-copied:empty { display: none; }
.ag-ticker .tk-copybox { width: 100%; font: 14px/1.3 var(--mono); padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); resize: none; }
.ag-ticker .tk-tabs { justify-self: center; }
.ag-ticker .tk-set { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ag-ticker .tk-set b { display: block; font-size: 15.5px; }
.ag-ticker .tk-set small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; margin-top: 2px; }
.ag-ticker .tk-switch { position: relative; width: 56px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.ag-ticker .tk-switch::before { content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 26px; border-radius: 999px; background: var(--tk-key); transition: background-color .15s; }
.ag-ticker .tk-switch i { position: absolute; left: 5px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .15s; }
.ag-ticker .tk-switch[aria-checked="true"]::before { background: var(--accent); }
.ag-ticker .tk-switch[aria-checked="true"] i { transform: translateX(24px); }

@media (prefers-reduced-motion: reduce) {
  .ag-ticker .tk-msg, .ag-ticker .tk-key, .ag-ticker .tk-switch i, .ag-ticker .tk-switch::before { transition: none; }
}