/* game-landing.css: the per-game hosting landings (game-landing.tpl: 48 game pages, the modpack pages and the two
   Romanian pages). Design record: docs/DESIGN-GAME-LANDING.md. The page stands on the homepage's v4 system: the --em-*
   tokens come from esa-v4-bridge.css (every public page has them on :root), the faces from custom.css, and the em-
   components the page uses are restated here under its own root, .gl4, because the homepage keeps its own under .v3.
   Colour only through tokens; the night stage reads the --em-night-* set. Every class of its own starts with gl4-. */

/* ---- the legacy container, opened so the stages run edge to edge (as the homepage does with page-homepage) ---- */
body.page-game-landing #main-body{ display:block !important; padding:0 !important; overflow-x:clip; background:var(--em-ground) !important; }
body.page-game-landing{ overflow-x:clip; }
/* the bundle pads it with body:not(.homepage-reset):not(.page-homepage) #main-body>.page-container{padding:0 48px!important} */
html body.page-game-landing:not(.homepage-reset) #main-body > .page-container.page-container{ max-width:none !important; padding:0 !important; margin:0 !important; width:100% !important; }
html body.page-game-landing #main-body > .page-container > .row{ margin:0 !important; }
html body.page-game-landing #main-body .primary-content{ padding:0 !important; max-width:none !important; background:var(--em-ground) !important; }
/* the guest welcome band sits between the header and the hero: the page opens on its stage, as the homepage does (the
   header keeps Sign in and Create account) */
body.page-game-landing #breadcrumb{ display:none !important; }

/* ---- type, space, motion: the homepage's scale (docs/DESIGN-HOME-V4.md "Type" and "Space") ---- */
.gl4{
    --em-fs-h2:clamp(30px, 25.6px + 1.124vw, 40px); --em-fs-h3:clamp(19px, 18.1px + .225vw, 21px);
    --em-fs-lead:clamp(17px, 16.1px + .225vw, 19px); --em-fs-display2:clamp(34px, 26px + 2.4vw, 60px);
    --em-sec-pad:96px; --em-head-gap:48px; --em-col-gap:40px; --em-card-pad:24px; --em-card-gap:16px;
    --em-ease:cubic-bezier(.2,.7,.2,1);
    color:var(--em-text-1); background:var(--em-ground);
    font:400 16px/1.6 var(--em-font-text); -webkit-font-smoothing:antialiased; interpolate-size:allow-keywords;
}
@media (max-width:719.98px){ .gl4{ --em-sec-pad:64px; --em-head-gap:32px; --em-col-gap:24px; --em-card-pad:20px; --em-card-gap:12px; } }
.gl4 *, .gl4 *::before, .gl4 *::after{ box-sizing:border-box; }
:where(.gl4) :is(h1, h2, h3, p, figure, ul, ol, dl, dd){ margin:0; }
:where(.gl4) :is(ul, ol){ padding:0; list-style:none; }
.gl4 a{ color:inherit; text-decoration:none; }
:where(.gl4) button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:where(.gl4) img{ display:block; max-width:100%; height:auto; }
.gl4 :focus-visible{ outline:2px solid var(--em-focus); outline-offset:2px; }
.gl4 :focus:not(:focus-visible){ outline:none; }
.gl4 :is(h1, h2, h3){ font-family:var(--em-font-display); color:var(--em-text-1); text-wrap:balance; }
.gl4 :is(p, li, summary){ text-wrap-style:pretty; }
.gl4 h2{ font-weight:600; font-size:var(--em-fs-h2); line-height:1.1; letter-spacing:-.025em; }
.gl4 h3{ font-weight:500; font-size:var(--em-fs-h3); line-height:1.3; letter-spacing:-.012em; }
.gl4 :is(b, strong){ font-weight:500; }
.gl4 .em-wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }
@media (max-width:719.98px){ .gl4 .em-wrap{ padding:0 20px; } }
.gl4 .em-i{ display:inline-block; flex:none; width:20px; height:20px; vertical-align:middle; }
.gl4 .em-i.is-16{ width:16px; height:16px; }
.gl4 .em-i.is-24{ width:24px; height:24px; }
.gl4 .em-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.gl4 .em-nw{ white-space:nowrap; }

