/* ============================================================
   Run or Rumble — brand skin for the app (app.html)
   Layers the claude.ai/design "Sticker Zine" brand system over the
   app's existing layout/geometry (src/styles.css). Loaded AFTER
   styles.css so these chrome rules win; gameplay geometry, sprite
   positioning, the coin and the dark play-fields are left untouched.
   ============================================================ */

/* ---------- page + type ---------- */
body {
  background:
    radial-gradient(circle at 10% 6%,  var(--pastel-lemon), transparent 30%),
    radial-gradient(circle at 90% 4%,  var(--pastel-sky),   transparent 28%),
    radial-gradient(circle at 88% 92%, var(--pastel-rose),  transparent 30%),
    radial-gradient(circle at 6% 94%,  var(--pastel-mint),  transparent 28%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
}

/* ---------- top bar ---------- */
.topbar {
  background: oklch(1 0 0 / .82);
  border-bottom: 2px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: var(--space-4); }
.home-link {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  color: var(--fg-2); text-decoration: none;
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 2px solid var(--border-strong); background: var(--surface);
  transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.home-link:hover { color: var(--rumble-coral); border-color: var(--rumble-coral); transform: translateY(-2px); }
/* brand lockup — same B3 logo as the homepage nav (mascots bookend the wordmark) */
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand__fig { height: 36px; width: auto; filter: drop-shadow(0 3px 4px oklch(.3 .05 285 / .22)); }
.brand__fig--flip { transform: scaleX(-1); }
.brand__wm { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: .9; white-space: nowrap; letter-spacing: -.01em; }
.brand__wm .run { color: #E3A900; }
.brand__wm .or { font-size: .46em; color: var(--fg); display: inline-block; transform: rotate(-8deg); margin: 0 .12em; vertical-align: .18em; }
.brand__wm .rum { color: var(--rumble-coral); }

.mode-pills { background: var(--surface); border: 2px solid var(--border); box-shadow: var(--shadow-sm); }
.pill { color: var(--fg-2); font-family: var(--font-display); font-weight: 600; }
.pill.active { background: var(--rumble-coral); color: #fff; box-shadow: var(--shadow-pop); }

/* ---------- panels + headings ---------- */
.panel,
.post-match {
  background: var(--surface);
  border: 3px solid var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--border);
}
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--fg); }
.sub { color: var(--fg-2); }

/* ---------- roster ---------- */
.member {
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
}
.member .num { color: var(--fg-3); font-family: var(--font-display); }
.member input[type="text"], .member select, .member input[type="number"], #match-title {
  background: var(--offset); color: var(--fg);
  border: 2px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 600;
}
.member input[type="text"]:focus, .member select:focus, .member input[type="number"]:focus, #match-title:focus {
  outline: none; border-color: var(--rumble-coral); box-shadow: var(--ring);
}
.member input[type="color"] { background: var(--offset); border: 2px solid var(--border); border-radius: var(--radius-md); }
.member .remove { color: var(--fg-3); }
.member .remove:hover { color: var(--rumble-coral); }

/* ---------- buttons ---------- */
.ghost-btn {
  font-family: var(--font-display); font-weight: 600; color: var(--fg);
  border: 2px dashed var(--border-strong); border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ghost-btn:hover { border-color: var(--rumble-coral); color: var(--rumble-coral); transform: translateY(-2px); }
.ghost-btn.small { border-style: solid; }
.primary-btn {
  background: var(--rumble-coral); color: #fff;
  font-family: var(--font-display); font-weight: 600;
  border-radius: var(--radius-full); box-shadow: var(--shadow-pop);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring), filter var(--dur-fast) var(--ease-out);
}
.primary-btn:hover { transform: translateY(-3px) scale(1.03); filter: none; }
.primary-btn:active { transform: translateY(1px) scale(.98); box-shadow: var(--shadow-sm); }

/* ---------- sliders + options ---------- */
.count-opt {
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
}
.count-opt .count-head, .duration-label { color: var(--fg); font-family: var(--font-display); font-weight: 700; }
.count-opt input[type="range"], .duration-opt input[type="range"] { accent-color: var(--rumble-coral); }
.count-label {
  background: var(--race-yellow); color: var(--fg-on-accent);
  border-radius: var(--radius-md); font-family: var(--font-display);
}
.opt { color: var(--fg-2); }

/* ---------- stage head + ticker ---------- */
.match-clock { color: var(--rumble-coral); font-family: var(--font-display); }
.stage-title { color: var(--fg-2); font-family: var(--font-display); font-weight: 600; }
.ticker { color: var(--fg-2); font-weight: 700; }

/* ---------- arena = framed play-field (kept dark for sprite contrast) ---------- */
.arena {
  background: oklch(0.255 0.045 285);
  border: 3px solid var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--border);
}

/* ---------- post-match results ---------- */
.winner-banner { font-family: var(--font-display); color: var(--fg); }
.winner-banner .name { color: var(--rumble-coral); }
.standings li {
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
}
.standings li .rank { color: var(--fg-3); font-family: var(--font-display); }
.standings li .who { color: var(--fg); }
.standings li .char { color: var(--fg-3); }
.standings li.first { border-color: var(--race-yellow); }
.standings li.first .rank { color: var(--race-ink); }

.pm-share { border-top: 1px solid var(--border); }
.pm-share-label { color: var(--fg-3); font-family: var(--font-display); }
.share-btn {
  background: var(--surface-2); color: var(--fg);
  border: 2px solid var(--border); font-family: var(--font-display); font-weight: 600;
}
.share-hint { color: var(--win-ink); }