/* =========================
   Modern UI Foundation (2025) - Enhanced (polished + fixes)
   ========================= */

/* -------- Tokens -------- */
:root {
  color-scheme: dark;

  /* OKLCH for perceptually uniform colors */
  --bg: oklch(10% 0.02 262);
  --surface: oklch(16% 0.025 262);
  --text: oklch(94% 0.01 262);

  /* Accents */
  --accent:  oklch(68% 0.26 300);
  --accent-2: oklch(70% 0.23 255);
  --accent-3: oklch(72% 0.21 150);
  --warn:   oklch(74% 0.20 70);
  --danger: oklch(64% 0.22 25);

  /* Effects */
  --card-radius: 20px;
  --ring-size: 2.5px;
  --ring: 0 0 0 var(--ring-size) color-mix(in oklab, var(--accent) 40%, transparent);
  --shadow-lg: 0 28px 64px rgba(0,0,0,.5);
  --shadow-md: 0 16px 36px rgba(0,0,0,.35);
  --shadow-sm: 0 10px 20px rgba(0,0,0,.25);
  --inset-soft: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.3);

  /* Gradients */
  --g1: linear-gradient(145deg, color-mix(in oklab, var(--accent) 45%, transparent), color-mix(in oklab, var(--accent-2) 35%, transparent));
  --g2: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));

  /* Sizing */
  --radius-pill: 9999px;
  --bar-h: 9px;

  /* Grain (toggle via --grain-enabled) */
  --grain-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%%" height="100%%" filter="url(#n)" opacity="0.08"/></svg>');
  --grain-enabled: 1; /* set to 0 to disable */
}

/* Light theme */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: oklch(99% 0 262);
    --surface: oklch(96% 0.015 262);
    --text: oklch(16% 0.025 262);
    --shadow-sm: 0 2px 4px rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.1);
    --shadow-md: 0 14px 32px rgba(0,0,0,.14);
    --shadow-lg: 0 28px 56px rgba(0,0,0,.16);
  }
}

/* -------- Base / Reset -------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, #app {
  min-height: 100%;
  margin: 0;
  font-family: 'Inter var', ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  font-variation-settings: 'wght' 450;
  letter-spacing: -0.01em;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root { --fluid: clamp(15px, 0.95vw + 13px, 17px); }
html { font-size: var(--fluid); }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Rich dark backdrop with optional grain */
@media (prefers-color-scheme: dark) {
  body {
    background:
      /* grain layer (toggled) */
      linear-gradient(transparent, transparent),
      radial-gradient(60% 80% at 10% 10%, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 60%),
      radial-gradient(60% 80% at 90% 80%, color-mix(in oklab, var(--accent-2) 12%, transparent) 0%, transparent 60%),
      var(--bg);
    background-blend-mode: overlay, normal, normal, normal;
    background-image:
      calc(var(--grain-enabled) * 1px) var(--grain-svg),
      radial-gradient(60% 80% at 10% 10%, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 60%),
      radial-gradient(60% 80% at 90% 80%, color-mix(in oklab, var(--accent-2) 12%, transparent) 0%, transparent 60%),
      none;
    background-size:
      200px 200px, auto, auto, auto;
  }
}

/* Focus states on interactive elements */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--ring), 0 0 0 calc(var(--ring-size) + 3px) rgba(0,0,0,.2);
  border-radius: 12px;
  transition: box-shadow 0.2s ease;
}

/* Motion/contrast/forced colors */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  .bar .bar-shimmer { animation-duration: 3.5s !important; }
  .delta-chip .arrow-icon { animation: none !important; }
}

/* FIX: high-contrast rules scoped per theme */
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root { --text: oklch(100% 0 0); --ring-size: 3.5px; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light){
  :root { --text: oklch(0% 0 0); --ring-size: 3.5px; }
}

@media (forced-colors: active) {
  * { outline-color: CanvasText; }
}