/* sections: ground and band, the head pattern (h2 left, lead and controls right from 1024) */
.gl4 .gl4-sec{ padding:var(--em-sec-pad) 0; background:var(--em-ground); }
.gl4 .gl4-sec.is-band{ background:var(--em-band); }
.gl4 .gl4-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:16px var(--em-col-gap); align-items:start; margin-bottom:var(--em-head-gap); }
.gl4 .gl4-head h2{ max-width:16em; }
.gl4 .gl4-head-side{ display:flex; flex-direction:column; gap:16px; min-width:0; align-self:stretch; }
.gl4 .gl4-lead{ font:400 var(--em-fs-lead)/1.55 var(--em-font-text); letter-spacing:-.006em; color:var(--em-text-2); max-width:52ch; }
.gl4 .gl4-label{ display:block; margin-bottom:12px; font:500 13px/1.3 var(--em-font-text); letter-spacing:.005em; color:var(--em-brand-text); }
/* every h2 starts at the section's edge; a rail's arrows sit at the foot of the head, just over the rail they move */
.gl4 .gl4-ctl{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:auto; }
@media (max-width:1023.98px){
    .gl4 .gl4-head{ grid-template-columns:minmax(0,1fr); gap:12px; }
    .gl4 .gl4-head-side{ gap:20px; }
    .gl4 .gl4-ctl{ justify-content:flex-start; }
}

/* buttons, icon buttons, links, chips: the homepage's components */
.gl4 .em-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:10px;
    border:1px solid transparent; font:500 14px/1 var(--em-font-text); white-space:nowrap;
    transition:background-color 160ms var(--em-ease), border-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.gl4 .em-btn .em-i{ width:16px; height:16px; }
.gl4 .em-btn.is-lg{ height:48px; padding:0 24px; font-size:15px; }
.gl4 .em-btn.is-primary{ background:var(--em-grad-action) var(--em-brand); color:var(--em-on-brand); }
.gl4 .em-btn.is-primary:hover{ background-image:none; color:var(--em-on-brand); }
.gl4 .em-btn.is-secondary{ border-color:var(--em-line-strong); color:var(--em-text-1); }
.gl4 .em-btn.is-secondary:hover{ background:var(--em-surface-2); border-color:var(--em-line-control); color:var(--em-text-1); }
.gl4 .em-btn.is-ghost{ color:var(--em-text-2); }
.gl4 .em-btn.is-ghost:hover{ background:var(--em-surface-2); color:var(--em-text-1); }
.gl4 .em-ibtn{ display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--em-line-strong); color:var(--em-text-2);
    transition:background-color 160ms var(--em-ease), border-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.gl4 .em-ibtn:hover{ background:var(--em-surface-2); border-color:var(--em-line-control); color:var(--em-text-1); }
.gl4 .em-ibtn[aria-disabled="true"]{ background:none; border-color:var(--em-line); color:var(--em-line-strong); cursor:default; }
/* the bundle removes every underline with *{text-decoration:none!important}; !important is the only way back */
.gl4 .em-link{ color:var(--em-text-1); text-decoration-line:underline !important; text-decoration-color:var(--em-brand-line) !important;
    text-decoration-thickness:1px !important; text-underline-offset:3px; transition:text-decoration-color 160ms var(--em-ease); }
.gl4 .em-link:hover{ text-decoration-color:var(--em-brand-text) !important; }
.gl4 .em-action{ display:inline-flex; align-items:center; gap:4px; min-height:44px; font:500 14px/1.5 var(--em-font-text); color:var(--em-brand-text); }
.gl4 .em-action:hover{ text-decoration-line:underline !important; text-decoration-thickness:1px !important; text-underline-offset:3px; }
.gl4 .em-action .em-i{ width:16px; height:16px; }

/* ---- the night stage (the hero and the closing): edge to edge, everything inside reads the night set ---- */
.gl4 .gl4-stage{
    --em-ground:var(--em-night-ground); --em-surface:var(--em-night-surface); --em-surface-2:var(--em-night-surface-2); --em-band:var(--em-night-ground);
    --em-line:var(--em-night-line); --em-line-strong:var(--em-night-line-strong); --em-line-control:var(--em-night-line-control);
    --em-text-1:var(--em-night-text-1); --em-text-2:var(--em-night-text-2); --em-text-3:var(--em-night-text-3);
    --em-brand-text:var(--em-night-brand-text); --em-focus:var(--em-night-brand-text); --em-brand-line:var(--em-night-brand-text);
    position:relative; isolation:isolate; overflow:hidden; overflow:clip; background:var(--em-stage); color:var(--em-text-1); color-scheme:dark;
}
.gl4 .gl4-gl{ position:absolute; inset:0; z-index:0; touch-action:pan-y; }
.gl4 .gl4-gl canvas{ display:block; width:100%; height:100%; opacity:0; transition:opacity 1.8s ease; }
.gl4 .gl4-gl.is-on canvas{ opacity:1; }
.gl4 .gl4-display{ background:var(--em-grad-display); -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-box-decoration-break:slice; box-decoration-break:slice; padding-bottom:.08em; }

