/* ===== Settings preview (gear menu) 2026-10-15 ===== */
/* text size */
html[data-size="small"] { font-size: 93.75%; }
html[data-size="large"] { font-size: 112.5%; }
/* pastel backgrounds: neutral text, light surfaces */
html[data-bg="blue"]   { --p-bg:#e6eefb; --p-card:#f4f7fd; --p-line:#c9d6ec; }
html[data-bg="yellow"] { --p-bg:#fbf4d6; --p-card:#fdfaec; --p-line:#e6dcae; }
html[data-bg="pink"]   { --p-bg:#fbe8ef; --p-card:#fdf4f7; --p-line:#ebcfda; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) {
  --bg: var(--p-bg) !important; --card: var(--p-card) !important; --panel: var(--p-card) !important; --soft: var(--p-card) !important;
  --line: var(--p-line) !important; --card-border: var(--p-line) !important; --ink: #1c1917 !important; --muted: #44403c !important;
  --ctl-bg: var(--p-card) !important; --ctl-fill: var(--p-card) !important; --ctl-line: var(--p-line) !important;
  --bar: color-mix(in srgb, var(--p-bg) 96%, transparent) !important;
}
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body { background: var(--p-bg) !important; color: #1c1917 !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body :is(.site-bar, .home-bar, header.home-head) { background: color-mix(in srgb, var(--p-bg) 96%, transparent) !important; border-color: var(--p-line) !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body :is(.tool-panel, .calc-card, .home-card, .home-tile, .game-foot a, .site-bar :is(a, button):not(.game-brand), .home-actions :is(a, button), .home-search input) {
  background: var(--p-card) !important; border-color: var(--p-line) !important; color: #1c1917 !important;
}
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body :is(.tool-lede, .home-tagline, .tool-how p, .tool-how li, .home-card p) { color: #44403c !important; }
/* simple reading: Atkinson + Easy read spacing, on any background (not boards / card faces) */
html[data-read="simple"] body :is(p, a, span, li, h1, h2, h3, h4, small, strong, b, button, input, textarea, select, label, dd, dt):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .cell, .tile, .sp-card *, body.war .war-shell *, body.war .arena *, body.war .lb-sheet *) {
  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-read="simple"] body :is(p, li, dd, .tool-lede, .home-tagline):not(body.war .war-shell *, body.war .lb-sheet *) { line-height: 1.7 !important; }
html[data-read="simple"] body :is(em, i, cite):not(body.war .war-shell *) { font-style: normal !important; }
/* hide old theme pill; gear lives in its place */
#game-theme, #home-theme { display: none !important; }
:is(.sh-gear, .sh-srch) { appearance: none; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; display: inline-grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--ctl-line, #e5e5e5); background: transparent; color: inherit; cursor: pointer; flex: 0 0 auto; }
:is(.sh-gear, .sh-srch) svg { width: 20px; height: 20px; }
:is(.sh-gear, .sh-srch):focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
:is(.sh-gear, .sh-srch)[aria-expanded="true"] { border-color: #bdbdbd; }
.sh-set { position: fixed; z-index: 1000; width: min(320px, calc(100vw - 16px)); box-sizing: border-box; padding: 14px; border-radius: 16px;
  background: #ffffff; color: #1c1917; border: 1px solid #e5e5e5; box-shadow: 0 12px 32px rgba(0,0,0,.22);
  font: 500 0.9rem/1.3 Inter, system-ui, sans-serif; }
.sh-set[hidden] { display: none; }
.sh-set h3 { margin: 0 0 6px; font: 600 0.72rem/1.2 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #525252; }
.sh-set .sh-sec + .sh-sec { margin-top: 14px; }
.sh-set .sh-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-set .sh-opt { appearance: none; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid #e5e5e5; background: #f5f5f5; color: #1c1917;
  font: 500 0.85rem/1 Inter, system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sh-set .sh-opt[aria-checked="true"] { background: #fafafa; outline: 2px solid #bdbdbd; outline-offset: 0; border-color: #bdbdbd; }
.sh-set .sh-opt:focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
.sh-set .sh-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.sh-set .sh-tog { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; width: 100%; appearance: none; border: 1px solid #e5e5e5;
  background: #f5f5f5; color: #1c1917; border-radius: 12px; padding: 0 12px; font: 500 0.9rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.sh-set .sh-sw { width: 40px; height: 24px; border-radius: 999px; background: #d4d4d4; position: relative; flex: 0 0 auto; }
.sh-set .sh-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.sh-set .sh-tog[aria-checked="true"] .sh-sw { background: #1c1917; }
.sh-set .sh-tog[aria-checked="true"] .sh-sw::after { left: 19px; }
.sh-set .sh-tog:focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
html[data-bg="dark"] .sh-set { background: #1d1d1d; color: #f2f2f2; border-color: #3a3a3a; }
html[data-bg="dark"] .sh-set h3 { color: #a3a3a3; }
html[data-bg="dark"] .sh-set :is(.sh-opt, .sh-tog) { background: #262626; color: #f2f2f2; border-color: #3a3a3a; }
html[data-bg="dark"] .sh-set .sh-opt[aria-checked="true"] { background: #2e2e2e; outline-color: #d4d4d4; border-color: #d4d4d4; }
html[data-bg="dark"] .sh-set .sh-sw { background: #525252; }
html[data-bg="dark"] .sh-set .sh-tog[aria-checked="true"] .sh-sw { background: #f2f2f2; }
html[data-bg="dark"] .sh-set .sh-tog[aria-checked="true"] .sh-sw::after { background: #141414; }
/* keep header one row */
.site-bar .game-actions, .home-actions { flex-wrap: nowrap !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body .site-bar .game-brand { background: transparent !important; border-color: transparent !important; }
/* 44px touch target without making the header taller */
html body .home-actions :is(.sh-gear, .sh-srch), html body .site-bar :is(.sh-gear, .sh-srch) { position: relative; z-index: 2; overflow: visible !important; height: 32px !important; min-height: 32px !important; width: 44px !important; }
html body :is(.sh-gear, .sh-srch)::before { content: "" !important; position: absolute !important; left: 0 !important; width: 44px !important; top: -6px !important; height: 44px !important; bottom: auto !important; display: block !important; background: transparent !important; }
/* 2026-10-15: pastel tints the WHOLE page (html, body, fixed backdrop layers, main wrappers) */
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]),
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body,
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body:not(.war) :is(.war-bg, .page-bg, .bg-layer, main, .tool-wrap, .home-frame, .home-wrap, .page) { background-color: var(--p-bg) !important; background-image: none !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body .sh-star { background: var(--p-card) !important; border-color: var(--p-line) !important; }
/* cats-vs-dogs (body.war): settings touch ONLY the page body and header; the game area keeps its own look */
html:has(body.war)[data-size] { font-size: 100% !important; }
html:has(body.war)[data-size="small"] body.war .site-bar { font-size: 93.75%; }
html:has(body.war)[data-size="large"] body.war .site-bar { font-size: 112.5%; }
/* cats-vs-dogs: chosen background behind the game (fixed layer), and the sound button text readable on light backgrounds */
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body.war .war-bg { background-color: var(--p-bg) !important; background-image: none !important; }
html:not([data-bg="dark"]) body.war .sound { color: #1c1917 !important; }
/* game pages in Blue/Yellow/Pink: card, controls and ad area follow the background (boards, pieces, felt, tiles untouched) */
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]):not(#sh-x):not(#sh-y) body:not(.war) :is(.wall-dock, .wall-dock-bar, .tool-panel, .k-panel, .ad-slot, .game-card, .game-panel) { background-color: var(--p-card) !important; background-image: none !important; border-color: var(--p-line) !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]):not(#sh-x):not(#sh-y) body:not(.war) :is(#zoom-in, #zoom-out, #zoom-reset, .k-btn, .diff-btn, .size-btn, .mode-btn, .chip-btn, .seg-btn, .tog-btn, .preset-btn, .mode-chip, [aria-pressed]):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card, .cell, .tile, .primary, .k-btn-ember, .dl-btn, .is-primary, .k-pause *, .sh-panel *) { background-color: var(--p-card) !important; border-color: var(--p-line) !important; color: #1c1917 !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]):not(#sh-x):not(#sh-y) body:not(.war) :is(#zoom-in, #zoom-out, #zoom-reset, .k-btn, .diff-btn, .size-btn, .mode-btn, .chip-btn, .seg-btn, .tog-btn, .preset-btn, .mode-chip, [aria-pressed]):is([aria-pressed="true"], [aria-selected="true"], .mode-on, .chip-on, .is-on, .active, .sel):not(.felt-table *, .k-felt *, .k-card, .k-card *, [class*="board"] *, [id*="board"] *, .bs-grid *, .mj-stage *, .sp-card, .cell, .tile, .primary, .k-btn-ember, .dl-btn, .is-primary, .k-pause *, .sh-panel *) { background-color: color-mix(in srgb, var(--p-line) 55%, var(--p-card)) !important; border-color: #a3a3a3 !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body.tool-page { --hb-bg: var(--p-bg) !important; --hb-card: var(--p-card) !important; --hb-line: var(--p-line) !important; --ctl-fill: color-mix(in srgb, var(--p-line) 55%, var(--p-card)) !important; --ctl-line: var(--p-line) !important; }
/* top bars are opaque in every theme so iOS Safari samples the theme colour, never content scrolling under a translucent bar */
html[data-bg="light"] body :is(.site-bar, .home-bar) { background-color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-bg="dark"] body :is(.site-bar, .home-bar) { background-color: #141414 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body :is(.site-bar, .home-bar) { background-color: var(--p-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }