* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; overflow:hidden; font-family:'Courier New',monospace; color:#fff; }
canvas { position:fixed; top:0; left:0; z-index:1; cursor:crosshair; }

#hud { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10; }

/* ── HP ── */
#hp-wrap  { position:absolute; bottom:90px; left:28px; }
#hp-label { font-size:13px; margin-bottom:3px; text-shadow:0 0 4px #000; }
#hp-track { width:200px; height:14px; background:rgba(0,0,0,.6); border:1px solid #666; border-radius:3px; overflow:hidden; }
#hp-fill  { height:100%; background:#27ae60; transition:width .15s, background .3s; }

/* ── Stamina ── */
#sta-wrap  { position:absolute; bottom:62px; left:28px; }
#sta-label { font-size:12px; margin-bottom:3px; letter-spacing:.5px; text-shadow:0 0 4px #000; }
#sta-track { width:200px; height:10px; background:rgba(0,0,0,.6); border:1px solid #666; border-radius:3px; overflow:hidden; }
#sta-fill  { height:100%; width:100%; background:#f39c12; transition:width .1s, background .25s; }

/* ── Ammo ── */
#ammo-wrap  { position:absolute; bottom:36px; left:28px; }
#ammo-label { font-size:12px; margin-bottom:2px; letter-spacing:.5px; text-shadow:0 0 4px #000; }
#ammo-count { font-size:14px; font-weight:bold; letter-spacing:1px; text-shadow:0 0 5px #000; color:#f0e68c; }

/* ── Zone bars (3 stacked, bottom-right) ── */
#zones-hud { position:absolute; bottom:28px; right:28px; width:200px; }
.zrow      { margin-bottom:6px; }
.zlabel    { font-size:12px; margin-bottom:2px; text-shadow:0 0 4px #000; }
.ztrack    { width:200px; height:11px; background:rgba(0,0,0,.6); border:1px solid #666; border-radius:3px; overflow:hidden; }
.zfill     { height:100%; width:0; background:#ffffff; transition:width .2s, background .4s; }

/* ── Kill/Death/Points HUD ── */
#kd-hud {
  position:absolute; top:248px; left:16px; width:160px;
  font-size:13px; background:rgba(0,0,0,.62); padding:3px 10px;
  border-radius:4px; border:1px solid #555; letter-spacing:1px;
  text-align:center; box-sizing:border-box; white-space:nowrap;
}

/* ── Reticle ── */
#reticle { position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
#r-t,#r-b { position:absolute; width:2px; background:rgba(255,255,255,.92); box-shadow:0 0 3px rgba(0,0,0,.9); }
#r-l,#r-r { position:absolute; height:2px; background:rgba(255,255,255,.92); box-shadow:0 0 3px rgba(0,0,0,.9); }
#r-d { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.92);
       top:-1.5px; left:-1.5px; box-shadow:0 0 4px rgba(0,0,0,.9); }


/* ── Respawn countdown ── */
#respawn-hud {
  display:none; position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:rgba(180,0,0,.8); padding:6px 20px; border-radius:6px;
  font-size:14px; letter-spacing:.5px; border:1px solid #f55;
}
#ally-respawn-hud {
  display:none; position:absolute; top:48px; left:50%; transform:translateX(-50%);
  background:rgba(0,140,60,.85); padding:6px 20px; border-radius:6px;
  font-size:14px; letter-spacing:.5px; border:1px solid #4f4;
}

/* ── Player death / respawn overlay ── */
#player-respawn {
  display:none; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center; pointer-events:none;
}
#player-respawn .died  { font-size:38px; color:#e74c3c; text-shadow:0 0 16px #e74c3c; margin-bottom:10px; }
#player-respawn .timer { font-size:22px; color:#fff; }

/* ── Aim hint ── */
#aim-hint {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:13px; background:rgba(0,0,0,.6); padding:5px 14px;
  border-radius:4px; border:1px solid #666; letter-spacing:.5px;
}