/* ---- hero: the game's own key art as a wall of panels (assets/js/game-landing/wall.js), the words on the page grid.
   The stage is a size container; from 1000 px of stage the words are left and the wall right, below it the wall is a
   band on top and the words under it. Until the wall is drawn (and without WebGL) the same art stands in its slot,
   dissolved into the night; the wall fades in over it and the picture steps back. ---- */
.gl4 .gl4-hero{ container-type:inline-size; }
.gl4 .gl4-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(var(--em-scrim),0) 0, rgba(var(--em-scrim),0) clamp(170px, 52cqi, 350px), rgba(var(--em-scrim),.9) clamp(250px, 70cqi, 450px)); }
.gl4 .gl4-hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr); pointer-events:none; }
.gl4 .gl4-hero-in > *{ pointer-events:auto; }
.gl4 .gl4-hero-in > .gl4-slot{ pointer-events:none; }
.gl4 .gl4-slot{ position:relative; height:clamp(220px, 62cqi, 420px); margin:0 -20px; }
.gl4 .gl4-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--gl4-f, 50% 40%);
    -webkit-mask-image:linear-gradient(180deg, var(--em-stage) 55%, transparent); mask-image:linear-gradient(180deg, var(--em-stage) 55%, transparent);
    transition:opacity .9s ease; }
.gl4 .gl4-hero.is-wall .gl4-slot img{ opacity:0; }
.gl4 .gl4-slot.is-name{ display:grid; place-items:center; }
.gl4 .gl4-slot-name{ font:600 clamp(40px, 12cqi, 96px)/1.1 var(--em-font-display); letter-spacing:-.04em; text-align:center; transition:opacity .9s ease; }
.gl4 .gl4-hero.is-wall .gl4-slot-name{ opacity:0; }
.gl4 .gl4-copy{ padding-top:8px; }
.gl4 .gl4-eyebrow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:16px; font:500 13px/1.3 var(--em-font-text); letter-spacing:.005em; color:var(--em-text-2); }
.gl4 .gl4-eyebrow > span{ display:inline-flex; align-items:center; gap:8px; }
.gl4 .gl4-eyebrow .em-i{ color:var(--em-brand-text); }
.gl4 .gl4-lang{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 10px; border:1px solid var(--em-line-strong); border-radius:8px; color:var(--em-text-1);
    transition:border-color 160ms var(--em-ease), background-color 160ms var(--em-ease); }
