*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;}
body,html{width:100%;height:100%;overflow:hidden;background-color:#000;font-family:Arial,sans-serif;touch-action:none;}
#loadingScreen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:1000;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#e0e62a;}
#loadBarContainer{width:80%;max-width:400px;height:20px;border:2px solid #5a5a5a;margin-top:20px;margin-bottom:10px;}
#loadBar{width:0%;height:100%;background:#2a8b2a;transition:width 0.1s;}
#gameContainer{position:relative;width:100vw;height:100vh;}
#gameCanvas{display:block;width:100%;height:100%;}
#uiOverlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;}
#topBar{background-color:rgba(0,0,0,0.7);color:#fff;padding:10px 15px;display:flex;justify-content:space-between;font-size:14px;pointer-events:auto;align-items:center;}
#rosterPanel{position:absolute;top:110px;left:10px;display:flex;flex-direction:column;gap:5px;pointer-events:auto;z-index:50;}
.roster-btn{background-color:rgba(30,30,30,0.8);color:#fff;border:2px solid #5a5a5a;padding:10px;border-radius:5px;font-weight:bold;text-align:left;min-width:120px;transition:border-color 0.2s;}
.roster-btn.active{border-color:#e0e62a;background-color:rgba(90,90,90,0.9);}
.roster-btn .sub-text{font-size:10px;color:#aaa;display:block;margin-top:3px;}
#safehouseMenu,#survivorMenu,#buildMenu{background-color:rgba(30,30,30,0.95);color:#fff;padding:20px;border:2px solid #5a5a5a;pointer-events:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:350px;border-radius:8px;display:flex;flex-direction:column;gap:10px;z-index:80;}
#exitPromptPanel,#loopPromptPanel,#walkiePromptPanel{background-color:rgba(30,30,30,0.98);color:#fff;padding:20px;border:2px solid #e0e62a;pointer-events:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:350px;border-radius:8px;display:flex;flex-direction:column;gap:10px;z-index:2000 !important;box-shadow:0 0 20px #000;}
.hidden{display:none !important;}
h3{margin-bottom:10px;text-align:center;font-size:16px;color:#e0e62a;}
button{background-color:#5a5a5a;color:#fff;border:2px solid #333;padding:12px;font-size:14px;border-radius:5px;font-weight:bold;text-transform:uppercase;}
button:active{background-color:#7c71f4;border-color:#fff;}
#shSurvivorList div{background:#222;padding:10px;margin-bottom:5px;display:flex;justify-content:space-between;align-items:center;border:1px solid #444;}
#shSurvivorList button{padding:8px;font-size:12px;}
#wpUI{position:absolute;bottom:20px;right:20px;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end;}
#wpEta{display:none;background:rgba(0,0,0,0.8);color:#fff;padding:10px;margin-top:10px;border-radius:5px;font-weight:bold;}
#wpInfoScreen{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(30,30,30,0.98);padding:20px;border:2px solid #5a5a5a;pointer-events:auto;flex-direction:column;gap:10px;color:#fff;width:90%;max-width:350px;border-radius:8px;z-index:90;}
#wpInfoScreen label{display:flex;align-items:center;gap:10px;font-size:14px;}
#wpInfoScreen input[type="range"]{width:100%;margin-top:5px;}
#zoomControls{position:absolute;left:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;pointer-events:auto;z-index:95;}
#zoomControls button{background-color:rgba(90,90,90,0.8);color:#fff;border:2px solid #333;width:45px;height:45px;font-size:28px;border-radius:5px;font-weight:bold;display:flex;justify-content:center;align-items:center;}
#zoomControls button:active{background-color:#7c71f4;border-color:#fff;}
#survivorStatusPanel{position:absolute;top:50px;left:10px;transform:none;background:rgba(30,30,30,0.95);padding:10px 15px;border:2px solid #5a5a5a;border-radius:8px;display:flex;align-items:center;gap:10px;pointer-events:auto;color:#fff;white-space:nowrap;z-index:100;font-size:14px;}
#survivorStatusPanel button{background-color:#cc0000;padding:8px 12px;font-size:12px;}
#btnCharSurv{background-color:#2a8b2a !important;}
#btnAggSurv{background-color:#d49a6a !important;color:#000;font-weight:bold;}
#masterPanel{background-color:rgba(30,30,30,0.98);color:#fff;padding:10px;border:2px solid #5a5a5a;pointer-events:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:98%;max-width:420px;max-height:95vh;overflow-y:auto;border-radius:8px;display:flex;flex-direction:column;gap:5px;z-index:110;}
.inv-grid{display:grid;gap:3px;background:#111;padding:5px;border:1px solid #444;overflow-y:auto;}
.inv-slot{background:#2a2a2a;border:1px solid #555;aspect-ratio:1;position:relative;display:flex;justify-content:center;align-items:center;font-size:9px;text-align:center;word-break:break-word;padding:2px;cursor:pointer;color:#ccc;min-height:35px;}
.inv-slot:active{background:#5a5a5a;}
.inv-qty{position:absolute;bottom:1px;right:2px;font-size:10px;font-weight:bold;color:#e0e62a;text-shadow:1px 1px 1px #000;}
#paperdoll{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;gap:5px;position:relative;margin-bottom:5px;text-align:center;}
#body-silhouette{grid-column:2;grid-row:1 / span 3;font-size:60px;display:flex;align-items:center;justify-content:center;color:#5a5a5a;z-index:1;}
.equip-slot{background:#222;border:2px dashed #5a5a5a;border-radius:5px;padding:2px;z-index:2;display:flex;align-items:center;justify-content:center;font-size:9px;color:#aaa;cursor:pointer;min-height:40px;}
.equip-slot.filled{border:2px solid #e0e62a;background:rgba(51,51,51,0.8);color:#fff;}
#slot-head{grid-column:2;grid-row:1;margin-bottom:auto;}
#slot-chest{grid-column:2;grid-row:2;}
#slot-legs{grid-column:2;grid-row:3;}
#slot-hands{grid-column:1;grid-row:2;}
#slot-feet{grid-column:1;grid-row:3;}
#slot-tool{grid-column:3;grid-row:2;}
#mobileControls{position:absolute;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;}
#leftStickBase{position:absolute;bottom:30px;left:30px;width:120px;height:120px;background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.3);border-radius:50%;pointer-events:auto;touch-action:none;z-index:1000;}
#rightStickBase{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:none;pointer-events:auto;touch-action:none;z-index:990;display:none;}
#leftStickKnob{position:absolute;top:50%;left:50%;width:50px;height:50px;background:rgba(255,255,255,0.5);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;}
#rightStickKnob{position:absolute;width:50px;height:50px;background:rgba(255,255,255,0.3);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;display:none;}
#btnShoot,#btnMelee{position:absolute;bottom:170px;right:30px;pointer-events:auto;background:rgba(200,0,0,0.6);border:2px solid #fff;border-radius:50%;width:65px;height:65px;color:#fff;font-size:10px;font-weight:bold;display:flex;justify-content:center;align-items:center;touch-action:none;text-align:center;padding:5px;box-shadow:0 4px 6px rgba(0,0,0,0.5);z-index:1000;}
#btnMelee{right:110px;bottom:110px;background:rgba(200,100,0,0.6);}
#errorConsole{background-color:rgba(40,0,0,0.98);padding:20px;border:2px solid #ff5555;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:400px;border-radius:8px;display:flex;flex-direction:column;gap:10px;z-index:9999;pointer-events:auto;}
#errorLog{height:150px;overflow-y:auto;background:#000;padding:10px;font-family:monospace;font-size:12px;color:#ffaaaa;border:1px solid #ff5555;word-wrap:break-word;}