/* Homepage: the following colour field rolls over the hero instead of ending it at a hard edge. */
.scroll-surface{position:relative;z-index:2;margin-top:-104px;padding-top:104px;isolation:isolate;color:#edfafa;background:radial-gradient(ellipse 62% 28% at 96% 10%,#6557b634 0%,transparent 72%),radial-gradient(ellipse 62% 30% at 2% 32%,#16c68b2b 0%,transparent 72%),radial-gradient(ellipse 48% 26% at 55% 88%,#27b9e52a 0%,transparent 73%),linear-gradient(180deg,transparent 0,#09283ae6 148px,#09283a 310px,#092334 64%,#121e3a 100%)}
.scroll-surface:before{content:"";position:absolute;z-index:-1;inset:104px 0 0;pointer-events:none;opacity:.38;background-image:linear-gradient(#2acb8612 1px,transparent 1px),linear-gradient(90deg,#2bbbe312 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(180deg,#0000 0,#000 12%,#000 80%,#0000 100%)}
.scroll-surface .section:not(.discord),.scroll-surface .final-cta{background:transparent}
.scroll-surface .eyebrow{color:#91f5bd}.scroll-surface h2,.scroll-surface h3{color:#f4fffd}.scroll-surface p,.scroll-surface .expectation p,.scroll-surface .game-list span,.scroll-surface .community-feature p,.scroll-surface .faq details p{color:#bad2d9}
.scroll-surface .expectation{background:linear-gradient(145deg,#102d3bf5,#153346f5 62%,#1c2949f5);border:1px solid #baffeb2d;box-shadow:0 22px 42px #020d1a62,inset 0 1px #effff814}
.scroll-surface .game-list article{background:linear-gradient(140deg,#0d2938f8,#123447f8 60%,#1d2b4bf8);border-color:#baffeb2d;box-shadow:0 15px 32px #020d1a59,inset 0 1px #effff814}
.scroll-surface .community-feature{background:linear-gradient(135deg,#0d2938,#123447 56%,#1d2b4b);box-shadow:0 30px 70px #020d1a76;border:1px solid #baffeb2d}
.scroll-surface .community-feature .copy{background:linear-gradient(145deg,#102d3bf7,#153346f7)}
.scroll-surface .community-feature figure:after{background:linear-gradient(90deg,#0b2335df,transparent 58%)}
.scroll-surface .faq details{padding:20px 18px;margin-bottom:9px;border:1px solid #baffeb2d;border-radius:16px;background:linear-gradient(105deg,#0b202ef8,#112d3ef8 60%,#192a47f8)!important;box-shadow:0 12px 30px #020d1a59,inset 0 1px #effff810}
.scroll-surface .faq summary:after{color:#8ef4bd}.scroll-surface .final-cta{background:radial-gradient(circle at 76% 28%,#53c8e929 0,transparent 25%),radial-gradient(circle at 12% 85%,#25dc8930 0,transparent 27%)}
.discord-mark{position:relative;min-height:340px;overflow:hidden}
.discord-mark:before,.discord-mark:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.discord-mark:before{width:280px;height:280px;background:radial-gradient(circle,#9bffca38 0%,#4cd4ff1a 43%,transparent 69%);filter:blur(2px)}.discord-mark:after{width:230px;height:230px;border:1px solid #b8fff052;box-shadow:0 0 0 24px #b8fff00d,0 0 0 58px #7ecbff0b}
.discord-mark div{position:relative;z-index:1;width:min(156px,46vw);min-height:0;background:none!important;box-shadow:none!important;border-radius:0!important;animation:none!important}
.discord-mark img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 22px #0017228f)!important;image-rendering:auto}
@media(min-width:821px){main{position:relative;background:#0b1824}.hero-universe{position:sticky;top:0;z-index:0;min-height:760px}.scroll-surface{z-index:3}}
@media(max-width:820px){.scroll-surface{margin-top:-62px;padding-top:62px;background:radial-gradient(ellipse 90% 18% at 85% 5%,#28cfe54a 0%,transparent 73%),linear-gradient(180deg,transparent 0,#09283ae6 94px,#09283a 220px,#092334 64%,#121e3a 100%)}.scroll-surface:before{inset:62px 0 0;background-size:52px 52px}.scroll-surface .community-feature .copy{background:linear-gradient(145deg,#102d3b,#153346)}.discord-mark{min-height:245px}.discord-mark div{width:126px}.discord-mark:before{width:220px;height:220px}.discord-mark:after{width:176px;height:176px}}

/* Homepage uses the same four semantic surfaces as the public subpages. */
.scroll-surface{background:radial-gradient(ellipse 50% 28% at 98% 5%,#2c91a41b 0%,transparent 70%),radial-gradient(ellipse 50% 30% at 0% 64%,#28c27b16 0%,transparent 72%),linear-gradient(180deg,transparent 0,#071521e8 148px,#071521 310px,#0b2233 70%,#071521 100%)}
.scroll-surface .expectation,.scroll-surface .game-list article{background:linear-gradient(135deg,#183d4d 0%,#1b4051 100%);border-color:#8aeaf033;box-shadow:0 18px 40px #01070e72,inset 0 1px #effff80c}
.scroll-surface .expectation:nth-child(2n),.scroll-surface .game-list article:nth-child(2n){background:linear-gradient(135deg,#173847 0%,#1a3f4f 100%)}
.scroll-surface .community-feature{background:var(--elevated,#102c3d);border-color:#7ce6ef36;box-shadow:0 28px 64px #01070e80}
.scroll-surface .community-feature .copy{background:var(--elevated,#102c3d)}
.scroll-surface .faq details{background:#0b2233!important;border-color:#8aeaf02b}.scroll-surface .faq details[open]{background:var(--elevated,#102c3d)!important;border-color:#52dab55e}
.scroll-surface .final-cta{background:radial-gradient(circle at 85% 20%,#44cbec24 0%,transparent 28%),linear-gradient(110deg,#0b2233,#102c3d 60%,#163c4b)}

/* The homepage alternates deliberate depths, rather than repeating one colour field. */
.scroll-surface>.section:nth-of-type(2){background:linear-gradient(180deg,#0b2233 0%,#0e293a 100%)}
.scroll-surface>.section:nth-of-type(3){background:linear-gradient(180deg,#0e293a 0%,#071521 100%)}
.scroll-surface>.section:nth-of-type(4){background:linear-gradient(180deg,#071521 0%,#0b2233 100%)}
.scroll-surface>.section:nth-of-type(6){background:linear-gradient(180deg,#0b2233 0%,#071521 100%)}
.scroll-surface .discord{display:block;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 52% 180% at 100% 50%,#41cbe528 0%,transparent 70%),radial-gradient(ellipse 45% 150% at 0% 100%,#31d78120 0%,transparent 70%),linear-gradient(112deg,#102c3d 0%,#133849 52%,#183d4d 100%)}
.scroll-surface .discord:after{content:"";position:absolute;z-index:-1;right:-56px;top:50%;width:390px;height:390px;transform:translateY(-50%);opacity:.09;background:url("/assets/logo-transparent.png") center/contain no-repeat;filter:drop-shadow(0 16px 30px #02111a)}
.scroll-surface .discord-copy{max-width:760px;margin-right:auto}
.scroll-surface .discord-copy h2{max-width:700px}
.scroll-surface .discord-copy p{max-width:630px;font-size:1.1rem;line-height:1.65}
@media(max-width:820px){.scroll-surface>.section:nth-of-type(2),.scroll-surface>.section:nth-of-type(3),.scroll-surface>.section:nth-of-type(4),.scroll-surface>.section:nth-of-type(6){background:transparent}.scroll-surface .discord:after{right:-100px;width:280px;height:280px;opacity:.07}}

/* Secondary homepage actions stay in the same dark material family as their sections. */
.scroll-surface .button-secondary{background:linear-gradient(145deg,#143849,#102c3d);border-color:#8aeaf055;color:#efffff;box-shadow:0 10px 24px #01070e66}
.scroll-surface .button-secondary:hover{background:linear-gradient(145deg,#1b4658,#15394a);color:#fff}

/* The original mark gets the open right side of the desktop hero as its own visual highlight. */
body[data-page=start]{background:#060b14}
@media(min-width:821px){.hero-universe .hero-content{position:relative;max-width:640px}.hero-universe .hero-logo{position:absolute;z-index:2;top:225px;left:-300px;width:190px;height:190px;margin:0;filter:drop-shadow(0 10px 16px #020b1399);animation:none!important;image-rendering:auto;backface-visibility:hidden}}
/* Wide desktop: match the user's circle reference without adding the circle itself. */
@media(min-width:1600px){.hero-universe .hero-logo{top:210px;left:calc(-50vw + 500px);width:min(20vw,500px);height:min(20vw,500px)}}