/* Base: page ground, type, focus, shared textures and controls. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--wood);
  background-image: repeating-linear-gradient(92deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0) 3px, rgba(255,255,255,0.04) 7px, rgba(0,0,0,0.06) 13px, rgba(0,0,0,0) 21px);
  color: var(--cream);
  font: 15px/1.4 var(--font-ui);
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--wood-dark); }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.paper {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%), radial-gradient(ellipse at 80% 90%, rgba(150,110,60,0.12), rgba(150,110,60,0) 55%);
  color: var(--ink);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-ledge);
}
.paper h2 { font: 700 18px var(--font-head); margin: 0 0 10px; }
.btn {
  min-height: 36px; padding: 0 12px; border-radius: var(--radius-s); border: 1.5px solid var(--ink-muted);
  background: transparent; color: var(--ink); font: 600 13px var(--font-ui); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn.primary { border-color: transparent; background: var(--moss); color: var(--moss-text); }
.btn.warn { border-color: transparent; background: var(--brick); color: var(--moss-text); }
.btn:disabled { opacity: 0.5; }
.bar { height: 8px; border-radius: 4px; background: var(--paper-track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 4px; background: var(--rarity-uncommon); }
.bar.low > span { background: var(--brick); }
.bar.mid > span { background: var(--attention); }
.muted { color: var(--ink-muted); }
.hand { font-family: var(--font-hand); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }