:root{
  --bg:#0b0d12; --panel:#1b2030; --border:#3b4457; --text:#e8e6dc; --muted:#9aa3b5;
  --red:#d3372b; --green:#5fb04a; --yellow:#f0c419; --blue:#3f7fd8;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --pixel:'Press Start 2P',var(--mono);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--mono);overflow:hidden}
button{font-family:inherit;cursor:pointer}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}

#stage{position:fixed;inset:0;background:#000;overflow:hidden}
#game{display:block;cursor:crosshair;position:absolute;left:0;top:0;width:100vw;height:100vh}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(8,10,16,.72);text-align:center;padding:24px;z-index:5}
.overlay.show{display:flex}
.overlay h2{font-family:var(--pixel);font-size:clamp(16px,2.4vw,26px);letter-spacing:2px;color:#fff;margin-bottom:6px;text-shadow:3px 3px 0 #000}
.overlay.banner{background:transparent;pointer-events:none;justify-content:flex-start;padding-top:14vh}
.banner-text{font-family:var(--pixel);font-size:clamp(22px,4vw,44px);color:#fff;text-shadow:4px 4px 0 #000,0 0 24px rgba(211,55,43,.8);animation:pop .5s ease-out}
.banner-sub{font-size:clamp(12px,1.4vw,16px);color:#ffd7d0;text-shadow:2px 2px 0 #000;margin-top:10px}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.hint{color:var(--muted);font-size:13px;text-align:center;margin:4px 0}
.hint.small{font-size:11px}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.title-block{text-align:center;line-height:1;margin-bottom:54px;filter:drop-shadow(0 6px 0 #000)}
.ttl-zombie{font-family:var(--pixel);font-size:clamp(36px,7vw,84px);color:#f2efe4;letter-spacing:3px;
  text-shadow:0 3px 0 #9b968a,0 6px 0 #5f5c54,0 9px 0 #34322d,5px 5px 0 rgba(0,0,0,.55)}
.ttl-survival{position:relative;font-family:var(--pixel);font-size:clamp(36px,7vw,84px);color:#d8342a;letter-spacing:3px;margin-top:14px;
  text-shadow:0 3px 0 #a81f16,0 6px 0 #7a1d15,0 9px 0 #4e0f0a,5px 5px 0 rgba(0,0,0,.55)}
/* blood running off the bottom of the letters */
.drips{position:absolute;left:2%;right:2%;top:100%;height:34px;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(6px 12px at 6% 0,#c62b22 55%,transparent 56%),
    radial-gradient(5px 22px at 15% 0,#c62b22 55%,transparent 56%),
    radial-gradient(4px 9px  at 24% 0,#b3251d 55%,transparent 56%),
    radial-gradient(6px 30px at 33% 0,#c62b22 55%,transparent 56%),
    radial-gradient(5px 14px at 44% 0,#b3251d 55%,transparent 56%),
    radial-gradient(4px 20px at 53% 0,#c62b22 55%,transparent 56%),
    radial-gradient(6px 11px at 63% 0,#b3251d 55%,transparent 56%),
    radial-gradient(5px 26px at 72% 0,#c62b22 55%,transparent 56%),
    radial-gradient(4px 15px at 82% 0,#b3251d 55%,transparent 56%),
    radial-gradient(6px 22px at 92% 0,#c62b22 55%,transparent 56%);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.drips::after{content:"";position:absolute;inset:0;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(3px 3px at 15% 26px,#c62b22 60%,transparent 61%),
    radial-gradient(3px 3px at 33% 36px,#c62b22 60%,transparent 61%),
    radial-gradient(2px 2px at 72% 31px,#b3251d 60%,transparent 61%);
  animation:dripfall 3.4s ease-in infinite}
@keyframes dripfall{0%,70%{opacity:0;transform:translateY(-6px)}85%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

.btn{background:#2c3444;border:2px solid #6c7688;color:#fff;font-weight:700;letter-spacing:.08em;padding:10px 28px;border-radius:3px;font-size:14px;min-width:160px;transition:transform .08s,background .1s}
.btn:hover{background:#3a4356;transform:translateY(-1px)}
.btn.primary{border-color:#fff}
.btn.big{font-family:var(--pixel);font-size:16px;padding:16px 44px}
/* title-screen buttons: icon on the left, red brackets framing PLAY */
.play-btn,.gear-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;position:relative;width:260px;padding-left:24px;padding-right:24px}
.play-btn{margin-bottom:16px;background:#2f3a4e;border-color:#f2f0e8;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.55)}
.play-btn:hover{background:#3b4a63}
/* icon and label travel together as one centred group */
.tri{flex:0 0 auto;width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.play-btn::before,.play-btn::after{content:"";position:absolute;top:-7px;bottom:-7px;width:13px;
  border:3px solid var(--red);filter:drop-shadow(0 0 6px rgba(211,55,43,.65))}
.play-btn::before{left:-13px;border-right:0}
.play-btn::after{right:-13px;border-left:0}
.gear{flex:0 0 16px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,transparent 30%,#dfe3ea 31% 58%,transparent 59%);
  box-shadow:0 -7px 0 -5px #dfe3ea,0 7px 0 -5px #dfe3ea,-7px 0 0 -5px #dfe3ea,7px 0 0 -5px #dfe3ea,
             5px 5px 0 -5px #dfe3ea,-5px -5px 0 -5px #dfe3ea,5px -5px 0 -5px #dfe3ea,-5px 5px 0 -5px #dfe3ea}
.score-line{font-size:15px;color:#cfd6e4;letter-spacing:.04em;margin-top:16px;text-shadow:0 2px 4px rgba(0,0,0,.8)}
/* controls strip along the bottom, every key in its own cap */
.keybar{position:absolute;left:0;right:0;bottom:18px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 12px;padding:0 16px;font-size:12px;color:#c3cad8;text-shadow:0 2px 4px rgba(0,0,0,.9)}
.keybar span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.keybar i{color:#6b7488;font-style:normal}
.keybar em{color:#8b93a5;font-style:normal}
.keybar kbd{font-family:var(--mono);font-size:11px;line-height:1;color:#f0f2f6;background:#232a38;
  border:1px solid #59637a;border-bottom-width:2px;border-radius:4px;padding:4px 6px;box-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn.danger{border-color:var(--red);color:#ffb8b0}
.btn.danger:hover{background:#4a1f1a}
.btn.small{padding:6px 14px;min-width:0;font-size:12px}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.icon-btn{background:#2c3444;border:1px solid var(--border);color:var(--text);border-radius:4px;font-size:12px;padding:2px 8px}

/* ---------- setup wizard ---------- */
.setup{width:min(1600px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;overflow:auto;padding:0 18px 0 6px;scrollbar-width:thin;scrollbar-color:#4a5468 transparent;scrollbar-gutter:stable}
.setup::-webkit-scrollbar{width:8px}
.setup::-webkit-scrollbar-track{background:transparent}
.setup::-webkit-scrollbar-thumb{background:#4a5468;border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.setup::-webkit-scrollbar-thumb:hover{background:#6c7688;background-clip:padding-box}
.steps{display:flex;justify-content:center;gap:10px}
.step{font-size:12px;letter-spacing:.12em;color:var(--muted);padding:6px 14px;border:1px solid var(--border);border-radius:3px}
.step b{display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#2c3444;text-align:center;font-size:11px;margin-right:6px}
.step.active{color:#fff;border-color:#fff;background:#2c3444}
.step.done{color:var(--green);border-color:var(--green)}
.step.done b{background:var(--green);color:#000}
.setup-page{display:none;flex-direction:column;align-items:center;gap:10px}
.setup-page.show{display:flex}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:100%}
#charCards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
#charCards .card small{font-size:11px}
#weaponCards{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){#weaponCards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel);border:2px solid var(--border);border-radius:8px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;cursor:pointer;transition:.1s;position:relative;text-align:center}
.card:hover{border-color:#aab3c5;transform:translateY(-3px)}
.card.selected{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(240,196,25,.25),0 0 24px rgba(240,196,25,.25);background:#252c3d}
.card.selected::after{content:"✔";position:absolute;top:8px;right:10px;color:var(--yellow);font-size:14px}
.card canvas{width:96px;height:96px}
.card canvas.gun{width:128px;height:64px}
.card canvas.map{width:100%;max-width:260px;aspect-ratio:8/5;height:auto;border:1px solid var(--border);border-radius:3px;image-rendering:auto}
.card b{font-size:15px;letter-spacing:.06em}
.card small{color:var(--muted);font-size:11px;line-height:1.4}
.card .tag{color:var(--yellow);font-size:11px;letter-spacing:.1em}
.card.fixed{border-color:#4c9a3c;cursor:default;opacity:.85}
.card.fixed::after{content:"✔";position:absolute;top:8px;right:10px;color:#8bd35a;font-size:14px}
.card.dim{opacity:.4}
.card.cursor{outline:2px dashed rgba(255,255,255,.5);outline-offset:3px}
.card .slot{position:absolute;top:8px;left:10px;color:var(--yellow);font-size:10px;letter-spacing:.1em}
.card.fixed .slot{color:#8bd35a}
.hint .count{display:inline-block;margin-left:10px;padding:2px 8px;border:1px solid var(--border);border-radius:3px;color:#fff}
.card .tag.horror{color:#ff5a4a;text-shadow:0 0 8px rgba(255,60,40,.6);animation:blink 1.6s infinite}
.stats{width:100%;display:flex;flex-direction:column;gap:4px;margin-top:4px}
.stat{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font-size:10px;color:var(--muted);text-align:left}
.stat i{display:block;height:6px;background:#0f1218;border-radius:2px;overflow:hidden}
.stat i::after{content:"";display:block;height:100%;width:var(--v);background:linear-gradient(90deg,#3f8f2f,#8bd35a)}
.stat.red i::after{background:linear-gradient(90deg,#8a1f18,#ff6a5a)}
.stat.blue i::after{background:linear-gradient(90deg,#1d6fa8,#5ec2ff)}
.stat.yellow i::after{background:linear-gradient(90deg,#b48a0e,#ffd23a)}
.setup-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.loadout{font-size:12px;color:var(--muted);letter-spacing:.05em}
.loadout b{color:#fff}

/* ---------- level up ---------- */
.upgrade-cards{display:grid;grid-template-columns:repeat(4,minmax(120px,170px));gap:12px;justify-content:center;width:100%}
.upgrade-card{background:var(--panel);border:2px solid var(--border);border-radius:8px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:13px;transition:.1s}
.upgrade-card canvas{width:56px;height:56px}
.upgrade-card:hover{border-color:#fff;transform:translateY(-4px);background:#2a3140}
.upgrade-card small{color:var(--muted);font-weight:400;font-size:11px}
.upgrade-card kbd{font-size:10px;color:var(--muted)}
.upgrade-card .lvl{color:var(--yellow);font-size:10px;font-weight:400}

/* ---------- game over ---------- */
.go-title{font-family:var(--pixel);font-size:clamp(28px,5vw,56px);color:var(--red);text-shadow:4px 4px 0 #3a0d08;margin-bottom:8px}
.go-stats{font-size:15px;line-height:1.7;color:#f2e6e6}
.go-score{font-family:var(--pixel);font-size:14px;margin:4px 0}
.go-new{color:var(--yellow);font-weight:700;display:none;font-size:13px;animation:blink 1s infinite}
.go-new.show{display:block}
@keyframes blink{50%{opacity:.3}}
.go-grid{display:grid;grid-template-columns:repeat(4,auto);gap:6px 22px;margin:10px 0 6px;font-size:12px;color:var(--muted)}
.go-grid b{color:#fff;display:block;font-size:15px}

/* ---------- supply cart ---------- */
.cart{width:min(900px,100%);max-height:100%;overflow:auto;background:rgba(20,24,36,.96);border:2px solid #6c7688;border-radius:10px;padding:16px 20px;text-align:left}
.cart>header{display:flex;align-items:center;gap:12px;font-family:var(--pixel);font-size:16px;letter-spacing:1px;margin-bottom:6px}
.cart>header canvas{width:42px;height:36px}
.cart>header .coins{margin-left:auto;font-family:var(--mono);font-size:16px;color:var(--yellow)}
.cart>header .close{margin-left:8px}
.cart h3{font-size:12px;letter-spacing:.14em;color:var(--muted);margin:12px 0 6px}
.cart kbd{font-size:10px;border:1px solid var(--border);border-radius:3px;padding:1px 5px;color:#fff}
.cart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.cart-item{background:#1b2030;border:1px solid var(--border);border-radius:6px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:12px}
.cart-item canvas{width:40px;height:20px;flex-shrink:0}
.cart-item canvas.sq{width:28px;height:28px}
.cart-item .info{flex:1;min-width:0}
.cart-item b{display:block;font-size:12px;line-height:1.2}
.cart-item small{color:var(--muted);display:block}
.cart-item small.warn{color:#ff6a5a}
.cart-item .btn{min-width:0;padding:6px 10px;font-size:12px;white-space:nowrap}
.cart-item .btn.ok{border-color:var(--yellow);color:var(--yellow)}
img.coin{width:14px;height:14px;vertical-align:-2px;margin-right:2px;image-rendering:pixelated}
.cart>header img.coin{width:18px;height:18px;vertical-align:-3px}
.btn:disabled img.coin{filter:grayscale(1)}
.cart-item.empty{border-color:#8a1f18}
.cart-foot{text-align:center;margin-top:14px}
.cart .none{color:var(--muted);font-size:12px;padding:6px 2px}

/* ---------- admin ---------- */
.modal-box.admin{width:min(720px,100%);border-color:#c8a03a}
.modal-box.admin>header{color:#ffd23a}
.adm-tag{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400;letter-spacing:0}
.adm-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.adm-row input[type=number],.adm-row select{background:#11141b;border:1px solid var(--border);color:#fff;font-family:inherit;font-size:13px;padding:6px 8px;border-radius:3px;width:90px}
.adm-row select{width:auto}
.adm-toggle{display:flex;align-items:center;gap:6px;font-size:13px;padding:6px 10px;border:1px solid var(--border);border-radius:3px}
.adm-toggle input{accent-color:var(--yellow)}

/* ---------- pause ---------- */
#ov-pause .btn{min-width:220px}

/* ---------- settings modal ---------- */
.modal{position:absolute;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.show{display:flex}
.modal-box,.cart{scrollbar-width:thin;scrollbar-color:#4a5468 transparent}
.modal-box::-webkit-scrollbar,.cart::-webkit-scrollbar{width:8px}
.modal-box::-webkit-scrollbar-thumb,.cart::-webkit-scrollbar-thumb{background:#4a5468;border-radius:4px}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px 20px;width:min(440px,100%);max-height:90vh;overflow:auto}
.modal-box>header{font-weight:700;font-size:18px;letter-spacing:.08em;display:flex;align-items:center;gap:14px;margin-bottom:6px}
.modal-box>header .close{margin-left:auto}
.setting{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.setting input[type=range]{width:160px}
.setting input[type=checkbox]{width:18px;height:18px;accent-color:var(--green)}
.setting-actions{padding-top:14px;text-align:center}

.toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#2c3444;border:1px solid #6c7688;color:#fff;padding:8px 16px;border-radius:4px;font-size:13px;opacity:0;transition:.25s;z-index:200;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:760px){
  .upgrade-cards{grid-template-columns:repeat(2,1fr)}
  .go-grid{grid-template-columns:repeat(2,auto)}
  .btn{min-width:130px;padding:8px 16px}
}


/* ---- wave 5 jumpscare: the face fills the screen, shaking, then it's gone ---- */
#jumpscare{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:#000;pointer-events:none;overflow:hidden}
#jumpscare.on{display:flex;animation:jsflash .12s steps(2) 3}
#jumpscare img{width:min(100vh,100vw);height:min(100vh,100vw);max-width:none;image-rendering:auto;filter:contrast(1.5) brightness(1.18) saturate(0);transform-origin:center;animation:jsin .13s cubic-bezier(.2,1.7,.4,1) both,jscreep 2.1s ease-out .13s both,jsshake .055s steps(2) infinite .13s}
#jumpscare::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 28vh 12vh #000;pointer-events:none}
@keyframes jsin{from{transform:scale(.22) rotate(-7deg);opacity:.15}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes jscreep{from{transform:scale(1)}to{transform:scale(1.22)}}
@keyframes jsshake{0%{margin:0 0}25%{margin:-1.2vh 1.6vh}50%{margin:1.4vh -1.2vh}75%{margin:-1vh -1.6vh}100%{margin:1.2vh 1vh}}
@keyframes jsflash{0%,100%{background:#000}50%{background:#3a0000}}
@media (prefers-reduced-motion: reduce){#jumpscare img{animation:jsin .2s both}}