/* ===== THEY ARE COMING — UI styling (gritty pixel-survival) ===== */
@font-face { font-family:'pix'; src:local('Courier New'); }

:root{
  --bg:#0a0c0a; --panel:#171a16; --panel2:#20251d; --edge:#3a4232;
  --wood:#3b2a1c; --wood2:#5a4126; --wood-edge:#7a5a33;
  --ink:#d9e0c8; --dim:#8a9378; --blood:#b51d1d; --blood2:#7a1414;
  --cash:#f2c14e; --salvage:#54c6e8; --good:#7fd66b; --warn:#e8a33d;
  --c-common:#9aa18c; --c-uncommon:#5fbf52; --c-rare:#3f8fe0;
  --c-epic:#a35fe0; --c-legend:#ef9a2e; --c-mythical:#ffd24a;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; background:#000; overflow:hidden;
  font-family:'Courier New',monospace; color:var(--ink);
  -webkit-font-smoothing:none; image-rendering:pixelated; }
body{ display:flex; align-items:center; justify-content:center; }

#app{ position:relative; width:960px; height:600px; background:#000;
  box-shadow:0 0 0 3px #000, 0 0 40px rgba(180,30,30,.25); overflow:hidden; }
canvas#game{ position:absolute; inset:0; image-rendering:pixelated; cursor:none; }

/* screens */
.screen{ position:absolute; inset:0; display:none; }
.screen.active{ display:block; }
.hidden{ display:none !important; }

