:root{--gold:#c89a4c;--light:#f0d49a;--blue:#318fe2;--purple:#9b52d7;--black:#010203;--serif:"Cinzel",serif;--sans:"Montserrat",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:#eee}body{font-family:var(--sans);background:radial-gradient(ellipse at 50% 38%,#0c1117,#000 70%)}.landing{width:min(100%,1440px);height:100svh;min-height:700px;margin:auto;display:grid;grid-template-rows:minmax(270px,43fr) minmax(230px,34fr) minmax(100px,14fr) minmax(80px,9fr) 22px;overflow:hidden;position:relative;background:#020304;box-shadow:0 0 100px #000}.hero{position:relative;overflow:hidden;isolation:isolate}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 31%;z-index:-3;filter:saturate(1.08) contrast(1.05)}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(26,5,1,.25),transparent 35%,transparent 65%,rgba(0,20,43,.25)),linear-gradient(180deg,rgba(0,0,0,.1),transparent 45%,#020304 100%)}.brand{position:absolute;top:5%;left:50%;transform:translateX(-50%);display:grid;text-align:center;font-family:var(--serif);filter:drop-shadow(0 5px 8px #000)}.brand span{font-size:clamp(28px,4.2vw,61px);font-weight:700;line-height:.85;background:linear-gradient(#fff,#978a7e 40%,#fff 55%,#6f471e);background-clip:text;color:transparent}.brand small{font-size:clamp(6px,.65vw,10px);letter-spacing:6px}.brand strong{font-size:clamp(14px,1.7vw,25px);letter-spacing:5px;color:#e0bb75}.hero-title{position:absolute;bottom:3%;left:0;right:0;text-align:center}.hero-title h1{margin:0;font:500 clamp(27px,4vw,61px)/1 var(--serif);letter-spacing:1px;background:linear-gradient(#fff3c5,#a96f2d);background-clip:text;color:transparent;text-shadow:0 3px 10px #000}.hero-title p{margin:7px 0 0;display:flex;justify-content:center;align-items:center;gap:10px;text-transform:uppercase;font:500 clamp(6px,.65vw,10px) var(--serif);letter-spacing:3px;color:#d1c1a2}.hero-title i{width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.hero-title i:last-child{transform:scaleX(-1)}.server-area{padding:0 clamp(10px,2vw,30px);position:relative;z-index:2}.servers{height:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,18px)}.server{--accent:var(--gold);position:relative;overflow:hidden;isolation:isolate;border:1px solid color-mix(in srgb,var(--accent) 55%,#222);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);background:#070707;transition:.25s}.server:after{content:"";position:absolute;inset:6px;z-index:3;pointer-events:none;border:1px solid rgba(255,255,255,.06)}.server:hover{transform:translateY(-4px);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 45%,transparent)}.fire{--accent:#d58736}.ice{--accent:var(--blue)}.void{--accent:var(--purple)}.realm-art{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,transparent 15%,#040506 88%),radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 48%),linear-gradient(135deg,#17100b,#030303);opacity:.95}.ice .realm-art{background:linear-gradient(180deg,transparent 15%,#030506 88%),radial-gradient(ellipse at 50% 80%,#064a8d,transparent 45%),linear-gradient(135deg,#081725,#020406)}.void .realm-art{background:linear-gradient(180deg,transparent 15%,#040306 88%),radial-gradient(ellipse at 50% 80%,#3d125f,transparent 45%),linear-gradient(135deg,#160c1b,#030204)}.realm-art:after{content:"";position:absolute;left:18%;right:18%;bottom:15%;height:58%;clip-path:polygon(50% 0,58% 19%,70% 20%,77% 42%,91% 51%,100% 100%,0 100%,12% 52%,27% 41%,35% 20%,43% 18%);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 28%,#111),#050607);filter:drop-shadow(0 0 15px var(--accent));opacity:.7}.server-copy{height:100%;padding:clamp(12px,1.5vw,22px);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:2}.server-copy span{text-transform:uppercase;font:600 clamp(7px,.65vw,10px) var(--serif);letter-spacing:1.3px;color:var(--accent)}.server-copy h3{margin:clamp(5px,.6vh,10px) 0 2px;font:500 clamp(15px,1.65vw,25px) var(--serif);white-space:nowrap}.server-copy p,.site{margin:clamp(4px,.8vh,12px) 0;color:#c7c1b5;font:500 clamp(7px,.65vw,10px) var(--serif);text-transform:uppercase;text-decoration:none}.site{text-transform:none;margin:1px 0}.server-copy b{margin-top:auto;margin-bottom:8px;color:var(--accent);font:500 clamp(7px,.7vw,11px) var(--serif);text-transform:uppercase}.enter{margin-top:auto;width:90%;min-height:clamp(29px,4vh,44px);display:flex;align-items:center;justify-content:center;border:1px solid var(--accent);background:rgba(5,5,6,.75);color:#e9e2d4;text-decoration:none;text-transform:uppercase;font:500 clamp(7px,.65vw,10px) var(--serif);letter-spacing:.5px;box-shadow:inset 0 0 12px color-mix(in srgb,var(--accent) 15%,transparent),0 0 12px color-mix(in srgb,var(--accent) 18%,transparent);cursor:pointer;transition:.2s}.enter:hover:not(:disabled){background:var(--accent);color:#050505;box-shadow:0 0 22px var(--accent)}.enter:disabled{color:#d8cfe1;opacity:.7;cursor:not-allowed}.features{padding:0 clamp(10px,2vw,30px);display:grid;grid-template-rows:auto 1fr}.ornament{display:flex;align-items:center;justify-content:center;gap:12px}.ornament i{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}.ornament i:last-child{transform:scaleX(-1)}.ornament h2{margin:5px 0;font:500 clamp(13px,1.45vw,22px) var(--serif);letter-spacing:1.5px;text-transform:uppercase;color:#dcc18e}.feature-row{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid rgba(200,154,76,.2)}.feature-row article{display:grid;place-content:center;text-align:center;border-right:1px solid rgba(200,154,76,.18)}.feature-row article:last-child{border:0}.feature-row span{font-size:clamp(19px,2.3vw,35px);line-height:1;color:var(--gold);text-shadow:0 0 12px rgba(200,154,76,.35)}.feature-row p{margin:5px 0 0;text-transform:uppercase;font:500 clamp(5px,.52vw,8px)/1.3 var(--serif);color:#c6ad7e}.community{margin:0 clamp(10px,2vw,30px);border-top:1px solid rgba(200,154,76,.2);display:grid;grid-template-columns:120px 1fr 120px;align-items:center;text-align:center;position:relative;background:radial-gradient(ellipse at center,#10131a,#030405 65%)}.community h2{margin:0 0 4px;font:500 clamp(12px,1.5vw,23px) var(--serif);letter-spacing:1.5px;text-transform:uppercase;color:#dec69a}.community p{margin:0;text-transform:uppercase;font:500 clamp(5px,.55vw,8px) var(--serif);color:#9b9080}.community nav{display:flex;justify-content:center;gap:10px;margin-top:8px}.community a{width:clamp(21px,2.1vw,32px);aspect-ratio:1;border:1px solid #725a30;border-radius:50%;display:grid;place-items:center;color:var(--gold);text-decoration:none;font:600 clamp(7px,.8vw,12px) var(--serif);transition:.2s}.community a:hover{background:var(--gold);color:#111;box-shadow:0 0 16px var(--gold)}.portal{width:50px;height:70px;border:3px solid #1689ec;border-radius:50%;justify-self:center;box-shadow:0 0 12px #1689ec,inset 0 0 15px #1689ec;background:#041c33}.tower{width:52px;height:66px;justify-self:center;display:grid;place-items:center;border:1px solid #6b512b;background:linear-gradient(#16110b,#060504);color:var(--gold);font:600 15px var(--serif)}footer{display:grid;place-items:center;color:#575551;text-transform:uppercase;font:500 clamp(4px,.5vw,7px) var(--sans);letter-spacing:.6px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.landing{min-height:640px;grid-template-rows:minmax(250px,42fr) minmax(220px,34fr) minmax(105px,15fr) minmax(72px,9fr) 18px}.hero-image{object-position:center 31%}.brand{top:4%}.servers{gap:5px}.server-area,.features{padding-inline:6px}.server-copy{padding:10px 4px}.server-copy h3{font-size:clamp(10px,3.2vw,16px);letter-spacing:-.3px}.server-copy p,.site{font-size:clamp(5px,1.5vw,8px)}.enter{width:94%;font-size:clamp(5px,1.5vw,8px)}.community{margin-inline:6px;grid-template-columns:55px 1fr 55px}.portal{width:30px;height:43px;border-width:2px}.tower{width:33px;height:42px;font-size:9px}.feature-row p{font-size:clamp(4px,1.25vw,6px)}.feature-row span{font-size:clamp(16px,5vw,24px)}.hero-title h1{font-size:clamp(26px,8vw,39px)}}
@media(max-height:760px){.landing{min-height:610px}.hero-title p{margin-top:4px}.server-copy p{margin-block:4px}.ornament h2{margin:2px 0}.community nav{margin-top:5px}}