/* Stacked design tokens — every game uses these. See VISUAL-STANDARD.md */
:root{
  --s-bg:#f4ead8; --s-bg-2:#ebe0cc; --s-surface:#fff8ec; --s-ink:#2a241c; --s-ink-2:#5c5348;
  --s-mute:#6b604f; --s-line:rgba(42,36,28,.12); --s-accent:#c9a24a; --s-accent-2:#8b5a2b;
  --s-good:#4e6a46; --s-warn:#b8860b; --s-bad:#8b3a34; --s-focus:#5aa7ff;
  --s-felt:#1b4332; --s-card:#fbf6ea; --s-shadow:0 8px 24px rgba(42,36,28,.14);
  --s-shadow-lift:0 14px 32px rgba(42,36,28,.22);
  --s-r-sm:8px; --s-r:12px; --s-r-lg:16px; --s-r-pill:999px;
  --s-space:8px; --s-pad:16px;
  --s-font:"Source Sans 3",system-ui,-apple-system,sans-serif;
  --s-display:"Fraunces","Source Serif 4",Georgia,serif;
  --s-ease:cubic-bezier(.2,.8,.2,1); --s-spring:cubic-bezier(.34,1.4,.64,1);
  --s-dur:180ms; --s-dur-slow:320ms;
  color-scheme:light;
  font-family:var(--s-font);
  font-variant-numeric:tabular-nums lining-nums;
}
body.dark, :root[data-theme="dark"]{
  --s-bg:#1a1612; --s-bg-2:#12100e; --s-surface:#24201a; --s-ink:#f3ebe0; --s-ink-2:#c9bca8;
  --s-mute:#cdc2b0; --s-line:rgba(243,235,224,.12); --s-accent:#e0bf6a; --s-accent-2:#d4a574;
  --s-felt:#0f2a1c; --s-card:#2c2620; --s-shadow:0 8px 24px rgba(0,0,0,.45);
  --s-shadow-lift:0 14px 32px rgba(0,0,0,.55);
  color-scheme:dark;
}
body.oled, :root[data-theme="oled"]{
  --s-bg:#000; --s-bg-2:#050505; --s-surface:#0c0c0c; --s-ink:#f5f0e6; --s-ink-2:#bdb4a6;
  --s-mute:#bdb4a6; --s-line:rgba(255,255,255,.1); --s-accent:#e8c86a; --s-felt:#02140c;
  --s-card:#111; --s-shadow:0 0 0 transparent; --s-shadow-lift:0 0 0 1px rgba(255,255,255,.08);
  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){
  :root{ --s-dur:1ms; --s-dur-slow:1ms; }
  .s-lift,.s-pop,.s-shake{ animation:none!important; transition:none!important; }
}
.s-board{ background:var(--s-felt); border-radius:var(--s-r-lg); padding:var(--s-pad); box-shadow:var(--s-shadow); }
.s-tile,.s-btn{
  min-height:44px; min-width:44px; border-radius:var(--s-r); border:1px solid var(--s-line);
  background:var(--s-surface); color:var(--s-ink); font:600 15px/1.2 var(--s-font);
  box-shadow:var(--s-shadow); transition:transform var(--s-dur) var(--s-ease), box-shadow var(--s-dur) var(--s-ease), background var(--s-dur) var(--s-ease);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.s-btn:hover{ filter:brightness(1.03); }
.s-btn:active,.s-press{ transform:scale(.97); }
.s-btn:focus-visible,.s-tile:focus-visible{ outline:2px solid var(--s-focus); outline-offset:2px; }
.s-lift{ transform:scale(1.04); box-shadow:var(--s-shadow-lift); z-index:2; }
.s-pop{ animation:s-pop var(--s-dur-slow) var(--s-spring); }
@keyframes s-pop{ 0%{transform:scale(.92);opacity:.6} 70%{transform:scale(1.03)} 100%{transform:scale(1);opacity:1} }
.s-shake{ animation:s-shake 360ms var(--s-ease); }
@keyframes s-shake{ 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(3px)} 50%{transform:translateX(-3px)} }
.s-glow{ box-shadow:0 0 0 2px var(--s-accent), var(--s-shadow); }
.s-card-face{
  aspect-ratio:2.5/3.5; background:var(--s-card); border-radius:8px;
  border:1px solid rgba(0,0,0,.08); box-shadow:var(--s-shadow);
  display:grid; place-items:center; font-family:var(--s-display);
  background-image:linear-gradient(180deg,rgba(255,255,255,.35),transparent 40%);
}
body.dark .s-card-face, body.oled .s-card-face{ border-color:rgba(255,255,255,.08); }

