:root {
  --red: #c8141e;
  --red-glow: rgba(255, 40, 40, 0.55);
  --ink: #f2efe9;
  --muted: #b9b3a8;
  --panel: rgba(12, 12, 14, 0.72);
  --green: #3fd07a;
  --head: Impact, Haettenschweiler, "Arial Narrow Bold", "Oswald", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0c0e; color: var(--ink); font-family: var(--body); }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(10, 12, 14, 0.45) 0%, rgba(5, 6, 8, 0.88) 75%);
  z-index: 20;
}
#loading { background: #07080a; }
.brand .kicker { letter-spacing: .18em; text-transform: uppercase; font-size: 13px; color: var(--muted); }
.brand h1 {
  font-family: var(--head); font-weight: 400; font-size: clamp(48px, 10vw, 128px); line-height: .9; margin: 10px 0 0;
  letter-spacing: .02em; color: #e8f5ea;
  text-shadow: 0 0 24px rgba(63, 208, 122, .35), 0 4px 0 #0b3d22;
}
.brand .sub {
  font-family: var(--head); color: var(--red); font-size: clamp(28px, 5vw, 54px); letter-spacing: .3em;
  text-transform: uppercase; text-shadow: 0 0 18px var(--red-glow); margin-top: 4px;
}
.lede { max-width: 560px; color: var(--muted); line-height: 1.5; margin: 0; }
.btn {
  font-family: var(--head); font-size: 26px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--red); border: 0; padding: 12px 56px; cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 10px 30px rgba(200, 20, 30, .35);
}
.btn:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); font-size: 18px; padding: 8px 32px; }
.settings { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; color: var(--muted); font-size: 14px; }
.settings label { display: flex; align-items: center; gap: 8px; }
.settings select { background: #1b1d21; color: var(--ink); border: 1px solid #333; padding: 4px 6px; }
.credits { font-size: 11px; color: #6f6a62; padding: 0 16px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: #8f897f; text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }
.credits-full { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(760px, 92vw); max-height: 50vh; overflow-y: auto; z-index: 30;
  background: rgba(10, 12, 14, .96); border: 1px solid #2c3036; border-radius: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.55; color: #a39d93; text-align: left; }
/* the menu: only what you can do, in the middle when it fits, scrolling when it doesn't */
#menu { justify-content: flex-start; overflow-y: auto; }
#menu > :first-child { margin-top: auto; }
#menu > .credits { margin-top: auto; padding: 6px 0 0; flex-shrink: 0; }
#menu:not(.hidden) > * { animation: gdUp .5s ease both; }
#menu:not(.hidden) > :nth-child(2) { animation-delay: .06s; }
#menu:not(.hidden) > :nth-child(3) { animation-delay: .12s; }
#menu:not(.hidden) > :nth-child(4) { animation-delay: .18s; }
#menu:not(.hidden) > :nth-child(n+5) { animation-delay: .24s; }
/* the intro: the title comes in on the loading screen, then the screen fades into the menu */
#loading .brand h1 { animation: gdTitle 1.3s cubic-bezier(.2, .7, .2, 1) both; }
#loading .brand .kicker { animation: gdUp .8s .2s ease both; }
#loading .brand .sub { animation: gdFlicker 1.1s .9s linear both; }
#loading .brand .lede { margin-top: 16px; animation: gdUp .9s 1.5s ease both; }
#loading { overflow: hidden; transition: opacity .6s ease; }
#loading.out { opacity: 0; pointer-events: none; }
#load-bar, #load-text { transition: opacity .4s ease; }
#loading.done #load-bar, #loading.done #load-text { opacity: 0; }
@keyframes gdTitle { from { opacity: 0; transform: scale(1.18); filter: blur(12px); letter-spacing: .1em; } to { opacity: 1; transform: none; filter: none; letter-spacing: .02em; } }
@keyframes gdUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gdFlicker { 0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: .1; } 20% { opacity: 1; } 26% { opacity: .35; } 38%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #loading .brand *, #menu:not(.hidden) > * { animation: none !important; } }
#load-bar { width: min(420px, 80vw); height: 4px; background: #1d1f23; overflow: hidden; }
#load-fill { height: 100%; width: 0%; background: var(--red); transition: width .15s linear; }
#load-text { color: var(--muted); font-size: 13px; min-height: 18px; }
#pause h2, #gameover h2 { font-family: var(--head); font-weight: 400; font-size: 72px; margin: 0; color: var(--red); text-shadow: 0 0 20px var(--red-glow); letter-spacing: .05em; }
#go-stats { display: grid; grid-template-columns: auto auto; gap: 6px 28px; font-size: 18px; color: var(--ink); }
#go-stats span:nth-child(odd) { color: var(--muted); text-align: right; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--head); }
#scope { position: absolute; inset: 0; opacity: 0; transition: opacity .08s; pointer-events: none;
  background: radial-gradient(circle at center, transparent 0, transparent 34vmin, rgba(0,0,0,.92) 34.4vmin, #000 36vmin); }
#scope.on { opacity: 1; }
#scope .lens { position: absolute; left: 50%; top: 50%; width: 68vmin; height: 68vmin; transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: inset 0 0 6vmin rgba(0,0,0,.65); }
#scope i { position: absolute; background: rgba(10,10,10,.9); }
#scope .h { left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%); }
#scope .v { top: 50%; bottom: 0; left: 50%; width: 1.5px; margin-left: -0.75px; }
#scope .chev { left: 50%; top: 50%; width: 12px; height: 12px; margin: -1px 0 0 -6px; background: none; border-left: 2px solid #111; border-top: 2px solid #111; transform: rotate(45deg); }
#scope .c2 { margin-top: 18px; transform: rotate(45deg) scale(.8); }
#scope .c3 { margin-top: 34px; transform: rotate(45deg) scale(.65); }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: rgba(255,255,255,.9); box-shadow: 0 0 2px rgba(0,0,0,.9); }
#crosshair .t, #crosshair .b { width: 2px; height: 9px; left: -1px; }
#crosshair .l, #crosshair .r { width: 9px; height: 2px; top: -1px; }
#crosshair.ads { opacity: 0; }
#hud.driving #crosshair, #hud.driving #scope, #hud.driving #hitmarker, #hud.driving #slots, #hud.driving #ammo, #hud.driving #nades { display: none; }
/* the chase camera puts the vehicle mid-screen: keep text off it */
#hud.driving #prompt { top: auto; bottom: 128px; }
#hud.driving #notice { top: 16%; }
#hitmarker {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0;
  background:
    linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%) center/100% 100% no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
          mask: radial-gradient(circle, transparent 5px, #000 6px);
}
#hitmarker::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
}
#hitmarker.kill, #hitmarker.kill::after { filter: drop-shadow(0 0 2px #f22) sepia(1) saturate(20) hue-rotate(-50deg); }
#damage { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(150, 0, 0, .75) 100%); }
#lowhp { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(90, 0, 0, .9) 100%); transition: opacity .4s; }
#wave {
  position: absolute; left: 34px; bottom: 26px; font-size: 96px; line-height: 1; color: #a3050c;
  text-shadow: 0 0 14px rgba(180, 0, 0, .8), 2px 2px 0 #300; letter-spacing: .02em;
}
#wave.flash { animation: waveflash 2.4s ease-in-out; }
@keyframes waveflash { 0%, 100% { color: #a3050c; } 20%, 60% { color: #fff; text-shadow: 0 0 30px #fff; } }
#points { position: absolute; right: 36px; bottom: 150px; font-size: 34px; color: #f2d36b; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.6); }
#feed { position: absolute; right: 36px; bottom: 190px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
#feed .pts { font-size: 22px; color: #f2d36b; text-shadow: 0 2px 0 #000; animation: ptsfly 1.1s ease-out forwards; }
#feed .pts.neg { color: #ff5a5a; }
@keyframes ptsfly { 0% { opacity: 0; transform: translateX(20px); } 15% { opacity: 1; transform: translateX(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
#health { position: absolute; left: 36px; bottom: 136px; width: 220px; height: 8px; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
#health-bar { height: 100%; width: 100%; background: linear-gradient(90deg, #d8d2c4, #fff); transition: width .15s; }
#health.low #health-bar { background: linear-gradient(90deg, #7a0000, #e11); }
#health { transition: width .4s; }
#health.armoured { box-shadow: 0 0 0 1px rgba(120,180,255,.55), 0 0 8px rgba(90,160,255,.35); }
#health.armoured #health-bar { background: linear-gradient(90deg, #8fb4e8, #e8f1ff); }
#health.armoured.low #health-bar { background: linear-gradient(90deg, #7a0000, #e11); }
#health::after { content: attr(data-armour); position: absolute; left: 0; top: -15px; font-size: 11px; letter-spacing: 3px; color: #9cc3ff; text-shadow: 0 1px 2px #000; }
#ammo-name.upgraded { color: #ffd36b; }
#ammo { position: absolute; right: 36px; bottom: 26px; display: flex; align-items: baseline; gap: 10px; text-shadow: 0 2px 0 #000; }
#ammo-name { font-family: var(--body); font-size: 14px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
#ammo-mag { font-size: 64px; color: #fff; }
#ammo-mag.low { color: #ff4a4a; }
#ammo-res { font-size: 30px; color: var(--muted); }
#slots { position: absolute; right: 36px; bottom: 104px; display: flex; gap: 10px; font: 12px/1 var(--body); letter-spacing: .04em; }
#slots span { color: rgba(255,255,255,.28); text-shadow: 0 1px 2px #000; }
#slots span.own { color: rgba(255,255,255,.7); }
#slots span.cur { color: #f2d36b; }
#slots b { display: inline-block; margin-right: 4px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,.12); color: inherit; }
#notice { position: absolute; left: 50%; top: 68%; transform: translateX(-50%); font: 15px var(--body); color: #fff; background: rgba(0,0,0,.5);
  padding: 6px 14px; border-radius: 3px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
#notice.on { opacity: 1; }
#prompt {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-family: var(--body); font-size: 17px;
  color: #fff; background: rgba(0,0,0,.45); padding: 6px 14px; border-radius: 3px; opacity: 0; transition: opacity .12s; white-space: nowrap;
}
#prompt.on { opacity: 1; }
#prompt b { color: #f2d36b; }
#banner {
  position: absolute; left: 0; right: 0; top: 26%; text-align: center; font-size: 64px; color: #fff; opacity: 0;
  text-shadow: 0 0 22px rgba(200, 0, 0, .9), 0 3px 0 #300; letter-spacing: .06em;
}
#banner.on { animation: banner 3.2s ease-in-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(1.15); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
#banner small { display: block; font-family: var(--body); font-size: 16px; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; margin-top: 6px; }
#minimap {
  position: absolute; left: 30px; top: 26px; width: 180px; height: 180px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.5); opacity: .92;
}
/* the big map (M): the level in vectors, north up, with its names */
#bigmap { position: fixed; inset: 0; z-index: 13; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 8, .45); pointer-events: none; }
#bigmap.hidden { display: none; }
body.touch #bigmap { pointer-events: auto; }
#bigmap .wrap { display: flex; align-items: center; gap: 14px; }
#bigmap .frame { position: relative; width: min(calc(92vh * var(--ar)), calc(94vw - 190px)); aspect-ratio: var(--ar); border-radius: 10px; overflow: hidden; background: #1d231c;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 18px 60px rgba(0, 0, 0, .6); }
#bigmap svg { display: block; width: 100%; height: 100%; }
#bigmap .ground { fill: #1d231c; }
#bigmap .streets path { fill: none; stroke: #3c3f44; stroke-linecap: round; stroke-linejoin: round; }
#bigmap .play { fill: #283026; }
#bigmap .road { fill: #4b4e53; } #bigmap .pavers { fill: #6f6d67; } #bigmap .lawn { fill: #3b5b34; } #bigmap .deck { fill: #bab3a2; }
#bigmap .pools path { fill: #2f97c9; stroke: #c4e9f7; stroke-width: .4; }
#bigmap .courts .round { fill: #a6493b; stroke: #2f5a3a; stroke-width: .6; } #bigmap .courts .pad { fill: #d66d8a; }
#bigmap .under path { fill: none; stroke: rgba(25, 29, 35, .85); stroke-width: .6; stroke-dasharray: 2 1.6; }
#bigmap .blds path { fill: #dcd8cf; stroke: #8d887e; stroke-width: .35; }
#bigmap .blds .podium { fill: #a49d8e; } #bigmap .blds .tower { fill: #cfcac0; } #bigmap .blds .guard, #bigmap .blds .small { fill: #c6c1b6; }
#bigmap .blds .out { fill: #6a6a68; stroke: none; }
#bigmap .park rect { fill: #2f6db3; stroke: #fff; stroke-width: .4; }
#bigmap .park text { font: 800 4px var(--body); fill: #fff; text-anchor: middle; }
#bigmap .labels text { font-family: var(--body); paint-order: stroke; stroke: rgba(12, 14, 16, .88); stroke-linejoin: round; }
#bigmap .blk { font-size: 6.4px; font-weight: 800; fill: #fff; stroke-width: 1.3px; text-anchor: middle; }
#bigmap .blk.prov { font-style: italic; fill: #ffe7a8; }
#bigmap .shop { font-size: 3.7px; font-weight: 700; fill: #ffd28a; stroke-width: .9px; text-anchor: middle; }
#bigmap .gate { font-size: 4.4px; font-weight: 800; fill: #7ff0a8; stroke-width: 1px; letter-spacing: .2px; text-anchor: middle; }
#bigmap .street { font-size: 3.9px; font-weight: 600; fill: #d2ccc0; stroke-width: .8px; letter-spacing: .3px; }
#bigmap .tagl { font-size: 3.1px; font-weight: 600; fill: #ffe2b8; stroke-width: .8px; text-anchor: middle; }
#bigmap .dyn circle { stroke: rgba(0, 0, 0, .55); stroke-width: .35; }
#bigmap .dyn .st { stroke: #3a2508; stroke-width: .5; }
#bigmap .dyn .stairs { fill: #eef3f6; stroke: rgba(0, 0, 0, .6); stroke-width: .35; }
#bigmap .dyn path { stroke: rgba(0, 0, 0, .7); stroke-width: .5; stroke-linejoin: round; }
#bigmap .north path { fill: #fff; } #bigmap .north text { font: 800 4.5px var(--body); fill: #fff; text-anchor: middle; }
#bigmap .scale path { fill: none; stroke: #fff; stroke-width: .5; } #bigmap .scale text { font: 600 3.4px var(--body); fill: #fff; text-anchor: middle; }
#bigmap .legend { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; width: max-content; border-radius: 9px;
  background: rgba(8, 10, 12, .84); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); font: 13px var(--body); color: #ddd6c8; }
#bigmap .legend span { display: inline-flex; align-items: center; gap: 5px; }
#bigmap .legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
#bigmap .legend svg.ic { width: 16px; height: 16px; flex: none; }
#bigmap .legend i.arrow { width: 0; height: 0; border-radius: 0; box-shadow: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 11px solid #fff; }
#bigmap .legend b { background: #2f6db3; color: #fff; font-size: 10px; padding: 0 4px; border-radius: 2px; }
#bigmap .legend em { margin-top: 4px; font-style: normal; color: #8f897f; font-size: 12px; }
@media (max-height: 560px) { #bigmap .wrap { gap: 10px; } #bigmap .legend { gap: 3px; padding: 8px 10px; font-size: 11px; } #bigmap .legend em { font-size: 10px; } }
#keys {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 12px; max-width: min(860px, 70vw); font: 12px/1.5 var(--body); color: rgba(255,255,255,.8);
  text-shadow: 0 1px 2px rgba(0,0,0,.9); opacity: .38; transition: opacity .8s ease; pointer-events: none;
}
#keys b { color: #fff; font-weight: 700; padding: 0 4px; margin-right: 3px; border-radius: 3px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
#keys.bright { opacity: .9; }
#keys.off { opacity: 0; }
@media (max-width: 700px) { #keys { display: none; } }
#nades { position: absolute; right: 36px; bottom: 128px; font: 12px/1 var(--body); letter-spacing: .06em; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px #000; }
#nades b { display: inline-block; margin-right: 5px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,.12); color: #fff; }
#nades.none { color: rgba(255,255,255,.3); }
#slots u { text-decoration: none; color: #f2d36b; }
#vhud { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); font-size: 34px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.6);
  letter-spacing: .04em; opacity: 0; transition: opacity .2s; }
#vhud.on { opacity: .95; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 15; }
#fade.on { opacity: 1; }
#stats { position: absolute; right: 10px; top: 8px; font: 12px/1.35 ui-monospace, Menlo, monospace; color: #9f9; text-shadow: 0 1px 0 #000; white-space: pre; }

@media (max-width: 700px) {
  #wave { font-size: 64px; left: 18px; }
  #ammo-mag { font-size: 44px; }
  #minimap { width: 120px; height: 120px; left: 16px; top: 16px; }
}

/* ---------- multiplayer ---------- */
#mp { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .13); min-width: min(620px, 92vw); }
#mp .mp-title.invited { font-size: 20px; }
#menu > #settings-open { padding: 7px 34px; font-size: 16px; }
#mp .mp-title { font-family: var(--head); font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: #cfc9bf; }
#mp .mp-title span { font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 6px; }
#mp form { display: flex; gap: 8px; }
#mp input { width: 220px; background: #16181b; color: var(--ink); border: 1px solid #3a3d42; padding: 8px 10px; font-size: 15px; }
#mp input:focus { outline: none; border-color: var(--green); }
#mp input:disabled { opacity: .5; }
#mp .btn.ghost { padding: 6px 22px; font-size: 16px; }
#mp-status { min-height: 18px; max-width: 520px; font-size: 13px; color: var(--muted); line-height: 1.4; }
#mp-status.ok { color: var(--green); }
#mp-status.err { color: #ff8a80; }

#net {
  position: fixed; top: 12px; right: 12px; z-index: 25; min-width: 250px; padding: 8px 10px;
  background: rgba(8, 9, 11, .78); border: 1px solid rgba(255,255,255,.08); color: var(--ink);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; pointer-events: auto;
}
#net .net-head { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; }
#net .net-head b { color: var(--green); letter-spacing: .08em; }
#net table { width: 100%; border-collapse: collapse; margin-top: 4px; }
#net th { font-weight: 400; color: var(--muted); font-size: 11px; text-align: left; }
#net td { padding: 1px 6px 1px 0; }
#net .n { text-align: right; }
#net tr.me td { color: #fff; font-weight: 600; }
#net tr.empty td { color: #6d6a64; }
#net details { margin-top: 6px; color: var(--muted); }
#net summary { cursor: pointer; }
#net summary i { color: #ffb74d; font-style: normal; }
#net label { display: grid; grid-template-columns: 44px 1fr 60px; align-items: center; gap: 6px; }
#net input[type=range] { width: 100%; }
#net .net-foot { margin-top: 4px; color: #6d6a64; font-size: 10px; }

