@font-face{font-family:Barlow;src:url('assets/barlow-regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Barlow;src:url('assets/barlow-bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--ink:#05060c;--paper:#eef8ff;--accent:#22d3ee;--line:rgba(255,255,255,.22);--body:Barlow,'Arial Narrow',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}::selection{background:var(--accent);color:var(--ink)}.skip-link{position:absolute;z-index:1000;left:1rem;top:-4rem;background:var(--accent);color:var(--ink);padding:.8rem 1rem}.skip-link:focus{top:1rem}.noise{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.055;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='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.site-header{height:84px;padding:0 clamp(22px,4vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:20;background:var(--ink)}.brand,.footer-logo{font-size:25px;font-weight:700;letter-spacing:-.055em;display:flex;align-items:center;gap:13px}.brand-accent,.footer-logo span{color:var(--accent)}.brand-icon{width:29px;height:29px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(-12deg)}.brand-icon i{border:3px solid var(--accent)}.brand-icon i:nth-child(2),.brand-icon i:nth-child(3){background:var(--accent)}.site-header nav{display:flex;gap:34px;margin-left:6vw}.site-header nav a{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;transition:color .2s}.site-header nav a:hover,.footer a:hover{color:var(--accent)}.header-link{font-size:12px;font-weight:700;letter-spacing:.11em;border:1px solid var(--paper);padding:13px 16px;transition:background .2s,color .2s}.header-link span{margin-left:17px;font-size:17px}.header-link:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}.menu-toggle,.mobile-menu{display:none}
.hero{min-height:740px;height:min(850px,calc(100svh - 84px));position:relative;display:grid;grid-template-columns:57% 43%;overflow:hidden;background:radial-gradient(ellipse at 79% 45%,#242a18 0,transparent 43%),#080b0b}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.065) 1px,transparent 1px);background-size:calc(100% / 12) 25%;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}.hero-content{padding:clamp(90px,10vw,165px) 0 70px clamp(22px,5vw,88px);z-index:2;display:flex;flex-direction:column;justify-content:center}.eyebrow,.kicker,.section-top-right,.hero-art-label,.hero-index,.card-meta,.art-stamp,.lineup-note,.footer-bottom,.next-art-small{font-size:11px;letter-spacing:.17em;font-weight:700}.eyebrow{display:flex;align-items:center;gap:10px;white-space:nowrap}.live-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px rgba(34,211,238,.12);animation:pulse 2s infinite}.eyebrow-line{width:30px;height:1px;background:var(--paper);opacity:.7}.hero h1{font-size:clamp(91px,13.3vw,230px);line-height:.74;letter-spacing:-.09em;margin:53px 0 35px;font-weight:700;transform:scaleX(.88);transform-origin:left center;position:relative;z-index:2}.hero h1 > span,.hero h1 > em{display:block;font-style:normal;white-space:nowrap}.hero h1 em{color:var(--accent);font-size:.65em;letter-spacing:-.085em;margin-top:.15em}.period{color:var(--paper)}.hero-bottom{max-width:590px;display:flex;align-items:end;justify-content:space-between;gap:15px;border-top:1px solid rgba(255,255,255,.42);padding-top:26px}.hero-bottom p{font-size:clamp(16px,1.45vw,21px);line-height:1.42;margin:0}.hero-bottom strong{font-weight:700}.round-link{width:65px;height:65px;border-radius:50%;border:1px solid var(--paper);display:grid;place-items:center;flex:none;font-size:31px;transition:transform .25s,background .25s,color .25s}.round-link:hover{transform:rotate(45deg);background:var(--accent);color:var(--ink);border-color:var(--accent)}.hero-art{position:relative;min-width:0}.orbit{position:absolute;border:1px solid rgba(34,211,238,.23);border-radius:50%;aspect-ratio:1;top:50%;left:53%;transform:translate(-50%,-50%)}.orbit-one{width:70%}.orbit-two{width:105%}.orbit-three{width:145%}.hero-art:before{content:'✳';position:absolute;left:47%;top:33%;font-size:clamp(110px,23vw,350px);line-height:1;color:var(--accent);opacity:.11;transform:rotate(-17deg)}.hero-poster{position:absolute;width:clamp(190px,19vw,300px);aspect-ratio:.76;background:#222;border:8px solid #d7f7ff;box-shadow:0 20px 55px rgba(0,0,0,.5);overflow:hidden;transition:transform .5s}.hero-poster img{width:100%;height:100%;object-fit:cover}.hero-poster span{position:absolute;bottom:0;left:0;right:0;background:#d7f7ff;color:var(--ink);padding:9px 11px;font-size:10px;font-weight:700;letter-spacing:.18em}.poster-horde{top:14%;left:2%;transform:rotate(-13deg)}.poster-horde:hover{transform:rotate(-5deg) translateY(-10px)}.poster-zenith{top:21%;right:5%;transform:rotate(12deg);width:clamp(180px,17vw,275px)}.poster-zenith:hover{transform:rotate(5deg) translateY(-10px)}.poster-type{top:50%;left:24%;background:var(--accent);color:var(--ink);transform:rotate(-4deg);display:flex;flex-direction:column;justify-content:space-between;padding:19px}.poster-type:hover{transform:rotate(2deg) translateY(-10px)}.poster-type b{font-size:clamp(48px,6vw,95px);letter-spacing:-.11em;line-height:.8}.poster-type small{font-weight:700;letter-spacing:.2em}.hero-art-label{position:absolute;color:var(--accent);line-height:1.8;z-index:2}.label-top{right:8%;top:7%}.label-bottom{right:7%;bottom:12%}.hero-index{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:15px clamp(22px,5vw,88px);border-top:1px solid var(--line);z-index:3}.hero-index span:last-child{color:var(--accent);font-size:16px}.ticker{background:var(--accent);color:var(--ink);overflow:hidden;transform:rotate(-1.4deg) scale(1.02);position:relative;z-index:5;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}.ticker-track{display:flex;width:max-content;animation:marquee 24s linear infinite}.ticker span{white-space:nowrap;display:block;padding:12px 0;font-size:clamp(22px,2.7vw,40px);line-height:1;font-weight:700;letter-spacing:-.035em}.ticker i{font-style:normal;margin:0 30px}.section-shell{padding-left:clamp(22px,5vw,88px);padding-right:clamp(22px,5vw,88px)}.games-section{padding-top:130px;padding-bottom:135px}.section-top{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px}.kicker{color:var(--accent)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin:55px 0 70px}.section-heading h2,.manifesto h2,.next h2{font-weight:700;letter-spacing:-.09em;line-height:.83;margin:0}.section-heading h2{font-size:clamp(85px,11vw,175px)}.section-heading em,.next h2 em{font-style:normal;color:var(--accent)}.section-heading p{max-width:345px;font-size:19px;line-height:1.5;margin:0 0 8px}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.game-card{background:var(--card);color:var(--card-dark);min-width:0;transition:transform .3s,box-shadow .3s;position:relative}.game-card:hover{transform:translateY(-10px);box-shadow:0 20px 0 -10px var(--accent)}.game-card.featured{grid-column:span 2;grid-row:span 2}.card-hit{display:flex;flex-direction:column;height:100%;padding:12px}.card-art{display:block;height:240px;position:relative;overflow:hidden;background:var(--card-dark)}.card-art>img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.game-card:hover .card-art>img{transform:scale(1.06)}.featured .card-art{height:auto;flex:1;min-height:440px}.art-stamp{position:absolute;bottom:12px;left:12px;padding:8px 10px;background:var(--accent);color:var(--ink);z-index:3;letter-spacing:.09em}.card-meta{display:flex;justify-content:space-between;gap:7px;margin:17px 1px 10px;letter-spacing:.11em}.card-meta span:last-child{text-align:right}.card-title{font-size:clamp(40px,4.1vw,70px);line-height:.83;letter-spacing:-.075em;font-weight:700;display:block;position:relative}.featured .card-title{font-size:clamp(70px,8vw,135px)}.card-title span{position:absolute;right:3px;bottom:0;font-size:.45em;letter-spacing:0}.card-copy{font-size:15px;line-height:1.35;margin:15px 2px 7px;display:block;max-width:260px}.featured .card-copy{font-size:18px;max-width:none}.art-horde img{object-position:50% 40%}.art-spaeti{background:linear-gradient(#ee6751 0 34%,#c24d3e 34% 53%,#3c1a22 53%)}.spaeti-sign{position:absolute;top:12%;left:10%;font-size:clamp(42px,5vw,75px);font-weight:700;letter-spacing:-.09em;color:#ffda6e;transform:rotate(-4deg);text-shadow:4px 4px #652325}.spaeti-sign span{font-size:16px;letter-spacing:0;vertical-align:top;padding-left:4px}.spaeti-awning{position:absolute;top:51%;left:0;right:0;height:13%;background:repeating-linear-gradient(90deg,#ffe7a5 0 38px,#ed7447 38px 76px);clip-path:polygon(0 0,100% 0,100% 70%,96% 100%,92% 70%,88% 100%,84% 70%,80% 100%,76% 70%,72% 100%,68% 70%,64% 100%,60% 70%,56% 100%,52% 70%,48% 100%,44% 70%,40% 100%,36% 70%,32% 100%,28% 70%,24% 100%,20% 70%,16% 100%,12% 70%,8% 100%,4% 70%,0 100%)}.spaeti-window{position:absolute;bottom:8%;left:10%;right:10%;height:30%;border:5px solid #e3ae77;background:#252134;display:flex;align-items:center;justify-content:space-around;color:#ffc45d}.spaeti-window b{border:2px solid #ff7e9a;color:#ff7e9a;padding:5px 12px;transform:rotate(-7deg)}.art-wartime{background:linear-gradient(#ffba8d,#e4706d 56%,#4c333e)}.war-sun{width:135px;height:135px;border-radius:50%;background:#ffe1ad;position:absolute;left:50%;top:11%;transform:translateX(-50%);box-shadow:0 0 90px #ffde9f}.war-tower{position:absolute;bottom:20%;background:#4a3942;clip-path:polygon(0 100%,0 18%,14% 18%,14% 0,29% 0,29% 18%,42% 18%,42% 0,58% 0,58% 18%,72% 18%,72% 0,86% 0,86% 18%,100% 18%,100% 100%)}.tower-a{height:33%;width:37%;left:3%}.tower-b{height:48%;width:32%;right:6%}.war-ground{position:absolute;bottom:0;height:25%;width:100%;background:#263139;clip-path:polygon(0 15%,24% 28%,45% 5%,68% 40%,100% 10%,100% 100%,0 100%)}.art-tap img{object-fit:cover}.art-fm{background:radial-gradient(circle at 50% 40%,#f5aac7,#a34e94 55%,#39264b)}.fm-record{position:absolute;width:240px;height:240px;border-radius:50%;background:repeating-radial-gradient(circle,#1b1939 0 6px,#393451 7px 8px,#1b1939 9px 16px);top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 30px #2b1038}.fm-record:after{content:'';position:absolute;width:53px;height:53px;left:50%;top:50%;transform:translate(-50%,-50%);background:#f588b8;border:6px solid #f6afd1;border-radius:50%}.fm-label{position:absolute;top:32%;left:41%;font-size:52px;font-weight:700;line-height:.75;letter-spacing:-.08em;color:#fff2cf;transform:rotate(-8deg);text-shadow:4px 5px #422441}.fm-wave{position:absolute;bottom:25px;right:10px;color:#fff2cf;font-size:34px;letter-spacing:-.25em}.art-port{background:linear-gradient(#abefdb,#84d6dc 49%,#257f93 50%,#154c6d)}.port-sun{position:absolute;width:120px;height:120px;border-radius:50%;background:#ffebad;top:12%;right:17%;box-shadow:0 0 60px #ffecb1}.port-island{position:absolute;background:#1b766e;clip-path:polygon(0 60%,18% 30%,27% 40%,39% 10%,55% 38%,68% 25%,82% 55%,100% 63%,100% 100%,0 100%)}.port-island.back{width:80%;height:40%;bottom:37%;left:-15%;opacity:.5}.port-island.front{width:120%;height:37%;bottom:18%;left:15%;background:#214d62}.port-water{position:absolute;bottom:0;width:100%;height:24%;background:repeating-linear-gradient(0deg,transparent 0 10px,rgba(255,255,255,.23) 11px 12px)}.art-fare{background:linear-gradient(160deg,#6b5ba5 0%,#a188b9 56%,#efbcab 100%)}.fare-road{position:absolute;bottom:-30%;left:19%;width:65%;height:90%;background:#37314d;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%)}.fare-road:after{content:'';position:absolute;left:48%;top:10%;height:100%;border-left:4px dashed #f1dbb0}.fare-ticket{position:absolute;left:11%;top:11%;background:#fff0d9;color:#332947;padding:10px 14px;font-size:31px;line-height:.8;font-weight:700;letter-spacing:-.07em;transform:rotate(-8deg);box-shadow:6px 8px #382a56}.fare-ticket span{display:block;font-size:10px;letter-spacing:.07em;border-top:2px dashed #382a56;margin-top:12px;padding-top:7px}.art-zenith img{object-fit:cover}.lineup-note{border-top:1px solid var(--line);margin:58px 0 0;padding-top:15px;display:flex;justify-content:space-between;color:#a4aaa3}.lineup-note span{color:var(--accent)}
.manifesto{background:var(--accent);color:var(--ink);padding:120px 0 100px;overflow:hidden}.manifesto .kicker{color:var(--ink)}.manifesto h2{font-size:clamp(100px,17vw,270px);margin:60px 0 65px;white-space:nowrap}.manifesto h2 span{color:transparent;-webkit-text-stroke:2px var(--ink)}.manifesto-bottom{display:flex;align-items:start;justify-content:space-between;border-top:2px solid var(--ink);padding-top:28px}.asterisk{font-size:120px;line-height:.8;animation:spin 25s linear infinite}.manifesto-bottom p{max-width:650px;font-size:clamp(26px,3vw,47px);line-height:1.15;font-weight:700;letter-spacing:-.04em;margin:0}.manifesto-bottom em{font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}.next{min-height:710px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;padding-top:125px;padding-bottom:125px;overflow:hidden}.next h2{font-size:clamp(77px,8.8vw,145px);margin:42px 0 33px}.next p{max-width:400px;font-size:20px;line-height:1.45;color:#b9beb6}.cta{display:inline-flex;gap:65px;align-items:center;background:var(--accent);color:var(--ink);padding:15px 17px;margin-top:24px;font-weight:700;font-size:14px;letter-spacing:.1em;transition:transform .2s,background .2s}.cta span{font-size:26px;line-height:1}.cta:hover{transform:translate(4px,-4px);background:#fff}.next-art{height:570px;position:relative;display:grid;place-items:center}.next-ring{border:1px solid rgba(34,211,238,.35);border-radius:50%;position:absolute;aspect-ratio:1}.ring-a{width:45%}.ring-b{width:75%}.ring-c{width:105%}.next-star{font-size:clamp(270px,31vw,530px);line-height:1;color:var(--accent);animation:spin 40s linear infinite}.next-art-small{position:absolute;top:10%;right:2%;line-height:1.4;color:var(--accent)}.next-art-count{position:absolute;bottom:8%;left:0;font-size:40px;color:var(--accent)}.footer{border-top:1px solid var(--line);background:#090d1c}.footer-main{min-height:245px;display:flex;justify-content:space-between;align-items:center;gap:30px}.footer-logo{font-size:clamp(36px,5.3vw,90px)}.footer-main p{font-size:13px;line-height:1.6;letter-spacing:.1em;font-weight:700}.back-top{border:1px solid var(--paper);padding:13px 17px;font-size:12px;font-weight:700;letter-spacing:.1em}.footer-bottom{border-top:1px solid var(--line);min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-bottom div{display:flex;gap:20px}.footer-bottom a{white-space:nowrap}.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}.reveal.in-view{opacity:1;transform:translateY(0)}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(34,211,238,0)}}
@media(max-width:1200px){.hero{grid-template-columns:55% 45%}.hero h1{font-size:13.5vw}.hero-poster{width:21vw}.poster-zenith{width:19vw}.game-grid{grid-template-columns:repeat(3,1fr)}.featured{grid-column:span 2;grid-row:span 2}.section-heading h2{font-size:10vw}.manifesto h2{font-size:16vw}}
@media(max-width:800px){.site-header{height:72px}.site-header nav,.header-link{display:none}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;background:none;border:0;width:42px;height:42px;cursor:pointer}.menu-toggle span{width:27px;height:2px;background:var(--paper)}.mobile-menu:not([hidden]){display:flex;position:absolute;top:72px;left:0;right:0;background:var(--accent);color:var(--ink);z-index:19;flex-direction:column;padding:20px 25px;gap:15px;font-size:25px;font-weight:700;text-transform:uppercase}.hero{height:auto;min-height:900px;display:block}.hero-content{padding:90px 25px 0}.hero h1{font-size:clamp(86px,19vw,152px);margin:40px 0 30px}.hero-bottom{max-width:600px}.hero-art{height:400px}.hero-poster{width:210px}.poster-horde{top:8%;left:16%}.poster-zenith{top:18%;right:10%;width:180px}.poster-type{top:38%;left:39%}.label-top{top:7%;right:4%}.label-bottom{bottom:8%;right:4%}.hero-index{padding:15px 25px}.section-heading{align-items:start;flex-direction:column;margin-bottom:40px}.section-heading h2{font-size:clamp(74px,14vw,110px)}.section-heading p{max-width:550px}.game-grid{grid-template-columns:repeat(2,1fr)}.featured{grid-column:span 2;grid-row:auto}.featured .card-art{height:470px;flex:unset}.card-art{height:230px}.card-title{font-size:clamp(42px,7vw,65px)}.manifesto{padding:95px 0}.manifesto h2{font-size:16vw}.next{grid-template-columns:1fr;padding-top:100px;padding-bottom:80px}.next-art{height:430px}.next-star{font-size:360px}.footer-main{flex-wrap:wrap;padding-top:50px;padding-bottom:50px}.footer-bottom{flex-wrap:wrap;padding-top:22px;padding-bottom:22px}}
@media(max-width:550px){.brand{font-size:22px}.brand-icon{width:25px;height:25px}.eyebrow{font-size:9px;gap:7px;letter-spacing:.1em}.eyebrow-line{width:12px}.hero{min-height:770px}.hero-content{padding:75px 20px 0}.hero h1{font-size:clamp(69px,19vw,106px)}.hero-bottom p{font-size:15px}.round-link{width:50px;height:50px}.hero-art{height:320px}.hero-poster{width:155px;border-width:5px}.poster-horde{left:8%;top:10%}.poster-zenith{width:145px;right:5%;top:15%}.poster-type{left:34%;top:44%}.poster-type b{font-size:48px}.hero-art-label{font-size:8px}.label-top{right:3%;top:2%}.label-bottom{right:4%;bottom:12%}.hero-index{font-size:9px}.ticker i{margin:0 15px}.games-section{padding-top:95px;padding-bottom:85px}.section-top-right{display:none}.section-heading{margin-top:35px}.section-heading h2{font-size:15vw}.section-heading p{font-size:17px}.game-grid{gap:10px}.game-card.featured{grid-column:span 2}.card-hit{padding:8px}.card-art{height:180px}.featured .card-art{height:310px;min-height:0}.card-meta{font-size:8px;margin:10px 0 8px}.card-title{font-size:clamp(34px,9vw,52px)}.featured .card-title{font-size:15vw}.card-copy{font-size:12px;margin-top:10px}.featured .card-copy{font-size:15px}.art-stamp{font-size:7px;padding:5px 6px;left:7px;bottom:7px}.spaeti-sign{font-size:38px}.fm-record{width:170px;height:170px}.fm-label{left:34%;font-size:40px}.fare-ticket{font-size:22px}.lineup-note{font-size:9px;line-height:1.5;gap:20px}.manifesto{padding:80px 0}.manifesto h2{font-size:16vw;margin:45px 0}.manifesto h2 span{-webkit-text-stroke:1px var(--ink)}.manifesto-bottom{gap:15px}.asterisk{font-size:60px}.manifesto-bottom p{font-size:25px}.next h2{font-size:16vw}.next p{font-size:17px}.next-art{height:320px}.next-star{font-size:260px}.footer-main{display:block;min-height:0}.footer-main p{margin:25px 0}.footer-bottom{display:block;font-size:10px}.footer-bottom div{flex-wrap:wrap;margin:16px 0}.footer-bottom span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
.brand .brand-icon{display:block;width:32px;height:32px;transform:none;flex:none;filter:drop-shadow(0 0 8px rgba(34,211,238,.35))}.brand-icon .spin-c{transform-origin:16px 16px;animation:spin 22s linear infinite}.brand-edition{color:var(--accent);font-size:.52em;letter-spacing:.08em;vertical-align:middle;margin-left:5px}.art-fm{background:radial-gradient(circle at 50% 48%,#249978,#0d5a52 73%,#092f36)}.fm-pitch{position:absolute;inset:14% 9%;border:2px solid rgba(210,255,233,.6);transform:perspective(300px) rotateX(16deg);box-shadow:0 0 35px rgba(126,255,209,.15)}.fm-pitch:before{content:'';position:absolute;top:0;bottom:0;left:50%;border-left:2px solid rgba(210,255,233,.6)}.fm-circle{position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);border:2px solid rgba(210,255,233,.6);border-radius:50%}.fm-goal{position:absolute;top:29%;height:42%;width:22%;border:2px solid rgba(210,255,233,.6)}.goal-left{left:0;border-left:0}.goal-right{right:0;border-right:0}.fm-ball{position:absolute;left:64%;top:32%;font-size:25px;color:#fff;filter:drop-shadow(0 0 8px #fff)}.fm-score{position:absolute;top:10px;left:10px;right:10px;background:#081e22;color:#dffff0;padding:8px 10px;font-size:17px;font-weight:700;letter-spacing:.05em;display:flex;justify-content:space-between;box-shadow:0 7px 15px #072e32}.fm-score small{color:#9dffb1;font-size:10px;letter-spacing:.08em;align-self:center}

/* The Games edition inherits the orbital C's cyan/violet light language. */
.site-header{background:#05060c;border-bottom-color:rgba(165,243,252,.16)}
.site-header:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent 8%,rgba(34,211,238,.65) 42%,rgba(124,58,237,.65) 76%,transparent 100%)}
.brand{letter-spacing:-.045em}
.brand-edition{color:#a5f3fc}
.site-header nav a:hover,.footer a:hover{color:#a5f3fc}
.header-link{border-color:rgba(165,243,252,.55)}
.header-link:hover{background:#22d3ee;color:#05060c;box-shadow:0 0 26px rgba(34,211,238,.28)}
.hero{background:radial-gradient(ellipse 42% 52% at 78% 42%,rgba(124,58,237,.28),transparent 78%),radial-gradient(ellipse 38% 32% at 58% 82%,rgba(34,211,238,.13),transparent 78%),#05060c}
.hero-grid{background-image:linear-gradient(to right,rgba(165,243,252,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(165,243,252,.055) 1px,transparent 1px)}
.hero h1 em,.section-heading em,.next h2 em{background:linear-gradient(105deg,#a5f3fc 5%,#22d3ee 46%,#a78bfa 95%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero h1 .period{-webkit-text-fill-color:#eef8ff;color:#eef8ff}
.eyebrow{color:#a5f3fc}
.live-dot{background:#22d3ee}
.orbit-one{border-color:rgba(165,243,252,.42)}
.orbit-two{border-color:rgba(124,58,237,.45)}
.orbit-three{border-color:rgba(34,211,238,.21)}
.hero-art:before{color:#7c3aed;opacity:.19}
.hero-art-label{color:#a5f3fc}
.poster-type{background:linear-gradient(145deg,#a5f3fc 0%,#22d3ee 60%,#ad8afb 100%);box-shadow:0 24px 60px rgba(34,211,238,.18)}
.hero-index{border-top-color:rgba(165,243,252,.22)}
.ticker{background:linear-gradient(100deg,#a5f3fc,#22d3ee 55%,#85c5fa);border-color:#05060c}
.ticker i{color:#6d28d9}
.games-section{background:radial-gradient(ellipse 44% 23% at 95% 10%,rgba(124,58,237,.08),transparent 78%),radial-gradient(ellipse 30% 22% at 5% 90%,rgba(34,211,238,.06),transparent 80%)}
.section-top{border-top-color:rgba(165,243,252,.24)}
.kicker,.lineup-note span{color:#67e8f9}
.art-stamp{background:#a5f3fc;color:#06111d}
.manifesto{position:relative;color:#eef8ff;background:radial-gradient(circle at 78% 16%,rgba(124,58,237,.6),transparent 37%),radial-gradient(circle at 8% 92%,rgba(34,211,238,.3),transparent 44%),#10142c}
.manifesto:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(165,243,252,.035) 1px,transparent 1px);background-size:12.5% 100%}
.manifesto-inner{position:relative}
.manifesto .kicker{color:#a5f3fc}
.manifesto h2 span{color:transparent;-webkit-text-stroke:2px #67e8f9}
.manifesto-bottom{border-top-color:#67e8f9}
.asterisk{color:#a78bfa}
.manifesto-bottom em{text-decoration-color:#22d3ee}
.next{background:radial-gradient(circle at 78% 50%,rgba(124,58,237,.12),transparent 42%)}
.next-ring.ring-a{border-color:rgba(165,243,252,.65)}
.next-ring.ring-b{border-color:rgba(124,58,237,.56)}
.next-ring.ring-c{border-color:rgba(34,211,238,.25)}
.next-star{background:linear-gradient(135deg,#a5f3fc,#22d3ee 42%,#7c3aed 84%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.next-art-small,.next-art-count{color:#a5f3fc}
.cta{background:#22d3ee;color:#05060c}
.cta:hover{background:#a5f3fc;box-shadow:0 12px 32px rgba(34,211,238,.23)}
.footer{background:#090d1c;border-top-color:rgba(165,243,252,.22)}
.footer-logo span{color:#67e8f9}
.footer-bottom{border-top-color:rgba(165,243,252,.18)}
@media(max-width:800px){.mobile-menu:not([hidden]){background:#a5f3fc;color:#05060c}}
@media(max-width:550px){.manifesto h2 span{-webkit-text-stroke:1px #67e8f9}}

/* Original game artwork and logos */
.card-art>.art-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.game-card:hover .card-art>.art-image{transform:scale(1.045)}
.card-art>.game-logo,.card-art>.game-icon{position:absolute;z-index:2;width:auto;height:auto;object-fit:contain;transition:transform .35s}
.game-card:hover .card-art>.game-logo,.game-card:hover .card-art>.game-icon{transform:none}
.art-horde:after,.art-tap:after,.art-towerlink:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.art-horde:after{background:linear-gradient(180deg,rgba(2,8,29,.36),transparent 46%,rgba(2,8,29,.32))}
.art-tap:after{background:linear-gradient(90deg,rgba(6,30,70,.19),transparent 68%)}
.art-towerlink:after{background:linear-gradient(180deg,transparent 50%,rgba(2,17,36,.35))}
.art-horde>.art-image{object-position:center 58%}
.card-art>.horde-logo{width:min(75%,420px);left:50%;top:9%;transform:translateX(-50%);filter:drop-shadow(0 9px 15px #041134)}
.game-card:hover .card-art>.horde-logo{transform:translateX(-50%) scale(1.025)}
.art-spaeti{background:#1d4f4a}
.art-spaeti>.art-image{object-position:39% 50%}
.card-art>.spaeti-icon{width:66px;height:66px;right:12px;top:12px;border:3px solid #fff2d4;border-radius:17px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.art-tap>.art-image{object-position:63% 48%}
.card-art>.tap-logo{width:52%;left:4%;top:7%;filter:drop-shadow(0 8px 14px #263c56)}
.game-card:hover .card-art>.tap-logo{transform:rotate(-3deg) scale(1.035)}
.art-fm{background:radial-gradient(circle at center,#14725c,#062e35 80%)}
.art-fm .fm-pitch{opacity:.55}
.card-art>.fm-icon{width:165px;height:165px;max-width:72%;max-height:74%;left:50%;top:46%;transform:translate(-50%,-50%);border-radius:28px;filter:drop-shadow(0 18px 20px rgba(0,0,0,.38))}
.game-card:hover .card-art>.fm-icon{transform:translate(-50%,-50%) scale(1.045)}
.art-towerlink>.art-image{object-position:center 58%}
.card-art>.towerlink-icon{width:57px;height:57px;right:12px;top:12px;border-radius:15px;border:2px solid rgba(165,243,252,.68);box-shadow:0 8px 24px #031d30}
.towerlink-card .card-title{font-size:clamp(27px,3.4vw,52px);letter-spacing:-.065em}
.towerlink-card .card-title small{display:block;margin-top:.52em;font-size:.35em;letter-spacing:.17em;line-height:1}
.hero-poster .poster-logo{position:absolute;z-index:2;width:70%;height:auto;left:50%;top:9%;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 6px 10px #06122e)}
.poster-tap{padding:0;display:block}
.poster-tap>img:first-child{height:100%;width:100%;object-fit:cover;object-position:62% center}
.poster-tap .poster-logo{width:56%;left:38%;top:6%}
@media(max-width:550px){.card-art>.spaeti-icon{width:44px;height:44px;border-width:2px;border-radius:11px;right:7px;top:7px}.card-art>.towerlink-icon{width:42px;height:42px;right:7px;top:7px}.card-art>.fm-icon{width:105px;height:105px;border-radius:18px}.towerlink-card .card-title{font-size:clamp(24px,7vw,38px)}}

/* Project artwork for the next worlds */
.art-spaeti>.art-image{object-position:50% 52%}
.art-wartime{background:#344c3d}
.art-wartime>.art-image{object-position:51% 48%}
.art-wartime:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,18,17,.15),transparent 42%,rgba(6,18,17,.24))}
.card-art>.wartime-icon{width:61px;height:61px;right:12px;top:12px;border:2px solid rgba(244,237,210,.85);border-radius:15px;box-shadow:0 8px 24px rgba(0,0,0,.38)}
.art-port{background:#9c7c65}
.art-port>.art-image{object-position:50% 46%}
.art-port:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(27,18,18,.2))}
@media(max-width:550px){.card-art>.wartime-icon{width:42px;height:42px;right:7px;top:7px;border-radius:11px}}

/* Späti Tycoon leads the opening collage. */
.poster-spaeti{top:49%;left:23%;transform:rotate(-4deg);width:clamp(205px,20vw,320px);border-color:#d7f7ff;box-shadow:0 24px 65px rgba(0,0,0,.58),0 0 35px rgba(34,211,238,.18)}
.poster-spaeti:hover{transform:rotate(1deg) translateY(-10px)}
.poster-spaeti>img:first-child{width:100%;height:100%;object-fit:cover;object-position:50% 54%}
.hero-poster .poster-game-icon{position:absolute;right:9px;top:9px;width:48px;height:48px;object-fit:cover;border:2px solid #eaffff;border-radius:11px;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.art-port>.art-image{object-position:53% 53%}
.card-art>.port-logo{width:61%;height:auto;left:50%;top:-21%;transform:translateX(-50%);filter:drop-shadow(0 6px 8px rgba(0,0,0,.58))}
.game-card:hover .card-art>.port-logo{transform:translateX(-50%) scale(1.025)}
.art-fare>.art-image{object-position:50% 44%}
.art-fare:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 65%,rgba(3,30,74,.2))}
@media(max-width:800px){.poster-spaeti{top:38%;left:38%;width:220px}}
@media(max-width:550px){.poster-spaeti{top:43%;left:31%;width:165px}.hero-poster .poster-game-icon{width:34px;height:34px;right:5px;top:5px;border-radius:8px}.card-art>.port-logo{width:64%;top:-16%}}

/* Store-review support links from the previous games site. */
.support{padding-top:115px;padding-bottom:135px;background:radial-gradient(ellipse 45% 50% at 95% 45%,rgba(34,211,238,.075),transparent 75%),#080d19}
.support-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin:58px 0 64px}
.support-heading h2{font-size:clamp(70px,9vw,145px);line-height:.84;letter-spacing:-.09em;margin:0}
.support-heading h2 em{font-style:normal;background:linear-gradient(95deg,#a5f3fc,#22d3ee 45%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.support-heading p{max-width:345px;font-size:19px;line-height:1.48;color:#b9c9d2;margin:0 0 6px}
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.support-card{min-height:320px;border:1px solid rgba(165,243,252,.22);padding:25px 25px 23px;display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(124,58,237,.12),rgba(34,211,238,.035) 52%,rgba(0,0,0,.12));transition:border-color .25s,transform .25s}
.support-card:hover{border-color:rgba(165,243,252,.64);transform:translateY(-4px)}
.support-number,.support-general>span{font-size:11px;letter-spacing:.16em;font-weight:700;color:#67e8f9}
.support-card h3{font-size:clamp(31px,3vw,47px);letter-spacing:-.06em;line-height:.94;margin:34px 0 auto}
.support-links{border-top:1px solid rgba(165,243,252,.3);padding-top:11px;margin-top:30px}
.support-links a{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:15px;font-weight:700;transition:color .2s}
.support-links a:hover,.support-general a:hover{color:#67e8f9}
.support-links a span{color:#67e8f9}
.support-edition{margin-top:24px;padding:18px 20px 15px;background:rgba(165,243,252,.055);border-left:2px solid #67e8f9}
.support-edition h4{margin:0 0 12px;color:#a5f3fc;font-size:12px;letter-spacing:.16em}
.support-edition .support-links{border-top-color:rgba(165,243,252,.18);margin-top:0}
.support-edition .support-links a{font-size:14px}
.support-general{border-top:1px solid rgba(165,243,252,.25);border-bottom:1px solid rgba(165,243,252,.25);margin-top:28px;padding:23px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.support-general>div{display:flex;flex-wrap:wrap;gap:12px 27px}
.support-general a{font-size:13px;font-weight:700;letter-spacing:.04em;transition:color .2s}
@media(max-width:900px){.support-heading{display:block}.support-heading p{margin-top:25px}.support-general{align-items:start;flex-direction:column}}
@media(max-width:550px){.support{padding-top:85px;padding-bottom:90px}.support-heading{margin:38px 0}.support-heading h2{font-size:14vw}.support-heading p{font-size:17px}.support-grid{grid-template-columns:1fr}.support-card{min-height:265px}.support-card h3{font-size:39px;margin-top:28px}.support-general>div{gap:12px 20px}}

/* Carry the same atmosphere through every section boundary. */
.hero{background:radial-gradient(ellipse 42% 52% at 78% 42%,rgba(124,58,237,.28),transparent 78%),radial-gradient(ellipse 38% 32% at 58% 72%,rgba(34,211,238,.13),transparent 78%),linear-gradient(180deg,#05060c 0%,#070a15 78%,#05060c 100%)}
.ticker{border:0;box-shadow:0 12px 45px rgba(34,211,238,.16),0 -12px 45px rgba(124,58,237,.12);-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}
.games-section{background:radial-gradient(ellipse 44% 23% at 95% 14%,rgba(124,58,237,.08),transparent 78%),radial-gradient(ellipse 34% 25% at 5% 78%,rgba(34,211,238,.06),transparent 80%),linear-gradient(180deg,#05060c 0%,#070a14 60%,#080d19 100%)}
.support{background:radial-gradient(ellipse 45% 50% at 95% 48%,rgba(34,211,238,.075),transparent 75%),linear-gradient(180deg,#080d19 0%,#0c1225 60%,#121734 100%)}
.manifesto{background:radial-gradient(circle at 78% 36%,rgba(124,58,237,.46),transparent 42%),radial-gradient(circle at 9% 64%,rgba(34,211,238,.2),transparent 48%),linear-gradient(180deg,#121734 0%,#1b1c42 42%,#11162f 76%,#0a1024 100%)}
.next{background:radial-gradient(circle at 78% 48%,rgba(124,58,237,.12),transparent 46%),linear-gradient(180deg,#0a1024 0%,#080d1d 58%,#090d1c 100%)}
.footer{background:#090d1c;border-top:0;box-shadow:inset 0 42px 58px -56px rgba(165,243,252,.3)}

/* Hero lineup: Horde Rush, Tap to the Top, Späti Tycoon. */
.hero-art>.poster-tap{top:21%;right:5%;left:auto;width:clamp(180px,17vw,275px);transform:rotate(12deg);box-shadow:0 20px 55px rgba(0,0,0,.5),0 0 30px rgba(34,211,238,.12)}
.hero-art>.poster-tap:hover{transform:rotate(5deg) translateY(-10px)}
@media(max-width:1200px){.hero-art>.poster-tap{width:19vw}}
@media(max-width:800px){.hero-art>.poster-tap{top:18%;right:10%;width:180px}}
@media(max-width:550px){.hero-art>.poster-tap{top:15%;right:5%;width:145px}}

/* Keep the hero captions clear of the posters. */
.poster-spaeti{top:42%}
.hero-index{min-height:48px;align-items:center;background:rgba(5,6,12,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top-color:rgba(165,243,252,.18)}
@media(max-width:800px){.poster-spaeti{top:26%}}
@media(max-width:550px){.poster-spaeti{top:30%}.hero-index{gap:12px}.hero-index span:nth-child(2){text-align:center}}

/* Support belongs to the quiet end of the page. */
.games-section{background:radial-gradient(ellipse 44% 23% at 95% 14%,rgba(124,58,237,.08),transparent 78%),radial-gradient(ellipse 34% 25% at 5% 78%,rgba(34,211,238,.06),transparent 80%),linear-gradient(180deg,#05060c 0%,#070a14 60%,#121734 100%)}
.support{padding-top:82px;padding-bottom:90px;background:radial-gradient(ellipse 48% 50% at 94% 45%,rgba(34,211,238,.035),transparent 75%),linear-gradient(180deg,#090d1c,#090d1c)}
.support-heading{margin:36px 0 40px;align-items:center}
.support-heading h2{font-size:clamp(40px,4.5vw,70px);line-height:.91;letter-spacing:-.07em}
.support-heading p{font-size:16px;max-width:390px}
.support-card{min-height:0;padding:21px 22px 19px;background:linear-gradient(145deg,rgba(124,58,237,.055),rgba(34,211,238,.02))}
.support-card h3{font-size:clamp(26px,2.5vw,38px);margin:20px 0 0}
.support-links{margin-top:18px}
.support-links a{font-size:14px;padding:6px 0}
.support-edition{margin-top:18px;padding:14px 16px 12px}
.support-edition .support-links a{font-size:13px}
.support-general{margin-top:20px;padding:18px 0}
@media(max-width:550px){.support{padding-top:65px;padding-bottom:70px}.support-heading{margin:30px 0}.support-heading h2{font-size:clamp(38px,11vw,55px)}.support-heading p{font-size:15px}.support-card{padding:19px}.support-card h3{font-size:33px}}

/* Sugar Rush Quest uses its own world art and transparent game logo. */
.art-sugar{background:#a84283}
.art-sugar>.art-image{object-position:50% 53%}
.art-sugar:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(49,12,53,.32),transparent 55%,rgba(49,12,53,.16))}
.card-art>.sugar-logo{width:81%;max-height:56%;top:5%;left:50%;transform:translateX(-50%);filter:drop-shadow(0 7px 10px rgba(53,13,62,.55))}
.game-card:hover .card-art>.sugar-logo{transform:translateX(-50%) scale(1.035)}
.sugar-card .card-title{font-size:clamp(28px,3.35vw,51px);letter-spacing:-.075em}
.sugar-card .card-title small{display:block;margin-top:.46em;font-size:.41em;letter-spacing:.16em;line-height:1}
@media(max-width:550px){.sugar-card .card-title{font-size:clamp(24px,7vw,38px)}.card-art>.sugar-logo{width:89%}}

/* Shorter breathing room and continuous color at the two section seams. */
.games-section{padding-bottom:64px;background:radial-gradient(ellipse 44% 23% at 95% 14%,rgba(124,58,237,.08),transparent 78%),linear-gradient(180deg,#05060c 0%,#070a14 58%,#121734 100%)}
.lineup-note{margin-top:36px}
.manifesto{padding-top:80px;padding-bottom:72px;background:linear-gradient(180deg,#121734 0%,#1b1c42 42%,#11162f 76%,#0a1024 100%)}
.manifesto:before{-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.manifesto:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 36%,rgba(124,58,237,.46),transparent 42%),radial-gradient(circle at 9% 64%,rgba(34,211,238,.2),transparent 48%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 78%,transparent)}
.manifesto-inner{z-index:1}
.next{min-height:0;padding-top:76px;padding-bottom:76px;background:linear-gradient(180deg,#0a1024 0%,#080d1d 60%,#090d1c 100%)}
@media(max-width:800px){.manifesto{padding-top:72px;padding-bottom:65px}.next{padding-top:72px;padding-bottom:68px}}
@media(max-width:550px){.games-section{padding-bottom:52px}.lineup-note{margin-top:27px}.manifesto{padding-top:60px;padding-bottom:56px}.next{padding-top:62px;padding-bottom:62px}}

/* Show the current Towerlink artwork clearly as the card's app badge. */
.card-art>.towerlink-icon{width:84px;height:84px;border-radius:20px;right:13px;top:13px;border:2px solid rgba(228,250,255,.88)}
@media(max-width:550px){.card-art>.towerlink-icon{width:58px;height:58px;border-radius:14px;right:8px;top:8px}}

/* Make the path into each game legible, including titles without public access. */
.card-action{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 2px 3px;padding-top:11px;border-top:1px solid currentColor;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.card-action span{font-size:19px;line-height:.65;transition:transform .2s}
.card-hit:hover .card-action span{transform:translate(3px,-3px)}
.card-action-static{opacity:.62;letter-spacing:.09em}
.teaser-card:hover{transform:none;box-shadow:none}
.teaser-card:hover .card-art>.art-image{transform:none}
.teaser-card:hover .card-art>.sugar-logo{transform:translateX(-50%)}
.featured .card-action{font-size:13px;margin-top:auto;padding-top:15px}
@media(max-width:550px){.card-action{font-size:9px;letter-spacing:.06em;margin-top:12px;padding-top:8px}.card-action span{font-size:15px}.featured .card-action{font-size:11px}}

/* Real screenshots replace the decorative end illustration. */
.gameplay-stage{height:570px;isolation:isolate;overflow:visible}
.gameplay-stage:before{content:'';position:absolute;width:88%;aspect-ratio:1;border:1px solid rgba(103,232,249,.17);border-radius:50%;left:6%;top:4%;background:radial-gradient(circle at center,rgba(124,58,237,.18),transparent 66%)}
.gameplay-kicker{position:absolute;left:4%;top:1%;color:#67e8f9;font-size:11px;font-weight:700;letter-spacing:.2em;z-index:4}
.next-shot{position:absolute;z-index:2;margin:0;width:44%;max-width:275px;height:82%;padding:8px 8px 0;background:#071324;border:1px solid rgba(165,243,252,.45);border-radius:25px;box-shadow:0 26px 45px rgba(0,0,0,.4),0 0 35px rgba(34,211,238,.08);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.next-shot img{width:100%;height:calc(100% - 31px);object-fit:cover;object-position:top;border-radius:17px 17px 5px 5px}
.next-shot figcaption{height:31px;display:flex;align-items:center;justify-content:center;color:#a5f3fc;font-size:9px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.shot-tower{left:8%;top:11%;transform:rotate(-9deg)}
.shot-sugar{right:4%;top:4%;transform:rotate(8deg);z-index:3}
.shot-tower:hover{transform:rotate(-5deg) translateY(-12px);box-shadow:0 38px 60px rgba(0,0,0,.55)}
.shot-sugar:hover{transform:rotate(4deg) translateY(-12px);box-shadow:0 38px 60px rgba(0,0,0,.55)}
@media(max-width:800px){.gameplay-stage{height:490px}.next-shot{height:86%;max-width:230px}.gameplay-kicker{left:8%}}
@media(max-width:550px){.gameplay-stage{height:395px}.next-shot{width:45%;height:84%;padding:5px 5px 0;border-radius:17px}.next-shot img{height:calc(100% - 25px);border-radius:11px 11px 3px 3px}.next-shot figcaption{height:25px;font-size:7px;letter-spacing:.06em}.shot-tower{left:5%;top:13%}.shot-sugar{right:3%;top:7%}.gameplay-kicker{font-size:9px;left:4%;top:0}}
@media(prefers-reduced-motion:reduce){.next-shot{transition:none}}

/* A visible keyboard path through the landing page. */
a:focus-visible,button:focus-visible{outline:3px solid #a5f3fc;outline-offset:4px}

/* Fix 13.10.2026 (Argus, beim Rollout gemessen): .ticker traegt
   `transform: rotate(-1.4deg) scale(1.02)`. Die transformierte Box ist dadurch
   breiter als der Viewport und ragt links heraus (gemessen: links -15px /
   Breite 1470px bei 1440px Fenster, -4px / 399px bei 390px). Folge war
   Querscroll auf der ganzen Seite, auf dem Telefon besonders stoerend.
   Geklammert wird an der Wurzel, damit Drehung und Skalierung als Gestaltung
   erhalten bleiben. `clip` statt `hidden`: `hidden` macht das Element zum
   Scroll-Container und setzt `position:sticky` der Kopfleiste ausser Kraft. */
html{overflow-x:clip}

/* Abstaende an den Abschnittsnahten (Martin 13.10.2026: "nicht so viel leere
   freie Flaeche in der Hoehe zwischen den sections").
   Gemessen vorher an der Live-Seite, nicht geschaetzt: vier leere Baender
   ohne jeden Inhalt — 149px (Lineup→Ideas), 153px (Ideas→Inside), 158px
   (Inside→Support), 166px (Support→Fusszeile), zusammen 626px = 10% der
   Seitenhoehe. Jedes Band ist die Summe aus Unterpolsterung des einen und
   Oberpolsterung des naechsten Abschnitts.
   Ziel ist rund 90-100px je Naht: genug, dass die Abschnitte als eigene
   Kapitel lesbar bleiben, aber ohne Leerlauf beim Scrollen. Die Polsterung
   INNERHALB der Abschnitte (Ueberschriftenabstaende, Kartenraster) bleibt
   unangetastet — gefragt war der Abstand zwischen den Abschnitten. */
.games-section{padding-top:88px;padding-bottom:44px}
.manifesto{padding-top:52px;padding-bottom:48px}
.next{padding-top:52px;padding-bottom:48px}
.support{padding-top:52px;padding-bottom:56px}
@media(max-width:800px){
  .games-section{padding-top:70px;padding-bottom:40px}
  .manifesto{padding-top:46px;padding-bottom:42px}
  .next{padding-top:46px;padding-bottom:42px}
  .support{padding-top:46px;padding-bottom:46px}
}
@media(max-width:550px){
  .games-section{padding-top:62px;padding-bottom:34px}
  .manifesto{padding-top:38px;padding-bottom:36px}
  .next{padding-top:38px;padding-bottom:36px}
  .support{padding-top:38px;padding-bottom:40px}
}
/* Letzte verbliebene Naht: unter dem Support-Abschnitt standen 132px leer.
   Davon kamen 56px aus der Polsterung oben und 75px daraus, dass
   .footer-main seinen Inhalt in einer Mindesthoehe von 245px senkrecht
   zentriert — gemessen, nicht geraten. 190px halten die Fusszeile weiter
   als eigenen Block lesbar und nehmen den Leerlauf heraus. */
.footer-main{min-height:190px}

/* Hero-Unterkante: die Zierringe endeten auf einer geraden Linie
   (Martin 13.10.2026: "wirkt abgeschnitten der obere Teil, oberhalb des
   Newsbars"). Gemessen am Live-Stand, und zwar auch gegen das unveraenderte
   Paket-Stylesheet — der Schnitt war vorher schon da, nicht Folge der
   Abstandskorrektur:
     1440x900  .orbit-three  36px oben + 46px unten abgeschnitten
     1280x800  .orbit-three  28px oben + 30px unten
      390x844  .orbit-three  93px unten, .orbit-two 15px unten
   `overflow:hidden` am Hero bleibt — ohne das erzeugen die Ringe Querscroll.
   Stattdessen laufen die Ringe weich aus, bevor sie die Kante erreichen:
   die Blende ist breiter als der jeweils gemessene Schnitt, der Ring ist an
   der Schnittkante also schon unsichtbar. orbit-three braucht mehr, weil er
   mobil 93px ueberstand. */
.hero-art .orbit{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.hero-art .orbit-three{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
}

/* Hero schneidet seinen eigenen Text ab (Martin 13.10.2026: "wirkt
   abgeschnitten der obere Teil"). Ursache: `.hero` hat eine FESTE Hoehe
   (`height:min(850px, 100svh - 84px)`) und `overflow:hidden`, waehrend die
   Ueberschrift mit der Fensterbreite waechst (bis 230px). Sobald der Inhalt
   hoeher wird als die Deckelung, faellt er hinten heraus. Gemessen:
     1920x1080  Inhalt 927px in 850px Hero -> die beiden Schlusszeilen
                "Neue Welten. Wilde Ideen..." und "Wir bauen wieder..."
                um 7px bzw. 4px unten beschnitten
     1440x820   Inhalt 826px in 740px Hero -> 16px bzw. 14px, dazu der Pfeil
   Aus der Deckelung wird eine Untergrenze: der Hero haelt dieselbe Hoehe wie
   bisher, waechst aber mit, wenn der Inhalt mehr braucht. Unter 801px gilt
   weiter die bestehende Mobilregel (height:auto, eigener min-height). */
@media(min-width:801px){
  .hero{height:auto;min-height:clamp(480px,calc(100svh - 84px),850px)}
}

/* Hero naeher an die Leiste, damit auf einem 13-Zoll-MacBook nichts unter die
   Fensterkante faellt (Martin 13.10.2026). Gemessen VOR dem Eingriff, sichtbarer
   Bereich je Fenster — so viel Text stand unter der Kante:
     1470x830 (MBA13 Safari)  22px     1440x776 (MBP13 Safari)  64px
     1470x800 (MBA13 Chrome)  52px     1440x746 (MBP13 Chrome)  94px
   Ursache war die feste Oberpolsterung von bis zu 165px. Sie haengt jetzt an
   der FENSTERHOEHE statt an der Breite: auf 13 Zoll bleiben ~37-42px unter der
   Leiste, auf 1920x1080 sind es 54px — vorher 165px, also auch dort deutlich
   naeher an die Leiste geruckt.
   Die Unterpolsterung ist bewusst FEST: `.hero-index` liegt `position:absolute`
   an der Hero-Unterkante und ueberlappt sonst die letzte Textzeile. Genau das
   ist beim ersten Anlauf passiert (11-22px Ueberlappung, je Fenster gemessen) —
   die 62px halten die Leiste frei. */
.hero-content{padding-top:clamp(28px,5vh,96px);padding-bottom:62px}

/* Support-Karten: gleiche Hoehe (Martin 13.10.2026: "links lieber gleiche
   Hoehe wie rechts"). Die Karten stehen im selben Raster; Spaeti ist hoeher,
   weil es die Tokyo-Edition zusaetzlich traegt. Gleiche Hoehe heisst, dass
   die Horde-Karte Restflaeche behaelt — das ist Martins Entscheidung gegen
   die ungleich hohen Karten, nicht ein uebersehener Fehler.
   `align-self` bleibt damit beim Raster-Standard (stretch); hier steht nur
   die Begruendung, damit niemand das spaeter "repariert". */

/* ---- Rechtsseiten im neuen Design (Martin 13.10.2026) --------------------
   /impressum, /imprint, /datenschutz, /privacy lagen noch auf der alten
   `style.css` (Serifen-Default, weisser Grund) und sahen aus wie eine andere
   Website. Der Rechtstext selbst ist unveraendert uebernommen — hier steht
   nur die Huelle. Lesemass bewusst auf 66ch begrenzt: das ist Fliesstext,
   nicht Startseite. */
.legal{padding-top:64px;padding-bottom:96px;position:relative;
  background:radial-gradient(ellipse 50% 40% at 92% 6%,rgba(124,58,237,.10),transparent 72%),
             radial-gradient(ellipse 40% 30% at 4% 94%,rgba(34,211,238,.07),transparent 76%)}
.legal-inner{max-width:660px;margin-inline:auto}
.legal-lang{margin:0 0 42px;font-size:11px;letter-spacing:.17em;font-weight:700}
.legal-lang a{color:#67e8f9;text-decoration:none}
.legal-lang a:hover{color:#a5f3fc}
.legal h1{font-size:clamp(50px,7.5vw,104px);line-height:.85;letter-spacing:-.075em;
  font-weight:700;margin:0 0 16px}
.legal .stand{margin:0;font-size:11px;letter-spacing:.17em;font-weight:700;
  color:#67e8f9;text-transform:uppercase}
.legal .lede{font-size:clamp(18px,1.9vw,23px);line-height:1.45;color:#dceaf3;
  margin:30px 0 8px}
.legal h2{font-size:clamp(23px,2.5vw,33px);line-height:1.1;letter-spacing:-.045em;
  font-weight:700;margin:52px 0 14px;padding-top:22px;
  border-top:1px solid rgba(165,243,252,.22)}
.legal p{font-size:17px;line-height:1.62;color:#b9c9d2;margin:0 0 15px}
.legal a{color:#67e8f9;text-underline-offset:3px}
.legal a:hover{color:#a5f3fc}
.legal li{font-size:17px;line-height:1.62;color:#b9c9d2;margin:0 0 10px}
.legal-page .site-header{position:sticky;top:0}
@media(max-width:800px){
  .legal{padding-top:46px;padding-bottom:72px}
  .legal h1{font-size:clamp(42px,12vw,70px)}
  .legal h2{margin:40px 0 12px}
  .legal-lang{margin-bottom:30px}
}

/* ---- iOS: Symbol-Icons als Text, nicht als Emoji (Martin 13.10.2026) -----
   Befund aus Martins iPhone-Screenshot, am Livestand nachgemessen: ↗ (U+2197),
   ↘ (U+2198) und ✳ (U+2733) stehen in Unicodes Emoji-Liste. Die Schriftkette
   `Barlow, 'Arial Narrow', sans-serif` traegt keinen dieser Codepoints — die
   ausgelieferte Barlow ist subsettet. CoreText faellt auf iOS deshalb auf
   Apple Color Emoji zurueck: statt der duennen Linien-Icons erscheinen
   farbige Kacheln (gruenes Quadrat mit Stern, blaues mit Pfeil), und die
   CSS-Farben darunter greifen nicht mehr, weil Emoji-Glyphen eigene Farben
   mitbringen. Auf Desktop und Android landet dieselbe Kette in einer
   Textschrift — der Fehler ist iOS-only.

   Erste Lage ist `patches/games-icons-text.py`: U+FE0E hinter jedes dieser
   Zeichen im index.html. Hier steht die zweite Lage — fuer `content`-Zeichen,
   die das Skript nicht erreicht, und als Netz fuer Browser, die beim
   Variation Selector schwaecheln. `font-variant-emoji` ist vererbt, deshalb
   reicht body; echte Emoji gibt es auf der Seite keine. */
body{font-variant-emoji:text}
.hero-art:before{content:'\002733\00FE0E'}

/* ---- Hero-Collage vs. Index-Leiste (Martin 13.10.2026, "der Teil ist immer
   noch abgeschnitten") ----------------------------------------------------
   Der frueher vermutete Grund war falsch. Es ist nicht `overflow:hidden` am
   Hero und es sind nicht die Zierringe. Es ist `.hero-index` — die Leiste
   "9 WORLDS AND COUNTING / SCROLL TO ENTER" am Hero-Fuss: 51px hoch,
   `position:absolute;bottom:0`, `z-index:3` und **`background:rgba(5,6,12,.92)`**,
   also fast deckend, mit einer 1px-Oberkante quer ueber die volle Breite.
   Genau diese Oberkante ist die gerade Linie im Screenshot.

   Das Spaeti-Poster steht als vorderste Karte am tiefsten und laeuft unter
   diese Leiste. Gemessen (Abstand Posterunterkante zur Leistenoberkante,
   negativ = verdeckt):
      393x852   -50px   (die ganze Beschriftung "02 / SPÄTI TYCOON" weg)
      600x900   -52px
     1512x860    -9px   (Beschriftung quer durchgeschnitten)
     1440x760   -27px
   Horde und Tap liegen hoeher und waren nie betroffen — deshalb faellt es
   nur an einer Karte auf und sieht nach "abgeschnitten" statt nach
   "ueberlappt" aus.

   Zwei Breitenbaender, weil der Hero dort verschieden gebaut ist:
   ab 801px hat `.hero-art` keine eigene Hoehe und fuellt die Rasterzeile —
   ein `margin-bottom` verkuerzt die Zeile, die Prozentpositionen der Poster
   rechnen gegen die kuerzere Box, die Collage rueckt als Ganzes hoch und die
   Hero-Hoehe bleibt gleich. Darunter hat `.hero-art` eine feste Hoehe
   (400px / 320px); dort traegt margin nichts, also hebt und verkleinert ein
   Transform die Collage, was die Anordnung massstabsgetreu erhaelt.
   Nach dem Eingriff gemessen: 393x852 +18px, 600x900 +24px, 1440x760 +20px,
   1512x860 +55px, 1920x1080 +57px. */
@media(min-width:801px){
  .hero-art{margin-bottom:110px}
}
@media(max-width:800px){
  .hero-art{transform:translateY(-36px) scale(.9);transform-origin:top center}
}

/* sprachslider */
/* Einheitlicher DE/EN-Umschalter, 26.10.2026. Zwei echte Verweise, kein
   JavaScript. Farbe wird geerbt (currentColor), damit das Bauteil auf hellen
   und dunklen Seiten ohne eigene Farbwerte sitzt. */
.sprachslider{position:relative;display:inline-flex;align-items:center;
  border:1px solid currentColor;border-radius:999px;padding:2px;
  font-size:12px;line-height:1;letter-spacing:.08em;isolation:isolate;
  vertical-align:middle}
.sprachslider > a{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;min-width:38px;min-height:34px;padding:0 10px;
  border-radius:999px;text-decoration:none;color:inherit;font-weight:600;
  opacity:.5;transition:opacity .2s}
.sprachslider > a[aria-current]{opacity:1}
.sprachslider > a:hover,.sprachslider > a:focus-visible{opacity:.85}
.sprachslider > a[aria-current]:hover{opacity:1}
.sprachslider::before{content:"";position:absolute;z-index:0;top:2px;bottom:2px;
  left:2px;width:calc(50% - 2px);border-radius:999px;background:currentColor;
  opacity:.18;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.sprachslider[data-aktiv="en"]::before{transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){
  .sprachslider::before,.sprachslider > a{transition:none}}