:root {
  color-scheme: dark;
  --gold: #f2c77e;
  --gold-bright: #ffe9b3;
  --navy: #071427;
  --cyan: #63ceff;
}

* { box-sizing: border-box; }
html { background: #030916; }
body { margin: 0; min-width: 320px; min-height: 100vh; font-family: Georgia, 'Times New Roman', serif; background: #030916; color: #f7ecd5; }
button, a { font: inherit; }
button { color: inherit; }

.site-shell { min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, #193451 0, #071224 45%, #020611 100%); }
.world-stage { position: relative; width: min(100vw, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; container-type: inline-size; }
.world-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.world-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 47%, transparent 43%, rgba(3,9,20,.08) 70%, rgba(1,5,12,.35) 100%), linear-gradient(180deg, rgba(2,7,18,.14), transparent 24%, transparent 80%, rgba(2,7,18,.2)); }

.site-brand { position: absolute; z-index: 20; left: 50%; top: 1.6%; width: 31%; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 .35vw .45vw rgba(0,0,0,.38)); }
.site-brand img { display: block; width: 100%; }
.tagline { position: absolute; z-index: 20; top: 13.2%; right: 2.8%; margin: 0; color: #efe9dd; font-style: italic; font-size: 1.22cqw; line-height: 1.12; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.7); transform: rotate(2deg); }

.top-nav { position: absolute; z-index: 40; top: .9%; right: 1.0%; width: 29.5%; aspect-ratio: 3 / 1; }
.top-nav-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.top-nav-item { position: absolute; top: 46.8%; height: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: .5em; border: 0; background: transparent; color: #f4ead7; cursor: default; font-size: 1.12cqw; line-height: 1; text-shadow: 0 1px 5px #000; }
.top-nav-item svg { width: 1.18em; height: 1.18em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.top-search { left: 3%; width: 29.2%; }
.top-signin { left: 32.2%; width: 28.6%; }
.top-join { left: 62.3%; width: 35.2%; color: #fff0c8; }
.top-join svg { fill: currentColor; stroke: none; }

.site-menu { position: absolute; z-index: 50; left: .65%; top: 2.25%; width: 13.7%; }
.menu-toggle { position: relative; z-index: 3; display: block; width: 100%; aspect-ratio: 2.5 / 1; border: 0; padding: 0; background: transparent; cursor: pointer; color: #f4ead7; text-shadow: 0 1px 5px #000; }
.menu-toggle > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.menu-toggle > span:last-child { position: absolute; left: 55%; top: 49%; transform: translate(-50%, -50%); font-size: 1.12cqw; line-height: 1; }
.hamburger { display: none; }
.hamburger i { display: block; height: 1px; min-height: 1px; background: #f7db9f; box-shadow: 0 0 5px rgba(255,208,109,.65); transition: transform .18s ease, opacity .18s ease; }
.site-menu[data-menu-open="true"] .hamburger i:nth-child(1) { transform: translateY(.34em) rotate(45deg); }
.site-menu[data-menu-open="true"] .hamburger i:nth-child(2) { opacity: 0; }
.site-menu[data-menu-open="true"] .hamburger i:nth-child(3) { transform: translateY(-.34em) rotate(-45deg); }

.menu-panel { position: absolute; left: 3.2%; top: 54%; width: 94%; aspect-ratio: 793 / 1983; height: auto; transform-origin: top; opacity: 0; transform: translateY(-1.3%) scaleY(.96); pointer-events: none; transition: opacity .18s ease, transform .2s ease; }
.site-menu[data-menu-open="true"] .menu-panel { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; }
.menu-panel-art { position: absolute; inset: -2% -2% -4%; width: 104%; height: 106%; object-fit: fill; pointer-events: none; }
.menu-items { position: absolute; inset: 0; }
.menu-item { position: absolute; left: 11.5%; right: 11%; height: 7.4%; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-start; gap: .72em; border: 0; border-radius: .3em; background: transparent; color: #f1eadf; text-decoration: none; cursor: pointer; padding: 0 .72em; font-size: 1.08cqw; line-height: 1; text-shadow: 0 1px 5px #000; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.menu-item svg { flex: 0 0 1.45em; width: 1.45em; height: 1.45em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-item > span:not(.soon-tip) { position: absolute; left: 53%; transform: translateX(-50%); white-space: nowrap; }

.menu-item:nth-child(1) { top: 21.7%; }
.menu-item:nth-child(2) { top: 28.6%; }
.menu-item:nth-child(3) { top: 37.2%; }
.menu-item:nth-child(4) { top: 45.8%; }
.menu-item:nth-child(5) { top: 54.3%; }
.menu-item:hover, .menu-item:focus-visible { background: rgba(19,82,127,.55); color: #fff; outline: none; box-shadow: inset 0 0 0 1px rgba(93,211,255,.6), 0 0 12px rgba(77,191,255,.18); }
.menu-item.active { color: #ffe7a6; background: rgba(15,68,108,.32); box-shadow: inset 0 0 0 1px rgba(63,199,255,.32); }

.portal-field { position: absolute; inset: 0; z-index: 10; transform: translateX(-.8cqw); }
.portal-card { position: absolute; width: var(--size); aspect-ratio: 1; transform: translate(-50%, -50%); }
.portal-link { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; border-radius: 50%; transform-origin: center; transition: transform .2s ease, filter .2s ease; }
.portal-card[data-live] .portal-link { cursor: pointer; }
.portal-card[data-live] .portal-link:hover, .portal-card[data-live] .portal-link:focus-visible { transform: translateY(-.5%) scale(1.022); filter: drop-shadow(0 0 1.2vw rgba(125,208,255,.55)); outline: none; }
.portal-card[data-coming-soon] .portal-link { cursor: default; }
.portal-picture { position: absolute; left: 50%; top: 46%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.game-art { position: absolute; left: 50%; top: 50%; width: 73%; height: 73%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 2vw rgba(0,0,0,.5); }
.portal-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .35vw .45vw rgba(0,0,0,.42)); }
.game-title { position: absolute; z-index: 3; left: 50%; top: 69%; width: 74%; height: 19%; transform: translateX(-50%); object-fit: contain; pointer-events: none; filter: drop-shadow(0 .18vw .24vw rgba(0,0,0,.7)); }
.portal-button { position: absolute; z-index: 4; left: 50%; top: 85%; width: 54%; height: 10.5%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: .38em; color: #fff0cd; font-size: clamp(7px, .76vw, 14px); letter-spacing: .055em; text-transform: uppercase; text-shadow: 0 1px 5px #000; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
.portal-button-primary { background-image: url('assets/button-primary.webp'); }
.portal-button-secondary { background-image: url('assets/button-secondary.webp'); color: #eee6d8; }
.portal-card[data-live] .portal-button { transition: filter .16s ease, transform .16s ease; }
.portal-card[data-live] .portal-link:hover .portal-button { filter: brightness(1.16) drop-shadow(0 0 .45vw rgba(255,210,117,.52)); transform: translateX(-50%) scale(1.025); }

.portal-ad { --size: 34%; left: 50.8%; top: 56.1%; z-index: 15; }
.portal-dew { --size: 19.8%; left: 28.7%; top: 32.6%; z-index: 12; }
.portal-many { --size: 20.4%; left: 73.5%; top: 34.2%; z-index: 12; }
.portal-salvage { --size: 17.4%; left: 30.0%; top: 68.2%; z-index: 13; }
.portal-future { --size: 18.4%; left: 72.1%; top: 67.5%; z-index: 11; }

.portal-ad .game-art { width: 72%; height: 72%; }
.portal-ad .game-title { top: 68.7%; width: 71%; }
.portal-ad .portal-button { top: 85.5%; width: 50%; }
.portal-dew .game-title { top: 67%; width: 92%; height: 22%; }
.portal-dew .portal-button { top: 85%; width: 61%; }
.portal-many .game-title { top: 69%; width: 92%; height: 21%; }
.portal-many .portal-button { top: 86%; width: 61%; }
.portal-salvage .game-title { top: 69%; width: 94%; height: 22%; }
.portal-salvage .portal-button { top: 86%; width: 68%; }
.portal-future .game-art { filter: grayscale(1) brightness(.7) contrast(.9); }
.portal-future .portal-frame { filter: grayscale(.3) brightness(.82) drop-shadow(0 .35vw .45vw rgba(0,0,0,.42)); }
.portal-future .future-title { position: absolute; z-index: 3; left: 50%; top: 63%; width: 65%; transform: translateX(-50%); color: rgba(235,230,220,.78); font-size: clamp(8px, 1.05vw, 19px); line-height: 1.12; letter-spacing: .04em; text-align: center; text-transform: uppercase; text-shadow: 0 2px 8px #000; }
.portal-future .portal-button { top: 86%; width: 65%; }

.soon-tip { position: absolute; z-index: 99; left: 50%; top: calc(100% + .42rem); transform: translate(-50%, -4px); opacity: 0; pointer-events: none; padding: .36em .7em; border: 1px solid rgba(232,189,96,.72); border-radius: 999px; color: #f5e7c4; background: rgba(3,10,21,.96); font-size: clamp(8px, .68vw, 12px); letter-spacing: .04em; white-space: nowrap; box-shadow: 0 5px 18px rgba(0,0,0,.45); transition: opacity .13s ease, transform .13s ease; }
.coming-control:hover > .soon-tip, .coming-control:focus-visible > .soon-tip { opacity: 1; transform: translate(-50%, 0); }
.menu-item > .soon-tip, .top-nav-item > .soon-tip {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 68%;
  text-align: center;
}
.menu-item.coming-control:hover > .soon-tip,
.menu-item.coming-control:focus-visible > .soon-tip,
.top-nav-item.coming-control:hover > .soon-tip,
.top-nav-item.coming-control:focus-visible > .soon-tip {
  transform: translate(-50%, -50%);
}
.portal-tip { top: 89%; }

.portal-field.is-focused .portal-card { filter: brightness(.78) saturate(.8); transition: filter .18s ease; }
.portal-field.is-focused .portal-card[data-live] { filter: brightness(1.07) saturate(1.05) drop-shadow(0 0 .8vw rgba(103,203,255,.32)); }

.stone-note { position: absolute; z-index: 8; right: 1.5%; bottom: 1.1%; width: 10.2%; aspect-ratio: .75 / 1; opacity: .76; pointer-events: none; }
.stone-note img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stone-note span { position: absolute; left: 18%; right: 15%; top: 41%; color: rgba(28,29,31,.84); font-size: clamp(7px, .66vw, 12px); line-height: 1.35; text-align: center; text-transform: uppercase; letter-spacing: .04em; transform: rotate(-1deg); }

@media (max-width: 980px), (max-aspect-ratio: 4/3) {
  .site-shell { overflow: auto; align-items: start; }
  .world-stage { width: 100%; min-height: 100svh; aspect-ratio: auto; overflow: visible; padding: 1rem 1rem 3rem; background: #071224; }
  .world-background { position: fixed; inset: 0; height: 100svh; object-fit: cover; opacity: .48; filter: blur(1px) saturate(.82); }
  .world-vignette { position: fixed; background: linear-gradient(rgba(3,9,20,.25), rgba(3,9,20,.76)); }
  .site-brand { position: relative; left: auto; top: auto; width: min(420px, 68vw); margin: .4rem auto 0; transform: none; }
  .tagline { position: relative; top: auto; right: auto; width: max-content; margin: -.4rem auto 1rem; font-size: 14px; }
  .top-nav { position: relative; top: auto; right: auto; width: min(440px, 92vw); margin: -.3rem auto .2rem; }
  .site-menu { position: relative; left: auto; top: auto; width: min(340px, 86vw); margin: 0 auto 1rem; }
  .menu-toggle { aspect-ratio: 2.5 / 1; max-height: 76px; }
  .menu-toggle > span:last-child { font-size: 17px; }
  .menu-panel { position: relative; top: auto; left: 3%; width: 94%; aspect-ratio: auto; height: 360px; margin-top: -10px; display: none; }
  .site-menu[data-menu-open="true"] .menu-panel { display: block; }
  .menu-item { font-size: 16px; }
  .portal-field { position: relative; inset: auto; transform: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .2rem 0; width: min(760px, 100%); margin: .5rem auto 0; }
  .portal-card { position: relative; left: auto !important; top: auto !important; width: 100%; max-width: none; transform: none; aspect-ratio: 1; }
  .portal-ad { grid-column: 1 / -1; width: min(560px, 90vw); justify-self: center; }
  .portal-dew, .portal-many, .portal-salvage, .portal-future { --size: auto; }
  .portal-button { font-size: clamp(8px, 1.9vw, 14px); }
  .portal-future .future-title { font-size: clamp(9px, 2.4vw, 18px); }
  .stone-note { display: none; }
}

@media (max-width: 620px) {
  .portal-field { grid-template-columns: 1fr; width: min(440px, 96%); }
  .portal-ad { grid-column: 1; width: 100%; }
  .top-nav-item { font-size: clamp(11px, 2.4vw, 14px); }
  .tagline { font-size: 12px; }
}

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