/* ---------- co-op HUD ---------- */
#mclock { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--head); font-size: 30px; letter-spacing: .06em;
  color: #f2efe9; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
#mclock.late { color: #ff6b5b; }
#boss { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: min(420px, 62vw); text-align: center; opacity: 0; transition: opacity .5s; pointer-events: none; }
#boss.on { opacity: 1; }
#boss span { font: 700 12px var(--body); letter-spacing: .4em; color: #ffb4a4; text-shadow: 0 1px 3px #000; }
#boss i { display: block; height: 9px; margin-top: 5px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.28); border-radius: 5px; overflow: hidden; }
#boss b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #a3121b, #ff4b2b); transition: width .2s; }
#team { position: absolute; top: 236px; left: 18px; width: 210px; display: flex; flex-direction: column; gap: 4px; font-family: var(--body); font-size: 12px; }
#team .mate { display: grid; grid-template-columns: 10px 1fr 64px 44px; align-items: center; gap: 6px; background: rgba(8,9,11,.55); padding: 3px 6px; border-radius: 3px; }
#team .mate i { width: 9px; height: 9px; border-radius: 50%; display: block; }
#team .mate b { font-weight: 600; color: #f2efe9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#team .mate.me b { color: #fff; }
#team .mate .hp { height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
#team .mate .hp em { display: block; height: 100%; background: #5fd35f; }
#team .mate .down { color: #ff8a80; font-size: 11px; }
#team .mate .pts { text-align: right; color: #ffd36b; font-family: var(--head); font-size: 13px; }
#team .mate.dead b { color: #9a948a; text-decoration: line-through; }
#downmsg { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-family: var(--head); font-size: 26px; letter-spacing: .04em; color: #ffb3a8;
  text-shadow: 0 2px 8px rgba(0,0,0,.9); opacity: 0; transition: opacity .3s; pointer-events: none; text-align: center; }