button.btn{ font-family:inherit; font-weight:bold; letter-spacing:1px;
  color:var(--ink); background:linear-gradient(#34301f,#221c12);
  border:2px solid var(--wood-edge); border-bottom-color:#1a140c;
  border-right-color:#1a140c; padding:8px 16px; cursor:pointer;
  text-shadow:1px 1px 0 #000; transition:.08s; image-rendering:pixelated; }
button.btn:hover{ background:linear-gradient(#4a4226,#34301f); color:#fff; transform:translateY(-1px); }
button.btn:active{ transform:translateY(1px); }
button.btn.big{ font-size:20px; padding:12px 28px; }
button.btn.deploy{ background:linear-gradient(#7a1414,#4a0c0c); border-color:#b51d1d;
  font-size:18px; padding:10px 30px; }
button.btn.deploy:hover{ background:linear-gradient(#b51d1d,#7a1414); }

/* ===== MENU ===== */
#menu{ background:
  radial-gradient(circle at 50% 30%, rgba(120,20,20,.25), transparent 60%),
  linear-gradient(#0c0f0b,#050605); }
.menu-inner{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:14px; }
.title{ font-size:62px; letter-spacing:4px; color:#cdd4bd; text-shadow:3px 3px 0 #000,0 0 18px rgba(180,30,30,.4); }
.title .bleed{ color:var(--blood); text-shadow:3px 3px 0 #000, 0 0 22px rgba(180,30,30,.9); }
.subtitle{ color:var(--dim); letter-spacing:2px; margin-top:-6px; }
.lore{ color:#b8c0a8; font-size:13px; max-width:560px; line-height:1.5; margin:6px auto 0; font-style:italic; }
.lore b{ color:var(--warn); font-style:normal; }
.menu-buttons{ display:flex; gap:14px; margin-top:10px; }
.howto{ margin-top:10px; background:rgba(0,0,0,.55); border:2px solid var(--edge);
  padding:14px 22px; text-align:left; max-width:560px; }
.howto h3{ color:var(--warn); letter-spacing:2px; margin-bottom:8px; }
.howto ul{ list-style:none; line-height:1.8; font-size:14px; }
.howto b{ color:#fff; } .dim{ color:var(--dim); }
.credit{ position:absolute; bottom:16px; color:var(--dim); font-size:12px; letter-spacing:1px; }

/* settings / cheats list */
.settings-list{ display:flex; flex-direction:column; gap:6px; min-width:420px; }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(0,0,0,.3); border:1px solid var(--edge); padding:6px 10px; }
.set-row .lbl{ font-size:13px; } .set-row .lbl small{ color:var(--dim); display:block; font-size:10px; }
.set-btn{ font-family:inherit; font-weight:bold; font-size:12px; cursor:pointer; padding:5px 12px;
  border:2px solid var(--edge); background:#1b1f17; color:var(--dim); min-width:84px; }
.set-btn.on{ background:#2a4022; border-color:var(--good); color:var(--good); }
.set-btn.off{ background:#3a1f1f; border-color:#7a3030; color:#c88; }
.set-row.cheaty{ border-color:#7a5a1a; }

/* in-hub cheats bar */
.cheat-bar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:none;
  background:linear-gradient(#2a1f0a,#191207); border:2px solid #7a5a1a; padding:6px 10px; }
.cheat-bar .ctitle{ font-size:11px; font-weight:bold; letter-spacing:1px; color:#ffd24a; margin-right:6px; }
.cheat-btn{ font-family:inherit; font-size:11px; font-weight:bold; cursor:pointer; color:#ffe6a0;
  background:#3a2a0e; border:1px solid #7a5a1a; padding:4px 9px; }
.cheat-btn:hover{ background:#4a3614; color:#fff; }
.cheat-btn.toggle.on{ background:#2a4022; border-color:var(--good); color:var(--good); }

/* ===== HUB ===== */
#hub{ background:linear-gradient(#0d100c,#070806); padding:10px; flex-direction:column; gap:8px; }
#hub.active{ display:flex; }
.hub-panels{ position:relative; flex:1; min-height:0; }
.hub-top{ display:flex; align-items:center; gap:14px; padding:6px 10px;
  background:linear-gradient(#241a10,#15100a); border:2px solid var(--wood-edge); }
.hub-tabs{ display:flex; gap:6px; }
.tab{ font-family:inherit; font-weight:bold; color:var(--dim); background:#1b1f17;
  border:2px solid var(--edge); padding:7px 14px; cursor:pointer; letter-spacing:1px; }
.tab.active{ color:#fff; background:#2c3422; border-color:var(--warn); }
.hub-wallet{ margin-left:auto; display:flex; gap:16px; font-size:16px; align-items:center; }
.wave-pill{ background:#2a1010; border:1px solid var(--blood); padding:3px 10px; color:#e8c0c0; }
.cash b{ color:var(--cash); } .salvage b{ color:var(--salvage); }

.tab-panel{ display:none; position:absolute; inset:0; }
.tab-panel.active{ display:block; }

/* Crazy Dave dialogue bar */
.dave-bar{ display:flex; gap:12px; align-items:stretch; height:108px; flex:none;
  background:linear-gradient(#241a10,#15100a); border:2px solid var(--wood-edge); padding:8px 12px; }
.dave-portrait-wrap{ display:flex; flex-direction:column; align-items:center; flex:none; }
#davePortrait{ image-rendering:pixelated; width:76px; height:76px;
  background:radial-gradient(circle at 50% 38%, #3a2e1e, #14100a); border:2px solid var(--wood-edge); }
.dave-name{ font-size:10px; letter-spacing:1px; color:var(--warn); margin-top:3px; font-weight:bold; }
.dave-talk{ flex:1; display:flex; flex-direction:column; min-width:0; }
.dave-line{ flex:1; font-size:14px; line-height:1.35; color:#ead9b8; padding:5px 9px; font-style:italic;
  background:rgba(0,0,0,.3); border-left:3px solid var(--warn); margin-bottom:6px; display:flex; align-items:center; }
.dave-replies{ display:flex; flex-wrap:wrap; gap:6px; }
.dave-reply{ font-family:inherit; font-size:11px; color:#cfe0b0; background:#222a1a;
  border:1px solid #4a5a32; padding:4px 9px; cursor:pointer; letter-spacing:.5px; }
.dave-reply:hover{ background:#2e3a22; color:#fff; border-color:var(--warn); }
.dave-reply::before{ content:'▸ '; color:var(--warn); }

/* loadout */
.loadout-grid{ display:grid; grid-template-columns:240px 1fr 300px; gap:10px; height:100%; }
.char-panel,.slots-panel,.inv-panel{ background:var(--panel); border:2px solid var(--edge);
  padding:10px; overflow:auto; }
.char-panel h3,.slots-panel h3,.inv-panel h3{ color:var(--warn); letter-spacing:1px;
  font-size:13px; margin-bottom:8px; border-bottom:1px solid var(--edge); padding-bottom:4px; }
#charPreview{ display:block; margin:0 auto; image-rendering:pixelated;
  background:radial-gradient(circle at 50% 60%, #20251c, #0c0f0a); border:1px solid var(--edge); }
.char-stats{ margin-top:10px; font-size:12px; line-height:1.7; }
.char-stats .row{ display:flex; justify-content:space-between; border-bottom:1px dotted #2a3022; }
.char-stats .row b{ color:#fff; }

.equip-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
.attach-slots{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.slot{ background:var(--panel2); border:2px solid var(--edge); padding:6px; min-height:62px;
  cursor:pointer; position:relative; transition:.08s; }
.slot:hover{ border-color:var(--warn); }
.slot.active{ border-color:var(--cash); box-shadow:0 0 8px rgba(242,193,78,.4); }
.slot .slot-label{ font-size:9px; color:var(--dim); letter-spacing:1px; text-transform:uppercase; }
.slot .slot-item{ font-size:11px; font-weight:bold; margin-top:2px; line-height:1.2; }
.slot canvas{ position:absolute; right:4px; bottom:4px; image-rendering:pixelated; }
.slot.empty .slot-item{ color:#555; }

.inv-filters{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.fbtn{ font-family:inherit; font-size:10px; color:var(--dim); background:#1b1f17;
  border:1px solid var(--edge); padding:3px 7px; cursor:pointer; }
.fbtn.active{ color:#fff; background:#2c3422; border-color:var(--warn); }
.inventory{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }

/* item cards */
.card{ display:flex; gap:8px; align-items:center; background:var(--panel2);
  border:2px solid var(--edge); border-left-width:4px; padding:6px; cursor:pointer; transition:.08s; }
.card:hover{ background:#2a3022; }
.card.r-common{ border-left-color:var(--c-common); }
.card.r-uncommon{ border-left-color:var(--c-uncommon); }
.card.r-rare{ border-left-color:var(--c-rare); }
.card.r-epic{ border-left-color:var(--c-epic); }
.card.r-legendary{ border-left-color:var(--c-legend); }
.card.r-mythical{ border-left-color:#ffd24a; border-color:#7a5a1a;
  background:linear-gradient(90deg, rgba(120,80,20,.35), var(--panel2));
  box-shadow:0 0 8px rgba(255,200,80,.3); animation:mythPulse 1.8s infinite; }
@keyframes mythPulse{ 0%,100%{ box-shadow:0 0 6px rgba(255,200,80,.25);} 50%{ box-shadow:0 0 14px rgba(255,210,90,.6);} }
.r-mythical .cname{ color:#ffd24a; text-shadow:0 0 6px rgba(255,200,80,.6); }
.card.equipped{ outline:2px solid var(--cash); }
.card.locked{ opacity:.5; filter:grayscale(.55); }
.card.locked .cprice{ color:var(--dim); }
.card canvas{ image-rendering:pixelated; flex:none; background:#0d100b; border:1px solid #000; }
.card .ci{ min-width:0; }
.card .cname{ font-size:11px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .ctype{ font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:1px; }
.card .cprice{ font-size:11px; color:var(--cash); margin-left:auto; flex:none; }
.r-common .cname{color:var(--c-common);} .r-uncommon .cname{color:var(--c-uncommon);}
.r-rare .cname{color:var(--c-rare);} .r-epic .cname{color:var(--c-epic);}
.r-legendary .cname{color:var(--c-legend);}

/* shop */
.shop-grid{ display:grid; grid-template-columns:170px 1fr 280px; gap:10px; height:100%; }
.shop-cats,.shop-items,.shop-detail{ background:var(--panel); border:2px solid var(--edge);
  padding:10px; overflow:auto; }
.shop-cats button{ display:block; width:100%; text-align:left; font-family:inherit;
  font-size:12px; color:var(--dim); background:#1b1f17; border:1px solid var(--edge);
  padding:8px; margin-bottom:5px; cursor:pointer; letter-spacing:1px; }
.shop-cats button.active{ color:#fff; background:#2c3422; border-color:var(--warn); }
.shop-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; align-content:start; }
.shop-detail h3{ font-size:16px; margin-bottom:6px; }
.shop-detail .big-preview{ display:block; margin:6px auto; image-rendering:pixelated;
  background:#0d100b; border:1px solid var(--edge); }
.shop-detail .stat{ display:flex; justify-content:space-between; font-size:12px;
  border-bottom:1px dotted #2a3022; padding:2px 0; }
.shop-detail .stat b{ color:#fff; }
.shop-detail .perk{ color:var(--c-uncommon); font-size:11px; margin:3px 0; }
.shop-detail .desc{ color:var(--dim); font-size:11px; margin:8px 0; line-height:1.5; }
.shop-detail .rarity-tag{ display:inline-block; font-size:10px; padding:1px 7px; border-radius:2px;
  color:#000; font-weight:bold; letter-spacing:1px; }
.buyrow{ display:flex; gap:8px; margin-top:10px; align-items:center; }
.buyrow .btn{ flex:1; }
.owned-tag{ color:var(--good); font-weight:bold; }

/* ===== HUD ===== */
.hud{ pointer-events:none; }
.hud-top{ position:absolute; top:0; left:0; right:0; display:flex; gap:18px;
  padding:8px 14px; font-size:14px; letter-spacing:1px;
  background:linear-gradient(rgba(0,0,0,.7),transparent); text-shadow:1px 1px 0 #000; }
.hud-top .hud-cash b{ color:var(--cash); } .hud-top .hud-zombies b{ color:var(--blood); }
.hud-score{ margin-left:auto; } .hud-score b{ color:var(--warn); }
.hud-bottom{ position:absolute; bottom:0; left:0; right:0; display:flex;
  align-items:flex-end; gap:16px; padding:10px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.75)); }
.hud-vitals{ display:flex; flex-direction:column; gap:4px; width:240px; }
.bar{ position:relative; height:18px; background:#000; border:1px solid #000;
  box-shadow:inset 0 0 0 1px #2a3022; }
.bar .fill{ position:absolute; inset:1px; width:100%; transition:width .15s; }
.bar.hp .fill{ background:linear-gradient(#d33,#7a1414); }
.bar.armor .fill{ background:linear-gradient(#5ca8e0,#2a5f8f); }
.bar.shield .fill{ background:linear-gradient(#ffe07a,#c8941a); }
.bar.shield{ box-shadow:inset 0 0 0 1px #7a5a1a, 0 0 8px rgba(255,200,80,.4); }
.bar.stamina{ height:8px; } .bar.stamina .fill{ background:linear-gradient(#e8c44e,#a07a1a); }
.bar span{ position:absolute; inset:0; text-align:center; font-size:11px; line-height:18px;
  text-shadow:1px 1px 0 #000; color:#fff; }
.hud-weapon{ display:flex; align-items:center; gap:8px; }
#hudGun{ image-rendering:pixelated; }
.wpn-name{ font-size:13px; font-weight:bold; }
.ammo{ font-size:22px; font-weight:bold; color:#fff; text-shadow:1px 1px 0 #000; }
.ammo.low{ color:var(--blood); }
.hud-belt{ margin-left:auto; display:flex; gap:6px; }
.belt-item{ width:44px; height:44px; background:rgba(0,0,0,.6); border:2px solid var(--edge);
  position:relative; display:flex; align-items:center; justify-content:center; }
.belt-item.active{ border-color:var(--cash); }
.belt-item .qty{ position:absolute; bottom:1px; right:3px; font-size:12px; font-weight:bold; color:#fff; }
.belt-item .key{ position:absolute; top:0; left:2px; font-size:9px; color:var(--dim); }
.belt-item canvas{ image-rendering:pixelated; }

.wave-banner{ position:absolute; top:38%; left:0; right:0; text-align:center;
  font-size:42px; font-weight:bold; letter-spacing:6px; color:var(--blood);
  text-shadow:3px 3px 0 #000, 0 0 30px rgba(180,30,30,.7); }
.wave-banner .sub{ display:block; font-size:18px; color:var(--ink); letter-spacing:3px; margin-top:6px; }

/* overlays */
.overlay{ background:rgba(4,4,4,.82); display:none; }
.overlay.active{ display:flex; align-items:center; justify-content:center; }
.oc{ text-align:center; background:var(--panel); border:3px solid var(--wood-edge);
  padding:30px 50px; box-shadow:0 0 40px rgba(0,0,0,.8); }
.wc-title{ font-size:38px; color:var(--good); letter-spacing:3px; text-shadow:2px 2px 0 #000; margin-bottom:14px; }
.go-title{ font-size:38px; color:var(--blood); letter-spacing:3px; text-shadow:2px 2px 0 #000, 0 0 20px rgba(180,30,30,.6); margin-bottom:14px; }
.wc-stats{ font-size:15px; line-height:2; margin-bottom:18px; }
.wc-stats .row{ display:flex; justify-content:space-between; gap:40px; }
.wc-stats b{ color:var(--cash); }

/* squad / romance */
.squad-oc{ max-width:620px; }
.squad-list{ display:flex; flex-direction:column; gap:10px; max-width:560px; margin:0 auto 14px; }
.squad-row{ display:flex; gap:12px; align-items:center; background:var(--panel2); border:2px solid var(--edge);
  border-left:4px solid var(--warn); padding:8px; text-align:left; }
.squad-portrait{ image-rendering:pixelated; background:#0d100b; border:1px solid #000; flex:none; }
.squad-info{ flex:1; min-width:0; }
.squad-name{ font-weight:bold; font-size:14px; color:#fff; }
.hearts{ color:#ff5a8a; letter-spacing:3px; margin:2px 0; font-size:14px; }
.love-status{ color:var(--warn); font-size:11px; letter-spacing:1px; margin-left:6px; }
.love-bar{ height:7px; background:#000; box-shadow:inset 0 0 0 1px #5a2a3a; margin:3px 0 2px; max-width:240px; }
.love-fill{ height:100%; background:linear-gradient(#ff7aa8,#c8325f); transition:width .2s; }
.squad-line{ font-size:12px; color:var(--ink); font-style:italic; margin:4px 0; min-height:2.6em; line-height:1.35; }
.squad-btns{ display:flex; gap:6px; margin-top:4px; }
.squad-btns .btn{ font-size:12px; padding:5px 12px; }
#endArt{ image-rendering:pixelated; display:block; margin:0 auto 8px; }
.end-text{ max-width:520px; font-size:14px; line-height:1.6; color:var(--ink); margin:0 auto 16px; }