.gl4 .gl4-lang:hover{ border-color:var(--em-line-control); background:var(--em-surface-2); }
@media (pointer:coarse){ .gl4 .gl4-lang{ min-height:44px; } }
.gl4 .gl4-hero h1{ font:600 clamp(34px, calc(8.6cqi - 2px), 56px)/1.04 var(--em-font-display); letter-spacing:-.035em; overflow-wrap:anywhere; }
.gl4 .gl4-hero h1 > span{ display:block; }
.gl4 .gl4-hero h1 .gl4-display{ display:inline; }
.gl4 .gl4-hero-lead{ margin-top:20px; max-width:34em; font:400 var(--em-fs-lead)/1.55 var(--em-font-text); letter-spacing:-.006em; color:var(--em-text-2); }
.gl4 .gl4-buy{ display:flex; flex-wrap:wrap; align-items:center; gap:20px 24px; margin-top:32px; }
.gl4 .gl4-price{ display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:8px; font:400 13px/1.45 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-price > span:first-child{ grid-column:1 / 3; }
.gl4 .gl4-price strong{ font:600 28px/1.1 var(--em-font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--em-text-1); }
.gl4 .gl4-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.gl4 .gl4-chips{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:28px; font:500 13px/1.3 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-chips li{ display:inline-flex; align-items:center; gap:8px; }
.gl4 .gl4-chips .em-i{ color:var(--em-text-3); }

/* the proof row: the four facts, then Pause animations at its end */
.gl4 .gl4-proof{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; margin-top:40px; padding:20px 0 32px; border-top:1px solid var(--em-line); }
.gl4 .gl4-facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px; flex:1 1 520px; }
.gl4 .gl4-facts li{ display:flex; align-items:center; gap:12px; min-width:0; }
.gl4 .gl4-facts .em-i{ color:var(--em-text-3); }
.gl4 .gl4-facts b{ display:block; font:600 17px/1.2 var(--em-font-display); letter-spacing:-.01em; color:var(--em-text-1); font-variant-numeric:tabular-nums; }
.gl4 .gl4-facts span{ display:block; font:400 13px/1.4 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-motion{ flex:none; margin-right:-12px; padding:0 12px; }
.gl4 .gl4-motion[hidden]{ display:none; }
.gl4 .gl4-motion .gl4-i-play, .gl4 .gl4-motion.is-off .gl4-i-pause{ display:none; }
.gl4 .gl4-motion.is-off .gl4-i-play{ display:inline-block; }
@container (min-width:720px){
    .gl4 .gl4-facts{ grid-template-columns:repeat(4, auto); justify-content:start; column-gap:40px; }
}
@container (max-width:599.98px){
    .gl4 .gl4-ctas{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; }
    .gl4 .gl4-ctas .em-btn{ padding:0 8px; }
    .gl4 .gl4-proof{ margin-top:32px; }
}
@container (max-width:359.98px){ .gl4 .gl4-ctas{ grid-template-columns:minmax(0,1fr); } }
@container (min-width:1000px){
    .gl4 .gl4-hero::after{ background:linear-gradient(90deg, rgba(var(--em-scrim),.96) 0%, rgba(var(--em-scrim),.88) 32%, rgba(var(--em-scrim),.4) 47%, rgba(var(--em-scrim),0) 60%); }
    .gl4 .gl4-hero-in{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); column-gap:var(--em-col-gap); padding-top:72px; min-height:min(640px, 76vh); align-items:center; }
    .gl4 .gl4-copy{ grid-area:1 / 1; padding:0; }
    .gl4 .gl4-slot{ grid-area:1 / 2; align-self:stretch; height:auto; min-height:420px; margin:-72px calc(-1 * max(40px, 50cqi - 600px)) 0 0; }
    .gl4 .gl4-slot img{ -webkit-mask-image:linear-gradient(90deg, transparent, var(--em-stage) 30%); mask-image:linear-gradient(90deg, transparent, var(--em-stage) 30%); }
    .gl4 .gl4-hero h1{ font-size:clamp(42px, calc(3.9cqi - 2px), 54px); }
    .gl4 .gl4-proof{ grid-area:2 / 1 / 3 / 3; margin-top:48px; padding-bottom:28px; }
}

/* ---- reveal: what scrolls into view rises a little and fades in, once (the script adds .gl4-js before paint) ---- */
.gl4-js .gl4 .gl4-rv{ opacity:0; translate:0 14px; transition:opacity .7s var(--em-ease), translate .9s var(--em-ease); transition-delay:calc(var(--gl4-i, 0) * 70ms); }
.gl4-js .gl4 .gl4-rv.is-in{ opacity:1; translate:none; }

/* ---- cards: flat, a hairline; with a fine pointer they lean toward it (the script sets --gl4-rx/--gl4-ry) ---- */
.gl4 .gl4-card{ position:relative; padding:var(--em-card-pad); background:var(--em-surface); border:1px solid var(--em-line); border-radius:16px;
    transform:perspective(900px) rotateX(var(--gl4-rx, 0deg)) rotateY(var(--gl4-ry, 0deg)); transition:border-color 160ms var(--em-ease), transform .5s var(--em-ease); }
.gl4 .gl4-card.is-tilt{ transition:border-color 160ms var(--em-ease), transform .12s linear; }
@media (hover:hover){ .gl4 .gl4-card:hover{ border-color:var(--em-line-strong); } }
.gl4 .gl4-card h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.gl4 .gl4-card:has(a:focus-visible){ outline:2px solid var(--em-focus); outline-offset:2px; }
.gl4 .gl4-card h3 a:focus-visible{ outline:none; }
.gl4 .gl4-card .em-i.is-24{ color:var(--em-text-2); }
.gl4 .gl4-card h3{ margin-top:16px; }
.gl4 .gl4-card p{ margin-top:8px; font:400 14px/1.55 var(--em-font-text); color:var(--em-text-2); }

/* ---- what's included: the intro beside six cards ---- */
.gl4 .gl4-feat{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--em-col-gap); }
.gl4 .gl4-prose{ display:grid; gap:16px; max-width:68ch; font:400 16px/1.65 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-prose p:first-child{ color:var(--em-text-1); }
.gl4 .gl4-cards{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--em-card-gap); }
@media (min-width:720px){ .gl4 .gl4-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){
    .gl4 .gl4-feat{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
    .gl4 .gl4-feat .gl4-prose{ position:sticky; top:104px; }
    .gl4 .gl4-feat.is-solo{ grid-template-columns:minmax(0,1fr); }
    .gl4 .gl4-feat.is-solo .gl4-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ---- why: six commitments on hairlines, no cards ---- */
.gl4 .gl4-why{ display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--em-line); }
.gl4 .gl4-why li{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px 16px; padding:24px 0; border-bottom:1px solid var(--em-line); }
.gl4 .gl4-why .em-i{ grid-row:1 / 3; margin-top:2px; color:var(--em-brand-mark); }
.gl4 .gl4-why p{ font:400 15px/1.6 var(--em-font-text); color:var(--em-text-2); }
@media (max-width:719.98px){ .gl4 .gl4-why{ border-top:0; } .gl4 .gl4-why li{ border-top:1px solid var(--em-line); align-content:start; } }
@media (min-width:720px){
    .gl4 .gl4-why{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--em-col-gap); }
}
@media (min-width:1024px){
    .gl4 .gl4-why{ grid-template-columns:repeat(3, minmax(0,1fr)); }
    .gl4 .gl4-why li{ padding:28px 0 32px; }
}