#downmsg.on { opacity: 1; }
#hud.down-state #crosshair { display: none; }
#clicktoplay { position: fixed; inset: 0; z-index: 21; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(5,6,8,.55); cursor: pointer; color: #f2efe9; }
#clicktoplay b { font-family: var(--head); font-size: 40px; letter-spacing: .08em; font-weight: 400; }
#clicktoplay span { color: var(--muted); font-size: 14px; }
#mp-start { margin-top: 4px; font-size: 22px; padding: 10px 40px; }
/* the host's choice of game (the others see it, greyed) */
#mp-rules { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 820px; }
#mp-rules .mp-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#mp-rules label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
#mp-rules select { background: #16181b; color: var(--ink); border: 1px solid #3a3d42; padding: 6px 8px; font-size: 14px; }
#mp-rules select:disabled { opacity: .75; }
#mp-teams { display: flex; gap: 14px; }
#mp-teams .side { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 6px 8px; border-top: 3px solid var(--c); background: rgba(8,9,11,.5); }
#mp-teams .side b { color: var(--c); font-family: var(--head); letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
#mp-teams .side button { background: none; border: 1px solid #3a3d42; color: var(--ink); padding: 4px 8px; font-size: 13px; text-align: left; cursor: pointer; }
#mp-teams .side button:hover:not(:disabled) { border-color: var(--c); }
#mp-teams .side button:disabled { cursor: default; opacity: .9; }
#mp-teams .side i { font-size: 12px; color: var(--muted); }
#mp-summary { font-size: 13px; color: var(--muted); min-height: 16px; text-align: center; }
/* PvP: who killed whom; the score over the board */
#killfeed { position: absolute; top: 232px; right: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--body); font-size: 13px; pointer-events: none; }
#killfeed div { background: rgba(8,9,11,.6); padding: 3px 8px; border-radius: 3px; color: #cfc9bf; transition: opacity .6s; }
#killfeed div.mine { background: rgba(60,20,20,.7); }
#killfeed div.old { opacity: 0; }
#killfeed b { font-weight: 700; }
#killfeed span { color: #a39d93; margin: 0 4px; font-size: 12px; }
#team .score { display: flex; gap: 6px; align-items: baseline; justify-content: center; font-family: var(--head); font-size: 18px; background: rgba(8,9,11,.55); padding: 3px 6px; border-radius: 3px; }
#team .score span { color: #8d877d; }
#team .score em { font-style: normal; font-family: var(--body); font-size: 11px; color: var(--muted); margin-left: 4px; }
#team .mate .hp.foe { background: none; }
#team .mate .pts small { color: #9a948a; font-size: 11px; }
#hud.nozombies #wave { display: none; }
#mp #mp-name { width: 130px; }
#go-sub { color: var(--muted); font-size: 15px; margin-top: -8px; }
#go-stats.table { display: grid; grid-template-columns: auto repeat(4, auto); gap: 6px 22px; }
#go-stats.table .h { color: var(--muted); font-size: 13px; text-align: right; }
#go-stats.table span { text-align: right; }
#go-stats.table span.n { text-align: left; font-weight: 600; }
#gameover h2.win { color: #e8f5ea; text-shadow: 0 0 24px rgba(63, 208, 122, .45), 0 4px 0 #0b3d22; }
#mp #mp-pass { width: 250px; }
#mp-invite { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; justify-content: center; }
#mp-invite #mp-link { width: 330px; background: #101214; color: #9fe0b4; border: 1px solid #2f4a38; padding: 7px 9px; font: 12px ui-monospace, Menlo, Consolas, monospace; }
#mp .mp-title.invited { color: #9fe0b4; }
/* voice chat */
#net .net-voice { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
#net .net-voice select { background: #16181b; color: inherit; border: 1px solid #3a3d42; font: inherit; padding: 1px 4px; }
#net .net-voice i { font-style: normal; color: #9cc3ff; }
#net tr[data-slot] { cursor: pointer; }
#team .talk { font-size: 11px; }

