/* 1940s survival-horror presentation pass — grain, vignette, paper, type. */

/* ---------- 1940s survival-horror presentation pass ---------- */
:root{--blood:#8d120c;--blood-hot:#bd2417;--paper:#d8d0ba;--ash:#827d72;--soot:#070706;--amber:#c08a48}
body{font-family:"Arial Narrow","Roboto Condensed","Franklin Gothic Medium","Segoe UI",sans-serif;background:#030403}
/* canvas grade is applied by Quality.apply(), not here — a canvas-wide CSS
   filter costs a full-framebuffer pass every frame */
body:before{content:"";position:fixed;inset:0;z-index:39;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.13) 4px),
    linear-gradient(102deg,transparent 0 46%,rgba(98,67,35,.1) 48%,transparent 52%),
    radial-gradient(ellipse at 50% 48%,transparent 48%,rgba(43,23,8,.34) 100%)}
#vignette{background:
  radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.42) 70%,rgba(0,0,0,.94) 100%),
  linear-gradient(90deg,rgba(42,19,7,.18),transparent 28%,transparent 72%,rgba(31,16,5,.22))}
#chroma{opacity:.025}
#grain{opacity:.09}

/* Centred. The layout this used to serve was a left-aligned title column;
   the front end is now a set of centred pages. */
.screen{align-items:center;justify-content:center}
#title-screen{background:#020302}
#title-screen:before,.screen:not(#title-screen):before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.68) 29%,rgba(0,0,0,.08) 63%,rgba(0,0,0,.48) 100%),
    radial-gradient(ellipse at 25% 50%,transparent 0 20%,rgba(0,0,0,.44) 68%)}
#title-screen:after,.screen:not(#title-screen):after{content:"ELLIS STATION // NO SIGNAL";position:absolute;right:28px;bottom:22px;
  color:rgba(211,202,178,.35);font:700 10px/1 "Courier New",monospace;letter-spacing:.24em;transform:rotate(-1deg)}
#title-bg{opacity:.82;filter:saturate(.56) sepia(.15) contrast(1.13);background-position:center}
#title-grad{background:
  linear-gradient(180deg,rgba(0,0,0,.22),transparent 45%,rgba(0,0,0,.72)),
  linear-gradient(90deg,rgba(1,2,2,.9),rgba(3,4,4,.5) 34%,transparent 68%)}
