@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./vendor/font0.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./vendor/font1.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./vendor/font2.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./vendor/font3.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./vendor/font4.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./vendor/font5.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./vendor/font6.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./vendor/font7.ttf) format('truetype');
}
:root { --lime: #d3ee91; --white: #f0f1e9; --muted: #9fa99e; }
* { box-sizing: border-box; }
body { margin: 0px; overflow: hidden; background: rgb(21, 29, 32); color: var(--white); font-family: Barlow, Arial, sans-serif; }
canvas { display: block; width: 100%; height: 100%; }
#viewport { position: fixed; inset: 0px; }
.grain { pointer-events: none; position: fixed; inset: 0px; box-shadow: rgba(6, 17, 10, 0.467) 0px 0px 170px inset; background: linear-gradient(rgba(4, 20, 11, 0.15), transparent 30%, transparent 70%, rgba(3, 13, 8, 0.333)); }
#hud { position: fixed; inset: 0px; pointer-events: none; padding: 32px 38px; }
header { display: flex; align-items: flex-start; justify-content: space-between; }
.brand { display: flex; gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.brand small, .station small { display: block; font: 10px Barlow, Arial; letter-spacing: 2px; margin-top: 5px; color: rgb(198, 205, 191); }
.icon { border: 1px solid rgba(184, 201, 174, 0.467); padding: 0px 8px; font-size: 28px; color: var(--lime); }
#phase { font-size: 10px; letter-spacing: 3px; border: 1px solid rgba(223, 239, 209, 0.173); padding: 10px 17px; background: rgba(10, 24, 27, 0.267); }
.station { text-align: right; font-size: 11px; letter-spacing: 1px; }
.wave { position: absolute; top: 150px; left: 38px; }
.eyebrow, small { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.wave strong { font: 80px / 0.95 "Barlow Condensed", Impact, sans-serif; display: block; margin: 8px 0px 12px; }
#enemies { font-size: 11px; letter-spacing: 2px; color: var(--lime); }
.wavebar { height: 2px; background: rgba(207, 227, 202, 0.2); margin-top: 13px; width: 100px; }
.wavebar i { display: block; background: var(--lime); height: 100%; width: 0px; transition: width 0.3s; }
#objective { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: 0.5px; background: rgba(14, 32, 27, 0.79); border: 1px solid rgba(199, 230, 168, 0.165); padding: 12px 20px; white-space: nowrap; }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--lime); border-radius: 50%; margin-right: 10px; box-shadow: 0 0 12px var(--lime); }
footer { position: absolute; bottom: 30px; left: 38px; right: 38px; display: flex; align-items: flex-end; justify-content: space-between; }
.vitals strong { font: 44px "Barlow Condensed", Impact; }
.heart { font-size: 29px; margin-right: 12px; color: var(--lime); }
.dim { color: rgb(161, 175, 159); font-size: 14px; }
.healthbar { height: 3px; background: rgba(173, 194, 167, 0.184); width: 165px; margin-top: 7px; }
.healthbar i { display: block; background: var(--lime); height: 100%; width: 100%; }
.ammo { text-align: right; }
.ammo strong { font: 62px / 0.95 "Barlow Condensed", Impact; }
.ammo div { margin-top: 8px; }
.ammo div span { color: var(--muted); font-size: 21px; margin-left: 12px; }
.ammo b { font-weight: 400; }
.ammo label { position: absolute; right: 0px; bottom: 90px; font-size: 12px; color: var(--lime); }
.controls { font-size: 10px; letter-spacing: 1px; color: rgba(238, 241, 220, 0.69); }
.controls span { color: rgb(177, 189, 174); letter-spacing: 0px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); }
#crosshair i { position: absolute; background: rgba(238, 255, 217, 0.85); }
#crosshair i:nth-child(1) { width: 2px; height: 6px; top: 0px; left: 14px; }
#crosshair i:nth-child(2) { width: 2px; height: 6px; bottom: 0px; left: 14px; }
#crosshair i:nth-child(3) { height: 2px; width: 6px; top: 14px; left: 0px; }
#crosshair i:nth-child(4) { height: 2px; width: 6px; top: 14px; right: 0px; }
#crosshair b { position: absolute; width: 2px; height: 2px; background: var(--lime); left: 14px; top: 14px; }
#hit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 42px; color: rgb(255, 255, 255); opacity: 0; }
#notice { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-size: 14px; letter-spacing: 2px; color: var(--lime); text-align: center; }
#damage { position: fixed; inset: 0px; pointer-events: none; box-shadow: rgb(230, 50, 35) 0px 0px 140px inset; opacity: 0; }
#overlay { position: fixed; inset: 0px; background: linear-gradient(90deg, rgba(7, 23, 21, 0.937) 0%, rgba(10, 24, 26, 0.796) 40%, rgba(6, 18, 20, 0.208) 80%); display: flex; align-items: center; padding: 6vw; }
.intro { width: min(780px, 80vw); }
.tag { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 2px; padding-bottom: 18px; border-bottom: 1px solid rgba(172, 190, 169, 0.267); max-width: 620px; color: rgb(186, 201, 179); }
.tag span { color: var(--lime); }
.kicker { font-size: 11px; letter-spacing: 2px; color: var(--lime); margin-top: 44px; }
h1 { font: 800 clamp(55px, 8vw, 115px) / 0.88 "Barlow Condensed", Impact, sans-serif; letter-spacing: -2px; margin: 24px 0px; }
h1 > span { display: block; color: var(--lime); }
.period { color: rgb(229, 142, 88); }
.description { font-size: 16px; line-height: 1.6; color: rgb(183, 196, 186); margin: 26px 0px; }
.intro-bottom { display: flex; align-items: center; gap: 25px; margin-top: 32px; }
button { border: 0px; background: var(--lime); color: rgb(20, 36, 30); padding: 20px 25px; font: 700 13px Barlow, Arial; letter-spacing: 1px; cursor: pointer; min-width: 235px; display: flex; justify-content: space-between; gap: 40px; }
button:hover { background: rgb(231, 255, 181); transform: translateY(-1px); }
.hint { font-size: 9px; line-height: 1.8; letter-spacing: 1px; color: rgb(154, 169, 151); }
.keys { display: flex; gap: 30px; margin-top: 34px; border-top: 1px solid rgba(159, 180, 151, 0.2); padding-top: 20px; font-size: 10px; color: rgb(213, 223, 204); letter-spacing: 1px; }
.keys em { display: block; font-size: 10px; color: rgb(142, 159, 146); font-style: normal; margin-top: 6px; letter-spacing: 0px; }
#status { font-size: 10px; color: rgb(154, 169, 151); margin-top: 18px; }
.edition { position: absolute; right: 6vw; bottom: 6vh; font: 120px / 1 "Barlow Condensed", Impact; color: rgb(219, 239, 195); }
.edition span { display: block; font: 10px / 1.7 Barlow, Arial; letter-spacing: 3px; border-top: 1px solid rgba(180, 208, 148, 0.4); padding-top: 15px; }
body.playing #overlay { display: none; }
body:not(.playing) #hud { opacity: 0.25; }
body:not(.playing) #crosshair { display: none; }
@media (max-width: 800px) {
  #hud { padding: 20px; }
  .station, .controls, .edition { display: none; }
  .brand { font-size: 15px; }
  #phase { font-size: 8px; }
  .wave { left: 20px; top: 120px; }
  footer { left: 20px; right: 20px; }
  .intro { width: 90vw; }
  .keys { gap: 14px; }
  .hint { display: none; }
  .kicker { margin-top: 25px; }
  .description { font-size: 14px; }
  #objective { top: 85px; font-size: 11px; }
  h1 { font-size: 70px; }
}
/* Rain edition: daylight HUD, more open view of the rebuilt city. */
:root{--lime:#bfdbd9;--white:#edf1ef;--muted:#b0c0c4}.grain{box-shadow:inset 0 0 140px #09121933;background:linear-gradient(180deg,#13232e22,transparent 28%,transparent 75%,#07151e44)}#overlay{background:linear-gradient(90deg,#09161cee 0%,#0b1822b5 38%,#11202b12 78%)}.period{color:#cca57d}#phase{background:#192b33a6}#objective{background:#122832a3;border-color:#c5e0e92a}.wave{top:140px}.wave strong{font-size:66px}.brand{font-size:18px}#hud{padding:28px 32px}.ammo strong{font-size:54px}.description{color:#bdcbd0}.kicker{color:#bdd9df}.icon{color:#c5dfe2}.intro .tag{color:#c0cdd1}.intro h1{font-size:clamp(60px,7.5vw,112px)}body.playing .controls{opacity:.65}#status{line-height:1.6}