/* NEXUS site — shared look (colours, cards and buttons of the in-game main menu), header and common bits. */
:root{
  /* palette — every colour of the site comes from here; *-rgb are the same colours for rgba(var(--x-rgb),alpha) */
  --bg-rgb:3,6,14; --bg2-rgb:4,9,20; --ink-rgb:1,4,12; --card-rgb:14,26,50;
  --bg:rgb(var(--bg-rgb)); --surface:#0b1324; --surface-dk:#060b16;
  --card1:rgba(var(--card-rgb),.93); --card2:rgba(var(--bg2-rgb),.96);
  --edge-rgb:110,160,240; --edge:rgba(var(--edge-rgb),.12); --edge2:rgba(var(--edge-rgb),.2);
  --text:#f2f6ff; --text2:#c3cde0; --muted:#98a9c8; --dim:#7a8db3;
  --acc-rgb:59,130,246; --acc2-rgb:108,180,255; --acc-lt-rgb:160,205,255; --acc-dk2-rgb:29,78,216; --cyan-rgb:34,211,238;
  --acc:rgb(var(--acc-rgb)); --acc2:rgb(var(--acc2-rgb)); --acc-lt:#9cc8ff; --acc-dk:#2563eb; --acc-dk2:rgb(var(--acc-dk2-rgb));
  --acc-deep:#1e3a8a; --cyan:rgb(var(--cyan-rgb));
  --green-rgb:34,197,94; --green2-rgb:74,222,128;
  --green:rgb(var(--green-rgb)); --green2:rgb(var(--green2-rgb)); --green-dk:#16a34a; --green-lt:#bbf7d0; --on-green:#03140a;
  --gold-rgb:245,183,59; --gold:rgb(var(--gold-rgb)); --gold-lt:#ffd27a; --amber:#f5a524; --amber-dk:#d97706; --on-gold:#1a1004;
  --red-rgb:239,68,68; --red:rgb(var(--red-rgb)); --red2:#f87171; --red-lt:#fecaca;
  --discord-rgb:88,101,242; --discord:rgb(var(--discord-rgb)); --discord-lt:#7983f5; --discord-dk:#4752c4;
  --rust:#f97316; --mc:var(--green2); --cs:var(--gold);
  --ct-rgb:91,156,255; --ct:rgb(var(--ct-rgb)); --t:var(--amber);
  --guard-rgb:45,212,196; --guard:rgb(var(--guard-rgb)); --guard-lt:#5eead4; --guard-dk:#0f9488; --on-guard:#021512;
  /* type: condensed display face for headings, buttons, menus and labels; Inter for reading text */
  --font-display:"Roboto Condensed",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --fs-2xs:12px; --fs-xs:13px; --fs-sm:14px; --fs-md:15px; --fs-base:16px;
  --fs-lg:18px; --fs-xl:20px; --fs-2xl:22px; --fs-3xl:26px; --fs-4xl:30px;
  --wrap:1320px; --gut:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-y:scroll}   /* the scrollbar track is always there, so short and long pages are equally wide (no sideways jump between them) */
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-md);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
/* short pages: the footer stays at the bottom of the window */
main.page-main{flex:1 0 auto}
/* going to another page of the site: a soft cross-fade, the header stays in place */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
::view-transition-group(hdr){animation-duration:0s}
/* the display face: headings and everything set in capitals (buttons, menus, labels, badges, big numbers) */
h1,h2,h3,h4,.btn,.pill,.lbl,.h-title,.brand b,.nav,.drawer .sheet a.item,.drawer .langs button,.who>button,
.online b,.toast b{font-family:var(--font-display)}
h1,h2,h3,h4{line-height:1.1}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
svg.i{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.f{fill:currentColor;flex:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
[hidden]{display:none !important}
/* keyboard focus: a ring only for the keyboard (a mouse click shows nothing new) */
:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.field:focus-visible{outline:none}
main:focus,section:focus{outline:none}
.skip{position:fixed;left:12px;top:12px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--acc-dk);color:#fff;font-weight:700;
  transform:translateY(-200%);transition:transform .15s}
.skip:focus{transform:none}
/* scrollbars in the site's colours (the page, the case window, tables…) */
*{scrollbar-width:thin;scrollbar-color:rgba(var(--acc2-rgb),.45) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--acc2-rgb),.35);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--acc2-rgb),.6);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}