/* -------- List container -------- */
#list {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 50%, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, color-mix(in oklab, var(--accent-2) 9%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 40% 20%, color-mix(in oklab, var(--warn) 7%, transparent) 0%, transparent 55%);
  /* optional grain overlay on list */
  background-image:
    calc(var(--grain-enabled) * 1px) var(--grain-svg),
    radial-gradient(circle at 20% 50%, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, color-mix(in oklab, var(--accent-2) 9%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 40% 20%, color-mix(in oklab, var(--warn) 7%, transparent) 0%, transparent 55%);
  background-blend-mode: overlay, normal, normal, normal;
  background-size: 200px 200px, auto, auto, auto;
  will-change: transform;
  transform: translateZ(0);
  animation: gradientShift 20s ease-in-out infinite;
  transition: gap 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* -------- Cards -------- */
.card {
  position: relative;
  overflow: clip;
  border-radius: var(--card-radius);
  background: color-mix(in oklab, white 5%, transparent);
  box-shadow: var(--shadow-sm), inset 0 0 20px rgba(0,0,0,.1);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

/* Backdrop blur with fallbacks */
@supports (backdrop-filter: blur(1px)) {
  .card,
  .sort-btn,
  .filter-btn,
  .delta-chip {
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
  }
}

.card-enhanced {
  border: 1px solid color-mix(in oklab, white 10%, transparent);
  background: var(--g2), var(--g1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--inset-soft), var(--shadow-md);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}
@media (hover: hover) {
  .card-enhanced:hover {
    transform: translateY(-6px) scale(1.015) rotateX(2deg) rotateY(2deg);
    box-shadow: var(--inset-soft), var(--shadow-lg);
  }
}

/* Inner probabilistic wash */
.card-wash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(80% 60% at 50% 0%,   color-mix(in oklab, var(--prob-home, var(--accent-3)) 14%, transparent) 0%, transparent 75%),
    radial-gradient(80% 60% at 50% 100%, color-mix(in oklab, var(--prob-away, var(--warn))     14%, transparent) 0%, transparent 75%);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-wash.active { opacity: 0.8; }

/* Entrance animation (spring-like) */
.card-entrance {
  opacity: 0;
  transform: translateY(24px) scale(0.95);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-entrance.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 3D tilt hint */
.card-enhanced.tiltable { perspective: 1200px; transform-style: preserve-3d }

/* -------- Probability bar -------- */
.bar {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in oklab, white 7%, transparent);
  box-shadow: inset 0 0 10px rgba(0,0,0,.15);
}
.bar .prob-home,
.bar .prob-away,
.bar .prob-draw { height: var(--bar-h); }

.bar .bar-shimmer {
  position: absolute;
  inset: 0;
  left: -100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: shimmer 2.2s linear infinite;
}

/* -------- Delta chips -------- */
.delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wght' 500;
  box-shadow:
    0 8px 16px rgba(0,0,0,.28),
    0 0 24px color-mix(in oklab, var(--glow, white) 30%, transparent);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, box-shadow 0.3s ease;
}
.delta-up {
  --glow: var(--accent-3);
  background: color-mix(in oklab, var(--accent-3) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-3) 40%, transparent);
}
.delta-down {
  --glow: var(--danger);
  background: color-mix(in oklab, var(--danger) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 38%, transparent);
}

/* FIX: finite bounce (accessibility) */
.delta-chip .arrow-icon { display: inline-block; animation: bounce 1.2s ease-in-out 3; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* -------- Sort / Filter controls -------- */
.sort-btn {
  position: relative;
  background: color-mix(in oklab, white 9%, transparent);
  border: 1px solid color-mix(in oklab, white 14%, transparent);
  border-radius: var(--radius-pill);
  font-variation-settings: 'wght' 500;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.3);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background 0.3s ease;
}
.sort-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-md); }
.sort-btn.active {
  background: linear-gradient(145deg, color-mix(in oklab, var(--accent-2) 30%, transparent), color-mix(in oklab, var(--accent) 30%, transparent));
  box-shadow: 0 12px 24px color-mix(in oklab, var(--accent) 30%, transparent);
}

.filter-btn {
  position: relative;
  border: 1px solid color-mix(in oklab, white 14%, transparent);
  background: color-mix(in oklab, white 7%, transparent);
  border-radius: var(--radius-pill);
  font-variation-settings: 'wght' 500;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background 0.3s ease;
}
.filter-btn.active {
  background: linear-gradient(145deg, color-mix(in oklab, var(--accent-2) 32%, transparent), color-mix(in oklab, var(--accent) 32%, transparent));
  transform: scale(1.06);
  box-shadow: 0 10px 20px color-mix(in oklab, var(--accent-2) 30%, transparent);
}

/* -------- Buttons: Enhanced ripple -------- */
button {
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
button:hover:not(:disabled) { transform: scale(1.03); }
/* FIX: exclude toggle buttons from generic :active scale */
button:active:not(:disabled):not(.sort-btn):not(.filter-btn) { transform: scale(0.97); }

.ripple {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 40%, transparent);
  transform: scale(0);
  animation: ripple-animation 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-animation { to { transform: scale(2.5); opacity: 0; } }

/* -------- Animations / Perf -------- */
@keyframes gradientShift { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }

/* -------- Container queries -------- */
@container (min-width: 640px) {
  .card { border-radius: calc(var(--card-radius) + 3px); }
  .bar { --bar-h: 11px; }
}
@container (min-width: 960px) {
  .card-enhanced:hover { transform: translateY(-8px) scale(1.02) rotateX(3deg) rotateY(3deg); }
}

/* -------- Progressive enhancement -------- */
@supports not (color: oklch(50% 0.1 200)) {
  :root {
    --bg: #080808; --surface: #0F0F0F; --text: #F0F0F0;
    --accent: #8B5CF6; --accent-2: #4F46E5; --accent-3: #16A34A; --warn: #F59E0B; --danger: #EF4444;
  }
}