:root {
  --ink: #070605;
  --ink-2: #0d0a08;
  --panel: #12100d;
  --panel-raised: #19140f;
  --cream: #eee3ce;
  --muted: #aa9d89;
  --gold: #b98443;
  --gold-2: #efca83;
  --teal: #b98443;
  --teal-dark: #5d3a20;
  --bronze: #68401f;
  --ember: #c64b32;
  --blood: #681d18;
  --line: rgba(197, 146, 76, .28);
  --line-bright: rgba(237, 195, 123, .58);
  --display: Constantia, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --serif: var(--display);
  --sans: "Segoe UI", Arial, sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 88px;
  --content: 1220px;
  --cut: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

* { box-sizing: border-box; }
html { background: var(--ink); scrollbar-color: #76502c #090706; }
body {
  overflow-x: clip;
  background: var(--ink) !important;
  color: var(--cream) !important;
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
}
body::selection { background: var(--blood); color: #fff5df; }
a { text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--gold-2) !important; outline-offset: 4px !important; }
h1, h2, h3, .section-title { font-family: var(--display); text-wrap: balance; }
h1, h2, .section-title { color: var(--gold-2) !important; }
p { text-wrap: pretty; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 999;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  border: 1px solid var(--gold-2);
  background: #0b0806;
  color: #fff0cc;
  font: 800 12px/1 var(--sans);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Shared navigation */
.topbar {
  z-index: 50;
  border-block: 1px solid #574027 !important;
  background:
    linear-gradient(90deg, rgba(184,132,69,.055), transparent 16% 84%, rgba(184,132,69,.055)),
    #100c09 !important;
  box-shadow: inset 0 2px #050403, inset 0 -2px #050403, 0 10px 30px rgba(0,0,0,.65) !important;
  backdrop-filter: blur(12px) saturate(.8);
}
.topbar::before { display: none !important; content: none !important; }
.topbar::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #76522e 9%, #b88749 50%, #76522e 91%, transparent);
  content: "";
  opacity: .8;
}
.brand img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px #000) saturate(.88) contrast(1.08);
}
.nav a, .topnav a, .back-link {
  position: relative;
  color: #d9cdb7 !important;
  font-family: var(--sans);
  font-weight: 700;
  text-decoration: none;
  transition: color .16s ease;
}
.nav a::after, .topnav a::after, .back-link::after {
  position: absolute;
  right: 50%;
  bottom: 13px;
  left: 50%;
  height: 1px;
  background: var(--gold);
  content: "";
  transition: right .16s ease, left .16s ease;
}
.nav a:hover, .topnav a:hover, .back-link:hover { color: var(--gold-2) !important; }
.nav a:hover::after, .topnav a:hover::after, .back-link:hover::after { right: 0; left: 0; }
.page-language select, .language-switcher select, .language-control select {
  min-height: 44px;
  width: 100%;
  padding: 0 38px 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  appearance: none;
  background: url("assets/generated/button-secondary-normal-v4.png") center/100% 100% no-repeat !important;
  color: #ead9b7 !important;
  box-shadow: none !important;
  font: 700 11px/1 var(--sans);
  letter-spacing: .055em;
  cursor: pointer;
}
.page-language, .language-switcher, .language-control {
  position: relative;
  display: inline-flex;
  width: 156px;
}
.page-language::after, .language-switcher::after, .language-control::after {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #c8954f;
  border-bottom: 2px solid #c8954f;
  content: "";
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}
.page-language select option, .language-switcher select option, .language-control select option {
  background: #120e0a;
  color: #ead9b7;
}
.language-enhanced::after { display: none !important; }
.language-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.language-trigger {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) 10px;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 0;
  background: none;
  color: #ead9b7;
  font: 700 11px/1 var(--sans);
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
}
.language-trigger-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.5));
  pointer-events: none;
}
.language-flag, .language-option img {
  display: block;
  width: 24px;
  height: 18px;
  border: 1px solid rgba(221,184,107,.28);
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
}
.language-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-chevron {
  width: 7px;
  height: 7px;
  justify-self: end;
  border-right: 2px solid #c8954f;
  border-bottom: 2px solid #c8954f;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}
.language-enhanced.is-open .language-chevron { transform: translateY(2px) rotate(225deg); }
.language-menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 8px);
  right: 0;
  width: 218px;
  max-height: min(420px, calc(100vh - 92px));
  display: grid;
  gap: 4px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid #6c4d2d;
  background: rgba(10,8,6,.985);
  box-shadow: 0 20px 45px rgba(0,0,0,.7);
}
.language-menu[hidden] { display: none !important; }
.language-option {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 11px;
  padding: 7px 13px;
  border: 0;
  background: url("assets/generated/button-secondary-normal-v4.png") center/100% 100% no-repeat;
  color: #d8c9af;
  font: 700 11px/1 var(--sans);
  letter-spacing: .035em;
  text-align: left;
  cursor: pointer;
}
.language-option:hover, .language-option:focus-visible {
  color: #f2ddb4;
  filter: brightness(1.12);
}
.language-option[aria-selected="true"] {
  background-image: url("assets/generated/button-primary-normal-v4.png");
  color: #f4dfb8;
}

/* One physical ImageGen button system */
.button, .link-button, .menu-button, .hub-more, .hub-actions > a {
  position: relative !important;
  isolation: isolate;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  padding: 10px 28px;
  border: 0 !important;
  clip-path: none !important;
  background: none !important;
  box-shadow: none !important;
  color: #f4dfb5 !important;
  font: 700 12px/1 var(--sans);
  letter-spacing: .055em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
}
.button-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 7px 8px rgba(0,0,0,.55));
  pointer-events: none;
  user-select: none;
  transition: filter .16s ease, transform .16s ease;
}
.button-label, .hub-actions > a > span { position: relative; z-index: 1; }
.button:hover .button-art, .link-button:hover .button-art, .menu-button:hover .button-art,
.hub-more:hover .button-art, .hub-actions > a:hover .button-art {
  filter: brightness(1.13) contrast(1.04) drop-shadow(0 9px 10px rgba(0,0,0,.65));
  transform: translateY(-1px);
}
.button:focus-visible, .link-button:focus-visible, .menu-button:focus-visible,
.hub-more:focus-visible, .hub-actions > a:focus-visible {
  outline: 2px solid var(--gold-2) !important;
  outline-offset: 3px !important;
}
.button { min-width: 210px; }
.link-button { min-height: 44px; padding-inline: 19px; font-size: 10px; }
.menu-button { display: none; min-width: 88px; min-height: 44px; padding-inline: 16px; }

/* Home: a cinematic landing page with one restrained portal module */
body:not([data-page]) {
  border-inline: 1px solid #38291b;
  background: #080605 !important;
}
body:not([data-page]) .topbar {
  position: fixed;
  min-height: 72px;
  height: 72px;
  grid-template-columns: 164px minmax(0, 1fr) auto;
  gap: 24px;
  padding-inline: max(20px, calc((100vw - 1440px) / 2));
}
body:not([data-page]) .brand { width: 154px; height: 66px; }
body:not([data-page]) .brand img { width: 148px; height: 62px; }
body:not([data-page]) .nav {
  width: 100%;
  max-width: 720px;
  justify-content: center;
  gap: clamp(20px, 1.8vw, 31px);
}
body:not([data-page]) .nav a {
  padding-block: 28px 26px;
  color: #ded2bd !important;
  font-size: 11px;
  letter-spacing: .065em;
  white-space: nowrap;
}
/* Ranking and Partners remain available inside the page and mobile menu. */
body:not([data-page]) .nav:not(.open) a:nth-child(4),
body:not([data-page]) .nav:not(.open) a:nth-child(6) { display: none; }
body:not([data-page]) .nav-cta { gap: 9px; }
body:not([data-page]) .language-control { width: 156px; }
body:not([data-page]) .nav-cta .link-button:not(.gold) { display: none; }
body:not([data-page]) .nav-cta .link-button.gold { min-width: 154px; }

