/* ============================================================
   pages.css — Sub-page styles for arena.html and gallery.html.
   Covers: font overrides, brand logo, arena-specific widgets.
   ============================================================ */

/* ── Font overrides ─────────────────────────────────────────── */
body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
h1, h2, h3,
.arena-title, .page-title {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ── Nav icon sizing ────────────────────────────────────────── */
.pst-header-nav a i {
  font-size: .85em;
  margin-right: .25rem;
  opacity: .8;
}

/* ── Brand logo (gradient pill next to site name) ───────────── */
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  margin-right: .3rem;
  flex-shrink: 0;
}
.brand-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

/* ── Arena: bucket badge ────────────────────────────────────── */
.arena-bucket-badge {
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--surface, #f5f5f7);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  white-space: nowrap;
}
.arena-bucket-badge.seen     { color: #1a7f37; }
.arena-bucket-badge.zeroshot { color: #9a3412; }
.arena-bucket-badge.scratch  { color: #6b21a8; }
.arena-bucket-badge.transfer { color: #1e40af; } 

/* ── Arena: toast notification ──────────────────────────────── */
.arena-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  background: #1a7f37;
  color: #fff;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  font-size: .9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  z-index: 50;
  transition: opacity .3s;
}

/* ── Arena: empty state ─────────────────────────────────────── */
.arena-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted, #6e6e73);
}

/* ── Speed button active state ──────────────────────────────── */
.arena-speed-btn.is-active {
  background: var(--primary);
  color: #fff;
}