/* ==========================================================
   BASE — Reset, fonts, custom properties, typography, utilities
   ========================================================== */

@font-face {
  font-family: DrukBold;
  src: url(fonts/Druk-Wide-Bold.ttf);
}
@font-face {
  font-family: HelveticaNormal;
  src: url(fonts/HelveticaNowText-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #353535;
  font-family: HelveticaNormal;
}

:root {
  --ideal-size: 354px;
  --max-column-count: 3;
  --gap: 20px;
  --font-heading: DrukBold, Impact, sans-serif;
  --font-body: HelveticaNormal, Arial, sans-serif;
  --brand: #c57211;
  --brand-50: rgba(197,114,17,.50);
  --brand-25: rgba(197,114,17,.25);
  --text-strong: #f2f2f2;
  --text-soft: #c9c9c9;
  --panel: #121212;
  --panel-2: #0e0e0e;
  --nav-accent: var(--ColorTemplate, #FFAE2B);
  --nav-accent-1: #FFB224;
  --nav-accent-2: #FFD86A;
  --nav-glow: rgba(255,178,36,.55);
  --cta-amber-1: var(--ColorTemplate, #833c16);
  --cta-amber-2: #FFAE2B;
  --rank-killers: #f5a623;
  --rank-victims: #ff5a5f;
  --rank-pk: #b38cff;
  --card-bg: #171717;
  --card-br: #2a2a2a;
  --text-main: #f5f5f5;
  --text-dim: rgba(255,255,255,.85);
  --rankingGold1: #FFD86F;
  --rankingGold2: #C89429;
}

a {
  color: #833c16;
  font-family: HelveticaNormal;
  font-weight: 600;
  text-decoration: none;
}
a:hover {
  color: #FFAE2B;
}

h1 {
  color: white;
  font-size: 2.5rem;
  font-family: DrukBold;
  text-align: center;
  margin-bottom: 20px;
}
h2 {
  color: white;
  font-size: 1.75rem;
  font-family: DrukBold;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.heading-tertiary {
  color: white;
  font-family: DrukBold;
  font-size: 1.25rem;
}

/* ---- Utilities ---- */
.w-40 { width: 40%; }
.general-divider { height: 60px; }
.padding-r-10 { padding-right: 10px!important; }
.padding-l-10 { padding-left: 10px!important; }
.text-accent { color: #833c16; }
.ul-nostyle { list-style-type: none; padding: 0; margin: 0; }
.nospacing { margin: 0!important; padding: 0!important; }
.min-height-zero { min-height: 0px!important; }
.min-height-100vh { min-height: 100vh!important; }
.hide-desktop { display: none; }
.flip-x { transform: scale(-1, 1); }

.fire-gradient-text {
  background-color: #833c16;
  background-image: linear-gradient(45deg, #e25822, #833c16);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.hero-right-section .row {height: 100vh;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #D9D9D9;
  transition: background-color 5000s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
textarea:autofill,
textarea:autofill:hover,
textarea:autofill:focus,
select:autofill,
select:autofill:hover,
select:autofill:focus {
  color: #D9D9D9;
  transition: background-color 5000s ease-in-out 0s;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Class dots */
.dkdot { background-color: #D33F49; }
.smdot { background-color: #0d6efd; }
.elfdot { background-color: #D9D9D9; }
.mgdot { background-color: #6f42c1; }

.horizontal-ul {
  margin: 0; padding: 0; list-style: none;
  text-transform: uppercase; font-weight: 400;
  font-size: 0.875rem; color: white;
}
.horizontal-ul li { display: inline-block; margin-right: 6px; }
.horizontal-ul .dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 3px;
}

.badge-haze { font-size: 1rem!important; font-weight: 400!important; }
.badge-haze-small { font-size: 0.875rem!important; font-weight: 400!important; padding: 5px; }
.vip-badge {
  border-radius: 5px; background-color: #833c16;
  padding: 5px; color: #353535; display: inline; font-size: 1rem;
}

.notification:after { color: #d33f49!important; }

.horizontal-ul { margin:0; padding:0; list-style:none; text-transform:uppercase; font-weight:400; font-size:.875rem; color:#fff; }
.horizontal-ul li { display:inline-block; margin-right:6px; }
.horizontal-ul .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:3px; }

.no-chrome {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}