@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400..900&family=Inter:wght@400;500;600;700;800&family=Titillium+Web:wght@600;700&display=swap');
body {
  background-color: #08090C;
  background-image:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(224, 193, 88, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 50% at 90% 90%, rgba(176, 124, 34, 0.05), transparent 80%),
    linear-gradient(
      160deg,
      #08090C 0%,
      #111218 35%,
      #0C0E12 70%,
      #08090C 100%
    );
  background-attachment: fixed;
  color: var(--bs-body-color);
}
:root {
--ff-heading: 'Archivo', sans-serif;
--ff-nav: 'Titillium Web', sans-serif;
--ff-body: 'Inter', sans-serif;
--fs-hero: 48px;
--fs-h2: 32px;
--fs-h3: 24px;
--fs-h4: 20px;
--fs-body: 18px;
--fs-nav: 18px;
--fs-small: 14px;
--fs-badge: 13px;
}
[data-bs-theme="dark"] {
--bs-primary: #E0C158;
--bs-primary-rgb: 224, 193, 88;
--bs-primary-hover: #F2D972;
--bs-body-bg: #0B0C10;
--bs-body-bg-rgb: 11, 12, 16;
--bs-tertiary-bg: #181A24;
--bs-body-color: #E2E4E9;
--bs-body-color-rgb: 226, 228, 233;
--bs-emphasis-color: #E2E4E9;
--bs-secondary-color: #9AA0A6;
--bs-secondary-color-rgb: 154, 160, 166;
--bs-secondary-rgb: 154, 160, 166;
--bs-secondary: #9AA0A6;
--bs-card-bg: #181A24;
--bs-border-color: #2A2D3D;
--bs-border-color-translucent: rgba(42, 45, 61, 0.5);
--bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.4);
--bs-link-color: #9E7700;
--bs-link-hover-color: #E0C158;
--bs-badge-font-size: var(--fs-badge);
--bs-badge-font-weight: 700;
--bs-badge-padding-x: 8px;
--bs-badge-padding-y: 5px;
--bs-badge-border-radius: 4px;
}
[data-bs-theme="dark"] .text-white {
color: var(--bs-emphasis-color) !important;
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand) {
color: #9E7700;
text-decoration: none;
text-underline-offset: 0.15em;
transition: color 0.2s ease-in-out;
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):hover,
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):focus-visible {
color: #E0C158;
text-decoration: underline;
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):has(img),
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):has(img):hover,
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):has(img):focus-visible,
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand).text-decoration-none,
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand).text-decoration-none:hover,
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand).text-decoration-none:focus-visible {
text-decoration: none;
}
body {
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: 1.6;
font-weight: 400;
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
strong, b {
font-weight: 600;
color: var(--bs-emphasis-color);
}
p.lead {
font-size: var(--fs-h4);
line-height: 1.5;
color: var(--bs-emphasis-color);
}
small, .caption {
font-size: var(--fs-small);
line-height: 1.4;
color: var(--bs-secondary-color);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--ff-heading);
color: var(--bs-emphasis-color);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
:is(h1, h2, h3, .h1, .h2, .h3, .category-title).text-primary {
background-image: var(--grad-gold-sheen);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus-visible,
[data-bs-theme="dark"] .navbar .nav-link.active {
background-image: var(--grad-gold-sheen);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
h1, .h1 {
font-size: var(--fs-hero);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.2px;
}
h2, .h2 {
font-size: var(--fs-h2);
font-weight: 800;
line-height: 1.20;
margin-bottom: 16px;
}
h3, .h3 {
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.25;
margin-bottom: 14px;
}
h5, h6, .h5, .h6 {
font-weight: 700;
}
h4, .h4 {
font-size: var(--fs-h4);
font-weight: 700;
line-height: 1.30;
margin-bottom: 12px;
}
[data-bs-theme="dark"] .navbar {
--bs-navbar-active-color: var(--bs-primary);
--bs-navbar-hover-color: var(--bs-primary);
--bs-navbar-color: var(--bs-emphasis-color);
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E0C158' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-color: #000000 !important;
border-bottom: 2px solid transparent !important;
border-image: var(--grad-gold-metallic) 1 !important;
padding-top: 10px;
padding-bottom: 10px;
}
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
.navbar-toggler-icon {
background-image: var(--grad-gold-sheen);
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
}
.nav-link {
font-family: var(--ff-nav);
font-size: var(--fs-nav);
font-weight: 600;
text-transform: uppercase;
transition: color 0.2s ease-in-out;
}
:root {
--grad-gold-metallic: linear-gradient(
  135deg,
  #C4913A 0%,
  #F2D972 25%,
  #A8711D 50%,
  #EFD268 75%,
  #B07C22 100%
);
--grad-gold-hover: linear-gradient(
  135deg,
  #D9A748 0%,
  #F8E79B 25%,
  #BE8526 50%,
  #F6E08D 75%,
  #C68C2A 100%
);
--grad-gold-sheen: linear-gradient(
  135deg,
  #E0C158 0%,
  #F2D972 45%,
  #C9A63F 100%
);
--grad-twitch-metallic: linear-gradient(
  135deg,
  #8438EE 0%,
  #9146FF 25%,
  #772CE8 50%,
  #9146FF 75%,
  #5C16C5 100%
);
--grad-twitch-hover: linear-gradient(
  135deg,
  #772CE8 0%,
  #8438EE 25%,
  #6A24D4 50%,
  #8438EE 75%,
  #5C16C5 100%
);
}
[data-bs-theme="dark"] .btn-primary {
background: var(--grad-gold-metallic) !important;
border: 1px solid var(--bs-primary-hover) !important;
color: var(--bs-body-bg) !important;
font-family: var(--ff-nav);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
transition: all 0.3s ease-in-out;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
background: var(--grad-gold-hover) !important;
color: var(--bs-body-bg) !important;
box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.8);
transform: translateY(-1px);
}
[data-bs-theme="dark"] .btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
[data-bs-theme="dark"] .btn-outline-primary {
background: transparent !important;
border: 2px solid transparent !important;
border-image: var(--grad-gold-metallic) 1 !important;
color: var(--bs-primary) !important;
font-family: var(--ff-nav);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease-in-out;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
background: var(--grad-gold-metallic) !important;
color: #0B0C10 !important;
box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
}
:root {
--twitch-purple: #9146FF;
--twitch-purple-light: #A970FF;
--twitch-purple-hover: #772CE8;
--twitch-purple-active: #5C16C5;
}
[data-bs-theme="dark"] .btn-twitch,
.btn-twitch {
--bs-btn-color: #FFFFFF;
--bs-btn-bg: var(--twitch-purple);
--bs-btn-border-color: var(--twitch-purple);
--bs-btn-hover-color: #FFFFFF;
--bs-btn-hover-bg: var(--twitch-purple-hover);
--bs-btn-hover-border-color: var(--twitch-purple-hover);
--bs-btn-active-color: #FFFFFF;
--bs-btn-active-bg: var(--twitch-purple-active);
--bs-btn-active-border-color: var(--twitch-purple-active);
background: var(--grad-twitch-metallic) !important;
border: 1px solid #A366FF !important;
color: #FFFFFF !important;
font-family: var(--ff-nav);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 2px 8px rgba(145, 70, 255, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
transition: all 0.2s ease-in-out;
}
[data-bs-theme="dark"] .btn-twitch:hover,
[data-bs-theme="dark"] .btn-twitch:focus-visible,
.btn-twitch:hover,
.btn-twitch:focus-visible {
background: var(--grad-twitch-hover) !important;
border-color: #8438EE !important;
box-shadow: 0 4px 12px rgba(145, 70, 255, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
[data-bs-theme="dark"] .btn-twitch:active,
.btn-twitch:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-danger,
.btn-secondary,
.btn-outline-secondary,
.btn-outline-danger {
font-family: var(--ff-nav);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
[data-bs-theme="dark"] .btn-outline-secondary,
.btn-outline-secondary {
--bs-btn-color: var(--bs-secondary-color);
--bs-btn-border-color: var(--bs-secondary-color);
--bs-btn-hover-color: var(--bs-body-bg);
--bs-btn-hover-bg: var(--bs-secondary-color);
--bs-btn-hover-border-color: var(--bs-secondary-color);
--bs-btn-active-color: var(--bs-body-bg);
--bs-btn-active-bg: var(--bs-secondary-color);
--bs-btn-active-border-color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .btn-secondary,
.btn-secondary {
--bs-btn-color: var(--bs-emphasis-color);
--bs-btn-bg: var(--bs-border-color);
--bs-btn-border-color: var(--bs-secondary-color);
--bs-btn-hover-color: var(--bs-emphasis-color);
--bs-btn-hover-bg: #363A4C;
--bs-btn-hover-border-color: var(--bs-emphasis-color);
--bs-btn-active-color: var(--bs-emphasis-color);
--bs-btn-active-bg: var(--bs-border-color);
--bs-btn-active-border-color: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .btn-outline-twitch,
.btn-outline-twitch {
color: var(--twitch-purple-light) !important;
border-color: var(--twitch-purple) !important;
background-color: transparent !important;
font-family: var(--ff-nav);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease-in-out;
}
[data-bs-theme="dark"] .btn-outline-twitch:hover,
.btn-outline-twitch:hover {
background-color: var(--twitch-purple) !important;
color: #FFFFFF !important;
box-shadow: 0 4px 12px rgba(145, 70, 255, 0.4);
}
[data-bs-theme="dark"] .badge {
font-family: var(--ff-nav);
text-transform: uppercase;
letter-spacing: 1px;
}
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .text-bg-primary {
background-color: var(--bs-primary) !important;
background-image: var(--grad-gold-sheen);
color: #0B0C10 !important;
}
[data-bs-theme="dark"] .badge-outline-gold {
color: var(--bs-primary);
border: 1px solid rgba(var(--bs-primary-rgb), 0.5);
background-color: rgba(var(--bs-primary-rgb), 0.08);
}
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .text-bg-secondary {
background-color: #2A2D3D !important;
color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .card {
border: 1px solid var(--bs-border-color);
transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
[data-bs-theme="dark"] .card:hover {
border-color: rgba(var(--bs-primary-rgb), 0.5);
}
@media (max-width: 768px) {
:root {
  --fs-hero: 34px;
  --fs-h2: 26px;
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-body: 16px;
}
}
.text-gradient-gold {
background: var(--grad-gold-metallic);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
display: inline-block;
}
.card.card-metallic {
border-color: rgba(var(--bs-primary-rgb), 0.6);
}
.card.card-metallic:hover {
border-color: var(--bs-primary);
}
.badge-metallic {
background: var(--grad-gold-metallic) !important;
color: #0B0C10 !important;
font-family: var(--ff-nav);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.footer {
font-size:14px;
}
[data-bs-theme="dark"] .footer {
border-top: 1px solid transparent;
position: relative;
padding-top: 36px;
padding-bottom: 32px;
color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--grad-gold-metallic);
opacity: 0.7;
}
.footer a {
color: var(--bs-secondary-color);
text-decoration: none;
font-family: var(--ff-nav);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.8px;
transition: color 0.2s ease-in-out;
}
.footer a:hover {
color: var(--bs-primary);
}
.winner-col {
min-height: 40px;
}
.footer h5 {
font-family: var(--ff-heading);
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: var(--bs-emphasis-color);
margin-bottom: 16px;
}
label.card:hover,
label.card:has(input:checked) {
box-shadow: none;
}
.card.card-metallic:has(input:checked) {
border-color: var(--bs-primary);
}
label.card:has(input:focus-visible) {
box-shadow: 0 0 0 4px var(--bs-focus-ring-color);
}
h1 > .text-secondary,
h2 > .text-secondary,
h3 > .text-secondary,
.h1 > .text-secondary,
.h2 > .text-secondary,
.h3 > .text-secondary {
font-size: var(--fs-h4);
font-weight: 600;
letter-spacing: 0.1em;
}
.category-title {
font-family: var(--ff-heading);
}
.sponsor-label {
font-family: var(--ff-nav);
font-weight: bold;
}
[data-bs-theme="dark"] .modal {
--bs-modal-bg: var(--bs-card-bg);
--bs-modal-border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .modal-backdrop {
--bs-backdrop-opacity: .75;
}
@media (max-width: 767.98px) {
    .host-photo {
        max-width: 180px;
    }
}