:root {
  --bone: #eee7d7;
  --muted: #aaa99e;
  --night: #070a08;
  --raised: #0e140f;
  --moss: #91a879;
  --moss-light: #cbd9ad;
  --ember: #b97950;
  --line: rgba(238, 231, 215, .14);
  --line-strong: rgba(238, 231, 215, .28);
  --shell: 1240px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--night);
  color: var(--bone);
  font-family: var(--sans);
  line-height: 1.5;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  content: "";
  opacity: .14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
::selection { background: var(--moss-light); color: var(--night); }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1200; padding: 10px 14px; background: var(--bone); color: var(--night); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: linear-gradient(rgba(7,10,8,.86), transparent);
  transition: .2s ease;
}
.site-header.is-scrolled { border-color: var(--line); background: rgba(7,10,8,.9); backdrop-filter: blur(18px); }
.header-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1rem; letter-spacing: .08em; text-decoration: none; }
.brand-mark { width: 29px; height: 29px; fill: none; stroke: var(--moss-light); stroke-width: 1.15; }
.brand-core { fill: var(--moss-light); stroke: none; }
.site-nav { display: flex; gap: 34px; }
.site-nav a { position: relative; padding: 8px 0; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .19em; text-decoration: none; text-transform: uppercase; }
.site-nav a::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: var(--moss-light); content: ""; transform: scaleX(0); transition: transform .18s ease; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--bone); }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: rgba(7,10,8,.55); color: var(--bone); }
.menu-toggle span:not(.sr-only) { display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; transition: transform .18s ease; }

