:root {
  --font-family: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --bg-base: radial-gradient(circle at 20% 0%, #4fd3ff 0%, #1b6dff 35%, #112c8f 100%);
  --bg-overlay: none;
  --bg-pattern: none;
  --bg-stripes: repeating-linear-gradient(
    -16deg,
    rgba(255, 255, 255, 0.1) 0px,
    rgba(255, 255, 255, 0.1) 2px,
    transparent 2px,
    transparent 28px
  );
  --bg-ambient: radial-gradient(circle at 80% 20%, rgba(255, 240, 133, 0.22), transparent 30%),
    radial-gradient(circle at 10% 75%, rgba(143, 255, 255, 0.18), transparent 26%);
  --bg-sizes: cover, auto, auto, auto, auto;
  --bg-positions: center, 0 0, 0 0, 0 0, 0 0;
  --panel: rgba(17, 45, 133, 0.82);
  --panel-border: rgba(255, 255, 255, 0.34);
  --panel-shadow: 0 16px 0 rgba(10, 22, 71, 0.38), 0 26px 50px rgba(8, 16, 56, 0.45);
  --text-primary: #f6fbff;
  --text-secondary: #d8edff;
  --text-muted: #a7d4ff;
  --primary: #ffd73b;
  --primary-hover: #ffe067;
  --danger: #ff5e57;
  --danger-hover: #ff7a74;
  --line: rgba(255, 255, 255, 0.2);
  --focus: 0 0 0 3px rgba(255, 228, 114, 0.5);
}

body.theme-fortnite {
  --font-family: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --bg-base: radial-gradient(circle at 30% 0%, #66f0ff 0%, #2f9dff 32%, #1a2e8f 100%);
  --bg-overlay: url("/assets/bg-fortnite.svg");
  --bg-pattern: repeating-linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 2px,
      transparent 2px,
      transparent 26px
    ),
    repeating-linear-gradient(
      -120deg,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.1) 2px,
      transparent 2px,
      transparent 24px
    );
  --bg-stripes: repeating-linear-gradient(
    -16deg,
    rgba(255, 214, 120, 0.12) 0px,
    rgba(255, 214, 120, 0.12) 2px,
    transparent 2px,
    transparent 30px
  );
}

body.theme-league {
  --font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  --bg-base: radial-gradient(circle at 30% 0%, #3b4e6b 0%, #1a2436 42%, #0c0f16 100%);
  --bg-overlay: url("/assets/bg-league.svg");
  --bg-pattern: repeating-linear-gradient(
      45deg,
      rgba(197, 170, 112, 0.12) 0px,
      rgba(197, 170, 112, 0.12) 2px,
      transparent 2px,
      transparent 38px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(197, 170, 112, 0.08) 0px,
      rgba(197, 170, 112, 0.08) 1px,
      transparent 1px,
      transparent 22px
    );
  --bg-ambient: radial-gradient(circle at 82% 18%, rgba(226, 180, 95, 0.2), transparent 28%),
    radial-gradient(circle at 8% 76%, rgba(89, 117, 166, 0.22), transparent 30%);
  --panel-border: rgba(203, 179, 129, 0.45);
  --panel-shadow: 0 12px 0 rgba(20, 26, 39, 0.56), 0 28px 52px rgba(5, 7, 10, 0.5);
  --text-primary: #f6e8ca;
  --text-secondary: #d7c4a2;
  --text-muted: #baa17f;
  --primary: #c89b3c;
  --primary-hover: #d8ab4c;
  --danger: #b5453f;
  --danger-hover: #ca5750;
  --line: rgba(201, 173, 121, 0.28);
  --focus: 0 0 0 3px rgba(200, 155, 60, 0.35);
}

body.theme-minecraft {
  --font-family: "Lucida Console", Monaco, monospace;
  --bg-base: linear-gradient(180deg, #6fcf5c 0%, #4b9040 25%, #2f5c2e 55%, #1d2c22 100%);
  --bg-overlay: url("/assets/bg-minecraft.svg");
  --bg-pattern: repeating-linear-gradient(
      0deg,
      rgba(82, 58, 34, 0.5) 0px,
      rgba(82, 58, 34, 0.5) 10px,
      transparent 10px,
      transparent 48px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(97, 68, 38, 0.5) 0px,
      rgba(97, 68, 38, 0.5) 10px,
      transparent 10px,
      transparent 48px
    ),
    radial-gradient(circle at 20% 70%, rgba(38, 28, 18, 0.35) 0px, transparent 10px),
    radial-gradient(circle at 70% 35%, rgba(38, 28, 18, 0.35) 0px, transparent 12px);
  --bg-stripes: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.06) 0px,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px,
    transparent 22px
  );
  --bg-ambient: radial-gradient(circle at 84% 16%, rgba(222, 255, 162, 0.2), transparent 26%),
    radial-gradient(circle at 12% 80%, rgba(120, 185, 103, 0.25), transparent 32%);
  --panel-border: rgba(195, 222, 173, 0.5);
  --panel-shadow: 0 8px 0 rgba(28, 57, 31, 0.66), 0 20px 35px rgba(8, 21, 10, 0.46);
  --text-primary: #eff9e7;
  --text-secondary: #d4edc5;
  --text-muted: #accd96;
  --primary: #7acb59;
  --primary-hover: #8fdb70;
  --danger: #d8644f;
  --danger-hover: #ea7a64;
  --line: rgba(214, 240, 193, 0.28);
  --focus: 0 0 0 3px rgba(122, 203, 89, 0.4);
}

