:root {
  color-scheme: dark;
  --ink: #f3eee5;
  --muted: #c0c3c2;
  --gold: #e4bd76;
  --line: rgb(220 185 125 / 23%);
  --night: #081219;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--night);
  color: var(--ink);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { position: relative; margin: 0; min-width: 280px; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
::selection { color: var(--night); background: var(--gold); }

.skip-link { position: fixed; top: 12px; left: 12px; z-index: 5; padding: 12px 20px; color: var(--night); background: var(--gold); transform: translateY(-150%); opacity: 0; pointer-events: none; }
.skip-link:focus { transform: translateY(0); opacity: 1; pointer-events: auto; }
.scenery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scenery picture, .scenery img { width: 100%; height: 100%; display: block; }
.scenery img { object-fit: cover; object-position: center top; }
.scenery::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 10 15 / 30%), rgb(4 10 15 / 8%) 25%, rgb(4 10 15 / 32%) 60%, var(--night) 100%), radial-gradient(ellipse at 50% 42%, rgb(4 11 17 / 83%) 0%, rgb(4 11 17 / 62%) 29%, rgb(4 11 17 / 8%) 67%); }
.page { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-inline: clamp(22px, 4.4vw, 84px); }

.wordmark { display: inline-flex; flex-shrink: 0; align-items: center; }
.wordmark img { display: block; width: 144px; height: auto; }

