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

:root{color-scheme:dark;--orange:#ffae48;--muted:#aba9aa;--mono:'Space Mono',monospace;--heading:'Barlow Condensed','Arial Narrow',Impact,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#090b10;color:#f6f1e9;font-family:Arial,Helvetica,sans-serif}a{color:inherit}.world{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(5,8,14,.42) 0%,rgba(7,9,14,.14) 32%,rgba(9,10,15,.72) 68%,#090b10 100%),url('./assets/storm-world.png') center 42%/cover no-repeat}.world:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 25%,#06090c66 100%)}.page{max-width:1600px;min-height:100svh;margin:auto;padding:0 4.5%;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;min-height:94px;border-bottom:1px solid #ffffff18}.wordmark{display:flex;align-items:center;gap:12px;font-family:var(--heading);font-size:23px;font-weight:800;letter-spacing:2px;text-decoration:none}.mark{display:grid;place-items:center;width:28px;height:31px;color:#14100a;background:var(--orange);font-size:24px;clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}.edition{font:12px var(--mono);color:#c0b6b0;margin-left:3px}.header-status{display:flex;align-items:center;gap:9px;font:11px var(--mono);letter-spacing:2px;color:#d0c5c0}.header-status>span{width:6px;height:6px;background:var(--orange);box-shadow:0 0 12px #ffae4866}main{display:flex;flex-direction:column;align-items:center;text-align:center;padding:37px 0 44px;flex:1;justify-content:center}.eyebrow{display:flex;align-items:center;gap:16px;font:11px var(--mono);letter-spacing:4px;color:#ded0bd}.eyebrow>span{height:1px;width:30px;background:#ffba6555}.logo-wrap{margin:0;line-height:0;width:min(690px,82vw)}.logo{width:100%;height:auto;filter:drop-shadow(0 12px 35px #0009);animation:levitate 7s ease-in-out infinite}.intro{margin-top:-12px}h2{margin:0;font-family:var(--heading);font-weight:800;font-size:clamp(26px,3.2vw,42px);letter-spacing:2px;line-height:1.2}h2 span{color:#ffc074}.intro p{font-size:15px;line-height:1.6;color:#c3bcc0;margin:10px 0 0}.countdown{width:min(460px,100%);margin:29px 0 26px;padding:17px 24px 13px;background:linear-gradient(120deg,#14161bce,#101219d9);border:1px solid #ffffff20;position:relative;box-shadow:0 8px 35px #0003;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.countdown:before{content:'';position:absolute;top:0;left:0;width:48px;height:2px;background:var(--orange)}.countdown-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font:10px var(--mono);letter-spacing:1.2px;color:#aaa5aa}.error-label{color:#ef8c82;background:#d2534914;padding:3px 6px;white-space:nowrap}.error-label>span{margin-right:5px}.clock{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 0 15px}.unit{min-width:60px;display:flex;flex-direction:column;gap:6px}.digits{position:relative;font:700 clamp(35px,5vw,48px)/1.15 var(--mono);letter-spacing:1px;color:#e8e5e2;text-shadow:2px 0 #ff6a704f,-2px 0 #72d8ed44}.digits:after{content:attr(data-value);position:absolute;inset:0;color:#ee8b79;clip-path:inset(48% 0 43%);transform:translateX(3px)}.colon{font:28px var(--mono);padding-top:5px;color:#685f61}.unit-label{font:9px var(--mono);letter-spacing:1.6px;color:#99939d}.connection{display:flex;align-items:center;justify-content:center;gap:7px;border-top:1px solid #ffffff0b;padding-top:10px;color:#a29aa0;font:10px/1.5 var(--mono)}.signal-icon{font-size:18px;color:#e39362}.cursor{color:var(--orange);animation:blink 1.5s steps(2,end) infinite}.download button{display:flex;align-items:center;justify-content:center;gap:13px;width:310px;max-width:80vw;min-height:58px;border:1px solid #ffd38a;background:linear-gradient(110deg,#ffc577,#f8a64c);box-shadow:0 0 32px #ff9b3e16,inset 0 -4px 0 #b46634;color:#302012;font:800 20px var(--heading);letter-spacing:2px;opacity:1;cursor:not-allowed;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.download svg{width:19px;height:19px}.button-corner{margin-left:18px;font:20px Arial;opacity:.5}.download p{font:10px/1.6 var(--mono);color:#8d878e;margin:12px 0 0}footer{border-top:1px solid #ffffff12;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#89858d;font:10px/1.6 var(--mono);letter-spacing:1px}.footer-divider{margin:0 13px;color:#514a4d}.footer-note{font-size:9px}.footer-note>span{color:var(--orange);margin-left:12px}.ember{position:fixed;bottom:-20px;width:3px;height:3px;background:#ff9e43;box-shadow:0 0 8px #ff7a28;pointer-events:none;animation:rise linear infinite;z-index:-1}.is-glitching .digits{animation:corrupt .32s steps(2,end) 2}.is-glitching .error-label{color:#ffb3ad}.wordmark:focus-visible{outline:2px solid var(--orange);outline-offset:8px}@keyframes levitate{50%{transform:translateY(-7px)}}@keyframes blink{50%{opacity:0}}@keyframes rise{0%{transform:translate(0,0) rotate(0);opacity:0}12%{opacity:.6}80%{opacity:.4}100%{transform:translate(60px,-85vh) rotate(180deg);opacity:0}}@keyframes corrupt{25%{transform:translateX(-2px);text-shadow:3px 0 #e8586b,-3px 0 #8fe4f4}75%{transform:translateX(2px);clip-path:inset(2% 0 8%)} }@media(min-width:1500px){.logo-wrap{width:760px}main{padding-top:42px;padding-bottom:50px}}@media(max-width:600px){.page{padding:0 6%}.header{min-height:76px}.wordmark{font-size:20px;gap:8px}.header-status{font-size:9px;letter-spacing:1px}.header-status>span{display:none}.edition{font-size:10px}main{padding:42px 0}.eyebrow{font-size:9px;letter-spacing:2.8px;gap:10px}.eyebrow>span{width:18px}.logo-wrap{width:110%;margin:15px -5% 12px}.intro{margin-top:0}.intro p{max-width:270px;margin:12px auto 0;font-size:14px}h2{font-size:30px;max-width:320px;margin:auto;letter-spacing:1px}.countdown{margin-top:28px;padding:16px}.countdown-heading{font-size:9px;letter-spacing:.7px}.unit{min-width:48px}.unit-label{font-size:8px;letter-spacing:1px}.connection{font-size:9px;gap:4px}.download button{width:290px}footer{padding:19px 0;min-height:80px;flex-direction:column;gap:7px;text-align:center;font-size:9px}.footer-note{font-size:8px}.world{background-position:center center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.ember{display:none}}

/* Keep supporting copy readable at every viewport size. */
.header-status,.eyebrow,.countdown-heading,.unit-label,.connection,.download p,footer,.footer-note{font-size:12px}.intro p{font-size:16px}.countdown{width:min(490px,100%)}@media(max-width:600px){.header-status{max-width:115px;text-align:right;line-height:1.6}.eyebrow{letter-spacing:2px}.countdown-heading{font-size:11px;letter-spacing:0}.unit-label{font-size:10px}.connection{font-size:11px}.footer-note{font-size:10px}.intro p{font-size:16px}}

/* Community and modpack */
.wordmark{display:block;width:230px;height:66px;overflow:hidden;position:relative;flex-shrink:0}
.wordmark img{position:absolute;width:270px;max-width:none;height:auto;left:-21px;top:-9px}
.nav-discord{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font:700 12px var(--mono);letter-spacing:1px;padding:12px 16px;border:1px solid #958aff66;background:#7363fb18;color:#e1dcff;transition:background .2s,border-color .2s}
.nav-discord:hover{background:#7363fb38;border-color:#b8aaff}
.join{width:min(490px,100%);padding:4px 0 27px}
.join h2{font-size:26px;letter-spacing:1px}
.join h2 span{color:#b9afff}
.join p{font-size:16px;line-height:1.6;color:#d2ccd8;margin:10px 0 18px}
.discord-button{display:flex;justify-content:center;align-items:center;gap:24px;min-height:62px;width:100%;background:linear-gradient(110deg,#8273ff,#5a51e6);color:white;text-decoration:none;font:800 23px var(--heading);letter-spacing:2px;border:1px solid #a79dff;box-shadow:0 8px 35px #6551ec30,inset 0 -4px 0 #4036aa;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:filter .2s,transform .2s}
.discord-button:hover{filter:brightness(1.16);transform:translateY(-2px)}
.discord-button:focus-visible,.nav-discord:focus-visible{outline:3px solid #ffe0a6;outline-offset:4px;filter:brightness(1.2)}
.download{display:flex;flex-direction:column;align-items:center;width:min(490px,100%);border-top:1px solid #ffffff1a;padding-top:23px}
.download h2{font:600 16px var(--heading);letter-spacing:2px;margin:0 0 14px;color:#c9c0b7}
.download button{background:linear-gradient(110deg,#30271e,#241f1c);border-color:#c3956155;color:#cbb293;box-shadow:inset 0 -3px 0 #171411;min-height:52px;font-size:19px}
.download p{font-size:12px;max-width:100%;line-height:1.7}
.about{width:min(670px,100%);margin-top:56px;padding-top:30px;border-top:1px solid #ffffff14}
.about-label{font:12px var(--mono);letter-spacing:2px;color:#b99573}
.about h2{font-size:28px;margin-top:14px;letter-spacing:1px}
.about p{font-size:16px;line-height:1.8;color:#ada7b0;margin:14px 0 0}
.about .unofficial{font-size:12px;color:#918993}
@media(max-width:600px){.header{gap:12px}.wordmark{width:155px;height:56px}.wordmark img{width:180px;left:-14px;top:0}.nav-discord{font-size:11px;letter-spacing:0;padding:10px;gap:6px;text-align:center;max-width:146px}.join h2{font-size:25px}.join{padding-top:6px}.about{margin-top:38px}.about h2{font-size:26px}.download h2{font-size:16px}.download button{max-width:100%}}
@media(max-width:360px){.wordmark{width:125px}.wordmark img{width:150px;left:-12px;top:3px}.nav-discord{max-width:130px;font-size:10px}}

/* Season three: the return of REviil. */
.intro h2{max-width:780px;font-size:clamp(30px,3.3vw,44px)}
.intro p{line-height:1.65}
.join .join-requirement{font:12px/1.7 var(--mono);color:#b9afff;margin:-4px 0 20px}
.story{width:min(900px,100%);margin:42px 0 48px;text-align:left;border:1px solid #fa996331;background:linear-gradient(120deg,#251613ee,#0d1018ed);position:relative}
.story:before{content:'';position:absolute;top:-1px;left:-1px;width:80px;height:3px;background:#ffad69}
.story-topline{display:flex;justify-content:space-between;gap:16px;padding:17px 30px;border-bottom:1px solid #efb08720;font:12px/1.7 var(--mono);letter-spacing:1px;color:#c49e89}
.story-topline span:last-child{color:#ee8c7b}
.story-content{padding:38px clamp(22px,5vw,60px) 40px}
.story-kicker{font:12px/1.7 var(--mono);letter-spacing:2px;color:#aa9290}
.story h2{font-size:clamp(36px,5.5vw,64px);letter-spacing:1px;margin:12px 0 0;max-width:none}
.story h2 span{color:#ffad69}
.story p{max-width:690px;font-size:16px;line-height:1.85;color:#c0b8b9;margin:18px 0 0}
.story .story-lead{font-size:21px;color:#f0dace;margin-top:7px}
.mission{display:flex;flex-direction:column;gap:9px;margin-top:30px;border-left:2px solid #f7a35c;padding:4px 0 4px 20px}
.mission span{font:12px var(--mono);letter-spacing:2px;color:#ae8876}
.mission strong{font:700 clamp(20px,3vw,28px)/1.4 var(--heading);letter-spacing:2px;color:#ffbe89}
.story .story-challenge{margin-top:27px;color:#ded1c9}
.story-challenge strong{display:block;color:#fff0de}
.download{width:min(730px,100%);padding:28px 36px 30px;border:1px solid #ffb76645;background:radial-gradient(ellipse at top,#5536194d,transparent 80%),#101115e8;box-shadow:0 14px 55px #0003}
.download-heading{display:flex;justify-content:space-between;gap:14px;width:100%;font:12px/1.6 var(--mono);letter-spacing:1px;color:#b9a493}
.lock-status{color:#f4b172;white-space:nowrap}
.download h2{font:800 clamp(34px,5vw,48px)/1.2 var(--heading);color:#f3e6d5;margin:25px 0 8px;letter-spacing:2px}
.download h2 span{color:#ba926e}
.download .download-intro{font:16px/1.7 Arial,sans-serif;color:#bfb1a7;margin:0 0 23px}
.download button{width:100%;max-width:520px;min-height:76px;font-size:26px;letter-spacing:3px;background:linear-gradient(110deg,#483423,#31261e);border-color:#c3956170;color:#e7c39b}
.download svg{width:24px;height:24px}
.download #download-note{font:14px/1.9 var(--mono);color:#a99b92;margin-top:20px}
.download #download-note strong{color:#dec7b3;font-weight:400}
.about{margin-top:65px;padding-top:35px}
.about h2{font-size:36px}
.about .about-invitation{margin-top:24px;color:#d7d0df}
.about-discord{display:inline-flex;align-items:center;justify-content:center;gap:25px;margin:25px 0 12px;min-height:50px;padding:10px 25px;border:1px solid #a398ff77;color:#d8d1ff;text-decoration:none;font:700 19px var(--heading);letter-spacing:1.5px;background:#7161ee14}
.about-discord:hover{background:#7161ee35}
.about-discord:focus-visible{outline:2px solid #ffca8d;outline-offset:4px}
.footer-season{font:800 28px var(--heading);color:#cb9a67;letter-spacing:2px}
@media(max-width:600px){.intro h2{max-width:360px;font-size:31px}.story{margin:28px 0 32px}.story-topline{padding:14px 20px;flex-direction:column;gap:4px;font-size:12px}.story h2{font-size:40px;text-align:left;margin:12px 0 0}.story-content{padding:27px 23px 30px}.story .story-lead{font-size:19px}.mission strong{letter-spacing:1px}.download{padding:22px 20px}.download-heading{flex-direction:column;gap:7px;align-items:center;letter-spacing:1px}.download h2{font-size:35px;max-width:none;margin-top:20px}.download button{max-width:100%;min-height:72px;font-size:23px}.download #download-note{font-size:12px}.about{margin-top:40px}.about h2{font-size:31px}}

/* Animated hero: screen blends the supplied video's black background. */
.hero-animation{position:relative;width:min(690px,82vw);margin:0 0 14px}
.hero-animation .logo-wrap{position:relative;width:100%;margin:0;aspect-ratio:1672/941}
.wheel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;mix-blend-mode:screen}
.video-ready .wheel-video{opacity:1}
.video-ready .logo{opacity:0;animation:none}
.motion-toggle{display:block;margin:0 auto;padding:8px 12px;background:#11121bb3;border:1px solid #ffffff24;color:#c7bfca;font:12px/1.4 var(--mono);cursor:pointer;letter-spacing:1px}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{border-color:#ffc074;color:#ffc074}
.motion-toggle:focus-visible{outline:2px solid #ffc074;outline-offset:4px}
@media(min-width:1500px){.hero-animation{width:760px}}
@media(max-width:600px){.hero-animation{width:110%;margin:15px -5% 20px}.hero-animation .logo-wrap{width:100%;margin:0}}
@media(prefers-reduced-motion:reduce){.wheel-video,.motion-toggle{display:none!important}.hero-animation .logo{opacity:1}}
