/* ==========================================================================================================
   Zombies in DFW: presentation design system (UI pass, docs/UiPass.md).
   Fonts (SIL OFL 1.1, self-hosted Latin subsets, licences in assets/fonts/OFL-*.txt):
     Big Shoulders Display 800-900  titles, banners and static big numbers (no tabular figures in this face)
     Barlow Condensed 500/600/700   menus, buttons, labels, HUD and every changing number (tabular figures)
     Barlow 400/500                 body copy and hints
   Every size, colour, space and timing below comes from the tokens in :root; injected module styles use them too.
   --u scales the HUD and menus with the window height (1px at 1080p, never under .86px or over 1.4px).
   ========================================================================================================== */
@font-face{font-family:'Big Shoulders Display';src:url(assets/fonts/big-shoulders-display-800-900.woff2) format('woff2');font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(assets/fonts/barlow-condensed-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(assets/fonts/barlow-condensed-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(assets/fonts/barlow-condensed-700.woff2) format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(assets/fonts/barlow-400.woff2) format('woff2');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(assets/fonts/barlow-500.woff2) format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
:root{
 /* type families */
 --font-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
 --font-ui:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
 --font-body:'Barlow',Arial,Helvetica,sans-serif;
 --font-num:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
 --num:tabular-nums lining-nums;
 /* scale unit and type scale (px at 1080p) */
 --u:clamp(.86px,.0926vh,1.4px);
 --t-cap:calc(11.5*var(--u));--t-xs:calc(13*var(--u));--t-sm:calc(15*var(--u));--t-md:calc(17*var(--u));--t-lg:calc(21*var(--u));
 --t-xl:calc(28*var(--u));--t-2xl:calc(38*var(--u));--t-3xl:calc(52*var(--u));--t-4xl:calc(68*var(--u));
 --t-hero:clamp(70px,12.4vh,168px);
 /* tracking */
 --tr-tight:.01em;--tr:.05em;--tr-label:.1em;--tr-wide:.16em;--tr-wider:.24em;
 /* colour */
 --c-bg:#05080c;--c-bg-2:#0a0f16;--c-panel:rgba(8,12,18,.84);--c-panel-solid:#0b1118;--c-raise:#121a24;
 --c-line:rgba(255,255,255,.11);--c-line-2:rgba(255,255,255,.22);
 --c-text-hi:#fbf7ef;--c-text:#ece6da;--c-text-2:#bdb7aa;--c-text-3:#9097a0;
 --c-gold:#d8bb80;--c-gold-hi:#f2dcaa;--c-gold-lo:#a8946b;--c-gold-wash:rgba(216,187,128,.16);
 --c-ember:#d0352b;--c-ember-hi:#ff5a3c;--c-ember-lo:#8f1c16;
 --c-ok:#8ed48c;--c-bad:#e8493b;--c-focus:#f3dc98;
 --shadow-text:0 1px 2px rgba(0,0,0,.92),0 0 14px rgba(0,0,0,.55);
 --shadow-panel:0 18px 50px rgba(0,0,0,.5);
 --plate:linear-gradient(90deg,rgba(4,7,11,0),rgba(4,7,11,.6) 16%,rgba(4,7,11,.6) 84%,rgba(4,7,11,0));
 /* spacing */
 --sp-1:calc(4*var(--u));--sp-2:calc(8*var(--u));--sp-3:calc(12*var(--u));--sp-4:calc(16*var(--u));--sp-5:calc(24*var(--u));--sp-6:calc(32*var(--u));--sp-7:calc(48*var(--u));--sp-8:calc(64*var(--u));
 --edge-x:calc(40*var(--u));--edge-y:calc(30*var(--u));--gutter:max(24px,6.2vw);
 /* motion */
 --ease:cubic-bezier(.2,.7,.2,1);--t-fast:150ms;--t-med:200ms;--t-slow:250ms;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--c-bg);color:var(--c-text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
#game{display:block;width:100%;height:100%;outline:none}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 42%,#03060a99 100%)}
#damage{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 150px 35px #a40000;opacity:0}
[hidden]{display:none!important}

/* ---------------------------------------------- HUD ---------------------------------------------------- */
#top{position:fixed;top:var(--edge-y);left:var(--edge-x);right:var(--edge-x);display:flex;justify-content:space-between;align-items:flex-start;text-shadow:var(--shadow-text)}
#top b{display:block;font:900 calc(28*var(--u))/.9 var(--font-display);letter-spacing:.01em;color:var(--c-text-hi)}
#top span{display:block;font:600 calc(11*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wider);margin-top:calc(5*var(--u));color:var(--c-gold)}
#objective{position:relative;font:700 var(--t-md)/1.2 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-hi);padding:calc(9*var(--u)) calc(34*var(--u)) calc(9*var(--u)) calc(30*var(--u));background:var(--plate);border-top:1px solid rgba(216,187,128,.45);max-width:56vw;text-align:center}
#objective::before{content:'';position:absolute;left:calc(13*var(--u));top:50%;width:calc(6*var(--u));height:calc(6*var(--u));border:1.5px solid var(--c-gold);transform:translateY(-50%) rotate(45deg);background:rgba(216,187,128,.35)}
#objective:empty{opacity:0}
#pauseButton{background:rgba(5,8,12,.45);border:1px solid var(--c-line-2);color:var(--c-text-hi);width:calc(36*var(--u));height:calc(36*var(--u));cursor:pointer;font:700 var(--t-sm)/1 var(--font-ui);transition:border-color var(--t-fast),background var(--t-fast)}
#pauseButton:hover,#pauseButton:focus-visible{border-color:var(--c-gold);background:rgba(216,187,128,.18);outline:none}
#location{position:fixed;top:calc(var(--edge-y) + 66*var(--u));left:var(--edge-x);padding-left:calc(11*var(--u));border-left:2px solid var(--c-ember);font:700 var(--t-sm)/1.1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text-hi);text-shadow:var(--shadow-text)}
#location span{display:block;font:600 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);margin-top:calc(5*var(--u));color:var(--c-gold)}
#crosshair{position:fixed;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);pointer-events:none}
#crosshair i{position:absolute;background:#ffffffbb;width:6px;height:1px;box-shadow:0 0 2px #000}
#crosshair i:nth-child(1){left:0;top:15px}#crosshair i:nth-child(2){right:0;top:15px}#crosshair i:nth-child(3){top:0;left:15px;width:1px;height:6px}#crosshair i:nth-child(4){bottom:0;left:15px;width:1px;height:6px}
#hitmarker{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:35px;opacity:0;pointer-events:none}
#hud{position:fixed;bottom:var(--edge-y);left:var(--edge-x);right:var(--edge-x);display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;text-shadow:var(--shadow-text)}
.survivor{display:flex;align-items:flex-end;gap:calc(14*var(--u));position:relative}
.survivor canvas{width:calc(64*var(--u));height:calc(80*var(--u));border:1px solid rgba(255,255,255,.26);border-bottom:2px solid var(--c-gold);background:#15191b;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.survivor small{display:block;font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-gold)}
.survivor strong{display:block;font:700 calc(42*var(--u))/1 var(--font-num);font-variant-numeric:var(--num);color:var(--c-text-hi);margin-top:calc(3*var(--u))}
.health-track{position:relative;height:calc(6*var(--u));width:calc(176*var(--u));background:rgba(255,255,255,.14);margin-top:calc(5*var(--u));box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.health-track::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),rgba(5,8,12,.85) calc(25% - 2px) 25%)}
.health-track i{display:block;height:100%;background:linear-gradient(90deg,#64b569,#9be09a);width:100%;transition:width .2s}
.survivor:has(#health.low) .health-track i{background:linear-gradient(90deg,#9c1d14,var(--c-bad))}
#health.low{color:var(--c-bad);text-shadow:0 0 12px rgba(232,40,30,.6)}
#wave{text-align:center;min-width:calc(120*var(--u))}
#wave small{display:block;font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wider);color:var(--c-gold);padding-left:var(--tr-wider)}
#wave b{display:block;font:700 calc(46*var(--u))/1 var(--font-num);font-variant-numeric:var(--num);color:var(--c-text-hi);margin:calc(3*var(--u)) 0 0}
#wave b::after{content:'';display:block;width:calc(26*var(--u));height:2px;background:var(--c-ember);margin:calc(5*var(--u)) auto calc(6*var(--u));box-shadow:0 0 8px rgba(208,53,43,.6)}
#wave span{display:block;font:600 calc(12*var(--u))/1 var(--font-ui);font-variant-numeric:var(--num);letter-spacing:var(--tr-label);color:var(--c-text-2)}
.ammo{text-align:right}
.ammo small{display:block;font:700 var(--t-sm)/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text)}
.ammo div{display:flex;align-items:baseline;justify-content:flex-end;gap:calc(8*var(--u));margin-top:calc(2*var(--u))}
.ammo b{font:700 calc(66*var(--u))/.95 var(--font-num);font-variant-numeric:var(--num);color:var(--c-text-hi)}
.ammo span{font:600 calc(26*var(--u))/1 var(--font-num);font-variant-numeric:var(--num);color:var(--c-text-3)}
.ammo em{font-style:normal;color:var(--c-text-2)}
.ammo p{margin:calc(4*var(--u)) 0 0;font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-gold)}
/* points, +N and grenades (arsenal.js) */
#points{position:fixed;right:var(--edge-x);bottom:calc(var(--edge-y) + 118*var(--u));text-align:right;font:700 calc(30*var(--u))/1 var(--font-num);font-variant-numeric:var(--num);letter-spacing:.02em;color:var(--c-gold-hi);text-shadow:var(--shadow-text);pointer-events:none}
#points span{display:block;font:600 calc(11*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text-2);margin-top:calc(3*var(--u))}
#pointsPop{position:fixed;right:var(--edge-x);bottom:calc(var(--edge-y) + 160*var(--u));font:700 calc(19*var(--u))/1 var(--font-num);font-variant-numeric:var(--num);letter-spacing:.06em;color:#f2e2b0;text-shadow:var(--shadow-text);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
#grenades{position:fixed;right:calc(var(--edge-x) + 132*var(--u));bottom:calc(var(--edge-y) + 120*var(--u));text-align:right;font:700 calc(12*var(--u))/1.35 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-2);text-shadow:var(--shadow-text);pointer-events:none}
#grenades .gr-pips{display:inline-block;font-size:calc(15*var(--u));letter-spacing:.2em;margin-bottom:calc(2*var(--u))}
#prompt,#notice{position:fixed;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:var(--shadow-text)}
#prompt{top:63%;font:700 calc(18*var(--u))/1.3 var(--font-ui);letter-spacing:var(--tr);color:var(--c-text-hi);padding:calc(7*var(--u)) calc(34*var(--u));background:linear-gradient(90deg,rgba(4,7,11,0),rgba(4,7,11,.7) 14%,rgba(4,7,11,.7) 86%,rgba(4,7,11,0));max-width:76vw}
#prompt:empty{padding:0;background:none}
#notice{top:36%;font:800 calc(30*var(--u))/1.1 var(--font-display);letter-spacing:.05em;color:var(--c-gold-hi);padding:calc(7*var(--u)) calc(40*var(--u));background:linear-gradient(90deg,rgba(4,7,11,0),rgba(4,7,11,.58) 16%,rgba(4,7,11,.58) 84%,rgba(4,7,11,0));text-shadow:0 2px 3px rgba(0,0,0,.9),0 0 26px rgba(0,0,0,.6);transition:opacity var(--t-slow) var(--ease);max-width:84vw}
#notice:empty{padding:0;background:none}
#effectsHud{position:fixed;left:50%;top:calc(var(--edge-y) + 56*var(--u));transform:translateX(-50%);display:flex;gap:10px;z-index:6;pointer-events:none}
#effectsHud .effect{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;background:rgba(6,8,12,.72);border:1px solid rgba(255,255,255,.18);border-radius:2px;font:700 calc(14*var(--u))/1 var(--font-ui);letter-spacing:var(--tr);color:var(--c-text-hi)}
#effectsHud .effect b{min-width:30px;padding:4px 6px;border-radius:1px;text-align:center;color:#111;font-size:calc(14*var(--u))}
#effectsHud .effect em{font-style:normal;opacity:.85;font-variant-numeric:var(--num)}
#effectsHud .effect-double b{background:#ffcf4a}#effectsHud .effect-oneshot b{background:#ff5446;color:#fff}
#shockFlash{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;background:radial-gradient(circle at 50% 55%,rgba(200,170,255,.55),rgba(120,80,220,.18) 45%,transparent 75%)}
#shockFlash.on{animation:shockFlash .9s ease-out}
@keyframes shockFlash{0%{opacity:1}100%{opacity:0}}
#blastFlash{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,226,170,.85),rgba(255,140,60,.32) 42%,transparent 78%)}
#blastFlash.on{animation:blastFlash .55s ease-out forwards}
@keyframes blastFlash{to{opacity:0}}
#hurtVignette{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 78% 72% at 50% 50%,rgba(0,0,0,0) 50%,rgba(96,4,4,.5) 80%,rgba(46,0,0,.92) 100%)}
#hurtVignette.low{background:radial-gradient(ellipse 70% 64% at 50% 50%,rgba(0,0,0,0) 38%,rgba(112,6,6,.58) 72%,rgba(40,0,0,.96) 100%)}
#hurtDirs{position:fixed;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
.hurt-dir{position:absolute;left:0;top:0;width:0;height:0}
.hurt-dir i{position:absolute;left:-120px;top:-34vh;width:240px;height:96px;border-radius:50%;border-top:16px solid rgba(226,26,18,.9);filter:blur(1px) drop-shadow(0 0 10px rgba(255,30,20,.75))}
/* Perk machines (machines-view.js): owned perks in a row above the survivor portrait. */
#perkHud{position:absolute;left:0;bottom:calc(100% + 10px);display:flex;gap:7px;pointer-events:none}
#perkHud .perk{width:32px;height:32px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 32%,#1f2632,#070c12 72%);border:2px solid var(--c);box-shadow:0 0 12px var(--c),inset 0 0 8px #000;animation:perkIn .45s ease-out}
#perkHud svg{width:19px;height:19px;fill:none;stroke:#f6ecd6;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px var(--c))}
@keyframes perkIn{from{transform:scale(1.9);opacity:0}to{transform:scale(1);opacity:1}}
/* While any menu layer is up (front-end.js sets body.fe-menu-open) the play HUD steps back so the menu reads cleanly. */
body.fe-menu-open>:not(#feAttract,#game,#vignette,#damage,#overlay,#menuPage,#coopLobby,#matchSummary,#storyFade,#qaPanel,#padToast,#feHints,#captions,#fpsCounter,#loadingBar,script,style){visibility:hidden}

/* ---------------------------------------------- front end: title, pause and story results ----------------- */
#overlay{position:fixed;inset:0;display:flex;z-index:20;overflow:auto;background:
 radial-gradient(ellipse 85% 85% at 74% 46%,rgba(5,8,12,0) 0%,rgba(5,8,12,.3) 55%,rgba(5,8,12,.82) 100%),
 linear-gradient(90deg,rgba(5,8,12,.95) 0%,rgba(5,8,12,.88) 26%,rgba(5,8,12,.5) 48%,rgba(5,8,12,.16) 72%,rgba(5,8,12,.28) 100%);
 animation:feIn var(--t-slow) var(--ease)}
@keyframes feIn{from{opacity:0}}
#overlay>*{transition:opacity var(--t-med) var(--ease)}
body[data-fe-layer=menuPage] #overlay>*,body[data-fe-layer=coopLobby] #overlay>*,body[data-fe-layer=matchSummary] #overlay>*{opacity:0}
.intro{position:relative;z-index:2;flex:0 0 auto;width:min(100%,calc(560*var(--u) + var(--gutter)));display:flex;flex-direction:column;padding:calc(58*var(--u)) 0 calc(96*var(--u)) var(--gutter);min-height:100%}
.intro-art{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,12,.55),transparent 16%,transparent 78%,rgba(5,8,12,.7))}
#kestrelShowroom{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}
#kestrelShowroom>div{background:linear-gradient(0deg,rgba(5,8,12,.9) 0%,transparent 24%),radial-gradient(ellipse 80% 75% at 62% 48%,transparent 55%,rgba(0,0,0,.5) 100%)!important}
.eyebrow{display:flex;align-items:center;white-space:nowrap;gap:calc(12*var(--u));font:600 var(--t-xs)/1.3 var(--font-ui);color:var(--c-gold);letter-spacing:var(--tr-wide)}
.eyebrow::before{content:'';flex:none;width:calc(26*var(--u));height:2px;background:var(--c-ember);box-shadow:0 0 8px rgba(208,53,43,.6)}
h1{font:900 var(--t-hero)/.84 var(--font-display);letter-spacing:.004em;margin:calc(14*var(--u)) 0 calc(8*var(--u));text-transform:uppercase;color:var(--c-text-hi);background:linear-gradient(180deg,#fffdf8 0%,#efe8da 55%,#b8ae9d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 26px rgba(0,0,0,.55))}
h1 span{color:var(--c-ember);background:linear-gradient(180deg,#ff6a52 0%,#d0352b 55%,#8f1c16 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fe-status{display:inline-flex;align-self:flex-start;align-items:center;gap:calc(10*var(--u));margin:calc(4*var(--u)) 0 calc(4*var(--u));padding:calc(6*var(--u)) calc(12*var(--u));font:700 var(--t-xs)/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text-hi);background:rgba(208,53,43,.85);text-shadow:none}
.fe-status.won{background:var(--c-gold);color:#14110a}.fe-status.pause{background:rgba(255,255,255,.12);border:1px solid var(--c-line-2)}
#introCopy{margin:calc(10*var(--u)) 0 calc(22*var(--u));font:400 var(--t-md)/1.5 var(--font-body);color:var(--c-text-2);max-width:32em;text-shadow:0 1px 2px #000}
#introCopy::first-line{font:800 calc(25*var(--u))/1.25 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--c-text-hi)}
.fe-menu{display:flex;flex-direction:column;align-items:stretch;width:calc(440*var(--u));max-width:100%}
.fe-section{display:flex;align-items:center;gap:calc(12*var(--u));margin:calc(16*var(--u)) 0 calc(6*var(--u));font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wider);color:var(--c-text-3)}
.fe-section::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--c-line-2),transparent)}
.fe-menu>.fe-section:first-child{margin-top:0}
/* every entry: transparent row, left accent bar and a warm wash on hover / keyboard / pad focus, key hint on the right */
.fe-menu button{position:relative;display:flex;align-items:center;width:100%;min-height:calc(40*var(--u));margin:0;padding:0 calc(16*var(--u)) 0 calc(18*var(--u));text-align:left;background:transparent;border:0;border-radius:0;color:var(--c-text);font:600 calc(17*var(--u))/1.1 var(--font-ui);letter-spacing:var(--tr-label);cursor:pointer;outline:none;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),padding var(--t-med) var(--ease)}
.fe-menu button::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-gold);transform:scaleY(0);transition:transform var(--t-med) var(--ease)}
.fe-menu button::after{content:attr(data-key);margin-left:auto;padding-left:calc(14*var(--u));font:700 calc(11*var(--u))/1 var(--font-ui);letter-spacing:.1em;color:var(--c-text-2);opacity:0;transition:opacity var(--t-fast)}
.fe-menu button:hover,.fe-menu button:focus-visible,.fe-menu button.pad-focus,.fe-menu button.fe-cur{color:var(--c-text-hi);background-color:rgba(216,187,128,.13);background-image:linear-gradient(90deg,rgba(216,187,128,.16),rgba(216,187,128,0));padding-left:calc(24*var(--u))}
.fe-menu button:hover::before,.fe-menu button:focus-visible::before,.fe-menu button.pad-focus::before,.fe-menu button.fe-cur::before{transform:scaleY(1)}
.fe-menu button:focus-visible::after,.fe-menu button.pad-focus::after,.fe-menu button.fe-cur::after{opacity:1}
.fe-menu button:focus-visible{box-shadow:inset 0 0 0 1px rgba(243,220,152,.55)}
.fe-menu button:disabled{opacity:.5;cursor:wait}
/* with a controller in use the hint is the A / cross face button (gamepad-ui.js colours) */
html.dgs-pad .fe-menu button::after{content:attr(data-pad);display:inline-grid;place-items:center;width:calc(22*var(--u));height:calc(22*var(--u));padding:0;margin-left:auto;border-radius:50%;border:2px solid #7ed07a;color:#7ed07a!important;background:#121921;font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:0}
html.dgs-pad.pad-ps .fe-menu button::after{border-color:#9fb8f0;color:#9fb8f0!important}
html.dgs-pad .fe-menu button.pad-focus{outline:none!important;outline-offset:0!important;box-shadow:inset 0 0 0 1px rgba(243,220,152,.65)!important}
/* the primary action */
.fe-menu #start{min-height:calc(62*var(--u));padding-left:calc(22*var(--u));font:900 calc(31*var(--u))/1 var(--font-display);letter-spacing:.05em;color:#15110a;background:linear-gradient(90deg,#e3c98f,#cdb07a 70%,#b99c68);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.fe-menu #start::before{background:var(--c-ember);width:4px}
.fe-menu #start::after{color:rgba(21,17,10,.75)}
.fe-menu #start:hover,.fe-menu #start:focus-visible,.fe-menu #start.pad-focus,.fe-menu #start.fe-cur{color:#0d0a05;background-image:linear-gradient(90deg,#f6e1ad,#e0c48c 70%,#c9ab74);padding-left:calc(28*var(--u));box-shadow:0 10px 34px rgba(216,187,128,.28),inset 0 1px 0 rgba(255,255,255,.45)}
.fe-menu #start:disabled{opacity:.6;background-image:linear-gradient(90deg,rgba(227,201,143,.55),rgba(185,156,104,.35));animation:feLoad 1.4s ease-in-out infinite}
@keyframes feLoad{50%{opacity:.4}}
.fe-menu .coop-entry{min-height:calc(46*var(--u));font:700 calc(20*var(--u))/1 var(--font-ui);letter-spacing:.1em}
.fe-menu #restartNight{display:flex;margin:calc(2*var(--u)) 0 0;min-height:calc(32*var(--u));font:600 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-2);text-decoration:none}
.fe-menu #restartNight::before{background:var(--c-text-2)}
/* the page row (menus.js) as two columns of sections: CREW | OPTIONS */
#menuRow{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:calc(18*var(--u));margin-top:calc(4*var(--u))}
#menuRow .fe-section{margin-top:calc(16*var(--u))}
#menuRow .menu-tab{min-height:calc(36*var(--u));font-size:calc(16*var(--u))}
#menuRow .menu-tab img,#menuRow .menu-tab svg{height:1.1em;width:auto;vertical-align:-.2em}
/* right column: what the highlighted entry does, then the quick controls */
.fe-side{position:absolute;right:var(--gutter);bottom:calc(78*var(--u));z-index:2;width:calc(520*var(--u));text-shadow:0 1px 3px #000}
.fe-detail{width:calc(440*var(--u));max-width:100%;margin-top:calc(22*var(--u));padding:calc(2*var(--u)) 0 calc(2*var(--u)) calc(16*var(--u));border-left:2px solid var(--c-gold)}
.fe-detail b{display:block;font:900 calc(22*var(--u))/1 var(--font-display);letter-spacing:.04em;color:var(--c-text-hi)}
.fe-detail p{margin:calc(6*var(--u)) 0 0;font:400 calc(14*var(--u))/1.45 var(--font-body);color:var(--c-text-2)}
.fe-detail p:empty{display:none}
.fe-detail .instructions{color:var(--c-text)}
.fe-quick .fe-section{margin:0 0 calc(8*var(--u))}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(7*var(--u)) calc(14*var(--u));font:500 calc(12.5*var(--u))/1.2 var(--font-ui);letter-spacing:.03em;color:var(--c-text-3)}
.controls span{display:flex;flex-direction:column;gap:calc(2*var(--u))}
.controls b{display:block;color:var(--c-text);font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:.08em}
.pad-legend{font-family:var(--font-ui)}
.lo-intro,.lo-card p,.lo-note,.dl-copy,.pad-page-status,.kb-intro,.set-note span{font-family:var(--font-body)!important;letter-spacing:0!important}
/* footer: attribution (ODbL credit stays on screen) */
.fe-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(18*var(--u));z-index:2;display:flex;justify-content:flex-end;pointer-events:none}
.intro p.fine,.fine{margin:0;max-width:min(860px,58%);text-align:right;font:500 calc(11.5*var(--u))/1.6 var(--font-body);color:#80868e;pointer-events:auto}
.fine span+span::before{content:' \00B7  ';color:#5c6168}
.fine a{color:#b4b0a6;text-underline-offset:2px}.fine a:hover,.fine a:focus-visible{color:var(--c-gold-hi)}
#loadError{font:500 var(--t-xs)/1.5 var(--font-body);color:#fbb;max-width:360px;margin-top:var(--sp-3)}
#loadError:empty{display:none}
#qaPanel{position:fixed;right:20px;top:95px;width:330px;background:#000d;padding:15px;font:11px monospace;z-index:50;white-space:pre-line}
/* hint bar shared by every menu layer (front-end.js) */
#feHints{position:fixed;left:0;right:0;bottom:0;z-index:46;display:flex;align-items:center;gap:calc(22*var(--u));padding:calc(14*var(--u)) var(--gutter) calc(16*var(--u));pointer-events:none;font:700 calc(12.5*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-2);text-shadow:0 1px 2px #000;opacity:0;transition:opacity var(--t-med)}
#feHints.on{opacity:1}
#feHints::before{content:'';position:absolute;inset:-30px 0 0;z-index:-1;background:linear-gradient(0deg,rgba(5,8,12,.94) 35%,rgba(5,8,12,0));pointer-events:none}
body[data-fe-layer=overlay] #feHints::before{display:none}
#feHints[data-layer=coopLobby]::before,#feHints[data-layer=menuPage]::before,#feHints[data-layer=matchSummary]::before{display:block}
#feHints .fe-hint{display:inline-flex;align-items:center;gap:calc(8*var(--u));pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit}
#feHints .fe-hint:hover{color:var(--c-text-hi)}
#feHints kbd{display:inline-flex;align-items:center;justify-content:center;min-width:calc(24*var(--u));height:calc(22*var(--u));padding:0 calc(7*var(--u));font:700 calc(11.5*var(--u))/1 var(--font-ui);letter-spacing:.06em;color:var(--c-text-hi);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);border-bottom-width:2px;border-radius:2px}
#feHints .pad-g{--pg:calc(12*var(--u));margin:0}
#feHints .fe-pad{display:none}html.dgs-pad #feHints .fe-pad{display:inline-flex}html.dgs-pad #feHints .fe-kb{display:none}

/* ---------------------------------------------- menu pages (menus.js) ------------------------------------- */
#menuPage{position:fixed;inset:0;z-index:30;display:flex;align-items:stretch;justify-content:flex-start;padding:0;background:
 radial-gradient(ellipse 70% 90% at 85% 40%,rgba(208,53,43,.08),transparent 70%),
 linear-gradient(90deg,rgba(5,8,12,.97) 0%,rgba(5,8,12,.93) 55%,rgba(5,8,12,.82) 100%);animation:feIn var(--t-slow) var(--ease)}
#menuPage[hidden]{display:none}
.menu-page{width:min(100%,calc(1120*var(--u) + 2*var(--gutter)));height:100%;max-height:none;overflow:auto;background:transparent;border:0;padding:0 var(--gutter) calc(96*var(--u));font-family:var(--font-ui);scrollbar-color:#3a424c transparent;scrollbar-width:thin}
.menu-page header{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:calc(14*var(--u)) calc(24*var(--u));padding:calc(48*var(--u)) 0 0;margin-bottom:calc(26*var(--u));background:linear-gradient(180deg,rgba(5,8,12,.99) 80%,rgba(5,8,12,.94));border-bottom:1px solid var(--c-line)}
.menu-page header::before{content:'ZOMBIES IN DFW';order:-2;flex:1 0 100%;display:flex;align-items:center;gap:12px;font:600 var(--t-xs)/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-gold)}
.menu-page h2{order:-1;margin:0 0 calc(14*var(--u));font:900 calc(64*var(--u))/.86 var(--font-display);letter-spacing:.01em;color:var(--c-text-hi)}
#menuBack{order:0;margin:0 0 calc(18*var(--u));display:inline-flex;align-items:center;gap:calc(10*var(--u));background:transparent;border:1px solid var(--c-line-2);color:var(--c-text-hi);font:700 calc(14*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);padding:calc(11*var(--u)) calc(18*var(--u));cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
#menuBack::before{content:'ESC';font:700 calc(11*var(--u))/1 var(--font-ui);letter-spacing:.06em;padding:calc(4*var(--u)) calc(6*var(--u));border:1px solid rgba(255,255,255,.3);border-bottom-width:2px;color:var(--c-text-2)}
html.dgs-pad #menuBack::before{content:'B';border-radius:50%;width:1.9em;height:1.9em;display:inline-grid;place-items:center;padding:0;color:#ec6a5c;border:2px solid currentColor}
html.dgs-pad.pad-ps #menuBack::before{content:'\25CB';color:#f08a8a}
#menuBack:hover,#menuBack:focus-visible{border-color:var(--c-gold);background:rgba(216,187,128,.14);outline:none}
.fe-tabs{order:1;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:0 calc(4*var(--u));margin:0 0 -1px}
.fe-tabs button{position:relative;background:none;border:0;padding:calc(12*var(--u)) calc(12*var(--u)) calc(13*var(--u));font:700 calc(13.5*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-3);cursor:pointer;transition:color var(--t-fast)}
.fe-tabs button::after{content:'';position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));bottom:0;height:3px;background:var(--c-gold);transform:scaleX(0);transition:transform var(--t-med) var(--ease)}
.fe-tabs button:hover,.fe-tabs button:focus-visible{color:var(--c-text-hi);outline:none}
.fe-tabs button[aria-current=page]{color:var(--c-text-hi)}.fe-tabs button[aria-current=page]::after{transform:scaleX(1)}
.fe-tabs .fe-bumper{display:none;align-self:center;color:var(--c-text-3)}html.dgs-pad .fe-tabs .fe-bumper{display:inline-flex}
#menuBody{animation:feRise var(--t-slow) var(--ease)}
@keyframes feRise{from{opacity:0;transform:translateY(8px)}}
/* settings, controls, hold-Tab scoreboard, kill feed, FPS counter and match summary (hud-menus.js) */
.set-group{display:flex;align-items:center;gap:calc(14*var(--u));margin:calc(34*var(--u)) 0 calc(4*var(--u));font:700 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-gold)}
.set-group::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--c-line-2),transparent)}
.settings-body>.set-group:first-child{margin-top:0}
.set-row{display:grid;grid-template-columns:minmax(0,1fr) calc(300*var(--u)) calc(76*var(--u));align-items:center;gap:8px calc(22*var(--u));padding:calc(14*var(--u)) calc(12*var(--u));border-bottom:1px solid rgba(255,255,255,.06);transition:background var(--t-fast)}
.set-row:hover,.set-row:focus-within{background:linear-gradient(90deg,rgba(216,187,128,.08),rgba(216,187,128,0) 80%);box-shadow:inset 3px 0 0 var(--c-gold)}
.set-label{display:block;font:700 calc(16*var(--u))/1.2 var(--font-ui);letter-spacing:var(--tr);color:var(--c-text-hi)}
.set-hint{display:block;font:400 calc(13.5*var(--u))/1.45 var(--font-body);color:var(--c-text-3);margin-top:calc(4*var(--u));letter-spacing:0}
.set-value{font:700 calc(16*var(--u))/1 var(--font-num);font-variant-numeric:var(--num);letter-spacing:.04em;color:var(--c-gold-hi);text-align:right}
.set-range{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;margin:0}
.set-range::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--c-gold) var(--fill,50%),#2c333c var(--fill,50%))}
.set-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;background:var(--c-gold-hi);border:2px solid #070c12;box-shadow:0 0 0 1px var(--c-gold)}
.set-range::-moz-range-track{height:4px;background:#2c333c}.set-range::-moz-range-progress{height:4px;background:var(--c-gold)}
.set-range::-moz-range-thumb{width:12px;height:12px;background:var(--c-gold-hi);border:2px solid #070c12;border-radius:0}
.set-range:focus-visible,.set-switch:focus-visible,.set-seg button:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.set-switch{justify-self:end;position:relative;width:52px;height:26px;background:#1a2129;border:1px solid #3a424c;cursor:pointer;padding:0}
.set-switch i{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#7f8790;transition:transform var(--t-fast) var(--ease),background var(--t-fast)}
.set-switch[aria-checked=true]{background:#2a2518;border-color:var(--c-gold)}.set-switch[aria-checked=true] i{transform:translateX(26px);background:var(--c-gold-hi)}
.set-quality .set-seg{grid-column:2/4}
.set-seg{display:flex;border:1px solid #3a424c}
.set-seg button{flex:1;background:transparent;border:0;border-left:1px solid #3a424c;color:var(--c-text-2);font:700 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);padding:calc(11*var(--u)) 6px;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.set-seg button:first-child{border-left:0}.set-seg button:hover{color:var(--c-text-hi);background:rgba(255,255,255,.05)}
.set-seg button[aria-checked=true]{background:var(--c-gold);color:#14110a}
.set-note{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:12px 14px;background:#121a24;border-left:2px solid var(--c-gold);font:400 calc(13.5*var(--u))/1.5 var(--font-body);color:var(--c-text-2)}
.set-reload,.set-reset{background:transparent;border:1px solid var(--c-gold);color:var(--c-gold-hi);font:700 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);padding:calc(11*var(--u)) calc(16*var(--u));cursor:pointer;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.set-reload:hover,.set-reset:hover,.set-reload:focus-visible,.set-reset:focus-visible{background:var(--c-gold);color:#14110a;outline:none}
.set-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}.set-foot .set-hint{margin:0}
.controls-body{display:grid;grid-template-columns:1fr 1fr;gap:calc(26*var(--u)) calc(40*var(--u));align-items:start}
.ctl-group .set-group{margin:0 0 6px}
.ctl-row{display:flex;align-items:center;gap:14px;padding:calc(9*var(--u)) 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ctl-keys{display:flex;flex-wrap:wrap;gap:5px;flex:0 0 calc(140*var(--u))}
.ctl-row kbd{font:700 calc(12.5*var(--u))/1 var(--font-ui);letter-spacing:.06em;color:var(--c-text-hi);background:#151d27;border:1px solid #3a424c;border-bottom-width:2px;padding:calc(6*var(--u)) calc(8*var(--u));min-width:28px;text-align:center;border-radius:2px}
.ctl-action{font:500 calc(15*var(--u))/1.35 var(--font-ui);letter-spacing:.03em;color:var(--c-text)}
.ctl-foot{grid-column:1/-1;margin:0}
#killFeed{position:fixed;top:calc(var(--edge-y) + 50*var(--u));right:var(--edge-x);z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none;max-width:min(480px,62vw)}
.feed-line{display:flex;align-items:baseline;gap:8px;padding:calc(6*var(--u)) calc(11*var(--u)) calc(6*var(--u)) calc(28*var(--u));background:linear-gradient(90deg,#070c1200,#070c12cc 30%);border-right:2px solid var(--c-gold);font:600 calc(13*var(--u))/1.1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text);text-shadow:0 1px 3px #000;white-space:nowrap;animation:feedIn .22s ease-out}
.feed-who{font-weight:700;max-width:10em;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.feed-count{display:inline-block;font-style:normal;font-weight:700;color:#fff;font-size:calc(14*var(--u));letter-spacing:.04em;font-variant-numeric:var(--num)}
.feed-head{border-color:#e0b04f}.feed-head .feed-text{color:#f2c661}
.feed-blade{border-color:#d8d2c4}.feed-blade .feed-text{color:#f4efe6}
.feed-frag{border-color:#e07a3c}.feed-frag .feed-text{color:#f39a5f}
.feed-down{border-color:#d0463a}.feed-down .feed-text{color:#ff6b5c}
.feed-revive{border-color:#7ec281}.feed-revive .feed-text{color:#9bd09d}
.feed-power{border-color:#b59bdf}.feed-power .feed-text{color:#d6c6f4}
.feed-buy{border-color:#76bcd7}.feed-buy .feed-text{color:#a9d6e8}
.feed-line.bump .feed-count{animation:feedBump .32s ease-out}
@keyframes feedIn{from{opacity:0;transform:translateX(16px)}}
@keyframes feedBump{from{transform:scale(1.7);color:#f2c661}}
#fpsCounter{position:fixed;top:8px;right:var(--edge-x);z-index:7;font:700 calc(11*var(--u))/1 var(--font-num);letter-spacing:.12em;color:#9bd09d;text-shadow:0 1px 2px #000;pointer-events:none;font-variant-numeric:var(--num)}
#scoreboard{position:fixed;left:50%;top:47%;transform:translate(-50%,-50%);z-index:15;width:min(860px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:hidden;background:linear-gradient(180deg,rgba(9,14,21,.95),rgba(5,8,12,.95));border:1px solid rgba(216,187,128,.22);border-top:3px solid var(--c-gold);padding:calc(22*var(--u)) calc(28*var(--u)) calc(14*var(--u));box-shadow:var(--shadow-panel);pointer-events:none}
.sb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:calc(14*var(--u));border-bottom:1px solid var(--c-line)}
.sb-title small{display:block;font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-gold)}
.sb-title b{display:block;font:900 calc(34*var(--u))/1 var(--font-display);letter-spacing:.02em;margin-top:calc(8*var(--u));color:var(--c-text-hi)}
.sb-meta{display:flex;gap:calc(30*var(--u));text-align:right}
.sb-meta small{display:block;font:700 calc(11*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text-3)}
.sb-meta b{display:block;font:700 calc(30*var(--u))/1 var(--font-num);font-variant-numeric:var(--num);color:var(--c-text-hi);margin-top:calc(5*var(--u))}
.sb-table{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:var(--num);table-layout:fixed}
.sb-table th{font:700 calc(11.5*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-3);text-align:right;padding:calc(11*var(--u)) 8px calc(9*var(--u));white-space:nowrap}
.sb-table th:first-child{text-align:left;padding-left:15px;width:30%}
.sb-table td{font:700 calc(19*var(--u))/1 var(--font-num);color:var(--c-text);text-align:right;padding:calc(11*var(--u)) 8px;border-top:1px solid rgba(255,255,255,.06)}
.sb-table tr.you td{background:rgba(216,187,128,.08)}
.sb-table td.sb-name{text-align:left;border-left:3px solid var(--slot,var(--c-gold));padding-left:12px;font:700 calc(15*var(--u))/1 var(--font-ui);letter-spacing:var(--tr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-name span{color:var(--slot,var(--c-gold));font-weight:700;text-transform:uppercase}
.sb-name em,.sb-status{font-style:normal;font:700 calc(10.5*var(--u))/1 var(--font-ui);letter-spacing:.12em;padding:3px 6px;margin-left:8px;vertical-align:2px}
.sb-name em{color:#14110a;background:var(--c-gold)}.sb-status{color:#ff6b5c;border:1px solid #ff6b5c88}
.sb-foot{margin:calc(12*var(--u)) 0 0;text-align:center;font:700 calc(11*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:#6f767e}
/* end of match (hud-menus.js): the frozen last moment stays behind, dimmed */
#matchSummary{position:fixed;inset:0;z-index:40;overflow:auto;display:flex;padding:calc(40*var(--u)) var(--gutter) calc(96*var(--u));background:radial-gradient(ellipse 70% 55% at 20% 0%,rgba(150,24,16,.5),rgba(150,24,16,0) 70%),linear-gradient(90deg,rgba(5,8,12,.93),rgba(5,8,12,.8) 55%,rgba(5,8,12,.5));outline:none;animation:msFade .45s ease-out}
#matchSummary.ms-won{background:radial-gradient(ellipse 70% 55% at 20% 0%,rgba(150,112,40,.45),rgba(150,112,40,0) 70%),linear-gradient(90deg,rgba(5,8,12,.93),rgba(5,8,12,.8) 55%,rgba(5,8,12,.5))}
#matchSummary[hidden]{display:none}
.ms-card{margin:auto 0;width:min(1000px,100%)}
@media (min-width:1280px){.ms-card{width:min(1560px,100%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:calc(36*var(--u));align-items:start}
 .ms-card>.ms-eyebrow,.ms-card>.ms-title,.ms-card>.ms-reached,.ms-card>.ms-rule{grid-column:1/-1}
 .ms-card>.ms-stats,.ms-card>.ms-team-wrap,.ms-card>.ms-actions{grid-column:1}
 .ms-card>.ms-extra{grid-column:2;grid-row:5/span 3}.ms-card>.ms-extra>.ms-section:first-child{margin-top:0}}
.ms-card>*{animation:msUp .5s var(--ease) both}.ms-card>.ms-stats{animation-delay:.08s}.ms-card>.ms-team-wrap,.ms-card>.ms-extra{animation-delay:.16s}.ms-card>.ms-actions{animation-delay:.22s}
.ms-eyebrow{display:flex;align-items:center;gap:12px;font:700 var(--t-xs)/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-gold)}
.ms-eyebrow::before{content:'';width:calc(26*var(--u));height:2px;background:var(--c-ember)}
.ms-won .ms-eyebrow::before{background:var(--c-gold)}
.ms-title{font:900 clamp(60px,11.5vh,150px)/.86 var(--font-display);letter-spacing:.005em;margin:calc(14*var(--u)) 0 calc(12*var(--u));color:var(--c-text-hi);font-weight:900;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.ms-title span{color:var(--c-ember)}.ms-won .ms-title span{color:var(--c-gold)}
.ms-reached{font:700 calc(18*var(--u))/1.2 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text-hi)}
.ms-rule{width:calc(64*var(--u));height:3px;background:var(--c-ember);margin:calc(20*var(--u)) 0 calc(22*var(--u))}.ms-won .ms-rule{background:var(--c-gold)}
.ms-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--c-line);border:1px solid var(--c-line)}.ms-stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.ms-stat{background:rgba(8,12,18,.86);padding:calc(16*var(--u)) calc(20*var(--u)) calc(14*var(--u))}
.ms-stat small{display:block;font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text-3)}
.ms-stat b{display:block;font:700 calc(42*var(--u))/1.05 var(--font-num);font-variant-numeric:var(--num);color:var(--c-text-hi);margin-top:calc(8*var(--u));white-space:nowrap}
.ms-team-wrap{margin-top:18px;overflow-x:auto;background:rgba(8,12,18,.86);border:1px solid var(--c-line)}
.ms-team{margin:0}.ms-team td{font-size:calc(16*var(--u));padding:calc(10*var(--u)) 8px}
.ms-section{margin-top:18px;padding:calc(16*var(--u)) calc(20*var(--u));background:rgba(8,12,18,.86);border:1px solid var(--c-line)}
.ms-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:calc(26*var(--u))}
.ms-primary{background:linear-gradient(90deg,#e3c98f,#c9ab74);border:0;color:#14110a;font:900 calc(24*var(--u))/1 var(--font-display);letter-spacing:.06em;padding:calc(17*var(--u)) calc(34*var(--u));min-width:calc(250*var(--u));cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:background var(--t-fast),box-shadow var(--t-fast)}
.ms-primary:hover,.ms-primary:focus-visible{background:linear-gradient(90deg,#f6e1ad,#dcbf86);box-shadow:0 10px 34px rgba(216,187,128,.28)}.ms-primary:disabled{opacity:.5;cursor:default}
.ms-secondary{background:rgba(5,8,12,.4);border:1px solid var(--c-line-2);color:var(--c-text-hi);font:700 calc(16*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);padding:calc(18*var(--u)) calc(28*var(--u));min-width:calc(200*var(--u));cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.ms-secondary:hover,.ms-secondary:focus-visible{border-color:var(--c-gold);background:rgba(216,187,128,.14)}
.ms-quiet{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:var(--c-text-2);font:700 calc(14*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);padding:10px 0;margin-left:10px;cursor:pointer}
.ms-quiet:hover,.ms-quiet:focus-visible{color:var(--c-text-hi);border-color:var(--c-gold)}
.ms-actions button:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
@keyframes msFade{from{opacity:0}}
@keyframes msUp{from{opacity:0;transform:translateY(12px)}}
.ms-career .msc-head{display:flex;align-items:center;gap:14px}
.ms-career .msc-head img{width:46px;height:46px}
.ms-career .msc-head>div:nth-child(2){flex:1;min-width:0}
.ms-career small{display:block;font:700 calc(11.5*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text-3)}
.ms-career b{display:block;font:900 calc(24*var(--u))/1 var(--font-display);letter-spacing:.04em;color:var(--c-text-hi);margin-top:5px}
.ms-career .msc-xp{text-align:right}
.ms-career .msc-xp b{font:700 calc(30*var(--u))/1.1 var(--font-num);font-variant-numeric:var(--num);letter-spacing:0;color:var(--c-gold)}
.ms-career .msc-bar{height:4px;background:#ffffff14;margin-top:14px}
.ms-career .msc-bar i{display:block;height:100%;background:var(--c-gold)}
.ms-career .msc-next{font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-3);margin-top:8px}
.ms-career .msc-list{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ms-career .msc-list small{width:100%}
.ms-career .msc-list span{font:700 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr);color:var(--c-gold-hi);border:1px solid #ffffff1f;padding:6px 9px}
.ms-career .msc-list em{font-style:normal;color:var(--c-gold)}

/* ---------------------------------------------- co-op lobby (multiplayer/view.js) ------------------------- */
.coop-entry{display:block}
#coopLobby{position:fixed;inset:0;z-index:35;overflow:auto;background:radial-gradient(ellipse 60% 70% at 85% 30%,rgba(208,53,43,.1),transparent 70%),linear-gradient(90deg,rgba(5,8,12,.97),rgba(5,8,12,.88) 50%,rgba(5,8,12,.66));color:var(--c-text);animation:feIn var(--t-slow) var(--ease)}
.coop-main{max-width:calc(1240*var(--u) + 2*var(--gutter));margin:0;padding:calc(44*var(--u)) var(--gutter) calc(96*var(--u))}
.coop-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-line);padding-bottom:calc(18*var(--u));font:700 var(--t-xs)/1 var(--font-ui);letter-spacing:var(--tr-wide)}
.coop-top b{font:900 calc(22*var(--u))/1 var(--font-display);letter-spacing:.02em;color:var(--c-text-hi)}
.coop-top span{color:var(--c-gold)}
.coop-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(60*var(--u));padding-top:calc(36*var(--u))}
.coop-layout h1{font-size:clamp(56px,9vh,112px);margin:calc(16*var(--u)) 0 calc(18*var(--u))}
.coop-copy{max-width:30em;color:var(--c-text-2);font:400 var(--t-md)/1.6 var(--font-body);margin:0}
.coop-features{margin-top:calc(22*var(--u));display:flex;flex-wrap:wrap;gap:calc(8*var(--u));font:700 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-gold-hi)}
.coop-features span{padding:calc(7*var(--u)) calc(10*var(--u));border:1px solid rgba(216,187,128,.35);background:rgba(216,187,128,.07)}
.coop-map{margin-top:calc(22*var(--u));padding-top:calc(18*var(--u));border-top:1px solid var(--c-line);font:600 calc(12.5*var(--u))/1.9 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-3)}
.coop-map b{display:block;font:900 calc(26*var(--u))/1.1 var(--font-display);letter-spacing:.03em;color:var(--c-text-hi)}
.coop-panel{border:1px solid var(--c-line);border-top:3px solid var(--c-gold);background:rgba(8,12,18,.88);padding:calc(26*var(--u)) calc(28*var(--u));box-shadow:var(--shadow-panel);align-self:start}
.coop-panel h2{margin:0 0 calc(8*var(--u));font:900 calc(34*var(--u))/1 var(--font-display);letter-spacing:.03em;color:var(--c-text-hi)}
.coop-sub{font:700 calc(12*var(--u))/1.3 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-gold)}
.coop-slot{display:flex;align-items:center;gap:calc(18*var(--u));padding:calc(11*var(--u)) 0;border-bottom:1px solid rgba(255,255,255,.07)}
.coop-slot img,.crew-empty{width:54px;height:60px;object-fit:cover;border:1px solid rgba(216,187,128,.4)}
.coop-slot img{object-position:center 25%}
.crew-empty{display:grid;place-items:center;color:#697381;font:600 26px/1 var(--font-ui);background:#121a26}
.crew-name{font:700 calc(17*var(--u))/1.1 var(--font-ui);letter-spacing:var(--tr);overflow-wrap:anywhere;color:var(--c-text-hi)}
.crew-role{font:600 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-3);margin-top:calc(6*var(--u))}
.crew-ready{margin-left:auto;font:700 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label)}
.coop-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:calc(20*var(--u))}
.coop-buttons button{padding:calc(16*var(--u)) 8px;font:700 calc(15.5*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);border:1px solid var(--c-gold);color:#14110a;background:linear-gradient(90deg,#e3c98f,#c9ab74);cursor:pointer;transition:background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.coop-buttons button:hover,.coop-buttons button:focus-visible{background:linear-gradient(90deg,#f6e1ad,#dcbf86);box-shadow:0 8px 24px rgba(216,187,128,.22);outline:none}
.coop-buttons .secondary{background:rgba(5,8,12,.4);color:var(--c-text-hi);border-color:var(--c-line-2)}
.coop-buttons .secondary:hover,.coop-buttons .secondary:focus-visible{background:rgba(216,187,128,.14);border-color:var(--c-gold);box-shadow:none}
.coop-buttons button:disabled{opacity:.45;cursor:wait}
.coop-label{display:block;font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);color:var(--c-text-3);margin:calc(16*var(--u)) 0 calc(7*var(--u))}
.coop-panel input{width:100%;padding:calc(11*var(--u)) 12px;background:rgba(0,0,0,.35);color:var(--c-text-hi);border:1px solid var(--c-line-2);font:700 calc(17*var(--u))/1 var(--font-ui);letter-spacing:.1em}
.coop-panel input:focus{outline:2px solid var(--c-gold);outline-offset:-1px}
#coopStatus{font:400 calc(14*var(--u))/1.6 var(--font-body);color:var(--c-text-2);margin-top:18px;min-height:36px}
.coop-quiet{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--c-text-2);border:0;border-bottom:1px solid rgba(255,255,255,.25);font:700 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);cursor:pointer;margin-top:18px;padding:10px 0}
.coop-quiet:hover,.coop-quiet:focus-visible{color:var(--c-text-hi);border-color:var(--c-gold);outline:none}
#teamHud{position:fixed;top:calc(var(--edge-y) + 130*var(--u));left:var(--edge-x);z-index:6;font:600 calc(13*var(--u))/1.2 var(--font-ui);letter-spacing:.05em;text-shadow:var(--shadow-text)}
#teamConnection{color:var(--c-gold);margin-bottom:calc(8*var(--u));font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label)}
#teamPlayers>div{margin:calc(6*var(--u)) 0;font-variant-numeric:var(--num)}
#showCrew{font:700 calc(11*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-label);background:rgba(8,12,18,.7);border:1px solid var(--c-line-2);color:var(--c-text);padding:calc(7*var(--u)) calc(10*var(--u));cursor:pointer;margin-top:4px}
#showCrew:hover,#showCrew:focus-visible{border-color:var(--c-gold)}
/* compact survivor choices in the split co-op lobby */
.survivor-select{margin-top:calc(24*var(--u))}.survivor-select h2{display:flex;align-items:center;gap:12px;font:700 calc(13*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-gold);margin:0 0 calc(12*var(--u))}
.survivor-select h2::after{content:'';flex:1;max-width:200px;height:1px;background:linear-gradient(90deg,var(--c-line-2),transparent)}
.survivor-choices{display:flex;flex-wrap:wrap;gap:7px;max-width:460px}
.survivor-choices button{min-width:78px;padding:calc(11*var(--u)) 14px;background:rgba(17,26,37,.85);color:var(--c-text-2);border:1px solid var(--c-line-2);cursor:pointer;font:700 calc(15*var(--u))/1 var(--font-ui);letter-spacing:.08em;transition:border-color var(--t-fast),color var(--t-fast)}
.survivor-choices button:hover{border-color:var(--c-gold);color:var(--c-text-hi)}
.survivor-choices button[aria-pressed=true]{background:var(--c-gold);color:#14110a;border-color:var(--c-gold)}
.survivor-choices button:disabled{cursor:default;opacity:.65}
.survivor-choices button:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
#survivorChoiceStatus{font:400 calc(13*var(--u))/1.6 var(--font-body);color:var(--c-text-3)}
.crew-portrait{width:54px;height:60px;flex-shrink:0;overflow:hidden;position:relative;border:1px solid rgba(216,187,128,.4)}
.coop-slot .crew-portrait img{border:0;width:100%;height:100%;object-fit:cover}
.coop-slot .crew-portrait-fullbody img{position:absolute;width:120px;height:auto;max-width:none;left:50%;top:-3px;transform:translateX(-50%)}


/* ---------------------------------------------- motion and small screens ---------------------------------- */
@media (prefers-reduced-motion:reduce){#overlay,#menuPage,#menuBody,#coopLobby,#matchSummary,.ms-card>*{animation:none!important}.fe-menu button,.fe-menu button::before,.fe-tabs button::after{transition:none!important}}
@media (max-height:820px){
 .intro{padding-top:calc(40*var(--u))}h1{font-size:clamp(60px,10.4vh,150px);margin:calc(10*var(--u)) 0 calc(4*var(--u))}
 #introCopy{margin:calc(6*var(--u)) 0 calc(12*var(--u))}#introCopy::first-line{font-size:calc(22*var(--u))}
 .fe-section{margin:calc(10*var(--u)) 0 calc(4*var(--u))}#menuRow .fe-section{margin-top:calc(10*var(--u))}
 .fe-menu #start{min-height:calc(52*var(--u));font-size:calc(27*var(--u))}.fe-menu .coop-entry{min-height:calc(40*var(--u));font-size:calc(18*var(--u))}#menuRow .menu-tab{min-height:calc(31*var(--u))}
 .fe-detail{margin-top:calc(14*var(--u))}.fe-detail .instructions{display:none}
}
@media (max-height:600px){.fe-detail{display:none}}
@media (max-width:1100px){.fe-side{display:none}.intro{width:100%}}
@media(max-width:850px){.coop-main{padding:25px}.coop-layout{grid-template-columns:1fr;gap:25px;padding-top:25px}.coop-layout h1{font-size:60px}.coop-top{font-size:9px;letter-spacing:1px}#teamHud{left:18px;top:175px}.coop-features{gap:6px}}
@media(max-width:700px){
 :root{--edge-x:18px;--edge-y:18px}
 .intro{padding:5vh 18px 120px}.fe-menu{width:100%}#menuRow{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
 .fe-foot{left:18px;right:18px}.fine{max-width:100%;text-align:left}
 #objective{font-size:11px;letter-spacing:.06em;padding:8px 12px 8px 22px}#location{left:18px}.survivor canvas{width:40px;height:50px}.health-track{width:80px}.ammo b{font-size:38px}.ammo small{font-size:10px}#wave{display:none}
 #killFeed{top:62px;right:18px;max-width:78vw}.feed-line{font-size:11px;letter-spacing:.06em;padding:4px 8px 4px 18px}#fpsCounter{right:18px;top:6px}
 .set-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}.set-row .set-text{grid-column:1;grid-row:1}.set-row .set-value{grid-column:2;grid-row:1}.set-range{grid-column:1/-1;grid-row:2}.set-switch{grid-column:2;grid-row:1}.set-switch+.set-value{display:none}.set-quality .set-seg{grid-column:1/-1;grid-row:2}
 .set-note,.set-foot{flex-direction:column;align-items:stretch}.controls-body{grid-template-columns:1fr}.ctl-keys{flex-basis:96px}
 .menu-page h2{font-size:44px}
 #scoreboard{padding:14px 12px 10px}.sb-title b{font-size:22px}.sb-meta{gap:14px}.sb-meta b{font-size:22px}.sb-table th{font-size:9px;letter-spacing:.06em;padding:8px 3px}.sb-table td{font-size:14px;padding:8px 3px}.sb-table td.sb-name{font-size:12px;letter-spacing:.04em;padding-left:8px}
 .ms-stats,.ms-stats.six{grid-template-columns:repeat(2,minmax(0,1fr))}.ms-team{min-width:540px}.ms-stat{padding:12px 14px}.ms-stat b{font-size:28px}.ms-reached{font-size:12px;letter-spacing:.1em}.ms-actions{flex-direction:column;align-items:stretch}.ms-primary,.ms-secondary{min-width:0}.ms-quiet{margin:0;align-self:center}
 #feHints{display:none}
}

/* ================================================================================================================
   Landing (landing.js, docs/LandingPass.md): the attract screen, then a Call of Duty style home on the title only.
   Pause, death and results keep the list layout above. Sizes are calc(N*var(--u)): N px at 1080p.
   ================================================================================================================ */
/* ---------- attract: key art, logo, loading, PRESS ANY KEY ---------- */
#feAttract{position:fixed;inset:0;z-index:60;overflow:hidden;background:#05080c;color:var(--c-text);cursor:pointer;-webkit-user-select:none;user-select:none;opacity:1;transition:opacity .6s var(--ease)}
html.no-attract #feAttract,#feAttract[hidden]{display:none}
#feAttract.out{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
#feAttract.out .at-lockup{transform:translateY(-58%) scale(.97);opacity:0;transition:transform .6s var(--ease),opacity .45s var(--ease)}
#feAttract .at-art{position:absolute;inset:-4%;background:#05080c url(assets/ui/keyart-title.webp) 62% 50%/cover no-repeat;animation:atDrift 40s ease-in-out infinite alternate;will-change:transform}
@keyframes atDrift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.8%,-1.1%,0)}}
#feAttract .at-shade{position:absolute;inset:0;background:
 linear-gradient(90deg,rgba(5,8,12,.94) 0%,rgba(5,8,12,.74) 28%,rgba(5,8,12,.2) 60%,rgba(5,8,12,.32) 100%),
 linear-gradient(0deg,rgba(5,8,12,.96) 0%,rgba(5,8,12,.5) 24%,rgba(5,8,12,0) 48%),
 linear-gradient(180deg,rgba(5,8,12,.6) 0%,rgba(5,8,12,0) 22%)}
#feAttract .at-lockup{position:absolute;left:var(--gutter);top:46%;transform:translateY(-58%);transition:transform .6s var(--ease)}
#feAttract .eyebrow{font-size:calc(14*var(--u))}
.at-logo{margin:calc(18*var(--u)) 0 calc(14*var(--u));font:900 clamp(84px,17.5vh,236px)/.82 var(--font-display);letter-spacing:.004em;text-transform:uppercase;background:linear-gradient(180deg,#fffdf8 0%,#efe8da 55%,#b8ae9d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 8px 34px rgba(0,0,0,.65));animation:atIn 1.1s var(--ease) both}
.at-logo span{background:linear-gradient(180deg,#ff6a52 0%,#d0352b 55%,#8f1c16 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes atIn{from{opacity:0;transform:translateY(calc(14*var(--u)));letter-spacing:.04em}}
.at-map{display:flex;align-items:center;gap:calc(12*var(--u));font:700 calc(15*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text)}
.at-map b{padding:calc(5*var(--u)) calc(9*var(--u));background:var(--c-gold);color:#14110a;font-weight:700;letter-spacing:.14em}
#feAttract .at-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(46*var(--u));display:flex;align-items:flex-end;justify-content:space-between;gap:calc(40*var(--u))}
.at-load{width:min(100%,calc(560*var(--u)),36vw);transition:opacity .5s var(--ease)}
.at-tip{display:flex;gap:calc(12*var(--u));align-items:baseline;min-height:calc(42*var(--u));margin-bottom:calc(16*var(--u));font:400 calc(15*var(--u))/1.45 var(--font-body);color:var(--c-text-2)}
.at-tip b{flex:none;font:700 calc(12*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wider);color:var(--c-gold)}
.at-tip span.in{animation:atTip .5s var(--ease)}
@keyframes atTip{from{opacity:0;transform:translateX(calc(-8*var(--u)))}}
.at-status{display:flex;justify-content:space-between;margin-bottom:calc(8*var(--u));font:700 calc(12.5*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--c-text-2);font-variant-numeric:var(--num)}
.at-pct{color:var(--c-text-hi)}
.at-bar{height:3px;background:rgba(255,255,255,.12);overflow:hidden}
.at-bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--c-gold-lo,#9c8452),var(--c-gold-hi,#f3dc98));box-shadow:0 0 12px rgba(243,220,152,.7);transition:width .35s linear}
#feAttract.err .at-label{color:#ff9d8e}
#feAttract .at-press{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:calc(14*var(--u));padding:calc(12*var(--u)) calc(26*var(--u));background:none;border:0;color:var(--c-text-hi);font:700 calc(20*var(--u))/1 var(--font-ui);letter-spacing:.32em;text-shadow:0 2px 12px #000;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
#feAttract .at-press::before,#feAttract .at-press::after{content:'';width:calc(46*var(--u));height:1px;background:linear-gradient(90deg,transparent,var(--c-gold))}
#feAttract .at-press::after{transform:scaleX(-1)}
#feAttract.ready .at-press{opacity:1;pointer-events:auto;animation:atPulse 2.2s ease-in-out .5s infinite}
#feAttract.ready .at-status,#feAttract.ready .at-bar{opacity:0;transition:opacity .5s var(--ease)}
@keyframes atPulse{50%{opacity:.45}}
#feAttract .at-press.pad-focus,#feAttract .at-press:focus-visible{outline:none;box-shadow:none}
/* the menu arrives: a short stagger after the attract lets go */
html.fe-intro #overlay[data-mode=title] .intro>*,html.fe-intro #overlay[data-mode=title] .fe-deco,html.fe-intro #fePlayer,html.fe-intro #feFeatured,html.fe-intro #overlay[data-mode=title] #menuRow{animation:feRise .7s var(--ease) both}
html.fe-intro #overlay[data-mode=title] .fe-deco[data-for=soloRounds]{animation-delay:.08s}
html.fe-intro #overlay[data-mode=title] .fe-deco[data-for=openCoop]{animation-delay:.14s}
html.fe-intro #feFeatured,html.fe-intro #fePlayer{animation-delay:.18s}
@keyframes feRise{from{opacity:0;transform:translateY(calc(16*var(--u)))}}

/* ---------- home (title only) ---------- */
.fe-deco,.fe-topline,#fePlayer,#feFeatured{display:none}
#overlay[data-mode=title]{background:
 linear-gradient(180deg,rgba(5,8,12,.82) 0%,rgba(5,8,12,0) calc(150*var(--u))),
 radial-gradient(ellipse 85% 85% at 74% 46%,rgba(5,8,12,0) 0%,rgba(5,8,12,.28) 55%,rgba(5,8,12,.8) 100%),
 linear-gradient(90deg,rgba(5,8,12,.95) 0%,rgba(5,8,12,.86) 30%,rgba(5,8,12,.42) 52%,rgba(5,8,12,.08) 72%,rgba(5,8,12,.22) 100%)}
#overlay[data-mode=title] .fe-side{display:none}
#overlay[data-mode=title] .intro{width:min(100%,calc(620*var(--u) + var(--gutter)));padding-top:calc(116*var(--u));padding-bottom:calc(110*var(--u))}
#overlay[data-mode=title] .eyebrow{font-size:calc(12.5*var(--u))}
#overlay[data-mode=title] h1{font-size:clamp(56px,9.6vh,128px);margin:calc(12*var(--u)) 0 calc(4*var(--u))}
#overlay[data-mode=title] #introCopy{margin:calc(4*var(--u)) 0 calc(22*var(--u));font-size:calc(15*var(--u))}
#overlay[data-mode=title] #introCopy::first-line{font-size:calc(21*var(--u))}
#overlay[data-mode=title] .fe-detail{width:calc(600*var(--u));margin-top:calc(18*var(--u))}
#overlay[data-mode=title] .fe-detail b{font-size:calc(19*var(--u))}
#overlay[data-mode=title] .fe-detail .instructions{display:none}
#overlay[data-mode=title] .fe-foot{bottom:calc(16*var(--u))}
#overlay[data-mode=title] .fine{max-width:min(760px,46%)}
/* top bar: PLAY (this screen) and every menu page as tabs, with a rule under them */
#overlay[data-mode=title] .fe-topline{display:block;position:fixed;left:0;right:0;top:0;height:calc(86*var(--u));z-index:3;pointer-events:none;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(5,8,12,.7),rgba(5,8,12,.25))}
#overlay[data-mode=title] #menuRow{position:fixed;z-index:4;top:calc(22*var(--u));left:var(--gutter);right:calc(var(--gutter) + 380*var(--u));display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;margin:0;overflow:hidden}
#overlay[data-mode=title] #menuRow::before{content:'PLAY';flex:none;order:-1;display:flex;align-items:center;padding:0 calc(16*var(--u)) 0 0;margin-right:calc(6*var(--u));font:800 calc(16*var(--u))/1 var(--font-ui);letter-spacing:.14em;color:var(--c-text-hi);box-shadow:inset 0 -2px 0 var(--c-gold);height:calc(44*var(--u))}
#overlay[data-mode=title] #menuRow .fe-section{margin:0;font-size:0;flex:none;width:0;padding:0}
#overlay[data-mode=title] #menuRow .fe-section::after{display:none}
#overlay[data-mode=title] #menuRow .fe-section:nth-of-type(2){width:1px;margin:calc(12*var(--u)) calc(10*var(--u));background:rgba(255,255,255,.18)}
#overlay[data-mode=title] #menuRow .menu-tab{flex:none;width:auto;min-height:calc(44*var(--u));height:calc(44*var(--u));padding:0 calc(14*var(--u));font:700 calc(15*var(--u))/1 var(--font-ui);letter-spacing:.13em;color:var(--c-text-2);background:none!important;box-shadow:none!important;white-space:nowrap}
#overlay[data-mode=title] #menuRow .menu-tab::before{left:calc(14*var(--u));right:calc(14*var(--u));top:auto;bottom:0;width:auto;height:2px;transform:scaleX(0);transform-origin:50% 50%}
#overlay[data-mode=title] #menuRow .menu-tab::after{display:none!important}
#overlay[data-mode=title] #menuRow .menu-tab:is(:hover,:focus-visible,.pad-focus){color:var(--c-text-hi);padding-left:calc(14*var(--u))}
#overlay[data-mode=title] #menuRow .menu-tab:is(:hover,:focus-visible,.pad-focus)::before{transform:scaleX(1)}
/* player card, top right: survivor, calling card, rank insignia, rank and XP */
#overlay[data-mode=title] #fePlayer{display:flex;position:fixed;z-index:4;top:calc(16*var(--u));right:var(--gutter);width:calc(350*var(--u));height:calc(56*var(--u));padding:0;margin:0;align-items:stretch;text-align:left;color:var(--c-text-hi);background:#0a0f15 var(--card,none) center/cover no-repeat;border:1px solid rgba(255,255,255,.16);border-radius:0;cursor:pointer;overflow:hidden;transition:border-color var(--t-med),box-shadow var(--t-med)}
#fePlayer .p-face{flex:none;width:calc(56*var(--u));background:#111 center 16%/cover no-repeat;border-right:1px solid rgba(255,255,255,.14)}
#fePlayer .p-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:calc(5*var(--u));padding:0 calc(12*var(--u));background:linear-gradient(90deg,rgba(5,8,12,.88),rgba(5,8,12,.55))}
#fePlayer .p-name{font:800 calc(17*var(--u))/1 var(--font-display);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fePlayer .p-rank{display:flex;align-items:center;gap:calc(6*var(--u));font:700 calc(11*var(--u))/1 var(--font-ui);letter-spacing:.12em;color:var(--c-gold);white-space:nowrap;overflow:hidden}
#fePlayer .p-ins{width:calc(16*var(--u));height:calc(16*var(--u));flex:none}
#fePlayer .p-ins:not([src]){display:none}
#fePlayer .p-xp{height:2px;background:rgba(255,255,255,.14)}
#fePlayer .p-xp i{display:block;height:100%;background:var(--c-gold);box-shadow:0 0 8px rgba(216,187,128,.6)}
#fePlayer .p-lvl{flex:none;width:calc(58*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--u));background:rgba(5,8,12,.82);border-left:1px solid rgba(255,255,255,.12)}
#fePlayer .p-lvl small{font:700 calc(9.5*var(--u))/1 var(--font-ui);letter-spacing:.18em;color:var(--c-text-3)}
#fePlayer .p-lvl b{font:700 calc(24*var(--u))/1 var(--font-ui);font-variant-numeric:var(--num);color:var(--c-text-hi)}
#fePlayer:is(:hover,:focus-visible,.pad-focus){outline:none;border-color:var(--c-gold);box-shadow:0 0 0 1px var(--c-gold),0 0 24px rgba(216,187,128,.25)}
/* the three modes: the buttons stay the click targets; .fe-deco draws each tile over its button */
#overlay[data-mode=title] .fe-menu{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(12*var(--u));row-gap:calc(12*var(--u));width:calc(600*var(--u));max-width:100%}
#overlay[data-mode=title] .fe-menu>.fe-section{display:none}
#overlay[data-mode=title] .fe-menu #start{grid-area:1/1/2/3;height:calc(214*var(--u))}
#overlay[data-mode=title] .fe-menu #restartNight{grid-area:2/1/3/3;margin:0}
#overlay[data-mode=title] .fe-menu #soloRounds{grid-area:3/1/4/2;height:calc(146*var(--u))}
#overlay[data-mode=title] .fe-menu #openCoop{grid-area:3/2/4/3;height:calc(146*var(--u))}
#overlay[data-mode=title] .fe-deco[data-for=start]{grid-area:1/1/2/3}
#overlay[data-mode=title] .fe-deco[data-for=soloRounds]{grid-area:3/1/4/2}
#overlay[data-mode=title] .fe-deco[data-for=openCoop]{grid-area:3/2/4/3}
#overlay[data-mode=title] .fe-menu .fe-tile{z-index:1;min-height:0;margin:0;padding:0!important;font-size:0!important;color:transparent!important;background:transparent!important;box-shadow:none!important;outline:none!important;animation:none!important;opacity:1}
#overlay[data-mode=title] .fe-menu .fe-tile::before,#overlay[data-mode=title] .fe-menu .fe-tile::after{display:none!important}
#overlay[data-mode=title] .fe-deco{display:block;position:relative;z-index:2;pointer-events:none;overflow:hidden;background:#0a0f15;border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 44px rgba(0,0,0,.5);transition:border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.fe-deco .d-img{position:absolute;inset:0;background:#111821 center/cover no-repeat;transform:scale(1.002);filter:saturate(.92) brightness(.8);transition:transform 1s var(--ease),filter .4s var(--ease)}
.fe-deco .d-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,12,.95) 0%,rgba(5,8,12,.62) 34%,rgba(5,8,12,0) 66%),linear-gradient(90deg,rgba(5,8,12,.5),rgba(5,8,12,0) 62%)}
.fe-deco::before{content:'';position:absolute;z-index:2;left:0;top:0;bottom:0;width:4px;background:var(--c-gold);transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--t-med) var(--ease)}
.fe-deco .d-tag{position:absolute;left:calc(16*var(--u));top:calc(14*var(--u));display:flex;align-items:center;gap:calc(8*var(--u));font:700 calc(11.5*var(--u))/1 var(--font-ui);letter-spacing:.16em;color:var(--c-text-hi);text-shadow:0 1px 3px #000}
.fe-deco .d-tag b{padding:calc(4*var(--u)) calc(7*var(--u));background:var(--c-ember);color:#fff;letter-spacing:.14em;text-shadow:none}
.fe-deco .d-body{position:absolute;left:calc(20*var(--u));right:calc(20*var(--u));bottom:calc(16*var(--u));display:flex;flex-direction:column;gap:calc(6*var(--u))}
.fe-deco .d-meta{font:700 calc(11.5*var(--u))/1 var(--font-ui);letter-spacing:.18em;color:var(--c-gold);font-variant-numeric:var(--num)}
.fe-deco .d-title{font:900 calc(30*var(--u))/.92 var(--font-display);letter-spacing:.03em;color:var(--c-text-hi);text-shadow:0 2px 14px rgba(0,0,0,.7)}
.fe-deco[data-for=start] .d-title{font-size:calc(52*var(--u))}
.fe-deco .d-sub{font:400 calc(13.5*var(--u))/1.35 var(--font-body);color:var(--c-text-2);max-width:34em}
.fe-deco:not([data-for=start]) .d-sub{display:none}
.fe-deco .d-key{position:absolute;right:calc(14*var(--u));top:calc(12*var(--u));display:flex;align-items:center;gap:calc(8*var(--u));opacity:0;transition:opacity var(--t-fast)}
.fe-deco .d-key kbd{display:inline-flex;align-items:center;height:calc(22*var(--u));padding:0 calc(7*var(--u));font:700 calc(11*var(--u))/1 var(--font-ui);letter-spacing:.08em;color:var(--c-text-hi);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);border-bottom-width:2px;border-radius:2px}
html.dgs-pad .fe-deco .d-key kbd{display:none}
.fe-deco .d-pad .pad-g{--pg:calc(22*var(--u));margin:0}
.fe-deco .d-load{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1);opacity:0;transition:opacity .4s}
.fe-deco .d-load i{display:block;height:100%;width:var(--p,0%);background:var(--c-gold);box-shadow:0 0 10px rgba(243,220,152,.7);transition:width .4s linear}
.fe-deco[data-for=start]{border-bottom:2px solid rgba(216,187,128,.75)}
.fe-deco.loading .d-load{opacity:1}
.fe-deco.loading .d-img{filter:saturate(.35) brightness(.55)}
.fe-deco.loading .d-title{color:var(--c-text-2)}
/* highlighted tile: hover, keyboard focus or controller focus on its button */
#overlay[data-mode=title] #start:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=start],
#overlay[data-mode=title] #soloRounds:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=soloRounds],
#overlay[data-mode=title] #openCoop:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=openCoop]{border-color:var(--c-gold);box-shadow:0 0 0 1px var(--c-gold),0 0 34px rgba(216,187,128,.28),0 18px 44px rgba(0,0,0,.55)}
#overlay[data-mode=title] #start:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=start]::before,
#overlay[data-mode=title] #soloRounds:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=soloRounds]::before,
#overlay[data-mode=title] #openCoop:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=openCoop]::before{transform:scaleY(1)}
#overlay[data-mode=title] #start:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=start] .d-img,
#overlay[data-mode=title] #soloRounds:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=soloRounds] .d-img,
#overlay[data-mode=title] #openCoop:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=openCoop] .d-img{transform:scale(1.06);filter:saturate(1.05) brightness(.98)}
#overlay[data-mode=title] #start:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=start] .d-key,
#overlay[data-mode=title] #soloRounds:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=soloRounds] .d-key,
#overlay[data-mode=title] #openCoop:not(:disabled):is(:hover,:focus-visible,.pad-focus)~.fe-deco[data-for=openCoop] .d-key{opacity:1}
#overlay[data-mode=title] .fe-menu .fe-tile:disabled{cursor:wait}
/* featured panel, bottom right */
#overlay[data-mode=title] #feFeatured{display:flex;flex-direction:column;position:fixed;z-index:4;right:var(--gutter);bottom:calc(74*var(--u));width:calc(400*var(--u));padding:0;margin:0;text-align:left;color:var(--c-text);background:rgba(8,12,18,.82);border:1px solid rgba(255,255,255,.14);border-radius:0;cursor:pointer;overflow:hidden;transition:border-color var(--t-med),box-shadow var(--t-med)}
#feFeatured .f-head{display:flex;align-items:center;justify-content:space-between;padding:calc(9*var(--u)) calc(12*var(--u));border-bottom:1px solid rgba(255,255,255,.1);font:700 calc(11*var(--u))/1 var(--font-ui);letter-spacing:var(--tr-wider);color:var(--c-text-3)}
#feFeatured .f-dots{display:flex;gap:calc(5*var(--u))}
#feFeatured .f-dots i{width:calc(14*var(--u));height:2px;background:rgba(255,255,255,.25);transition:background var(--t-med)}
#feFeatured .f-dots i.on{background:var(--c-gold)}
#feFeatured .f-slide{display:flex;min-height:calc(96*var(--u))}
#feFeatured .f-slide.in{animation:fSlide .5s var(--ease)}
@keyframes fSlide{from{opacity:0;transform:translateX(calc(10*var(--u)))}}
#feFeatured .f-img{flex:none;width:calc(132*var(--u));background:#111821 center/cover no-repeat}
#feFeatured .f-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(5*var(--u));padding:calc(11*var(--u)) calc(14*var(--u)) calc(12*var(--u))}
#feFeatured .f-tag{align-self:flex-start;padding:calc(3*var(--u)) calc(6*var(--u));font:700 calc(10.5*var(--u))/1 var(--font-ui);letter-spacing:.16em;color:#14110a;background:var(--c-gold)}
#feFeatured .f-title{font:900 calc(21*var(--u))/1 var(--font-display);letter-spacing:.04em;color:var(--c-text-hi)}
#feFeatured .f-desc{font:400 calc(12.5*var(--u))/1.4 var(--font-body);color:var(--c-text-2);font-variant-numeric:var(--num)}
#feFeatured:is(:hover,:focus-visible,.pad-focus){outline:none;border-color:var(--c-gold);box-shadow:0 0 0 1px var(--c-gold),0 0 26px rgba(216,187,128,.22)}
/* shorter screens: tighter lock-up and tiles; the detail panel goes first */
@media (max-height:820px){
 #overlay[data-mode=title] .intro{padding-top:calc(104*var(--u))}
 #overlay[data-mode=title] h1{font-size:clamp(50px,8.6vh,110px)}
 #overlay[data-mode=title] .fe-menu #start{height:calc(186*var(--u))}
 #overlay[data-mode=title] .fe-menu #soloRounds,#overlay[data-mode=title] .fe-menu #openCoop{height:calc(124*var(--u))}
 .fe-deco[data-for=start] .d-title{font-size:calc(46*var(--u))}
 #overlay[data-mode=title] #introCopy{display:none}
 #overlay[data-mode=title] .fe-detail{margin-top:calc(12*var(--u))}
 #overlay[data-mode=title] .fe-detail p{display:none}
}
@media (max-height:640px){#overlay[data-mode=title] .fe-detail{display:none}#overlay[data-mode=title] #feFeatured{display:none}}
/* narrower screens: the tab bar wraps under the tiles, no player card or featured panel over the scene */
@media (max-width:1180px){#overlay[data-mode=title] #feFeatured{display:none}#overlay[data-mode=title] #menuRow{right:var(--gutter)}#overlay[data-mode=title] #fePlayer{display:none}}
@media (max-width:900px){
 #overlay[data-mode=title] .intro{padding-top:calc(40*var(--u))}
 #overlay[data-mode=title] .fe-topline{display:none}
 #overlay[data-mode=title] #menuRow{position:static;order:5;grid-area:4/1/5/3;flex-wrap:wrap;overflow:visible;margin-top:calc(8*var(--u))}
 #overlay[data-mode=title] #menuRow::before{display:none}
 #overlay[data-mode=title] .fe-menu{width:100%}
 .at-logo{font-size:clamp(64px,15vw,140px)}
 #feAttract .at-foot{flex-direction:column;align-items:stretch;gap:calc(70*var(--u))}
 #feAttract .at-press{position:static;transform:none;align-self:center}
}
@media (prefers-reduced-motion:reduce){#feAttract .at-art,.at-logo,.at-tip span.in,#feAttract.ready .at-press,html.fe-intro #overlay *,html.fe-intro #fePlayer,html.fe-intro #feFeatured,#feFeatured .f-slide.in{animation:none!important}.fe-deco .d-img{transition:none}}
/* the tiles carry their own lines: the detail panel speaks only for the tab bar, player card and featured panel */
#overlay[data-mode=title] .fe-detail:is([data-for=start],[data-for=soloRounds],[data-for=openCoop],[data-for=restartNight],[data-for=""]){visibility:hidden}
/* 1500 px and narrower: tighter tabs and a slimmer player card so all eight pages fit */
@media (max-width:1500px){#overlay[data-mode=title] #menuRow{right:calc(var(--gutter) + 316*var(--u))}#overlay[data-mode=title] #menuRow .menu-tab{padding:0 calc(10*var(--u));letter-spacing:.09em}#overlay[data-mode=title] #menuRow .menu-tab::before{left:calc(10*var(--u));right:calc(10*var(--u))}#overlay[data-mode=title] #menuRow .menu-tab:is(:hover,:focus-visible,.pad-focus){padding-left:calc(10*var(--u))}#overlay[data-mode=title] #fePlayer{width:calc(296*var(--u))}}
/* 1440 px and narrower the survivor stands further right: the featured panel moves under the tiles (and the
   description panel, which would sit there, steps aside) so nothing covers him */
@media (max-width:1440px) and (min-width:1181px){#overlay[data-mode=title] #feFeatured{right:auto;left:var(--gutter);bottom:calc(64*var(--u));width:calc(600*var(--u))}#overlay[data-mode=title] .fe-detail{display:none}}