:root {
  --ink: #070a0e;
  --panel: rgba(11, 18, 24, .94);
  --panel2: rgba(18, 29, 37, .96);
  --line: rgba(167, 195, 197, .22);
  --paper: #e5eee8;
  --muted: #829293;
  --gold: #e2b557;
  --gold2: #ffdc79;
  --red: #e34f43;
  --green: #62c982;
  --cyan: #61c8d4;
  --blue: #4d87d7;
  --purple: #a678d0;
  --shadow: 0 12px 45px rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body {
  color: var(--paper);
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  user-select: none;
  -webkit-user-select: none;
}
button, input, select { font: inherit; }
button {
  color: var(--paper);
  background: #172229;
  border: 1px solid #42525a;
  padding: .82rem 1.15rem;
  cursor: pointer;
  letter-spacing: .095em;
  font-size: .77rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform .12s, color .12s, background .12s, border-color .12s, box-shadow .12s;
}
button:hover { background: #24323a; border-color: var(--gold); color: var(--gold2); transform: translateY(-1px); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .38; filter: grayscale(.7); pointer-events: none; }
button.primary {
  color: #16140e;
  border-color: #ffe6a0;
  background: linear-gradient(#f0c96b,#b88635);
  box-shadow: inset 0 1px rgba(255,255,255,.48), 0 5px 18px rgba(226,181,87,.18);
}
button.primary:hover { color: #080604; background: linear-gradient(#ffdf80,#d6a347); box-shadow: 0 6px 24px rgba(226,181,87,.32); }
button.danger { color: #ff938b; border-color: #753b39; }
kbd, .keycap {
  display: inline-grid; place-items: center; min-width: 22px; min-height: 22px; padding: 0 5px;
  color: #d5dedb; background: #0c1217; border: 1px solid #56656a; border-bottom-width: 3px;
  border-radius: 3px; font: 800 .68rem/1 ui-monospace, Consolas, monospace;
}
.hidden { display: none !important; }

#game-shell { position: fixed; inset: 0; overflow: hidden; background: #07100e; isolation: isolate; }
#game {
  position: absolute; width: 100%; height: 100%; inset: 0; display: block; image-rendering: pixelated;
  cursor: none; background: #0a1310;
}
#game-shell:after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .22;
  background: repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0,rgba(255,255,255,.016) 1px,transparent 1px,transparent 3px);
  mix-blend-mode: overlay;
}
.glass {
  background: linear-gradient(135deg,rgba(15,24,30,.94),rgba(8,13,17,.86));
  border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(5px);
}

/* HUD */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; padding: max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.hud-top { display: grid; grid-template-columns: minmax(260px,340px) minmax(220px,310px) minmax(260px,340px); justify-content: space-between; align-items: start; gap: 18px; }
.survivor-card,.status-card,.wave-card { min-height: 82px; padding: 10px 12px; position: relative; overflow: hidden; }
.survivor-card { display: flex; gap: 11px; border-left: 3px solid var(--gold); }
.survivor-card:after,.status-card:after { content:""; position:absolute; width:70px; height:70px; right:-35px; top:-35px; border:1px solid rgba(255,255,255,.07); transform:rotate(45deg); }
.portrait { width: 61px; height: 61px; flex: 0 0 auto; border: 1px solid #566063; background: #182227; image-rendering: pixelated; background-position: center; background-size: cover; }
.survivor-info { flex: 1; min-width: 0; }
.name-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .88rem; letter-spacing: .12em; }
.name-line span { color: var(--gold2); font: 800 .57rem ui-monospace,monospace; }
.meter { position: relative; height: 13px; margin: 3px 0; overflow: hidden; background: #080c0f; border: 1px solid rgba(184,204,201,.24); }
.meter i { display:block; width:100%; height:100%; background: linear-gradient(90deg,#ad342e,#e35a4e); transition: width .15s; }
.meter span { position:absolute; inset:0 5px; text-align:right; font: 800 9px/11px ui-monospace,monospace; text-shadow: 1px 1px #000; }
.meter.armor { height: 9px; }.meter.armor i { background: linear-gradient(90deg,#3c75b3,#6ca3df); }
.meter.stamina { height: 5px; border:0; }.meter.stamina i { background: var(--gold); }
.wave-card { text-align:center; border-top: 2px solid #7d332e; padding-top: 8px; }
.phase-label { color:#f2897c; font: 900 .58rem ui-monospace,monospace; letter-spacing:.28em; }
.phase-label.prep { color:#77d3c4; }
.wave-line { display:flex; justify-content:center; gap:24px; margin: 6px 0 4px; align-items:baseline; }
.wave-line span { font: 900 .84rem ui-monospace,monospace; letter-spacing:.1em; }
.wave-line strong { color:#fff; font: 800 1.38rem ui-monospace,monospace; }
.threat-meter { height: 4px; background:#06090b; margin: 4px; }.threat-meter i { display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--red));transition:width .25s; }
.wave-card small { color:#839091; font: 700 .52rem ui-monospace,monospace; letter-spacing:.1em; }
.status-card { border-right:3px solid var(--green); }
.core-readout { display:flex; justify-content:space-between; align-items:center; font:800 .62rem ui-monospace,monospace; letter-spacing:.11em; }
.core-readout strong { color:#a8e2b7; font-size:.72rem; }
.meter.core { height:9px;margin:6px 0 8px; }.meter.core i { background:linear-gradient(90deg,#319453,#6fd48b); }
.resource-strip { display:flex; justify-content:flex-end; gap:6px; }
.resource { display:flex; align-items:center; gap:4px; padding:3px 6px; background:#0c1215; border:1px solid rgba(255,255,255,.09); font:800 .62rem ui-monospace,monospace; }
.resource i,.cost i { width:8px;height:8px;display:inline-block;transform:rotate(45deg); }
.resource.wood i,.cost.wood i { background:#b8793e }.resource.scrap i,.cost.scrap i{background:#96a3a5}.resource.chemicals i,.cost.chemicals i{background:#6bc08b}.resource.components i,.cost.components i{background:#cf9be1}
.objective { position:absolute; left:17px; top:111px; padding:7px 11px; max-width:340px; color:#b5c1be; font:700 .6rem ui-monospace,monospace; letter-spacing:.05em; border-left:2px solid var(--gold); }
.objective strong { display:block;color:var(--gold2);font-size:.68rem;margin-bottom:2px; }
.boss-bar { position:absolute; top:118px; left:50%; transform:translateX(-50%); width:min(520px,58vw); padding:7px 10px;text-align:center; }
.boss-bar span { color:#e9998e; font:900 .66rem ui-monospace,monospace;letter-spacing:.2em; }
.boss-bar>div {height:8px;background:#09080a;border:1px solid #5f3538;margin-top:5px}.boss-bar i{height:100%;display:block;background:linear-gradient(90deg,#702b33,#e25854)}
.interact-prompt { position:absolute; left:50%; bottom:148px; transform:translateX(-50%); padding:7px 12px; background:rgba(5,8,10,.88);border:1px solid var(--gold);font:800 .66rem ui-monospace,monospace;letter-spacing:.06em; }
.hud-bottom { position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(1050px,calc(100% - 28px));display:flex;justify-content:center;align-items:end;gap:9px; }
.ability-card { width:190px;height:70px;padding:9px;display:flex;align-items:center;gap:9px;position:relative;overflow:hidden;border-left:2px solid var(--purple); }
.ability-card>i {position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--purple);transform-origin:left;}
.ability-card .keycap{width:38px;height:38px;font-size:1rem;border-color:#8d6ead}.ability-card strong{display:block;font-size:.68rem;letter-spacing:.09em}.ability-card small{color:#899596;font:700 .52rem ui-monospace,monospace}
.weapon-card { width:280px; min-height:88px;padding:9px 11px;border-bottom:2px solid var(--gold); }
.weapon-top{display:flex;justify-content:space-between;font:900 .63rem ui-monospace,monospace;letter-spacing:.08em}.weapon-top span:last-child{font-size:.52rem}.ammo-line{display:flex;align-items:baseline;gap:7px;margin:2px 0}.ammo-line strong{font:900 1.75rem/1 ui-monospace,monospace}.ammo-line span{color:#92a09e;font:800 .74rem ui-monospace,monospace}.reload-meter{height:3px;background:#06090b;margin:3px 0}.reload-meter i{display:block;height:100%;width:0;background:var(--gold2)}
.weapon-slots{display:flex;gap:4px;margin-top:5px}.weapon-slot{flex:1;padding:3px 5px;border:1px solid rgba(255,255,255,.1);color:#75817f;background:#0a0f12;font:700 .48rem ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.weapon-slot.active{color:var(--gold2);border-color:#8a6c36}
.build-bar{display:none;min-width:400px;height:84px;padding:7px;gap:5px}.build-mode .build-bar{display:flex}.build-mode .weapon-card{display:none}.build-choice{width:68px;position:relative;padding:4px;background:#0a1013;border:1px solid #344148;text-align:center}.build-choice.active{border-color:var(--gold);background:#222116}.build-choice b{display:block;font:900 .48rem ui-monospace,monospace;white-space:nowrap;overflow:hidden}.build-choice small{font:700 .45rem ui-monospace,monospace;color:#a3afac}.build-choice kbd{position:absolute;left:2px;top:2px;min-width:16px;min-height:16px;font-size:.5rem}.build-icon{height:42px;position:relative}.build-icon:before,.build-icon:after{content:"";position:absolute;left:17px;right:17px;top:15px;height:15px;background:#7b5633;border:2px solid #a88252;transform:rotate(-7deg)}.build-icon.turret:before{background:#657174;border-color:#9ca6a7;width:24px;left:18px;border-radius:50%}.build-icon.spike:before{clip-path:polygon(0 100%,25% 0,43% 100%,67% 15%,100% 100%);background:#98a1a0;border:0}.build-icon.light:before{background:#e4cb70;box-shadow:0 0 15px #ffe980;border:0;border-radius:50%;width:15px;left:25px}.build-icon.station:before{background:#445c57;border-color:#7fa59c}.build-icon.reinforced:before{background:#636f72;border-color:#a1aaac}
.quick-actions{height:70px;display:flex;padding:5px;gap:3px}.quick-actions button{position:relative;min-width:58px;padding:4px;background:#0b1114;border-color:#2e3b40;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.48rem}.quick-actions kbd{min-height:18px}.quick-actions em{position:absolute;right:4px;top:2px;color:var(--gold2);font:800 .55rem ui-monospace,monospace}
.quick-actions,.quick-actions button,.build-bar,.build-choice{pointer-events:auto}
#minimap { position:absolute; right:18px; top:114px; z-index:11; width:170px;height:170px;background:rgba(5,10,12,.87);border:1px solid #566264;box-shadow:var(--shadow);image-rendering:pixelated;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%); }
.crosshair{position:absolute;width:28px;height:28px;z-index:12;pointer-events:none;transform:translate(-50%,-50%);border:1px solid rgba(239,232,207,.6);border-radius:50%;filter:drop-shadow(1px 1px #000)}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#f1e6c7}.crosshair:before{width:7px;height:1px;left:10px;top:13px}.crosshair:after{width:1px;height:7px;left:13px;top:10px}.crosshair i{position:absolute;width:3px;height:3px;background:var(--red);left:12px;top:12px}
#damage-vignette{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(130,12,8,.8) 100%);transition:opacity .1s}
#toast-stack{position:absolute;right:18px;top:300px;z-index:40;width:280px;display:flex;flex-direction:column;gap:6px;pointer-events:none}.toast{animation:toastIn .25s ease-out,toastOut .35s 3.2s forwards;background:rgba(12,18,22,.95);border:1px solid #4a575b;border-left:3px solid var(--gold);padding:8px 10px;box-shadow:var(--shadow);font:700 .62rem ui-monospace,monospace}.toast strong{display:block;color:var(--gold2);font-size:.68rem;margin-bottom:2px}.toast.bad{border-left-color:var(--red)}.toast.good{border-left-color:var(--green)}
#loot-feed{position:absolute;left:18px;bottom:110px;z-index:16;pointer-events:none;color:#c9d2ce;text-shadow:1px 1px 2px #000;font:700 .58rem ui-monospace,monospace}.loot-line{animation:feed 3s forwards;margin-top:3px}.loot-line b{color:var(--gold2)}
@keyframes toastIn{from{opacity:0;transform:translateX(25px)}}@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}@keyframes feed{0%{opacity:0;transform:translateY(5px)}10%,75%{opacity:1;transform:none}100%{opacity:0}}

/* Modal system */
.modal-layer{position:absolute;inset:0;z-index:100;pointer-events:none}.screen{position:absolute;inset:0;display:none;pointer-events:auto}.screen.active{display:flex}.panel-screen{align-items:center;justify-content:center;background:rgba(3,6,9,.73);backdrop-filter:blur(4px);padding:24px}.panel{width:min(820px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(145deg,#111c22,#091015 70%);border:1px solid #526066;border-top:3px solid var(--gold);box-shadow:0 28px 90px #000;padding:25px;position:relative}.panel:before{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid rgba(255,255,255,.035)}.panel.wide{width:min(1180px,97vw)}.panel.compact{width:min(370px,92vw);display:flex;flex-direction:column;gap:9px;text-align:center;padding:38px}.panel.compact h2{font-size:2.5rem;margin:0 0 15px}.panel header{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid #344147;margin-bottom:20px;padding-bottom:14px;position:sticky;top:-25px;background:#101a20;z-index:4}.panel h2{margin:3px 0;color:#f1ece0;font:900 1.5rem ui-monospace,monospace;letter-spacing:.04em}.panel h3{margin:0 0 9px;color:#9eaaa8;font:900 .63rem ui-monospace,monospace;letter-spacing:.15em}.eyebrow{color:var(--gold);font:900 .57rem ui-monospace,monospace;letter-spacing:.28em}.close{width:36px;height:36px;padding:0;font-size:1.5rem;line-height:1}.panel p{color:#99a6a4;font-size:.78rem;line-height:1.6}.mandatory .close{display:none}

/* Title */
.title-screen{background:#07100f;align-items:center;padding-left:10vw;overflow:hidden}.title-atmosphere{position:absolute;inset:0;background:radial-gradient(circle at 72% 42%,rgba(178,65,41,.26),transparent 5%),radial-gradient(circle at 70% 45%,rgba(107,57,31,.22),transparent 29%),linear-gradient(90deg,#07100f 22%,rgba(7,16,15,.75) 55%,rgba(5,8,9,.1)),repeating-linear-gradient(147deg,transparent 0 21px,rgba(110,135,118,.04) 22px 23px),linear-gradient(#172720,#050809);}.title-atmosphere:before{content:"";position:absolute;left:55%;bottom:-18%;width:520px;height:75%;opacity:.62;background:linear-gradient(75deg,transparent 42%,#121b18 43% 52%,transparent 53%),linear-gradient(-61deg,transparent 39%,#121b18 40% 49%,transparent 50%);filter:drop-shadow(0 0 35px #08100c)}.title-atmosphere:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.75));animation:titlePulse 7s ease-in-out infinite alternate}@keyframes titlePulse{to{opacity:.7}}
.title-content{position:relative;width:min(630px,82vw);z-index:2}.title-content .eyebrow{font-size:.67rem}.title-content h1{margin:7px 0 0;color:#e8eee8;font:900 clamp(4rem,9vw,8rem)/.82 Impact,"Arial Black",sans-serif;letter-spacing:-.06em;text-shadow:5px 7px #101516,9px 11px rgba(0,0,0,.45)}.title-content h1 span{display:block;color:#d65043;text-shadow:5px 7px #3a1917,9px 11px rgba(0,0,0,.45)}.subtitle{font:700 .85rem ui-monospace,monospace!important;letter-spacing:.13em;color:#a5b1ab!important;margin:25px 0 30px!important}.title-actions{display:flex;flex-direction:column;gap:7px;width:280px}.title-actions button{text-align:left}.title-footer{color:#687673;font:700 .58rem ui-monospace,monospace;margin-top:24px;letter-spacing:.04em}.title-footer span{color:#b2bfba}#version{position:absolute;bottom:18px;right:22px;color:#56635f;font:700 .52rem ui-monospace,monospace;letter-spacing:.13em}

/* Character select */
.character-select{width:min(1100px,97vw)}.character-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.character-card{height:230px;position:relative;overflow:hidden;border:1px solid #425056;background:linear-gradient(160deg,#26353a,#0d1519);cursor:pointer;transition:.16s}.character-card:hover{transform:translateY(-3px);border-color:#8a7451}.character-card.active{border-color:var(--gold2);box-shadow:inset 0 -4px var(--gold),0 7px 22px rgba(226,181,87,.13)}.character-card canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.character-card .char-copy{position:absolute;left:9px;right:9px;bottom:8px;text-shadow:2px 2px #000}.character-card strong{display:block;font:900 1rem ui-monospace,monospace;color:#fff}.character-card small{color:var(--gold2);font:800 .52rem ui-monospace,monospace}.character-detail{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px;min-height:124px;margin:16px 0;padding:16px;background:#0a1115;border:1px solid #303e44}.character-detail h3{color:var(--gold2);font-size:.74rem}.character-detail p{margin:0;font-size:.7rem}.stat-row{display:grid;grid-template-columns:70px 1fr 30px;align-items:center;gap:7px;margin:5px 0;color:#81908d;font:700 .53rem ui-monospace,monospace}.stat-row i{height:4px;background:#1e2b30}.stat-row i:after{content:"";display:block;height:100%;width:var(--v);background:var(--cyan)}.deploy{display:block;margin-left:auto;width:300px}

/* Inventory */
.inventory-layout{display:grid;grid-template-columns:230px 1fr 260px;gap:18px}.equipment-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px}.equip-slot{height:78px;border:1px solid #3b484e;background:#0a1014;padding:7px;position:relative;cursor:pointer}.equip-slot:hover{border-color:#788a8e}.equip-slot span{display:block;color:#6e7d7d;font:800 .48rem ui-monospace,monospace;letter-spacing:.09em}.equip-slot strong{display:block;margin-top:9px;font:800 .63rem ui-monospace,monospace}.equip-slot em{color:var(--gold2);font:700 .48rem ui-monospace,monospace}.stat-block{margin-top:12px;padding:10px;background:#0a1114;border:1px solid #28363b;font:700 .55rem ui-monospace,monospace}.stat-block div{display:flex;justify-content:space-between;margin:5px 0;color:#82918f}.stat-block b{color:#d0d9d4}.section-title{display:flex;justify-content:space-between}.section-title span{color:#74827f;font:700 .55rem ui-monospace,monospace}.inventory-grid{display:grid;grid-template-columns:repeat(6,minmax(54px,1fr));gap:5px}.item-slot{aspect-ratio:1;min-height:59px;position:relative;background:#0a1115;border:1px solid #354249;cursor:pointer;padding:3px;overflow:hidden}.item-slot:hover,.item-slot.active{border-color:#b99a58;background:#171a17}.item-slot canvas{width:100%;height:100%;image-rendering:pixelated}.item-slot .qty{position:absolute;right:4px;bottom:2px;color:white;text-shadow:1px 1px #000;font:900 .56rem ui-monospace,monospace}.item-slot .rarity-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--rarity,#7e8988)}.item-detail,.recipe-detail{background:#091014;border:1px solid #314047;padding:14px;min-height:300px}.empty-inspect{color:#576562;text-align:center;margin-top:90px;font:700 .58rem ui-monospace,monospace}.item-detail .item-preview{height:120px;display:grid;place-items:center;background:#0e171b;border:1px solid #26343a}.item-preview canvas{width:110px;height:110px;image-rendering:pixelated}.item-detail h3{margin-top:14px;color:#eef1ea;font-size:.78rem}.rarity{font:800 .5rem ui-monospace,monospace;letter-spacing:.1em}.item-stats{border-top:1px solid #29363b;margin-top:10px;padding-top:7px}.item-stats div{display:flex;justify-content:space-between;margin:5px 0;color:#83928f;font:700 .53rem ui-monospace,monospace}.item-actions{display:flex;flex-direction:column;gap:5px;margin-top:13px}.item-actions button{padding:.55rem}

/* Craft and armory */
.craft-layout{display:grid;grid-template-columns:130px 1fr 270px;gap:15px}.craft-layout nav{display:flex;flex-direction:column;gap:4px}.craft-layout nav button{padding:.7rem;text-align:left}.craft-layout nav button.active{border-color:var(--gold);color:var(--gold2)}.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-content:start}.recipe-card{height:94px;text-align:left;position:relative;padding:10px;background:#0a1114;border:1px solid #344247;cursor:pointer}.recipe-card:hover,.recipe-card.active{border-color:#a3824a;background:#141817}.recipe-card strong{display:block;font:800 .62rem ui-monospace,monospace;margin-bottom:5px}.recipe-card small{color:#758480;font:700 .5rem ui-monospace,monospace}.recipe-card .can{position:absolute;right:7px;bottom:6px;color:var(--green);font:900 .47rem ui-monospace,monospace}.recipe-card .cannot{color:var(--red)}.cost-list{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.cost{padding:4px 6px;background:#080d10;border:1px solid #2c383d;font:800 .52rem ui-monospace,monospace}.cost.missing{color:#e47b73;border-color:#6e3736}.recipe-detail h3{color:#eef1ea;font-size:.76rem}.recipe-detail button{width:100%;margin-top:10px}.armory-content{display:grid;grid-template-columns:1fr 1fr;gap:15px}.upgrade-column{background:#0a1115;border:1px solid #35434a;padding:17px}.upgrade-column h3{color:#e9ece6;font-size:.77rem}.tier-track{display:flex;align-items:center;gap:5px;margin:18px 0}.tier-node{flex:1;height:9px;background:#253035;border:1px solid #48565a}.tier-node.unlocked{background:var(--gold);box-shadow:0 0 8px rgba(226,181,87,.3)}.upgrade-benefits{min-height:80px;color:#94a29f;font:700 .6rem/1.8 ui-monospace,monospace}.upgrade-column button{width:100%}

/* Perks/end/settings/manual */
.perk-panel{width:min(960px,96vw);text-align:center}.perk-panel h2{font-size:1.7rem}.perk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.perk-card{min-height:245px;background:linear-gradient(160deg,#19252a,#0a1014);border:1px solid #47565b;padding:22px 14px;cursor:pointer;position:relative;overflow:hidden;transition:.16s}.perk-card:hover{border-color:var(--gold2);transform:translateY(-5px);box-shadow:0 12px 28px #000}.perk-card:before{content:"";display:block;width:62px;height:62px;margin:0 auto 18px;border:2px solid var(--gold);transform:rotate(45deg);background:radial-gradient(circle,#564a2b,#151916)}.perk-card strong{display:block;font:900 .83rem ui-monospace,monospace;color:#f6edd8}.perk-card small{display:block;color:var(--gold);font:800 .5rem ui-monospace,monospace;margin:7px}.perk-card p{font-size:.68rem}.settings-panel{width:min(500px,94vw)}.settings-panel label{display:grid;grid-template-columns:1fr 180px;align-items:center;margin:10px 0;padding:9px;background:#0a1114;border:1px solid #2b383e;color:#a9b4b1;font:800 .6rem ui-monospace,monospace}.settings-panel input,.settings-panel select{accent-color:var(--gold)}.settings-panel button{width:100%;margin-top:6px}.manual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.manual article{background:#0a1115;border:1px solid #303e44;border-top:2px solid #61747a;padding:14px}.manual article h3{color:var(--gold2)}.manual article p{font-size:.68rem;margin:0}.end-panel{text-align:center;width:min(520px,95vw);padding:45px}.end-panel h2{font-size:2.3rem;color:#e16b61}.end-panel.victory h2{color:#e6c56b}.end-panel button{display:block;width:100%;margin-top:8px}.end-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:20px 0}.end-stats div{background:#0b1215;border:1px solid #303d42;padding:12px}.end-stats b{display:block;font:900 1.25rem ui-monospace,monospace;color:#fff}.end-stats span{color:#788783;font:700 .5rem ui-monospace,monospace;letter-spacing:.1em}

/* Touch */
.touch-ui{position:absolute;inset:0;z-index:30;pointer-events:none}.touch-stick{position:absolute;bottom:35px;width:120px;height:120px;border:2px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(8,12,14,.35);pointer-events:auto;touch-action:none}.touch-stick i{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(210,222,216,.3);border:1px solid rgba(255,255,255,.35);left:32px;top:32px}.touch-stick#move-stick{left:25px}.touch-stick#aim-stick{right:25px}.touch-ui button{position:absolute;width:49px;height:49px;border-radius:50%;padding:0;pointer-events:auto;touch-action:none;background:rgba(13,20,24,.7)}.touch-ui button[data-touch="ability"]{right:160px;bottom:135px}.touch-ui button[data-touch="roll"]{right:95px;bottom:165px}.touch-ui button[data-touch="reload"]{right:27px;bottom:168px}.touch-ui button[data-touch="interact"]{left:160px;bottom:145px}.touch-ui button[data-touch="build"]{left:220px;bottom:105px}.touch-ui button[data-touch="inventory"]{left:220px;bottom:160px}

@media (max-width:900px){
  .hud-top{grid-template-columns:minmax(210px,1fr) minmax(190px,.7fr)}.status-card{display:none}.survivor-card,.wave-card{min-height:70px}.objective{top:96px}#minimap{top:96px;width:130px;height:130px}.ability-card{width:150px}.quick-actions{display:none}.inventory-layout{grid-template-columns:190px 1fr}.item-detail{grid-column:1/-1}.craft-layout{grid-template-columns:100px 1fr}.recipe-detail{grid-column:1/-1}.character-grid{grid-template-columns:repeat(5,150px);overflow-x:auto}.manual-grid{grid-template-columns:1fr 1fr}.inventory-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:650px){
  .hud-top{grid-template-columns:1fr 135px}.portrait{width:44px;height:44px}.survivor-card{padding:6px}.wave-card{padding:5px}.wave-line{gap:8px}.wave-line strong{font-size:1rem}.objective,#minimap{display:none}.hud-bottom{bottom:6px}.weapon-card{width:190px}.ability-card{width:115px}.ability-card .keycap{display:none}.build-bar{min-width:300px;overflow-x:auto}.panel-screen{padding:7px}.panel{padding:14px}.panel header{top:-14px}.inventory-layout,.craft-layout,.armory-content{display:block}.equipment-slots{margin-bottom:12px}.inventory-grid{grid-template-columns:repeat(4,1fr)}.recipe-grid{grid-template-columns:repeat(2,1fr)}.craft-layout nav{flex-direction:row;overflow:auto;margin-bottom:8px}.character-grid{grid-template-columns:repeat(5,140px)}.character-detail{grid-template-columns:1fr}.perk-grid{grid-template-columns:1fr;max-height:60vh;overflow:auto}.manual-grid{grid-template-columns:1fr}.title-screen{padding-left:7vw}.title-content h1{font-size:4rem}}
@media (pointer:coarse){#crosshair{display:none}.touch-ui:not(.hidden){display:block!important}.hud-bottom{bottom:5px;transform:translateX(-50%) scale(.82);transform-origin:bottom center}}

/* Friends squad HUD and command wheel */
.squad-hud{position:absolute;left:17px;top:158px;width:245px;padding:8px;border-left:2px solid var(--cyan);pointer-events:auto;transition:opacity .18s,transform .18s}.squad-hud-head{display:flex;justify-content:space-between;align-items:center;padding:1px 3px 6px;color:#8fa09e;font:900 .52rem ui-monospace,monospace;letter-spacing:.12em}.squad-hud-head strong{color:#79d5dd;font-size:.55rem}.squad-cards{display:flex;flex-direction:column;gap:4px}.squad-card{height:60px;display:grid;grid-template-columns:48px 1fr 34px;gap:6px;align-items:center;position:relative;padding:4px;background:rgba(5,10,13,.88);border:1px solid #34444a;overflow:hidden}.squad-card.downed{border-color:#943f3b;background:rgba(45,12,13,.9);animation:squadDanger .8s ease-in-out infinite alternate}.squad-card.evacuated{filter:grayscale(1);opacity:.52}.squad-card canvas{width:46px;height:50px;image-rendering:pixelated;background:#172126;border:1px solid #415056}.squad-card-copy{min-width:0}.squad-card-copy strong{display:flex;justify-content:space-between;color:#edf1e9;font:900 .59rem ui-monospace,monospace;letter-spacing:.06em}.squad-card-copy strong em{color:#7f9291;font-size:.44rem}.squad-card-copy small{display:block;color:#80908d;font:700 .46rem ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0}.squad-hp{height:5px;background:#080c0e;border:1px solid #263238}.squad-hp i{display:block;height:100%;background:linear-gradient(90deg,#3f9c63,#6ad188);transition:width .15s}.squad-card.downed .squad-hp i{background:#d94b44}.squad-assist{width:31px;height:39px;padding:0;border-color:#50636a;background:#111b20;font:900 .5rem ui-monospace,monospace;letter-spacing:0}.squad-assist.ready{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 9px rgba(226,181,87,.18)}.squad-assist i{display:block;font-style:normal}.squad-assist small{font-size:.4rem;color:#80908e}.signal-row{display:grid;grid-template-columns:40px 1fr 26px;gap:5px;align-items:center;margin-top:6px;color:#7f908e;font:800 .46rem ui-monospace,monospace}.signal-row b{text-align:right;color:#76d5df}.signal-meter{height:5px;background:#070c0e;border:1px solid #28363b}.signal-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3b8d9d,#71d9e2);transition:width .15s}.squad-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;margin-top:6px}.squad-actions button{padding:4px 2px;min-height:27px;font-size:.42rem;letter-spacing:.02em}.squad-actions kbd{min-width:15px;min-height:15px;font-size:.42rem;margin-right:2px}@keyframes squadDanger{to{box-shadow:inset 0 0 12px rgba(227,68,60,.28)}}

.command-wheel{position:absolute;left:50%;top:50%;width:420px;height:420px;transform:translate(-50%,-50%);z-index:70;border-radius:50%;background:radial-gradient(circle,rgba(7,12,15,.96) 0 26%,rgba(11,19,24,.9) 27% 68%,rgba(5,8,11,.36) 69%);border:1px solid rgba(110,154,160,.35);box-shadow:0 20px 70px #000;pointer-events:auto}.command-wheel:before{content:"";position:absolute;inset:72px;border:1px solid rgba(118,203,213,.2);border-radius:50%;pointer-events:none}.command-wheel-title{position:absolute;left:120px;right:120px;top:166px;text-align:center;z-index:3}.command-wheel-title span{display:block;color:#6f8585;font:800 .45rem ui-monospace,monospace;letter-spacing:.12em}.command-wheel-title strong{color:#8ce1e8;font:900 .68rem ui-monospace,monospace}.command-wheel>button{position:absolute;width:116px;height:64px;padding:6px;background:rgba(15,25,30,.97);border-color:#3f555c;text-align:left;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)}.command-wheel>button:hover,.command-wheel>button.active{background:#1c3438;border-color:#7de1e8;color:#9aeaf0}.command-wheel>button strong{display:block;font-size:.56rem;margin:2px 0}.command-wheel>button small{display:block;color:#778b8b;font:700 .43rem ui-monospace,monospace}.command-wheel>button:nth-of-type(1){left:152px;top:26px}.command-wheel>button:nth-of-type(2){right:31px;top:100px}.command-wheel>button:nth-of-type(3){right:31px;bottom:93px}.command-wheel>button:nth-of-type(4){left:152px;bottom:24px}.command-wheel>button:nth-of-type(5){left:31px;bottom:93px}.command-wheel>button:nth-of-type(6){left:31px;top:100px}.command-wheel-center{position:absolute;left:190px;top:190px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0b1418;border:1px solid #5f777c;color:#8adbe2;font:900 .72rem ui-monospace,monospace}