body:not([data-page]) .hero {
  min-height: 900px;
  height: 900px;
  padding-top: 92px;
  border-bottom: 1px solid #3d2d1d;
  background-color: #090706 !important;
}
body:not([data-page]) .hero::before {
  animation: none !important;
  transform: none !important;
  background-image:
    linear-gradient(90deg, rgba(5,4,3,.2), rgba(5,4,3,.02) 55%, rgba(5,4,3,.08)),
    linear-gradient(180deg, rgba(5,4,3,.03) 62%, #080605 100%) !important;
  background-position: center !important;
  background-size: cover !important;
}
body:not([data-page]) .hero::after {
  background: linear-gradient(180deg, transparent 55%, #080605 100%) !important;
}
body:not([data-page]) .hero-grain { opacity: .05 !important; }
body:not([data-page]) .hero-content {
  width: min(1136px, calc(100% - 48px));
  align-self: center;
  margin: 4px auto 0;
  padding-right: min(51vw, 610px);
  text-align: left;
}
body:not([data-page]) .hero-logo {
  width: min(390px, 38vw) !important;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  margin: 0 0 2px !important;
  filter: drop-shadow(0 18px 30px #000) saturate(.9) contrast(1.08) !important;
}
body:not([data-page]) .season-kicker {
  width: fit-content;
  margin-top: 2px;
  padding: 9px 18px;
  border: 1px solid rgba(202,147,71,.52);
  border-radius: 999px;
  background: rgba(14,9,6,.64);
  color: var(--ember) !important;
  font-size: 12px;
  letter-spacing: .18em;
}
body:not([data-page]) .hero h1 {
  max-width: 650px;
  margin: 22px 0 0;
  color: #f3dda9 !important;
  font: 700 clamp(46px, 4.25vw, 66px)/.98 var(--display);
  letter-spacing: -.025em;
  text-shadow: 0 3px 20px #000;
}
body:not([data-page]) .countdown { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }
.hero-lede {
  max-width: 590px;
  margin: 22px 0 0;
  color: #d2c4ae;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  text-shadow: 0 2px 7px #000;
}
body:not([data-page]) .hero-date {
  margin-top: 16px;
  color: #ead6ad;
  font: 400 20px/1.2 var(--display);
  letter-spacing: .045em;
}
body:not([data-page]) .hero-actions {
  width: min(468px, 100%);
  justify-content: flex-start;
  gap: 10px;
  margin: 24px 0 0;
}
body:not([data-page]) .hero-actions .button { width: 224px; min-height: 58px; font-size: 13px; }
body:not([data-page]) .hero-actions .button:nth-child(3),
body:not([data-page]) .hero-server-seal,
body:not([data-page]) .scroll-note { display: none; }

/* Player center */
.realm-hub {
  position: relative;
  z-index: 5;
  width: min(1136px, calc(100% - 48px));
  margin: 0 auto;
  padding: 76px 0 34px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}
.realm-hub::before, .realm-hub::after, .hub-crown { display: none; content: none; }
.hub-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.hub-panel { min-width: 0; overflow: hidden; border: 1px solid #4b3723; border-radius: 14px; background: linear-gradient(160deg, rgba(26,18,13,.96), rgba(10,8,6,.98)); box-shadow: 0 22px 60px rgba(0,0,0,.34); }
.hub-news { grid-column: span 7; border-right: 1px solid #4b3723; }
.hub-calendar { grid-column: span 5; }
.hub-panel-title {
  position: relative;
  isolation: isolate;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 14px 24px;
  border-bottom: 1px solid #493621;
  color: #e6c98f;
  font: 600 17px/1 var(--display);
  letter-spacing: .075em;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000;
}
.hub-news .panel-title-art, .hub-calendar .panel-title-art { display: none; }
.panel-title-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.5));
  pointer-events: none;
}
.hub-story, .hub-event {
  display: grid;
  margin-inline: 14px;
  border-bottom: 1px solid #33271a;
  color: inherit;
  text-decoration: none;
  transition: background .16s ease;
}
.hub-story:hover, .hub-event:hover { background: #181109; }
.hub-story { grid-template-columns: 136px 1fr; min-height: 100px; }
.hub-story img { width: 120px; height: 76px; margin: 12px 0; border: 1px solid #62492d; object-fit: cover; }
.hub-story-copy { position: relative; min-width: 0; padding: 16px 12px 20px 0; }
.hub-story-copy b, .hub-event b { display: block; color: #efd7a8; font: 600 18px/1.2 var(--display); }
.hub-story-copy small { display: block; margin-top: 6px; color: #bdb09c; font-size: 12px; line-height: 1.4; }
.hub-story-copy time { position: absolute; right: 8px; bottom: 8px; color: #766b59; font-size: 10px; }
.hub-event { grid-template-columns: 94px 1fr 52px; min-height: 88px; align-items: center; }
.hub-event img { width: 80px; height: 54px; border: 1px solid #5e472d; object-fit: cover; }
.hub-event span { min-width: 0; }
.hub-event b { font-size: 16px; }
.hub-event small { display: block; margin-top: 5px; color: #c48061; font-size: 12px; font-weight: 700; }
.hub-event time { color: #e1bd7c; font: 600 18px/1 var(--display); text-align: right; }
.hub-more { min-height: 50px; margin: 12px 14px 14px; padding-inline: 24px; font-size: 11px; }

.hub-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: 12px;
  padding: 20px 18px 16px;
  border-top: 1px solid #4b3723;
  background: linear-gradient(180deg, rgba(18,14,10,.94), rgba(9,7,5,.98));
}
.hub-actions .panel-title-art { display: none; }
.hub-actions .hub-panel-title {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 0 2px 14px;
  border: 0;
  border-bottom: 1px solid rgba(185,132,67,.26);
  color: #d4aa69;
  font: 700 13px/1 var(--sans);
  letter-spacing: .18em;
}
.hub-actions > a {
  width: 100%;
  min-height: 76px;
  padding: 12px 20px;
}
.hub-actions > a > span { display: grid; gap: 6px; justify-items: center; }
.hub-actions b { color: #ead6ae; font: 700 15px/1.05 var(--sans); letter-spacing: .055em; text-transform: uppercase; }
.hub-actions small { color: #aaa08f; font-size: 10px; line-height: 1.2; letter-spacing: .035em; }
.hub-server {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid rgba(185,132,67,.24);
  border-bottom: 0;
  background: transparent;
}
.hub-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #c99a3d; box-shadow: 0 0 8px rgba(201,154,61,.55); }
.hub-server > span:last-child { display: flex; align-items: baseline; gap: 10px; }
.hub-server small { color: #8f8372; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hub-server b { color: #d5b271; font: 600 13px/1.2 var(--display); }
.hub-media { display: none; }

/* Shared section rhythm */
body:not([data-page]) .world-strip {
  width: min(1136px, calc(100% - 48px));
  margin: 0 auto;
  border: 1px solid #493621 !important;
  background: #0d0a08 !important;
}
body:not([data-page]) .world-strip-inner { width: 100%; }
body:not([data-page]) .world-stat { border-color: #392a1b !important; background: #0e0b08 !important; box-shadow: none !important; }
body:not([data-page]) .world-stat small {
  color: #c99147 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.72);
}
body:not([data-page]) .world-stat strong { color: #f0dfc1; }
body:not([data-page]) .world-stat + .world-stat::before { background: rgba(185,132,67,.24) !important; }
body:not([data-page]) .portal-links { display: none; }
body:not([data-page]) section.content, body:not([data-page]) .partners-section,
body:not([data-page]) .schedule { padding-block: 76px; }
body:not([data-page]) .section-label {
  color: var(--ember) !important;
  font-size: 12px;
  letter-spacing: .16em;
}
body:not([data-page]) .section-label::before { background: #a66b37 !important; }
body:not([data-page]) .section-title { font-size: clamp(44px, 5vw, 68px); line-height: .95; }
body:not([data-page]) .section-copy { color: #d0c3af; font-size: 17px; line-height: 1.75; }

.mobile-section {
  background:
    radial-gradient(circle at 78% 42%, rgba(132,49,29,.19), transparent 40%),
    #0b0806 !important;
}
.device-item { border-color: #3e2e1e !important; }
.device-item .index { color: var(--ember) !important; }
.video-stage {
  aspect-ratio: 1920 / 887;
  border: 1px solid #6b4d2d !important;
  background: #080605 !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.52) !important;
}
.video-stage > img,
.video-stage > video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.video-stage > video { background: #050403; accent-color: #b16d38; }

/* Partner logos are preserved; only their presentation is normalized. */
.partners-section {
  background: linear-gradient(rgba(10,8,6,.9), rgba(8,6,5,.94)) !important;
}
.partner-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; }
.partner-card {
  min-height: 198px;
  display: grid !important;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  padding: 22px 12px 14px;
  border: 1px solid #3f3020 !important;
  clip-path: none !important;
  background: linear-gradient(180deg, #18130f, #0d0a08) !important;
  transition: border-color .18s ease, transform .18s ease;
}
.partner-card::before { display: none !important; content: none !important; }
.partner-card::after { position: absolute; inset: 7px; border: 1px solid rgba(213,165,94,.08); content: ""; pointer-events: none; }
.partner-card:hover { z-index: 2; border-color: #8b663c !important; transform: translateY(-3px); }
.partner-card img {
  position: relative;
  z-index: 1;
  width: 124px !important;
  height: 124px !important;
  max-width: 80%;
  padding: 7px;
  border: 1px solid #4d3924;
  border-radius: 0 !important;
  background: #090706;
  object-fit: contain !important;
  filter: saturate(.72) contrast(1.06) !important;
  transition: filter .18s ease;
}
.partner-card:hover img { filter: saturate(.9) contrast(1.08) !important; transform: none !important; }
.partner-card span {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 12px 6px 2px !important;
  color: #d5c4a5;
  font: 600 13px/1.2 var(--sans);
  letter-spacing: .035em;
  text-align: center;
}

/* Events use a single color grade and calmer information rows. */
.schedule {
  background-image: none !important;
  background-position: center !important;
}
.schedule::before {
  background:
    linear-gradient(90deg, rgba(8,6,4,.97), rgba(8,6,4,.84) 56%, rgba(8,6,4,.48)),
    linear-gradient(180deg, transparent, #070605) !important;
}
.schedule-grid { grid-template-columns: minmax(300px, .72fr) minmax(650px, 1.48fr); gap: 72px; }
.event-list { width: 100%; padding: 8px 32px; border: 1px solid #5a4228 !important; background: rgba(12,9,6,.88) !important; }
.event-row { min-height: 114px; border-color: #43311f !important; transition: background .16s ease; }
.event-row:hover { background: rgba(100,37,23,.12); }
.event-art { width: 126px; height: 80px; overflow: hidden; border: 1px solid #684b2d; background: #090706; }
.event-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) contrast(1.12) brightness(.86) sepia(.08); }
img[src*="nebula-metin"] { filter: saturate(.72) contrast(1.08) brightness(.86) !important; }
img[src*="bellandir-metin"] { filter: saturate(.76) contrast(1.08) brightness(.88) !important; }
img[src*="empire-war-metin"] { filter: saturate(.82) contrast(1.08) brightness(.9) !important; }
.event-row time { color: var(--gold-2) !important; }
.event-row time { font-size: 23px; }
.event-row strong { color: #efdab2; font-size: 22px; }
.event-row span { font-size: 13px; }
.event-row .event-reward { font-size: 12px; }
.event-row em { border-color: #7a3e2b !important; background: rgba(91,28,20,.14); color: #dc775d !important; }
.schedule-timezone { color: #958977 !important; }

.reward-section {
  min-height: 640px !important;
  padding-block: 78px !important;
  background-image: none !important;
  background-position: center !important;
}
.reward-section::before {
  background:
    linear-gradient(90deg, rgba(8,6,4,.97), rgba(8,6,4,.84) 50%, rgba(8,6,4,.38)),
    linear-gradient(180deg, transparent, #070605) !important;
}
.rewards { width: min(850px, 74%); margin-top: 44px; gap: 18px; }
.reward {
  min-height: 254px;
  padding: 36px 22px;
  border: 1px solid #493622 !important;
  clip-path: none !important;
  background: rgba(13,10,7,.88) !important;
  box-shadow: none !important;
}
.reward.first { min-height: 304px; border-color: #9a7342 !important; background: rgba(29,19,11,.94) !important; }
.reward .place { font-size: 60px; }
.reward .amount { font-size: 42px; }
.reward p { color: #b0a38f; font-size: 13px; }
.reward .amount { color: var(--gold-2) !important; }
.final-cta { min-height: 420px; background-image: none !important; }
.final-cta::before { background: linear-gradient(90deg, rgba(6,5,4,.96), rgba(50,18,12,.68), rgba(6,5,4,.96)) !important; }
.final-cta h2 { font-size: clamp(52px, 6vw, 76px); }
.final-cta p { color: #d8cbb7; font-size: 15px; }
.final-cta .button { min-width: 224px; min-height: 58px; font-size: 13px; }
body:not([data-page]) footer { border-top-color: #3f2f20 !important; background: #080605 !important; }
body:not([data-page]) footer { padding-block: 30px; font-size: 12px; }
body:not([data-page]) footer, body:not([data-page]) footer a { color: #baad9a !important; }

/* Secondary campaign and archive pages share the same material language. */
body[data-page] {
  background:
    radial-gradient(circle at 50% -10%, rgba(120,43,28,.14), transparent 36%),
    #080605 !important;
}
body[data-page]:not([data-page="marketing"]) .topbar { position: relative; z-index: 5; }
body[data-page] .topbar { border-color: #4d3924 !important; }
body[data-page] .brand img { width: 122px; height: 58px; }
body[data-page] .topnav { gap: 18px; }
body[data-page] .topnav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 11px; }
body[data-page] .button { min-width: 210px; }
body[data-page] .eyebrow, body[data-page] .label, body[data-page] .feature-number,
body[data-page] .step-number { color: var(--ember) !important; }
body[data-page] .lede { color: #d0c3af !important; }
body[data-page] .updated { color: #958775 !important; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

body[data-page="marketing"] .hero {
  background-image: linear-gradient(90deg, rgba(7,5,4,.97), rgba(7,5,4,.62) 56%, rgba(7,5,4,.22)) !important;
  background-position: center !important;
  background-size: cover !important;
}
body[data-page="marketing"] .feature,
body[data-page="support"] .card,
body[data-page="testflight"] .step,
body[data-page] .notice, body[data-page] .toc, body[data-page] .callout {
  border: 1px solid #493622 !important;
  clip-path: none !important;
  background: rgba(17,13,10,.94) !important;
  box-shadow: none !important;
}
body[data-page="marketing"] .feature { min-height: 240px; border-top-color: #754028 !important; }
body[data-page="marketing"] .media { border: 1px solid #62472a !important; background: #080605 !important; box-shadow: 0 24px 70px rgba(0,0,0,.5) !important; }
body[data-page="marketing"] .cta { background: linear-gradient(135deg, #160e0a, #0a0806) !important; }
body[data-page="support"], body[data-page="testflight"], body[data-page="privacy"],
body[data-page="terms"], body[data-page="account"], body[data-page="not-found"] {
  background-image: linear-gradient(rgba(7,5,4,.94), rgba(7,5,4,.98)) !important;
  background-position: center top !important;
  background-size: cover !important;
}
body[data-page="support"] main::before, body[data-page="testflight"] main::before { display: none; }
body[data-page="privacy"] main, body[data-page="terms"] main, body[data-page="account"] main { position: relative; }
body[data-page="privacy"] main section, body[data-page="terms"] main section,
body[data-page="account"] main section { border-top-color: rgba(195,144,74,.18) !important; }
.toc { border-left: 2px solid #803429 !important; }
.callout { border-left: 2px solid #93402f !important; }

@media (max-width: 1180px) {
  body:not([data-page]) .topbar { grid-template-columns: 150px 1fr auto; }
  body:not([data-page]) .nav { display: none; }
  body:not([data-page]) .nav.open {
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 10px 18px 18px;
    border-bottom: 1px solid #5c4329;
    background: rgba(12,9,7,.99) !important;
    box-shadow: 0 22px 46px rgba(0,0,0,.55);
  }
  body:not([data-page]) .nav.open a { display: block; padding: 14px 12px; border-bottom: 1px solid #2f2419; }
  body:not([data-page]) .menu-button { display: inline-flex; }
  body:not([data-page]) .nav-cta .link-button:not(.gold) { display: none; }
  .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 980px) {
  body:not([data-page]) .hero-content { padding-right: 40vw; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-news, .hub-calendar, .hub-actions { grid-column: 1; }
  .hub-news { border-right: 0; border-bottom: 1px solid #493621; }
  .hub-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .schedule-grid { grid-template-columns: 1fr; gap: 48px; }
  .rewards { width: min(760px, 100%); }
}

@media (max-width: 820px) {
  body[data-page="marketing"] .nav { display: none; }
  body[data-page="marketing"] .topbar { padding-inline: 16px; }
  body[data-page] .topnav { gap: 10px; }
  body[data-page] .topnav a { padding-inline: 8px; }
  body:not([data-page]) section.content, body:not([data-page]) .partners-section,
  body:not([data-page]) .schedule { padding-block: var(--space-5); }
  .reward-section { min-height: 0 !important; padding-block: var(--space-5) !important; }
  .event-row { min-height: 98px; }
  .event-art { width: 96px; height: 66px; }
}

@media (max-width: 680px) {
  body:not([data-page]) .topbar {
    min-height: 62px;
    height: 62px;
    grid-template-columns: 96px 1fr auto;
    gap: 6px;
    padding-inline: 9px;
  }
  body:not([data-page]) .brand { width: 94px; height: 58px; }
  body:not([data-page]) .brand img { width: 92px !important; height: 54px !important; }
  body:not([data-page]) .nav.open { top: 62px; grid-template-columns: 1fr; }
  body:not([data-page]) .language-control { width: 126px; }
  body:not([data-page]) .language-control select { padding-inline: 14px 34px !important; font-size: 10px; }
  body:not([data-page]) .language-control::after { right: 16px; }
  body:not([data-page]) .nav-cta .link-button.gold { display: none; }
  body:not([data-page]) .menu-button { min-width: 80px; }

  body:not([data-page]) .hero { min-height: 700px; height: 700px; padding-top: 76px; }
  body:not([data-page]) .hero::before {
    background-image: linear-gradient(180deg, rgba(5,4,3,.02) 34%, rgba(5,4,3,.88) 72%, #080605 100%) !important;
    background-position: 68% center !important;
  }
  body:not([data-page]) .hero-content {
    width: calc(100% - 28px);
    align-self: end;
    margin-bottom: 42px;
    padding-right: 0;
  }
  body:not([data-page]) .hero-logo { width: 300px !important; max-width: 90%; }
  body:not([data-page]) .hero h1 { margin-top: 16px; font-size: clamp(34px, 10vw, 46px); }
  .hero-lede { margin-top: 14px; font-size: 15px; line-height: 1.5; }
  body:not([data-page]) .hero-date { font-size: 16px; }
  body:not([data-page]) .hero-actions { display: grid; grid-template-columns: 1fr; width: min(330px, 100%); }
  body:not([data-page]) .hero-actions .button { width: 100%; }

  .realm-hub { width: calc(100% - 22px); margin-top: -28px; }
  .hub-story { grid-template-columns: 106px 1fr; }
  .hub-story img { width: 94px; height: 66px; }
  .hub-event { grid-template-columns: 82px 1fr 44px; margin-inline: 9px; }
  .hub-event img { width: 70px; height: 48px; }
  .hub-actions { grid-template-columns: 1fr; gap: 10px; padding: 14px 10px 16px; }
  .hub-actions .hub-panel-title { width: 100%; }
  .hub-actions > a { min-height: 82px; }
  .hub-server > span:last-child { display: grid; gap: 3px; }

  body:not([data-page]) .world-strip { width: calc(100% - 22px); }
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .partner-card { min-height: 165px; padding-inline: 8px; }
  .partner-card img { width: 96px !important; height: 96px !important; }
  .event-art { width: 82px; height: 58px; }
  .event-row time { font-size: 19px; }
  .event-row strong { font-size: 18px; }
  .rewards { width: 100%; }
  .reward, .reward.first { min-height: 0; }

  body[data-page] .topnav a, body[data-page] .topbar > a:not(.brand),
  [data-language], [data-page-language], body[data-page] .language-switcher select { min-height: 44px !important; }
  body[data-page="not-found"] .topbar {
    min-height: 76px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding-block: 8px;
  }
  body[data-page="not-found"] .topnav { justify-content: flex-end; }
  body[data-page] .brand img { width: 94px !important; height: 54px !important; }
  body[data-page] .button { min-width: 0; width: 100%; }
}

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

/* 2026 visual refinement: real gameplay, quieter surfaces, clearer hierarchy. */
:root {
  --site-shell: 1136px;
  --utility-shell: 920px;
  --legal-copy: 780px;
  --surface-0: #080605;
  --surface-1: #0e0a07;
  --surface-2: #15100b;
  --line-soft: #3f3020;
  --line-strong: #6b4d2d;
  --text-main: #f0e4cf;
  --text-muted: #b9ad9b;
}

html { scroll-padding-top: 78px; }
body { text-rendering: optimizeLegibility; }
h1, h2, h3, p, a, span, small { overflow-wrap: anywhere; }

/* State artwork is kept in the DOM so every control preloads its complete set. */
.button-art { display: block !important; }
.button, .link-button, .menu-button, .hub-more, .hub-actions > a {
  min-height: 48px;
  overflow: hidden !important;
  padding: 11px 22px;
  border: 1px solid var(--line-strong) !important;
  border-radius: 3px;
  background: linear-gradient(180deg, #21170f, #120d09) !important;
  box-shadow: none !important;
  color: #ead8b8 !important;
  font-size: 12px;
  letter-spacing: .06em;
  text-shadow: none;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.button:hover, .link-button:hover, .hub-more:hover {
  border-color: #a77a43 !important;
  color: #fff1d5 !important;
  transform: none !important;
}
.menu-button:hover, .hub-actions > a:hover {
  border-color: #a77a43 !important;
  background: #261a10 !important;
  color: #fff1d5 !important;
  transform: none !important;
}
.button.gold, .button.primary, .link-button.gold {
  border-color: #b68b4d !important;
  background: linear-gradient(180deg, #8d602e, #573719) !important;
  color: #fff3da !important;
}
.language-option[aria-selected="true"] {
  background: #2b1b10 !important;
  color: #f4dfb8;
}
.language-option { min-height: 44px; }

/* Home header */
body:not([data-page]) .topbar {
  min-height: 68px;
  height: 68px;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 18px;
  background: rgba(8, 6, 5, .96) !important;
  backdrop-filter: blur(14px);
}
body:not([data-page]) .brand { width: 136px; height: 60px; }
body:not([data-page]) .brand img { width: 132px; height: 58px; }
body:not([data-page]) .nav { max-width: 680px; }
body:not([data-page]) .nav a { min-height: 44px; padding-block: 20px; }
body:not([data-page]) .language-control { width: 142px; }
body:not([data-page]) .nav-cta .link-button.gold { min-width: 142px; }

/* Home hero: copy plus one bounded, authentic gameplay frame. */
body:not([data-page]) .hero {
  min-height: 720px;
  height: auto;
  display: grid;
  align-items: center;
  padding: 108px 0 72px;
  background: var(--surface-0) !important;
}
body:not([data-page]) .hero::before {
  background:
    radial-gradient(circle at 76% 48%, rgba(121, 47, 29, .22), transparent 34%),
    radial-gradient(circle at 18% 15%, rgba(189, 126, 54, .08), transparent 28%),
    linear-gradient(135deg, #0f0b08, #070504 68%) !important;
}
body:not([data-page]) .hero::after {
  background: linear-gradient(180deg, transparent 68%, var(--surface-0) 100%) !important;
}
body:not([data-page]) .hero-grain { opacity: .025 !important; }
body:not([data-page]) .hero-content {
  width: min(var(--site-shell), calc(100% - 48px));
  margin: 0 auto;
  padding-inline-end: min(51vw, 590px);
  text-align: start;
}
body:not([data-page]) .hero-logo {
  width: min(310px, 30vw) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 0 8px !important;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.48)) !important;
}
body:not([data-page]) .season-kicker {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: .13em;
}
body:not([data-page]) .hero h1 {
  max-width: 560px;
  margin-top: 18px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: .98;
}
.hero-lede { margin-top: 18px; color: var(--text-muted); font-size: 16px; line-height: 1.62; }
body:not([data-page]) .hero-date { margin-top: 14px; font-size: 18px; }
body:not([data-page]) .hero-actions { width: min(468px, 100%); margin-top: 20px; }
body:not([data-page]) .hero-actions .button { width: 218px; min-height: 52px; }
.hero-gameplay-card {
  position: absolute;
  top: 50%;
  inset-inline-end: max(24px, calc((100vw - var(--site-shell)) / 2));
  width: min(48vw, 548px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #050403;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .38);
  transform: translateY(-50%);
}
.hero-gameplay-card img { display: block; width: 100%; height: auto; }
.hero-gameplay-card figcaption,
.marketing-hero-gameplay figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 11px 14px;
  border-top: 1px solid #352719;
  color: #dbc7a4;
  font: 600 14px/1.3 var(--sans);
}
.hero-gameplay-card figcaption span { color: #a89882; font-size: 12px; letter-spacing: .06em; }

/* The summary strip now follows the hero. */
body:not([data-page]) .world-strip {
  width: 100%;
  margin: 0;
  border-width: 1px 0 !important;
  border-radius: 0;
}
body:not([data-page]) .world-strip-inner { width: min(var(--site-shell), calc(100% - 48px)); }
body:not([data-page]) .world-stat { min-height: 92px; }
body:not([data-page]) .world-stat small { font-size: 11px; letter-spacing: .12em; }

/* Mobile feature proof: one orderly column and one real gameplay view. */
body:not([data-page]) section.content,
body:not([data-page]) .partners-section,
body:not([data-page]) .schedule { padding-block: 86px; }
body:not([data-page]) .section-title { font-size: clamp(40px, 4.7vw, 62px); }
body:not([data-page]) .section-copy { font-size: 16px; line-height: 1.7; }
.mobile-section { background: radial-gradient(circle at 80% 30%, rgba(117, 43, 27, .12), transparent 32%), #0b0806 !important; }
.mobile-section::before { font-size: clamp(64px, 8vw, 112px) !important; opacity: .5; }
.mobile-grid {
  width: min(920px, calc(100% - 48px));
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start;
  gap: 44px !important;
}
.device-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.device-item { min-width: 0; padding-top: 14px; border-top: 1px solid #34271b; }
.device-item strong { margin-bottom: 7px; font-size: 19px; }
.device-item span { color: var(--text-muted); font-size: 14px; line-height: 1.58; }
.background-hunt-item { grid-column: 1 / -1; }
.background-hunt-panel {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  max-width: 820px;
  margin-top: 16px;
  border-color: #5a4128;
  border-radius: 4px;
  box-shadow: none;
}
.background-hunt-panel img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; }
.background-hunt-panel-copy { display: grid; align-content: center; padding: 20px 22px; }
.background-hunt-panel p { color: #c3b7a5; font-size: 14px; line-height: 1.62; }
.video-stage {
  width: min(760px, 100%);
  justify-self: center;
  padding: 8px;
  border-radius: 5px;
  box-shadow: 0 20px 46px rgba(0,0,0,.32) !important;
}
.video-stage::before { display: none; }
.video-caption { display: none; }

/* Player center: no duplicate event gallery and no decorative image buttons. */
.realm-hub { padding: 72px 0 28px; }
.hub-grid { grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); gap: 18px; }
.hub-news { grid-column: auto; }
.hub-actions {
  grid-column: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  padding: 18px;
  border: 1px solid #4b3723;
  background: linear-gradient(160deg, rgba(26,18,13,.96), rgba(10,8,6,.98)) !important;
}
.hub-panel { border-radius: 6px; box-shadow: 0 14px 36px rgba(0,0,0,.24); }
.hub-story { grid-template-columns: 120px minmax(0, 1fr); min-height: 94px; }
.hub-story img, .hub-story-marker {
  width: 104px;
  height: 66px;
  margin: 13px 0;
  border: 1px solid #5d4329;
  background: #120d09;
}
.hub-story-marker {
  display: grid;
  place-items: center;
  color: #d5b271;
  font: 700 18px/1 var(--display);
}
.hub-story-copy { padding-inline-end: 8px; }
.hub-story-copy time { inset-inline-end: 8px; color: #9f927e; font-size: 12px; }
.hub-actions > a { min-height: 70px; padding: 12px; }
.hub-actions small { font-size: 11px; line-height: 1.35; }
.hub-server { margin-top: 2px; }
.hub-countdown {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hub-countdown-title {
  flex: 0 0 78px;
  color: #9f927e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: start;
  text-transform: uppercase;
}
.hub-countdown-units { display: flex; align-items: center; gap: 6px; }
.hub-countdown-unit {
  min-width: 54px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 5px;
  border: 1px solid #493621;
  border-radius: 3px;
  background: #0d0906;
  text-align: center;
}
.hub-countdown-unit b { color: #e3bf7d; font: 700 17px/1 var(--display); }
.hub-countdown-unit small {
  margin: 0;
  color: #9f927e;
  font: 700 9px/1 var(--sans);
  letter-spacing: .04em;
  white-space: nowrap;
  text-transform: uppercase;
}
.hub-countdown-live { display: none; color: #82c99a; font: 600 14px/1.2 var(--display); }
.hub-countdown.is-live .hub-countdown-units { display: none; }
.hub-countdown.is-live .hub-countdown-live { display: block; }
.hub-server:has(.hub-countdown.is-live) .hub-status-dot {
  background: #67c18c;
  box-shadow: 0 0 8px rgba(103,193,140,.55);
}

/* Partner portraits are compact and the final row stays centered. */
.partners-section { background: linear-gradient(180deg, #0d0a07, #080605) !important; }
.partner-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px !important;
}
.partner-card {
  flex: 0 1 172px;
  width: 172px;
  min-height: 172px;
  aspect-ratio: auto !important;
  padding: 18px 10px 12px;
  border-radius: 4px;
}
.partner-card:hover { transform: none; }
.partner-card img { width: 104px !important; height: 104px !important; max-width: none; padding: 5px; }
.partner-card span { padding-top: 10px !important; font-size: 13px; }

/* Events and rewards use typography, not extra hero-scale images. */
.schedule {
  min-height: 0;
  background: radial-gradient(circle at 12% 28%, rgba(120, 44, 27, .14), transparent 32%), #090705 !important;
}
.schedule::before { background: linear-gradient(180deg, rgba(255,255,255,.01), transparent) !important; }
.schedule-grid { grid-template-columns: minmax(270px, .62fr) minmax(0, 1.38fr); gap: 56px; }
.event-list { padding: 6px 24px; background: #0e0a07 !important; box-shadow: none; backdrop-filter: none; }
.event-row {
  min-height: 94px;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 13px 0;
}
.event-row time { font-size: 20px; }
.event-row strong { font-size: 19px; }
.event-row span { color: #b3a794; font-size: 13px; line-height: 1.45; }
.event-row .event-reward { margin-top: 4px; font-size: 12px; }
.event-row em { min-width: 76px; text-align: center; font-size: 10px; }
.reward-section {
  min-height: 0 !important;
  padding-block: 86px !important;
  background: radial-gradient(circle at 78% 40%, rgba(153, 92, 37, .1), transparent 32%), #0c0906 !important;
}
.reward-section::before { display: none; }
.rewards { width: min(820px, 100%); margin-top: 36px; gap: 14px; }
.reward, .reward.first {
  min-height: 220px;
  padding: 28px 20px;
  background: #120d09 !important;
}
.reward.first { min-height: 246px; background: #1a120b !important; }
.reward small { color: #b9ad9b; font-size: 11px; }
.reward .place { margin: 18px 0 12px; font-size: 48px; }
.reward .amount { font-size: 36px; }
.final-cta {
  min-height: 330px;
  padding: 68px 20px;
  background: radial-gradient(circle at 50% 0, rgba(135, 56, 32, .2), transparent 42%), #090604 !important;
}
.final-cta::before { display: none; }
.final-cta h2 { font-size: clamp(42px, 5vw, 60px); }

/* Marketing: authentic gameplay is framed, never used as a giant backdrop. */
body[data-page="marketing"] .hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 54px;
  padding: 116px max(24px, calc((100vw - 1180px) / 2)) 74px;
  background: radial-gradient(circle at 76% 42%, rgba(126, 48, 29, .18), transparent 34%), #090604 !important;
}
body[data-page="marketing"] .hero-copy { max-width: 560px; }
body[data-page="marketing"] .hero h1 { font-size: clamp(48px, 6.5vw, 82px); line-height: .94; }
body[data-page="marketing"] .lead { margin: 22px 0 28px; font-size: 18px; }
.marketing-hero-gameplay {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #050403;
  box-shadow: 0 22px 50px rgba(0,0,0,.32);
}
.marketing-hero-gameplay img { display: block; width: 100%; height: auto; }
.marketing-hero-gameplay figcaption { justify-content: flex-start; }
body[data-page="marketing"] .section { padding-block: 76px; }
body[data-page="marketing"] .section-heading { margin-bottom: 34px; }
body[data-page="marketing"] .feature { min-height: 0; padding: 24px; }
body[data-page="marketing"] .feature h3 { margin: 22px 0 10px; font-size: 25px; }
body[data-page="marketing"] .crossplay { gap: 48px; }
body[data-page="marketing"] .media {
  min-height: 0;
  aspect-ratio: 1920 / 887;
  border-radius: 5px;
  box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}
body[data-page="marketing"] .media img { object-fit: contain; }
body[data-page="marketing"] .media::after { display: none; }
body[data-page="marketing"] .gameplay-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body[data-page="marketing"] .gameplay-shot:first-child { grid-column: auto; }
body[data-page="marketing"] .gameplay-shot { border-radius: 4px; box-shadow: none; }
body[data-page="marketing"] .gameplay-shot figcaption { min-height: 54px; padding: 12px 14px; font-size: 16px; }
body[data-page="marketing"] .gameplay-shot:focus-within { border-color: #c99a59; box-shadow: inset 0 0 0 1px #c99a59; }
body[data-page="marketing"] .gameplay-shot a:focus-visible { outline: none; }
body[data-page="marketing"] .cta {
  margin-bottom: 72px;
  padding: 44px;
  background: #100b08 !important;
}

/* Utility and legal pages share a compact, readable shell. */
body[data-page]:not([data-page="marketing"])::before,
body[data-page]:not([data-page="marketing"])::after { display: none !important; content: none !important; }
body[data-page="support"], body[data-page="testflight"], body[data-page="privacy"],
body[data-page="terms"], body[data-page="account"], body[data-page="not-found"] {
  background: radial-gradient(circle at 50% 0, rgba(124, 47, 29, .09), transparent 30%), var(--surface-0) !important;
}
body[data-page]:not([data-page="marketing"]) .topbar { min-height: 68px; padding-block: 6px; background: #0a0705 !important; }
body[data-page]:not([data-page="marketing"]) h1 { font-size: clamp(38px, 5vw, 64px) !important; line-height: 1.02; }
body[data-page="privacy"] main, body[data-page="terms"] main, body[data-page="account"] main {
  width: min(var(--legal-copy), calc(100% - 34px));
  padding-top: 58px;
}
body[data-page="support"] .card, body[data-page="testflight"] .step { min-height: 0; padding: 24px; }
body[data-page] footer { border-top-color: #3f2f20 !important; background: #080605 !important; color: #aa9d89; }
body[data-page="not-found"] { min-height: 100svh; display: flex; flex-direction: column; }
body[data-page="not-found"] main { flex: 1; display: grid; align-content: center; padding-block: 48px; }

/* RTL-safe positioning for the elements with directional meaning. */
.hub-story-copy { padding-inline: 0 12px; }
.hub-story-copy time { right: auto; inset-inline-end: 8px; }
.scroll-note { left: auto; inset-inline-start: 32px; }
.language-menu { right: auto; inset-inline-end: 0; }

@media (max-width: 1180px) {
  body:not([data-page]) .topbar { grid-template-columns: 132px minmax(0, 1fr) auto; }
  .schedule-grid { grid-template-columns: 1fr; gap: 38px; }
  .schedule-grid > div:first-child { max-width: 680px; }
  body[data-page="marketing"] .gameplay-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  body:not([data-page]) .hero-content { padding-inline-end: 44vw; }
  .hero-gameplay-card { width: 41vw; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-news, .hub-actions { grid-column: 1; }
  .hub-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body[data-page="marketing"] .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 104px 20px 64px;
  }
  body[data-page="marketing"] .hero-copy { max-width: 680px; }
  .marketing-hero-gameplay { width: min(680px, 100%); }
  body[data-page="marketing"] .gameplay-gallery { grid-template-columns: 1fr; }
  body[data-page="marketing"] .section { padding-block: 62px; }
}

@media (max-width: 880px) {
  body:not([data-page]) .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 98px 20px 52px;
  }
  body:not([data-page]) .hero-content {
    width: min(680px, 100%);
    margin: 0 auto;
    padding-inline-end: 0;
  }
  body:not([data-page]) .hero-logo { width: min(270px, 72vw) !important; }
  .hero-gameplay-card {
    position: relative;
    top: auto;
    inset-inline-end: auto;
    width: min(680px, 100%);
    margin: 30px auto 0;
    transform: none;
  }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 64px; }
  body:not([data-page]) .topbar {
    min-height: 62px;
    height: 62px;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    gap: 6px;
    padding-inline: 9px;
  }
  body:not([data-page]) .brand { width: 86px; height: 54px; }
  body:not([data-page]) .brand img { width: 84px !important; height: 52px !important; }
  body:not([data-page]) .language-control { width: 116px; }
  body:not([data-page]) .language-control select { padding-inline: 9px 28px !important; }
  body:not([data-page]) .language-control::after { inset-inline-end: 10px; right: auto; }
  body:not([data-page]) .menu-button { min-width: 62px; padding-inline: 9px; }
  body:not([data-page]) .nav.open { top: 62px; }

  body:not([data-page]) .hero { padding: 88px 14px 44px; }
  body:not([data-page]) .hero-logo { width: min(230px, 70vw) !important; }
  body:not([data-page]) .season-kicker { font-size: 10px; }
  body:not([data-page]) .hero h1 { margin-top: 16px; font-size: clamp(34px, 10vw, 43px); }
  .hero-lede { font-size: 15px; }
  body:not([data-page]) .hero-date { font-size: 16px; }
  body:not([data-page]) .hero-actions { grid-template-columns: 1fr; width: 100%; }
  body:not([data-page]) .hero-actions .button { width: 100%; }
  .hero-gameplay-card { margin-top: 24px; }
  .hero-gameplay-card figcaption { min-height: 44px; padding: 9px 11px; }
  .hero-gameplay-card figcaption span { display: none; }

  body:not([data-page]) .world-strip-inner { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not([data-page]) .world-stat { min-height: 82px; padding-inline: 8px; }
  body:not([data-page]) section.content,
  body:not([data-page]) .partners-section,
  body:not([data-page]) .schedule { padding-block: 58px; }
  body:not([data-page]) .section-title { font-size: 42px; }
  .mobile-section::before { display: none; }
  .mobile-grid { width: min(100% - 28px, 920px); gap: 34px !important; }
  .device-list { grid-template-columns: 1fr; gap: 16px; }
  .background-hunt-item { grid-column: auto; }
  .background-hunt-panel { grid-template-columns: 1fr; }
  .background-hunt-panel img { min-height: 0; height: auto; }
  .background-hunt-panel-copy { padding: 16px; }
  .video-stage { margin-inline: 0; padding: 5px; }

  .realm-hub { width: calc(100% - 28px); margin-top: 0; padding: 52px 0 18px; }
  .hub-grid { gap: 14px; }
  .hub-story { grid-template-columns: 92px minmax(0, 1fr); margin-inline: 10px; }
  .hub-story img, .hub-story-marker { width: 80px; height: 54px; }
  .hub-story-copy b { font-size: 16px; }
  .hub-story-copy small { font-size: 12px; }
  .hub-actions { grid-template-columns: 1fr; padding: 14px 10px; }
  .hub-actions > a { min-height: 62px; }
  .hub-server { align-items: flex-start; padding-inline: 8px; }
  .hub-countdown { width: 100%; flex-direction: column; gap: 8px; }
  .hub-countdown-units { width: 100%; justify-content: center; gap: 4px; }
  .hub-countdown-unit { min-width: 0; flex: 1; padding-inline: 5px; }

  .partners-heading { align-items: start; flex-direction: column; gap: 20px; margin-bottom: 32px; }
  .partner-grid { gap: 10px !important; }
  .partner-card { flex-basis: calc(50% - 5px); width: calc(50% - 5px); min-height: 158px; }
  .partner-card img { width: 94px !important; height: 94px !important; }

  .schedule-grid { gap: 30px; }
  .event-list { padding-inline: 14px; }
  .event-row {
    min-height: 0;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 7px 12px;
    padding: 16px 0;
  }
  .event-row time { grid-column: 1 !important; grid-row: 1 / 3 !important; align-self: start; font-size: 18px; }
  .event-row > div { grid-column: 2 !important; grid-row: 1 !important; }
  .event-row em { grid-column: 2 !important; grid-row: 2 !important; justify-self: start; min-width: 0; }
  .event-row strong { font-size: 17px; }
  .event-row span { font-size: 12px; }
  .reward-section { padding-block: 58px !important; }
  .rewards { grid-template-columns: 1fr; }
  .reward, .reward.first { min-height: 0; padding: 24px; }
  .final-cta { min-height: 0; padding-block: 58px; }

  body[data-page="marketing"] .hero { padding-top: 92px; }
  body[data-page="marketing"] .hero h1 { font-size: clamp(42px, 12vw, 58px); }
  body[data-page="marketing"] .lead { font-size: 16px; }
  body[data-page="marketing"] .cta { padding: 34px 20px; }

  body:is([data-page="privacy"], [data-page="terms"], [data-page="account"]) .topbar {
    display: grid !important;
    grid-template-columns: auto auto;
    align-items: center !important;
    gap: 8px 12px;
    padding: 8px 14px !important;
  }
  body:is([data-page="privacy"], [data-page="terms"], [data-page="account"]) .topbar-tools { display: contents; }
  body:is([data-page="privacy"], [data-page="terms"], [data-page="account"]) .language-switcher {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  body:is([data-page="privacy"], [data-page="terms"], [data-page="account"]) .topnav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  body:is([data-page="privacy"], [data-page="terms"], [data-page="account"]) .topnav a {
    flex: 0 0 auto;
    min-height: 40px !important;
    padding-inline: 8px;
  }
  body:is([data-page="support"], [data-page="testflight"]) .topbar > div {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body:is([data-page="support"], [data-page="testflight"]) .back-link { display: none; }
  body:is([data-page="support"], [data-page="testflight"]) .page-language { width: 140px; }
}

@media (max-width: 360px) {
  body:not([data-page]) .topbar { grid-template-columns: 82px minmax(0, 1fr) auto; }
  body:not([data-page]) .language-control { width: 104px; }
  body:not([data-page]) .menu-button { min-width: 58px; font-size: 10px; }
  .partner-card { min-height: 150px; padding-inline: 6px; }
}

@media (forced-colors: active) {
  .button, .link-button, .menu-button, .hub-more, .hub-actions > a,
  .language-trigger, .language-option { border: 1px solid ButtonText !important; }
}

/* MMORPG portal pass: forged surfaces, leather controls and real gameplay. */
body:not([data-page]) {
  background:
    linear-gradient(rgba(7, 4, 3, .86), rgba(7, 4, 3, .94)),
    url("assets/generated/surface-forged.webp") center top / 1024px auto fixed !important;
}

body:not([data-page]) .topbar {
  min-height: 74px;
  height: 74px;
  border-bottom: 1px solid #8b6438 !important;
  background:
    linear-gradient(180deg, rgba(17, 12, 9, .9), rgba(5, 4, 3, .98)),
    url("assets/generated/surface-forged.webp") center 38% / 760px auto !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.72), inset 0 -1px rgba(224,173,91,.18);
}
body:not([data-page]) .topbar::after {
  position: absolute;
  inset-inline: 0;
  bottom: -4px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #6f251d 20%, #b17a3f 50%, #6f251d 80%, transparent);
  box-shadow: 0 0 14px rgba(139,45,31,.55);
  content: "";
  pointer-events: none;
}
body:not([data-page]) .brand { width: 148px; height: 66px; }
body:not([data-page]) .brand img { width: 144px; height: 64px; filter: drop-shadow(0 5px 8px #000); }
body:not([data-page]) .nav a {
  color: #e8d7b8 !important;
  font-weight: 800;
  letter-spacing: .09em;
  text-shadow: 0 2px 3px #000;
}
body:not([data-page]) .nav a:hover { color: #ffd993 !important; }

.button, .link-button, .hub-more {
  --button-frame: url("assets/generated/button-secondary-normal-v4.png");
  min-height: 54px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--button-frame) center / 100% 100% no-repeat !important;
  color: #e9dcc4 !important;
  font-weight: 800;
  letter-spacing: .07em;
  text-shadow: 0 2px 3px #000;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.42));
  transition: transform .11s ease, filter .14s ease, color .14s ease;
}
.button.gold, .button.primary, .link-button.gold {
  --button-frame: url("assets/generated/button-primary-normal-v4.png");
  border: 0 !important;
  background: var(--button-frame) center / 100% 100% no-repeat !important;
  color: #fff1d1 !important;
}
.button::before, .link-button::before, .hub-more::before {
  position: absolute;
  z-index: 0;
  inset: 9px 13px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,196,105,.22), rgba(135,38,25,.3));
  box-shadow: inset 0 1px rgba(255,230,176,.2), 0 0 15px rgba(151,49,30,.22);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, background-color .11s ease;
}
.button:hover:not(:active), .link-button:hover:not(:active), .hub-more:hover:not(:active) {
  border: 0 !important;
  background-color: transparent !important;
  color: #fff4dc !important;
  filter: brightness(1.24) saturate(1.12) drop-shadow(0 12px 15px rgba(0,0,0,.56));
  transform: translateY(-3px) !important;
}
.button:hover:not(:active)::before,
.link-button:hover:not(:active)::before,
.hub-more:hover:not(:active)::before { opacity: 1; }
.button:active, .link-button:active, .hub-more:active {
  color: #d8c3a1 !important;
  filter: brightness(.78) saturate(.9) drop-shadow(0 2px 3px rgba(0,0,0,.48));
  transform: translateY(3px) scale(.985) !important;
  transition-duration: .035s;
}
.button:active::before, .link-button:active::before, .hub-more:active::before {
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 3px 9px rgba(0,0,0,.65);
  opacity: 1;
}
.button-label {
  transition: transform .11s ease, color .14s ease, text-shadow .14s ease;
}
.button:hover:not(:active) .button-label,
.link-button:hover:not(:active) .button-label,
.hub-more:hover:not(:active) .button-label { text-shadow: 0 0 8px rgba(255,205,121,.42), 0 2px 3px #000; }
.button:active .button-label,
.link-button:active .button-label,
.hub-more:active .button-label { transform: translateY(2px); }
.button-label, .hub-more .button-label {
  position: relative;
  z-index: 1;
}
.menu-button {
  border: 1px solid #76532f !important;
  border-radius: 2px;
  background: linear-gradient(180deg, #29221b, #0c0a08) !important;
  box-shadow: inset 0 0 0 2px #090705, inset 0 0 0 3px rgba(191,139,69,.24) !important;
}

body:not([data-page]) .hero {
  min-height: 780px;
  padding-block: 118px 82px;
  border-bottom: 1px solid #684a2c;
  background: #070403 !important;
}
body:not([data-page]) .hero::before {
  background:
    radial-gradient(circle at 77% 46%, rgba(158, 50, 30, .27), transparent 31%),
    radial-gradient(circle at 15% 18%, rgba(220, 154, 68, .13), transparent 27%),
    linear-gradient(90deg, rgba(5,3,2,.42), rgba(6,3,2,.7)),
    url("assets/generated/surface-forged.webp") center / 980px auto !important;
  filter: saturate(.88) contrast(1.08);
}
body:not([data-page]) .hero::after {
  background:
    linear-gradient(90deg, rgba(4,2,2,.46), transparent 38%, rgba(39,9,7,.18)),
    linear-gradient(180deg, rgba(0,0,0,.1), transparent 65%, #070403 100%) !important;
}
body:not([data-page]) .hero-content { padding-inline-end: min(53vw, 620px); }
body:not([data-page]) .hero-logo {
  width: min(350px, 32vw) !important;
  filter: drop-shadow(0 15px 22px #000) drop-shadow(0 0 12px rgba(176,106,44,.18)) !important;
}
body:not([data-page]) .season-kicker {
  border: 1px solid #8b5d31;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(94,22,18,.72), rgba(24,9,7,.9));
  box-shadow: inset 0 0 0 2px rgba(7,4,3,.75), 0 8px 24px rgba(0,0,0,.32);
  color: #efb45f !important;
}
body:not([data-page]) .hero h1 {
  max-width: 600px;
  color: #ffe1a3 !important;
  font-size: clamp(48px, 4.5vw, 68px);
  line-height: .94;
  letter-spacing: -.015em;
  text-shadow: 0 4px 0 #2b160b, 0 10px 30px #000;
}
.hero-lede { color: #d9cbb2; font-size: 17px; text-shadow: 0 2px 4px #000; }
body:not([data-page]) .hero-date { color: #f0c276; text-shadow: 0 2px 4px #000; }
body:not([data-page]) .hero-actions .button { min-height: 58px; }

.hero-gameplay-card,
.marketing-hero-gameplay {
  padding: 9px;
  overflow: visible;
  border: 1px solid #a27845;
  border-radius: 0;
  background:
    linear-gradient(rgba(9,6,4,.74), rgba(9,6,4,.9)),
    url("assets/generated/surface-forged.webp") center / cover;
  box-shadow:
    0 0 0 3px #0a0705,
    0 0 0 4px #4f3822,
    0 28px 68px rgba(0,0,0,.62),
    0 0 34px rgba(133,39,26,.16);
}
.hero-gameplay-card::before,
.marketing-hero-gameplay::before {
  position: absolute;
  z-index: 2;
  inset: 4px;
  border: 1px solid rgba(226,179,99,.22);
  box-shadow: inset 0 0 28px rgba(0,0,0,.48);
  content: "";
  pointer-events: none;
}
.hero-gameplay-card { width: min(50vw, 604px); }
.hero-gameplay-card img,
.marketing-hero-gameplay img { position: relative; z-index: 1; }
.hero-gameplay-card figcaption,
.marketing-hero-gameplay figcaption {
  position: relative;
  z-index: 3;
  min-height: 54px;
  margin-top: 8px;
  border: 1px solid #604325;
  background: linear-gradient(180deg, #21150d, #0c0805);
  color: #f0d29b;
  font-family: var(--display);
  font-size: 16px;
  text-shadow: 0 2px 3px #000;
}

body:not([data-page]) .world-strip {
  border-block: 1px solid #76532f !important;
  background:
    linear-gradient(rgba(13,8,5,.82), rgba(8,5,3,.92)),
    url("assets/generated/surface-forged.webp") center 55% / 900px auto !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.38), inset 0 1px rgba(235,185,94,.1);
}
body:not([data-page]) .world-stat {
  min-height: 104px;
  border-color: #4b3320 !important;
  background: linear-gradient(180deg, rgba(44,25,13,.28), rgba(8,5,3,.5)) !important;
}
body:not([data-page]) .world-stat small { color: #d3714d !important; }
body:not([data-page]) .world-stat strong { color: #ffe2aa; font-size: 20px; text-shadow: 0 2px 5px #000; }

body:not([data-page]) section.content,
body:not([data-page]) .partners-section,
body:not([data-page]) .schedule { padding-block: 98px; }
body:not([data-page]) .section-label { color: #d86f4e !important; font-weight: 900; }
body:not([data-page]) .section-title {
  color: #f6d28b;
  font-size: clamp(46px, 5.3vw, 70px);
  text-shadow: 0 4px 0 #241207, 0 13px 30px #000;
}

.mobile-section {
  border-bottom: 1px solid #4e351f;
  background:
    radial-gradient(circle at 80% 30%, rgba(144,38,25,.2), transparent 35%),
    linear-gradient(rgba(9,5,3,.8), rgba(9,5,3,.92)),
    url("assets/generated/surface-forged.webp") center / 1024px auto !important;
}
.mobile-section::before { color: rgba(225,165,83,.045) !important; opacity: 1; }
.device-item {
  padding: 18px 16px;
  border: 1px solid #49331f !important;
  background: linear-gradient(135deg, rgba(31,18,11,.72), rgba(10,7,5,.76));
  box-shadow: inset 0 0 0 2px rgba(5,3,2,.7), 0 12px 28px rgba(0,0,0,.2);
}
.device-item .index {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #8b5d31;
  border-radius: 50%;
  background: #190b08;
  color: #e98760 !important;
  font-size: 17px;
  box-shadow: inset 0 0 8px #000, 0 0 12px rgba(123,35,25,.28);
}
.device-item strong { color: #f1d4a1; font-size: 21px; text-shadow: 0 2px 3px #000; }
.background-hunt-item { padding: 20px; }
.background-hunt-panel {
  padding: 7px;
  border: 1px solid #9a6b38;
  border-radius: 0;
  background:
    linear-gradient(rgba(13,8,5,.62), rgba(13,8,5,.8)),
    url("assets/generated/surface-forged.webp") center / cover;
  box-shadow: 0 20px 48px rgba(0,0,0,.42), inset 0 0 0 3px #080503;
}
.background-hunt-panel-copy {
  border-inline-start: 1px solid #5d4025;
  background: linear-gradient(135deg, rgba(43,20,12,.46), rgba(6,5,4,.68));
}
.video-stage {
  padding: 10px;
  border: 1px solid #a27845 !important;
  border-radius: 0;
  background:
    linear-gradient(rgba(9,6,4,.72), rgba(9,6,4,.9)),
    url("assets/generated/surface-forged.webp") center / cover !important;
  box-shadow: 0 0 0 3px #090604, 0 0 0 4px #4d361f, 0 30px 72px rgba(0,0,0,.55) !important;
}

.realm-hub { padding-block: 84px 44px; }
.hub-panel {
  border: 1px solid #76512d;
  border-radius: 0;
  background:
    linear-gradient(rgba(15,10,7,.87), rgba(8,6,4,.95)),
    url("assets/generated/surface-forged.webp") center / 720px auto;
  box-shadow: 0 0 0 3px #070503, 0 22px 56px rgba(0,0,0,.46);
}
.hub-panel-title {
  min-height: 58px;
  padding-inline: 26px;
  border-bottom: 1px solid #9b6135;
  color: #ffdfa0;
  font-size: 18px;
  text-shadow: 0 2px 4px #000;
}
.hub-news .panel-title-art,
.hub-actions .panel-title-art { display: block !important; opacity: .86; }
.hub-story { margin-inline: 18px; border-bottom-color: #4a301d; }
.hub-story:hover { background: linear-gradient(90deg, rgba(93,25,18,.24), transparent); }
.hub-story img,
.hub-story-marker {
  border: 1px solid #8a6036;
  box-shadow: inset 0 0 0 2px #080503, 0 6px 16px rgba(0,0,0,.35);
}
.hub-story-marker { background: linear-gradient(180deg, #552018, #160b08); color: #f1c16f; }
.hub-actions {
  border: 1px solid #76512d;
  background:
    linear-gradient(rgba(15,10,7,.86), rgba(8,6,4,.95)),
    url("assets/generated/surface-forged.webp") center / 720px auto !important;
}
.hub-actions > a {
  border: 1px solid #71502f !important;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(50,32,20,.92), rgba(12,9,6,.96)) !important;
  box-shadow: inset 0 0 0 2px #080604, inset 0 0 0 3px rgba(184,130,63,.15) !important;
}
.hub-actions > a:hover { border-color: #b1783e !important; background: linear-gradient(180deg, rgba(84,37,25,.88), rgba(17,10,7,.96)) !important; }
.hub-server {
  min-height: 64px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #6f4b2a;
  background: linear-gradient(180deg, rgba(42,23,14,.8), rgba(8,6,4,.92));
  box-shadow: inset 0 0 0 2px #080503;
}
.hub-status-dot { background: #e05c3f; box-shadow: 0 0 12px rgba(224,92,63,.75); }
.hub-countdown-title { color: #dfb06a; }
.hub-countdown-unit {
  border-color: #7c4b2b;
  background: linear-gradient(180deg, #32150f, #0b0705);
  box-shadow: inset 0 0 0 2px #070403;
}
.hub-countdown-unit b { color: #ffd486; font-size: 19px; }
.hub-countdown-unit small { color: #c69765; }

.partners-section {
  border-block: 1px solid #5c4026;
  background:
    linear-gradient(rgba(11,7,5,.84), rgba(7,4,3,.94)),
    url("assets/generated/surface-forged.webp") center / 1024px auto !important;
}
.partners-section::before { color: rgba(218,154,76,.045) !important; }
.partner-card {
  flex-basis: 180px;
  width: 180px;
  min-height: 190px;
  padding-top: 22px;
  border: 1px solid #684929 !important;
  border-radius: 0;
  background: linear-gradient(180deg, #281b11, #0b0805) !important;
  box-shadow: inset 0 0 0 3px #080503, 0 15px 32px rgba(0,0,0,.32);
}
.partner-card::after { inset: 6px; border-color: rgba(226,170,86,.18); }
.partner-card:hover {
  border-color: #b68145 !important;
  box-shadow: inset 0 0 0 3px #080503, 0 18px 38px rgba(0,0,0,.42), 0 0 20px rgba(139,50,31,.18);
  transform: translateY(-4px);
}
.partner-card img {
  width: 116px !important;
  height: 116px !important;
  padding: 6px;
  border: 2px solid #8b6338;
  border-radius: 50% !important;
  background: #0a0705;
  box-shadow: 0 0 0 3px #1b1009, 0 10px 24px rgba(0,0,0,.45);
}
.partner-card span { color: #f0d4a2; font-family: var(--display); font-size: 16px; }

.schedule {
  border-block: 1px solid #6a4829;
  background:
    radial-gradient(circle at 13% 30%, rgba(139,35,25,.24), transparent 30%),
    linear-gradient(rgba(8,5,3,.82), rgba(7,4,3,.94)),
    url("assets/generated/surface-forged.webp") center / 1024px auto !important;
}
.event-list {
  padding: 10px 28px;
  border: 1px solid #8a6036 !important;
  background: linear-gradient(180deg, rgba(25,15,9,.94), rgba(7,5,3,.97)) !important;
  box-shadow: 0 0 0 3px #070403, 0 24px 58px rgba(0,0,0,.48);
}
.event-row { border-color: #52331e !important; }
.event-row:hover { background: linear-gradient(90deg, rgba(113,31,22,.24), transparent); }
.event-row time { color: #f1b75e !important; text-shadow: 0 2px 4px #000; }
.event-row strong { color: #f5d49a; }
.event-row .event-reward { color: #d59662; }
.event-row em { border-color: #99442e !important; background: #2b100c; color: #f08c67 !important; }

.reward-section {
  border-bottom: 1px solid #684526;
  background:
    radial-gradient(circle at 50% 0, rgba(151,50,28,.2), transparent 38%),
    linear-gradient(rgba(10,6,4,.84), rgba(7,4,3,.95)),
    url("assets/generated/surface-forged.webp") center / 1024px auto !important;
}
.reward {
  border: 1px solid #74502e !important;
  background: linear-gradient(180deg, #2a1c11, #0a0705) !important;
  box-shadow: inset 0 0 0 3px #070403, 0 18px 40px rgba(0,0,0,.38) !important;
}
.reward.first {
  border-color: #b17b3e !important;
  background: linear-gradient(180deg, #5a2418, #160b08 54%, #090604) !important;
  box-shadow: inset 0 0 0 3px #090503, 0 24px 55px rgba(0,0,0,.48), 0 0 24px rgba(136,41,27,.22) !important;
}
.reward .place { color: #e88a5e; text-shadow: 0 3px 5px #000; }
.reward.first .place,
.reward.first .amount { color: #ffd27f !important; }

.final-cta {
  min-height: 390px;
  border-block: 1px solid #815735;
  background:
    radial-gradient(circle at 50% 30%, rgba(143,35,25,.34), transparent 37%),
    linear-gradient(rgba(7,4,3,.75), rgba(5,3,2,.94)),
    url("assets/generated/surface-forged.webp") center 42% / 1024px auto !important;
  box-shadow: inset 0 24px 70px rgba(0,0,0,.4);
}
.final-cta::before {
  display: block;
  background: linear-gradient(90deg, rgba(0,0,0,.58), transparent 38%, transparent 62%, rgba(0,0,0,.58));
}
.final-cta h2 { color: #ffe0a0; text-shadow: 0 4px 0 #2b1308, 0 12px 28px #000; }

body[data-page] {
  background:
    linear-gradient(rgba(8,5,3,.9), rgba(7,4,3,.96)),
    url("assets/generated/surface-forged.webp") center top / 1024px auto fixed !important;
}
body[data-page] .topbar {
  border-bottom-color: #76522f !important;
  background: linear-gradient(180deg, rgba(18,12,8,.95), rgba(6,4,3,.98)) !important;
  box-shadow: 0 9px 28px rgba(0,0,0,.55);
}
body[data-page="marketing"] .hero {
  min-height: 740px;
  background:
    radial-gradient(circle at 76% 43%, rgba(151,42,26,.25), transparent 32%),
    linear-gradient(rgba(8,5,3,.72), rgba(6,4,3,.92)),
    url("assets/generated/surface-forged.webp") center / 1024px auto !important;
}
body[data-page="marketing"] .hero h1,
body[data-page="marketing"] h2 { color: #f7d494; text-shadow: 0 4px 0 #241207, 0 11px 26px #000; }
body[data-page="marketing"] .feature,
body[data-page="support"] .card,
body[data-page="testflight"] .step,
body[data-page] .notice,
body[data-page] .toc,
body[data-page] .callout {
  border: 1px solid #76512e !important;
  background:
    linear-gradient(rgba(26,16,10,.9), rgba(9,6,4,.96)),
    url("assets/generated/surface-forged.webp") center / 720px auto !important;
  box-shadow: inset 0 0 0 3px #070403, 0 14px 34px rgba(0,0,0,.32) !important;
}
body[data-page="marketing"] .feature { border-top: 3px solid #8d3929 !important; }
body[data-page="marketing"] .media,
body[data-page="marketing"] .gameplay-shot {
  padding: 7px;
  border: 1px solid #987044 !important;
  border-radius: 0;
  background: #090604 !important;
  box-shadow: 0 0 0 3px #070403, 0 18px 42px rgba(0,0,0,.42) !important;
}
body[data-page="marketing"] .gameplay-shot figcaption { margin-top: 6px; background: linear-gradient(180deg, #24170e, #0b0705); }
body[data-page="marketing"] .cta {
  border: 1px solid #8d6237;
  background:
    radial-gradient(circle at 50% 0, rgba(143,38,26,.24), transparent 45%),
    linear-gradient(rgba(20,12,8,.9), rgba(7,4,3,.98)),
    url("assets/generated/surface-forged.webp") center / cover !important;
  box-shadow: 0 0 0 3px #070403, 0 20px 48px rgba(0,0,0,.4);
}

@media (max-width: 1180px) {
  .hero-gameplay-card { width: 48vw; }
}

@media (max-width: 880px) {
  body:not([data-page]) .hero { min-height: 0; padding-block: 106px 64px; }
  body:not([data-page]) .hero-content { padding-inline-end: 0; }
  .hero-gameplay-card { width: min(680px, 100%); }
  body[data-page="marketing"] .hero { min-height: 0; }
}

@media (max-width: 680px) {
  body:not([data-page]) .topbar { min-height: 64px; height: 64px; }
  body:not([data-page]) .brand { width: 88px; height: 56px; }
  body:not([data-page]) .brand img { width: 86px !important; height: 54px !important; }
  body:not([data-page]) .language-control { width: 128px; }
  body:not([data-page]) .nav.open { top: 64px; }
  body:not([data-page]) .hero { padding-block: 92px 52px; }
  body:not([data-page]) .hero-logo { width: min(250px, 74vw) !important; }
  body:not([data-page]) .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  body:not([data-page]) section.content,
  body:not([data-page]) .partners-section,
  body:not([data-page]) .schedule { padding-block: 72px; }
  body:not([data-page]) .section-title { font-size: 48px; }
  .device-item { padding: 16px 13px; }
  .background-hunt-item { padding: 16px 12px; }
  .background-hunt-panel-copy { border-inline-start: 0; border-top: 1px solid #5d4025; }
  .hero-gameplay-card,
  .marketing-hero-gameplay { padding: 6px; }
  .hub-panel-title { min-height: 54px; font-size: 16px; }
  .hub-server { padding: 12px 8px; }
  .hub-countdown-title { flex-basis: auto; text-align: center; }
  .hub-countdown-unit { padding-block: 7px; }
  .partner-card { flex-basis: calc(50% - 5px); width: calc(50% - 5px); min-height: 178px; }
  .partner-card img { width: 104px !important; height: 104px !important; }
  .event-list { padding-inline: 14px; }
  .final-cta { min-height: 340px; }
  body[data-page="marketing"] .hero { padding-top: 104px; }
}

@media (max-width: 360px) {
  body:not([data-page]) .language-control { width: 108px; }
}

/* Header wayfinding and launch timer. Kept code-native so the navigation stays
   crisp at every density and the hero retains the forged portal language. */
body:not([data-page]) .nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

body:not([data-page]) .nav-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: #c89650;
  filter: drop-shadow(0 2px 2px #000);
  transition: color .16s ease, filter .16s ease, transform .16s ease;
}

body:not([data-page]) .nav-icon::before,
body:not([data-page]) .nav-icon::after {
  position: absolute;
  box-sizing: border-box;
  content: "";
}

body:not([data-page]) .nav a:hover .nav-icon,
body:not([data-page]) .nav a:focus-visible .nav-icon {
  color: #ffd58c;
  filter: drop-shadow(0 0 5px rgba(207, 118, 54, .56));
  transform: translateY(-1px);
}

body:not([data-page]) .nav-icon-home::before {
  left: 4px;
  top: 7px;
  width: 11px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-top: 0;
}
body:not([data-page]) .nav-icon-home::after {
  left: 4px;
  top: 2px;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

body:not([data-page]) .nav-icon-presentation::before {
  inset: 2px 2px 3px;
  border: 1.5px solid currentColor;
  box-shadow: inset 0 2px rgba(200, 150, 80, .18);
}
body:not([data-page]) .nav-icon-presentation::after {
  left: 6px;
  top: 7px;
  width: 7px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 4px currentColor;
}

body:not([data-page]) .nav-icon-wiki::before,
body:not([data-page]) .nav-icon-wiki::after {
  top: 3px;
  width: 8px;
  height: 13px;
  border: 1.5px solid currentColor;
  background: rgba(22, 12, 7, .7);
}
body:not([data-page]) .nav-icon-wiki::before {
  left: 1px;
  border-radius: 2px 0 0 2px;
  transform: skewY(7deg);
}
body:not([data-page]) .nav-icon-wiki::after {
  right: 1px;
  border-radius: 0 2px 2px 0;
  transform: skewY(-7deg);
}

body:not([data-page]) .nav-icon-ranking::before {
  left: 2px;
  top: 4px;
  width: 14px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 12%, 29% 48%, 50% 0, 71% 48%, 100% 12%, 86% 100%, 14% 100%);
}
body:not([data-page]) .nav-icon-ranking::after {
  left: 3px;
  bottom: 2px;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 -2px rgba(21, 10, 6, .64);
}

body:not([data-page]) .nav-icon-mobile::before {
  left: 4px;
  top: 1px;
  width: 10px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
body:not([data-page]) .nav-icon-mobile::after {
  left: 8px;
  bottom: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}

body:not([data-page]) .nav-icon-partners::before {
  inset: 1px 0 7px;
  background:
    radial-gradient(circle at 28% 50%, currentColor 0 2.5px, transparent 2.8px),
    radial-gradient(circle at 72% 50%, currentColor 0 2.5px, transparent 2.8px);
}
body:not([data-page]) .nav-icon-partners::after {
  left: 1px;
  bottom: 1px;
  width: 16px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  clip-path: polygon(0 0, 45% 0, 50% 48%, 55% 0, 100% 0, 100% 100%, 0 100%);
}

body:not([data-page]) .nav-icon-events::before {
  inset: 3px 2px 2px;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  box-shadow: inset 0 3px rgba(200, 150, 80, .18);
}
body:not([data-page]) .nav-icon-events::after {
  left: 5px;
  top: 1px;
  width: 1.5px;
  height: 5px;
  background: currentColor;
  box-shadow: 7px 0 currentColor, 0 9px currentColor, 4px 9px currentColor, 7px 9px currentColor;
}

body:not([data-page]) .hero-countdown {
  position: relative;
  width: min(474px, 100%);
  margin-top: 17px;
  padding: 7px;
  border: 1px solid #865b32;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(45, 27, 16, .96), rgba(8, 5, 3, .98)),
    url("assets/generated/surface-forged.webp") center / 620px auto;
  box-shadow:
    inset 0 0 0 2px #070403,
    inset 0 0 0 3px rgba(222, 164, 79, .13),
    0 12px 28px rgba(0, 0, 0, .38);
}

body:not([data-page]) .hero-countdown::before,
body:not([data-page]) .hero-countdown::after {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 26px;
  border-block: 1px solid #a56e38;
  background: #180c08;
  content: "";
  transform: translateY(-50%);
}
body:not([data-page]) .hero-countdown::before { left: -6px; border-left: 1px solid #633e22; }
body:not([data-page]) .hero-countdown::after { right: -6px; border-right: 1px solid #633e22; }

body:not([data-page]) .hero-countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

body:not([data-page]) .hero-countdown-unit {
  display: grid;
  min-width: 0;
  min-height: 61px;
  place-content: center;
  gap: 3px;
  padding: 7px 4px 6px;
  border: 1px solid #663721;
  background:
    radial-gradient(circle at 50% 0, rgba(150, 47, 28, .25), transparent 58%),
    linear-gradient(180deg, #2e160f, #0b0705);
  box-shadow: inset 0 0 0 2px rgba(5, 3, 2, .88), inset 0 1px rgba(255, 201, 117, .1);
  text-align: center;
}

body:not([data-page]) .hero-countdown-unit b {
  color: #ffd889;
  font: 700 clamp(21px, 2vw, 27px)/1 var(--display);
  letter-spacing: .035em;
  text-shadow: 0 2px 0 #31150b, 0 0 10px rgba(207, 91, 48, .2);
}

body:not([data-page]) .hero-countdown-unit small {
  min-width: 0;
  color: #cda66d;
  font: 800 clamp(7px, .68vw, 9px)/1.15 var(--sans);
  letter-spacing: .11em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

body:not([data-page]) .hero-countdown-live {
  display: none;
  min-height: 61px;
  place-items: center;
  color: #ffd889;
  font: 700 17px/1.25 var(--display);
  letter-spacing: .045em;
  text-align: center;
  text-shadow: 0 2px 3px #000;
}
body:not([data-page]) .hero-countdown.is-live .hero-countdown-grid { display: none; }
body:not([data-page]) .hero-countdown.is-live .hero-countdown-live { display: grid; }

@media (max-width: 1180px) {
  body:not([data-page]) .nav.open {
    width: auto;
    max-width: none;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  body:not([data-page]) .nav.open a {
    display: flex !important;
    min-width: 0;
    justify-content: flex-start;
    gap: 11px;
  }
  body:not([data-page]) .nav.open a > span:last-child { min-width: 0; }
}

@media (max-width: 680px) {
  body:not([data-page]) .hero-countdown {
    width: 100%;
    margin-top: 15px;
    padding: 6px;
  }
  body:not([data-page]) .hero-countdown-grid { gap: 4px; }
  body:not([data-page]) .hero-countdown-unit {
    min-height: 57px;
    padding-inline: 2px;
  }
  body:not([data-page]) .hero-countdown-unit b { font-size: clamp(19px, 7vw, 24px); }
  body:not([data-page]) .hero-countdown-unit small {
    font-size: clamp(7px, 2.25vw, 8px);
    letter-spacing: .07em;
  }
  body:not([data-page]) .hero-countdown::before,
  body:not([data-page]) .hero-countdown::after { width: 8px; }
  body:not([data-page]) .hero-countdown::before { left: -4px; }
  body:not([data-page]) .hero-countdown::after { right: -4px; }
}

@media (max-width: 360px) {
  body:not([data-page]) .hero-countdown-unit { min-height: 54px; }
  body:not([data-page]) .hero-countdown-unit b { font-size: 19px; }
  body:not([data-page]) .nav.open { padding-inline: 10px; }
}

/* Final portal composition: atmospheric world art supports the page while every
   gameplay claim continues to use the real captures in assets/mobile/. */
body:not([data-page]) .hero::before {
  background:
    linear-gradient(90deg, rgba(4, 3, 2, .95) 0 32%, rgba(4, 3, 2, .72) 48%, rgba(4, 3, 2, .45) 70%, rgba(4, 3, 2, .74) 100%),
    linear-gradient(180deg, rgba(2, 2, 2, .16), rgba(5, 3, 2, .7)),
    url("assets/generated/estiva-legacy-gate-v1.jpg") center / cover no-repeat !important;
  filter: saturate(.82) contrast(1.08);
}

body:not([data-page]) .hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(468px, 100%);
  gap: 10px;
}
body:not([data-page]) .hero-actions .button {
  display: inline-flex;
  width: 100%;
}
body:not([data-page]) .hero-actions .button:nth-child(3) { display: inline-flex; }

.button-label-stacked {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}
.button-label-stacked small {
  color: #d99063;
  font: 800 8px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.button-label-stacked strong {
  color: #f1dfbd;
  font: 800 11px/1.1 var(--display);
  letter-spacing: .055em;
}
.legacy-server-button:hover:not(:active) .button-label-stacked small { color: #ffb07c; }
.legacy-server-button:active .button-label-stacked { transform: translateY(2px); }

body:not([data-page]) .hero-actions .button:hover:not(:active) {
  color: #fff4dc !important;
  filter: brightness(1.24) saturate(1.12) drop-shadow(0 12px 15px rgba(0, 0, 0, .56));
  transform: translateY(-3px) !important;
}
body:not([data-page]) .hero-actions .button:active {
  color: #d8c3a1 !important;
  filter: brightness(.78) saturate(.9) drop-shadow(0 2px 3px rgba(0, 0, 0, .48));
  transform: translateY(3px) scale(.985) !important;
}

.schedule {
  background:
    linear-gradient(90deg, rgba(6, 4, 3, .84) 0 28%, rgba(6, 4, 3, .62) 51%, rgba(6, 4, 3, .42) 100%),
    linear-gradient(180deg, rgba(7, 4, 3, .2), rgba(7, 4, 3, .7)),
    url("assets/generated/estiva-empire-battlefield-v1.jpg") 55% center / cover no-repeat !important;
  background-attachment: scroll !important;
}

@media (max-width: 880px) {
  body:not([data-page]) .hero::before {
    background:
      linear-gradient(180deg, rgba(4, 3, 2, .88) 0 38%, rgba(4, 3, 2, .66) 64%, rgba(4, 3, 2, .94) 100%),
      url("assets/generated/estiva-legacy-gate-v1.jpg") 61% center / cover no-repeat !important;
  }
  .schedule {
    background:
      linear-gradient(rgba(6, 4, 3, .84), rgba(6, 4, 3, .92)),
      url("assets/generated/estiva-empire-battlefield-v1.jpg") 65% center / cover no-repeat !important;
  }
}

@media (max-width: 680px) {
  body:not([data-page]) .hero-actions { grid-template-columns: 1fr; }
  .button-label-stacked small { font-size: 9px; }
  .button-label-stacked strong { font-size: 12px; }
}

/* Misali2-inspired theme pass: keep Astra2's own art and content, while adopting
   the reference's quieter cinematic rhythm, warm gold palette and soft panels. */
:root {
  --ink: #0b0807;
  --ink-2: #110c09;
  --panel: #171110;
  --panel-raised: #201814;
  --cream: #ece0cb;
  --muted: #a8947c;
  --gold: #e8b34b;
  --gold-2: #f6d98d;
  --bronze: #a97e35;
  --ember: #e0704e;
  --blood: #78291f;
  --line: rgba(89, 67, 46, .72);
  --line-soft: #3a2c22;
  --line-strong: #59432e;
  --surface-0: #0b0807;
  --surface-1: #110c09;
  --surface-2: #171110;
  --text-main: #ece0cb;
  --text-muted: #a8947c;
  --display: Constantia, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --serif: var(--display);
  --site-shell: 1180px;
}

body {
  color: var(--text-main) !important;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

body:not([data-page]) {
  border-inline: 0;
  background:
    radial-gradient(circle at 50% 2%, rgba(232, 179, 75, .035), transparent 24%),
    #0b0807 !important;
}

h1, h2, h3, .section-title {
  font-family: var(--display);
  font-weight: 700;
}

/* Reference-like navigation: compact, edge-aligned and visually quiet. */
body:not([data-page]) .topbar {
  min-height: 70px;
  height: 70px;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 24px;
  padding-inline: 30px;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(89, 67, 46, .72) !important;
  background: linear-gradient(180deg, rgba(13, 9, 7, .97), rgba(11, 8, 7, .9)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32) !important;
  backdrop-filter: blur(12px);
}

body:not([data-page]) .topbar::after {
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 179, 75, .25) 18% 82%, transparent);
  box-shadow: none;
}

body:not([data-page]) .brand {
  width: 108px;
  height: 58px;
}

body:not([data-page]) .brand img {
  width: 106px;
  height: 56px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .62));
}

body:not([data-page]) .nav {
  max-width: none;
  justify-self: end;
  gap: 27px;
  font-size: 12px;
  letter-spacing: .115em;
}

body:not([data-page]) .nav a {
  min-height: 44px;
  padding-block: 25px 23px;
  color: #a8947c !important;
  font-weight: 700;
  text-shadow: none;
}

body:not([data-page]) .nav a:hover,
body:not([data-page]) .nav a:focus-visible { color: #f6d98d !important; }

body:not([data-page]) .nav a::after {
  bottom: 15px;
  background: linear-gradient(90deg, transparent, #e8b34b, transparent);
}

body:not([data-page]) .nav-icon { display: none; }
body:not([data-page]) .nav-cta { gap: 10px; }
body:not([data-page]) .language-control { width: 142px; }

/* Cleaner launcher controls from the reference, without copying its artwork. */
.button,
.link-button,
.hub-more {
  --button-frame: none;
  min-height: 50px;
  border: 1px solid rgba(232, 179, 75, .4) !important;
  border-radius: 10px !important;
  background: rgba(18, 12, 9, .72) !important;
  box-shadow: none !important;
  color: #f6d98d !important;
  font-size: 13px;
  letter-spacing: .11em;
  text-shadow: none;
  filter: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.button.gold,
.button.primary,
.link-button.gold {
  border-color: #241708 !important;
  background: linear-gradient(180deg, #f4ca6c, #c08a2b) !important;
  box-shadow: 0 6px 24px rgba(232, 179, 75, .24), inset 0 1px rgba(255, 255, 255, .42) !important;
  color: #241708 !important;
  text-shadow: none;
}

.button::before,
.link-button::before,
.hub-more::before { display: none; content: none; }

.button:hover:not(:active),
.link-button:hover:not(:active),
.hub-more:hover:not(:active) {
  border-color: rgba(246, 217, 141, .75) !important;
  background: rgba(38, 25, 16, .88) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3) !important;
  color: #fff0c7 !important;
  filter: none;
  transform: translateY(-3px) !important;
}

.button.gold:hover:not(:active),
.button.primary:hover:not(:active),
.link-button.gold:hover:not(:active) {
  border-color: #38240b !important;
  background: linear-gradient(180deg, #f8d57f, #d39731) !important;
  box-shadow: 0 9px 30px rgba(232, 179, 75, .34) !important;
  color: #241708 !important;
}

.button:active,
.link-button:active,
.hub-more:active {
  filter: brightness(.9);
  transform: translateY(1px) !important;
}

body:not([data-page]) .nav-cta .link-button.gold {
  min-width: 142px;
  min-height: 46px;
}

/* Hero: the same two-column cinematic composition, tuned to the reference. */
body:not([data-page]) .hero {
  min-height: 900px;
  height: 900px;
  padding-block: 112px 72px;
  border-bottom: 1px solid #3a2c22;
  background: #0b0807 !important;
}

body:not([data-page]) .hero::before {
  background:
    linear-gradient(90deg, rgba(8, 5, 4, .95) 0 28%, rgba(8, 5, 4, .68) 48%, rgba(8, 5, 4, .35) 72%, rgba(8, 5, 4, .72) 100%),
    radial-gradient(circle at 72% 46%, rgba(185, 82, 34, .22), transparent 35%),
    url("assets/generated/estiva-legacy-gate-v1.jpg") center / cover no-repeat !important;
  filter: saturate(.78) contrast(1.04);
}

body:not([data-page]) .hero::after {
  background:
    radial-gradient(ellipse at 78% 48%, transparent 0 18%, rgba(7, 4, 3, .12) 46%, rgba(7, 4, 3, .58) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 58%, #0b0807 100%) !important;
}

body:not([data-page]) .hero-grain { opacity: .018 !important; }

body:not([data-page]) .hero-content {
  width: min(var(--site-shell), calc(100% - 44px));
  padding-inline-end: min(52vw, 610px);
}

body:not([data-page]) .hero-logo {
  width: min(315px, 30vw) !important;
  margin-bottom: 10px !important;
  filter: drop-shadow(0 13px 26px rgba(0, 0, 0, .58)) !important;
}

body:not([data-page]) .season-kicker {
  width: fit-content;
  padding: 7px 14px;
  border: 1px solid rgba(232, 179, 75, .32);
  border-radius: 999px;
  background: rgba(20, 13, 9, .72);
  box-shadow: none;
  color: #dba34d !important;
  font-size: 10px;
  letter-spacing: .17em;
}

body:not([data-page]) .hero h1 {
  max-width: 600px;
  margin-top: 20px;
  color: #f6d98d !important;
  font-size: clamp(45px, 4vw, 58px);
  line-height: .98;
  letter-spacing: 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .72);
}

.hero-lede {
  max-width: 540px;
  color: #c6b59d;
  font-size: 16px;
  line-height: 1.65;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .66);
}

body:not([data-page]) .hero-date {
  color: #e8b34b;
  font-size: 16px;
  letter-spacing: .075em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .68);
}

body:not([data-page]) .hero-countdown {
  width: min(468px, 100%);
  padding: 6px;
  border: 1px solid #59432e;
  border-radius: 10px;
  background: rgba(15, 10, 8, .86);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  backdrop-filter: blur(6px);
}

body:not([data-page]) .hero-countdown::before,
body:not([data-page]) .hero-countdown::after { display: none; content: none; }

body:not([data-page]) .hero-countdown-unit {
  min-height: 58px;
  border: 1px solid rgba(89, 67, 46, .66);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(32, 24, 20, .88), rgba(17, 12, 9, .92));
  box-shadow: none;
}

body:not([data-page]) .hero-countdown-unit b {
  color: #f6d98d;
  font-size: clamp(21px, 2vw, 26px);
  text-shadow: none;
}

body:not([data-page]) .hero-countdown-unit small { color: #a8947c; }
body:not([data-page]) .hero-actions { gap: 10px; margin-top: 20px; }
body:not([data-page]) .hero-actions .button { min-height: 50px; }

.hero-gameplay-card {
  inset-inline-end: max(16px, calc((100vw - 1860px) / 2));
  width: min(68vw, 1040px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.hero-gameplay-card::before {
  display: none;
  content: none;
}

.hero-gameplay-card img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, .55));
}

.hero-gameplay-card picture { display: block; }

body:not([data-page]) .world-strip {
  border-block: 1px solid #3a2c22 !important;
  background: linear-gradient(180deg, #110c09, #0d0907) !important;
  box-shadow: none;
}

body:not([data-page]) .world-stat {
  min-height: 96px;
  border-color: rgba(89, 67, 46, .5) !important;
  background: transparent !important;
}

body:not([data-page]) .world-stat small { color: #e0704e !important; }
body:not([data-page]) .world-stat strong { color: #f6d98d; font-size: 19px; text-shadow: none; }

/* Section rhythm, numbering and panel language. */
body:not([data-page]) main { counter-reset: astra-section; }
body:not([data-page]) .mobile-section,
body:not([data-page]) .partners-section,
body:not([data-page]) .schedule,
body:not([data-page]) .reward-section { counter-increment: astra-section; }

body:not([data-page]) section.content,
body:not([data-page]) .partners-section,
body:not([data-page]) .schedule { padding-block: 82px; }

body:not([data-page]) .section-label {
  gap: 10px;
  color: #e0704e !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}

body:not([data-page]) .section-label::before {
  width: auto;
  height: auto;
  background: none !important;
  color: #e0704e;
  content: counter(astra-section, decimal-leading-zero) " ·";
}

body:not([data-page]) .section-label::after {
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 112, 78, .72), transparent);
  content: "";
}

body:not([data-page]) .section-title {
  margin-top: 16px;
  color: #f6d98d !important;
  font-size: clamp(36px, 3.5vw, 46px);
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: none;
}

body:not([data-page]) .section-copy {
  color: #a8947c;
  font-size: 16px;
  line-height: 1.7;
}

.mobile-section {
  border-bottom: 1px solid #3a2c22;
  background:
    radial-gradient(circle at 82% 26%, rgba(185, 82, 34, .09), transparent 31%),
    #0b0807 !important;
}

.mobile-section::before { color: rgba(232, 179, 75, .025) !important; }

.device-item {
  padding: 18px;
  border: 1px solid #3a2c22 !important;
  border-radius: 13px;
  background: linear-gradient(165deg, rgba(32, 24, 20, .82), rgba(17, 12, 9, .9));
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.device-item:hover {
  border-color: #59432e !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
  transform: translateY(-3px);
}

.device-item .index {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(232, 179, 75, .42);
  background: #171110;
  color: #e8b34b !important;
  font-size: 13px;
  box-shadow: none;
}

.device-item strong {
  color: #f6d98d;
  font-size: 19px;
  text-shadow: none;
}

.background-hunt-panel {
  border: 1px solid #59432e;
  border-radius: 11px;
  background: #110c09;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .32);
}

.background-hunt-panel-copy {
  border-inline-start-color: #3a2c22;
  background: linear-gradient(150deg, rgba(32, 24, 20, .72), rgba(17, 12, 9, .88));
}

.video-stage {
  border: 1px solid #59432e !important;
  border-radius: 14px;
  background: #0b0807 !important;
  box-shadow: 0 28px 68px rgba(0, 0, 0, .42) !important;
}

.realm-hub { padding-block: 74px 42px; }

.hub-panel,
.hub-actions {
  border: 1px solid #59432e;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(23, 17, 16, .96), rgba(13, 9, 7, .98)) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .28);
}

.hub-panel-title {
  min-height: 56px;
  padding-inline: 22px;
  border-bottom: 1px solid #3a2c22;
  color: #f6d98d;
  font-size: 17px;
  text-shadow: none;
}

.hub-news .panel-title-art,
.hub-actions .panel-title-art { display: none !important; }
.hub-story { border-bottom-color: #3a2c22; }
.hub-story:hover { background: rgba(232, 179, 75, .045); }
.hub-story img,
.hub-story-marker { border-color: #59432e; box-shadow: none; }
.hub-story-marker { background: #201814; color: #e8b34b; }

.hub-actions > a {
  border: 1px solid #3a2c22 !important;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(32, 24, 20, .86), rgba(17, 12, 9, .92)) !important;
  box-shadow: none !important;
}

.hub-actions > a:hover {
  border-color: #59432e !important;
  background: #201814 !important;
}

.hub-server {
  border: 1px solid #3a2c22;
  border-radius: 10px;
  background: #110c09;
  box-shadow: none;
}

.hub-countdown-unit {
  border-color: #3a2c22;
  border-radius: 7px;
  background: #171110;
  box-shadow: none;
}

.hub-countdown-unit b { color: #f6d98d; }

.partners-section {
  border-block: 1px solid #3a2c22;
  background: linear-gradient(180deg, #0d0907, #0b0807) !important;
}

.partners-section::before { color: rgba(232, 179, 75, .022) !important; }

.partner-card {
  flex-basis: 180px;
  width: 180px;
  min-height: 190px;
  border: 1px solid #3a2c22 !important;
  border-radius: 14px;
  background: linear-gradient(165deg, #201814, #110c09) !important;
  box-shadow: none;
}

.partner-card::after { display: none; content: none; }

.partner-card:hover {
  border-color: #8a6734 !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3), 0 0 24px rgba(232, 179, 75, .07);
  transform: translateY(-5px);
}

.partner-card img {
  border: 1px solid #59432e;
  background: #0b0807;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
}

.partner-card span { color: #f6d98d; font-size: 15px; }

.schedule {
  border-block: 1px solid #3a2c22;
  background:
    linear-gradient(90deg, rgba(11, 8, 7, .95) 0 32%, rgba(11, 8, 7, .76) 56%, rgba(11, 8, 7, .62) 100%),
    url("assets/generated/estiva-empire-battlefield-v1.jpg") 55% center / cover no-repeat !important;
}

.event-list {
  padding: 10px 26px;
  border: 1px solid #59432e !important;
  border-radius: 14px;
  background: rgba(13, 9, 7, .92) !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .34);
  backdrop-filter: blur(8px);
}

.event-row {
  min-height: 116px;
  grid-template-columns: 126px 72px minmax(0, 1fr) auto;
  gap: 18px;
  border-color: #3a2c22 !important;
}

.event-art {
  width: 126px;
  height: 80px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #59432e;
  border-radius: 9px;
  background: #0b0807;
}

.event-art::after { background: linear-gradient(135deg, transparent 44%, rgba(11, 8, 7, .34)); }

.event-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(1.08) brightness(.82);
}

.event-row:hover .event-art img {
  filter: saturate(.94) contrast(1.08) brightness(.94);
  transform: scale(1.055);
}

.event-row:hover { background: rgba(232, 179, 75, .045); }
.event-row time { color: #e8b34b !important; text-shadow: none; }
.event-row strong { color: #f6d98d; }
.event-row .event-reward { color: #c38b62; }
.event-row em {
  border-color: rgba(224, 112, 78, .42) !important;
  border-radius: 999px;
  background: rgba(120, 41, 31, .26);
  color: #e88d71 !important;
}

.reward-section {
  border-bottom: 1px solid #3a2c22;
  background:
    linear-gradient(90deg, rgba(11, 8, 7, .96) 0 28%, rgba(11, 8, 7, .82) 52%, rgba(11, 8, 7, .62) 100%),
    radial-gradient(circle at 68% 36%, rgba(232, 179, 75, .08), transparent 34%),
    url("assets/generated/reward-metin-v2.webp") 72% center / cover no-repeat !important;
}

.reward,
.reward.first {
  border: 1px solid #3a2c22 !important;
  border-radius: 14px;
  background: linear-gradient(165deg, #201814, #110c09) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24) !important;
}

.reward.first {
  border-color: #8a6734 !important;
  background: linear-gradient(165deg, #2a2118, #17100c) !important;
}

.reward .place { color: #e0704e; text-shadow: none; }
.reward.first .place,
.reward.first .amount { color: #f6d98d !important; }

.final-cta {
  min-height: 390px;
  border-block: 1px solid #3a2c22;
  background:
    radial-gradient(circle at 50% 28%, rgba(185, 82, 34, .18), transparent 36%),
    linear-gradient(180deg, #110c09, #0b0807) !important;
  box-shadow: none;
}

.final-cta::before { background: linear-gradient(90deg, rgba(0, 0, 0, .42), transparent 32% 68%, rgba(0, 0, 0, .42)); }
.final-cta .section-label::before,
.final-cta .section-label::after { display: none; content: none; }
.final-cta h2 { color: #f6d98d; font-size: clamp(44px, 5vw, 64px); text-shadow: none; }

body:not([data-page]) footer {
  border-top-color: #3a2c22 !important;
  background: #0b0807 !important;
}

/* Carry the same restrained palette across support, legal and marketing pages. */
body[data-page] {
  background:
    radial-gradient(circle at 50% 0, rgba(232, 179, 75, .035), transparent 28%),
    #0b0807 !important;
}

body[data-page] .topbar {
  border-bottom-color: #3a2c22 !important;
  background: linear-gradient(180deg, rgba(13, 9, 7, .98), rgba(11, 8, 7, .94)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

body[data-page="marketing"] .hero {
  background:
    radial-gradient(circle at 76% 43%, rgba(185, 82, 34, .12), transparent 34%),
    linear-gradient(180deg, #110c09, #0b0807) !important;
}

body[data-page="marketing"] .hero h1,
body[data-page="marketing"] h2,
body[data-page] h1,
body[data-page] h2 { color: #f6d98d !important; text-shadow: none; }

body[data-page="marketing"] .feature,
body[data-page="support"] .card,
body[data-page="testflight"] .step,
body[data-page] .notice,
body[data-page] .toc,
body[data-page] .callout {
  border: 1px solid #3a2c22 !important;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(32, 24, 20, .88), rgba(17, 12, 9, .94)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important;
}

body[data-page="marketing"] .feature { border-top: 1px solid #59432e !important; }

body[data-page="marketing"] .media,
body[data-page="marketing"] .gameplay-shot {
  border: 1px solid #59432e !important;
  border-radius: 14px;
  background: #0b0807 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3) !important;
}

body[data-page="marketing"] .cta {
  border: 1px solid #59432e;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0, rgba(185, 82, 34, .12), transparent 44%),
    linear-gradient(180deg, #171110, #0b0807) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
}

@media (min-width: 901px) and (max-width: 1180px) {
  body:not([data-page]) .topbar {
    grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 14px;
    padding-inline: 20px;
  }
  body:not([data-page]) .brand { width: 100px; }
  body:not([data-page]) .brand img { width: 98px; }
  body:not([data-page]) .nav { display: flex; gap: 17px; font-size: 10px; }
  body:not([data-page]) .nav a { padding-inline: 0; }
  body:not([data-page]) .menu-button { display: none; }
  body:not([data-page]) .language-control { width: 124px; }
  body:not([data-page]) .nav-cta .link-button.gold { min-width: 126px; padding-inline: 14px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 68px; }
  body:not([data-page]) .topbar {
    grid-template-columns: 104px minmax(0, 1fr) auto;
    padding-inline: 18px;
  }
  body:not([data-page]) .nav { display: none; }
  body:not([data-page]) .nav.open {
    top: 70px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(540px, calc(100% - 28px));
    gap: 0;
    padding: 12px;
    border: 1px solid #59432e;
    border-radius: 12px;
    background: rgba(13, 9, 7, .98);
    box-shadow: 0 26px 58px rgba(0, 0, 0, .5);
  }
  body:not([data-page]) .nav.open a {
    min-height: 48px;
    padding: 14px 12px;
    border-bottom: 1px solid #3a2c22;
  }
  body:not([data-page]) .menu-button { display: inline-flex; }
  body:not([data-page]) .hero {
    min-height: 0;
    height: auto;
    padding-block: 104px 60px;
  }
  body:not([data-page]) .hero::before {
    background:
      linear-gradient(180deg, rgba(8, 5, 4, .9) 0 34%, rgba(8, 5, 4, .62) 64%, #0b0807 100%),
      url("assets/generated/estiva-legacy-gate-v1.jpg") 62% center / cover no-repeat !important;
  }
  body:not([data-page]) .hero-content {
    padding-inline-end: 0;
    text-align: center;
  }
  body:not([data-page]) .hero-logo,
  body:not([data-page]) .season-kicker { margin-inline: auto !important; }
  body:not([data-page]) .hero h1,
  .hero-lede { margin-inline: auto; }
  body:not([data-page]) .hero-actions { margin-inline: auto; }
  .hero-gameplay-card {
    position: relative;
    top: auto;
    inset-inline: auto;
    width: min(680px, calc(100% - 44px));
    margin: 40px auto 0;
    transform: none;
  }
  body:not([data-page]) section.content,
  body:not([data-page]) .partners-section,
  body:not([data-page]) .schedule { padding-block: 66px; }
  .schedule {
    background:
      linear-gradient(rgba(11, 8, 7, .9), rgba(11, 8, 7, .94)),
      url("assets/generated/estiva-empire-battlefield-v1.jpg") 64% center / cover no-repeat !important;
  }
}

@media (max-width: 680px) {
  body:not([data-page]) .topbar {
    min-height: 64px;
    height: 64px;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 12px;
  }
  body:not([data-page]) .brand { width: 86px; height: 54px; }
  body:not([data-page]) .brand img { width: 84px !important; height: 52px !important; }
  body:not([data-page]) .nav.open {
    top: 64px;
    grid-template-columns: 1fr;
    width: calc(100% - 20px);
  }
  body:not([data-page]) .language-control { width: 116px; }
  body:not([data-page]) .hero {
    display: flex;
    flex-direction: column;
    padding-block: 84px 50px;
  }
  body:not([data-page]) .hero-content {
    z-index: 2;
    order: 1;
  }
  .hero-gameplay-card {
    order: -1;
    width: min(420px, 100%);
    height: min(620px, 150vw);
    margin: -18px auto -125px;
    overflow: hidden;
  }
  .hero-gameplay-card picture,
  .hero-gameplay-card img { width: 100%; height: 100%; }
  .hero-gameplay-card img {
    object-fit: cover;
    object-position: center top;
    filter: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0 76%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 76%, transparent 100%);
  }
  body:not([data-page]) .hero-logo { width: min(242px, 72vw) !important; }
  body:not([data-page]) .hero h1 { font-size: clamp(37px, 10.5vw, 46px); }
  .hero-lede { font-size: 15px; }
  body:not([data-page]) .hero-actions { width: min(360px, 100%); }
  body:not([data-page]) .hero-actions .button { min-height: 50px; }
  body:not([data-page]) .world-strip { width: 100%; }
  body:not([data-page]) .section-title { font-size: 39px; }
  body:not([data-page]) .section-label::after { width: 34px; }
  .device-item { border-radius: 11px; }
  .background-hunt-panel-copy { border-inline-start: 0; border-top: 1px solid #3a2c22; }
  .hub-panel,
  .hub-actions,
  .event-list,
  .reward,
  .reward.first,
  .partner-card { border-radius: 11px; }
  .partner-card { min-height: 168px; }
  .event-list { padding-inline: 14px; }
  .event-row {
    min-height: 0;
    grid-template-columns: 86px 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding-block: 16px;
  }
  .event-art {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 86px;
    height: 62px;
  }
  .event-row time { grid-column: 2 !important; grid-row: 1 !important; }
  .event-row > div { grid-column: 3 !important; grid-row: 1 !important; }
  .event-row em { grid-column: 2 / 4 !important; grid-row: 2 !important; justify-self: start; }
  .final-cta h2 { font-size: 44px; }
}

/* Restrained ImageGen controls: the actual normal / hover / down images swap. */
html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
) {
  --button-label-color: #eddbba;
  position: relative !important;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 9px !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--button-label-color) !important;
  filter: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important;
  transform: none !important;
  transition: none !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button.primary,
  .button.gold,
  .link-button.gold,
  .hub-actions > a.primary
) {
  --button-label-color: #211408;
  color: var(--button-label-color) !important;
  text-shadow: 0 1px rgba(255, 239, 197, .28) !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
)::before,
html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
)::after {
  content: none !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
) > .button-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  clip-path: none !important;
  object-fit: fill !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
) > .button-art--normal {
  opacity: 1 !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
) > :not(.button-art) {
  position: relative;
  z-index: 1;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
):hover:not(:active) > .button-art--normal,
html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
):focus-visible:not(:active) > .button-art--normal {
  opacity: 0 !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
):hover:not(:active) > .button-art--hover,
html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
):focus-visible:not(:active) > .button-art--hover {
  opacity: 1 !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
):focus-visible:not(:active) {
  outline: 2px solid #f6d98d !important;
  outline-offset: 3px !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
):active > :is(.button-art--normal, .button-art--hover) {
  opacity: 0 !important;
}

html:root :is(body[data-page], body:not([data-page])) :is(
  .button,
  .link-button,
  .menu-button,
  .hub-more,
  .hub-actions > a,
  .language-trigger,
  .language-option
):active > .button-art--down {
  opacity: 1 !important;
}

html:root :is(body[data-page], body:not([data-page]))
  :is(.button, .link-button, .menu-button, .hub-more, .hub-actions > a):active
  :where(.button-label, span) {
  transform: none !important;
}

.language-trigger > :not(.button-art),
.language-option > :not(.button-art) {
  position: relative;
  z-index: 1;
}

@media (forced-colors: active) {
  html:root :is(body[data-page], body:not([data-page])) :is(
    .button,
    .link-button,
    .menu-button,
    .hub-more,
    .hub-actions > a,
    .language-trigger,
    .language-option
  ) {
    border: 1px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }

  html:root :is(body[data-page], body:not([data-page])) :is(
    .button,
    .link-button,
    .menu-button,
    .hub-more,
    .hub-actions > a,
    .language-trigger,
    .language-option
  ) > .button-art {
    display: none !important;
  }
}