/* Shared site navigation. The homepage header is the visual reference for every page. */
:root { --site-header-height: 70px; }

up-to21-header { display: contents; }
body.has-site-header { padding-top: var(--site-header-height) !important; }
body.auth-page.has-site-header { grid-template-rows: minmax(0, 1fr); }

body.has-site-header .site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  color: #f5f7ff;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: rgba(5, 7, 18, .66);
  border-bottom: 1px solid rgba(195, 205, 255, .11);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  transition: background .25s ease, box-shadow .25s ease;
}

body.has-site-header .site-header.is-compact {
  background: rgba(5, 7, 18, .88);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header a { color: inherit; text-decoration: none; }

.site-header__container {
  display: flex;
  width: min(1240px, calc(100% - clamp(2rem, 6vw, 6rem)));
  min-height: 70px;
  margin: 0 auto;
  padding: .65rem 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-brand {
  flex: 0 0 auto;
  color: #e9e3ff;
  font: 700 clamp(.94rem, 1.3vw, 1.08rem)/1 "Orbitron", "Space Grotesk", sans-serif;
  letter-spacing: .16em;
  text-shadow: 0 0 18px rgba(139, 103, 255, .24);
  white-space: nowrap;
  transition: color .2s ease, text-shadow .2s ease;
}

.home-brand:hover, .home-brand:focus-visible {
  color: #fff;
  text-shadow: 0 0 22px rgba(113, 217, 255, .35);
  outline: none;
}

.home-nav-cta {
  margin-left: auto;
  padding: .68rem 1.05rem;
  border: 1px solid rgba(156, 126, 255, .34);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(111, 78, 218, .22), rgba(60, 127, 193, .17));
  color: #f5f2ff;
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.home-nav-cta:hover, .home-nav-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(113, 217, 255, .6);
  background: linear-gradient(120deg, rgba(111, 78, 218, .35), rgba(60, 127, 193, .25));
  outline: none;
}

.nav-utility { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.lang-switch { display: inline-flex; overflow: hidden; border: 1px solid rgba(159, 170, 217, .22); border-radius: 12px; background: rgba(12, 16, 32, .65); box-shadow: inset 0 0 10px rgba(120, 180, 255, .08); }
.lang-switch__btn { appearance: none; padding: 10px 12px; border: 0; background: transparent; color: #f5f7ff; font-family: inherit; font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, filter .2s ease; }
.lang-switch__btn:hover, .lang-switch__btn:focus-visible { background: rgba(68, 217, 218, .12); outline: none; }
.lang-switch__btn.is-active { color: rgba(12, 16, 32, .95); background: linear-gradient(135deg, rgba(125, 90, 240, .95), rgba(90, 180, 255, .9)); }

.nav-toggle { display: flex; width: 48px; height: 48px; padding: 0; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(159, 170, 217, .22); border-radius: 12px; background: rgba(12, 16, 32, .65); cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: rgba(113, 217, 255, .6); outline: none; }
.nav-toggle__line { width: 22px; height: 2px; border-radius: 999px; background: #f5f7ff; transition: transform .3s ease, opacity .3s ease; }
body.nav-open .nav-toggle__line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle__line:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-drawer { position: absolute; top: calc(100% + .25rem); right: max(1.3rem, calc((100vw - 1120px) / 2)); display: flex; width: max-content; max-width: calc(100vw - 2.6rem); max-height: calc(100dvh - 6rem); padding: .55rem; overflow-y: auto; flex-direction: column; align-items: stretch; gap: .25rem; border: 1px solid rgba(159, 170, 217, .22); border-radius: 14px; background: linear-gradient(160deg, rgba(5, 7, 15, .98), rgba(18, 26, 54, .96)); box-shadow: 0 24px 50px rgba(5, 7, 15, .6); opacity: 0; visibility: hidden; transform: translateY(-6px) scaleY(.94); transform-origin: top right; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
body.nav-open .nav-drawer { opacity: 1; visibility: visible; transform: translateY(0) scaleY(1); pointer-events: auto; transition-delay: 0s; }
.nav-drawer .nav-link { width: auto; padding: .55rem .75rem; border: 1px solid transparent; border-radius: 12px; background: rgba(12, 18, 36, .65); color: #f5f7ff; font-size: .78rem; font-weight: 640; line-height: 1.6; letter-spacing: .14em; text-align: center; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.nav-drawer .nav-link--button { font-family: inherit; cursor: pointer; }
.nav-drawer .nav-link:hover, .nav-drawer .nav-link:focus-visible { border-color: rgba(125, 90, 240, .35); background: rgba(68, 217, 218, .15); box-shadow: 0 10px 20px rgba(68, 217, 218, .2); outline: none; }
.nav-drawer .nav-link--app { margin-top: .5rem; border-color: rgba(125, 90, 240, .35); }
.site-header__visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.footer-link--button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* One shared footer for content, account and game pages. */
.site-footer--global {
  box-sizing: border-box;
  width: 100%;
  margin-top: auto;
  padding: .85rem clamp(1rem, 4vw, 3rem);
  color: #e4e9f4;
  background: #0b141d;
  border: 0;
  border-top: 1px solid rgba(188, 200, 225, .12);
  box-shadow: none;
  font: 400 .9rem/1.5 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.site-footer--global *, .site-footer--global *::before, .site-footer--global *::after { box-sizing: border-box; }
.site-footer__inner { display: flex; width: min(1440px, 100%); margin: 0 auto; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.5rem); }
.site-footer__identity { flex: 0 0 auto; white-space: nowrap; color: #f0f3f9; }
.site-footer__identity span { margin-inline: .4rem; color: #9ca8bc; }
.site-footer__legal { display: flex; min-width: 0; padding-left: clamp(1.2rem, 2.2vw, 2.5rem); align-items: center; flex-wrap: wrap; column-gap: clamp(1.2rem, 2vw, 2.25rem); border-left: 1px solid rgba(224, 232, 246, .5); }
.site-footer__legal .footer-link { display: inline-flex; min-height: 2.4rem; padding: .3rem 0; align-items: center; color: #e4e9f4; background: transparent; border: 0; font: inherit; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: color .18s ease; }
.site-footer__legal .footer-link:hover, .site-footer__legal .footer-link:focus-visible { color: #b9a8ff; outline-offset: 3px; }
.site-footer__legal .footer-link[aria-current="page"] { color: #c9bcff; }
.site-footer__legal .footer-link--button { cursor: pointer; }
body.privacy-page .site-footer--global { border-top-color: rgba(188, 200, 225, .16); }
body.has-global-footer:not(.dashboard):not(.auth-page):not(.has-setup-footer) { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
body.has-global-footer:not(.dashboard):not(.auth-page):not(.has-setup-footer) main { flex: 1 0 auto; }

body.dashboard.has-global-footer { grid-template-rows: auto auto minmax(0, 1fr) auto; }
body.dashboard.has-global-footer .site-footer--global { position: relative; z-index: 2; }
body.has-setup-footer { flex-direction: column; padding-bottom: 0; }
body.has-setup-footer .setup-shell { margin-block: auto; }
body.has-setup-footer .site-footer--global { width: 100vw; max-width: 100vw; align-self: center; }
body.auth-page.has-global-footer { grid-template-rows: minmax(0, 1fr) auto; }

@media (max-width: 900px) {
  .site-footer--global { padding-block: .8rem; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .site-footer__legal { width: 100%; padding-left: 0; border-left: 0; column-gap: clamp(.8rem, 3vw, 1.5rem); }
}

@media (max-width: 600px) {
  .site-footer--global { padding-inline: 1rem; font-size: .82rem; }
  .site-footer__legal { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); column-gap: 1rem; row-gap: 0; }
  .site-footer__legal .footer-link { min-width: 0; min-height: 2.75rem; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .site-footer__legal [data-legal-link] { grid-column: 2; grid-row: 2; }
  .site-footer__legal [data-cookie-settings] { grid-column: 1; grid-row: 2; }
}

@media (max-width: 960px) {
  .site-header__container .home-nav-cta { display: none; }
  .site-header__container .nav-utility { align-self: center; }
}

.privacy-consent[hidden] { display: none; }
.privacy-consent {
  position: fixed;
  z-index: 2200;
  right: clamp(.75rem, 2.5vw, 1.5rem);
  bottom: clamp(.75rem, 2.5vw, 1.5rem);
  left: clamp(.75rem, 2.5vw, 1.5rem);
  display: flex;
  width: min(760px, calc(100% - 1.5rem));
  margin-left: auto;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border: 1px solid rgba(194, 174, 105, .32);
  border-radius: 14px;
  color: #eef1ff;
  background: rgba(7, 10, 21, .97);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .42);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.privacy-consent__copy { max-width: 470px; }
.privacy-consent h2 { margin: 0 0 .35rem; color: #e6cf78; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.privacy-consent p { margin: 0; color: #c1c7db; font-size: .85rem; line-height: 1.55; }
.privacy-consent a { color: #f1dd91; text-underline-offset: .18em; }
.privacy-consent__actions { display: flex; flex: 0 0 auto; gap: .6rem; }
.privacy-consent button {
  min-height: 42px;
  padding: .65rem .9rem;
  border: 1px solid rgba(193, 203, 235, .25);
  border-radius: 9px;
  color: #eef1ff;
  background: rgba(25, 30, 48, .9);
  font: 700 .76rem/1.2 inherit;
  cursor: pointer;
}
.privacy-consent button:hover, .privacy-consent button:focus-visible { border-color: #e6cf78; outline: none; }
.privacy-consent .privacy-consent__accept { border-color: rgba(230, 207, 120, .55); color: #14100a; background: #e6cf78; }

@media (max-width: 960px) {
  .home-nav-cta { display: none; }
}

@media (max-width: 720px) {
  .site-header__container { width: min(100% - 2rem, 1240px); }
}

@media (max-width: 640px) {
  .site-header__container { gap: 3px; }
  .nav-utility { margin-left: auto; gap: 3px; }
  .lang-switch { border-radius: 9px; }
  .lang-switch__btn { padding: 7px 4px; font-size: .56rem; letter-spacing: .04em; }
  .nav-toggle { width: 34px; height: 34px; border-radius: 9px; gap: 4px; }
  .nav-toggle__line { width: 18px; }
  body.nav-open .nav-toggle__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-drawer { right: .75rem; max-width: calc(100vw - 1.5rem); max-height: calc(100dvh - 5rem); }
  .nav-drawer .nav-link { width: 100%; padding: .95rem 1rem; border-radius: 18px; }
  .privacy-consent { align-items: stretch; flex-direction: column; }
  .privacy-consent__actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-header *::before, .site-header *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}