/* ==========================================================================
   Rule Zero · base — element defaults shared by every page (dashboard,
   Play setup, the board). Tokens only; load after tokens.css and fonts.css.
   Convention: every <button> is a "house button" unless it carries .bare.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-ui); font-size: var(--fs-14); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
::selection { background: var(--gold-a30); color: var(--text); }

/* Type */
h1, h2, h3, p { margin: 0; }
h1, h2, .serif { font-family: var(--font-display); font-weight: var(--fw-regular); }
h1 { font-size: var(--fs-64); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-32); }
h3 { font-size: var(--fs-14); }
a { color: var(--gold); }
.muted { color: var(--muted); }
code, kbd, pre, .mono { font-family: var(--font-mono); }

/* Focus: one ring everywhere */
button, a, input, select, textarea, summary { outline-offset: var(--focus-offset); }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }

/* Buttons — the house button; .btn gives the same look to <a> and <div role=button> */
button, .btn {
  font: inherit; cursor: pointer; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: var(--panel2); border-radius: var(--r-2); padding: 9px 13px;
  transition: background var(--t-2), border-color var(--t-2), color var(--t-2), opacity var(--t-2);
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
button:hover, .btn:hover { background: var(--panel3); border-color: var(--line3); }
button:disabled, .btn[aria-disabled=true] { opacity: .4; cursor: not-allowed; }
button.primary, .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: var(--fw-bold); }
button.primary:hover, .btn.primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
button.ghost, .btn.ghost { background: transparent; }
button.ghost:hover, .btn.ghost:hover { background: var(--panel2); }
button.small, .btn.small { padding: 6px 9px; font-size: var(--fs-12); }
button.danger, .btn.danger { color: var(--danger); }
button.danger:hover, .btn.danger:hover { border-color: var(--danger-a30); background: var(--danger-a08); }
button.pill, .btn.pill { border-radius: var(--r-pill); }
button.icon, .btn.icon { padding: 0; width: 32px; height: 32px; display: inline-grid; place-items: center; }
button.block, .btn.block { width: 100%; }
/* .bare: a <button> used as a plain clickable surface (cards, tiles, orbs) — no house chrome */
button.bare { background: none; border: 0; border-radius: 0; padding: 0; color: inherit; font: inherit; text-align: inherit; transition: none; }
button.bare:hover { background: none; border-color: transparent; }

/* Fields */
input, select, textarea {
  font: inherit; width: 100%; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px;
}
input:hover, select:hover, textarea:hover { border-color: var(--line2); }
textarea { resize: vertical; line-height: var(--lh-body); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--gold); }
input::placeholder, textarea::placeholder { color: var(--dim); }
label { display: block; color: var(--muted); font-size: var(--fs-12); font-weight: var(--fw-medium); }
label input, label select, label textarea { margin-top: 7px; }

/* Tables */
table { border-collapse: collapse; width: 100%; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: var(--fs-10); text-transform: uppercase; letter-spacing: 1px; font-weight: var(--fw-medium); background: var(--panel); padding: 14px 18px; }
td { font-size: var(--fs-12); padding: 13px 18px; border-top: 1px solid var(--line); }

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}