/* The Fellas Games — design tokens + base components.
   Drop into the Flask app's static/ and link it before page CSS. */
:root {
  /* base (shared with lfams.org sites) */
  --bg: #0b0d12;
  --card: #161a24;
  --border: #232838;
  --text: #e8eaf0;
  --muted: #9aa3b2;
  --accent: #6c8cff;        /* links, focus, "you" */
  --accent-text: #8fa8ff;   /* accent used as small text */

  /* additions */
  --gold: #ffc23d;          /* LIVE + winners ONLY */
  --radiant: #3ddc84;       /* Team A */
  --dire: #ff5a5f;          /* Team B */
  --dire-text: #ff7a7e;     /* Dire / penalties as text (contrast) */
  --spoon: #c9a37a;         /* last place title */
  --silver: #c7ccd6;
  --bronze: #d9a066;
  --on-fill: #0b0d12;       /* text on gold / accent / light fills */

  /* tints (12–22% over card) */
  --tint-accent: rgba(108,140,255,.14);
  --tint-gold: rgba(255,194,61,.14);
  --tint-radiant: rgba(61,220,132,.16);
  --tint-dire: rgba(255,90,95,.16);

  /* shape + motion */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --lift: translateY(-2px);
  --shadow-lift: 0 12px 32px rgba(0,0,0,.45);
  --ease: .15s ease-out;
  --vs-skew: -14deg;
  --tap: 44px;              /* minimum touch target */

  /* type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 900;
  --display-tracking: -0.035em;
  --display-leading: .95;

  /* the Commissioner */
  --ref-stripes: repeating-linear-gradient(45deg, #e8eaf0 0 6px, #0b0d12 6px 12px);
}

html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }

/* utility classes used throughout the screens */
.d    { font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--display-leading); }
.m    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lbl  { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--ease), box-shadow var(--ease); }
.card:hover  { transform: var(--lift); box-shadow: var(--shadow-lift); }
.card:active { transform: scale(.98); }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 4px 10px; font-size: 12px; font-weight: 800; }
.av   { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--on-fill); flex: none; }
.stripes { background: var(--ref-stripes); }

.live { display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: var(--on-fill);
        font-weight: 900; font-size: 12px; letter-spacing: .12em; padding: 5px 11px; border-radius: var(--radius-pill); }
.live .dot, .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-fill); animation: pulse 1.2s infinite; }

@keyframes pulse { 50% { opacity: .2; } }
@keyframes drop  { 0% { transform: translateY(-160%); opacity: 0; } 8%, 92% { transform: none; opacity: 1; } 100% { transform: translateY(-160%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}