:root {
  --red-950: #3b0010;
  --forest-950: #142006;
  --forest-900: #2C3712;
  --hero-night: #020F12;
  --brand-green: #478022;
  --grass-green: #92A625;
  --gold-100: #fff4ba;
  --gold-300: #ffd86a;
  --gold-500: #f0a91f;
  --gold-700: #a8630e;
  --cream: #fff3d1;
  --white: #fffdf8;
  --ink: #24000a;
  --muted: #fff4c7;
  --header-h: 50px;
  --page-max: 1140px;
  --page-gutter: clamp(12px, 1.5vw, 28px);
  --gold-border: 1px solid rgba(255, 216, 106, .78);
  --panel-shadow: 0 18px 42px rgba(10, 25, 8, .38);
}

html {
  background: var(--hero-night);
  font-size: 17px;
}

body {
  min-height: 100vh;
  color: var(--cream);
  background:
    linear-gradient(180deg, var(--hero-night) 0, #061b1a 26%, #183817 58%, #315b17 100%);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Verdana, sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.topbar {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px var(--page-gutter);
  background:
    linear-gradient(180deg, rgba(2, 15, 18, .97), rgba(3, 23, 20, .96)),
    var(--hero-night);
  border-bottom: 1px solid rgba(255, 216, 106, .58);
  box-shadow: 0 10px 26px rgba(10, 25, 8, .46);
  backdrop-filter: blur(10px);
}

.topbar__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px;
  text-decoration: none;
}

.brand__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: 0 2px 0 rgba(255, 219, 83, .55), 0 6px 14px rgba(0, 0, 0, .42);
  flex: 0 0 auto;
}

.brand__logo {
  width: 104px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55));
}

.nav {
  display: none;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  color: #ffe8a2;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nav a {
  text-decoration: none;
  opacity: .92;
}

.nav a:hover {
  color: var(--white);
}

.image-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 178px;
  max-width: 100%;
  min-width: 0;
  line-height: 0;
  text-decoration: none;
  filter: drop-shadow(0 7px 0 rgba(20, 32, 6, .72)) drop-shadow(0 12px 18px rgba(0, 0, 0, .32));
  transition: transform .18s ease, filter .18s ease;
}

.image-cta img {
  width: 100%;
  height: auto;
}

.image-cta:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 9px 0 rgba(20, 32, 6, .7)) drop-shadow(0 16px 22px rgba(0, 0, 0, .36)) saturate(1.08);
}

.image-cta:active {
  transform: translateY(2px);
  filter: drop-shadow(0 4px 0 rgba(20, 32, 6, .75)) drop-shadow(0 8px 16px rgba(0, 0, 0, .28));
}

.topbar .image-cta {
  flex: 0 0 94px;
  width: 94px;
  min-width: 94px;
  max-width: 94px;
  filter: drop-shadow(0 4px 0 rgba(34, 0, 9, .75)) drop-shadow(0 6px 10px rgba(0, 0, 0, .24));
}

.topbar .image-cta img {
  width: 94px;
  max-width: none;
}

.page {
  width: 100%;
  margin: 0;
  padding: calc(var(--header-h) + 22px) 16px 44px;
  background:
    linear-gradient(180deg, var(--hero-night) 0, #061b1a 16%, #173817 42%, #1d3d0d 72%, #112008 100%);
  overflow: hidden;
}

.site-header {
  width: min(var(--page-max), 100%);
  margin: 0 auto 18px;
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 18px 14px;
  border: var(--gold-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(71, 128, 34, .92), rgba(44, 55, 18, .95)),
    var(--forest-900);
  box-shadow: var(--panel-shadow);
}

.logo-link,
.home-link {
  display: none;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0;
}

.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 216, 106, .58);
  border-radius: 999px;
  color: #fff2bf;
  background: rgba(20, 32, 6, .62);
  font-size: .74rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.legal-nav a:hover {
  color: var(--white);
  border-color: var(--gold-300);
}

.legal-nav a[aria-current="page"] {
  color: #2b1800;
  background: var(--gold-300);
  border-color: rgba(255, 244, 186, .9);
  box-shadow: 0 4px 0 rgba(91, 38, 8, .65);
}

.legal-document {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px);
  border: var(--gold-border);
  border-radius: 8px;
  color: #f6ffd9;
  background:
    linear-gradient(180deg, rgba(44, 55, 18, .92), rgba(20, 32, 6, .97));
  box-shadow: inset 0 0 0 1px rgba(255, 235, 140, .12), var(--panel-shadow);
}

.legal-document a {
  color: var(--gold-300);
  font-weight: 1000;
}

h1,
h2,
h3,
h4 {
  color: var(--gold-100);
  letter-spacing: 0;
}

h1 {
  margin: 0 0 12px;
  font-family: Impact, "Arial Black", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(2.25rem, 7vw, 4.75rem);
  line-height: .96;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 var(--forest-950),
    0 4px 0 var(--gold-700),
    0 8px 18px rgba(0, 0, 0, .34);
}