/* ---- full screen (the menu and the pause screen) ---- */
.fsrow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fs-note { font-size: 12px; color: var(--muted); max-width: 380px; text-align: center; }
.fs-note:empty { display: none; }

/* ---- phones and tablets: the touch controls ---- */
#touch { position: fixed; inset: 0; z-index: 12; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touch.hidden { display: none; }
#touch .stick { position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); opacity: 0; pointer-events: none; transition: opacity .1s; }
#touch .stick.on { opacity: 1; }
#touch .stick i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.3);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); transform: translate(-50%, -50%); }
#touch button { position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(10,12,14,.38);
  color: #fff; font: 700 11px/1 var(--body); letter-spacing: .06em; padding: 0; touch-action: none; -webkit-tap-highlight-color: transparent; }
#touch button.down { background: rgba(255,255,255,.32); }
#touch button.lit { border-color: #f2d36b; color: #f2d36b; }
#touch [data-k=fire] { width: 86px; height: 86px; right: calc(26px + env(safe-area-inset-right)); bottom: 58px; background: rgba(160,20,20,.45); border-color: rgba(255,130,130,.65); font-size: 13px; }
#touch [data-k=aim] { right: calc(128px + env(safe-area-inset-right)); bottom: 28px; }
#touch [data-k=jump] { right: calc(40px + env(safe-area-inset-right)); bottom: 158px; }
#touch [data-k=reload] { right: calc(124px + env(safe-area-inset-right)); bottom: 110px; width: 52px; height: 52px; font-size: 9px; }
#touch [data-k=crouch] { right: calc(200px + env(safe-area-inset-right)); bottom: 24px; width: 52px; height: 52px; }
#touch [data-k=swap] { right: calc(112px + env(safe-area-inset-right)); bottom: 184px; width: 50px; height: 50px; font-size: 10px; }
#touch [data-k=nade] { right: calc(188px + env(safe-area-inset-right)); bottom: 96px; width: 48px; height: 48px; font-size: 10px; }
#touch [data-k=use] { right: calc(30px + env(safe-area-inset-right)); bottom: 236px; width: 66px; height: 44px; border-radius: 22px; display: none;
  background: rgba(242,211,107,.28); border-color: #f2d36b; }