.hero {
  --pointer-x: 50%;
  --pointer-y: 42%;
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(145,168,121,.15), transparent 20rem), linear-gradient(#060907, #0b120d 58%, #070a08);
}
.hero::after { position: absolute; inset: 0; z-index: 8; pointer-events: none; content: ""; background: linear-gradient(transparent 60%, var(--night)); }
.hero-stars, .games-constellation { position: absolute; inset: 0; z-index: -3; }
.star { position: absolute; width: var(--size,1px); height: var(--size,1px); border-radius: 50%; background: var(--bone); opacity: var(--opacity,.4); animation: pulse var(--duration,7s) ease-in-out infinite; animation-delay: var(--delay,0s); }
.hero-glow { position: absolute; top: 7%; left: 50%; z-index: -2; width: min(76vw,900px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(203,217,173,.08), transparent 67%); transform: translateX(-50%); }
.celestial { position: absolute; top: 45%; left: 50%; z-index: -1; aspect-ratio: 1; border: 1px solid rgba(203,217,173,.18); border-radius: 50%; transform: translate(-50%,-50%); }
.celestial::before, .celestial::after { position: absolute; inset: 16%; border: inherit; border-radius: inherit; content: ""; }
.celestial::after { inset: 32%; }
.celestial-outer { width: min(80vw,920px); animation: turn 80s linear infinite; }
.celestial-inner { width: min(50vw,580px); border-style: dashed; animation: turn-back 58s linear infinite; }
.sun-disc { position: absolute; top: 45%; left: 50%; z-index: -1; width: min(32vw,365px); aspect-ratio: 1; border: 1px solid rgba(203,217,173,.55); border-radius: 50%; background: radial-gradient(circle, rgba(203,217,173,.15), rgba(145,168,121,.03) 58%, transparent 59%); box-shadow: 0 0 100px rgba(145,168,121,.1); transform: translate(-50%,-50%); }
.sun-disc::before, .sun-disc::after, .sun-disc span::before, .sun-disc span::after { position: absolute; top: 50%; left: 50%; width: 140%; height: 1px; background: linear-gradient(90deg, transparent, rgba(203,217,173,.32), transparent); content: ""; transform: translate(-50%,-50%); }
.sun-disc::after { transform: translate(-50%,-50%) rotate(90deg); }
.sun-disc span::before { transform: translate(-50%,-50%) rotate(45deg); }
.sun-disc span::after { transform: translate(-50%,-50%) rotate(-45deg); }
.world-tree { position: absolute; bottom: -7%; left: 50%; z-index: 1; width: min(64vw,720px); pointer-events: none; translate: -50% 0; transition: transform .45s ease; }
.world-tree svg { width: 100%; filter: drop-shadow(0 0 45px rgba(0,0,0,.85)); }
.tree-roots, .tree-trunk, .tree-branches { fill: #040705; stroke: rgba(203,217,173,.1); stroke-width: 1.3; }
.tree-branches path:last-child { fill: none; stroke: rgba(203,217,173,.18); stroke-width: 3; }
.tree-crown circle { fill: var(--moss-light); opacity: .32; }
.horizon { position: absolute; right: -10%; bottom: -6%; left: -10%; z-index: 2; height: 27%; border-radius: 50% 50% 0 0 / 25% 25% 0 0; background: #060907; }
.horizon-back { bottom: 4%; z-index: 0; background: #111a12; opacity: .85; transform: rotate(2deg); }
.mist { position: absolute; right: -15%; bottom: 14%; left: -15%; z-index: 3; height: 14%; opacity: .18; filter: blur(24px); background: linear-gradient(90deg, transparent, rgba(203,217,173,.3), transparent); animation: drift 20s ease-in-out infinite alternate; }
.mist-b { bottom: 8%; opacity: .1; animation-duration: 27s; }
.hero-content { position: relative; z-index: 10; padding-top: 70px; text-align: center; }
.hero-kicker, .section-mark, .minimal-heading > p { margin: 0 0 22px; color: var(--moss-light); font-size: .69rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4.4rem,11.7vw,10.5rem); font-weight: 400; line-height: .78; letter-spacing: -.07em; text-shadow: 0 10px 60px #000; }
.hero h1 em { color: var(--moss-light); font-weight: 400; }
.hero-line { margin: 38px 0 0; color: var(--muted); font-family: var(--serif); font-size: clamp(.9rem,1.4vw,1.1rem); letter-spacing: .08em; }
.enter-link { margin-top: 45px; display: inline-flex; gap: 12px; color: var(--bone); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-decoration: none; text-transform: uppercase; }
.enter-link span { color: var(--moss-light); animation: nudge 2s ease-in-out infinite; }

.realms { padding-block: clamp(110px,14vw,180px); }
.minimal-heading { display: grid; grid-template-columns: .35fr 1fr; align-items: end; gap: 50px; margin-bottom: 66px; }
.minimal-heading > p { margin-bottom: 8px; }
.minimal-heading h2, .roots-inner h2, .games-gate h2, .games-hero h1, .error-main h1 { margin: 0; font-family: var(--serif); font-size: clamp(3rem,6vw,6rem); font-weight: 400; line-height: .95; letter-spacing: -.055em; }
.realm-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.realm-card { position: relative; min-height: 420px; padding: 28px; display: flex; flex-direction: column; grid-column: span 6; overflow: hidden; background: var(--night); color: inherit; text-decoration: none; transition: background .3s ease; }
.realm-card:nth-child(1), .realm-card:nth-child(4), .realm-card:nth-child(5) { grid-column: span 5; }
.realm-card:nth-child(2), .realm-card:nth-child(3), .realm-card:nth-child(6) { grid-column: span 7; }
.realm-card:hover { background: var(--raised); }
.realm-meta { position: relative; z-index: 2; display: flex; justify-content: space-between; color: var(--muted); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.realm-meta > span { color: var(--ember); font-family: var(--serif); font-size: .9rem; }
.realm-card h3 { position: relative; z-index: 2; margin: auto 0 0; font-family: var(--serif); font-size: clamp(2rem,3.4vw,3.6rem); font-weight: 400; letter-spacing: -.04em; }
.realm-art { position: absolute; inset: 0; opacity: .72; transition: transform .7s ease, opacity .3s ease; background: radial-gradient(circle at 68% 42%, rgba(145,168,121,.18), transparent 32%); }
.realm-card:hover .realm-art { opacity: 1; transform: scale(1.04); }
.realm-art::before { position: absolute; top: 48%; left: 66%; width: min(42%,200px); aspect-ratio: 1; border: 1px solid rgba(203,217,173,.3); content: ""; transform: translate(-50%,-50%) rotate(45deg); }
.realm-art::after { position: absolute; top: 48%; left: 66%; width: min(22%,100px); aspect-ratio: 1; border: 1px solid rgba(203,217,173,.42); border-radius: 50%; content: ""; transform: translate(-50%,-50%); }
.realm-seasons .realm-art { background: radial-gradient(circle at 64% 44%, rgba(185,121,80,.2), transparent 34%); }
.realm-myths .realm-art::before { border-radius: 50%; transform: translate(-50%,-50%); box-shadow: inset 30px 0 var(--night); }
.realm-history .realm-art { background: repeating-linear-gradient(0deg, transparent 0 52px, rgba(238,231,215,.04) 53px), radial-gradient(circle at 68% 42%, rgba(185,121,80,.14), transparent 34%); }
.realm-traditions .realm-art::before { border-radius: 50% 50% 12% 12%; transform: translate(-50%,-50%); }
.realm-games .realm-art::before { width: min(46%,220px); aspect-ratio: 1.6; border-radius: 60px; transform: translate(-50%,-50%); }
.realm-games .realm-art::after { width: 46px; box-shadow: 74px 0 0 -21px var(--moss-light); }

.roots-section { position: relative; min-height: 700px; display: grid; place-items: center; overflow: hidden; border-block: 1px solid var(--line); background: radial-gradient(circle, rgba(145,168,121,.13), transparent 28rem), var(--raised); }
.roots-pattern { position: absolute; inset: -25%; opacity: .35; background: repeating-radial-gradient(circle, transparent 0 54px, rgba(203,217,173,.09) 55px 56px), conic-gradient(from 45deg, transparent 0 12.2%, rgba(185,121,80,.12) 12.5% 12.8%, transparent 13% 25%); animation: flat-turn 110s linear infinite; }
.roots-inner { position: relative; z-index: 2; max-width: 880px; text-align: center; }
.roots-inner p:last-child { margin: 28px 0 0; color: var(--muted); font-family: var(--serif); font-size: 1.08rem; }
.games-gate { min-height: 470px; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.games-gate h2 { font-size: clamp(5rem,12vw,11rem); }
.circle-link { position: relative; width: 155px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; text-decoration: none; transition: .25s ease; }
.circle-link span { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.circle-link b { position: absolute; right: 28px; bottom: 28px; color: var(--moss-light); font-weight: 400; }
.circle-link:hover { border-color: var(--moss-light); background: rgba(145,168,121,.08); transform: rotate(7deg) scale(1.04); }

.site-footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-small { font-size: .9rem; }
.brand-small .brand-mark { width: 24px; height: 24px; }
.footer-inner p { margin: 0; color: var(--muted); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }

.games-hero { position: relative; min-height: 76svh; display: grid; place-items: end start; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 70% 42%, rgba(145,168,121,.15), transparent 25rem), linear-gradient(#060907,#0b100c); }
.games-hero::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(transparent 45%,var(--night)); }
.games-hero-inner { position: relative; z-index: 3; padding-block: 170px 95px; }
.games-hero h1 { font-size: clamp(6rem,18vw,16rem); line-height: .7; }
.games-hero-inner > p:last-child { margin: 42px 0 0; color: var(--muted); font-family: var(--serif); font-size: 1.08rem; }
.games-rune { position: absolute; top: 48%; right: 9%; width: min(36vw,460px); aspect-ratio: 1; border: 1px solid rgba(203,217,173,.28); border-radius: 50%; transform: translateY(-50%); animation: rune-turn 76s linear infinite; }
.games-rune::before, .games-rune::after, .games-rune span::before, .games-rune span::after { position: absolute; top: 50%; left: 50%; width: 136%; height: 1px; background: linear-gradient(90deg, transparent, rgba(203,217,173,.3), transparent); content: ""; transform: translate(-50%,-50%); }
.games-rune::after { transform: translate(-50%,-50%) rotate(90deg); }
.games-rune span::before { transform: translate(-50%,-50%) rotate(45deg); }
.games-rune span::after { transform: translate(-50%,-50%) rotate(-45deg); }
.games-rune span { position: absolute; inset: 28%; border: 1px solid rgba(203,217,173,.36); transform: rotate(45deg); }
.game-library { padding-block: clamp(100px,13vw,170px); }
.library-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 65px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.library-head .section-mark { margin: 0; }
.release-count { display: flex; align-items: baseline; gap: 12px; }
.release-count strong { color: var(--moss-light); font-family: var(--serif); font-size: 4rem; font-weight: 400; line-height: 1; }
.release-count span { color: var(--muted); font-size: .66rem; letter-spacing: .17em; text-transform: uppercase; }
.game-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.game-card, .game-slot { min-height: 530px; background: var(--night); }
.game-card { display: grid; grid-template-rows: 1fr auto; }
.game-cover { position: relative; overflow: hidden; background: radial-gradient(circle, rgba(145,168,121,.18), transparent 34%), repeating-linear-gradient(45deg, transparent 0 55px, rgba(238,231,215,.04) 56px 57px); }
.cover-orbit { position: absolute; top: 50%; left: 50%; width: min(56%,260px); aspect-ratio: 1; border: 1px solid rgba(203,217,173,.3); border-radius: 50%; transform: translate(-50%,-50%); }
.cover-orbit::before, .cover-orbit::after { position: absolute; inset: 20%; border: inherit; border-radius: 50%; content: ""; }
.cover-orbit::after { inset: 38%; }
.cover-mark { position: absolute; top: 50%; left: 50%; width: 94px; height: 94px; border: 1px solid var(--moss-light); transform: translate(-50%,-50%) rotate(45deg); }
.cover-mark span { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--moss-light); box-shadow: 0 0 24px rgba(203,217,173,.7); transform: translate(-50%,-50%); }
.game-info { padding: 28px; border-top: 1px solid var(--line); }
.game-info > span, .game-info > p { color: var(--muted); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; }
.game-info h2 { margin: 9px 0 18px; font-family: var(--serif); font-size: 2.6rem; font-weight: 400; }
.game-info p { margin: 0; color: var(--moss-light); }
.game-slot { display: grid; place-items: center; color: rgba(238,231,215,.14); font-family: var(--serif); font-size: 4rem; }
.return-gate { padding-bottom: 105px; }
.return-gate a { color: var(--muted); font-size: .7rem; letter-spacing: .16em; text-underline-offset: 7px; text-transform: uppercase; }

.error-page { min-height: 100svh; display: grid; place-items: center; }
.error-main { width: min(calc(100% - 40px),700px); text-align: center; }
.error-main > p { color: var(--ember); letter-spacing: .25em; }
.error-main h1 { margin-top: 18px; }
.error-main a { margin-top: 38px; display: inline-block; color: var(--moss-light); font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; }
.error-symbol { position: relative; width: 120px; aspect-ratio: 1; margin: 0 auto 40px; border: 1px solid var(--line-strong); border-radius: 50%; }
.error-symbol::before, .error-symbol::after { position: absolute; top: 50%; left: 50%; width: 140%; height: 1px; background: var(--line-strong); content: ""; transform: translate(-50%,-50%) rotate(45deg); }
.error-symbol::after { transform: translate(-50%,-50%) rotate(-45deg); }
.error-symbol span { position: absolute; inset: 34%; border: 1px solid var(--moss-light); transform: rotate(45deg); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes pulse { 0%,100% { opacity: calc(var(--opacity,.4)*.35); transform: scale(.8); } 50% { opacity: var(--opacity,.4); transform: scale(1.15); } }
@keyframes turn { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes turn-back { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes flat-turn { to { transform: rotate(360deg); } }
@keyframes rune-turn { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes drift { to { transform: translateX(7%); } }
@keyframes nudge { 50% { transform: translateY(5px); } }

@media (max-width: 900px) {
  .realm-card, .realm-card:nth-child(n) { grid-column: span 6; }
  .world-tree { width: min(88vw,700px); }
  .sun-disc { width: min(44vw,350px); }
  .celestial-outer { width: min(96vw,850px); }
  .celestial-inner { width: min(64vw,560px); }
  .game-grid { grid-template-columns: 1fr 1fr; }
  .game-card { grid-column: span 2; }
}

@media (max-width: 680px) {
  .shell { width: min(calc(100% - 28px),var(--shell)); }
  .header-inner { min-height: 70px; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: 70px; right: 14px; left: 14px; padding: 16px 20px; display: grid; gap: 0; border: 1px solid var(--line); background: rgba(7,10,8,.97); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: .18s ease; }
  .site-nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .site-nav a { padding: 15px 3px; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border: 0; }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):first-of-type { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):last-of-type { transform: translateY(-3px) rotate(-45deg); }
  .hero h1 { font-size: clamp(4rem,20vw,6.4rem); line-height: .82; }
  .hero-line { max-width: 300px; margin-inline: auto; line-height: 1.8; }
  .world-tree { bottom: -1%; width: min(130vw,680px); }
  .sun-disc, .celestial { top: 43%; }
  .sun-disc { width: min(62vw,310px); }
  .celestial-outer { width: 130vw; }
  .celestial-inner { width: 84vw; }
  .minimal-heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 45px; }
  .realm-grid { grid-template-columns: 1fr; }
  .realm-card, .realm-card:nth-child(n) { min-height: 340px; grid-column: 1 / -1; }
  .roots-section { min-height: 610px; }
  .games-gate { min-height: 420px; align-items: flex-start; flex-direction: column; justify-content: center; }
  .games-gate h2 { font-size: clamp(5rem,24vw,8rem); }
  .circle-link { width: 125px; }
  .games-hero { min-height: 66svh; }
  .games-hero-inner { padding-block: 150px 72px; }
  .games-hero h1 { font-size: clamp(6rem,30vw,10rem); }
  .games-rune { right: -18%; width: 72vw; opacity: .65; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card, .game-slot { grid-column: auto; min-height: 420px; }
  .game-slot { min-height: 220px; }
  .library-head { align-items: flex-start; flex-direction: column; }
}

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