@font-face{font-family:Cinzel;src:url(assets/fonts/cinzel.woff) format("woff");font-weight:400 900;font-display:swap}
@font-face{font-family:Jost;src:url(assets/fonts/jost.woff) format("woff");font-weight:100 900;font-display:swap}

:root{
  /* --u is one reference pixel: the layout is the 1536x1024 design, scaled to fit */
  --u:min(calc(100vw / 1536),calc(100svh / 1024));
  --art-u:max(calc(100vw / 1536),calc(100svh / 1024));
  --c1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg transform='rotate(0 13 13)'%3E%3Cg fill='none' stroke='%23e8c27a' stroke-width='1'%3E%3Cpath d='M1 15V8l7-7h7'/%3E%3Cpath d='M5 11V9.500l4.500-4.500H11' opacity='.6'/%3E%3C/g%3E%3Cpath d='M8 5.500l1.800 1.800L8 9.100 6.200 7.300z' fill='%23f6dea4'/%3E%3C/g%3E%3C/svg%3E");--c2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg transform='rotate(90 13 13)'%3E%3Cg fill='none' stroke='%23e8c27a' stroke-width='1'%3E%3Cpath d='M1 15V8l7-7h7'/%3E%3Cpath d='M5 11V9.500l4.500-4.500H11' opacity='.6'/%3E%3C/g%3E%3Cpath d='M8 5.500l1.800 1.800L8 9.100 6.200 7.300z' fill='%23f6dea4'/%3E%3C/g%3E%3C/svg%3E");--c3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg transform='rotate(180 13 13)'%3E%3Cg fill='none' stroke='%23e8c27a' stroke-width='1'%3E%3Cpath d='M1 15V8l7-7h7'/%3E%3Cpath d='M5 11V9.500l4.500-4.500H11' opacity='.6'/%3E%3C/g%3E%3Cpath d='M8 5.500l1.800 1.800L8 9.100 6.200 7.300z' fill='%23f6dea4'/%3E%3C/g%3E%3C/svg%3E");--c4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg transform='rotate(270 13 13)'%3E%3Cg fill='none' stroke='%23e8c27a' stroke-width='1'%3E%3Cpath d='M1 15V8l7-7h7'/%3E%3Cpath d='M5 11V9.500l4.500-4.500H11' opacity='.6'/%3E%3C/g%3E%3Cpath d='M8 5.500l1.800 1.800L8 9.100 6.200 7.300z' fill='%23f6dea4'/%3E%3C/g%3E%3C/svg%3E");
  --bg:#04070e;--bg2:#070c18;--ink:#eef3fb;--mute:#9fb0c8;
  --blue:#2a8cff;--cyan:#6fc8ff;--gold:#e8c27a;--gold2:#a97c34;
  --line:rgba(90,160,255,.22);
  --display:Cinzel,"Trajan Pro",Georgia,serif;
  --label:Jost,"Century Gothic","Segoe UI",sans-serif;
}
@supports not (height:1svh){:root{--u:min(calc(100vw / 1536),calc(100vh / 1024));--art-u:max(calc(100vw / 1536),calc(100vh / 1024))}}
*{box-sizing:border-box}
html{scrollbar-color:#a97c34 #04070e;scrollbar-width:thin}
::selection{background:#2a8cff66;color:#fff}
[tabindex="-1"]:focus{outline:0}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:clip}
html.js-scroll{scroll-behavior:auto}
body{margin:0;overflow-wrap:break-word;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--label);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#000;padding:8px 14px;border:1px solid var(--blue)}
.skip:focus{top:12px}

/* ---------- top bar ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;height:calc(var(--art-u) * 84);min-height:60px;animation:drop 1s .2s cubic-bezier(.2,.8,.2,1) backwards;transition:background .4s,box-shadow .4s}
.top::after{content:"";position:absolute;inset:0 0 -70%;background:linear-gradient(#050913f0,#05091399 52%,#05091300);opacity:.85;pointer-events:none;z-index:-1}
.top.solid::after{opacity:0}
.top.solid{background:linear-gradient(#060b16f2,#050913d9);backdrop-filter:blur(14px);box-shadow:0 10px 40px #0009}
.top.solid::before{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#a97c34 22%,#ffe6ad 50%,#a97c34 78%,transparent)}
.top-in{position:relative;width:100%;height:100%;margin:auto;display:flex;align-items:center}
.brand{display:block;position:absolute;left:calc(var(--u) * 24);top:calc(var(--u) * 14);width:calc(var(--u) * 240);min-width:170px}
.brand img{width:100%;height:auto;filter:drop-shadow(0 0 8px #6fc8ff55)}
.menu{position:absolute;left:50%;top:calc(var(--u) * 44);transform:translate(-50%,-50%);display:flex;gap:calc(var(--u) * 24);align-items:center}
.menu>a{position:relative;font:400 max(12px,calc(var(--u) * 13.5))/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:#e7edf7;padding:calc(var(--u) * 10) 0;transition:color .25s,text-shadow .25s}
.menu>a:hover,.menu>a.on{color:#fff;text-shadow:0 0 12px #6fc8ffaa}
.ind{position:absolute;left:0;bottom:calc(var(--u) * -6);height:2px;width:40px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),var(--cyan),transparent);box-shadow:0 0 10px 1px var(--blue);transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s}

/* hexagon buttons: metal edge, inner hairline, gems on the tips */
.hex{--c:calc(var(--h) * .5);--h:max(40px,calc(var(--u) * 42));--shape:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% 50%,calc(100% - var(--c)) 100%,var(--c) 100%,0 50%);--shape-in:polygon(calc(var(--c) - 4px) 0,calc(100% - var(--c) + 4px) 0,100% 50%,calc(100% - var(--c) + 4px) 100%,calc(var(--c) - 4px) 100%,0 50%);position:relative;display:inline-grid;place-items:stretch;height:var(--h);isolation:isolate;font-family:var(--label);font-weight:500;text-transform:uppercase;letter-spacing:.12em;transition:filter .35s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.hex::before,.hex::after{content:"";position:absolute;clip-path:var(--shape)}
.hex::before{inset:0;z-index:-2;background:var(--edge);background-size:220% 100%}
.hex:hover::before,.explore::before{animation:edgeflow 5s linear infinite}
.hex::after{inset:1.5px;z-index:-1;background:var(--fill)}
.hx{position:absolute;inset:0 -7px;z-index:0;pointer-events:none;background:var(--gem) left center/11px 11px no-repeat,var(--gem) right center/11px 11px no-repeat}
.hx::before,.hx::after{content:"";position:absolute;top:4px;bottom:4px;left:11px;right:11px;clip-path:var(--shape-in)}
.hx::before{background:var(--hair)}
.hx::after{top:5px;bottom:5px;left:12px;right:12px;background:var(--fill);clip-path:var(--shape-in)}
.hex>span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:1em;padding:0 calc(var(--c) + .8em);white-space:nowrap;overflow:hidden;clip-path:var(--shape)}
.hex>span::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:28%;background:linear-gradient(100deg,transparent,#ffffff77,transparent);transform:skewX(-20deg);opacity:0}
.hex:hover>span::after{animation:sheen .8s ease}
.hex:hover{transform:translateY(-1px)}
.hex:active{transform:translateY(1px) scale(.98)}
.hex.steel{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l6 6-6 6-6-6z' fill='%23dfe9f7'/%3E%3C/svg%3E");--edge:linear-gradient(100deg,#5c6f8a,#eef4fc 25%,#7f93ad 50%,#eef4fc 75%,#5c6f8a);--hair:linear-gradient(100deg,#5c6f8a88,#c3d2e6aa,#5c6f8a88);--fill:linear-gradient(#141c2c,#090d17 55%,#10172a);color:#eef4fc;filter:drop-shadow(0 0 5px #9fb8d844)}
.hex.steel:hover{filter:brightness(1.18) drop-shadow(0 0 14px #bcd3f0aa)}
.hex.gold{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l6 6-6 6-6-6z' fill='%23ffe6ad'/%3E%3C/svg%3E");--edge:linear-gradient(100deg,#8a6426,#ffeabb 25%,#b98c42 50%,#ffeabb 75%,#8a6426);--hair:linear-gradient(100deg,#7a5a24aa,#e8c27a99,#7a5a24aa);--fill:linear-gradient(#1a140e,#0a0709 55%,#120d08);color:#f8e0a6;text-shadow:0 0 12px #e8c27a66;filter:drop-shadow(0 0 6px #e8c27a40);font-size:max(12px,calc(var(--u) * 15))}
.hex.blue{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l6 6-6 6-6-6z' fill='%239fe0ff'/%3E%3C/svg%3E");--edge:linear-gradient(100deg,#1f74d6,#bdeaff 25%,#2f92f2 50%,#bdeaff 75%,#1f74d6);--hair:linear-gradient(100deg,#1f74d688,#6fc8ffaa,#1f74d688);--fill:linear-gradient(#0a2243,#050d1e 55%,#071730);color:#f1f8ff;text-shadow:0 0 12px #6fc8ff88;filter:drop-shadow(0 0 9px #2a8cffbb)}
.hex.gold.solid{--fill:linear-gradient(#ffe9b5,#d7a653 48%,#a9772e 52%,#e2b768);--hair:linear-gradient(100deg,#6b4a18,#fff3cf,#6b4a18);color:#2a1a06;text-shadow:0 1px 0 #ffefc466}
.acts{position:absolute;right:calc(var(--u) * 16);top:calc(var(--u) * 24);display:flex;gap:max(12px,calc(var(--u) * 14))}
.acts .hex{--c:calc(var(--h) * .42);font-size:max(12px,calc(var(--u) * 14))}
.acts .hex>span{padding:0 calc(var(--c) + .35em)}
.acts .hex.gold{min-width:max(128px,calc(var(--u) * 174))}
.menu-acts{display:none}
.hex.gold:hover{filter:brightness(1.18) drop-shadow(0 0 16px #e8c27ab0)}
.hex.blue:hover{filter:brightness(1.18) drop-shadow(0 0 18px #2a8cff)}
@keyframes edgeflow{to{background-position:-220% 0}}
.burger{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer}
.burger i{display:block;height:2px;margin:5px 0;background:#dfe9f7;transition:transform .3s,opacity .3s}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#000}
.art,#gl,#fx{position:absolute;inset:0;width:100%;height:100%}
.art{object-fit:cover;object-position:var(--fx,50%) 0;animation:wake 2.4s ease backwards}
#gl{opacity:0;transition:opacity 1.2s}
#gl.live{opacity:1}
#fx{pointer-events:none;mix-blend-mode:screen}
.floor{display:none;position:absolute;inset:auto 0 0;height:calc(var(--u) * 260);background:linear-gradient(transparent,#04070ee0 34%,#04070ef5 72%);pointer-events:none}
@media (min-aspect-ratio:8/5){.floor{display:block}}
.floor::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--u) * 174);height:1px;background:linear-gradient(90deg,transparent 2%,#2a8cff66 30%,#2a8cff66 70%,transparent 98%)}
.stage{position:absolute;left:50%;bottom:0;width:calc(var(--u) * 1536);height:calc(var(--u) * 1024);transform:translateX(-50%);pointer-events:none}
.stage>*{position:absolute;pointer-events:auto}
.stage::before{content:"";position:absolute;left:calc(var(--u) * 300);top:calc(var(--u) * 440);width:calc(var(--u) * 936);height:calc(var(--u) * 430);background:radial-gradient(closest-side,#04070ed9 45%,#04070e00);pointer-events:none}
.tag{left:0;right:0;top:calc(var(--u) * 515);text-align:center;font:400 calc(var(--u) * 21)/1.3 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#dfe5ee;text-shadow:0 0 16px #000c,0 0 4px #000a}
.rule{display:block;height:1px;background:linear-gradient(90deg,transparent,#3d97ff 25%,#3d97ff 75%,transparent);position:relative}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;background:#bfe6ff;transform:rotate(45deg);box-shadow:0 0 10px 3px var(--blue);animation:twinkle 2.6s ease-in-out infinite}
.stage .r1{left:calc(var(--u) * 525);width:calc(var(--u) * 490);top:calc(var(--u) * 547)}
.stage .r2{left:calc(var(--u) * 525);width:calc(var(--u) * 485);top:calc(var(--u) * 709)}
.biglogo{left:calc(var(--u) * 456);top:calc(var(--u) * 520);width:calc(var(--u) * 630);height:calc(var(--u) * 144)}
.biglogo img{width:100%;height:100%;filter:drop-shadow(0 0 8px #6fc8ff55);animation:logopulse 5s ease-in-out 2.4s infinite}
.serverlogo{left:50%;top:calc(var(--u) * 172);width:calc(var(--u) * 310);height:auto;transform:translateX(-50%);background:radial-gradient(closest-side,#04070ec2 38%,#04070e00);animation:rise 1.1s var(--d) cubic-bezier(.2,.8,.2,1) backwards,logopulse 5s ease-in-out 2.4s infinite}
.shine{position:absolute;inset:0;overflow:hidden;-webkit-mask:var(--logo) center/100% 100% no-repeat;mask:var(--logo) center/100% 100% no-repeat;pointer-events:none}
.shine::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:22%;background:linear-gradient(100deg,transparent,#ffffff 50%,transparent);transform:skewX(-18deg);animation:sweep 7s cubic-bezier(.5,0,.3,1) 1.6s infinite}
.best{left:0;right:0;top:calc(var(--u) * 656);text-align:center;font:500 calc(var(--u) * 33.5)/1.3 var(--display);letter-spacing:.067em;text-transform:uppercase;color:#d7e7f7;background:linear-gradient(#fff 25%,#a9cdf2 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px #2a8cff55)}
.sub{left:0;right:0;top:calc(var(--u) * 721);display:flex;justify-content:center;gap:calc(var(--u) * 17);font:400 max(11px,calc(var(--u) * 14.2))/1.5 var(--label);letter-spacing:.17em;text-transform:uppercase;color:#d6dfeb;text-shadow:0 1px 6px #000}
.sub b{font-weight:300;color:#8aa0bd}
.countdown{left:0;right:0;top:calc(var(--u) * 742);text-align:center}
.cd-label{font:400 max(11px,calc(var(--u) * 12.5))/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:#c8d6ea;text-shadow:0 1px 6px #000}
.cd-label time{color:#f4d690;font-weight:500}
.cd-grid{display:flex;justify-content:center;gap:calc(var(--u) * 10);margin-top:calc(var(--u) * 5)}
.cd-cell{min-width:calc(var(--u) * 62);padding:calc(var(--u) * 4) calc(var(--u) * 7) calc(var(--u) * 4);background:linear-gradient(#0a1220d9,#060a14e6);border:1px solid var(--line);border-radius:calc(var(--u) * 6);box-shadow:0 0 18px #2a8cff22,inset 0 1px 0 #ffffff14}
.cd-cell b{display:block;font:600 calc(var(--u) * 21)/1 var(--display);color:#eaf4ff;text-shadow:0 0 12px #2a8cff66;font-variant-numeric:tabular-nums}
.cd-cell small{display:block;margin-top:calc(var(--u) * 2);font:400 max(8px,calc(var(--u) * 8.5))/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:#8fa3c0}
.cd-live{color:#7fe0a8;font-size:max(13px,calc(var(--u) * 16));text-shadow:0 0 14px #2aff8c55}
.explore{--h:max(42px,calc(var(--u) * 52));left:calc(var(--u) * 630);top:calc(var(--u) * 818);width:calc(var(--u) * 276);font-size:max(11px,calc(var(--u) * 14.5));font-weight:500;letter-spacing:.09em}
.explore svg{width:1.1em;height:.7em;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .3s;animation:nudge 1.8s ease-in-out infinite}
.explore{animation:rise 1.1s var(--d) cubic-bezier(.2,.8,.2,1) backwards,btnglow 3s ease-in-out 2.6s infinite}
@keyframes btnglow{0%,100%{filter:drop-shadow(0 0 6px #2a8cff99)}50%{filter:drop-shadow(0 0 16px #2a8cff)}}
.strip{position:absolute;left:50%;bottom:0;width:calc(var(--u) * 1536);height:calc(var(--u) * 174);transform:translateX(-50%)}
.strip li{position:absolute;top:calc(var(--u) * 34);animation:rise 1s var(--d) cubic-bezier(.2,.8,.2,1) backwards}
.strip li:nth-child(1){left:calc(var(--u) * 188)}
.strip li:nth-child(2){left:calc(var(--u) * 506)}
.strip li:nth-child(3){left:calc(var(--u) * 852)}
.strip li:nth-child(4){left:calc(var(--u) * 1162)}
.strip a{display:flex;align-items:center;gap:calc(var(--u) * 16);transition:transform .3s}
.strip img{width:auto;height:calc(var(--u) * 66);transition:filter .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.strip span{display:block}
.strip b{display:block;font:400 max(11px,calc(var(--u) * 13.5))/1.4 var(--label);letter-spacing:.1em;text-transform:uppercase;color:#e8edf5;white-space:nowrap}
.strip small{display:block;font:400 max(10.5px,calc(var(--u) * 10.5))/1.5 var(--label);letter-spacing:.1em;text-transform:uppercase;color:#98a6ba;white-space:nowrap}
.strip a:hover img{filter:drop-shadow(0 0 10px #e8c27a) brightness(1.2);transform:scale(1.1) rotate(-3deg)}
.strip a:hover b{color:#f4d690}

/* entrance */
.rise{animation:rise 1.1s var(--d) cubic-bezier(.2,.8,.2,1) backwards}
.grow{animation:grow 1.1s var(--d) cubic-bezier(.2,.8,.2,1) backwards}
@keyframes rise{from{opacity:0;translate:0 26px;filter:blur(6px)}}
@keyframes grow{from{opacity:0;transform:scaleX(0)}}
@keyframes drop{from{opacity:0;transform:translateY(-24px)}}
@keyframes wake{from{opacity:0;transform:scale(1.04);filter:brightness(.4)}}
@keyframes sweep{0%{left:-30%}38%,100%{left:125%}}
@keyframes logopulse{0%,100%{filter:drop-shadow(0 0 4px #6fc8ff44)}50%{filter:drop-shadow(0 0 14px #4aa8ffaa)}}
@keyframes twinkle{0%,100%{opacity:.55;scale:.8}50%{opacity:1;scale:1.15}}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(4px)}}
@keyframes sheen{from{left:-40%;opacity:1}to{left:115%;opacity:1}}

/* ---------- shared frames ---------- */
.frame{--cut:16px;--shape:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));position:relative;isolation:isolate;transition:filter .4s,translate .4s cubic-bezier(.2,.8,.2,1),opacity .9s var(--d,0s),transform .9s var(--d,0s) cubic-bezier(.2,.8,.2,1)}
.frame::before,.frame::after{content:"";position:absolute;clip-path:var(--shape)}
.frame::before{inset:0;z-index:-2;background:linear-gradient(135deg,#f3d9a0,#8a6426 18%,#1c3862 42%,#2a6fc0 58%,#8a6426 82%,#f3d9a0);background-size:240% 240%;background-position:0 0;transition:background-position .9s cubic-bezier(.2,.8,.2,1)}
.frame::after{inset:1px;z-index:-1;background:linear-gradient(165deg,#0e1a31f5,#060b17f7 55%,#080f20f5)}
.frame:hover{filter:drop-shadow(0 0 16px #2a8cff66);translate:0 -4px}
.frame:hover::before{background-position:100% 100%}
.orn{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--c1) 4px 4px/26px no-repeat,var(--c2) calc(100% - 4px) 4px/26px no-repeat,var(--c3) calc(100% - 4px) calc(100% - 4px)/26px no-repeat,var(--c4) 4px calc(100% - 4px)/26px no-repeat}
.orn::before{content:"";position:absolute;inset:6px;--cut:12px;border:1px solid #e8c27a22;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.orn::after{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;rotate:45deg;background:linear-gradient(135deg,#fff3cf,#b98c42);box-shadow:0 0 10px 2px #e8c27a88}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(76px,10vw,136px) clamp(16px,5vw,64px);overflow:hidden;background:var(--bg)}
.sec::before{content:"";position:absolute;left:50%;top:0;width:min(760px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#a97c34,#ffe6ad,#a97c34,transparent);z-index:1}
.sec>*:not(.crop-bg):not(.sky){position:relative;z-index:1}

/* backdrops: the art dissolves into the page, so no hard rectangle ever shows */
.crop-bg{position:absolute;inset:-4%;background-repeat:no-repeat;opacity:.42;-webkit-mask:radial-gradient(ellipse 72% 72% at 50% 50%,#000 28%,#0008 58%,transparent 100%),linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:radial-gradient(ellipse 72% 72% at 50% 50%,#000 28%,#0008 58%,transparent 100%),linear-gradient(transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;animation:drift 26s ease-in-out infinite alternate}
.features .crop-bg{opacity:.34}
.news .crop-bg{opacity:.3}
.community .crop-bg{opacity:.5}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,-1%)}}
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.sky::before{content:"";position:absolute;inset:-40% -10%;background:radial-gradient(38% 30% at 22% 34%,#1e5fc455,transparent 70%),radial-gradient(34% 26% at 80% 58%,#3a2d9a44,transparent 70%),radial-gradient(26% 20% at 58% 22%,#a97c3422,transparent 70%);animation:aurora 22s ease-in-out infinite alternate}
.sky::after{content:"";position:absolute;inset:-260px 0 0;background-image:radial-gradient(1.5px 1.5px at 30px 40px,#cfe6ffcc,transparent),radial-gradient(1px 1px at 120px 90px,#ffffffb0,transparent),radial-gradient(1.5px 1.5px at 210px 200px,#f3d9a0b0,transparent),radial-gradient(1px 1px at 300px 60px,#9fd0ffb0,transparent),radial-gradient(1px 1px at 70px 240px,#ffffff90,transparent),radial-gradient(1.5px 1.5px at 340px 230px,#9fd0ffb0,transparent);background-size:380px 260px;opacity:.7;animation:stars 40s linear infinite}
@keyframes aurora{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(3%,3%) scale(1.1)}}
@keyframes stars{to{transform:translateY(260px)}}

.head{text-align:center;max-width:760px;margin:0 auto clamp(36px,5vw,64px);position:relative}
.eyebrow{font:500 13px/1.4 var(--label);letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
h2{font:500 clamp(28px,4.6vw,54px)/1.15 var(--display);letter-spacing:.03em;background:linear-gradient(#fff 30%,#9dbfe6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 10px #000a)}
.rule.fancy{height:1px;background:linear-gradient(90deg,transparent,#a97c34 30%,#ffe6ad 50%,#a97c34 70%,transparent)}
.rule.fancy::after{width:9px;height:9px;margin:-4.5px;background:linear-gradient(135deg,#fff3cf,#b98c42);box-shadow:0 0 12px 2px #e8c27a99}
.rule.fancy::before{content:"";position:absolute;left:50%;top:50%;width:21px;height:21px;margin:-10.5px;border:1px solid #e8c27a66;transform:rotate(45deg)}
.head .rule{width:min(340px,70%);margin:22px auto 0}
.lead{margin-top:26px;color:#e4ebf4;font-size:18px;text-shadow:0 1px 3px #000,0 0 18px #000}
.downloads .head::before,.community .head::before{content:"";position:absolute;inset:-34px -14%;z-index:-1;background:radial-gradient(closest-side,#04070ed0 30%,#04070e00);pointer-events:none}
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--d,0s),transform .9s var(--d,0s) cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.off *,.off *::before,.off *::after{animation-play-state:paused!important}

/* features */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1280px;margin:auto}
.card{padding:38px 26px 34px;text-align:center;overflow:hidden;--mx:50%;--my:0%}
.card-art{position:absolute;inset:0;z-index:0;background-repeat:no-repeat;opacity:.3;clip-path:var(--shape);-webkit-mask:linear-gradient(#000,transparent 72%);mask:linear-gradient(#000,transparent 72%);transition:opacity .5s}
.card:hover .card-art{opacity:.55}
.medal{position:relative;z-index:1;width:112px;height:112px;margin:0 auto 22px;display:grid;place-items:center}
.medal::before,.medal::after{content:"";position:absolute;rotate:45deg;transition:rotate .9s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.medal::before{inset:17px;background:linear-gradient(135deg,#ffeabb,#7a5a24 45%,#1c3862 55%,#ffeabb);box-shadow:0 0 18px #2a8cff33}
.medal::after{inset:18px;background:radial-gradient(circle,#10223f,#070c18 75%)}
.card:hover .medal::before{box-shadow:0 0 26px #e8c27a77}
.card:hover .medal::before,.card:hover .medal::after{rotate:135deg}
.medal img{position:relative;z-index:1;height:72px;width:auto;transition:transform .5s cubic-bezier(.3,1.5,.5,1),filter .3s}
.card:hover .medal img{transform:scale(1.1);filter:drop-shadow(0 0 12px #e8c27a99)}
.card h3,.card p{position:relative;z-index:1}
.card h3{font:500 19px/1.3 var(--display);letter-spacing:.04em;margin-bottom:10px}
.card p{color:#b0bfd3;font-size:16px;line-height:1.55}

/* downloads */
.downloads .crop-bg{opacity:.5;-webkit-mask:radial-gradient(ellipse 62% 84% at 34% 44%,#000 26%,#0007 60%,transparent 100%),linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:radial-gradient(ellipse 62% 84% at 34% 44%,#000 26%,#0007 60%,transparent 100%),linear-gradient(transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.dl-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;max-width:1180px;margin:auto;align-items:stretch}
.dl-list{display:grid;gap:18px}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding:22px 28px}
.dl>*:not(.orn){position:relative;z-index:1}
.dl-ic{display:grid;place-items:center;width:58px;height:58px;position:relative}
.dl-ic::before,.dl-ic::after{content:"";position:absolute;rotate:45deg;transition:rotate .8s cubic-bezier(.2,.8,.2,1)}
.dl-ic::before{inset:8px;background:linear-gradient(135deg,#ffeabb,#7a5a24 45%,#1c3862 55%,#ffeabb)}
.dl-ic::after{inset:9px;background:radial-gradient(circle,#10223f,#070c18 75%)}
.dl:hover .dl-ic::before,.dl:hover .dl-ic::after{rotate:135deg}
.dl-ic svg{position:relative;z-index:1;width:22px;height:22px;fill:none;stroke:#f3d9a0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dl h3{font:500 20px/1.3 var(--display);letter-spacing:.04em}
.dl p{color:#b0bfd3;font-size:15.5px;line-height:1.4}
.dl .hex{--h:48px;font-size:13.5px;min-width:164px}
.req{padding:30px 30px 26px;display:flex;flex-direction:column}
.req>*:not(.orn){position:relative;z-index:1}
.req h3{font:500 20px/1.3 var(--display);letter-spacing:.04em;text-align:center;margin-bottom:14px}
.req table{width:100%;border-collapse:collapse;flex:1;font-size:15px}
.req th,.req td{padding:9px 6px;text-align:left;border-bottom:1px solid #e8c27a1f;font-weight:400;vertical-align:middle}
.req tbody tr:last-child>*{border-bottom:0}
.req thead th{color:var(--gold);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.req tbody th{color:#8fa2bb;font-size:13.5px}
.req tbody td{color:#dfe7f2}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:clamp(40px,5vw,64px) auto 0;position:relative;text-align:center}
.steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:23px;height:1px;background:linear-gradient(90deg,#a97c34,#ffe6ad 50%,#a97c34)}
.steps li{position:relative}
.steps b{position:relative;display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;font:500 18px/1 var(--display);color:#f8e0a6;isolation:isolate}
.steps b::before,.steps b::after{content:"";position:absolute;rotate:45deg;z-index:-1}
.steps b::before{inset:7px;background:linear-gradient(135deg,#ffeabb,#7a5a24 50%,#ffeabb)}
.steps b::after{inset:8px;background:#0a1224}
.steps h3{font:500 17px/1.3 var(--display);letter-spacing:.04em}
.steps p{color:#b0bfd3;font-size:15px;line-height:1.4}

/* community */
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:auto}
.link{display:block;padding:30px 28px 26px;text-align:center}
.link b{position:relative;z-index:1;display:block;font:500 21px/1.3 var(--display);letter-spacing:.05em}
.link small{position:relative;z-index:1;display:block;color:#b0bfd3;font-size:15px;line-height:1.4}
.link svg{position:relative;z-index:1;display:block;width:22px;height:12px;margin:12px auto 0;fill:none;stroke:var(--gold);stroke-width:1.2;transition:transform .3s}
.link:hover svg{transform:translateX(6px)}

/* news: images are cut into pointed banners */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1280px;margin:auto}
.post a{display:block;height:100%;padding:8px 8px 26px;--cut:20px}
.shield{position:relative;z-index:1;--b:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 82%,50% 100%,0 82%,0 16px);filter:drop-shadow(0 8px 14px #0009)}
.shield::before{content:"";position:absolute;inset:0;clip-path:var(--b);background:linear-gradient(135deg,#ffeabb,#8a6426 40%,#2a6fc0 60%,#ffeabb)}
.thumb{position:relative;display:block;width:100%;height:auto;aspect-ratio:16/10.4;object-fit:cover;clip-path:polygon(16px 1px,calc(100% - 16px) 1px,calc(100% - 1px) 16px,calc(100% - 1px) calc(82% - 1px),50% calc(100% - 2px),1px calc(82% - 1px),1px 16px);transition:filter .6s}
.post a:hover .thumb{filter:brightness(1.14) saturate(1.1)}
.body{position:relative;z-index:1;padding:8px 18px 0;text-align:center}
.meta{color:var(--gold);font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.post h3{font:500 21px/1.3 var(--display);margin:6px 0 8px}
.post p:last-child{color:#b0bfd3;font-size:16px;line-height:1.55}

/* final call */
.play{position:relative;padding:clamp(96px,12vw,170px) 16px;text-align:center;overflow:hidden;background:var(--bg)}
.play .crop-bg{opacity:.75;-webkit-mask:radial-gradient(ellipse 80% 80% at 50% 50%,#000 40%,transparent 100%),linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:radial-gradient(ellipse 80% 80% at 50% 50%,#000 40%,transparent 100%),linear-gradient(transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.play-in::before{content:"";position:absolute;inset:-60px -16%;z-index:-1;background:radial-gradient(closest-side,#04070ee0 40%,#04070e00);pointer-events:none}
.play-in{position:relative;z-index:1}
.play-logo{width:min(630px,92vw);height:auto;margin:auto;filter:drop-shadow(0 0 14px #2a8cff77)}
.play .tag{position:static;font-size:clamp(14px,2vw,20px);margin:8px 0 34px}
.btns{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.hex.big{--h:60px;font-size:15px;min-width:256px}
.foot{position:relative;padding:48px 16px;padding-bottom:max(40px,env(safe-area-inset-bottom));text-align:center;color:#94a3ba;font-size:14px;background:linear-gradient(#060b16,#03050b)}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,#a97c34,#ffe6ad,#a97c34,transparent)}
.foot-logo{display:inline-block;width:190px;margin-bottom:20px;transition:filter .3s}
.foot-logo:hover{filter:drop-shadow(0 0 10px #6fc8ff88)}
.foot-logo img{width:100%;height:auto}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center}
.foot-nav{gap:4px 34px;margin-bottom:8px}
.foot-nav a{padding:8px 0;font:400 15px/1.4 var(--display);letter-spacing:.06em;color:#e4ebf4;transition:color .25s,text-shadow .25s}
.foot-nav a:hover{color:#f8e0a6;text-shadow:0 0 12px #e8c27a88}
.foot-legal{gap:0 24px;margin-bottom:16px}
.foot-legal a{padding:8px 0;font-size:14px;color:#a9b8cc;transition:color .25s}
.foot-legal a:hover{color:#fff}
.foot p{max-width:720px;margin:0 auto;font-size:13.5px}
.up{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));z-index:40;width:46px;height:46px;display:grid;place-items:center;isolation:isolate;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,transform .35s,visibility .35s,filter .3s;filter:drop-shadow(0 4px 10px #000a)}
.up.show{opacity:1;visibility:visible;transform:none}
.up::before,.up::after{content:"";position:absolute;rotate:45deg;z-index:-1}
.up::before{inset:7px;background:linear-gradient(135deg,#ffeabb,#7a5a24 50%,#ffeabb)}
.up::after{inset:8px;background:radial-gradient(circle,#10223f,#070c18 75%)}
.up svg{width:16px;height:16px;fill:none;stroke:#f8e0a6;stroke-width:1.6}
.up:hover{filter:drop-shadow(0 0 12px #e8c27a)}

/* ---------- tablet / phone ---------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr);max-width:780px}
}
/* the top bar collapses into a menu before anything can collide */
@media (max-width:1200px),(max-height:520px){
  .top{height:64px}
  .top-in{width:100%}
  .brand{left:max(16px,env(safe-area-inset-left));top:4px;width:150px;min-width:0;height:56px;display:flex;align-items:center}
  .burger{display:block;right:max(10px,env(safe-area-inset-right))}
  .acts{right:max(68px,calc(env(safe-area-inset-right) + 58px));top:12px;gap:18px}
  .acts .hex{--h:40px;font-size:12px}
  .menu{position:fixed;inset:64px 0 auto;transform:translateY(-8px);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;max-height:calc(100svh - 64px);overflow:auto;background:rgba(5,9,18,.98);box-shadow:0 1px 0 #a97c34,0 24px 40px #000a;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu>a{font-size:16px;padding:15px 4px;border-bottom:1px solid #e8c27a22}
  .ind{display:none}
  .burger[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded=true] i:nth-child(2){opacity:0}
  .burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:720px){
  .acts .hex.gold{display:none}
}
/* small phones: the buttons live in the menu */
@media (max-width:520px){
  .acts{display:none}
  .menu-acts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;padding:18px 8px 4px}
  .menu-acts .hex{--h:48px;font-size:13px}
  .menu-acts .hex>span{padding:0 8px}
  .menu-acts .hex.gold{grid-column:1/-1}
}
@media (max-width:980px){
  .posts{grid-template-columns:1fr;max-width:540px}
  .dl-grid{grid-template-columns:1fr;max-width:640px}
}
/* the stacked hero: narrow screens, and phones held sideways */
@media (max-width:860px),(max-height:520px){
  :root{--u:calc(100vw / 860)}

  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
  .floor{display:block;height:68%;background:linear-gradient(transparent,#04070ed8 30%,#04070e 74%)}
  .floor::after{display:none}
  .stage{position:relative;left:auto;bottom:auto;transform:none;width:100%;height:auto;padding:240px 16px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
  .stage>*{position:relative;left:auto;top:auto;right:auto}
  .stage::before{display:none}
  .tag{font-size:clamp(12px,3.4vw,16px);letter-spacing:.18em}
  .stage .r1,.stage .r2{left:auto;top:auto;width:min(80%,420px)}
  .biglogo{width:min(92vw,520px);height:auto;aspect-ratio:630/144}
  .serverlogo{width:min(56vw,230px);transform:none}
  .best{font-size:clamp(17px,5.2vw,28px)}
  .sub{font-size:clamp(11px,2.9vw,13px);letter-spacing:.08em;gap:8px;flex-wrap:wrap}
  .countdown{position:relative;left:auto;right:auto;top:auto;width:100%;max-width:420px;margin:2px auto 0}
  .cd-label{font-size:clamp(10px,2.6vw,12px)}
  .cd-grid{gap:8px;margin-top:8px}
  .cd-cell{min-width:0;flex:1;padding:8px 4px 7px;border-radius:6px}
  .cd-cell b{font-size:clamp(18px,5.4vw,24px)}
  .cd-cell small{font-size:clamp(8px,2.2vw,9.5px)}
  .explore{--h:54px;width:270px;font-size:14px}
  .strip{position:relative;left:auto;transform:none;bottom:auto;width:100%;height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 10px;padding:14px 16px 30px;max-width:900px;margin:0 auto}
  .strip li{position:relative;left:auto!important;top:auto;min-width:0}
  .strip a{gap:9px;min-height:44px}
  .strip img{height:44px;width:40px;object-fit:contain;flex:none}
  .strip b{font-size:12px;letter-spacing:.05em;white-space:normal}
  .strip small{font-size:11px;letter-spacing:.05em;white-space:normal}
  .links{grid-template-columns:1fr;max-width:480px}
}
@media (min-width:641px) and (max-width:860px) and (min-height:521px){
  .floor{height:50%}
  .stage{padding-top:320px}
}
@media (max-width:640px){
  .foot{padding-bottom:max(84px,env(safe-area-inset-bottom))}
  .dl{grid-template-columns:auto minmax(0,1fr);padding:22px 20px;gap:12px 14px}
  .dl .hex{grid-column:1/-1;width:100%}
  .steps{grid-template-columns:1fr 1fr;gap:24px 12px}
  .steps::before{display:none}
  .req{padding:26px 18px 20px}
  .req table{font-size:14px}
  .req th,.req td{padding:9px 4px}
  .strip{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr;max-width:420px}
}
/* phones held sideways */
@media (max-height:520px){
  .stage{padding-top:96px}
  .floor{height:100%;background:linear-gradient(#04070e33,#04070ed0 46%,#04070e 82%)}
  .links{grid-template-columns:repeat(3,1fr);max-width:900px}
}
@media (max-width:400px){
  .hex.big{min-width:0;width:calc(100vw - 48px);max-width:300px}
  .frame{--cut:13px}
}
/* ---------- session nav & user panel ---------- */
button.hex{border:0;background:none;padding:0;cursor:pointer;font-size:inherit}
.hex.noact{cursor:default}
.hex.noact:hover{transform:none}
.hex.noact:hover::before{animation:none}
.hex.noact>span::after{display:none}
.hex.steel.noact,.hex.steel.noact:hover{filter:drop-shadow(0 0 5px #9fb8d844)}
.acts .hex.noact{max-width:220px}
.hex.noact>span{text-overflow:ellipsis}
.panel-ovl{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(4,7,14,.75);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.panel-ovl.on{opacity:1;visibility:visible}
.panel-box{position:relative;width:min(100%,400px);padding:34px 30px 30px;background:linear-gradient(#0d1526,#070b16 60%,#0a1020);border:1px solid #e8c27a33;box-shadow:0 30px 80px #000c,0 0 40px #2a8cff1a;transform:translateY(14px);transition:transform .3s cubic-bezier(.2,.9,.3,1.2);text-align:center}
.panel-box>*:not(.orn){position:relative;z-index:1}
.panel-ovl.on .panel-box{transform:none}
.panel-box h2{font:600 24px/1.2 var(--display);color:var(--gold);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 18px #e8c27a55}
.panel-acct{margin:10px 0 22px;color:var(--mute);font-size:14px}
.panel-acct b{color:var(--cyan);font-weight:500}
.panel-opts{display:grid;gap:10px;margin-bottom:24px}
.panel-opts button{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border:1px solid var(--line);background:#0a1120;color:var(--ink);font:500 13px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
.panel-opts button:hover:not(:disabled){border-color:var(--cyan);background:#0d1830}
.panel-opts button:disabled{cursor:not-allowed;opacity:.55}
.panel-opts small{color:var(--gold);font-size:10px;letter-spacing:.14em}
.panel-form{display:grid;gap:12px;text-align:left}
.panel-form label{display:grid;gap:6px;font:500 11px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.panel-form input{padding:10px 12px;border:1px solid var(--line);background:#070d1a;color:var(--ink);font:400 14px/1.2 var(--label);outline:none;transition:border-color .2s}
.panel-form input:focus{border-color:var(--cyan)}
.panel-msg{min-height:18px;margin:0;font-size:13px;color:#ff9a9a;text-align:center}
.panel-msg.ok{color:#8fe6a8}
.panel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.panel-back{border:0;background:none;color:var(--mute);font:500 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:8px 0;transition:color .2s}
.panel-back:hover{color:#fff}
.panel-chars{min-height:120px;margin-bottom:16px}
.panel-chars table{width:100%;border-collapse:collapse;font-size:13px}
.panel-chars th{padding:8px 6px;border-bottom:1px solid #e8c27a33;color:var(--gold);font:500 11px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-align:left}
.panel-chars td{padding:8px 6px;border-bottom:1px solid #ffffff11;color:var(--ink);text-align:left}
.panel-chars td.on{color:#8fe6a8}
.panel-chars td.off{color:var(--mute)}
.panel-empty{padding:30px 0;color:var(--mute);font-size:14px;text-align:center}
.panel-x{position:absolute;top:8px;right:12px;border:0;background:none;color:var(--mute);font-size:22px;line-height:1;cursor:pointer;padding:6px;transition:color .2s}
.panel-x:hover{color:#fff}
.panel-out{margin:auto}
@media (hover:none){
  .strip a{min-height:44px}
  .frame:hover{translate:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .shine{display:none}
  .js .reveal{opacity:1;transform:none}
}