:root {
  --black: #050706;
  --deep: #09100b;
  --forest: #101a12;
  --forest-2: #172319;
  --gold: #c7a45c;
  --gold-light: #ead49b;
  --cream: #f0e5c8;
  --muted: #afa58d;
  --line: rgba(201, 170, 103, .24);
  --paper: #cfb77f;
  --paper-light: #dfca95;
  --paper-ink: #3a2a18;
  --display: Georgia, "Times New Roman", serif;
  --ui: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #000; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--cream);
  background: #000;
  font-family: var(--ui);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 0%, rgba(105, 90, 51, .12), transparent 34%),
    linear-gradient(90deg, #000 0 15%, #050706 33% 67%, #000 85% 100%);
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

.site-frame {
  width: min(1120px, calc(100% - 48px));
  margin: 26px auto 54px;
  background: #0b110d;
  border: 1px solid #3f3524;
  box-shadow:
    0 0 0 5px #090b09,
    0 0 0 6px #282319,
    0 24px 90px rgba(0,0,0,.8);
  position: relative;
}
.site-frame::before,
.site-frame::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 12px;
  z-index: 10;
  opacity: .72;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, #302b20 0 17px, #141914 17px 32px, #463a25 32px 38px);
  box-shadow: inset 0 0 4px #000;
}
.site-frame::before { left: -18px; }
.site-frame::after { right: -18px; }

.topbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(#131a14, #0a0f0b);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border: 1px solid #8c713e;
  background: #0b100c;
  box-shadow: inset 0 0 0 3px rgba(199,164,92,.05);
}
.brand-mark span {
  transform: rotate(-45deg);
  font: 700 11px var(--display);
  color: var(--gold-light);
}
.brand-name { display: flex; flex-direction: column; text-transform: uppercase; line-height: 1; }
.brand-name strong { font: 600 15px var(--display); letter-spacing: .12em; color: #eee2c3; }
.brand-name small { margin-top: 6px; color: var(--gold); font-size: 8px; letter-spacing: .22em; font-weight: 700; }

.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a {
  padding: 11px 13px;
  color: #b9ae94;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}
.main-nav a:hover { color: #fff0ca; }
.main-nav .nav-play {
  margin-left: 8px;
  border: 1px solid #6f5831;
  color: #e5ca89;
  background: linear-gradient(#191a13, #11140f);
}
.menu-button { display: none; }

.hero {
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #4c402b;
  isolation: isolate;
}
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 31%, rgba(202,170,94,.12), transparent 18%),
    linear-gradient(180deg, #17251a 0%, #0f1b13 48%, #09110d 100%);
}
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  background: linear-gradient(90deg, rgba(5,9,6,.18) 0%, rgba(5,9,6,.2) 42%, rgba(5,9,6,.7) 76%, rgba(5,9,6,.92) 100%);
}
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  opacity: .23;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
}
.sun {
  position: absolute;
  width: 195px;
  height: 195px;
  right: 13%;
  top: 11%;
  border-radius: 50%;
  background: #cdb170;
  opacity: .7;
  filter: blur(2px);
  box-shadow: 0 0 50px rgba(203,168,90,.22);
}
.mountain { position: absolute; left: -4%; right: -4%; bottom: 0; }
.mountain-far {
  height: 51%;
  opacity: .55;
  background: #425444;
  clip-path: polygon(0 57%, 9% 40%, 18% 53%, 31% 20%, 42% 53%, 54% 32%, 64% 50%, 78% 17%, 88% 44%, 100% 29%, 100% 100%, 0 100%);
}
.mountain-mid {
  height: 39%;
  opacity: .72;
  background: #26372b;
  clip-path: polygon(0 52%, 12% 27%, 24% 63%, 38% 34%, 52% 70%, 65% 32%, 79% 58%, 91% 28%, 100% 49%, 100% 100%, 0 100%);
}
.mountain-near {
  height: 24%;
  background: #101b14;
  clip-path: polygon(0 54%, 14% 25%, 29% 55%, 42% 20%, 57% 67%, 72% 31%, 85% 56%, 100% 30%, 100% 100%, 0 100%);
}
.watchtower { position: absolute; z-index: 4; width: 28px; height: 82px; bottom: 18%; background: #111b14; }
.watchtower::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -13px;
  width: 40px;
  height: 18px;
  background: #111b14;
  clip-path: polygon(0 100%, 12% 20%, 29% 100%, 49% 10%, 69% 100%, 86% 17%, 100% 100%);
}
.tower-left { left: 9%; opacity: .82; transform: scale(.82); }
.tower-right { right: 10%; opacity: .48; transform: scale(.68); }
.road {
  position: absolute;
  width: 370px;
  height: 510px;
  left: 53%;
  bottom: -350px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(183,156,101,.14);
  clip-path: polygon(46% 0, 55% 0, 82% 100%, 14% 100%);
}
.mist { position: absolute; z-index: 5; height: 80px; width: 55%; border-radius: 50%; filter: blur(22px); background: rgba(143,160,139,.1); }
.mist-one { left: -4%; bottom: 18%; }
.mist-two { right: -10%; bottom: 9%; opacity: .65; }

.hero-copy {
  position: relative;
  z-index: 12;
  width: min(640px, 68%);
  padding: 60px 58px 66px;
}
.overline,
.section-kicker,
.card-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 9px;
  font-weight: 700;
  color: var(--gold);
}
.overline::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  margin: 0 10px 3px 0;
  background: var(--gold);
}
.hero h1 {
  margin: 14px 0 18px;
  font: 500 clamp(50px, 6vw, 72px)/.96 var(--display);
  letter-spacing: -.035em;
  color: #f1e6ca;
  text-shadow: 0 3px 16px rgba(0,0,0,.4);
}
.hero h1 em { color: #d8bd7b; font-weight: 500; }
.hero-text {
  max-width: 580px;
  margin: 0 0 26px;
  color: #cfc5ae;
  font: 500 18px/1.65 var(--display);
}
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.button {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 21px;
  border: 1px solid #d4b56c;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 800;
  transition: transform .16s ease, filter .16s ease;
}
.button-gold {
  color: #1b160e;
  background: linear-gradient(#d0b16c, #aa8849);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 3px 12px rgba(0,0,0,.22);
}
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.text-link {
  color: #d8c9a4;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 9px;
  font-weight: 700;
}
.text-link:hover { color: #fff0c7; }

.portal-strip {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: #060907;
  border-bottom: 1px solid #3a3223;
}
.portal {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border: 1px solid #4b402b;
  background: linear-gradient(#181d16, #10140f);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.24);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.portal:hover { transform: translateY(-1px); border-color: #8e713d; background: linear-gradient(#20261c, #151a13); }
.portal-primary { border-color: #806534; background: linear-gradient(#28251a, #161810); }
.portal-icon { width: 30px; flex: 0 0 30px; color: #c9a75e; font: 600 20px var(--display); text-align: center; }
.portal span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.portal strong { color: #eadfc4; font: 600 15px var(--display); }
.portal small { margin-top: 5px; color: #7f796b; font-size: 9px; }

.parchment-wrap { padding: 32px; background: #0e140f; }
.parchment {
  position: relative;
  max-width: 950px;
  margin: 0 auto;
  padding: 46px 68px 48px;
  text-align: center;
  color: var(--paper-ink);
  border: 1px solid #7d6437;
  background:
    linear-gradient(90deg, rgba(72,43,17,.1), transparent 8%, transparent 92%, rgba(72,43,17,.1)),
    repeating-linear-gradient(0deg, rgba(70,44,16,.028) 0 1px, transparent 1px 4px),
    var(--paper);
  box-shadow: inset 0 0 36px rgba(84,52,21,.22), 0 8px 22px rgba(0,0,0,.28);
}
.parchment::before,
.parchment::after {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  height: 13px;
  border: 1px solid #6e552e;
  background: linear-gradient(#c4aa71, #ad915d);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.parchment::before { top: -8px; border-radius: 55% 55% 0 0; }
.parchment::after { bottom: -8px; border-radius: 0 0 55% 55%; }
.parchment-flourish { color: #6d4b23; margin-bottom: 5px; }
.parchment .section-kicker { color: #765323; }
.parchment h2 {
  margin: 10px auto 17px;
  max-width: 760px;
  color: #5b3616;
  font: 600 clamp(32px, 4.2vw, 48px)/1.05 var(--display);
}
.parchment p { max-width: 830px; margin: 0 auto; }
.parchment .intro { font: 600 18px/1.55 var(--display); }
.parchment .supporting { margin-top: 12px; font: 500 15px/1.55 var(--display); color: #59432c; }

.world {
  padding: 44px 36px 38px;
  border-top: 1px solid rgba(201,170,103,.12);
  background:
    radial-gradient(circle at 50% 0, rgba(136,107,56,.08), transparent 35%),
    #0b110d;
}
.world-heading { max-width: 780px; margin: 0 auto 25px; text-align: center; }
.world-heading h2 {
  margin: 8px 0 0;
  color: #eadfc3;
  font: 600 clamp(30px, 4vw, 42px)/1.08 var(--display);
}
.world-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 980px; margin: 0 auto; }
.world-card {
  overflow: hidden;
  border: 1px solid #4d402a;
  background: #111710;
  box-shadow: 0 7px 22px rgba(0,0,0,.25);
}
.card-art { height: 205px; position: relative; overflow: hidden; border-bottom: 1px solid #4a3d28; }
.card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 48%, rgba(5,8,6,.7)); }
.art-hearth { background: linear-gradient(#53634f 0 54%, #2b3b29 54% 100%); }
.house {
  position: absolute; z-index: 2; left: 31%; bottom: 28px; width: 155px; height: 86px; background: #80694b; border: 2px solid rgba(35,27,19,.5);
}
.house::before { content: ""; position: absolute; left: -17px; right: -17px; top: -49px; height: 53px; background: #493d2d; clip-path: polygon(0 100%, 20% 10%, 80% 10%, 100% 100%); }
.house::after { content: ""; position: absolute; left: 62px; bottom: 0; width: 30px; height: 49px; background: #3c3024; }
.field { position: absolute; bottom: 0; height: 45px; background: repeating-linear-gradient(100deg, #3d4c30 0 7px, #52603a 7px 12px); transform: skewX(-12deg); }
.field-one { left: 0; width: 36%; }.field-two { right: 0; width: 33%; }
.smoke { position: absolute; z-index: 3; border-radius: 50%; background: rgba(196,198,173,.2); filter: blur(4px); }
.smoke-one { width: 36px; height: 36px; left: 55%; top: 33px; }.smoke-two { width: 48px; height: 40px; left: 59%; top: 8px; opacity: .6; }
.art-wild { background: linear-gradient(#17231d, #0c1310); }
.moon { position: absolute; width: 95px; height: 95px; border-radius: 50%; right: 12%; top: 20px; background: #aaa47d; opacity: .62; box-shadow: 0 0 32px rgba(194,187,136,.17); }
.ruin { position: absolute; z-index: 2; left: 38%; bottom: 20px; width: 112px; height: 128px; background: #253028; clip-path: polygon(0 20%, 13% 18%, 13% 5%, 27% 15%, 41% 7%, 55% 24%, 72% 9%, 85% 18%, 100% 16%, 100% 100%, 0 100%); }
.pine { position: absolute; z-index: 2; bottom: 15px; width: 48px; height: 110px; background: #121d16; clip-path: polygon(50% 0, 68% 28%, 58% 28%, 78% 56%, 64% 56%, 86% 86%, 57% 86%, 57% 100%, 43% 100%, 43% 86%, 14% 86%, 36% 56%, 22% 56%, 42% 28%, 32% 28%); }
.pine-one { left: 10%; transform: scale(.8); }.pine-two { left: 20%; }.pine-three { right: 5%; transform: scale(.72); opacity: .78; }
.card-copy { padding: 25px 27px 29px; }
.card-copy h3 { margin: 8px 0 9px; color: #ebdfc2; font: 600 27px/1.08 var(--display); }
.card-copy p { margin: 0; color: #a79e8a; font: 500 15px/1.6 var(--display); }

.play-banner {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 46px;
  border-top: 1px solid #3d3424;
  border-bottom: 1px solid #3d3424;
  background:
    radial-gradient(circle at 72% 50%, rgba(169,133,64,.14), transparent 29%),
    linear-gradient(90deg, #161c14, #11160f);
}
.play-banner h2 { margin: 5px 0 0; color: #eee2c4; font: 600 34px/1 var(--display); }
.footer {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  background: #060906;
  color: #67665c;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 8px;
}
.footer a { color: #998767; }
.footer-copy { white-space: nowrap; }
.footer-links { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.footer-links span { color: #46463f; }
.footer-links a:hover, .footer-links a:focus-visible { color: #cfb678; }

.legal-main {
  min-height: 660px;
  padding: 72px 46px 80px;
  background:
    radial-gradient(circle at 78% 8%, rgba(160,128,61,.10), transparent 30%),
    linear-gradient(180deg, #101710, #0b110c);
}
.legal-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: 42px 44px 46px;
  border: 1px solid #4d402a;
  background: #131a12;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
.legal-panel h1 {
  margin: 7px 0 20px;
  color: #eee2c4;
  font: 600 clamp(38px, 6vw, 56px)/1 var(--display);
}
.legal-panel p {
  margin: 0 0 15px;
  color: #b8ad94;
  font: 500 16px/1.7 var(--display);
}
.legal-panel .button { margin-top: 16px; }

@media (max-width: 820px) {
  .site-frame { width: 100%; margin: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .site-frame::before, .site-frame::after { display: none; }
  .topbar { padding: 14px 18px; }
  .brand-name strong { font-size: 13px; }
  .menu-button {
    display: block;
    border: 1px solid #68542f;
    padding: 9px 12px;
    background: #11160f;
    color: #cfb678;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 8px;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 75px;
    left: 10px;
    right: 10px;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border: 1px solid #59482d;
    background: #0a0f0b;
    box-shadow: 0 12px 25px rgba(0,0,0,.5);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { text-align: center; }
  .main-nav .nav-play { margin: 0; }
  .hero { min-height: 565px; align-items: flex-end; }
  .scene::before { background: linear-gradient(180deg, rgba(5,9,6,.2), rgba(5,9,6,.52) 48%, rgba(5,9,6,.92) 100%); }
  .sun { width: 150px; height: 150px; right: 10%; }
  .hero-copy { width: 100%; padding: 52px 24px 42px; }
  .hero h1 { font-size: clamp(46px, 13vw, 66px); }
  .hero-text { font-size: 17px; }
  .portal-strip { grid-template-columns: 1fr; }
  .portal { min-height: 68px; }
  .parchment-wrap { padding: 25px 14px; }
  .parchment { padding: 39px 24px 41px; }
  .world { padding: 37px 14px 28px; }
  .world-grid { grid-template-columns: 1fr; }
  .card-art { height: 190px; }
  .play-banner { padding: 28px 24px; align-items: flex-start; flex-direction: column; }
  .play-banner .button { width: 100%; }
  .footer { flex-direction: column; text-align: center; }
}

@media (max-width: 460px) {
  .brand-mark { width: 40px; height: 40px; }
  .brand-name strong { font-size: 11px; }
  .hero h1 { font-size: 45px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .button { width: 100%; }
  .portal strong { font-size: 14px; }
  .parchment h2 { font-size: 31px; }
}