/* ---- how to make a server: four steps on a line that fills as the section scrolls through (--gl4-p, 0 to 1) ---- */
.gl4 .gl4-steps{ --gl4-p:1; position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:32px; counter-reset:gl4-step; }
.gl4-js .gl4 .gl4-steps{ --gl4-p:0; }
.gl4 .gl4-steps::before, .gl4 .gl4-steps::after{ content:""; position:absolute; left:23px; top:8px; bottom:8px; width:2px; border-radius:1px; background:var(--em-line); }
.gl4 .gl4-steps::after{ background:var(--em-brand-mark); transform-origin:top; transform:scaleY(var(--gl4-p)); }
.gl4 .gl4-step{ position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:4px 20px; }
.gl4 .gl4-step-n{ grid-row:1 / 3; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--em-ground); border:1px solid var(--em-line-strong);
    font:600 17px/1 var(--em-font-display); font-variant-numeric:tabular-nums; color:var(--em-text-2); z-index:1; transition:background-color .4s var(--em-ease), border-color .4s var(--em-ease), color .4s var(--em-ease); }
.gl4 .gl4-step.is-lit .gl4-step-n{ background:var(--em-brand); border-color:var(--em-brand); color:var(--em-on-brand); }
.gl4 .gl4-step h3{ align-self:center; }
.gl4 .gl4-step p{ font:400 15px/1.6 var(--em-font-text); color:var(--em-text-2); }
@media (min-width:1024px){
    .gl4 .gl4-steps{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--em-col-gap); }
    .gl4 .gl4-steps::before, .gl4 .gl4-steps::after{ left:24px; right:24px; top:23px; bottom:auto; width:auto; height:2px; }
    .gl4 .gl4-steps::after{ transform-origin:left; transform:scaleX(var(--gl4-p)); }
    .gl4 .gl4-step{ grid-template-columns:minmax(0,1fr); gap:0; }
    .gl4 .gl4-step-n{ grid-row:auto; margin-bottom:24px; }
    .gl4 .gl4-step h3{ align-self:start; margin-bottom:8px; }
}