/* ── Hit flinch ── */
@keyframes screen-flinch {
  0%   { transform: translate(0,0) rotate(0deg); }
  18%  { transform: translate(-7px, 5px) rotate(-0.6deg); }
  38%  { transform: translate(5px, -4px) rotate(0.5deg); }
  58%  { transform: translate(-3px, 2px) rotate(-0.25deg); }
  78%  { transform: translate(2px, -1px) rotate(0.1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
body.flinching { animation: screen-flinch 0.22s ease-out forwards; }

/* ── HUD / NO HUD setting ── */
body.no-hud .hud-toggleable { display: none !important; }

/* ── Blood overlay ── */
#blood-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 25; opacity: 0;
  background:
    radial-gradient(ellipse at top    left,  rgba(100,0,0,0.85) 0%, transparent 45%),
    radial-gradient(ellipse at top    right, rgba(100,0,0,0.85) 0%, transparent 45%),
    radial-gradient(ellipse at bottom left,  rgba(100,0,0,0.85) 0%, transparent 45%),
    radial-gradient(ellipse at bottom right, rgba(100,0,0,0.85) 0%, transparent 45%),
    radial-gradient(ellipse at center, transparent 50%, rgba(80,0,0,0.70) 100%);
}

/* ── Win screen ── */
#win-screen {
  display:none; position:absolute; inset:0;
  background:rgba(0,0,0,.75);
  flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
}
#win-screen h1 { font-size:52px; color:#ffd700; text-shadow:0 0 24px #ffd700; }
#win-screen p  { font-size:22px; color:#fff; }

/* ── Lose screen ── */
#lose-screen {
  display:none; position:absolute; inset:0;
  background:rgba(0,0,0,.75);
  flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
}
#lose-screen h1 { font-size:52px; color:#ff3333; text-shadow:0 0 24px #ff3333; }
#lose-screen p  { font-size:22px; color:#fff; }

/* ── Minimap ── */
#minimap {
  position:absolute; top:50px; left:16px;
  border:1px solid #555; border-radius:4px;
  image-rendering:pixelated;
}

/* ── Enemy HP bars ── */
.ehp-wrap {
  position:fixed; width:52px; height:5px;
  background:rgba(0,0,0,.65); border:1px solid #555; border-radius:2px;
  transform:translateX(-50%); pointer-events:none; z-index:15; display:none;
}
.ehp-fill { height:100%; background:#cc2200; border-radius:2px; transition:width .08s; }

/* ── Bayonet HUD ── */
#bayonet-hud {
  display:none; position:absolute; bottom:56px; right:16px;
  font-size:13px; font-family:monospace; background:rgba(0,0,0,.72);
  padding:4px 12px; border-radius:4px; border:1px solid #888;
  letter-spacing:1px; white-space:nowrap;
}
#artillery-hud {
  display:none; position:absolute; top:22%; left:50%; transform:translateX(-50%);
  font-size:19px; font-family:monospace; background:rgba(70,0,0,.88);
  padding:10px 26px; border-radius:6px; border:2px solid #ff4400;
  color:#ff6622; letter-spacing:1px; white-space:nowrap; text-align:center;
}
#bayonet-fix-hud {
  display:none; position:absolute; bottom:56px; right:16px;
  font-size:13px; font-family:monospace; background:rgba(0,0,0,.72);
  padding:4px 12px; border-radius:4px; border:1px solid #888;
  color:#ffcc44; letter-spacing:1px; white-space:nowrap;
}

/* ── Machine Gun HUD ── */
#mg-prompt {
  display:none; position:absolute; bottom:160px; left:50%; transform:translateX(-50%);
  font-size:15px; background:rgba(0,0,0,.78); padding:6px 20px;
  border-radius:5px; border:1px solid #aaa; letter-spacing:.5px; white-space:nowrap;
}
#mg-hud {
  display:none; position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  font-size:16px; font-family:monospace; background:rgba(0,0,0,.78); padding:7px 22px;
  border-radius:5px; border:1px solid #666; letter-spacing:1px; white-space:nowrap;
  text-align:center;
}

/* ── Day/night HUD ── */
#daytime-hud {
  position:absolute; top:218px; left:16px;
  font-size:12px; background:rgba(0,0,0,.62); padding:3px 10px;
  border-radius:4px; border:1px solid #555; letter-spacing:1px; white-space:nowrap;
  text-align:center; width:160px; box-sizing:border-box;
}
#weather-display { color:#88ccdd; }

/* ── Loading screen ── */
#loading-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.96);
  background-size: cover;
  background-position: center;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: all;
}
#loading-screen.faction-british {
  background-image:
    linear-gradient(rgba(10,8,5,.3), rgba(10,8,5,.5)),
    url("../Screen Pics/British Empire Loading Page.png");
}
#loading-screen.faction-german {
  background-image:
    linear-gradient(rgba(10,8,5,.3), rgba(10,8,5,.5)),
    url("../Screen Pics/German Empire Loading Page.png");
}
#loading-screen h2 {
  font-size: 22px;
  color: #b8a070;
  letter-spacing: 6px;
  text-shadow: 0 0 12px rgba(180,140,80,0.4);
}
#loading-bar-wrap {
  width: 320px;
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
#loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7a5c2a, #c8a060);
  transition: width 0.25s ease;
}

