/* New bar for game pages. Keeps the game layout offsets from styles.css. */

body.has-game-chrome {
  --site-bar-h: 4.25rem;
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #1c1917;
  --muted: #525252;
  --panel: rgba(255, 255, 255, 0.94);
  --bg: #ffffff;
  --accent: #4b5563;
  --accent-ink: #1c1917;
  --bar-bg: rgba(255, 255, 255, 0.94);
  --bar-line: #e5e5e5;
  --war-left: #f4efe6;
  --war-mid: #ffffff;
  --war-right: #e7eefc;
  --glow: rgba(47, 107, 255, 0.16);
  --card-a: #f5f5f5;
  --card-b: #ffffff;
  --card-c: #eef2fb;
  --card-border: #e5e5e5;
  --soon-bg: #f5f5f5;
  --soon-border: #e5e5e5;
  --input-bg: #f5f5f5;
  --input-border: #e5e5e5;
  --line: #e5e5e5;
  --preview-bg: #f5f5f5;
  --preview-line: rgba(0, 0, 0, 0.2);
  --overlay: rgba(12, 10, 14, 0.45);
  --board-bg: #f5f5f5;
  --aqua: var(--ink, #1c1917);
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .war-bg {
  color-scheme: light;
  background: #ffffff;
  color: #1c1917;
}

html[data-theme="dark"] body.has-game-chrome,
html[data-theme="dark"] body.has-game-chrome .war-bg {
  background: #141414;
}

body.has-game-chrome .site-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #e5e5e5;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: Inter, "Segoe UI", sans-serif;
  color: #1c1917;
}

html[data-theme="dark"] body.has-game-chrome .site-bar {
  background: rgba(20, 20, 20, 0.94);
  border-bottom-color: #3a3a3a;
  color: #f2f2f2;
}

.game-bar-inner {
  width: min(920px, calc(100% - 2.5rem));
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.game-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  font-family: "Space Grotesk", Inter, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  text-transform: none;
}

.game-brand img {
  width: 76px;
  height: 42px;
  flex: none;
}

.game-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.game-actions a,
.game-actions button {
  appearance: none;
  border: 1px solid #e5e5e5;
  background: transparent;
  color: inherit;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html[data-theme="dark"] body.has-game-chrome .game-actions a,
html[data-theme="dark"] body.has-game-chrome .game-actions button {
  border-color: #3a3a3a;
}

.game-actions a:hover,
.game-actions button:hover {
  border-color: currentColor;
}

.game-actions a:focus-visible,
.game-actions button:focus-visible,
.game-brand:focus-visible,
.game-foot a:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 3px;
}

.game-foot {
  margin-top: 1.5rem;
  padding: 0.4rem 0 0.2rem;
  border-top: 1px solid var(--line);
}

.game-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.game-foot a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.game-foot a:hover { border-color: var(--ink); }

.game-share-card {
  width: min(420px, calc(100vw - 2rem));
  background: #14161c;
  color: #f5f7fb;
  border: 0;
  border-radius: 18px;
  padding: 1.2rem;
  font-family: Inter, "Segoe UI", sans-serif;
}

.game-share-card::backdrop { background: rgba(12, 10, 14, 0.55); }

.game-share-card img { width: 92px; height: 52px; }

.game-share-card strong {
  display: block;
  margin-top: 0.8rem;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.2rem;
}

.game-share-card p {
  margin: 0.35rem 0 1rem;
  color: #c5c8d4;
  word-break: break-all;
}

.game-share-card menu {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.game-share-card button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #f5f7fb;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  cursor: pointer;
}

@media (max-width: 700px) {
  .game-brand { font-size: 0.95rem; gap: 0.45rem; }
  .game-brand img { width: 58px; height: 32px; }
  .game-actions a,
  .game-actions button { padding: 0 0.7rem; }
}

/* header-unify 2026-10-14: one-row header on every page; same lockup + pill buttons as home.css.
   Header-only; applies to cats-vs-dogs too (2026-10-14). */
body.has-game-chrome .game-brand { font-size: 1.1rem; gap: 0.85rem; flex: none; }
body.has-game-chrome .game-brand img { width: 76px; height: 42px; flex: none; }
body.has-game-chrome .game-brand span {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  line-height: 1.45;
  white-space: nowrap;
}
body.has-game-chrome .game-actions { gap: 0.4rem; flex: none; }
body.has-game-chrome .game-actions a,
body.has-game-chrome .game-actions button {
  border: 1px solid #e5e5e5;
  background: #ffffff;
  color: #1c1917;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 0.95rem;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}
html[data-theme="dark"] body.has-game-chrome .game-actions a,
html[data-theme="dark"] body.has-game-chrome .game-actions button { background: #1d1d1d; border-color: #3a3a3a; color: #f2f2f2; }
body.has-game-chrome .game-actions a:hover,
body.has-game-chrome .game-actions button:hover { border-color: currentColor; }
@media (max-width: 700px) {
  body.has-game-chrome .game-bar-inner { gap: 0.5rem; }
  body.has-game-chrome .game-brand { font-size: 0.875rem; gap: 0.5rem; }
  body.has-game-chrome .game-brand img { width: 58px; height: 32px; }
  body.has-game-chrome .game-actions { gap: 0.3rem; }
  body.has-game-chrome .game-actions a,
  body.has-game-chrome .game-actions button {
    min-height: 36px;
    padding: 0 0.6rem;
    font-size: 0.8125rem;
  }
}

/* page-inset 2026-10-14: game and tool pages keep a side inset (16px on phones, centred column on desktop),
   even where a page's own inline CSS sets the wrap to 100%. List markers get room. cats-vs-dogs (.war) is excluded. */
html body.tool-page:not(.war) .tool-wrap {
  width: min(48rem, calc(100% - 2rem)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body.tool-page:not(.war) .tool-wrap.wide { width: min(68rem, calc(100% - 2rem)) !important; }
html body.tool-page:not(.war) .tool-how ol,
html body.tool-page:not(.war) .tool-how ul { padding-left: 1.4rem; }

/* transparent game panel 2026-10-14 (checkers board panel takes the card colour); cats-vs-dogs excluded. */
html body.tool-page:not(.war) .ck-stage { background: transparent !important; }
/* no cream 2026-10-14: neutral light tones beat the pages' own warm --hb vars and checkers panel */
html[data-theme="light"] body.tool-page:not(.war) { --hb-muted: #525252; --hb-line: #e5e5e5; }
html body.tool-page:not(.war):has(.ck-board) .ck-stage { background: transparent !important; }
/* felt table 2026-10-14: one dark green felt for every solitaire-type game, same in light and dark
   (values are solitaire.html's dark felt, made solid). .felt-table / .felt-slot are the shared names. */
html body.tool-page:not(.war) .felt-table,
html body.tool-page:not(.war) .k-felt,
html body.tool-page:not(.war) .sp-board {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(76, 201, 240, 0.14), transparent 52%),
    linear-gradient(180deg, #162e26, #0f201a) !important;
  border: 1px solid rgba(140, 218, 240, 0.28) !important;
  border-radius: 14px !important;
}
html body.tool-page:not(.war) .sp-board { padding: 0.45rem 0.28rem 0.65rem; }
html body.tool-page:not(.war) .felt-slot,
html body.tool-page:not(.war) .k-felt .k-pile:not(.has-card),
html body.tool-page:not(.war) .sp-board .sp-col {
  background: rgba(0, 0, 0, 0.16) !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.55) !important;
}
html body.tool-page:not(.war) .k-felt .k-slot-mark { color: rgba(255, 255, 255, 0.58) !important; }
html[data-theme="light"] body.tool-page:not(.war) .k-pause p,
html[data-theme="light"] body.tool-page:not(.war) .k-pause .k-btn { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
html body.tool-page:not(.war) .k-felt .k-homes-lab { color: rgba(255, 255, 255, 0.58) !important; }

/* info lists 2026-10-14 v2: markers drawn inside each li so they never clip on iPhone (any text size). cats-vs-dogs (.war) excluded. */
html body:not(.war) article.tool-how, html body:not(.war) .tool-how, html body:not(.war) .wall-info { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }
html body:not(.war) .tool-how ol, html body:not(.war) .wall-info ol, html body:not(.war) .tool-how ul, html body:not(.war) .wall-info ul { list-style: none !important; margin: 0 0 0.62rem !important; padding: 0 !important; padding-inline-start: 0 !important; }
html body:not(.war) .tool-how ol, html body:not(.war) .wall-info ol { counter-reset: sh-item; }
html body:not(.war) .tool-how ol > li, html body:not(.war) .wall-info ol > li, html body:not(.war) .tool-how ul > li, html body:not(.war) .wall-info ul > li { list-style: none !important; position: relative !important; padding-left: 1.8em !important; margin-left: 0 !important; text-indent: 0 !important; }
html body:not(.war) .tool-how ol > li, html body:not(.war) .wall-info ol > li { counter-increment: sh-item; }
html body:not(.war) .tool-how ol > li::before, html body:not(.war) .wall-info ol > li::before { content: counter(sh-item) "." !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 1.6em !important; text-align: left !important; font-variant-numeric: tabular-nums; }
html body:not(.war) .tool-how ul > li::before, html body:not(.war) .wall-info ul > li::before { content: "\2022" !important; position: absolute !important; left: 0.35em !important; top: 0 !important; width: 1em !important; }

/* header px caps 2026-10-14: at phone widths the top bar stays one row and does not grow with root/iOS text size. */
@media (max-width: 600px) {
  html body .game-bar-inner, html body .home-bar-inner { flex-wrap: nowrap !important; gap: 6px !important; min-width: 0 !important; }
  html body .game-brand, html body .home-brand { gap: 6px !important; min-width: 0 !important; flex: 0 1 auto !important; overflow: hidden !important; }
  html body .game-brand img, html body .home-brand img { height: 28px !important; width: auto !important; max-width: 52px !important; flex: 0 0 auto !important; }
  html body .game-brand span, html body .home-brand h1 { font-size: 13px !important; line-height: 16px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; letter-spacing: 0 !important; }
  html body .game-actions, html body .home-actions { gap: 4px !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; margin-left: auto !important; }
  html body .game-actions > a, html body .game-actions > button, html body .home-actions > a, html body .home-actions > button {
    font-size: 12px !important; line-height: 1 !important; height: 32px !important; min-height: 32px !important; padding: 0 9px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; flex: 0 0 auto !important; }
  html body .home-actions > .card-size-btn, html body .game-actions > .card-size-btn { width: 32px !important; min-width: 32px !important; padding: 0 !important; }
  html body .home-actions svg, html body .game-actions svg { width: 16px !important; height: 16px !important; }
}
@media (max-width: 360px) {
  html body .game-brand span, html body .home-brand h1 { font-size: 12px !important; }
  html body .game-brand img, html body .home-brand img { height: 24px !important; }
}
/* control rows may wrap (large text) */
html body:not(.war) .indent-row { flex-wrap: wrap !important; }

/* 2026-10-14 divider standard: exactly one 1px line, between the panel and How to use it; none above the footer pills */
html body:not(.war) article.tool-how, html body:not(.war) .tool-wrap > .tool-how {
  border-top: 1px solid #e5e5e5 !important; border-bottom: 0 !important; padding-top: 1.1rem !important;
}
html[data-theme="dark"] body:not(.war) article.tool-how, html[data-theme="dark"] body:not(.war) .tool-wrap > .tool-how { border-top-color: rgba(255, 255, 255, 0.12) !important; }
html body:not(.war) .game-foot, html body:not(.war) .game-foot nav, html body:not(.war) .tool-how ~ .ad-slot, html body:not(.war) .tool-how ~ footer, html body:not(.war) .tool-how ~ footer nav, html body:not(.war) .tool-how ~ .dw-foot { border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
html body:not(.war) .tool-how ~ hr, html body:not(.war) .tool-how hr, html body:not(.war) .tool-panel ~ hr { display: none !important; }

/* ===== Easy read (site-wide, 2026-10-15): light colours + data-easy overlay. Boards, felt and card faces are left alone. ===== */
html[data-easy="1"] { color-scheme: light; }
html[data-easy="1"] body,
html[data-easy="1"][data-theme] body.tool-page,
html[data-easy="1"][data-theme] body.has-game-chrome {
  --bg: #e8eef4 !important; --panel: #f4f7fa !important; --card: #f4f7fa !important; --ink: #2b2f36 !important;
  --muted: #2b2f36 !important; --line: #c9d3dd !important; --card-border: #c9d3dd !important; --bar-line: #c9d3dd !important;
  --hb-bg: #e8eef4 !important; --hb-card: #f4f7fa !important; --hb-ink: #2b2f36 !important; --hb-muted: #2b2f36 !important; --hb-line: #c9d3dd !important;
  background: #e8eef4 !important; color: #2b2f36 !important;
}
html[data-easy="1"] body .war-bg { background: #e8eef4 !important; }
html[data-easy="1"] body .site-bar { background: rgba(232, 238, 244, 0.96) !important; border-bottom-color: #c9d3dd !important; color: #2b2f36 !important; }
html[data-easy="1"] body .site-bar :is(a, button) { background: #f4f7fa !important; border-color: #c9d3dd !important; color: #2b2f36 !important; }
html[data-easy="1"] body .site-bar .game-brand { background: transparent !important; }
html[data-easy="1"] body :is(.tool-panel, .calc-card) { background: #f4f7fa !important; border-color: #c9d3dd !important; color: #2b2f36; }
html[data-easy="1"] body :is(.tool-head h1, .tool-lede, .tool-back, .tool-how, .tool-how *, .game-foot a) { color: #2b2f36 !important; }
html[data-easy="1"] body :is(article.tool-how, .tool-wrap > .tool-how) { border-top-color: #c9d3dd !important; }
html[data-easy="1"] body .game-foot a { background: #f4f7fa !important; border-color: #c9d3dd !important; }
/* Atkinson Hyperlegible, wider spacing, no italics: text and controls only (not board cells or card faces) */
html[data-easy="1"] body :is(.site-bar, .site-bar *, .tool-head, .tool-head *, .tool-back, .tool-how, .tool-how *, .game-foot, .game-foot *,
  .tool-panel label, .tool-panel .field-k, .tool-panel .status, .tool-panel .k-status, .tool-panel .cf-line, .tool-panel .k-stat-l,
  .tool-panel :is(.k-btn, .chip-btn, .act-btn, .ratio-btn, .mode-btn, .tog-btn, .preset-btn, .step-btn, .copy-btn, .size-btn, .dl-btn, .mode-chip, .circle-board-btn),
  .tool-panel :is(input, textarea, select)) {
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0.03em !important;
  word-spacing: 0.1em;
}
html[data-easy="1"] body :is(.tool-how p, .tool-how li, .tool-lede) { line-height: 1.7 !important; }
html[data-easy="1"] body :is(.tool-how, .tool-head, .tool-lede) :is(em, i, cite) { font-style: normal !important; }
html[data-easy="1"] body .site-bar .game-actions :is(a, button) { white-space: nowrap; }

/* ===== 2026-10-15 colour cleanup (tools + games): no gold/cream/brown/aqua/light blue; grey lines, main blue accent/focus.
   Boards, pieces and felt are excluded (NB = not inside a board). The #category tag pill is not touched. ===== */
html[data-kind] body { --aqua: var(--ink) !important; }
html[data-theme="dark"][data-kind] body {
  --ink: #f2f2f2 !important; --muted: #a3a3a3 !important; --line: rgba(255,255,255,0.12) !important;
  --card-border: #3a3a3a !important; --input-border: #3a3a3a !important; --bar-line: #2a2a2a !important;
  --accent: #f2f2f2 !important; --glow: rgba(47,107,255,0.35) !important; --gold: #a3a3a3 !important; --aqua: #f2f2f2 !important;
  color: #f2f2f2;
}
html[data-theme="dark"][data-kind] body .tool-panel :is(button, input, select, textarea, .calc-card, .field, .stat, .result, .well, .out, .chip-row > *, [class*="-box"], [class*="-card"], [class*="preset"], [class*="chip"], [class*="stat"], [class*="-btn"], .drop, pre, table, th, td):not(.felt-table *, .k-felt *, .k-card, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card) {
  border-color: #3a3a3a !important;
}
html[data-theme="dark"][data-kind] body .tool-panel :is(.k-status, .status, [class*="stat"], [class*="-btn"], label, .k-stat-l, .k-stat-n, b, strong, h2, h3):not(.felt-table *, .k-felt *, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card *) { color: #f2f2f2 !important; }
html[data-theme="dark"][data-kind] body .tool-panel :is(.primary, .act-btn.primary, .dl-btn, .k-btn-ember) { border-color: var(--ctl-line, #3a3a3a) !important; }
html[data-kind] body .tool-panel :is(button, input, select, textarea, a):focus-visible { outline: 1px solid var(--ctl-sel, #9ca3af) !important; outline-offset: 1px; box-shadow: none !important; }
html[data-kind] body .tool-panel :is(input, textarea, select):focus { outline: 1px solid #2f6bff !important; outline-offset: 0; box-shadow: none !important; }
html[data-kind] body .tool-panel :focus-within:not(.felt-table, [class*="board"]) { box-shadow: none !important; }
html[data-kind] body .tool-panel progress { accent-color: var(--ctl-ink) !important; }
html[data-kind] body .tool-panel :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ctl-ink, #1c1917) !important; }
/* game stat boxes outside the board (quiet-redesign pages): neutral grey */
html[data-theme="dark"][data-kind] body :is(.g2048-score, .ms-lcd-well, .rv-score, .sp-hud > span, .k-stat) { border-color: #3a3a3a !important; color: #f2f2f2 !important; }
html[data-theme="dark"][data-kind] body :is(.g2048-score, .ms-lcd-well, .rv-score, .sp-hud > span, .k-stat) * { color: #f2f2f2 !important; }
html[data-kind] body .tool-panel :is(.ok, .is-ok, .good, .success)::before { color: var(--ctl-ink) !important; }
/* plain info boxes (Pixels / Status heroes): flat card, thin grey border, no gradient or blue */
html[data-kind="tool"] body .tool-panel .hero { background: var(--card, #fff) !important; background-image: none !important; border: 1px solid #e5e5e5 !important; box-shadow: none !important; }
html[data-theme="dark"][data-kind="tool"] body .tool-panel .hero { background: #1d1d1d !important; border-color: #3a3a3a !important; }
html[data-easy="1"][data-kind="tool"] body .tool-panel .hero { background: #f4f7fa !important; border-color: #c9d3dd !important; }
html[data-theme="dark"][data-kind] body .tool-panel :is(#sc-b, #sc-w, #score, #best-wrap, .sp-hud > span, .ms-lcd-well):is(*, .x) { border-color: #3a3a3a !important; color: #f2f2f2 !important; }
html[data-theme="dark"][data-kind] body .tool-panel :is(#sc-b, #sc-w).is-turn, html[data-theme="dark"][data-kind] body .tool-panel :is(#sc-b, #sc-w)[aria-current] { border-color: #d4d4d4 !important; }

/* ===== 2026-10-15 control standard (model: the feedback form on /contact.html) =====
   Tokens: --ctl-line (pill/input border), --ctl-fill (input + selected pill fill), --ctl-sel (selected outline).
   Focus = thin site-blue outline. Blue also for checked / slider / primary. Boards, felt and cats-vs-dogs excluded. */
html[data-kind] body { --ctl-line: #e5e5e5; --ctl-fill: #f5f5f5; --ctl-sel: #bdbdbd; --ctl-ink: #1c1917; }
html[data-theme="dark"][data-kind] body { --ctl-line: #3a3a3a; --ctl-fill: #262626; --ctl-sel: #d4d4d4; --ctl-ink: #f2f2f2; }
html[data-easy="1"][data-kind] body { --ctl-line: #c9d3dd; --ctl-fill: #e8eef4; --ctl-sel: #9aa5b1; --ctl-ink: #2b2f36; }
html[data-kind] body .tool-panel :is(.mode-btn, .chip-btn, .ratio-btn, .tog-btn, .seg-btn, .size-btn, .preset-btn, .mode-chip, [role="tab"], [aria-pressed], .k-seg button, .seg button, .k-toggle button):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card, .cell, .tile) { border: 1px solid var(--ctl-line) !important; border-radius: 999px !important; background: transparent !important; color: var(--ctl-ink) !important; box-shadow: none !important; }
html[data-kind] body .tool-panel :is(.mode-btn, .chip-btn, .ratio-btn, .tog-btn, .seg-btn, .size-btn, .preset-btn, .mode-chip, [role="tab"], [aria-pressed], .k-seg button, .seg button, .k-toggle button):is([aria-pressed="true"], [aria-selected="true"], .mode-on, .chip-on, .is-on, .on, .active, .is-active, .sel):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card, .cell, .tile) { border-color: var(--ctl-sel) !important; background: var(--ctl-fill) !important; color: var(--ctl-ink) !important; box-shadow: none !important; }
html[data-kind] body .tool-panel :is(.k-seg, .seg, .mode-row, .k-toggle):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card, .cell, .tile) { background: transparent !important; box-shadow: none !important; }
html[data-kind] body .tool-panel :is(input:not([type]), input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card, .cell, .tile) { background: var(--ctl-fill) !important; border: 1px solid var(--ctl-line) !important; border-radius: 12px !important; color: var(--ctl-ink) !important; box-shadow: none !important; }
html[data-kind] body .tool-panel :is(input:not([type]), input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card, .cell, .tile):focus, html[data-kind] body .tool-panel :is(.mode-btn, .chip-btn, .ratio-btn, .tog-btn, .seg-btn, .size-btn, .preset-btn, .mode-chip, [role="tab"], [aria-pressed], .k-seg button, .seg button, .k-toggle button):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card, .cell, .tile):focus-visible { outline: 1px solid #2f6bff !important; outline-offset: 1px !important; box-shadow: none !important; }

/* ===== LOCKED PALETTE (William, 15 Oct 2026): blue #2f6bff ONLY for text-input focus outlines and slider fill/thumb ===== */
html[data-kind] body .tool-panel :is(button, .act-btn, .k-btn, [class*="-btn"]):not(.felt-table *, [class*="board"] *, [id*="board"] *, .bs-grid *, .cell, .tile, .k-card):is(.primary, .k-btn-ember, .dl-btn, .is-primary) { background: var(--ctl-ink) !important; color: var(--ctl-bg, #fff) !important; border-color: var(--ctl-ink) !important; }
html[data-kind] body { --ctl-bg: #ffffff; }
html[data-theme="dark"][data-kind] body { --ctl-bg: #141414; }
html[data-easy="1"][data-kind] body { --ctl-bg: #f4f7fa; }
html[data-kind] body .tool-panel a:not(.felt-table *, [class*="board"] *) { color: var(--ctl-ink) !important; }
html[data-kind] body .tool-panel :is(.seg, .strength-meter .seg, .meter > span, progress)::-webkit-progress-value { background: var(--ctl-ink) !important; }
html[data-kind] body .tool-panel .strength-meter .seg[style], html[data-kind] body .tool-panel .strength-meter[data-filled] .seg { }
html[data-kind] body .tool-panel :is(button, [class*="-btn"]):focus-visible:not(.felt-table *, [class*="board"] *) { outline: 1px solid var(--ctl-sel) !important; }

/* sliders: neutral grey track/fill, ONLY the handle is blue */
html[data-kind] body .tool-panel input[type="range"] { -webkit-appearance: none !important; appearance: none !important; accent-color: #9ca3af !important; background: transparent !important; height: 28px !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html[data-kind] body .tool-panel input[type="range"]::-webkit-slider-runnable-track { height: 6px !important; border-radius: 999px !important; background: var(--ctl-line, #e5e5e5) !important; border: 0 !important; box-shadow: none !important; }
html[data-kind] body .tool-panel input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; width: 22px !important; height: 22px !important; margin-top: -8px !important; border-radius: 50% !important; background: #2f6bff !important; border: 2px solid #fff !important; box-shadow: 0 0 0 1px rgba(0,0,0,.15) !important; }
html[data-kind] body .tool-panel input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ctl-line, #e5e5e5) !important; border: 0; }
html[data-kind] body .tool-panel input[type="range"]::-moz-range-progress { background: var(--ctl-line, #e5e5e5) !important; }
html[data-kind] body .tool-panel input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #2f6bff !important; border: 2px solid #fff; }
html[data-kind] body .tool-panel input[type="range"]:focus-visible { outline: 1px solid #9ca3af !important; }
html[data-theme="dark"][data-kind] body .tool-panel input[type="range"]::-webkit-slider-thumb { border-color: #141414 !important; }
/* strength meter segments: neutral, not pill controls */
html[data-kind] .strength-meter .seg{background:var(--ctl-line)!important;border:0!important;padding:0!important;min-height:0!important;height:6px!important;border-radius:3px!important;flex:1}
html[data-kind] .strength-meter[data-filled="1"] .seg:nth-child(-n+1),html[data-kind] .strength-meter[data-filled="2"] .seg:nth-child(-n+2),html[data-kind] .strength-meter[data-filled="3"] .seg:nth-child(-n+3),html[data-kind] .strength-meter[data-filled="4"] .seg:nth-child(-n+4){background:var(--ctl-ink)!important}
/* TOASTS / HINT PILLS: dark neutral pill, white text, every theme */
html[data-kind] body .k-status.k-status.k-status,
html[data-kind] body .tool-panel .k-status.k-status.k-status,
html[data-kind] body .copy-toast.copy-toast{background:#1c1c1c !important;color:#fff !important;border:1px solid rgba(255,255,255,.14) !important;}
html[data-kind] body .tool-panel .k-status.k-status.k-status *{color:#fff !important;}
/* "No moves left" box: neutral, readable in every theme */
html[data-kind] body .sh-dead{background:var(--ctl-bg,#fff) !important;color:var(--ctl-ink) !important;border:1px solid var(--ctl-line) !important}
html[data-kind] body .sh-dead .sh-dead-b{background:var(--ctl-fill) !important;color:var(--ctl-ink) !important;border:1px solid var(--ctl-line) !important}
html[data-kind] body .sh-dead .sh-dead-b.sh-dead-p{background:var(--ctl-ink) !important;color:var(--ctl-bg,#fff) !important;border-color:var(--ctl-ink) !important}
/* SHARE SHEET: centred, clamped to viewport, neutral in every theme */
dialog.game-share-card{position:fixed !important;inset:0 !important;margin:auto !important;height:fit-content;max-height:calc(100dvh - 2rem);width:min(420px,calc(100vw - 2rem)) !important;box-sizing:border-box;overflow:auto;background:#ffffff !important;color:#1c1917 !important;border:1px solid #e5e5e5 !important;box-shadow:0 12px 32px rgba(0,0,0,.28)}
dialog.game-share-card p{color:#525252 !important}
dialog.game-share-card button{color:#1c1917 !important;border-color:#d4d4d4 !important;background:#f5f5f5 !important}
html[data-theme="dark"] dialog.game-share-card{background:#1d1d1d !important;color:#f2f2f2 !important;border-color:#3a3a3a !important}
html[data-theme="dark"] dialog.game-share-card p{color:#a3a3a3 !important}
html[data-theme="dark"] dialog.game-share-card button{color:#f2f2f2 !important;border-color:#3a3a3a !important;background:#262626 !important}
html[data-easy="1"] dialog.game-share-card{background:#f4f7fa !important;color:#2b2f36 !important;border-color:#c9d3dd !important}
html[data-easy="1"] dialog.game-share-card p{color:#4a5260 !important}
html[data-easy="1"] dialog.game-share-card button{color:#2b2f36 !important;border-color:#c9d3dd !important;background:#e8eef4 !important}
dialog.game-share-card img{filter:none}
/* range inputs: neutral text colour (no warm grey) in every theme */
html[data-kind] body input[type="range"]{color:var(--ctl-ink) !important}
/* SHARE SHEET: centre on the full viewport width, independent of scrollbar gutter */
dialog.game-share-card{inset:auto !important;top:50% !important;left:50vw !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important;margin:0 !important;width:min(420px,calc(100vw - 2rem)) !important}
/* toasts never block taps */
html[data-kind] body .k-status, html[data-kind] body .copy-toast, html[data-kind] body .dw-share-toast, html[data-kind] body .sh-toast { pointer-events: none !important; }