/* ---- recommended specs: three plans, each with a memory gauge drawn from its own RAM figure ---- */
.gl4 .gl4-specs{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--em-card-gap); }
@media (min-width:720px){ .gl4 .gl4-specs{ grid-template-columns:repeat(var(--gl4-n, 3), minmax(0,1fr)); } }
@media (min-width:720px) and (max-width:1023.98px){ .gl4 .gl4-specs.is-many{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.gl4 .gl4-specs-go{ margin-top:32px; }
.gl4 .gl4-spec{ display:flex; flex-direction:column; }
.gl4 .gl4-spec h3{ margin:0; }
.gl4 .gl4-spec-ram{ display:flex; align-items:baseline; gap:8px; margin-top:20px; }
.gl4 .gl4-spec-ram b{ font:600 28px/1.1 var(--em-font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--em-text-1); }
.gl4 .gl4-spec-ram span{ font:500 13px/1.3 var(--em-font-text); color:var(--em-text-3); }
.gl4 .gl4-meter{ position:relative; height:6px; margin-top:16px; border-radius:3px; background:var(--em-surface-2); overflow:hidden; }
.gl4 .gl4-meter[hidden]{ display:none; }
.gl4 .gl4-meter i{ position:absolute; inset:0; border-radius:inherit; background:var(--em-grad-action) var(--em-brand); transform-origin:left;
    transform:scaleX(var(--gl4-m, 0)); transition:transform 1.4s var(--em-ease); }
.gl4 .gl4-spec .gl4-spec-pl{ margin-top:16px; font:500 15px/1.4 var(--em-font-text); color:var(--em-text-1); }
.gl4 .gl4-spec .gl4-spec-for{ margin-top:6px; }
.gl4 .gl4-from{ font:400 15px/1.5 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-from strong{ font:600 20px/1.2 var(--em-font-display); color:var(--em-text-1); font-variant-numeric:tabular-nums; }

/* ---- modes and versions: chips ---- */
.gl4 .gl4-modes{ display:flex; flex-wrap:wrap; gap:10px; }
.gl4 .gl4-mode{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 14px; border:1px solid var(--em-line); border-radius:10px; background:var(--em-surface);
    font:500 14px/1.3 var(--em-font-text); color:var(--em-text-1); }
.gl4 .gl4-mode .em-i{ color:var(--em-success); }

/* ---- Anti-DDoS callout: the words beside a drawing of the edge (attack traffic stops at it, players pass) ---- */
.gl4 .gl4-guard{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px var(--em-col-gap); align-items:center; margin-top:var(--em-sec-pad);
    padding:clamp(24px, 4vw, 40px); background:var(--em-surface); border:1px solid var(--em-line); border-radius:16px; }
.gl4 .gl4-guard h2{ font-size:var(--em-fs-h3); font-weight:500; line-height:1.3; letter-spacing:-.012em; }
.gl4 .gl4-guard p{ margin-top:12px; max-width:62ch; font:400 15px/1.6 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-guard .em-btn{ margin-top:24px; }
.gl4 .gl4-edge{ display:block; width:100%; height:auto; max-height:180px; overflow:visible; }
.gl4 .gl4-edge .gl4-lane{ stroke:var(--em-line); }
.gl4 .gl4-edge .gl4-wall{ stroke:var(--em-brand-mark); }
.gl4 .gl4-edge .gl4-box{ fill:var(--em-surface-2); stroke:var(--em-line-strong); }
.gl4 .gl4-edge .gl4-bad{ fill:var(--em-attack); }
.gl4 .gl4-edge .gl4-good{ fill:var(--em-clean); }
.gl4 .gl4-key{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; font:400 13px/1.4 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-key span{ display:inline-flex; align-items:center; gap:8px; }
.gl4 .gl4-key span::before{ content:""; flex:none; width:9px; height:9px; border-radius:50%; background:var(--em-clean); }
.gl4 .gl4-key .is-bad::before{ background:var(--em-attack); }
.gl4 .gl4-key .is-edge::before{ width:3px; height:14px; border-radius:2px; background:var(--em-brand-mark); }
.gl4 .gl4-edge circle{ animation:gl4-flow var(--d, 3s) linear var(--o, 0s) infinite; }
.gl4 .gl4-edge .gl4-bad{ animation-name:gl4-stop; }
@keyframes gl4-flow{ from{ transform:translateX(0); opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } to{ transform:translateX(330px); opacity:0; } }
@keyframes gl4-stop{ from{ transform:translateX(0); opacity:0; } 10%{ opacity:1; } 62%{ transform:translateX(200px); opacity:1; } 74%, to{ transform:translateX(200px); opacity:0; } }
.gl4 .gl4-edge:not(.is-live) circle{ animation-play-state:paused; }
html[data-em-motion="off"] .gl4 .gl4-edge circle{ animation-play-state:paused; }
@media (min-width:1024px){ .gl4 .gl4-guard{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } }

/* ---- sliders: the modpacks and the other games everywhere, the features and the commitments on phones only
   ([data-gl4-slider="phone"]). Native scroll-snap moves them; the script keeps the arrows and the count in step. ---- */
.gl4 [data-gl4-slider]:not([data-gl4-slider="phone"]) [data-gl4-track]{ display:flex; gap:var(--em-card-gap); overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; overscroll-behavior-x:contain; padding-block:4px; margin-block:-4px; }
.gl4 [data-gl4-track]::-webkit-scrollbar{ display:none; }
.gl4 [data-gl4-slider]:not([data-gl4-slider="phone"]) [data-gl4-track] > *{ flex:none; scroll-snap-align:start; min-width:0; }
.gl4 [data-gl4-track] :focus-visible{ outline-offset:-2px; }
.gl4 .gl4-count{ display:none; margin-top:12px; text-align:right; font:500 13px/1.3 var(--em-font-text); color:var(--em-text-2); font-variant-numeric:tabular-nums; }
@media (max-width:719.98px){
    .gl4 [data-gl4-slider] [data-gl4-track]{ display:flex; gap:var(--em-card-gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
        margin:-4px -20px; padding:4px 20px; scroll-padding-inline:20px; }
    .gl4 [data-gl4-slider] [data-gl4-track] > *{ flex:none; scroll-snap-align:start; min-width:0; }
    .gl4 [data-gl4-slider="phone"] [data-gl4-track] > *{ flex-basis:86%; }
    .gl4 [data-gl4-slider] .gl4-count{ display:block; }
    .gl4 [data-gl4-track]:focus-visible{ outline-offset:-2px; }
}
@media (hover:none) and (pointer:coarse){ .gl4 [data-gl4-slider] .gl4-ctl{ display:none; } .gl4 [data-gl4-slider] .gl4-count{ display:block; } }
.gl4 [data-gl4-slider][data-gl4-static] :is(.gl4-ctl, .gl4-count){ display:none; }

.gl4 .gl4-pack{ width:clamp(240px, 26vw, 300px); display:flex; flex-direction:column; }
.gl4 .gl4-pack-cover{ margin:calc(-1 * var(--em-card-pad) + 8px) calc(-1 * var(--em-card-pad) + 8px) 0; border-radius:10px; overflow:hidden; line-height:0; }
/* the lib's cover (esa-modpack-hosting.lib.php, not in git) prints the pack's name and a letter-spaced tagline; the h3
   already names the pack, so only the cover's colour band is shown */
.gl4 .gl4-pack-cover svg{ display:block; width:100%; height:72px; }
.gl4 .gl4-pack-cover svg text{ display:none; }
.gl4 .gl4-pack h3{ margin-top:20px; }
.gl4 .gl4-pack .gl4-pack-go{ margin-top:auto; padding-top:8px; }
@media (hover:hover){ .gl4 .gl4-pack:hover .gl4-pack-go{ text-decoration-line:underline !important; text-decoration-thickness:1px !important; text-underline-offset:3px; } }

/* the other games: posters of their official art, the name always set as text under it */
.gl4 .gl4-poster{ width:148px; }
.gl4 .gl4-poster a{ display:block; color:var(--em-text-1); }
.gl4 .gl4-poster-art{ position:relative; display:block; aspect-ratio:2 / 3; border-radius:12px; overflow:hidden; background:var(--em-surface); border:1px solid var(--em-line); }
.gl4 .gl4-poster-art img{ width:100%; height:100%; object-fit:cover; transition:scale .6s var(--em-ease); }
/* a game without art: its name set large on the tile, the gamepad over it */
.gl4 .gl4-poster-art .em-i{ position:absolute; left:14px; top:14px; width:20px; height:20px; color:var(--em-brand-mark); }
.gl4 .gl4-poster-art:has(.gl4-poster-type){ background:linear-gradient(165deg, var(--em-surface-2), var(--em-surface) 70%); }
.gl4 .gl4-poster-type{ position:absolute; left:14px; right:12px; bottom:14px; font:600 21px/1.08 var(--em-font-display); letter-spacing:-.025em; color:var(--em-text-1); overflow-wrap:anywhere; hyphens:auto; }
.gl4 .gl4-poster-name{ display:block; margin-top:10px; font:500 14px/1.35 var(--em-font-text); }
@media (hover:hover){
    .gl4 .gl4-poster a:hover .gl4-poster-art img{ scale:1.05; }
    .gl4 .gl4-poster a:hover .gl4-poster-name{ text-decoration-line:underline !important; text-decoration-color:var(--em-brand-text) !important; text-decoration-thickness:2px !important; text-underline-offset:4px; }
}
.gl4 .gl4-poster a:focus-visible{ outline:none; }
.gl4 .gl4-poster a:focus-visible .gl4-poster-art{ outline:2px solid var(--em-focus); outline-offset:-2px; }
@media (max-width:719.98px){ .gl4 .gl4-poster{ width:124px; } }

/* ---- questions beside the guides ---- */
.gl4 .gl4-qa{ display:grid; grid-template-columns:minmax(0,1fr); gap:64px var(--em-col-gap); }
@media (min-width:1024px){ .gl4 .gl4-qa{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } .gl4 .gl4-qa.is-solo{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); } }
.gl4 .gl4-qa h2{ margin-bottom:32px; }
.gl4 .gl4-acc{ counter-reset:gl4-q; }
.gl4 .gl4-acc > details{ counter-increment:gl4-q; border-top:1px solid var(--em-line); }
.gl4 .gl4-acc > details:last-child{ border-bottom:1px solid var(--em-line); }
.gl4 .gl4-acc summary{ display:grid; grid-template-columns:40px minmax(0,1fr) 20px; align-items:center; gap:12px; min-height:64px; padding:16px 0; list-style:none; cursor:pointer;
    font:500 16px/1.4 var(--em-font-text); color:var(--em-text-1); }
.gl4 .gl4-acc summary::-webkit-details-marker{ display:none; }
.gl4 .gl4-acc summary::before{ content:counter(gl4-q, decimal-leading-zero); content:counter(gl4-q, decimal-leading-zero) / ""; font:600 17px/1 var(--em-font-display); font-variant-numeric:tabular-nums; color:var(--em-text-3); transition:color 220ms var(--em-ease); }
.gl4 .gl4-acc details[open] > summary::before{ color:var(--em-brand-text); }
.gl4 .gl4-acc summary .em-i{ color:var(--em-text-3); transition:transform 220ms var(--em-ease), color 220ms var(--em-ease); }
.gl4 .gl4-acc details[open] > summary .em-i{ transform:rotate(45deg); color:var(--em-text-1); }
@media (hover:hover){ .gl4 .gl4-acc summary:hover .em-i{ color:var(--em-text-1); } }
.gl4 .gl4-acc details > p{ max-width:68ch; padding:0 32px 22px 52px; font:400 16px/1.6 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-acc details::details-content{ height:0; overflow:clip; transition:height .4s var(--em-ease), content-visibility .4s allow-discrete; }
.gl4 .gl4-acc details[open]::details-content{ height:auto; }
@media (max-width:719.98px){ .gl4 .gl4-acc summary{ grid-template-columns:32px minmax(0,1fr) 20px; } .gl4 .gl4-acc details > p{ padding:0 0 20px 44px; } }

.gl4 .gl4-side{ display:grid; gap:48px; align-content:start; }
.gl4 .gl4-side h2{ margin-bottom:12px; font-size:var(--em-fs-h3); font-weight:500; line-height:1.3; letter-spacing:-.012em; }
.gl4 .gl4-side .gl4-side-lead{ margin-bottom:20px; font:400 15px/1.6 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-reads{ display:grid; gap:12px; }
.gl4 .gl4-reads .gl4-card{ padding:20px; }
.gl4 .gl4-reads .gl4-card h3{ margin:0; font:500 16px/1.4 var(--em-font-text); letter-spacing:0; }
.gl4 .gl4-links{ border-top:1px solid var(--em-line); }
.gl4 .gl4-links li{ border-bottom:1px solid var(--em-line); }
.gl4 .gl4-links a{ display:flex; align-items:center; gap:12px; min-height:52px; padding:10px 0; font:500 15px/1.4 var(--em-font-text); color:var(--em-text-1); }
.gl4 .gl4-links a .em-i{ color:var(--em-text-3); transition:color 160ms var(--em-ease), translate 160ms var(--em-ease); }
.gl4 .gl4-links a .em-i:last-child{ margin-left:auto; }
@media (hover:hover){ .gl4 .gl4-links a:hover .em-i:last-child{ color:var(--em-brand-text); translate:3px 0; } }

.gl4 .gl4-legal{ margin-top:48px; max-width:96ch; font:400 13px/1.5 var(--em-font-text); color:var(--em-text-3); }

/* ---- closing stage: the art dissolves into the night on the right; it pushes in slowly once seen ---- */
.gl4 .gl4-end{ padding:clamp(72px, 9vw, 120px) 0; }
.gl4 .gl4-end-art{ position:absolute; inset:0 0 0 auto; width:min(1100px, 72%); z-index:0; opacity:.9;
    -webkit-mask-image:linear-gradient(90deg, transparent, var(--em-stage) 45%), linear-gradient(180deg, transparent, var(--em-stage) 22%, var(--em-stage) 78%, transparent);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, var(--em-stage) 45%), linear-gradient(180deg, transparent, var(--em-stage) 22%, var(--em-stage) 78%, transparent); mask-composite:intersect; }
.gl4 .gl4-end-art img{ width:100%; height:100%; object-fit:cover; object-position:var(--gl4-f, 50% 40%); scale:1.02; transition:scale 16s cubic-bezier(.25,.1,.35,1); }
.gl4 .gl4-end.is-in .gl4-end-art img{ scale:1.1; }
.gl4 .gl4-end::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(var(--em-scrim),.94) 0%, rgba(var(--em-scrim),.7) 42%, rgba(var(--em-scrim),0) 70%); }
.gl4 .gl4-end .em-wrap{ position:relative; z-index:2; }
.gl4 .gl4-end h2{ max-width:12em; font:600 var(--em-fs-display2)/1.04 var(--em-font-display); letter-spacing:-.035em; }
.gl4 .gl4-end p{ margin-top:20px; max-width:34em; font:400 var(--em-fs-lead)/1.55 var(--em-font-text); color:var(--em-text-2); }
.gl4 .gl4-end .gl4-ctas{ margin-top:32px; }
@media (max-width:719.98px){
    .gl4 .gl4-end-art{ width:100%; opacity:.5; }
    .gl4 .gl4-end::after{ background:linear-gradient(180deg, rgba(var(--em-scrim),.6), rgba(var(--em-scrim),.92)); }
}

@media (prefers-reduced-motion:reduce){
    .gl4 *, .gl4 *::before, .gl4 *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .gl4-js .gl4 .gl4-rv{ opacity:1; translate:none; }
}
@media (prefers-reduced-motion:reduce){ .gl4 ::details-content{ transition:none !important; } }