#touch.prompt [data-k=use], #touch.driving [data-k=use], #touch.drone [data-k=use] { display: block; }
#touch [data-k=pause], #touch [data-k=full], #touch [data-k=talk] { top: calc(10px + env(safe-area-inset-top)); width: 38px; height: 38px; font-size: 14px; }
#touch [data-k=pause] { right: calc(14px + env(safe-area-inset-right)); }
#touch [data-k=full] { right: calc(58px + env(safe-area-inset-right)); font-size: 18px; }
#touch [data-k=talk] { right: calc(102px + env(safe-area-inset-right)); width: 54px; border-radius: 19px; font-size: 10px; display: none; }
#touch.mp [data-k=talk] { display: block; }
#touch.driving [data-k=fire], #touch.driving [data-k=aim], #touch.driving [data-k=reload], #touch.driving [data-k=swap],
#touch.driving [data-k=nade], #touch.driving [data-k=crouch] { display: none; }
#touch.dead button:not([data-k=pause]):not([data-k=full]):not([data-k=talk]) { display: none; }

/* the HUD made to fit round them */
body.touch canvas { touch-action: none; }
body.touch #keys, body.touch #slots, body.touch #nades, body.touch #stats, body.touch #clicktoplay, body.touch #ammo-name { display: none !important; }
body.touch #minimap { left: calc(12px + env(safe-area-inset-left)); top: 10px; width: 112px; height: 112px; pointer-events: auto; }

