/* PropStein UFC surfaces — card parity with the NFL/NBA schedule cards.
   The fight cards reuse the today-* classes from style.css (one visual system
   for NFL, NBA, and UFC); this file carries ONLY the UFC deltas (status
   colors, winner check, void dimming, NO EDGE tint, link resets) plus the
   standalone fighter page, which does not load the 15k-line app stylesheet
   and needs the token fallbacks. */
.ufc-scope, .ufc-page {
  --u-bg: var(--bg-app, #070708);
  --u-card: var(--bg-card, #0e1117);
  --u-card-hover: var(--bg-card-hover, #161b24);
  --u-border: var(--border-subtle, rgba(255,255,255,.08));
  --u-accent: var(--accent-primary, #80C6F6);
  --u-text: var(--text-main, #f8fafc);
  --u-muted: var(--text-muted-2, #94a3b8);
  --u-warn: var(--accent-warning, #f59e0b);
  --u-ok: var(--accent-success, #10b981);
  --u-sans: var(--sans, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --u-display: var(--font-display, 'Space Grotesk', 'IBM Plex Sans', -apple-system, sans-serif);
  --u-mono: var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
}
body.ufc-active #homeEdgePreview, body.ufc-active .toast { display: none !important; }

.ufc-honesty { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid rgba(245,158,11,.25); border-left: 3px solid var(--u-warn); border-radius: 14px; background: rgba(245,158,11,.07); color: #cbd5e1; font: 500 13px/1.45 var(--u-sans); }
.ufc-honesty strong { color: #fbbf24; }
/* The card grid itself comes from .today-schedule-games (style.css); the list
   only needs to span the full width of the parent schedule grid. */
.ufc-card-list { grid-column: 1 / -1; }

/* ---- UFC deltas on the shared today-game-card chrome ---- */
/* Headshots fill the logo circle (object-fit: cover) instead of the NFL
   logo treatment (contain); fallback initials come from the shared class. */
.ufc-scope .today-team-logo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Weight-class + market chips can be longer than NFL SPREAD/O-U text. */
.ufc-scope .today-game-context { flex-wrap: wrap; }
.ufc-scope .today-team.is-winner strong::after { content: ' ✓'; color: #6ee7b7; }
.ufc-fight.is-void { opacity: .55; }
.ufc-noedge { color: #fbbf24; font-weight: inherit; }
.ufc-status-replacement, .ufc-status-missed_weight { color: #fbbf24; }
.ufc-status-cancelled, .ufc-status-scratched { color: #fca5a5; }
.ufc-status-final { color: #6ee7b7; }
.ufc-status-draw, .ufc-status-no_contest { color: #cbd5e1; }
/* Panel fighter rows are links to the fighter page (plain navigation). */
.ufc-scope .ufc-prop-row { color: inherit; text-decoration: none; }
.ufc-scope .ufc-prop-row:hover, .ufc-scope .ufc-prop-row:focus-visible { background: rgba(128,198,246,.07); }
.ufc-scope .ufc-prop-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--u-accent); }
/* UFC price values carry book names ("+105 · betonlineag") that run longer
   than NFL odds strings; keep the box labels intact and let the value wrap
   instead of ellipsizing the label. */
.ufc-scope .today-line-box b { flex: none; }
.ufc-scope .today-line-box small { white-space: normal; overflow-wrap: anywhere; text-align: right; }
/* Spacing for the totals note is inherited from .today-line-source (style.css). */

/* ---- fighter page ---- */
.ufc-page-body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% -10%, rgba(128,198,246,.10), transparent 60%), #070708; color: #f8fafc; }
.ufc-page { max-width: 760px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(48px + env(safe-area-inset-bottom, 0px)); color: var(--u-text); font: 400 15px/1.5 var(--u-sans); }
.ufc-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--u-border); border-radius: 999px; background: var(--u-card); color: var(--u-text); font: 600 14px/1 var(--u-sans); text-decoration: none; }
.ufc-back:hover { background: var(--u-card-hover); }
/* Same card chrome as the schedule cards (graphite face from style.css). */
.ufc-hero { display: flex; gap: 16px; align-items: center; margin: 18px 0 6px; padding: 18px; border: 1px solid rgba(190,205,218,.16); border-radius: 26px; background: linear-gradient(150deg, #29292d 0%, #1a1a1d 38%, #101012 74%, #242427 100%); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 16px 32px rgba(0,0,0,.24); }
.ufc-hero .ufc-photo { flex: none; width: 96px; height: 96px; }
.ufc-hero h1 { margin: 0; font: 700 24px/1.15 var(--u-display); }
.ufc-hero p { margin: 6px 0 0; color: var(--u-muted); font-size: 14px; }
.ufc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin: 14px 0; }
.ufc-stats div { padding: 12px 14px; border: 1px solid var(--u-border); border-radius: 16px; background: var(--u-card); }
.ufc-stats span { display: block; color: var(--u-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ufc-stats b { display: block; margin-top: 4px; font: 600 20px/1.2 var(--u-mono); }
.ufc-page h2 { margin: 22px 0 10px; font: 600 17px/1.3 var(--u-display); }
.ufc-history { display: grid; gap: 8px; }
.ufc-history div { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--u-border); border-radius: 14px; background: var(--u-card); font-size: 14px; }
.ufc-history .r-W { color: #6ee7b7; font-weight: 700; } .ufc-history .r-L { color: #fca5a5; font-weight: 700; }
.ufc-history small { color: var(--u-muted); font-size: 13px; }
.ufc-note { color: #fbbf24; font-size: 13px; }
.ufc-src { margin-top: 20px; color: #64748b; font-size: 12px; }
/* Shared circular photo (fighter page hero; the schedule cards use the
   today-team-logo / today-prop-photo classes instead). */
.ufc-photo { width: 96px; height: 96px; overflow: hidden; border: 1px solid var(--u-border); border-radius: 50%; background: rgba(255,255,255,.05); }
.ufc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ufc-skel { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; border-radius: 12px; animation: ufcShimmer 1.2s linear infinite; }
@keyframes ufcShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ufc-skel { animation: none; } }
@media (max-width: 480px) {
  .ufc-page .ufc-photo { width: 60px; height: 60px; }
}