body.theme-csgo {
  --font-family: "Teko", "Barlow Condensed", "Arial Narrow", sans-serif;
  --bg-base: radial-gradient(circle at 20% 0%, #5d646c 0%, #2e3339 42%, #14181c 100%);
  --bg-overlay: url("/assets/bg-csgo.svg");
  --bg-pattern: repeating-linear-gradient(
      -45deg,
      rgba(255, 179, 100, 0.14) 0px,
      rgba(255, 179, 100, 0.14) 10px,
      rgba(24, 26, 29, 0.2) 10px,
      rgba(24, 26, 29, 0.2) 20px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 28px
    );
  --bg-stripes: repeating-linear-gradient(
    22deg,
    rgba(255, 179, 100, 0.08) 0px,
    rgba(255, 179, 100, 0.08) 2px,
    transparent 2px,
    transparent 24px
  );
  --bg-ambient: radial-gradient(circle at 84% 18%, rgba(255, 171, 87, 0.16), transparent 30%),
    radial-gradient(circle at 15% 80%, rgba(115, 147, 174, 0.2), transparent 28%);
  --panel-border: rgba(255, 187, 114, 0.45);
  --panel-shadow: 0 10px 0 rgba(19, 22, 26, 0.58), 0 24px 46px rgba(6, 8, 11, 0.55);
  --text-primary: #f1e7d8;
  --text-secondary: #d9c7ad;
  --text-muted: #af9d86;
  --primary: #f2a85a;
  --primary-hover: #ffb972;
  --danger: #b34c43;
  --danger-hover: #cc5f54;
  --line: rgba(235, 192, 142, 0.3);
  --focus: 0 0 0 3px rgba(242, 168, 90, 0.36);
}

body.theme-valorant {
  --font-family: "Rajdhani", "Barlow Condensed", "Segoe UI", sans-serif;
  --bg-base: radial-gradient(circle at 30% 0%, #2a2f3c 0%, #171a23 43%, #0b0d12 100%);
  --bg-overlay: url("/assets/bg-valorant.svg");
  --bg-pattern: repeating-linear-gradient(
      90deg,
      rgba(255, 96, 130, 0.14) 0px,
      rgba(255, 96, 130, 0.14) 1px,
      transparent 1px,
      transparent 90px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 90px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 96, 130, 0.12) 0px,
      rgba(255, 96, 130, 0.12) 2px,
      transparent 2px,
      transparent 140px
    );
  --bg-stripes: repeating-linear-gradient(
    -22deg,
    rgba(255, 82, 118, 0.08) 0px,
    rgba(255, 82, 118, 0.08) 2px,
    transparent 2px,
    transparent 32px
  );
  --bg-ambient: radial-gradient(circle at 78% 22%, rgba(255, 86, 120, 0.16), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(85, 221, 230, 0.14), transparent 30%);
  --panel-border: rgba(255, 111, 143, 0.48);
  --panel-shadow: 0 12px 0 rgba(22, 14, 20, 0.62), 0 24px 46px rgba(5, 4, 7, 0.6);
  --text-primary: #ffe8ee;
  --text-secondary: #ffc7d4;
  --text-muted: #d09ca9;
  --primary: #ff5a7e;
  --primary-hover: #ff7292;
  --danger: #b84d64;
  --danger-hover: #cf627a;
  --line: rgba(255, 142, 166, 0.3);
  --focus: 0 0 0 3px rgba(255, 90, 126, 0.38);
}