/* FrancaCup — Base
   Variáveis, reset e fundo global.
*/
:root {
  --bg: #0f1115;
  --surface: #171b23;
  --card: #1e2430;
  --card-soft: rgba(30, 36, 48, 0.64);
  --border: #2b3444;
  --border-soft: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --muted: #b8bec9;
  --muted-2: #747d8d;
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.16);
  --orange: #f97316;
  --orange-soft: rgba(249, 115, 22, 0.16);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --container: 1180px;
  --font-display: "Big Shoulders Display", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  z-index: -2;
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(59, 130, 246, 0.2),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(249, 115, 22, 0.18),
      transparent 30%
    ),
    linear-gradient(180deg, #0f1115 0%, #0b0d11 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
}


/* FrancaCup — dropdowns globais
   Mantém selects legíveis no tema dark, incluindo as opções abertas. */
select {
  color-scheme: dark;
  background-color: rgba(15, 17, 21, 0.92);
  color: var(--text);
}

select option,
select optgroup {
  background-color: #0f1115;
  color: #ffffff;
}

select option:checked,
select option:hover,
select option:focus {
  background-color: #1e2430;
  color: #ffffff;
}