/* shadcn-lite: the shadcn/ui look as small, sc- prefixed components, for the game pages (no Basecoat there: its generic class names
   collide with the game templates' own, and it is 218KB). Loaded globally from base_public.html. Values match shadcn-theme.css (Basecoat
   pages); the --sc-* variables fall back to the same palette when that file is not loaded, and nothing here defines the unprefixed
   shadcn variables, so no other page changes.
   Cheat-sheet:  .sc-card (.sc-card-header .sc-card-content .sc-card-footer .sc-card-title .sc-card-desc; a.sc-card = a hover link card)
     .sc-btn (+ .sc-btn-secondary .sc-btn-outline .sc-btn-ghost .sc-btn-sm .sc-btn-lg .sc-btn-block)  .sc-badge (+ -secondary -outline)
     .sc-chip (+ .is-on)  .sc-alert  .sc-separator  .sc-item (a list row link: icon, text, arrow)  .sc-muted  .sc-kbd */
:root {
  --sc-radius: var(--radius, 0.75rem);
  --sc-card: var(--card, #FFFDF8); --sc-fg: var(--foreground, #2A211A);
  --sc-primary: var(--primary, #C0552F); --sc-primary-fg: var(--primary-foreground, #FBF6EC);
  --sc-secondary: var(--secondary, #F3E9D8); --sc-muted: var(--muted-foreground, #6F6256);
  --sc-accent: var(--accent, #F3E9D8); --sc-border: var(--border, rgba(42, 33, 26, 0.12));
  --sc-input: var(--input, rgba(42, 33, 26, 0.16)); --sc-ring: var(--ring, #C0552F);
}
.sc-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 0; background: var(--sc-card); color: var(--sc-fg); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: 0 1px 2px rgba(42, 33, 26, 0.05); text-decoration: none; }
.sc-card-header, .sc-card-content { padding: 0 1.25rem; }
.sc-card-footer { padding: 0 1.25rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sc-card-title { font: 600 1.0625rem/1.25 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.01em; margin: 0; }
.sc-card-desc { color: var(--sc-muted); font-size: 0.9375rem; line-height: 1.5; margin: 0.25rem 0 0; }
a.sc-card { transition: border-color .15s ease, box-shadow .15s ease; }
a.sc-card:hover { border-color: rgba(192, 85, 47, 0.45); box-shadow: 0 6px 18px -10px rgba(158, 67, 34, 0.45); }
.sc-muted { color: var(--sc-muted); }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.25rem; padding: 0 1rem; border: 1px solid transparent; border-radius: calc(var(--sc-radius) - 2px); background: var(--sc-primary); color: var(--sc-primary-fg); font: 500 0.875rem/1 "Hanken Grotesk", system-ui, sans-serif; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.sc-btn:hover { background: color-mix(in srgb, var(--sc-primary) 90%, #000); }
.sc-btn:focus-visible, .sc-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(192, 85, 47, 0.22); border-color: var(--sc-ring); }
.sc-btn:disabled, .sc-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.sc-btn-secondary { background: var(--sc-secondary); color: var(--sc-fg); }
.sc-btn-secondary:hover { background: color-mix(in srgb, var(--sc-secondary) 88%, #000); }
.sc-btn-outline { background: var(--sc-card); color: var(--sc-fg); border-color: var(--sc-input); }
.sc-btn-outline:hover { background: var(--sc-accent); }
.sc-btn-ghost { background: transparent; color: var(--sc-fg); }
.sc-btn-ghost:hover { background: var(--sc-accent); }
.sc-btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.sc-btn-lg { height: 2.5rem; padding: 0 1.5rem; }
.sc-btn-block { display: flex; width: 100%; justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: 2.25rem; padding-block: 0.5rem; }
.sc-badge { display: inline-flex; align-items: center; width: fit-content; padding: 2px 10px; border: 1px solid transparent; border-radius: 9999px; background: var(--sc-primary); color: var(--sc-primary-fg); font: 500 0.75rem/1.4 "Hanken Grotesk", system-ui, sans-serif; white-space: nowrap; }
.sc-badge-secondary { background: var(--sc-secondary); color: var(--sc-fg); }
.sc-badge-outline { background: transparent; color: var(--sc-fg); border-color: var(--sc-border); }
.sc-chip { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border: 1px solid var(--sc-border); border-radius: 9999px; background: transparent; color: var(--sc-muted); font: 500 0.8125rem/1.4 "Hanken Grotesk", system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.sc-chip:hover { color: var(--sc-primary); border-color: rgba(192, 85, 47, 0.4); }
.sc-chip.is-on, .sc-chip[aria-pressed="true"] { background: var(--sc-primary); border-color: var(--sc-primary); color: var(--sc-primary-fg); }
.sc-alert { padding: 0.75rem 1rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-card); color: var(--sc-fg); font-size: 0.9375rem; line-height: 1.55; }
.sc-alert a { color: var(--sc-primary); font-weight: 500; }
.sc-separator { height: 1px; border: 0; background: var(--sc-border); margin: 0.75rem 0; }
.sc-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.5rem; border-radius: calc(var(--sc-radius) - 2px); color: var(--sc-fg); text-decoration: none; transition: background-color .15s ease; }
.sc-item:hover { background: var(--sc-accent); }
.sc-kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--sc-input); border-bottom-width: 2px; border-radius: 5px; background: var(--sc-card); font: 500 0.6875rem/1.5 ui-monospace, Menlo, monospace; color: var(--sc-muted); }

/* games n-z: the per-game chrome classes (xx-cta-primary / xx-cta-ghost / xx-overlay-card / .pill) keep their own CSS, so these higher-
   specificity rules (class + attribute selector) make them look like the shadcn components; markup only gained the sc- classes. */
.sc-btn[class*="-cta"] { height: 2.5rem; padding: 0 1.5rem; border: 1px solid transparent; border-radius: calc(var(--sc-radius) - 2px); background: var(--sc-primary); color: var(--sc-primary-fg); font: 500 0.9375rem/1 "Hanken Grotesk", system-ui, sans-serif; transform: none; box-shadow: none; text-decoration: none; }
.sc-btn[class*="-cta"]:hover { background: color-mix(in srgb, var(--sc-primary) 90%, #000); transform: none; }
.sc-btn-outline[class*="-cta-ghost"] { height: 2.25rem; padding: 0 1.1rem; background: var(--sc-card); color: var(--sc-fg); border-color: var(--sc-input); font-size: 0.875rem; }
.sc-btn-outline[class*="-cta-ghost"]:hover { background: var(--sc-accent); transform: none; }
.sc-card[class*="-overlay-card"] { display: block; gap: 0; padding: 1.75rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-card); box-shadow: 0 20px 40px -18px rgba(42, 33, 26, 0.28); }
.pill.sc-badge.sc-badge-outline { background: var(--sc-card); color: var(--sc-fg); border: 1px solid var(--sc-border); border-radius: 9999px; padding: 6px 12px; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }

/* games a-e: every game template names its chrome the same way (<prefix>-hud .pill, <prefix>-overlay-card, <prefix>-cta-primary,
   <prefix>-cta-ghost, plus a few one-offs), so attribute selectors give all of them the shadcn look without editing each page's markup.
   `html body` outranks the template's own <style> whatever the order. The game stage (.xx-stage, boards, tiles) is not touched. */
html body [class*="-hud"] .pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid var(--sc-border); border-radius: 9999px; background: var(--sc-card); color: var(--sc-fg); font: 500 0.8125rem/1.4 "Hanken Grotesk", system-ui, sans-serif; }
html body [class*="-hud"] .pill b { font-weight: 600; }
html body [class*="-overlay-card"] { background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: 0 12px 32px -14px rgba(42, 33, 26, 0.28); }
html body [class*="-cta-primary"], html body [class*="-btn-primary"], html body .dir-cta, html body .ds-cta, html body .ec-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1.5rem; border: 1px solid transparent; border-radius: calc(var(--sc-radius) - 2px); background: var(--sc-primary); color: var(--sc-primary-fg); font: 500 0.9375rem/1 "Hanken Grotesk", system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
html body [class*="-cta-primary"]:hover, html body [class*="-btn-primary"]:hover, html body .dir-cta:hover, html body .ds-cta:hover, html body .ec-cta:hover { background: color-mix(in srgb, var(--sc-primary) 90%, #000); }
html body [class*="-cta-ghost"], html body [class*="-btn-ghost"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1.25rem; border: 1px solid var(--sc-input); border-radius: calc(var(--sc-radius) - 2px); background: var(--sc-card); color: var(--sc-fg); font: 500 0.875rem/1 "Hanken Grotesk", system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
html body [class*="-cta-ghost"]:hover, html body [class*="-btn-ghost"]:hover { background: var(--sc-accent); }
html body [class*="-cta-primary"]:focus-visible, html body [class*="-cta-ghost"]:focus-visible, html body [class*="-btn-primary"]:focus-visible, html body [class*="-btn-ghost"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(192, 85, 47, 0.22); }

/* leftovers A: mode/level chips, the hero eyebrow and level badge, and the in-game action buttons (Undo / Clear / Reveal / Next / Check).
   Layout properties (padding, size) stay with each template; only colour, border, radius and type change. */
html body :is(.eg-mode, .wm-mode, .tp-mode, .tn-mode, .sg-mode, .ss-mode, .se-chip, .sa-chip, .wr-level) { border: 1px solid var(--sc-input); border-radius: 9999px; background: var(--sc-card); color: var(--sc-muted); font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 500; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
html body :is(.eg-mode, .wm-mode, .tp-mode, .tn-mode, .sg-mode, .ss-mode, .se-chip, .sa-chip, .wr-level):hover { color: var(--sc-primary); border-color: rgba(192, 85, 47, 0.4); }
html body :is(.eg-mode, .wm-mode, .tp-mode, .tn-mode, .sg-mode, .ss-mode, .se-chip, .sa-chip, .wr-level):is(.on, .is-on, [aria-pressed="true"]) { background: var(--sc-primary); border-color: var(--sc-primary); color: var(--sc-primary-fg); }
html body :is(.eg-mode, .wm-mode, .tp-mode, .tn-mode, .sg-mode, .ss-mode, .se-chip, .sa-chip, .wr-level):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(192, 85, 47, 0.22); }
html body p.sc-eyebrow { display: inline-flex; width: fit-content; padding: 2px 10px; border: 1px solid var(--sc-border); border-radius: 9999px; background: var(--sc-secondary); color: var(--sc-muted); font: 500 0.75rem/1.4 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.sc-badge-level[data-level="easy"] { background: #EAF3EA; color: #2E6E3F; }
.sc-badge-level[data-level="medium"] { background: #FAEFD8; color: #9E6B1E; }
.sc-badge-level[data-level="hard"] { background: #FBEAE3; color: #9E4322; }
.sc-badge-level { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.6875rem; }
html body :is(.ti-btn, .tp-btn, .ag-btn, .ml-btn, .cn-btn, .xw-btn, .sq-btn, .sb-btn, .sp-btn) { border: 1px solid var(--sc-input); border-radius: calc(var(--sc-radius) - 2px); background: var(--sc-card); color: var(--sc-fg); font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 500; transition: background-color .15s ease; }
html body :is(.ti-btn, .tp-btn, .ag-btn, .ml-btn, .cn-btn, .xw-btn, .sq-btn, .sb-btn, .sp-btn):hover:not(:disabled) { background: var(--sc-accent); }
html body :is(.ti-btn, .tp-btn, .ag-btn, .ml-btn, .cn-btn, .xw-btn, .sq-btn, .sb-btn, .sp-btn):disabled { opacity: .5; }
html body .cn-btn.primary, html body .sp-btn[type="submit"], html body :is(.ac-next, .rd-next, .pr-next, .se-next) { border: 1px solid transparent; border-radius: calc(var(--sc-radius) - 2px); background: var(--sc-primary); color: var(--sc-primary-fg); font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 500; }
html body .cn-btn.primary:hover:not(:disabled), html body .sp-btn[type="submit"]:hover, html body :is(.ac-next, .rd-next, .pr-next, .se-next):hover { background: color-mix(in srgb, var(--sc-primary) 90%, #000); }