h2 {
  margin: 38px 0 13px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 216, 106, .34);
  color: var(--white);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.08;
}

h3 {
  margin: 28px 0 10px;
  color: var(--gold-300);
  font-size: 1.1rem;
}

h4 {
  margin: 22px 0 8px;
  color: #d8ffd0;
  font-size: 1rem;
}

p,
li {
  color: #f6ffd9;
  font-size: .96rem;
  font-weight: 750;
  line-height: 1.68;
}

p {
  margin: 0 0 16px;
}

ul {
  margin: 0 0 18px;
  padding-left: 1.25rem;
}

li + li {
  margin-top: 8px;
}

.legal-meta {
  display: inline-flex;
  margin: 0 10px 18px 0;
  padding: 6px 10px;
  border: 1px solid rgba(255, 216, 106, .54);
  border-radius: 999px;
  color: #fff2bf;
  background: rgba(20, 32, 6, .7);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.notice {
  padding: 14px 16px;
  border: 1px solid rgba(255, 216, 106, .6);
  border-left: 5px solid var(--gold-300);
  border-radius: 8px;
  color: #fff8d7;
  background:
    linear-gradient(180deg, rgba(133, 0, 31, .78), rgba(59, 0, 16, .82));
  font-weight: 900;
}

.legal-footer {
  width: min(980px, 100%);
  margin: 18px auto 0;
  padding: 18px 14px;
  border: var(--gold-border);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(71, 128, 34, .86), rgba(44, 55, 18, .94));
  box-shadow: var(--panel-shadow);
}

.legal-footer > a:not(.cta) {
  color: #fff2bf;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.legal-footer .cta {
  width: 178px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.legal-footer .cta::before {
  content: "";
  display: block;
  width: 178px;
  aspect-ratio: 1376 / 481;
  background: url("Buttons/play-now-button.png") center / contain no-repeat;
  filter: drop-shadow(0 7px 0 rgba(20, 32, 6, .72)) drop-shadow(0 12px 18px rgba(0, 0, 0, .32));
}

.disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  color: #fff0c6;
  background: #112008;
  border-top: 1px solid rgba(255, 216, 106, .45);
  font-size: .74rem;
  font-weight: 800;
  text-align: center;
}

.disclaimer__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .34));
}

.footer {
  color: #dce9ff;
  background:
    linear-gradient(180deg, #112008 0, #06120f 100%);
  padding: 26px 16px 34px;
}

.footer__inner {
  width: min(var(--page-max), 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2px;
  text-decoration: none;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .36));
}

.footer-brand .brand__icon {
  width: 42px;
  height: 42px;
}

.footer-brand .brand__logo {
  width: 152px;
  height: 64px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  color: #fff2bf;
  font-size: .74rem;
  font-weight: 900;
}

.footer-links a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-link-group {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.footer-link-label {
  margin: 0;
  color: #c9dac8;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.footer-legal {
  max-width: 980px;
  margin: 0;
  color: #c9dac8;
  font-size: .66rem;
  line-height: 1.45;
  text-align: center;
  justify-self: center;
}

@media (min-width: 560px) {
  :root {
    --header-h: 58px;
  }

  .brand__icon {
    width: 38px;
    height: 38px;
  }

  .brand__logo {
    width: 146px;
    height: 44px;
  }

  .topbar .image-cta {
    flex-basis: 136px;
    width: 136px;
    min-width: 136px;
    max-width: 136px;
  }

  .topbar .image-cta img {
    width: 136px;
  }
}

@media (min-width: 820px) {
  .nav {
    display: flex;
  }

  .topbar {
    padding-inline: var(--page-gutter);
  }

  .footer__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: stretch;
    text-align: left;
  }

  .footer-links {
    justify-content: flex-end;
  }

  .footer-link-group {
    grid-column: 2;
    justify-items: end;
  }

  .footer-legal {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .page {
    padding-inline: 12px;
  }

  .site-header {
    padding: 14px 10px;
  }

  .legal-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-300) rgba(20, 32, 6, .6);
  }

  .legal-nav a {
    flex: 0 0 auto;
  }

  .legal-document {
    padding: 22px 18px;
  }

  p,
  li {
    font-size: .92rem;
  }
}

@media (max-width: 559px) {
  .topbar__inner {
    position: relative;
  }

  .brand {
    padding-right: 104px;
  }

  .topbar .image-cta {
    position: fixed;
    z-index: 110;
    top: 8px;
    right: 10px;
    display: inline-flex;
    width: 104px;
    min-width: 104px;
    max-width: 104px;
    height: auto;
    transform: none;
  }

  .topbar .image-cta img {
    display: block;
    width: 104px;
    max-width: none;
    height: auto;
  }
}

@media (max-width: 360px) {
  .brand__logo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}