body.touch #health { left: calc(12px + env(safe-area-inset-left)); top: 132px; bottom: auto; width: 112px; }
body.touch #wave { left: calc(134px + env(safe-area-inset-left)); top: 8px; bottom: auto; font-size: 44px; }
body.touch #points { right: calc(170px + env(safe-area-inset-right)); top: 12px; bottom: auto; font-size: 22px; }
body.touch #ammo { right: calc(170px + env(safe-area-inset-right)); top: 42px; bottom: auto; gap: 6px; }
body.touch #ammo-mag { font-size: 34px; }
body.touch #ammo-res { font-size: 16px; }
body.touch #feed { right: calc(170px + env(safe-area-inset-right)); top: 86px; bottom: auto; }
body.touch #prompt { top: auto; bottom: 14px; font-size: 13px; pointer-events: auto; }
body.touch #notice { top: 24%; font-size: 13px; }
body.touch #banner { top: 18%; font-size: 38px; }
body.touch #banner small { font-size: 11px; }
body.touch #team { top: 150px; left: calc(12px + env(safe-area-inset-left)); width: 190px; font-size: 10px; }
body.touch #team .mate { grid-template-columns: 8px 1fr 36px 30px; gap: 4px; padding: 2px 5px; }
body.touch #team .score { font-size: 14px; }
body.touch #killfeed { top: 92px; right: calc(170px + env(safe-area-inset-right)); font-size: 11px; }
body.touch #vhud { bottom: 16px; font-size: 26px; }
body.touch #mclock { top: 8px; font-size: 22px; }
body.touch #boss { top: 38px; width: min(300px, 40vw); }
body.touch #downmsg { font-size: 18px; }
body.touch .controls { display: none; }
body.touch #hud.driving #prompt { bottom: 60px; }

