/* Wayger — locked Phase 2 design tokens, lifted verbatim from
   mobile/src/theme/*. Pink-on-black, dark-first, SF Pro Black display. */

:root {
  /* Brand */
  --pink: #FF4FD8;
  --pink-deep: #CC2FA8;

  /* Surfaces — dark-first */
  --bg-black: #0A0A0A;
  --bg-raised: #1A1A1A;
  --bg-card: #202020;
  --divider: #2A2A2A;

  /* Text */
  --text-primary: #FFFFFF;
  --text-muted: #B8B8B8;
  --text-dim: #7A7A7A;

  /* States */
  --record-red: #FF3B30;
  --success: #34C759;
  --warning: #FFCC00;

  /* tinted pink fills used across screens */
  --pink-fill-08: rgba(255, 79, 216, 0.08);
  --pink-fill-12: rgba(255, 79, 216, 0.12);
  --pink-fill-18: rgba(255, 79, 216, 0.18);
  --pink-disabled: #3A2A37;

  /* Spacing scale (8pt) */
  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 32px;
  --xxl: 48px;
  --xxxl: 64px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* ---- Type ramp. SF Pro Display Black for display, system weights below. ---- */
.t-display { font-family: var(--sf); font-weight: 900; letter-spacing: -0.5px; }
.t-heavy   { font-family: var(--sf); font-weight: 800; letter-spacing: -0.2px; }
.t-body    { font-family: var(--sf); font-weight: 500; }
.t-caption { font-family: var(--sf); font-weight: 400; }
.t-smallcaps {
  font-family: var(--sf);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* tap feedback shared by every pressable */
.pressable { transition: transform .08s ease, opacity .08s ease, background-color .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; user-select: none; cursor: pointer; }
.pressable:active { transform: scale(0.985); opacity: 0.9; }

/* hide scrollbars inside the phone but keep scrolling */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@keyframes wg-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }
}
/* Entrance animations are transform-only — never gate visibility behind
   opacity:0, so content stays visible even if the animation is paused
   (e.g. a throttled/offscreen iframe during capture). */
@keyframes wg-fade-up {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}
@keyframes wg-screen-in {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
@keyframes wg-pop {
  0%   { transform: scale(0.82); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes wg-confetti-fall {
  0%   { transform: translateY(-40px) translateX(0) rotate(var(--rs)); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(var(--fy)) translateX(var(--dx)) rotate(var(--re)); opacity: 0; }
}
@keyframes wg-bar-indeterminate {
  0% { left: -35%; }
  100% { left: 100%; }
}
@keyframes wg-blink { 50% { opacity: 0.15; } }

/* Duel intro — a coin/card flip that shows each side's bet before the lobby.
   Held keyframes (equal values across a span) create the "pause on each
   side" beats; the constant value means they read even if throttled. */
@keyframes wg-duel-coin {
  0%   { transform: scale(0.92) rotateZ(0deg); }
  12%  { transform: scale(1) rotateZ(0deg); }
  42%  { transform: scale(1) rotateZ(180deg); }
  64%  { transform: scale(1) rotateZ(180deg); }
  92%  { transform: scale(1) rotateZ(360deg); }
  100% { transform: scale(1) rotateZ(360deg); }
}
@keyframes wg-duel-card {
  0%   { transform: scale(0.92) rotateX(0deg); }
  12%  { transform: scale(1) rotateX(0deg); }
  44%  { transform: scale(1) rotateX(180deg); }
  66%  { transform: scale(1) rotateX(180deg); }
  92%  { transform: scale(1) rotateX(360deg); }
  100% { transform: scale(1) rotateX(360deg); }
}
@keyframes wg-spin { to { transform: rotate(360deg); } }
.wg-chev { transition: transform .22s cubic-bezier(.3,.7,.4,1); }