/* Dock must never cover home cards */
.home{padding-bottom:calc(140px + env(safe-area-inset-bottom, 0px)) !important}
#dock.dock{
  left:max(16px, env(safe-area-inset-left));
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:50;
}

/* —— Accessibility —— */
body.reduce, body.reduce *{
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.hc, body.hc{
  --s-ink:#000; --s-ink-2:#1a1a1a; --s-mute:#333; --s-line:rgba(0,0,0,.45);
  --s-bg:#fff; --s-surface:#fff; --s-card:#fff; --s-accent:#000; --s-focus:#0000ee;
}
body.hc.dark, body.hc.oled, html.hc[data-theme="dark"], html.hc[data-theme="oled"]{
  --s-ink:#fff; --s-ink-2:#f0f0f0; --s-mute:#ddd; --s-line:rgba(255,255,255,.55);
  --s-bg:#000; --s-surface:#000; --s-card:#111; --s-accent:#fff; --s-focus:#66b3ff;
}
body.cb{
  /* color-safe: avoid sole reliance on red/green */
  --s-good:#0077bb; --s-bad:#ee7733; --s-warn:#ccbb44;
}
:focus-visible{
  outline: 3px solid var(--s-focus) !important;
  outline-offset: 3px !important;
}
.card:focus-visible, .settings:focus-visible, .dock button:focus-visible,
.buy:focus-visible, .link:focus-visible, .back:focus-visible, .ghost:focus-visible,
.theme-btn:focus-visible, .hub-pill:focus-visible, .tool:focus-visible, .sol-mode:focus-visible{
  outline: 3px solid var(--s-focus);
  outline-offset: 2px;
}
@media (prefers-contrast: more){
  :root{ --s-line:rgba(42,36,28,.35); --s-focus:#005fcc; }
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* Theme surfaces apply to legacy sheets too */
body.dark, body.oled{
  background: var(--s-bg) !important;
  color: var(--s-ink);
}
body.dark .home, body.oled .home,
body.dark .card, body.oled .card{
  /* cards keep surface token */
}
body.dark .card, body.oled .card{
  background: linear-gradient(var(--s-surface), var(--s-bg-2)) !important;
  color: var(--s-ink) !important;
  border-color: var(--s-line) !important;
  box-shadow: var(--s-shadow) !important;
}
body.dark .card h2, body.oled .card h2,
body.dark .card p, body.oled .card p,
body.dark .brand, body.oled .brand,
body.dark .tag, body.oled .tag,
body.dark .deal, body.oled .deal,
body.dark .home-foot, body.oled .home-foot{ color: var(--s-ink-2) !important; }
body.dark .brand, body.oled .brand{ color: var(--s-ink) !important; }
body.dark .hub-pill, body.oled .hub-pill{
  background: var(--s-surface) !important; color: var(--s-ink) !important;
}


html[data-theme="oled"], html[data-theme="oled"] body,
body.oled, body.oled .home, body.oled .screen{
  background: #000 !important;
  background-image: none !important;
  color: var(--s-ink) !important;
}
html[data-theme="dark"], html[data-theme="dark"] body,
body.dark, body.dark .home, body.dark .screen{
  background: var(--s-bg) !important;
  background-image: none !important;
  color: var(--s-ink) !important;
}
body.oled .dock{ background:#0a0a0a !important; }

/* Global: never scroll sideways */
html,body{overflow-x:hidden;max-width:100vw;}
.home .grid{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.home .card{min-width:0;max-width:100%}

/* —— Modal chrome —— */
.modal{ z-index:120 !important; }
body.modal-open #dock.dock{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.modal-open #toast{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.modal .panel{
  width:min(400px,100%);
  max-height:min(82dvh,720px);
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:22px;
  box-sizing:border-box;
}
#settingsModal.modal{ z-index:120 !important; }