/* page background for inner pages (the landing has its own animated one) */
body.page{background:
  radial-gradient(900px 500px at 85% -10%,rgba(var(--acc-dk2-rgb),.22),transparent 65%),
  radial-gradient(700px 400px at 0% 0%,rgba(var(--cyan-rgb),.06),transparent 60%),var(--bg) fixed}
main.page-main{padding:118px 0 60px}

/* surfaces */
.card{border-radius:14px;background:linear-gradient(180deg,var(--card1),var(--card2));border:1px solid var(--edge);
  box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.inner{border-radius:10px;background:rgba(var(--ink-rgb),.55);border:1px solid rgba(var(--edge-rgb),.09)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 16px;border-radius:10px;
  font-weight:700;font-size:var(--fs-sm);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,rgba(var(--edge-rgb),.13),rgba(40,80,170,.05));border:1px solid rgba(var(--edge-rgb),.17);
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s,opacity .2s}
.btn:hover{border-color:rgba(var(--acc2-rgb),.45);background:linear-gradient(180deg,rgba(var(--edge-rgb),.22),rgba(40,80,170,.08))}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.primary{background:linear-gradient(160deg,var(--acc2),var(--acc-dk) 55%,var(--acc-dk2));border-color:rgba(var(--acc-lt-rgb),.55);
  box-shadow:0 0 22px rgba(var(--acc-rgb),.45),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.primary:hover{box-shadow:0 0 34px rgba(var(--acc-rgb),.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.green{background:linear-gradient(160deg,var(--green2),var(--green-dk));border-color:rgba(187,247,208,.5);color:var(--on-green);
  box-shadow:0 0 22px rgba(var(--green-rgb),.4),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.danger{color:var(--red2);border-color:rgba(var(--red-rgb),.35);background:rgba(127,29,29,.18)}
.btn.danger:hover{border-color:rgba(var(--red-rgb),.7);background:rgba(127,29,29,.32)}
.btn.sm{height:34px;padding:0 12px;font-size:var(--fs-xs);border-radius:8px}
.btn.lg{height:52px;padding:0 24px;font-size:var(--fs-md)}
@media (max-width:620px){.btn.lg{white-space:normal;text-align:center;line-height:1.15;height:auto;min-height:52px;padding:8px 18px}}
.btn .chev{width:15px;height:15px;transition:transform .2s}
.btn:hover .chev{transform:translateX(3px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex:none}
.dot.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--green-rgb),.6)}70%{box-shadow:0 0 0 8px rgba(var(--green-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--green-rgb),0)}}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.pill.live{color:var(--green2);background:rgba(var(--green-rgb),.12);border:1px solid rgba(var(--green-rgb),.45)}
.pill.wait{color:var(--acc-lt);background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc2-rgb),.4)}
.pill.warn{color:var(--gold);background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.4)}
.pill.off{color:var(--muted);background:rgba(var(--edge-rgb),.08);border:1px solid var(--edge2)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(var(--acc2-rgb),.25);border-top-color:var(--acc2);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.lbl{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.h-title{font-weight:900;font-size:clamp(34px,4.6vw,56px);line-height:.95;text-transform:uppercase;letter-spacing:-.3px}
.h-title .acc{background:linear-gradient(90deg,var(--acc2),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);font-size:var(--fs-lg);line-height:1.45}
.field{width:100%;height:46px;padding:0 14px;border-radius:10px;background:rgba(var(--ink-rgb),.65);border:1px solid var(--edge2);
  outline:none;transition:border-color .2s,box-shadow .2s;font-size:var(--fs-md)}
.field:focus{border-color:rgba(var(--acc2-rgb),.6);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
code.cmd{font-family:var(--font-mono);font-size:var(--fs-sm)}
.avatar{width:32px;height:32px;border-radius:8px;object-fit:cover;background:rgba(var(--edge-rgb),.15);flex:none}

/* ================= HEADER ================= */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:14px;transition:padding .25s}
/* three columns: the menu sits in the middle one, so it never moves when the right side changes width
   (sign-in button → avatar, online counter appearing) */
.hdr .bar{height:66px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:0 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--card-rgb),.78),rgba(var(--bg2-rgb),.86));border:1px solid var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);transition:height .25s}
.hdr.scrolled{padding-top:8px}
.hdr.scrolled .bar{height:58px;background:linear-gradient(180deg,rgba(var(--card-rgb),.92),rgba(var(--bg2-rgb),.95));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
/* while scrolling, the page under and around the bar is blurred and darkened (fades out below it) */
.hdr::before{content:"";position:absolute;inset:0 0 -22px 0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),.9),rgba(var(--bg-rgb),.55) 70%,rgba(var(--bg-rgb),0));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  mask-image:linear-gradient(#000 65%,transparent);-webkit-mask-image:linear-gradient(#000 65%,transparent)}
.hdr.scrolled::before{opacity:1}
.brand{display:flex;align-items:center;gap:12px;flex:none;justify-self:start}
.brand img{width:42px;height:42px;border-radius:11px;box-shadow:0 0 18px rgba(var(--acc-rgb),.55)}
.brand b{font-size:var(--fs-3xl);font-weight:700;letter-spacing:1px;line-height:1}
.nav{display:flex;justify-content:center;gap:4px}
.nav a,.nav .more>button{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 11px;border-radius:10px;
  font-weight:700;font-size:var(--fs-xs);letter-spacing:.6px;text-transform:uppercase;color:var(--muted);border:1px solid transparent;
  white-space:nowrap;transition:color .2s,background .2s,border-color .2s}
.nav a:hover,.nav .more>button:hover,.nav .more.open>button{color:var(--text);background:rgba(var(--edge-rgb),.08)}
.nav a.on{color:#fff;border-color:rgba(var(--acc2-rgb),.65);background:linear-gradient(180deg,rgba(37,72,140,.75),rgba(16,32,72,.85));
  box-shadow:0 0 16px rgba(var(--acc-rgb),.3),inset 0 1px 0 rgba(255,255,255,.12)}
.nav a.shop{color:var(--gold)}
.nav a.shop:hover{background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.35);color:var(--gold-lt)}
.nav a .new{font-size:var(--fs-2xs);padding:2px 5px;border-radius:5px;background:var(--acc);color:#fff;letter-spacing:.4px}
.more,.lang,.who{position:relative}
.more .caret,.who .caret{width:14px;height:14px;transition:transform .2s}
.open>button .caret{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:250px;padding:8px;border-radius:14px;z-index:5;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.open>.drop{opacity:1;visibility:visible;transform:none}
.drop a,.drop>button{display:flex;width:100%;align-items:center;padding:10px 12px;gap:12px;border-radius:9px;color:var(--text);font-size:var(--fs-md);text-align:left}
.drop a:hover,.drop>button:hover{background:rgba(var(--edge-rgb),.1)}
.drop a svg,.drop>button svg{width:18px;height:18px;color:var(--acc2)}
.drop small{display:block;color:var(--dim);font-weight:400;font-size:var(--fs-xs);margin-top:2px}
.right{display:flex;align-items:center;gap:8px;flex:none;justify-self:end;grid-column:3}
.online{display:flex;align-items:center;gap:9px;height:42px;padding:0 14px}
.online b{font-size:var(--fs-base)}
.online span{color:var(--dim);font-size:var(--fs-xs)}
.lang>button{height:42px;padding:0 12px;gap:7px}
.lang>button .globe{width:17px;height:17px;opacity:.85}
.lang .drop,.who .drop{min-width:170px;left:auto;right:0;translate:none}
/* the language list: every language in its own script, a tick by the current one; scrolls on short screens */
.lang .drop{min-width:220px;max-height:min(70vh,560px);overflow-y:auto}
.lang .drop button{gap:10px;font-weight:600;font-size:var(--fs-sm);font-family:var(--font-body);text-align:start}
.lang .drop button .tick{width:16px;height:16px;color:var(--acc2);visibility:hidden;flex:none}
.lang .drop button.on{color:var(--acc2)}
.lang .drop button.on .tick{visibility:visible}
.steam svg{width:19px;height:19px}
.who>button{display:flex;align-items:center;gap:9px;height:42px;padding:0 10px 0 5px;border-radius:10px;border:1px solid var(--edge2);
  background:rgba(var(--ink-rgb),.5);font-weight:700;font-size:var(--fs-sm);max-width:210px}
.who>button:hover{border-color:rgba(var(--acc2-rgb),.45)}
.hdr .who>button img,.drawer .top img{width:32px;height:32px;border-radius:8px;box-shadow:none}
.who>button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger{display:none;width:42px;padding:0}
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.open{display:block}
.drawer .shade{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.drawer .sheet{position:absolute;top:10px;right:10px;left:10px;max-width:420px;margin-left:auto;padding:14px;border-radius:16px;
  display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 20px);overflow:auto}
.drawer .sheet a.item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;font-weight:700;font-size:var(--fs-base);
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.drawer .sheet a.item.on{color:#fff;background:linear-gradient(180deg,rgba(37,72,140,.75),rgba(16,32,72,.85));border:1px solid rgba(var(--acc2-rgb),.6)}
.drawer .sheet a.item.shop{color:var(--gold)}
.drawer .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.drawer .langs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.drawer .langs button{height:40px;border-radius:10px;font-weight:700;border:1px solid var(--edge2);color:var(--muted)}
.drawer .langs button.on{color:#fff;border-color:rgba(var(--acc2-rgb),.6);background:rgba(var(--acc-rgb),.15)}

/* ================= FOOTER ================= */
.ftr{position:relative;margin-top:40px;padding:20px 0 24px;border-top:1px solid var(--edge);background:rgba(var(--ink-rgb),.6)}
.ftr::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--acc2-rgb),.55),transparent)}
.ftr .legal{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;align-items:center;gap:6px 20px;color:var(--dim);font-size:var(--fs-xs)}
.ftr .legal span{color:var(--text2)}
.ftr .legal b{font-family:var(--font-display);letter-spacing:1px;color:var(--text)}

