/*=============== GOOGLE FONTS ===============*/
/* Fonts are <link>ed from each page head instead. An @import here made the
   browser download and parse this whole file before it could even discover
   the font URL - three serialised round-trips before any text rendered. */
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors - Tactical Palette ==========*/
  --primary-color: #FFB347;
  --primary-glow: rgba(255, 179, 71, 0.3);
  --primary-dark: #e69a2e;
  
  --accent-green: #4ade80;
  --accent-green-glow: rgba(74, 222, 128, 0.2);
  --accent-red: #f87171;
  --accent-blue: #60a5fa;
  
  --bg-primary: #0a0a0b;
  --bg-secondary: #111113;
  --bg-tertiary: #18181b;
  --bg-card: rgba(24, 24, 27, 0.8);
  --bg-glass: rgba(17, 17, 19, 0.85);
  
  --border-color: rgba(255, 255, 255, 0.06);
  --border-glow: rgba(255, 179, 71, 0.15);
  
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  
  --white-color: #FFF;

  /*========== Font and typography ==========*/
  --body-font: 'Open Sans', sans-serif;
  --title-font: 'Oswald', 'Arial Narrow', sans-serif;
  --display-font: 'Exo 2', sans-serif;
  
  --biggest-font-size: 3rem;
  --h1-font-size: 2rem;
  --h2-font-size: 1.5rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== Spacing ==========*/
  --mb-0-25: .25rem;
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-25: 1.25rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;

  /*========== Transitions ==========*/
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /*========== Effects ==========*/
  --img-transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
  --img-hidden: hidden;
  --img-scale: scale(1.08);
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--primary-glow);
}

@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 5rem;
    --h1-font-size: 2.75rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-x: hidden;
  
  /* Deliberately no background-image. A fixed-attachment grain filter
     re-rasterises on every scroll frame, and the radial glow it masked reads
     as a stray oval alone. Ambient color is per-page. */
}

h1, h2, h3 {
  color: var(--text-primary);
  font-weight: var(--font-bold);
  font-family: var(--title-font);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input {
  border: none;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  outline: none;
}

button {
  cursor: pointer;
}

.main {
  overflow-x: hidden;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section {
  padding: 5rem 0 3rem;
  position: relative;
}

.section__title {
  font-size: var(--h2-font-size);
  font-family: var(--display-font);
  color: var(--text-primary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--mb-2);
  position: relative;
}

.section__title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  border-radius: 2px;
}

.section__subtitle {
  font-size: var(--normal-font-size);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--mb-1);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/*=============== VERTICALLY CENTRED PAGE ===============*/
/*
 * Centres pages whose content is shorter than the viewport - the cart with a
 * couple of items, an empty leaderboard, a profile - which otherwise sit at
 * the top with a tall gap beneath.
 *
 * Must remain min-height. A fixed height with centred content pushes overflow
 * past both edges and puts the top permanently out of reach; min-height lets
 * the box grow, so once content fills it there is no free space left to
 * distribute.
 */
.page-center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container {
  max-width: 1100px;
  /* Gutter is padding, not margin. Auto margins collapse to zero at exactly
     max-width, putting content flush against the screen edge while the nav,
     which carries its own padding, stays inset. Padding cannot collapse, so
     every .container aligns with every other. */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mb-1-5);
  padding-right: var(--mb-1-5);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

/*=============== HEADER ===============*/
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: transparent;
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

/*=============== NAV ===============*/
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* No horizontal padding; .container supplies the gutter. Doubling it insets
     the logo and login button past the hero title and Rules card. */
}

