/* Centered game opening. Layout-only revision; account behavior stays in app.js. */
html { scroll-padding-top: 108px; }
header {
  height: 88px;
  padding: 0 3.5%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  position: sticky;
  top: 0;
  border-top: 0;
  border-bottom: 1px solid #745c3b;
  background: linear-gradient(110deg, #15212cfa, #1c2b39fa 65%, #15212cfa);
  box-shadow: 0 4px 18px #0007;
}
header .brand { font-size: 21px; gap: 10px; justify-self: start; }
header .brand small { font-size: 9px; letter-spacing: .2em; }
header .brand-emblem { width: 52px; height: 52px; }
header nav { gap: 5px; height: 100%; font-size: 17px; letter-spacing: 0; text-transform: none; }
header nav a { padding: 0 18px; min-height: 48px; border: 0; white-space: nowrap; font-size: inherit; }
header nav a:last-child { border: 0; }
header nav a:hover { background: #ffffff0a; }
header select { justify-self: end; min-height: 42px; min-width: 78px; padding: 8px; font-size: 14px; }
.hero {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0 5%;
  min-height: 700px;
  height: calc(100svh - 88px);
  max-height: 1000px;
}
.hero:before {
  inset: 0;
  transform: none;
  background: linear-gradient(90deg, #080e1780, #10182630 50%, #080e1780), url('/media/hero-realm.png') center 45% / cover;
  filter: saturate(.8);
}
.hero:after {
  background: linear-gradient(0deg, #080c10 0%, #080c1040 25%, #080c101a 75%, #080c1033),
    radial-gradient(ellipse at 50% 49%, #07101be8 0%, #07101bc9 28%, #07101b45 62%, transparent 90%);
}
.hero-atmosphere {
  background: radial-gradient(ellipse at 50% 20%, #b1bcc310, transparent 55%);
  box-shadow: inset 0 -45px 70px #080c10;
}
.hero-copy {
  width: min(820px, 100%);
  max-width: 820px;
  margin: 0 auto;
  padding: 44px 0 100px;
  text-align: center;
}
.game-title { width: min(600px, 100%); max-width: 600px; margin: 0 auto 20px; }
.game-title > img { width: 100%; height: auto; }
.hero .eyebrow { font-size: 11px; letter-spacing: .25em; margin-bottom: 18px; }
.hero h1 {
  font: 900 clamp(36px, 3.7vw, 56px)/1.12 'Arial Black', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: #faf4e9;
  margin: 0 0 20px;
  text-shadow: 0 3px 12px #000;
}
.hero .intro { max-width: 620px; margin: 0 auto 25px; font: 18px/1.65 Arial, sans-serif; color: #e0e5e8; }
.hero .actions { margin: 0; gap: 18px; }
.hero .actions .button, .hero .actions .text-link { min-height: 54px; font-size: 14px; padding: 17px 25px; }
.hero .status { font-size: 11px; margin: 25px 0 0; }
.sentinel {
  width: 42%;
  max-width: 660px;
  right: -8%;
  bottom: 30px;
  margin: 0;
  z-index: 0;
  opacity: .78;
}
.sentinel img {
  width: 100%; margin: 0;
  mask-image: radial-gradient(ellipse 62% 62% at 53% 64%, black 35%, transparent 87%);
  filter: contrast(1.1) brightness(.83);
}
.sentinel figcaption { display: none; }
.hero-bottom { padding: 18px 5%; border-top: 1px solid #8a744433; border-bottom: 1px solid #8a744455; background: #0a131c99; }
/* Let images carry the lower sections, with quieter metal framing. */
.features article { box-shadow: 0 8px 24px #0005; border-color: #66564077; }
.gallery { border-top: 1px solid #65523b; border-bottom: 1px solid #65523b; box-shadow: none; }
.gallery figure { padding: 3px; border-color: #80705299; box-shadow: 0 12px 30px #0006; }
.account-panel { box-shadow: 0 10px 25px #0005; border-color: #8d745088; }
@media (min-width: 1600px) and (min-height: 900px) {
  .hero-copy { padding-top: 55px; }
  .game-title { width: 650px; max-width: 650px; margin-bottom: 26px; }
}
@media (max-width: 1150px) {
  header { gap: 12px; padding: 0 2.5%; }
  header .brand { font-size: 18px; }
  header .brand small { font-size: 8px; }
  header nav { font-size: 16px; gap: 0; }
  header nav a { padding: 0 12px; }
  .sentinel { width: 44%; right: -12%; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 140px; }
  header { height: auto; min-height: 122px; grid-template-columns: 1fr auto; padding: 12px 4% 0; gap: 8px 15px; }
  header .brand { font-size: 20px; }
  header .brand-emblem { width: 44px; height: 44px; }
  header select { grid-column: 2; grid-row: 1; }
  header nav { grid-column: 1 / -1; grid-row: 2; order: initial; width: 100%; height: 48px; justify-content: center; font-size: 16px; }
  header nav a { flex: 1; padding: 10px 8px; }
  .hero { min-height: 670px; height: calc(100svh - 122px); }
  .hero-copy { padding: 40px 0 90px; }
  .game-title { width: min(540px, 100%); margin: 0 auto 20px; }
  .hero h1 { font-size: clamp(32px, 5vw, 44px); }
  .hero .intro { font-size: 17px; max-width: 560px; }
  .sentinel { width: 48%; right: -17%; opacity: .45; }
}
@media (max-width: 520px) {
  header nav { font-size: 15px; }
  header nav a { padding: 10px 5px; }
  .hero { min-height: 640px; max-height: none; height: auto; padding: 0 6%; }
  .hero-copy { padding: 38px 0 100px; }
  .game-title { width: 100%; margin: 0 auto 24px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .17em; margin-bottom: 17px; }
  .hero h1 { font-size: clamp(30px, 8vw, 39px); line-height: 1.14; margin-bottom: 18px; }
  .hero .intro { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
  .hero .actions { gap: 12px; flex-direction: column; width: 100%; }
  .hero .actions a { width: min(290px, 100%); justify-content: center; }
  .hero .status { font-size: 10px; margin-top: 22px; }
  .sentinel { width: 300px; max-width: none; right: -150px; bottom: 20px; opacity: .3; }
  .hero-bottom { font-size: 8px; gap: 15px; padding: 15px 6%; }
  .hero-bottom span { max-width: 47%; }
}