/* Realms — 2D hard-surface look shared by the gate, Forge, Proving Grounds and Games.
   Same tokens and panel language as the studio page's Hard Surface theme. */
:root{
  --bg:#000;--panel:rgba(8,9,12,.92);--line:rgba(0,243,255,.14);
  --cyan:#00f3ff;--pink:#ff0055;--yellow:#ccff00;--amber:#ffae00;--violet:#b57bff;
  --ink:#fff;--muted:rgba(255,255,255,.62);
  --head:'Syncopate',sans-serif;--base:'Rajdhani',sans-serif;
  --cut:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:var(--base);font-size:18px}
body{min-height:100vh;background:
  radial-gradient(ellipse at 20% 0%,rgba(0,243,255,.08),transparent 42rem),
  radial-gradient(ellipse at 90% 70%,rgba(255,0,85,.07),transparent 38rem),
  linear-gradient(180deg,#05060a 0%,#000 60%);overflow-x:hidden}
a{color:inherit}

/* atmosphere: hex lattice, scanlines, one slow sweep */
.atmo{position:fixed;inset:0;pointer-events:none;z-index:0}
.atmo::before{content:"";position:absolute;inset:0;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='120' viewBox='0 0 104 120'%3E%3Cpath d='M52 2 100 30v60L52 118 4 90V30z M52 60 100 32M52 60v58M52 60 4 32' fill='none' stroke='%2300f3ff' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E");
  mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%)}
.atmo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.2) 3px 4px)}
.sweep{position:fixed;left:0;right:0;height:22vh;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent 0%,rgba(0,243,255,.05) 49%,rgba(0,243,255,.14) 50%,rgba(0,243,255,.05) 51%,transparent 100%);
  animation:sweep 9s cubic-bezier(.4,0,.6,1) infinite}
@keyframes sweep{0%{top:-22vh}100%{top:100vh}}
@media (prefers-reduced-motion:reduce){.sweep{display:none}}

/* panels */
.panel{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.035),transparent 30%,transparent 70%,rgba(0,243,255,.04)),var(--panel);
  border:1px solid var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,243,255,.08)}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--ac,var(--cyan)),transparent 45%,transparent 70%,var(--pink))}
.panel::after{content:"";position:absolute;inset:6px;border:1px solid rgba(0,243,255,.08);pointer-events:none;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}

.wrap{position:relative;z-index:1;width:min(1200px,100%);margin:0 auto;padding:0 24px}
.tag{color:var(--ac,var(--cyan));font-weight:700;letter-spacing:.34em;font-size:13px;text-transform:uppercase}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:.1em}
p{color:var(--muted);line-height:1.6}
.btn{display:inline-block;text-decoration:none;font:700 14px var(--base);letter-spacing:.22em;text-transform:uppercase;padding:14px 22px;color:#000;background:var(--ac,var(--cyan));border:0;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.btn:hover,.btn:focus-visible{filter:brightness(1.15);outline:none}
.btn.ghost:hover,.btn.ghost:focus-visible{box-shadow:inset 0 0 0 1px var(--cyan);color:var(--cyan)}

/* line-art icons */
.icon{width:100%;height:auto;display:block;stroke:var(--ac,var(--cyan));fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.icon .fill{fill:var(--ac,var(--cyan));fill-opacity:.12;stroke:none}
.icon .dim{stroke-opacity:.35}

.soon{display:inline-block;font:700 clamp(14px,2vw,22px) var(--head);letter-spacing:.5em;padding:12px 10px 12px 26px;border:1px solid var(--ac,var(--pink));color:var(--ink);
  background:color-mix(in srgb,var(--ac,var(--pink)) 8%,transparent);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}