/* holding a phone upright: turn it */
#rotate { display: none; }
@media (orientation: portrait) {
  body.touch #rotate { display: flex; position: fixed; inset: 0; z-index: 60; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: #07080a; color: #e8f5ea; font: 18px var(--body); text-align: center; padding: 24px; }
  body.touch #rotate b { font-size: 64px; font-weight: 400; }
}

/* laptop-height screens: the menu a little tighter, the title sized to the height too */
@media (max-height: 860px) {
  #menu { gap: 12px; }
  .brand h1 { font-size: clamp(48px, min(10vw, 12vh), 128px); }
  .brand .sub { font-size: clamp(28px, min(5vw, 6vh), 54px); }
}
/* short screens (a phone on its side): the menu scrolls, the extras go */
@media (max-height: 560px) {
  .screen, #menu { justify-content: flex-start; overflow-y: auto; gap: 10px; padding: 12px 16px; }
  .brand h1 { font-size: 44px; }
  .brand .kicker { font-size: 10px; }
  .lede { display: none; }
  #mp input { width: 150px; }
  #mp-invite #mp-link { width: 220px; }
  #mp-start { font-size: 18px; padding: 8px 28px; }
  .credits { padding: 4px 0 0; }
}
/* (the health bar's length is the game's: armour makes it longer; on a phone, half of it) */
body.touch #health { transform: scale(0.5); transform-origin: left top; }

/* ---- English practice: the offer between waves (B or a tap takes it), the question card, "My English" ---- */
#eoffer { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 14; display: flex; align-items: center; gap: 12px; overflow: hidden;
  padding: 10px 16px 13px; background: rgba(16, 13, 28, .9); border: 1px solid #6b4fb0; border-radius: 10px; color: #e9e3ff; font: 15px var(--body);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45); cursor: pointer; animation: eoIn .35s ease both; -webkit-tap-highlight-color: transparent; }
#eoffer.hidden { display: none; }
#eoffer b { font-family: var(--head); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: #b98cff; font-size: 17px; }
#eoffer em { font-style: normal; color: #ffe066; font-weight: 700; }
#eoffer kbd { font: 700 13px var(--body); background: #6b4fb0; color: #fff; border-radius: 5px; padding: 3px 9px; }
#eoffer i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #b98cff; animation: eoBar var(--t, 10s) linear both; }
body.touch #eoffer { left: 42%; bottom: 14px; font-size: 14px; padding: 8px 14px 11px; }
@keyframes eoIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes eoBar { from { width: 100%; } to { width: 0%; } }
#quiz { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(4,5,7,.55); padding: 12px; }
#quiz.hidden { display: none; }
#quiz .card { width: min(560px, 96vw); max-height: 96vh; overflow-y: auto; background: #111418; border: 1px solid #2c3036; border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.6);
  padding: 16px 18px 14px; font-family: var(--body); color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