.nav__logo {
  font-family: var(--display-font);
  font-weight: var(--font-bold);
  font-size: 1.5rem;
  color: var(--white-color);
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.nav__logo:hover {
  color: var(--primary-color);
}

.nav__toggle {
  font-size: 1.4rem;
  color: var(--white-color);
  cursor: pointer;
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.nav__toggle:hover {
  color: var(--primary-color);
  background: rgba(255, 179, 71, 0.1);
}

.nav__menu {
  position: relative;
}

/* The mobile sidebar takes over at 1100px and below.
   Started at 767px, went to 991px when Leaderboards was added to the nav,
   and 1100px is where the horizontal bar actually starts crowding the logo
   in practice. Pairs with the min-width: 1101px block further down - the
   two must always be adjacent values or there is a one-pixel gap where
   neither nav renders. */
@media screen and (max-width: 1100px) {
  .nav__menu {
    position: fixed;
    /* Footer color again. More opaque still - the drawer slides over the
       whole page, so anything showing through reads as a rendering glitch
       rather than as depth - and over the hero banner the little that did
       show through tinted the whole drawer blue. */
    background: rgb(4, 5, 10);
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 320px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4rem 2rem 2rem;
    transition: right var(--transition-normal);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
  }
  
  .header {
    /* Vertical only. Horizontal padding here offsets the logo and menu button
       8px past the content below, since .container supplies the gutter. */
    padding: 0.5rem 0;
  }
}

.nav__list {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.nav__link {
  color: var(--text-primary);
  font-weight: var(--font-semi-bold);
  font-size: var(--normal-font-size);
  letter-spacing: 0.02em;
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width var(--transition-fast);
}

.nav__link:hover {
  color: var(--primary-color);
}

.nav__link:hover::after {
  width: 100%;
}

.nav__linkLogin {
  color: var(--text-primary);
  font-weight: var(--font-semi-bold);
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
  background: transparent;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav__linkLogin:hover {
  background: var(--primary-color);
  color: var(--bg-primary);
  box-shadow: var(--shadow-glow);
}

.nav__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.nav__close:hover {
  color: var(--accent-red);
  background: rgba(248, 113, 113, 0.1);
}

/* show menu */
.show-menu {
  right: 0;
}

/* Change background header */
.scroll-header {
  /* Was backdrop-filter: blur(20px). This class is toggled on scroll, so the
     browser had to re-blur the region behind the header on every scroll frame
     - the single biggest cause of the site feeling sluggish. --bg-glass is
     already 85% opaque, so the blur was barely visible anyway. Slightly more
     opaque background instead, at zero per-frame cost. */
  /* Same color as the footer, rgb(4,5,10), with the same bright hairline -
     so the top and bottom of the page read as one frame around the content.
     Kept more opaque than the footer's 0.55 because this one sits OVER
     scrolling content: at 0.55 the text passing underneath shows through and
     the header stops being legible.
     FULLY OPAQUE, not translucent: this scrolls over the hero banner, and at
     any transparency the banner's blue tint bled through and the bar read as
     blue while the footer read as black. Opaque means it is the same color
     no matter what passes behind it. */
  background: rgb(4, 5, 10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
}

.scroll-header .nav__logo,
.scroll-header .nav__toggle {
  color: var(--text-primary);
}

/* Active link */
.active-link {
  color: var(--primary-color);
}

.active-link::after {
  width: 100%;
  background: var(--primary-color);
}

/*=============== BUTTONS ===============*/
.buttonDiscord {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border: 2px solid #5865F2;
  background: rgba(88, 101, 242, 0.1);
  color: var(--text-primary);
  font-weight: var(--font-semi-bold);
  font-size: var(--normal-font-size);
  border-radius: 12px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.buttonDiscord:hover {
  background: #5865F2;
  box-shadow: 0 0 30px rgba(88, 101, 242, 0.4);
  transform: translateY(-2px);
}

.ViewCart {
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--font-semi-bold);
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.ViewCart:hover {
  background: var(--primary-color);
  color: var(--bg-primary);
  box-shadow: var(--shadow-glow);
}

.removeItem {
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.removeItem:hover {
  color: var(--accent-red);
  background: rgba(248, 113, 113, 0.1);
}

/*=============== HOME ===============*/
.home__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.4);

  /* Hard bottom edge, by design. The banner's lower edge and the page
     background differ by ~5 brightness levels over ~360px: one 8-bit step
     per ~73px, which bands. CSS masks, baked-in WebP fades, dithering and a
     shorter fade all band the same way. Only lowering image brightness
     helps, at the cost of a visibly lighter hero. */
}

.home__container {
  position: relative;
  height: calc(100vh - var(--header-height));
  align-content: center;
  row-gap: 3rem;
}

.home__data-subtitle,
.home__data-title,
.home__social-link,
.home__info {
  color: var(--white-color);
}

.home__data-subtitle {
  display: inline-block;
  font-weight: var(--font-medium);
  font-size: var(--small-font-size);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: var(--mb-1);
  padding: 0.5rem 1rem;
  background: rgba(255, 179, 71, 0.1);
  border-radius: 4px;
  border-left: 3px solid var(--primary-color);
}

.home__data-title {
  font-family: var(--display-font);
  font-size: var(--biggest-font-size);
  font-weight: var(--font-bold);
  line-height: 1.1;
  margin-bottom: var(--mb-2);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.home__social {
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;
}

.home__social-link {
  font-size: 1.35rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.home__social-link:hover {
  color: var(--primary-color);
  background: rgba(255, 179, 71, 0.15);
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 179, 71, 0.2);
}

.home__info {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  display: flex;
  padding: 1.25rem 1.5rem;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  position: absolute;
  /* Matches .container's padding. right:0 would resolve against the padding
     box and put this hard against the screen edge, out of line with the login
     button above it and the title beside it. */
  right: var(--mb-1-5);
  bottom: 2rem;
  width: 260px;
  border-radius: 12px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.home__info:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-glow);
}

.home__info-title {
  display: block;
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: var(--mb-0-5);
  color: var(--text-primary);
}

.home__info-button {
  font-size: var(--smaller-font-size);
  color: var(--primary-color);
  font-weight: var(--font-medium);
  transition: color var(--transition-fast), letter-spacing var(--transition-fast);
}

.home__info-button:hover {
  color: var(--primary-dark);
  letter-spacing: 0.05em;
}

.home__info-overlay {
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home__info-img {
  width: 120px;
  display: block;
  /* No transform/scale on hover */
}

/*=============== ABOUT ===============*/
.about__container {
  row-gap: 2.5rem;
}

.about__data {
  text-align: center;
}

.about__description {
  margin-bottom: var(--mb-2);
  color: var(--text-secondary);
  line-height: 1.8;
}

.about__img {
  display: flex;
  column-gap: 1rem;
  align-items: center;
  justify-content: center;
}

.about__img-overlay {
  overflow: var(--img-hidden);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.about__img-one,
.about__img-two {
  transition: var(--img-transition);
}

.about__img-one:hover,
.about__img-two:hover {
  transform: var(--img-scale);
}

.about__img-one {
  width: 180px;
}

.about__img-two {
  width: 240px;
}

/*=============== FEATURES (SWIPER) ===============*/
.features__container {
  position: relative;
  padding: 1rem 0 3rem;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto;
}

.features__container.swiper-container {
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.features__card {
  width: 220px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.features__card.swiper-slide {
  height: auto;
}

.features__card:hover {
  border-color: var(--primary-color);
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.features__card:hover .features__img {
  transform: var(--img-scale);
}

.features__img-wrapper {
  overflow: hidden;
  flex-shrink: 0;
}

.features__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: var(--img-transition);
  display: block;
}

.features__data {
  padding: 1.25rem;
  background: var(--bg-card);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.features__title {
  font-size: var(--h3-font-size);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-family: var(--title-font);
}

.features__description {
  font-size: var(--small-font-size);
  color: var(--text-muted);
  display: block;
  line-height: 1.6;
}

/*=============== STORE ===============*/
.store__container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.store__card {
  width: 100%;
}

.Priority {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  justify-items: center;
}

.store__subtitle {
  font-size: var(--smaller-font-size);
  color: var(--text-muted);
  margin-bottom: var(--mb-0-5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.store__title {
  font-size: var(--h3-font-size);
  color: var(--text-primary);
  margin-bottom: var(--mb-0-5);
}

.store__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--text-primary);
  font-size: var(--smaller-font-size);
  font-weight: var(--font-semi-bold);
  border-radius: 6px;
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-top: 0.75rem;
}

.store__button:hover {
  background: var(--primary-color);
  color: var(--bg-primary);
}

/*=============== SERVERS ===============*/
/* Own page now, so the top padding has to clear the fixed header the way
   .lb-page and #contact do. */
.server.section {
  padding-top: 8rem;
}

.server__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.server__card {
  position: relative;
  width: 200px;
  /* No fixed height. The card is a square photo plus however tall the info
     panel needs to be, so it cannot leave a dead strip at the bottom - which
     is what a fixed height did at every width, and worst on ultrawide. */
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.server__card:hover {
  border-color: var(--primary-color);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.server__card:hover .server__img {
  transform: var(--img-scale);
}

.server__img {
  /* The server photos are square with the name baked into the middle of them.
     Holding the box square shows the whole picture, so that baked-in title
     stays centred and never gets cropped by the card's portrait shape. */
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition: var(--img-transition);
}

/* The picture is an <img> INSIDE .server__img, not the element itself, so
   width/height/object-fit on the wrapper never reached it and the photo kept
   its own shape, leaving dead space in the card.
   It is pinned rather than given height:100% because a percentage height
   against an aspect-ratio box inside a flex column resolves to zero - which
   collapsed these cards to a bare strip the first time round. */
.server__img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The info panel sits BELOW the photo now rather than floating over it. Over
   the image it had to darken the lower half to stay readable, which buried the
   bottom of the picture; underneath, the whole photo is visible and the panel
   reads on its own background. */
.server__content {
  position: static;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white-color);
}

/* Empty placeholder markup left over from the card template - it has no
   content but still took a few pixels off the bottom of the card. */
.server__rating {
  display: none;
}

/* Both panels grow to fill whatever height is left in the card. The two cards
   are equal height (flex stretch) but their panels are not - "Coming Soon" is
   one line against three - so without this the shorter one left a translucent
   strip between the photo and the panel. */
.server__text,
.server__text_Soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.server__text {
  background: var(--bg-glass);
  padding: 1rem;
  border-top: 1px solid var(--border-color);
}

.server__data {
  text-align: center;
}

.server__title {
  font-size: var(--h3-font-size);
  color: var(--text-primary);
  margin-bottom: var(--mb-0-25);
}

.server__subtitle {
  font-size: var(--small-font-size);
  color: var(--text-muted);
  display: block;
}

.server__price {
  color: var(--accent-green);
  font-weight: var(--font-semi-bold);
}

.server__text_Soon {
  background: var(--bg-glass);
  padding: 2rem 1rem;
  text-align: center;
}

.server__data_Soon {
  text-align: center;
}

.server__subtitle_Soon {
  /* One short line has to hold the same panel that three lines fill on the
     other card, so it is sized up to carry that space instead of floating in
     the middle of it. */
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/*=============== VIDEO ===============*/
.video__container {
  padding-bottom: 1rem;
}

.video__description {
  text-align: center;
  margin-bottom: var(--mb-2-5);
  color: var(--text-secondary);
}

.video__content {
  position: relative;
  /* The old <video> element sized itself from the file's own dimensions while
     this box stretched to the container, which is where the empty strip on the
     right came from. Fixing the ratio here means the frame is the same shape
     at every width and the embed fills it exactly. */
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

/* The panel is a link to YouTube rather than an embedded player, with a
   locally hosted preview image. Nothing here is fetched from Google, so the
   card looks like a video without making the request that linking out instead
   of embedding was meant to avoid. */
.video__link {
  /* NOT positioned: this class sits on the same element as .video__content,
     which supplies position:relative and the 16:9 box. Making it absolute here
     pulls that box out of flow and collapses the section. */
  display: block;
  cursor: pointer;
  text-decoration: none;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
    var(--bg-tertiary);
  background-size: cover;
  background-position: center;
  transition: background-color var(--transition-normal);
}

/* The artwork is a transparent PNG holding only the wordmark, so the page's own
   night sky shows through the panel instead of a flat fill. That also sidesteps
   the banding a baked-in gradient causes: a near-black JPEG gradient crosses so
   few 8-bit levels over this height that the steps read as horizontal lines. */
.video__link.has-thumb {
  background-color: transparent;
  background-size: cover;
}

.video__link:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Corner, not centre. Over the middle it covers the part of the image people
   actually want to look at. */
.video__link-play {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--bg-primary);
  font-size: 1.6rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.video__link:hover .video__link-play {
  transform: scale(1.08);
  box-shadow: 0 0 40px var(--primary-glow);
}

/* Sits under the image, not on top of it. */
.video__link-note {
  margin: 0.9rem 0 0;
  font-size: var(--small-font-size);
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

.video__link-note a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.video__link-note a:hover {
  color: var(--primary-color);
}

.video__button {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: var(--shadow-glow);
}

.video__button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 40px var(--primary-glow);
}

.video__button-icon {
  font-size: 1.5rem;
}

/*=============== FOOTER ===============*/
.footer {
  /* Translucent rather than opaque. Against the night-sky background an
     opaque footer cuts a hard rectangle across the page; this darkens enough
     to keep the text readable while the sky shows through, with the brighter
     top rule as a deliberate edge. */
  background: rgba(4, 5, 10, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 4rem;
}

.footer__container {
  row-gap: 4rem;
}

.footer__content {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  row-gap: 2.5rem;
}

.footer__title,
.footer__subtitle {
  font-size: var(--h3-font-size);
  color: var(--text-primary);
  font-family: var(--title-font);
}

.footer__title {
  margin-bottom: var(--mb-0-75);
}

.footer__description {
  margin-bottom: var(--mb-1-5);
  color: var(--text-muted);
  line-height: 1.7;
}

.footer__social {
  font-size: 1.35rem;
  color: var(--text-muted);
  margin-right: var(--mb-1);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer__social:hover {
  color: var(--primary-color);
  transform: translateY(-3px);
}

.footer__subtitle {
  margin-bottom: var(--mb-1);
}

.footer__item {
  margin-bottom: var(--mb-0-75);
}

.footer__link {
  color: var(--text-muted);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.footer__link:hover {
  color: var(--primary-color);
  padding-left: 0.5rem;
}

.footer__rights {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  text-align: center;
  padding: 2rem 0;
  border-top: 1px solid var(--border-color);
  margin-top: 2rem;
}

.footer__copy,
.footer__terms-link {
  font-size: var(--small-font-size);
  color: var(--text-muted);
}

.footer__terms {
  display: flex;
  column-gap: 1.5rem;
  justify-content: center;
}

/* Bohemia's requested trademark notice. Small print by intent - it has to be
   findable, not read. Sized to land on one line at desktop widths; no nowrap,
   so a narrow screen or a forced minimum font size wraps it instead of
   pushing a horizontal scrollbar onto the page. */
.footer__disclaimer {
  /* Capped to the width the visible column text occupies, so both edges line
     up with the INVASION / General / Social / Support block above rather than
     with the wider copyright row. justify-items:center on .footer__content
     centres each column inside its track, so the text spans ~910px while the
     grid box itself is wider - matching the box overhangs the text. 880 rather
     than 910 because that text block is not perfectly centred in the container
     (the outer columns differ in width), so an exact match still spills ~12px
     to one side. Two lines at this size is the cost of the alignment. */
  max-width: 880px;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  opacity: 0.85;
}

/* Wrapped on small screens anyway, so give it back a little size and a
   comfortable measure rather than a long thin ribbon of 10px text. */
@media screen and (max-width: 767px) {
  .footer__disclaimer {
    font-size: 0.75rem;
    max-width: 46ch;
    margin-inline: auto;
  }
}

.footer__terms-link:hover {
  color: var(--primary-color);
}

/*========== SCROLL UP ==========*/
.scrollup {
  position: fixed;
  right: 1.5rem;
  bottom: -20%;
  background: var(--bg-glass);
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-tooltip);
  transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  opacity: 0;
}

.scrollup:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-glow);
}

.scrollup:hover .scrollup__icon {
  color: var(--bg-primary);
}

.scrollup__icon {
  color: var(--text-primary);
  font-size: 1.25rem;
  transition: color var(--transition-fast);
}

/* Show scroll */
.show-scroll {
  bottom: 5rem;
  opacity: 1;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
  width: 8px;
  background-color: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--primary-color), var(--primary-dark));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/*=============== SELECTION ===============*/
::selection {
  background: var(--primary-color);
  color: var(--bg-primary);
}

/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .container {
    padding-left: var(--mb-1);
    padding-right: var(--mb-1);
  }
  
  .home__info {
    width: 100%;
    right: 0;
  }
  
  .features__container {
    width: 280px;
    margin: 0 auto;
  }
  
  .Priority {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 340px) {
  .features__container {
    width: 310px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .home__info {
    width: 220px;
    padding: 1rem;
  }
  
  .Priority {
    grid-template-columns: 1fr;
  }
}

/* For medium devices */
@media screen and (min-width: 568px) {
  .video__container {
    display: grid;
    grid-template-columns: .7fr;
    justify-content: center;
  }
  
  .features__container {
    width: 480px;
  }
  
  .Priority {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .server__container {
    justify-content: center;
  }
}

/* Desktop nav. Paired with the max-width: 1100px block above. */
@media screen and (min-width: 1101px) {
  body {
    margin: 0;
  }
  
  .nav {
    height: calc(var(--header-height) + 1rem);
  }
  
  .nav__link {
    color: var(--white-color);
    line-height: 1.2;
  }
  
  .nav__link:hover {
    color: var(--primary-color);
  }
  
  .nav__item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
  }
  
  .nav__menu {
    display: flex;
    column-gap: 1rem;
  }
  
  .nav__list {
    flex-direction: row;
    column-gap: 3rem;
  }
  
  .nav__toggle,
  .nav__close {
    display: none;
  }
  
  .scroll-header .nav__link {
    color: var(--text-primary);
  }
  
  .scroll-header .nav__link:hover {
    color: var(--primary-color);
  }
}

/* Desktop LAYOUT. Deliberately still 992px, not 1101px.
   Only the nav moved to 1101 - these hero, about, features and footer
   rules were in the same block and went with it by accident, which
   left everything between 992px and 1100px unstyled: the hero title
   and the Steam/TikTok/Discord buttons collapsed to the top left. */
@media screen and (min-width: 992px) {
  .section {
    padding: 8rem 0 3rem;
  }
  
  .home__container {
    height: 100vh;
    grid-template-rows: 1.8fr .5fr;
  }
  
  .home__data {
    align-self: flex-end;
  }
  
  .home__social {
    flex-direction: row;
    align-self: flex-end;
    margin-bottom: 3rem;
    column-gap: 1rem;
  }
  
  .home__info {
    bottom: 3rem;
    width: 300px;
  }
  
  .about__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
  
  .about__data,
  .about__title {
    text-align: initial;
  }
  
  .features__container {
    width: 600px;
  }
  
  .features__description {
    display: block;
  }
  
  .Priority {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .server__container {
    justify-content: center;
  }
  
  .footer__rights {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* For large devices */
@media screen and (min-width: 1024px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  
  .home__container {
    grid-template-rows: 2fr .5fr;
  }
  
  .home__info {
    width: 340px;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
  }
  
  .features__container {
    width: 700px;
  }
  
  .features__card {
    width: 260px;
  }
  
  .Priority {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  
  .server__container {
    gap: 2rem;
  }
  
  .about__img-one {
    width: 230px;
  }
  
  .about__img-two {
    width: 290px;
  }
  
  .video__container {
    grid-template-columns: .8fr;
  }
  
  .video__description {
    padding: 0 6rem;
  }
  
  .footer__content {
    justify-items: center;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1100px;
  }
  
  .store__container {
    max-width: 1000px;
  }
}

/* For ultrawide screens */
@media screen and (min-width: 1600px) {
  .container {
    max-width: 1200px;
  }
  
  /* No max-width override, deliberately. A wider hero than .container at these
     ultrawide steps pushes the title ~100px left and the Rules card ~100px
     right of the logo and login button above. Keeping .container width holds
     the page on one pair of vertical lines. */
  
  .store__container {
    max-width: 1100px;
  }
  
  .server__container {
    max-width: 1000px;
  }
  
  .features__container {
    max-width: 900px;
  }
  
  .features__card {
    width: 280px;
  }
  
  .video__container {
    max-width: 900px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 2000px) {
  :root {
    --biggest-font-size: 5.5rem;
    --h1-font-size: 3rem;
    --h2-font-size: 2.25rem;
    --h3-font-size: 1.5rem;
    --normal-font-size: 1.125rem;
  }
  
  .container {
    max-width: 1400px;
  }
  
  /* .home__container max-width intentionally omitted - see the note at the
     1600px breakpoint. It follows .container so the hero stays aligned. */
  
  .home__info {
    width: 400px;
  }
  
  .section {
    padding: 10rem 0 4rem;
  }
  
  .store__container {
    max-width: 1200px;
  }
  
  .Priority {
    gap: 2.5rem;
  }
  
  .storediv {
    width: 280px;
  }
  
  .server__container {
    max-width: 1100px;
    gap: 2.5rem;
  }
  
  .server__card {
    width: 260px;
  }
  
  .features__container {
    max-width: 1100px;
  }
  
  .features__card {
    width: 320px;
  }
  
  .features__img {
    height: 240px;
  }
  
  .video__container {
    max-width: 1000px;
  }
  
  .footer__content {
    /* width:100% matters. As a grid item this box sizes to its content, which
       leaves 1fr with no free space to distribute, so every track collapses to
       the 200px minmax minimum and the four columns shrink to 872px while the
       copyright row below still spans the full container. Filling the width
       first gives 1fr something to divide. */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 2700px) {
  :root {
    --biggest-font-size: 6rem;
    --h1-font-size: 3.5rem;
    --h2-font-size: 2.5rem;
    --h3-font-size: 1.75rem;
    --normal-font-size: 1.25rem;
  }
  
  .container {
    max-width: 1600px;
  }
  
  /* .home__container max-width intentionally omitted - see the note at the
     1600px breakpoint. It follows .container so the hero stays aligned. */
  
  .section {
    padding: 12rem 0 6rem;
  }
  
  .store__container {
    max-width: 1400px;
  }
  
  .storediv {
    width: 320px;
  }
  
  .server__container {
    max-width: 1300px;
  }
  
  .server__card {
    width: 300px;
  }
  
  .features__container {
    max-width: 1300px;
  }
  
  .features__card {
    width: 380px;
  }
  
  .features__img {
    height: 280px;
  }
}

/* For tall screens */
@media screen and (min-height: 721px) {
  body {
    margin: 0;
  }
  
  .home__container,
  .home__img {
    height: 680px;
  }
}

@media screen and (min-height: 900px) {
  .home__container,
  .home__img {
    height: 100vh;
  }
}

/* Hero below 1100px. This must match the width at which the nav becomes a
   drawer: at any lower breakpoint the desktop hero stays in force while the
   nav is already a drawer, and the title, Discord button and social icons
   jump at that boundary while the Rules card returns to the bottom-right.

   align-content: center keeps the stack centred on the banner - the stack is
   shorter than the image, and anchored to the top it leaves a long empty run
   of background beneath. */
@media screen and (max-width: 1100px) {
  .home__container {
    height: auto;
    /* Short screens keep body's header-height top margin, so the hero gets
       the viewport minus that. See the taller-screen rule below - the site
       already zeroes that margin above 721px and this has to follow it, or
       the hero comes up exactly one header short and leaves a gap. */
    min-height: calc(100vh - var(--header-height));
    /* The desktop block sets 1.8fr .5fr, which forces two tall rows and
       pushes the third item out. Auto rows size to their content. */
    grid-template-rows: none;
    align-content: center;
    row-gap: 1.75rem;
  }

  .home__social {
    flex-direction: row;
    column-gap: 1rem;
  }

  .home__info {
    position: static;
    /* Capped rather than full width. It stretched to the whole container -
       over 1000px at 1100px wide - and only looked right once the browser was
       squeezed down to its narrowest. 435px is the width it settles at there,
       so it now starts at that size and shrinks below it on narrower screens
       instead of starting huge and catching up. */
    width: 100%;
    max-width: 435px;
    justify-content: space-between;
  }
}

/* Above 721px tall the site zeroes body's top margin (see "For tall screens"),
   so the hero has the whole viewport to fill rather than the viewport minus a
   header. Without this the stacked hero was 56px short and all of that showed
   as dead banner beneath the Rules card.
   The banner image is stretched to match, otherwise it stops at its own fixed
   height and leaves a hard edge partway down. */
@media screen and (max-width: 1100px) and (min-height: 721px) {
  .home__container {
    min-height: 100vh;
  }

  .home__img {
    height: 100%;
    min-height: 100vh;
  }
}