/* ===== VoxelBox — Calagopus theme v7 (calm bg + per-game hero + pure-CSS list art) ===== */
:root{
  --vb-cyan:#6ee7f2;--vb-mint:#55f0b1;--vb-coral:#ff6b5a;--vb-amber:#f8c56a;--vb-violet:#a786ff;
  --mantine-font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mantine-color-blue-0:#e7fdff;--mantine-color-blue-1:#c5f6fb;--mantine-color-blue-2:#9eeef5;
  --mantine-color-blue-3:#74e6ef;--mantine-color-blue-4:#51dde8;--mantine-color-blue-5:#2fcfdc;
  --mantine-color-blue-6:#17bccb;--mantine-color-blue-7:#0f97a4;--mantine-color-blue-8:#0b757f;--mantine-color-blue-9:#08555d;
  --mantine-color-blue-filled:#15b8c7;--mantine-color-blue-filled-hover:#0f97a4;
  --mantine-color-blue-light:rgba(110,231,242,.13);--mantine-color-blue-light-hover:rgba(110,231,242,.22);--mantine-color-blue-light-color:#7df0fa;
  --mantine-primary-color-filled:#15b8c7;--mantine-primary-color-filled-hover:#0f97a4;
  --mantine-primary-color-light:rgba(110,231,242,.13);--mantine-primary-color-light-color:#7df0fa;
}
[data-mantine-color-scheme="dark"]{
  --mantine-color-dark-0:#eef3fb;--mantine-color-dark-1:#c4cfdd;--mantine-color-dark-2:#8b98ad;--mantine-color-dark-3:#5c6779;
  --mantine-color-dark-4:#283242;--mantine-color-dark-5:#18212e;--mantine-color-dark-6:#111824;
  --mantine-color-dark-7:#0b0f17;--mantine-color-dark-8:#080b12;--mantine-color-dark-9:#05070c;
  --mantine-color-body:transparent;--mantine-color-text:#eaf0f7;
  --mantine-color-default:#0e1520;--mantine-color-default-hover:#131c29;--mantine-color-default-border:#243043;
}
/* ===== moving background (injected #vb-bg lives behind #root) ===== */
html{background:#05070d!important;}
body{background:transparent!important;}
#vb-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(135% 130% at 50% -20%,#0a1220 0%,#060a12 50%,#04060c 100%);}
#vb-bg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 120%,transparent 40%,rgba(4,6,12,.85) 100%);}
#vb-bg::after{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(120,200,230,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,200,230,.045) 1px,transparent 1px);
  background-size:66px 66px;animation:vbGrid 55s linear infinite;
  -webkit-mask-image:radial-gradient(125% 105% at 50% 0%,#000 52%,transparent 100%);mask-image:radial-gradient(125% 105% at 50% 0%,#000 52%,transparent 100%);}
.vb-blob{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform;}
.vb-blob-c{width:54vw;height:54vw;left:-10vw;top:-20vh;opacity:.22;background:radial-gradient(circle at 50% 50%,#15b8c7,transparent 62%);animation:vbA 30s ease-in-out infinite alternate;}
.vb-blob-v{width:48vw;height:48vw;right:-12vw;top:-4vh;opacity:.18;background:radial-gradient(circle at 50% 50%,#a786ff,transparent 62%);animation:vbB 38s ease-in-out infinite alternate;}
.vb-blob-o{width:42vw;height:42vw;left:22vw;bottom:-26vh;opacity:.12;background:radial-gradient(circle at 50% 50%,#ff6b5a,transparent 62%);animation:vbC 34s ease-in-out infinite alternate;}
.vb-blob-m{width:40vw;height:40vw;left:-8vw;bottom:-18vh;opacity:.13;background:radial-gradient(circle at 50% 50%,#55f0b1,transparent 62%);animation:vbD 44s ease-in-out infinite alternate;}
@keyframes vbA{0%{transform:translate(0,0) scale(1);}100%{transform:translate(13vw,9vh) scale(1.22);}}
@keyframes vbB{0%{transform:translate(0,0) scale(1.05);}100%{transform:translate(-15vw,11vh) scale(1.24);}}
@keyframes vbC{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-11vw,-13vh) scale(1.26);}}
@keyframes vbD{0%{transform:translate(0,0) scale(1.1);}100%{transform:translate(15vw,-9vh) scale(1.2);}}
@keyframes vbGrid{from{background-position:0 0,0 0;}to{background-position:66px 66px,66px 66px;}}
/* ===== per-game full-bleed hero (single server page; set via JS) ===== */
#vb-hero{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:#05070d;
  background-repeat:no-repeat,no-repeat;background-position:center top,center top;background-size:cover,cover;}
#vb-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% -12%,transparent 42%,rgba(5,7,13,.5) 100%);}
body.vb-has-hero #vb-bg{display:none;}
/* content sits above the bg; let it show through the shell */
#root{position:relative;z-index:1;background:transparent!important;}
.mantine-AppShell-root,.mantine-AppShell-main{background:transparent!important;}
a{color:var(--vb-cyan);} *:focus-visible{outline-color:var(--vb-cyan)!important;} ::selection{background:rgba(110,231,242,.3);}
/* glassy surfaces */
[data-mantine-color-scheme="dark"] .mantine-Paper-root,[data-mantine-color-scheme="dark"] .mantine-Card-root{
  background:linear-gradient(180deg,rgba(17,24,36,.72),rgba(11,16,23,.82))!important;border:1px solid #1c2735!important;
  box-shadow:0 18px 50px rgba(0,0,0,.42);backdrop-filter:blur(2px);}
.mantine-AppShell-header,.mantine-AppShell-navbar{background:rgba(8,11,16,.72)!important;backdrop-filter:blur(16px);border-color:#18212e!important;}
.mantine-NavLink-root[data-active],.mantine-NavLink-root:hover{background:rgba(110,231,242,.10)!important;}
.mantine-NavLink-root[data-active]{box-shadow:inset 3px 0 0 var(--vb-cyan);}
.mantine-Button-root[data-variant="filled"],button[data-variant="filled"]{background-image:linear-gradient(135deg,#6ee7f2,#15b8c7)!important;color:#05121a!important;font-weight:800;border:0;}
.mantine-Button-root[data-variant="filled"]:hover{filter:brightness(1.07);}

/* ===== server-list row art — pure CSS via :has(), keyed on each row's server-link id.
   No DOM injection, so nothing shifts after load. Scoped to list pages (not the hero page). ===== */
body:not(.vb-has-hero) .mantine-Card-root:has(a[href*="/server/47f429bb"]){--vb-art:url(/vb-art/fivem-hero.jpg);}
body:not(.vb-has-hero) .mantine-Card-root:has(a[href*="/server/e6879f7c"]){--vb-art:url(/vb-art/minecraft-hero.jpg);}
body:not(.vb-has-hero) .mantine-Card-root:has(a[href*="/server/f4077d6c"]){--vb-art:url(/vb-art/palworld-hero.jpg);}
body:not(.vb-has-hero) .mantine-Card-root:has(a[href*="/server/7ac9ebd7"]){--vb-art:url(/vb-art/satisfactory-hero.jpg);}
body:not(.vb-has-hero) .mantine-Card-root:has(a[href*="/server/fd2c6093"]){--vb-art:url(/vb-art/american-truck-sim-hero.jpg);}
body:not(.vb-has-hero) .mantine-Card-root:has(a[href*="/server/9ea0a963"]){--vb-art:url(/vb-art/beammp-hero.jpg);}
body:not(.vb-has-hero) .mantine-Card-root:has(a[href*="/server/20f55d2"]){--vb-art:url(/vb-art/enshrouded-hero.jpg);}
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/47f429bb"]),
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/e6879f7c"]),
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/f4077d6c"]),
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/7ac9ebd7"]),
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/fd2c6093"]),
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/9ea0a963"]),
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/20f55d2"]){
  position:relative;overflow:hidden;isolation:isolate;transition:border-color .2s ease,box-shadow .2s ease;}
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/47f429bb"])::before,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/e6879f7c"])::before,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/f4077d6c"])::before,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/7ac9ebd7"])::before,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/fd2c6093"])::before,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/9ea0a963"])::before,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/20f55d2"])::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--vb-art) left center/cover no-repeat;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.28) 62%,transparent 88%);
  mask-image:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.28) 62%,transparent 88%);}
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/47f429bb"])::after,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/e6879f7c"])::after,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/f4077d6c"])::after,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/7ac9ebd7"])::after,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/fd2c6093"])::after,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/9ea0a963"])::after,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/20f55d2"])::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,11,16,.42) 0%,rgba(8,11,16,.58) 52%,rgba(8,11,16,.84) 100%);}
/* lift the row's real content above the art layers */
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/47f429bb"])>*,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/e6879f7c"])>*,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/f4077d6c"])>*,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/7ac9ebd7"])>*,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/fd2c6093"])>*,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/9ea0a963"])>*,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/20f55d2"])>*{
  position:relative;z-index:1;}
/* inner panels stay transparent so the row art reads through, but keep text crisp */
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/47f429bb"]) .mantine-Paper-root,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/e6879f7c"]) .mantine-Paper-root,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/f4077d6c"]) .mantine-Paper-root,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/7ac9ebd7"]) .mantine-Paper-root,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/fd2c6093"]) .mantine-Paper-root,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/9ea0a963"]) .mantine-Paper-root,
body:not(.vb-has-hero) [data-mantine-color-scheme="dark"] .mantine-Card-root:has(a[href*="/server/20f55d2"]) .mantine-Paper-root{
  background:transparent!important;border-color:transparent!important;box-shadow:none;backdrop-filter:none;}