#quiz .top { display: flex; align-items: center; gap: 10px; }
#quiz .title { font-family: var(--head); letter-spacing: .08em; text-transform: uppercase; color: #b98cff; font-size: 16px; }
#quiz .dots { display: flex; gap: 4px; flex: 1; }
#quiz .dots i { width: 9px; height: 9px; border-radius: 50%; background: #2c3036; }
#quiz .dots i.cur { background: #b98cff; }
#quiz .dots i.ok { background: #5fd35f; }
#quiz .dots i.no { background: #ff5a4a; }
#quiz .streak { color: #ffb347; font-size: 13px; }
#quiz .x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 6px; }
#quiz .kind { color: var(--muted); font-size: 13px; letter-spacing: .04em; }
#quiz .prompt { font-size: 30px; font-weight: 700; line-height: 1.25; text-align: center; padding: 6px 0; cursor: default; }
#quiz .prompt.gap { font-size: 21px; font-weight: 500; }
#quiz .prompt.gap u { color: #b98cff; text-decoration: none; letter-spacing: .1em; }
#quiz .prompt.word { font-size: 28px; }
#quiz .prompt .play { cursor: pointer; font-size: 44px; }
#quiz .prompt .play.small { font-size: 18px; vertical-align: middle; opacity: .8; }
#quiz .prompt .emo { font-size: 26px; }
#quiz .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#quiz .opts button { background: #1b1f25; border: 1px solid #333840; color: var(--ink); font: 600 17px var(--body); padding: 12px 10px; border-radius: 7px; cursor: pointer; text-align: left;
  display: flex; gap: 10px; align-items: center; -webkit-tap-highlight-color: transparent; }
#quiz .opts button b { color: #8a857c; font-size: 12px; min-width: 14px; }
#quiz .opts button:hover:not(:disabled) { border-color: #b98cff; }
#quiz .opts button.ok { background: #1d3a22; border-color: #5fd35f; }
#quiz .opts button.no { background: #3a1d1d; border-color: #ff5a4a; }
#quiz .fb:empty { display: none; }
#quiz .fb.ok { color: #7fe07f; font-size: 16px; text-align: center; }
#quiz .fb.ok b { color: #ffe066; }
#quiz .fb.no { background: #1a1d22; border-radius: 7px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
#quiz .fb .w { font-size: 20px; }
#quiz .fb .w .play { cursor: pointer; }
#quiz .fb .pos { color: #8a857c; font-size: 12px; font-style: italic; }
#quiz .fb .ka { color: #9fe0b4; font-size: 18px; margin-left: 6px; }
#quiz .fb .ex { color: #cfc9bf; font-size: 15px; }
#quiz .fb .ex b { color: #fff; }
#quiz .bar { height: 3px; background: #22262c; border-radius: 2px; overflow: hidden; }
#quiz .bar i { display: block; height: 100%; background: #6b4fb0; }
#quiz .foot { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
#quiz .gain { color: #ffe066; font-family: var(--head); font-size: 20px; }
#quiz .next { background: #6b4fb0; border: 0; color: #fff; font: 600 15px var(--body); padding: 8px 16px; border-radius: 6px; cursor: pointer; }
#quiz .next small { opacity: .6; font-size: 11px; margin-left: 4px; }
#quiz .next.hidden { display: none; }
#learnpanel h2 { margin: 0; }
#learnpanel { z-index: 30; }
/* the settings screen: over the menu or the pause screen, a label and its control a line */
#settings { z-index: 26; gap: 16px; background: rgba(7, 8, 10, 0.95); }
#settings .setbtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 4px; }
#settings .setbtns .btn { font-size: 18px; padding: 9px 26px; }
#settings h2 { font-family: var(--head); font-weight: 400; font-size: 56px; margin: 0; color: #e8f5ea; letter-spacing: .05em; }
#settings .settings { flex-direction: column; align-items: stretch; gap: 12px; width: min(440px, 92vw); font-size: 15px; }
#settings .settings label { justify-content: space-between; gap: 16px; }
#settings .settings input[type=range] { width: 210px; }
#settings .settings select { min-width: 210px; }
#settings .learnrow { border-top: 1px solid #2c3036; padding-top: 14px; }
#settings .learnrow label:has(input[type=checkbox]) { justify-content: flex-start; }
#learnpanel .lstats { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 10px; max-width: 620px; }
#learnpanel .lstats div { background: rgba(20,22,26,.8); border: 1px solid #2c3036; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
#learnpanel .lstats b { font-family: var(--head); font-size: 26px; color: #b98cff; }
#learnpanel .lstats span { font-size: 12px; color: var(--muted); }
#learnpanel .lnote { max-width: 560px; color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
#learnpanel .lbtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.learnrow input[type=checkbox] { accent-color: #b98cff; }
.btn.small { padding: 5px 14px; font-size: 14px; }
@media (max-height: 560px) { #settings h2 { font-size: 30px; } #settings .settings { gap: 7px; } #settings .learnrow { padding-top: 8px; } #settings .setbtns .btn { font-size: 16px; padding: 7px 20px; } }
@media (max-height: 560px) { #quiz .prompt { font-size: 22px; padding: 0; } #quiz .opts button { padding: 8px; font-size: 15px; } #learnpanel .lstats { grid-template-columns: repeat(3, 1fr); } }