/* ── Main menu ── */
#main-menu {
  position: fixed; inset: 0; z-index: 500;
  overflow: hidden;
  background: #14120d;
  font-family: 'Special Elite', 'Courier New', monospace;
  color: #e7dfcb;
  pointer-events: all;
}
.menu-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(125% 95% at 72% 18%, rgba(59,55,39,.32) 0%, rgba(33,30,21,.42) 52%, rgba(16,15,10,.58) 100%),
    url("../Screen Pics/Main Menu Page.png");
  background-size: auto, cover;
  background-position: center, center;
}
.menu-fog { position: absolute; left: -12%; right: -12%; pointer-events: none; filter: blur(10px); }
.menu-fog-1 { top: 34%; height: 62%; opacity: .55; background: radial-gradient(58% 100% at 50% 100%, rgba(168,166,142,.20), transparent 72%); animation: fogDrift 28s ease-in-out infinite alternate; }
.menu-fog-2 { top: 48%; height: 52%; opacity: .4; filter: blur(14px); background: radial-gradient(50% 100% at 40% 100%, rgba(150,150,128,.18), transparent 70%); animation: fogDrift 38s ease-in-out infinite alternate-reverse; }
.menu-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(135% 105% at 28% 28%, transparent 28%, rgba(8,8,5,.55) 100%),
    linear-gradient(90deg, rgba(8,8,5,.88) 0%, rgba(8,8,5,.52) 40%, transparent 72%),
    linear-gradient(0deg, rgba(8,8,5,.92) 0%, transparent 42%);
}
.menu-grain {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift .7s steps(3) infinite;
}
@keyframes fogDrift { 0% { transform: translateX(-6%) translateY(0); } 100% { transform: translateX(6%) translateY(-2%); } }
@keyframes grainShift { 0% { background-position: 0 0; } 100% { background-position: 120px 80px; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: translateX(0); } }