.title-content{width:min(660px,84vw);max-width:none;text-align:left;margin-left:clamp(34px,7.2vw,128px);padding:0;z-index:2}
.eyebrow{max-width:570px;margin-bottom:10px;color:#a79f8d;font-family:"Courier New",monospace;font-size:11px;font-weight:700;
  letter-spacing:.19em;line-height:1.5;text-shadow:1px 1px 2px #000}
.eyebrow:before{content:"STATION LOG // ";color:#a72a20}
h1.game-title{position:relative;width:max-content;font-size:clamp(48px,7.1vw,104px);letter-spacing:.015em;line-height:.77;
  color:#d5cfbf;text-shadow:2px 3px 0 #17130d,5px 7px 8px rgba(0,0,0,.9);transform:scaleX(.88);transform-origin:left center;
  filter:contrast(1.08)}
h1.game-title:after{content:"";position:absolute;left:-2%;right:-7%;bottom:-17px;height:8px;opacity:.75;transform:rotate(-1deg);
  background:linear-gradient(90deg,transparent,#73110d 4%,#a51910 34%,#4d0a08 71%,transparent);
  clip-path:polygon(0 39%,11% 18%,19% 53%,29% 25%,42% 61%,55% 23%,67% 48%,79% 21%,91% 55%,100% 30%,100% 71%,83% 58%,70% 82%,53% 58%,35% 83%,18% 59%,0 77%)}
h1.game-title .red{color:#9c1911;text-shadow:0 0 14px rgba(140,12,7,.4),2px 3px 0 #1b0a06}
.subtitle{margin-top:27px;color:#9a9180;font:italic 12px/1 Georgia,serif;letter-spacing:.37em;text-shadow:1px 2px #000}
.menu-col{align-items:center;gap:3px;margin-top:30px}
/* Flex rather than absolute-positioned, so the tick travels with the centred
   label instead of stranding itself at the far left of the button. */
.mbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;
  min-width:310px;padding:8px 19px;border:0;border-radius:0;overflow:visible;
  color:#bdb6a6;background:transparent;box-shadow:none;font-family:"Arial Narrow","Franklin Gothic Medium",sans-serif;
  font-size:18px;font-weight:800;letter-spacing:.11em;text-shadow:1px 2px 2px #000;transform:skew(-2deg)}
.mbtn:before{content:"";flex:0 0 auto;width:13px;height:3px;background:#6d6760;transform:rotate(-8deg);
  box-shadow:4px 0 0 rgba(109,103,96,.35)}
.mbtn:hover,.mbtn:focus-visible{color:#f0e9d8;border:0;background:
  linear-gradient(90deg,rgba(139,22,14,.9),rgba(85,14,10,.55) 70%,transparent);box-shadow:none;transform:skew(-2deg) translateX(7px);outline:none}
.mbtn:hover:before,.mbtn:focus-visible:before{content:"»";top:39%;height:auto;background:none;box-shadow:none;color:#eee1c8;font-size:22px}
.mbtn.small{min-width:250px;padding:7px 18px 7px 38px;font-size:14px}
.diff-row{gap:4px;margin:9px 0 0 19px}
.diff-btn{padding:6px 11px;border:1px solid rgba(148,140,120,.2);border-radius:0;color:#6e6c64;background:rgba(0,0,0,.25);
  font:700 10px/1 "Courier New",monospace;letter-spacing:.1em}
.diff-btn:hover{color:#c5bda9;border-color:rgba(180,160,130,.42)}
.diff-btn.sel{color:#d4c8ae;background:rgba(104,18,12,.45);border-color:#6e241c;box-shadow:inset 3px 0 #9e1b12}
.best-line{margin-top:18px;color:#6f6d65;font:700 10px/1 "Courier New",monospace;letter-spacing:.12em}
.best-line b{color:#b8ad96;font-size:11px}
.controls-panel{position:fixed;right:4vw;bottom:6vh;width:350px;margin:0;padding:14px 17px 13px;
  border:0;border-top:1px solid rgba(189,175,145,.18);border-bottom:1px solid rgba(189,175,145,.1);border-radius:0;
  color:#62635e;background:linear-gradient(90deg,transparent,rgba(0,0,0,.46) 12%,rgba(0,0,0,.5));font:10px/1.45 "Courier New",monospace}
.controls-panel:before{content:"FIELD CONTROLS";grid-column:1/-1;color:#948c7b;letter-spacing:.24em;margin-bottom:5px}
.controls-panel b{color:#a49a84}

.screen:not(#title-screen){align-items:center;background:rgba(2,3,3,.66);backdrop-filter:blur(2px) saturate(.6)}
.screen:not(#title-screen):before{background:radial-gradient(ellipse at center,rgba(17,17,14,.4),rgba(0,0,0,.82))}
.panel{position:relative;width:min(570px,90vw);padding:42px 54px 38px;border:0;border-radius:0;text-align:left;
  background:linear-gradient(108deg,rgba(19,19,16,.94),rgba(7,8,7,.96));box-shadow:0 24px 90px #000,inset 0 1px rgba(219,202,165,.12);
  clip-path:polygon(1% 0,99% 1%,100% 96%,97% 100%,2% 99%,0 4%)}
.panel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#71120d;box-shadow:2px 0 15px rgba(115,18,13,.3)}
.panel h2{color:#cfc7b4;font-size:clamp(36px,5vw,58px);letter-spacing:.05em;text-shadow:2px 3px #000;transform:scaleX(.9);transform-origin:left}
.panel h2.red{color:#94170f;text-shadow:0 0 18px rgba(110,13,8,.55),2px 3px #000}
.panel .subtitle{text-align:center}
.panel .stats{margin:25px 0 10px;gap:9px 30px;border-top:1px solid rgba(200,184,151,.13);border-bottom:1px solid rgba(200,184,151,.1);padding:15px 0}
.panel .stats span{color:#77736a;font-family:"Courier New",monospace;font-size:10px}
.panel .stats b{color:#c9bea7;font-family:"Courier New",monospace}
.panel .menu-col{margin-top:20px}
.slider-row{justify-content:center;color:#77736a;font-family:"Courier New",monospace}
.slider-row input{accent-color:#81150f}

/* World-at-war-inspired minimal field HUD */
#hp-box,#zcount,#killfeed{display:none}
#round-box{left:31px;bottom:24px;filter:drop-shadow(0 3px 2px #000)}
#round-tally{font-family:"Arial Black",Impact,sans-serif;color:#84120c;font-size:53px;font-weight:900;letter-spacing:-1px;
  text-shadow:0 0 5px rgba(113,10,6,.95),2px 3px 0 #190503;transform:skew(-10deg) rotate(-5deg);opacity:.96}
#round-num{font-family:"Arial Black",Impact,sans-serif;color:#84120c;font-size:77px;font-style:italic;
  text-shadow:0 0 5px rgba(113,10,6,.95),3px 4px 0 #190503;transform:skew(-10deg) rotate(-5deg)}
#points-box{left:36px;bottom:102px;padding-left:18px}
#points-box:before{content:"";position:absolute;left:0;top:8px;width:7px;height:23px;background:#7e1711;transform:skew(-8deg);
  box-shadow:0 0 7px rgba(130,18,12,.65)}
#points{font-family:"Arial Narrow","Franklin Gothic Medium",sans-serif;font-size:29px;font-weight:800;color:#d5ccb6;letter-spacing:.035em;
  text-shadow:2px 3px 2px #000}
#points:after{content:" PVT. COLE";display:block;margin-top:-2px;color:#68675f;font:700 8px/1 "Courier New",monospace;letter-spacing:.17em}
#perks{left:34px;bottom:148px;gap:7px}
.perk-chip{width:36px;height:36px;border:1px solid rgba(203,192,165,.28);border-radius:50% 46% 43% 48%;font-size:17px;
  filter:sepia(.28) saturate(.9);box-shadow:0 2px 5px #000,inset 0 0 11px #000}
#ammo-box{right:37px;bottom:25px;min-width:215px}
#wpn-name{margin:0 2px 1px 0;color:#76736b;font:700 10px/1 "Courier New",monospace;letter-spacing:.13em}
#ammo-line{height:56px;color:#d7ceba;font-family:"Arial Narrow","Franklin Gothic Medium",sans-serif;text-shadow:2px 3px 2px #000;
  transform:skew(-3deg)}
#ammo-mag{font-size:55px;font-weight:800}
#ammo-res{font-size:25px;color:#817d73;margin-left:5px;font-weight:700}
#nade-pips{margin-top:-7px;color:#888276;font-size:12px;letter-spacing:3px}
#xhair i{background:rgba(219,216,203,.76);box-shadow:0 0 2px #000}
#xhair .dot{display:none}
#prompt{bottom:17%}
#prompt-text{position:relative;padding:6px 3px;border:0;border-radius:0;color:#d5cfbe;background:transparent;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-shadow:1px 2px 3px #000,0 0 8px #000}
#prompt-text:before{content:"[ " attr(data-key) " ]";margin-right:9px;color:#c5aa78;font-family:"Courier New",monospace}
#prompt-text .cost-no{color:#ad281e}
#prompt-bar{height:2px;background:#a28f6d;box-shadow:0 0 4px rgba(194,160,105,.45)}
#pills{top:auto;bottom:28px;gap:8px}
.pill{min-width:0;padding:5px 9px 6px;border:0;border-radius:0;color:#aaa38f;background:rgba(0,0,0,.5);font:700 10px/1 "Courier New",monospace;
  letter-spacing:.09em;box-shadow:inset 3px 0 rgba(76,157,88,.65)}
.pill.gold{color:#c0ad80;border:0;box-shadow:inset 3px 0 rgba(184,136,52,.8)}
.pill .bar{height:1px;box-shadow:none}
#banner{top:31%}
#banner-main{color:#86130c;font-size:clamp(43px,7vw,80px);font-style:italic;letter-spacing:.08em;
  text-shadow:0 0 8px rgba(122,11,6,.9),3px 4px 0 #130402;transform:skew(-8deg) rotate(-3deg)}
#banner-sub{color:#7f796d;font:700 11px/1 "Courier New",monospace;letter-spacing:.27em}
#reload-tip{top:61%;color:#aa8a4e;font:700 10px/1 "Courier New",monospace;letter-spacing:.2em}
#reload-tip:before{content:"["}#reload-tip:after{content:"]"}
#lockhint{border:0;border-left:3px solid #75130d;border-radius:0;color:#ada592;background:rgba(4,5,4,.82);font:700 11px/1 "Courier New",monospace}
#vm{filter:sepia(.08) saturate(.82) contrast(1.06)}
#vm-img{transform-origin:50% 68%}
#dmg-vignette{background:
  radial-gradient(ellipse at center,transparent 25%,rgba(98,0,0,.2) 55%,rgba(104,0,0,.78) 100%),
  linear-gradient(35deg,transparent 65%,rgba(120,0,0,.26))}