/* toast */
.toasts{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:12px 18px;border-radius:12px;font-size:var(--fs-md);background:rgba(var(--card-rgb),.96);border:1px solid var(--edge2);
  box-shadow:0 14px 40px rgba(0,0,0,.6);animation:toast .25s ease-out;max-width:min(92vw,520px);text-align:center}
.toast.err{border-color:rgba(var(--red-rgb),.5);color:var(--red-lt)}
.toast.ok{border-color:rgba(var(--green2-rgb),.5);color:var(--green-lt)}
@keyframes toast{from{opacity:0;transform:translateY(8px)}}

.rv{opacity:0;transform:translateY(16px);animation:rv .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rv{to{opacity:1;transform:none}}
html.insite .rv{animation:none;opacity:1;transform:none}
/* reveal on scroll (below the first screen): app.js adds .in when the element comes into view */
.js .sv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.js .sv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}.rv,.js .sv{opacity:1;transform:none}}

@media (max-width:1380px){
  .nav a,.nav .more>button{padding:0 9px;font-size:var(--fs-xs)}
  .online span{display:none}
}
@media (max-width:1240px){.online{display:none}}
@media (max-width:1280px){
  .nav,.lang,.right .steam span,.who>button span,.who .caret{display:none}
  .burger{display:inline-flex}
  .hdr .bar{grid-template-columns:auto 1fr}
  .right{grid-column:2}
  .steam{padding:0 12px}
  .who>button{padding:0 5px}
}
@media (max-width:620px){
  :root{--gut:16px}
  .hdr{padding-top:10px}
  .hdr .bar{height:58px;padding:0 8px;gap:10px}
  .brand img{width:36px;height:36px}
  .brand b{font-size:var(--fs-xl)}
  main.page-main{padding-top:96px}
}

/* right-to-left languages (Arabic): the header and drop-downs mirror */
[dir=rtl] .lang .drop,[dir=rtl] .who .drop{right:auto;left:0}
[dir=rtl] .btn .chev,[dir=rtl] svg.i use[href="#arrow"]{transform:scaleX(-1)}
[dir=rtl] .drawer .sheet{margin-left:0;margin-right:auto}

/* a soft light that follows the cursor over cards (position set by app.js) */
.tile,.g-card,.case{position:relative}
.tile::after,.g-card::after,.srv::after,.case::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc2-rgb),.09),transparent 65%);opacity:0;transition:opacity .35s}
.tile:hover::after,.g-card:hover::after,.srv:hover::after,.case:hover::after{opacity:1}