/* ============================================================
   RunOrRumble — Component Styles
   Bubbly, chunky, cartoon-authentic. Pairs with colors_and_type.css.
   ============================================================ */

/* ---------- BUTTONS ---------- */
.ror-btn {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-spring),
              filter var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-pop);
}
.ror-btn:hover    { transform: translateY(-3px) scale(1.03); }
.ror-btn:active   { transform: translateY(1px) scale(0.98); filter: brightness(0.95); box-shadow: var(--shadow-sm); }
.ror-btn:focus-visible { outline: none; box-shadow: var(--shadow-pop), var(--ring); }

/* Mode-driven primary (uses --accent / --accent-contrast) */
.ror-btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
/* Explicit color variants */
.ror-btn--race   { background: var(--race-yellow);  color: var(--fg-on-accent); }
.ror-btn--rumble { background: var(--rumble-coral); color: oklch(1 0 0); }
.ror-btn--coin   { background: var(--coin-blue);    color: oklch(0.225 0.03 285); }
.ror-btn--win    { background: var(--win-green);    color: oklch(1 0 0); }

.ror-btn--ghost {
  background: var(--surface);
  color: var(--fg);
  box-shadow: inset 0 0 0 2px var(--border-strong);
}
.ror-btn--ghost:active { box-shadow: inset 0 0 0 2px var(--border-strong); }

.ror-btn--lg { font-size: var(--text-lg); padding: var(--space-5) var(--space-12); }
.ror-btn--sm { font-size: var(--text-base); padding: var(--space-3) var(--space-5); }

/* ---------- ANIMAL AVATAR CARD ---------- */
.ror-animal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 112px;
}
.ror-animal__face {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  font-size: 56px;
  line-height: 1;
  background: var(--pastel-sky);
  box-shadow: var(--shadow-md), inset 0 -6px 0 oklch(0 0 0 / 0.06);
  border: 3px solid var(--surface);
  transition: transform var(--dur-base) var(--ease-spring);
}
.ror-animal:hover .ror-animal__face { transform: translateY(-4px) rotate(-3deg); }
.ror-animal__name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--fg);
}
/* tint helpers */
.tint-lemon { background: var(--pastel-lemon); }
.tint-peach { background: var(--pastel-peach); }
.tint-mint  { background: var(--pastel-mint); }
.tint-sky   { background: var(--pastel-sky); }
.tint-rose  { background: var(--pastel-rose); }
.tint-grape { background: var(--pastel-grape); }

/* ---------- RANK BADGE ---------- */
.ror-rank {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: oklch(0.28 0.04 70);
  background: var(--offset);
  box-shadow: var(--shadow-sm), inset 0 -3px 0 oklch(0 0 0 / 0.10);
  border: 2px solid oklch(1 0 0 / 0.5);
}
.ror-rank--1 { background: var(--medal-gold);   color: oklch(0.32 0.07 80); }
.ror-rank--2 { background: var(--medal-silver); color: oklch(0.35 0.01 250); }
.ror-rank--3 { background: var(--medal-bronze); color: oklch(1 0 0); }

/* ---------- INPUT CHIP ---------- */
.ror-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--fg);
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast);
  animation: chip-pop var(--dur-pop) var(--ease-spring) both;
}
.ror-chip:hover { border-color: var(--accent); }
.ror-chip__x {
  width: 22px; height: 22px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--offset);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.ror-chip__x:hover { background: var(--rumble-coral); color: oklch(1 0 0); transform: rotate(90deg); }
@keyframes chip-pop {
  from { transform: scale(0.6); }
  to   { transform: scale(1); }
}

/* ---------- TEXT INPUT ---------- */
.ror-input {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--fg);
  background: var(--offset);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ror-input::placeholder { color: var(--fg-3); }
.ror-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ---------- CARD / PANEL ---------- */
.ror-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.ror-card--well {
  background: var(--surface-2);
  box-shadow: none;
}

/* ---------- WINNER BANNER ---------- */
.ror-winner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-xl);
  background: linear-gradient(100deg, var(--win-green), oklch(0.74 0.16 158));
  color: oklch(1 0 0);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  box-shadow: var(--shadow-lg);
  animation: winner-in var(--dur-pop) var(--ease-spring-lg) both;
}
.ror-winner__emoji { font-size: 1.4em; animation: trophy-wiggle 1.2s var(--ease-in-out) infinite; }
@keyframes winner-in {
  from { transform: scale(0.9) translateY(12px); }
  to   { transform: scale(1) translateY(0); }
}
@keyframes trophy-wiggle {
  0%,100% { transform: rotate(-8deg); }
  50%     { transform: rotate(8deg); }
}

/* ---------- MODE TOGGLE ---------- */
.ror-toggle {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--offset);
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
}
.ror-toggle__btn {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: none;
  background: transparent;
  color: var(--fg-2);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-spring),
              color var(--dur-base) var(--ease-spring),
              transform var(--dur-base) var(--ease-spring);
}
.ror-toggle__btn[aria-pressed="true"] { transform: scale(1.02); }
.ror-toggle__btn--race[aria-pressed="true"]   { background: var(--race-yellow);  color: var(--fg-on-accent); box-shadow: var(--shadow-sm); }
.ror-toggle__btn--rumble[aria-pressed="true"] { background: var(--rumble-coral); color: oklch(1 0 0);        box-shadow: var(--shadow-sm); }
.ror-toggle__btn--coin[aria-pressed="true"]   { background: var(--coin-blue);    color: oklch(0.22 0.03 285);box-shadow: var(--shadow-sm); }

/* ---------- BADGE / PILL LABELS ---------- */
.ror-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.ror-badge--race   { background: var(--race-tint);   color: var(--race-ink); }
.ror-badge--rumble { background: var(--rumble-tint); color: var(--rumble-ink); }
.ror-badge--win    { background: var(--win-tint);    color: var(--win-ink); }
.ror-badge--coin   { background: var(--coin-tint);   color: var(--coin-ink); }