.menu-stage {
  position: relative; z-index: 4; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.menu-content {
  width: min(560px,86vw);
  transition: transform .55s cubic-bezier(.7,0,.2,1);
}
.menu-stage.shifted .menu-content { transform: translateX(-22vw); }
.menu-h1 {
  margin: 0; font-weight: 700; font-size: clamp(46px,5.6vw,80px); line-height: .96;
  letter-spacing: .5px; text-transform: uppercase; text-align: center;
  color: #efe7d2; text-shadow: 0 3px 24px rgba(0,0,0,.6);
  animation: fadeUp .7s .12s both;
}
.menu-nav { display: flex; flex-direction: column; width: min(400px,86vw); margin: 30px auto 0; animation: fadeUp .7s .28s both; }
.menu-row {
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 13px 16px; cursor: pointer;
  border-top: 1px solid rgba(231,223,203,.12);
  color: #cfc7b0; font-size: clamp(18px,2vw,23px); letter-spacing: 2px;
  text-transform: uppercase; font-weight: 500;
  transition: background .15s, color .15s;
}
.menu-row-last { border-bottom: 1px solid rgba(231,223,203,.12); }
.menu-row:hover, .menu-row.active { background: rgba(180,84,43,.10); color: #efe7d2; }
.menu-row-bar { position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; background: #b4542b; opacity: 0; }
.menu-row.active .menu-row-bar { opacity: 1; }
.menu-idx { font-family: 'Cutive Mono', monospace; font-size: 12px; color: #6f6a58; width: 24px; }
.menu-label { flex: 1; }

.menu-factions { display: none; flex-direction: column; gap: 10px; padding: 14px 0 16px; }
.menu-factions.open { display: flex; animation: fadeUp .25s both; }
.faction-card {
  position: relative; cursor: pointer; border: 1px solid #3a3a2c;
  background: linear-gradient(#26261c,#1a1a12); padding: 15px;
  transition: border-color .15s, transform .15s;
}
.faction-card:hover { transform: translateY(-2px); }
#card-british:hover { border-color: #9a8748; }
#card-german:hover { border-color: #6a6f60; }
.faction-sel { display: none; position: absolute; inset: 0; border: 2px solid #b4542b; pointer-events: none; }
.faction-card.selected .faction-sel { display: block; }
.faction-name { display: flex; align-items: center; gap: 12px; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: #e7dfcb; }
.faction-flag { flex: none; width: 32px; height: 20px; object-fit: cover; border: 1px solid rgba(231,223,203,.35); box-shadow: 0 1px 4px rgba(0,0,0,.4); }

.menu-panel-side {
  display: none; position: absolute; top: 0; right: 0; height: 100%; width: min(640px,52%); z-index: 8;
  background:
    linear-gradient(rgba(35,35,26,.4),rgba(22,22,15,.45)),
    url("../Screen Pics/Sub Menu page.png");
  background-size: cover; background-position: center;
  border-left: 3px solid #b4542b;
  box-shadow: -34px 0 70px rgba(0,0,0,.55); flex-direction: column;
}
.menu-panel-side.open { display: flex; animation: slideIn .3s ease both; }
.panel-head {
  padding: 30px 36px 20px; border-bottom: 1px solid rgba(231,223,203,.12);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.panel-kicker { font-size: 12px; letter-spacing: 5px; color: #b4542b; text-transform: uppercase; font-family: 'Cutive Mono', monospace; }
.panel-title2 { font-size: clamp(26px,3vw,36px); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #efe7d2; margin-top: 6px; line-height: 1; }
.panel-close {
  flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #3a3a2c; color: #a39c86; cursor: pointer; font-size: 16px; transition: all .15s;
}
.panel-close:hover { border-color: #b4542b; color: #efe7d2; }
.panel-body { flex: 1; overflow-y: auto; padding: 24px 36px 40px; }

.panel-prose { max-width: 540px; }
.panel-prose p { font-size: 14px; line-height: 1.8; color: #bdb6a1; margin: 0 0 18px; text-align: justify; }

.panel-list-item { border: 1px solid #34342a; background: #1d1d15; padding: 16px 18px; display: flex; gap: 16px; margin-bottom: 13px; }
.panel-badge {
  flex: none; min-width: 56px; height: fit-content; text-align: center; padding: 5px 8px;
  background: #100f0a; border: 1px solid #3a3a2c; font-family: 'Cutive Mono', monospace;
  font-size: 11px; letter-spacing: 1px; color: #b4542b;
}
.panel-item-title { font-size: 18px; letter-spacing: .5px; text-transform: uppercase; color: #efe7d2; margin-bottom: 5px; }
.panel-item-text { font-size: 14px; line-height: 1.6; color: #aaa28c; }

.ctrl-row2 { display: flex; align-items: center; gap: 15px; margin-bottom: 9px; }
.ctrl-key2 {
  flex: none; min-width: 88px; text-align: center; padding: 8px 12px; background: #26261c;
  border: 1px solid #4a4a3a; border-bottom: 3px solid #14120d; font-family: 'Cutive Mono', monospace;
  font-size: 13px; letter-spacing: 1px; color: #e7dfcb;
}
.ctrl-action { font-size: 15px; color: #bdb6a1; }

.faction-order { margin-bottom: 26px; }
.faction-order p { font-family: 'Cutive Mono', monospace; font-size: 14px; line-height: 1.85; color: #cfc7b0; margin: 0 0 16px; text-align: justify; }
.faction-deploy {
  text-align: center; background: #b4542b; color: #14120d; font-weight: 700; font-size: 16px;
  letter-spacing: 4px; text-transform: uppercase; padding: 16px; cursor: pointer; transition: background .15s;
}
.faction-deploy:hover { background: #c9612f; }

.disclaimer-note {
  border-left: 3px solid #b4542b; background: #1d1d15; padding: 16px 18px; margin-bottom: 22px;
  font-family: 'Cutive Mono', monospace; font-size: 14px; line-height: 1.75; color: #cfc7b0;
}
.disclaimer-lead { color: #efe7d2; font-size: 19px; margin-bottom: 18px; letter-spacing: .5px; font-family: 'Cutive Mono', monospace; }
.disclaimer-paras { font-family: 'Cutive Mono', monospace; color: #bdb6a1; font-size: 14px; line-height: 1.85; max-width: 520px; }
.disclaimer-paras p { margin: 0 0 16px; }

.settings-row { margin-bottom: 28px; max-width: 480px; }
.settings-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.settings-label { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #e7dfcb; }
.settings-value { font-family: 'Cutive Mono', monospace; font-size: 12px; color: #b4542b; }
.settings-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: #34342a; border: 1px solid #3a3a2c; cursor: pointer; outline: none;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #b4542b; border: 1px solid #14120d; cursor: pointer;
}
.settings-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #b4542b; border: 1px solid #14120d; cursor: pointer;
}
.settings-toggle { display: flex; border: 1px solid #3a3a2c; width: fit-content; }
.settings-toggle-opt {
  padding: 9px 20px; cursor: pointer; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: #a39c86; transition: background .15s, color .15s;
}
.settings-toggle-opt + .settings-toggle-opt { border-left: 1px solid #3a3a2c; }
.settings-toggle-opt:hover { color: #efe7d2; }
.settings-toggle-opt.active { background: #b4542b; color: #14120d; }