@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --ink: #1b1830;
    --paper: #f6f1e8;
    --violet: #8d7df8;
    --lime: #d8f35a;
    --coral: #ff836b;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: 'Space Grotesk', sans-serif;
}

nav { height: 0; }

.game-landing {
    isolation: isolate;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    padding: 8vw 7.5vw 2rem;
    background-image: linear-gradient(rgba(27, 24, 48, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 24, 48, .055) 1px, transparent 1px);
    background-size: 38px 38px;
}

.game-landing__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: .5; }
.game-landing__glow--one { width: 40vw; height: 40vw; top: -15vw; right: -9vw; background: #e5d9ff; }
.game-landing__glow--two { width: 30vw; height: 30vw; bottom: 5vw; left: -14vw; background: #fff0b5; }

.game-hero { position: relative; z-index: 2; max-width: 42rem; }
.game-hero__eyebrow, .game-card__label, .game-shelf__heading, .game-landing__footer { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .075em; }
.game-hero__eyebrow { display: flex; gap: .6rem; align-items: center; margin: 0 0 1.25rem; font-size: .7rem; }
.game-hero__eyebrow span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 131, 107, .2); }
.game-hero h1 { margin: 0; font-size: clamp(4.1rem, 11.4vw, 10.7rem); line-height: .78; letter-spacing: -.105em; font-weight: 700; }
.game-hero h1 em { font-style: normal; color: var(--violet); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--lime); }
.game-hero__intro { max-width: 17rem; margin: 2rem 0 1.8rem; font-size: 1.05rem; line-height: 1.25; }
.game-hero__button { display: inline-flex; align-items: center; gap: 1.8rem; padding: .75rem .75rem .75rem 1.25rem; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 99px; text-decoration: none; text-transform: uppercase; font: 500 .72rem 'DM Mono', monospace; transition: transform .2s, background .2s; }
.game-hero__button b { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 1.15rem; }
.game-hero__button:hover { transform: translate(4px, -4px); background: var(--lime); }

.game-orbit { position: absolute; top: 4vw; right: 7vw; width: min(34vw, 31rem); aspect-ratio: 1; }
.game-orbit__ring { position: absolute; inset: 0; border: 1.5px solid var(--ink); border-radius: 47% 53% 48% 52% / 52% 43% 57% 48%; }
.game-orbit__ring--outer { transform: rotate(-15deg); border-style: dashed; animation: spin 30s linear infinite; }
.game-orbit__ring--inner { inset: 20%; border-color: var(--violet); transform: rotate(28deg); }
.game-orbit__core { position: absolute; inset: 36%; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: var(--ink); font: 500 1rem 'DM Mono', monospace; box-shadow: 8px 8px 0 var(--ink); }
.game-orbit__core i { position: absolute; width: 42%; height: 2px; background: var(--ink); transform: rotate(-45deg); }
.game-orbit__mark { position: absolute; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--lime); font-size: 1.2rem; }
.game-orbit__mark--a { top: 6%; left: 12%; }.game-orbit__mark--b { right: 0; top: 43%; background: var(--paper); }.game-orbit__mark--c { bottom: 2%; left: 19%; background: var(--violet); }

.game-shelf { margin-top: clamp(6rem, 14vw, 12rem); }
.game-shelf__heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: .85rem; font-size: .65rem; }
.game-shelf__heading p { margin: 0; }.game-shelf__heading span { color: #615c71; }.game-shelf__heading b { color: var(--ink); font-size: 1.1rem; }
.game-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.game-card { position: relative; display: flex; min-height: clamp(14rem, 23vw, 20rem); padding: 1.1rem; flex-direction: column; overflow: hidden; color: var(--ink); border: 1.5px solid var(--ink); text-decoration: none; transition: transform .22s, box-shadow .22s; }
.game-card:hover { transform: translate(-5px, -6px); box-shadow: 8px 8px 0 var(--ink); }.game-card--violet { background: var(--violet); }.game-card--lime { background: var(--lime); }.game-card--coral { background: var(--coral); }
.game-card__number { font: .72rem 'DM Mono', monospace; }.game-card__label { margin-top: auto; font-size: .6rem; }.game-card strong { position: relative; z-index: 1; margin-top: .4rem; font-size: clamp(1.65rem, 3.2vw, 3.1rem); line-height: .83; letter-spacing: -.08em; }.game-card__arrow { position: absolute; right: 1rem; bottom: 1rem; font-size: 1.5rem; }
.game-card__shape { position: absolute; opacity: .95; }.game-card__shape--planet { top: 19%; left: 47%; width: 8vw; max-width: 7rem; aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--coral); box-shadow: inset 0 -1.2rem 0 rgba(255,255,255,.22); }.game-card__shape--planet::after { position: absolute; top: 42%; left: -27%; width: 150%; height: 22%; border: 1.5px solid var(--ink); border-radius: 50%; content: ''; transform: rotate(-22deg); }
.game-card__shape--steps { top: 17%; left: 35%; width: 41%; height: 42%; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background: repeating-linear-gradient(to top, transparent 0 18%, var(--ink) 18.5% 19.5%, transparent 20% 38%); transform: skewY(-28deg); }.game-card__shape--eye { top: 18%; left: 28%; width: 48%; aspect-ratio: 1.7; border: 1.5px solid var(--ink); border-radius: 100% 0; transform: rotate(-45deg); }.game-card__shape--eye::after { position: absolute; top: 27%; left: 33%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); content: ''; }
.game-landing__footer { margin: 5rem 0 0; text-align: center; font-size: .59rem; color: #5f5a6e; }.game-landing__footer span { color: var(--coral); }
@keyframes spin { to { transform: rotate(345deg); } }

@media (max-width: 700px) { .game-landing { padding: 4rem 1.4rem 1.5rem; }.game-hero h1 { font-size: clamp(3.8rem, 19vw, 6.5rem); }.game-orbit { top: 3rem; right: -3.5rem; width: 14rem; opacity: .7; }.game-hero__intro { position: relative; z-index: 2; }.game-shelf { margin-top: 7rem; }.game-cards { grid-template-columns: 1fr; gap: .75rem; }.game-card { min-height: 13rem; }.game-card__shape--planet { width: 6rem; }.game-shelf__heading span { display: none; } }