/* base.css: what every page on ericlucas.dev shares. Each game sets its own --accent (and
   may override any token) in its own stylesheet; nothing here is game-specific.
   Light and dark are both designed (docs/DESIGN.md). */
:root{
  --paper:#FBF7F4; --ink:#2B2024; --accent:#7A1F33; --on-accent:#fff; --tint:#F1E4E3; --line:#D9CACB; --muted:#877A7D; --ok:#3E9B5F;
  --serif:ui-serif,"New York","Iowan Old Style",Georgia,serif;
  --sans:-apple-system,"Helvetica Neue",system-ui,sans-serif;
  color-scheme: light dark;
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#1E1719; --ink:#F3EAE7; --accent:#D96C87; --on-accent:#1E1719; --tint:#33262B; --line:#4B3B41; --muted:#A79699; }
}
:root[data-theme="dark"]{ --paper:#1E1719; --ink:#F3EAE7; --accent:#D96C87; --on-accent:#1E1719; --tint:#33262B; --line:#4B3B41; --muted:#A79699; }
/* border-box on every element, not inherited: the contents of a <details> (Chrome's ::details-content)
   don't inherit from it, so inherited sizing let inputs in an open Admin row overflow the phone. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.45 var(--sans);
  -webkit-text-size-adjust:100%;
  padding-top:env(safe-area-inset-top,0px);
}
.serif{font-family:var(--serif);font-weight:400}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
p{margin:0 0 12px}
a{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:13px}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}