/* site extras 2026-10-15 (locked palette: neutral; blue only on input focus + slider handle) */
.sx-more, .sx-recent:not(.home-genre) { margin: 1.1rem 0 0.6rem; }
.sx-recent:not(.home-genre) { margin: 0.4rem 0 1rem; }
/* section headings match the home tagline exactly (v577) */
html body .sx-h { margin: 1.7rem 0 1.25rem !important; padding: 0 !important; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 1.12rem !important; font-weight: 500 !important; line-height: 1.45; font-style: normal; font-variant: normal !important; text-transform: none !important; letter-spacing: normal !important; color: #4b5563 !important; }
html[data-read="simple"] body .sx-h { line-height: 1.7 !important; }
.sx-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sx-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.85rem; border-radius: 999px; border: 1px solid var(--ctl-line, #e5e5e5);
  background: var(--ctl-fill, #f5f5f5); color: var(--ink, #1c1917) !important; text-decoration: none !important; font: 500 0.88rem/1.1 Inter, system-ui, sans-serif; max-width: 100%; }
.sx-chip:hover { border-color: var(--ctl-sel, #bdbdbd); }
.sx-chip:focus-visible, .sx-report a:focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
html body .sx-report { margin: 0.6rem 0 0 !important; font: inherit; font-size: 0.95em; color: inherit; }
.sx-report a { color: var(--ink, #1c1917) !important; text-decoration: underline; text-underline-offset: 0.15em; display: inline; min-height: 24px; padding: 0.3rem 0; }
html[data-theme="dark"] .sx-chip { background: #262626; border-color: #3a3a3a; color: #f2f2f2 !important; }
html[data-theme="dark"] body .sx-h { color: #a3a3a3 !important; }
html[data-theme="dark"] .sx-report a { color: #f2f2f2 !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-chip { background: var(--p-card) !important; border-color: var(--p-line) !important; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body .sx-h { color: #44403c !important; }
html[data-theme="easy"] body .sx-h { color: #2b2f36 !important; }
.sx-toast { position: fixed; left: 50vw; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); z-index: 2000;
  background: #1c1c1c; color: #fff; border: 1px solid rgba(255,255,255,.14); padding: 0.55rem 1rem; border-radius: 999px;
  font: 600 0.88rem/1.2 Inter, system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }
.sx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* old per-page copy toasts are replaced by the shared one */
.copy-toast { display: none !important; }

/* Recently used / Related use the menu card component (.home-grid/.home-card from home.css or the generated home-cards.css).
   Colours only for pages without home.css (sizes come from the shared card rules). */
.sx-own { --card: #ffffff; --line: #e5e5e5; --ink: #1c1917; --muted: #525252; --soft: transparent; }
html[data-theme="dark"] .sx-own { --card: #1d1d1d; --line: #3a3a3a; --ink: #f2f2f2; --muted: #a3a3a3; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-own { --card: var(--p-card); --line: var(--p-line); --ink: #1c1917; --muted: #44403c; }
.sx-own .home-card { color: var(--ink) !important; }
.sx-own .home-card h3 { color: var(--ink); }
.sx-cards .home-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sx-howrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: nowrap; min-width: 0; }
.sx-howrow > h3 { flex: 1 1 auto; min-width: 0; }
.sx-report-link { flex: 0 0 auto; white-space: nowrap; font: 500 0.8rem/1.3 Inter, system-ui, sans-serif; color: var(--ink, #1c1917) !important; text-decoration: underline; text-underline-offset: 0.15em; padding: 0.35rem 0; }
html[data-theme="dark"] .sx-report-link { color: #f2f2f2 !important; }
.sx-report-link:focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
/* pages without home.css: same frame inset and type as the menu pages (home.css .home-frame = 100% - 2.5rem; tool-wrap = 100% - 2rem) */
.sx-own { margin-left: 0.25rem; margin-right: 0.25rem; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.45; }
html body:not(#sh-x) .sx-own .home-card h3 { font-family: "Space Grotesk", sans-serif !important; line-height: 1.45; }
html body:not(#sh-x) .sx-own .home-card p { font-family: "IBM Plex Sans", "Segoe UI", sans-serif !important; line-height: 1.45; }

/* site search overlay (locked palette: neutral; blue only on the input focus outline) */
.sx-search { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.35); display: flex; justify-content: center; align-items: flex-start; padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) 0.75rem 0.75rem; overflow-y: auto; overscroll-behavior: contain; }
.sx-search[hidden] { display: none; }
html.sx-search-open, html.sx-search-open body { overflow: hidden; }
.sx-search-box { width: min(920px, 100%); background: #ffffff; color: #1c1917; border: 1px solid #e5e5e5; border-radius: 16px; padding: 0.75rem; box-sizing: border-box; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; }
.sx-search-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.sx-search-in { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 0.85rem; border: 1px solid #d4d4d4; border-radius: 999px; background: #f5f5f5; color: #1c1917; font: 500 1rem/1.2 "IBM Plex Sans", "Segoe UI", sans-serif; -webkit-appearance: none; appearance: none; }
html body .sx-search-in:focus { outline: 1px solid #2f6bff !important; outline-offset: 1px; box-shadow: none !important; }
.sx-search-x { flex: none; min-height: 44px; padding: 0 0.9rem; border: 1px solid #d4d4d4; border-radius: 999px; background: transparent; color: #1c1917; font: 500 0.9rem/1 "IBM Plex Sans", "Segoe UI", sans-serif; cursor: pointer; }
.sx-search-x:focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
.sx-tabs { display: flex; flex-wrap: nowrap; gap: 0.3rem; margin: 0 0 0.75rem; }
.sx-tab { appearance: none; flex: 0 1 auto; min-width: 0; min-height: 40px; padding: 0 0.7rem; border: 1px solid #e5e5e5; border-radius: 999px; background: transparent; color: #1c1917; font: 500 0.9rem/1 "IBM Plex Sans", "Segoe UI", sans-serif; cursor: pointer; white-space: nowrap; box-shadow: none; }
.sx-tab[aria-selected="true"] { border-color: #bdbdbd; background: #f5f5f5; }
.sx-tab:focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
html[data-theme="dark"] .sx-tab { border-color: #3a3a3a; color: #f2f2f2; }
html[data-theme="dark"] .sx-tab[aria-selected="true"] { border-color: #d4d4d4; background: #262626; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-tab { border-color: var(--p-line, #d6d3d1); color: #1c1917; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-tab[aria-selected="true"] { border-color: #a8a29e; background: rgba(255, 255, 255, 0.6); }
.sx-grp { grid-column: 1 / -1; margin: 0.5rem 0 0; font: 600 0.95rem/1.3 "IBM Plex Sans", "Segoe UI", sans-serif; color: #525252; }
html[data-theme="dark"] .sx-grp { color: #a3a3a3; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-grp { color: #44403c; }
.sx-search-empty { margin: 0.25rem 0.25rem 0.75rem; color: #525252; font-size: 0.95rem; }
.sx-search .sx-own { margin-left: 0; margin-right: 0; }
html[data-theme="dark"] .sx-search-box { background: #1d1d1d; color: #f2f2f2; border-color: #3a3a3a; }
html[data-theme="dark"] .sx-search-in { background: #262626; color: #f2f2f2; border-color: #3a3a3a; }
html[data-theme="dark"] .sx-search-x { color: #f2f2f2; border-color: #3a3a3a; }
html[data-theme="dark"] .sx-search-empty { color: #a3a3a3; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-search-box { background: var(--p-bg); border-color: var(--p-line); }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-search-in { background: var(--p-card); border-color: var(--p-line); }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-search-x { border-color: var(--p-line); }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-search-empty { color: #44403c; }

/* header (v577 final): logo | right fixed slots: back link (reserved, empty on menus), Share, search, block-size (reserved), gear. fixed grid, px only, so text size / Simple reading / page content can never move the icons.
   logo | centre (back link on tool/game pages, empty on menus) | Share, search, block-size slot, gear */
html body .sx-hrow { display: grid !important; grid-template-columns: minmax(0, 1fr) 40px 40px 40px 40px; column-gap: 4px; align-items: center;
  box-sizing: border-box !important; width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 8px 12px !important; min-height: 56px; height: 56px; position: relative; flex-wrap: nowrap !important; gap: 0 4px !important; }
html body .sx-hrow > :is(.home-actions, .game-actions) { display: contents !important; }
html body .sx-hrow > :is(.home-brand, .game-brand) { grid-column: 1; display: flex !important; align-items: center; gap: 6px; min-width: 0; max-width: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; }
html body .sx-hrow > :is(.home-brand, .game-brand) img { width: 52px !important; height: 29px !important; flex: none; margin: 0 !important; }
html body .sx-hrow > :is(.home-brand, .game-brand) > :not(img) { font-size: 17px !important; line-height: 22px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: 0 !important; }
html body .sx-hrow :is(.sx-shr, .sh-srch, .card-size-btn, .sx-backic, .sx-slot, .sh-gear) { box-sizing: border-box !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; position: static !important; transform: none !important; font-size: 14px !important; line-height: 1 !important; }
html body .sx-hrow :is(.sh-srch, .card-size-btn, .sx-backic, .sx-slot, .sh-gear) { width: 40px !important; min-width: 40px !important; max-width: 40px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
html body .sx-hrow .sx-shr { position: absolute !important; left: 50% !important; top: 8px !important; transform: translateX(calc(-50% + var(--sx-dx, 0px))) !important; z-index: 1; width: 88px !important; min-width: 88px !important; max-width: 88px !important; font-family: Inter, "Segoe UI", system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 0 12px !important; white-space: nowrap; }
html body .sx-hrow .sh-srch { grid-column: 4; }
html body .sx-hrow :is(.sx-backic, .sx-slot) { grid-column: 2; }
html body .sx-hrow .card-size-btn { grid-column: 3; }
html body .sx-hrow .sx-slot { visibility: hidden; }
html body .sx-hrow .sh-gear { grid-column: 5; }
html body .sx-hrow :is(.card-size-btn, .sx-backic) { border: 1px solid #e5e5e5 !important; border-radius: 999px !important; background: #fff !important; color: #1c1917 !important; box-shadow: none !important; text-decoration: none !important; }
html[data-theme="dark"] body .sx-hrow :is(.card-size-btn, .sx-backic) { border-color: #3a3a3a !important; background: #1d1d1d !important; color: #f2f2f2 !important; }
html body .sx-hrow .sx-backic:focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
html body .sx-hrow .sx-backic svg { width: 18px; height: 18px; }
html body .sx-hrow :is(.home-actions, .game-actions) > :not(.sx-shr, .sh-srch, .card-size-btn, .sx-backic, .sx-slot, .sh-gear, script) { display: none !important; }
.sx-shr .sx-ico { width: 18px; height: 18px; flex: none; }
/* Share is a centred text pill on every screen size; narrower at phone widths so the wordmark always clears it */
html body .sx-hrow .sx-shr .sx-ico { display: none !important; }
@media (max-width: 600px) {
  html body .sx-hrow .sx-shr { width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding: 0 !important; font-size: 13px !important; }
  html body .sx-hrow .sx-shr { width: 64px !important; min-width: 64px !important; max-width: 64px !important; }
}
@media (max-width: 440px) {
  html body .sx-hrow { padding: 8px 8px !important; column-gap: 2px; gap: 0 2px !important; grid-template-columns: minmax(0, 1fr) 36px 36px 36px 36px; }
  html body .sx-hrow :is(.sh-srch, .card-size-btn, .sx-backic, .sx-slot, .sh-gear) { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; }
  html body .sx-hrow .sx-shr { top: 10px !important; height: 36px !important; min-height: 36px !important; }
  html body .sx-hrow > :is(.home-brand, .game-brand) img { width: 32px !important; height: 18px !important; }
  html body .sx-hrow > :is(.home-brand, .game-brand) { gap: 4px; }
  html body .sx-hrow > :is(.home-brand, .game-brand) > :not(img) { font-size: 14px !important; }
}
html body :is(.home-bar, .site-bar):has(> .sx-hrow) { display: block !important; min-height: 0 !important; height: auto !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* shared footer (v580): plain links, follows background + text size */
.sx-foot { margin: 2rem auto 0; padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e5e5e5; max-width: 1180px; box-sizing: border-box; }
.sx-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; }
.sx-foot a { color: #525252; font: 400 0.92rem/1.6 "IBM Plex Sans", "Segoe UI", sans-serif; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.sx-foot a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.sx-foot a:focus-visible { outline: 1px solid #9ca3af; outline-offset: 2px; }
html[data-theme="dark"] .sx-foot { border-top-color: #3a3a3a; }
html[data-theme="dark"] .sx-foot a { color: #a3a3a3; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-foot { border-top-color: var(--p-line, #d6d3d1); }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) .sx-foot a { color: #44403c; }

/* Related / Recently used: 6 cards. Phone widths: Medium = 2 rows of 3, Small = 3 columns (compact), Large = 2 columns */
@media (max-width: 560px) {
  html body .home-grid.sx-cards:not(.sx-search-res) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.5rem !important; }
  html[data-cards="large"] body .home-grid.sx-cards:not(.sx-search-res) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; }
}

/* pages whose info block sits outside .tool-wrap (e.g. Perfect Circle): Related + spacing */
html body .page-how { margin-bottom: 1.5rem !important; }
html body > .sx-more { box-sizing: border-box; width: min(48rem, calc(100% - 2rem)); margin: 0 auto 2rem; padding: 0 20px; }
/* Report a problem beside the page title (v584) */
html body .sx-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; min-width: 0; }
html body .sx-titlerow > h1 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
html body .sx-titlerow > .sx-report-link { flex: 0 0 auto; margin-top: 0.45em; }
html body .sx-reportrow { box-sizing: border-box; width: 100%; margin: 0 0 0.35rem; padding: 0 10px; display: flex; justify-content: flex-end; }
/* cats-vs-dogs (v586): page scrolls; the game stays one full screen at the top; info block = Minesweeper's (.tool-how + game-chrome list/divider rules) */
html:has(body.war), html body.war { position: static !important; inset: auto !important; height: auto !important; max-height: none !important; overflow-x: hidden !important; overflow-y: visible !important; overscroll-behavior: auto !important; touch-action: auto !important; }

html body.war .cvd-info { --ink: #1c1917; --accent: #2f6bff; position: relative; z-index: 2; margin-top: 100dvh; display: flow-root; padding: 0 0 1rem; background: #ffffff; color: var(--ink); touch-action: auto; }
html[data-theme="dark"] body.war .cvd-info { --ink: #f2f2f2; background: #141414; }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body.war .cvd-info { background: var(--p-bg); }
html body.war .cvd-info > .tool-how, html body.war .cvd-info > .sx-more { box-sizing: border-box !important; width: min(40rem, calc(100% - 2rem)); max-width: 40rem; margin-left: auto; margin-right: auto; }
html body.war .cvd-info > .tool-how { padding-left: 20px !important; padding-right: 20px !important; border-top: 1px solid #e5e5e5 !important; border-bottom: 0 !important; padding-top: 1.1rem !important; }
html[data-theme="dark"] body.war .cvd-info > .tool-how { border-top-color: rgba(255, 255, 255, 0.12) !important; }
html body.war .cvd-info .tool-how ol { list-style: none !important; margin: 0 0 0.62rem !important; padding: 0 !important; counter-reset: sh-item; }
html body.war .cvd-info .tool-how ol > li { list-style: none !important; position: relative !important; padding-left: 1.8em !important; margin-left: 0 !important; counter-increment: sh-item; }
html body.war .cvd-info .tool-how 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.war .cvd-info .game-foot { margin-top: 1rem; }
html body.war .cvd-info { --line: #e5e5e5; }
html[data-theme="dark"] body.war .cvd-info { --line: rgba(255, 255, 255, 0.12); }
html body.war .cvd-info > .game-foot, html body.circle-page > .game-foot { box-sizing: border-box; width: min(40rem, calc(100% - 2rem)); margin: 1.5rem auto 0 !important; border-top: 0 !important; font-family: Inter, system-ui, sans-serif !important; }
html body.circle-page article.page-how { margin-bottom: 2.390625px !important; }
html body.circle-page > .sx-more, html body.war .cvd-info > .sx-more { padding-left: 0 !important; padding-right: 0 !important; width: min(40rem, calc(100% - 2rem)); }
html body.circle-page > :is(article.tool-how, .sx-more, .game-foot) { position: relative; z-index: 1; } /* above the fixed .war-bg layer */
html body:has(.ad-slot) > :is(.game-foot, .sx-foot) { margin-bottom: calc(var(--ad-clear, 4.6rem) + 0.75rem + env(safe-area-inset-bottom, 0px)) !important; } /* body-level footers clear the fixed bottom ad strip */
/* cats-vs-dogs (v587): scoreboard at the top under the header, open, plain shared style; page scrolls normally */
html body.war .cvd-board { position: relative; z-index: 2; display: flow-root; padding: calc(var(--site-bar-h, 57px) + env(safe-area-inset-top, 0px) + 0.75rem) 0 0.75rem; background: #ffffff; --ink: #1c1917; --line: #e5e5e5; color: var(--ink); font-family: Inter, system-ui, sans-serif; touch-action: auto; }
html[data-theme="dark"] body.war .cvd-board { background: #141414; --ink: #f2f2f2; --line: rgba(255, 255, 255, 0.12); }
html:is([data-bg="blue"],[data-bg="yellow"],[data-bg="pink"]) body.war .cvd-board { background: var(--p-bg); }
html body.war .cvd-board .lb { position: static !important; inset: auto !important; transform: none !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; z-index: auto !important; box-sizing: border-box; width: min(40rem, calc(100% - 2rem)) !important; max-width: 40rem !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; display: block !important; }
html body.war .cvd-board .lb-dock, html body.war .cvd-board .lb-close { display: none !important; }
html body.war .cvd-board .lb-sheet, html body.war .cvd-board .lb-sheet[hidden] { display: block !important; position: static !important; inset: auto !important; transform: none !important; max-height: none !important; height: auto !important; width: auto !important; margin: 0 !important; overflow: visible !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; color: var(--ink) !important; opacity: 1 !important; visibility: visible !important; }
html body.war .cvd-board .lb-head { display: flex !important; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; color: var(--ink) !important; }
html body.war .cvd-board .lb-head h2 { margin: 0 !important; text-align: left !important; font: 650 0.94rem/1.3 Inter, system-ui, sans-serif !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
html body.war .cvd-board :is(.lb-world, .lb-list li) { padding: 0.55rem 1rem !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; color: var(--ink) !important; font: 400 0.88rem/1.4 Inter, system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }
html body.war .cvd-board .lb-world { font-weight: 650 !important; }
html body.war .cvd-board .lb-list { max-height: none !important; overflow: visible !important; }
html body.war .cvd-board .lb-list li:last-child { border-bottom: 0 !important; }
html body.war .cvd-board .lb-list li.you { background: color-mix(in srgb, #2f6bff 8%, transparent) !important; }
html body.war .cvd-board :is(.lb-name, .lb-name em, .lb-score) { color: var(--ink) !important; font-family: inherit !important; }
html body.war .cvd-board .lb-side.tie { color: color-mix(in srgb, var(--ink) 55%, transparent) !important; }
html body.war .war-shell, html body.has-site-bar.war .war-shell { position: relative !important; inset: auto !important; top: auto !important; bottom: auto !important; margin-top: 0 !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; }
html body.war .cvd-info { margin-top: 0 !important; }
html body.war .cvd-board :is(.lb-world, .lb-list li) { display: grid !important; grid-template-columns: 1.6rem 1.5rem minmax(0, 1fr) auto auto !important; gap: 0.5rem !important; align-items: center !important; }
html body.war .cvd-board .lb-name { min-width: 0 !important; width: auto !important; max-width: none !important; }
html body.war .cvd-board .lb-side { min-width: 0 !important; font-size: 0.72rem !important; }
html body.war .cvd-board .lb-score { min-width: 2.5rem; text-align: right; font-weight: 650; }
html body.circle-page:has(article.tool-how):has(.ad-slot) .circle-shell { margin-bottom: calc(-1 * (var(--ad-clear, 4.6rem) + 1.15rem + env(safe-area-inset-bottom, 0px))) !important; } /* pad box unchanged; info divider sits the standard gap below the card */
html body.circle-page:has(article.tool-how) .circle-stage { margin-bottom: 0 !important; }
/* v589: whole page swipes; only the cat/dog buttons are manipulation */
html body.war :is(.war-shell, .war-frame, .arena, .war-bg, .cvd-board, .cvd-info, main, section, header) { touch-action: auto !important; }
html body.war .pet { touch-action: manipulation !important; }
html body.war .cvd-info { padding-bottom: calc(var(--ad-clear, 4.6rem) + 0.75rem + env(safe-area-inset-bottom, 0px)) !important; }
html body.war, html body.war :is(.war-shell, .war-frame, .arena, .side) { overscroll-behavior: auto !important; }
html body.war { overflow: visible !important; }
/* v591: status line back in the game (pre-589); leaderboard back in the bottom bar; .cvd-board only reserves the header height */
html body.war .cvd-board { padding: calc(var(--site-bar-h, 57px) + env(safe-area-inset-top, 0px)) 0 0 !important; }
/* v592: own-country row in the open leaderboard - dark text on the light highlight (>= 4.5:1), any background/Simple reading */
html body.war .lb-list li.you { background: #fff8e8 !important; }
html body.war .lb-list li.you, html body.war .lb-list li.you :is(.lb-name, .lb-name em, .lb-score, span:not(.lb-medal), em) { color: #1c1917 !important; }
html body.war .lb-list li.you .lb-side.cats { color: #a63d22 !important; }
html body.war .lb-list li.you .lb-side.dogs { color: #155a87 !important; }
html body.war .lb-list li.you .lb-side.tie { color: #57534e !important; }
/* v593: game area takes its content height (no 100dvh); tighter gaps so the leaderboard bar shows above the ad on first view */
html body.war .war-shell, html body.has-site-bar.war .war-shell { height: auto !important; min-height: 0 !important; max-height: none !important; }
html body.war .war-frame { position: relative !important; inset: auto !important; }
html body.war .arena { flex: 0 0 auto !important; }
html body.war .arena { padding-top: 3.25rem !important; }
/* v594: medal numbers dark for >= 4.5:1 on gold/silver/bronze (medal colours unchanged) */
html body.war .lb-medal.gold, html body.war .lb-medal.silver, html body.war .lb-medal.bronze, html body.war .lb-list li.you .lb-medal { color: #1c1917 !important; }
/* v595: Share pill locked in px (size, type, padding, line-height); header ignores text-size-adjust and the site Text size */
html body .sx-hrow { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
html body .sx-hrow, html body .sx-hrow * { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
html body .sx-hrow .sx-shr { box-sizing: border-box !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; width: 88px; font-size: 14px !important; line-height: 16px !important; padding: 0 12px !important; top: 8px !important; left: 50% !important; margin: 0 !important; border-width: 1px !important; }
html body .sx-hrow .sx-shr .sx-lbl { font-size: 14px !important; line-height: 16px !important; }
@media (max-width: 600px) { html body .sx-hrow .sx-shr { padding: 0 !important; font-size: 13px !important; } html body .sx-hrow .sx-shr .sx-lbl { font-size: 13px !important; } }
@media (max-width: 440px) { html body .sx-hrow .sx-shr { top: 10px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; } }
/* v596: breathing space between pets and leaderboard bar (CvD) */
html body.war .arena { padding-bottom: 21px !important; }
/* v597: breathing space below the leaderboard bar, before the info divider (CvD only) */
html body.war .war-shell { padding-bottom: 17px !important; }
/* v600 a11y: darker greys for small helper text (contrast >= 4.5:1); theme-adaptive via --ink */
html body :is(.drop-hint, #preview-empty, .preview-empty, .preview-frame > span, .idle-filename, .gps-idle, #thumb-empty, .entropy-hint) { color: color-mix(in srgb, var(--ink, #1c1917) 72%, transparent) !important; }
html body .ad-label { color: #666 !important; } /* ad slot stays white in every theme */
html:not([data-theme=dark]) body.war :is(#lead, .side-label) { color: #6b6157 !important; } /* darker warm grey, >= 4.5:1 on all light backgrounds */
/* visible keyboard focus everywhere (only for keyboard, mouse clicks unaffected) */
html body :is(a, button, input, select, textarea, summary, [tabindex], [role=button], [role=tab]):focus-visible { outline: 2px solid #2f6bff !important; outline-offset: 2px !important; }
html[data-theme=dark] body :is(a, button, input, select, textarea, summary, [tabindex], [role=button], [role=tab]):focus-visible { outline-color: #8fb0ff !important; }
.sx-vh { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }