/* =====================================================================
   CONTROLS — buttons, pills, panels
   Shared by every screen. Nothing here knows which screen it is on.

   House style (see /page.css): controls are soft-cornered white paper with a
   hairline border, their labels are Space Mono, uppercase and tracked out, and
   the primary action is a flat red fill. Nothing shines — the ground is matte
   paper, so a specular sweep reads as a mistake rather than as polish.
   ===================================================================== */

/* ---------- buttons ---------- */
.btn{
  appearance:none;position:relative;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--control);color:var(--text);
  padding:11px 15px;min-height:44px;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.25;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background var(--t-fast) ease,border-color var(--t-fast) ease,
             color var(--t-fast) ease,transform .07s ease;
}
.btn:hover:not(:disabled){border-color:var(--borderStrong);background:var(--panel2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}

.btn.primary{
  background:var(--accent);border-color:var(--accent);color:var(--accentText);
}
.btn.primary:hover:not(:disabled){background:#a90016;border-color:#a90016;color:#fff}
html[data-theme="dark"] .btn.primary:hover:not(:disabled),
body.note-game-dark .btn.primary:hover:not(:disabled){background:#ff5566;border-color:#ff5566;color:var(--accentText)}
/* Going back was being missed entirely — a ghost button next to a red primary reads as
   decoration. The back controls get a real outline and a fixed leading chevron so they
   are found without being hunted for. */
.btn.cof-back{border-color:var(--borderStrong);color:var(--text);background:var(--panel)}
.btn.cof-back:hover:not(:disabled){border-color:var(--text);background:var(--panel2)}

.btn.ghost{background:transparent;border-color:transparent;color:var(--body)}
.btn.ghost:hover:not(:disabled){border-color:var(--border);background:var(--panel2)}
.btn.small{padding:8px 11px;min-height:36px;font-size:10px}
.btn.big{padding:13px 22px;min-height:48px;font-size:12px}
.btn.primary.scored{
  background:var(--gold);border-color:var(--gold);color:#fff;
}
.btn.primary.scored:hover:not(:disabled){background:#734714;border-color:#734714}

/* ---------- pills ----------
   Small readouts, not controls: mono numerals on a recessed well. */
.pill{
  display:inline-flex;align-items:center;border:1px solid var(--border);background:var(--panel2);
  border-radius:999px;padding:6px 12px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--body);cursor:default;white-space:nowrap;
  transition:background var(--t-mid) ease,color var(--t-mid) ease,border-color var(--t-mid) ease;
}
.pill.lives{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 42%,var(--border));
  background:color-mix(in srgb,var(--bad) 7%,var(--panel2))}
.pill.scope{color:var(--muted)}
.pill.ready{color:#fff;background:var(--accent);border-color:var(--accent)}
html[data-theme="dark"] .pill.ready,
body.note-game-dark .pill.ready{color:var(--accentText)}

/* ---------- panels ----------
   Raised white paper, hand-cut corners, matte warm shadow. */
.panel{
  background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}