.hero { width: 100%; max-width: 740px; margin: auto; padding-block: 28px; text-align: center; }
.release { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #e4d6bc; }
.release > span[aria-hidden] { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgb(239 176 80 / 65%); }
.game-logo { display: block; width: min(320px, 70vw); height: auto; margin: 18px auto 25px; filter: drop-shadow(0 12px 25px rgb(0 0 0 / 40%)); }
.eyebrow { margin: 0 0 13px; color: var(--gold); font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: 3px; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4vw, 59px); font-weight: 400; line-height: 1.09; letter-spacing: -1.7px; text-shadow: 0 2px 20px rgb(0 0 0 / 45%); }
h1 em { color: var(--gold); font-weight: 400; }
.intro { margin: 21px 0 0; color: var(--muted); font-size: 15px; line-height: 1.85; text-wrap: pretty; }
.game-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 0; margin: 23px 0 0; padding: 0; list-style: none; color: #d9d2c6; font-size: 11px; letter-spacing: .45px; }
.game-facts li { display: flex; align-items: center; }
.game-facts li + li::before { content: ""; width: 3px; height: 3px; margin-inline: 17px; background: #c6a46d; transform: rotate(45deg); }
.coming-soon { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 31px auto 30px; }
.coming-soon p { margin: 0; color: #ebd3aa; font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-style: italic; }
.coming-soon > span { flex: 0 1 65px; height: 1px; background: linear-gradient(90deg, transparent, #ad8a51); }
.coming-soon > span:last-child { transform: rotate(180deg); }

.community h2 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .1px; }
.community > p:not(.community-status) { margin: 8px 0 18px; color: #aeb6b8; font-size: 12px; line-height: 1.6; }
.community-actions { display: flex; justify-content: center; gap: 12px; }
.social { display: flex; align-items: center; gap: 13px; min-height: 65px; padding: 13px 20px; width: 240px; border: 1px solid #b59051; border-radius: 3px; background: linear-gradient(120deg, #edcf96, #caa362); color: #211b11; text-align: left; transition: background .2s, border-color .2s, box-shadow .2s; }
.social > svg { width: 23px; height: 23px; flex-shrink: 0; }
.social > span:not(.social-arrow) { font-size: 13px; font-weight: 600; line-height: 1.3; }
.social small { display: block; margin-top: 4px; font-size: 9px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }
.social-arrow { margin-left: auto; font-size: 18px; }
.social-facebook { color: #e5d0aa; border-color: #7d715a; background: rgb(9 18 24 / 78%); }
.social[aria-disabled="true"] { cursor: default; }
.social[aria-disabled="true"] .social-arrow { opacity: .35; }
.social[href]:hover { background: #f2d7a6; border-color: #efd3a2; box-shadow: 0 0 20px rgb(224 180 106 / 12%); }
.social-facebook[href]:hover { background: #18242b; }
.community .community-status { margin: 13px 0 0; color: #a6b0b3; font-size: 10px; line-height: 1.6; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; flex-shrink: 0; max-width: 1680px; width: 100%; margin-inline: auto; padding-block: 14px; border-top: 1px solid rgb(224 203 163 / 12%); color: #99a4a8; font-size: 10px; letter-spacing: .2px; }
.site-footer p { margin: 0; line-height: 1.7; }
.footer-nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.footer-nav > a { display: inline-flex; align-items: center; min-height: 36px; font-size: 12px; line-height: 16px; color: #d4c5a9; }
.footer-nav > a:hover { color: var(--gold); }
.footer-divider { width: 1px; height: 14px; background: var(--line); }
.footer-genre { justify-self: end; font-size: 9px; text-transform: uppercase; letter-spacing: 1.7px; }

@media (min-width: 1000px) and (min-height: 1000px) {
  .game-logo { width: 360px; }
}

@media (max-width: 600px) {
  .scenery img { object-position: 70% top; }
  .scenery::after { background: linear-gradient(180deg, rgb(4 10 15 / 35%), rgb(4 10 15 / 55%) 35%, rgb(4 10 15 / 70%) 70%, var(--night)), radial-gradient(ellipse at center, rgb(4 11 17 / 40%), transparent); }
  .hero { padding-block: 32px 37px; max-width: 440px; }
  .release { font-size: 9px; letter-spacing: 2px; }
  .game-logo { width: 265px; margin-block: 19px 27px; }
  .eyebrow { font-size: 9px; letter-spacing: 2px; }
  h1 { font-size: clamp(35px, 8.9vw, 49px); line-height: 1.12; letter-spacing: -1.3px; }
  .intro { margin-top: 19px; font-size: 13px; line-height: 1.85; }
  .desktop-break { display: none; }
  .game-facts { font-size: 10px; letter-spacing: 0; }
  .game-facts li + li::before { margin-inline: 11px; }
  .coming-soon { gap: 11px; margin-block: 27px; }
  .coming-soon p { font-size: 15px; }
  .coming-soon > span { flex-basis: 30px; }
  .community h2 { font-size: 13px; }
  .community > p:not(.community-status) { font-size: 11px; }
  .community-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .social { width: auto; max-width: none; min-width: 0; min-height: 76px; gap: 8px; padding: 12px 10px; }
  .social > svg { width: 18px; height: 18px; }
  .social > span:not(.social-arrow) { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
  .social small { font-size: 8px; line-height: 1.45; letter-spacing: .25px; }
  .social-arrow { display: none; }
  .community .community-status { font-size: 9px; }
}

@media (max-width: 350px) {
  .page { padding-inline: 16px; }
  .game-facts li + li::before { margin-inline: 8px; }
  .coming-soon p { font-size: 13px; }
}

@media (max-width: 800px) {
  .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 7px; padding-block: 12px; }
  .footer-nav { grid-row: 1; }
  .site-footer > p { font-size: 9px; }
  .footer-genre { display: none; }
}

@media (min-width: 601px) and (max-height: 1000px) {
  .hero { max-width: 740px; padding-block: 20px; }
  .game-logo { width: 280px; margin-block: 12px 18px; }
  h1 { font-size: 48px; }
  .intro { margin-top: 17px; font-size: 14px; line-height: 1.7; }
  .game-facts { margin-top: 18px; }
  .coming-soon { margin-block: 23px; }
}

@media (min-width: 601px) and (max-height: 760px) {
  .hero { max-width: 680px; padding-block: 16px; }
  .release { font-size: 9px; }
  .game-logo { width: 220px; margin-block: 9px 12px; }
  .eyebrow { margin-bottom: 8px; font-size: 9px; }
  h1 { font-size: 40px; }
  .intro { margin-top: 13px; font-size: 13px; line-height: 1.7; }
  .desktop-break { display: none; }
  .game-facts { margin-top: 14px; font-size: 10px; }
  .coming-soon { margin-block: 18px; }
  .coming-soon p { font-size: 15px; }
  .community h2 { margin-bottom: 13px; font-size: 12px; }
  .community > p:not(.community-status) { display: none; }
  .social { min-height: 56px; padding-block: 10px; }
  .community .community-status { margin-top: 10px; }
}

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