/* ════════════════════════════════════════════════════════════════
   arcade-ui.css — shared BTC Direct components (token-driven).
   Loaded after design-tokens.css on every page. Pages adopt the
   .aui-* classes per page in later phases. Never hardcode a hex here.
   ════════════════════════════════════════════════════════════════ */

body{
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.aui-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:56px; padding:0 20px; border:none; border-radius:8px;
  font-family:inherit; font-weight:600; font-size:var(--text-md); line-height:1;
  cursor:pointer;
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.aui-btn--sm{ height:48px; padding:0 16px; font-size:var(--text-base); }
.aui-btn--lg{ height:64px; padding:0 24px; font-size:var(--text-lg); }
.aui-btn--block{ width:100%; }
.aui-btn svg{ width:18px; height:18px; }

.aui-btn--primary{ background:var(--brand); color:var(--brand-on); }
.aui-btn--primary:hover:not(:disabled){ background:var(--brand-hover); }
.aui-btn--primary:active{ background:var(--brand-active); }
.aui-btn--primary svg{ color:var(--brand-on) !important; }

.aui-btn--secondary{ background:var(--surface-1); color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.aui-btn--secondary:hover:not(:disabled){ color:var(--brand-hover); box-shadow:inset 0 0 0 1px var(--brand-hover); }

.aui-btn--subtle{ background:var(--brand-soft); color:var(--brand); }
.aui-btn--subtle:hover:not(:disabled){ background:var(--brand); color:var(--brand-on); }

.aui-btn--text{ background:transparent; color:var(--brand); padding:0 8px; height:auto; }
.aui-btn--text:hover{ text-decoration:underline; }

.aui-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.aui-btn:disabled{ cursor:not-allowed; background:var(--border-strong); color:var(--muted); box-shadow:none; }

/* ── Cards ─────────────────────────────────────────────────────── */
.aui-card{ background:var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:16px; }
@media(min-width:768px){ .aui-card{ padding:24px; } }
.aui-card--elevated{ border:none; box-shadow:var(--shadow-md); }
.aui-card--clickable{ cursor:pointer; transition: box-shadow var(--t-base), transform var(--t-base); }
.aui-card--clickable:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* ── Inputs ────────────────────────────────────────────────────── */
.aui-input{
  width:100%; height:48px; background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:8px;
  color:var(--text); font-family:inherit; font-size:var(--text-base); padding:0 14px;
}
.aui-input::placeholder{ color:var(--muted); }
.aui-input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }

/* ── Section label ─────────────────────────────────────────────── */
.aui-label{ font-size:var(--text-sm); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }

/* ── Tabs / pills ──────────────────────────────────────────────── */
.aui-tab{
  font-size:var(--text-sm); font-weight:600; padding:8px 16px; border-radius:1000px;
  border:1px solid var(--border-strong); background:transparent; color:var(--text-2); cursor:pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.aui-tab.is-active{ background:var(--brand); color:var(--brand-on); border-color:var(--brand); }

/* ── Sticky topbar ─────────────────────────────────────────────── */
.aui-topbar{ position:sticky; top:0; z-index:20; background:var(--surface-1); border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); }

/* ── "powered by" footer (subtle greyscale branding) ──────────────
   Sits in the leftover space below a game + keyboard. flex-shrink:0
   so it never collapses; hidden on short viewports so it can never
   steal room from the grid/keyboard (only shows when there's space). */
.powered-by{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-shrink:0; flex-wrap:wrap;
  margin:20px auto 16px;
  /* Allow the mark to shrink within narrow viewports without clipping the logo. */
  max-width:100%; padding:0 16px; box-sizing:border-box; text-align:center;
  /* ~2× the previous size (was 11px / 15px logo) — still the subtle "maker"
     mark, just more legible and consistent at the very bottom of every page. */
  font-size:18px; font-weight:500; letter-spacing:.3px;
  color:var(--muted); opacity:.75;
}
.powered-by img{
  height:28px; width:auto;
  max-width:100%;
  filter:grayscale(1);
  opacity:.85;
}
/* On very narrow phones, trim the logo height a touch so the full
   "powered by [BTC Direct logo]" mark always fits, centred and uncut. */
@media (max-width:400px){
  .powered-by img{ height:24px; }
}
/* On dark the greyscaled logo goes near-black and disappears — brighten
   it so the subtle "powered by" branding stays legible on dark surfaces. */
html:not(.light) .powered-by img{
  filter:grayscale(1) brightness(2.4) contrast(.85);
  opacity:.7;
}
@media (max-height:700px){ .powered-by{ display:none; } }

/* ── End-screen "Saved as …" banner ───────────────────────────────
   The green save-confirmation banner should stretch edge-to-edge in the
   end-screen content column, matching the sibling result/stats/play-today
   cards. Its wrapper (#es-save-area) and the banner itself are forced to
   full width here; colours and Share-button layout are left untouched. */
#es-save-area{ width:100%; }
.es-saved{ width:100%; max-width:none; margin-left:0; margin-right:0; box-sizing:border-box; }

/* ── Respect reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .aui-btn, .aui-card--clickable, .aui-tab{ transition:none; }
}