:root {color-scheme:dark; --panel:rgba(13,22,30,.87);--stroke:rgba(151,186,185,.25);--amber:#f6bd60;--pale:#eaf3eb;--muted:#a6bcb9;--green:#7bd09b}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:#111820;color:var(--pale);user-select:none;-webkit-user-select:none}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}#game,#game canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#game canvas{touch-action:none}.hidden{display:none!important}.panel{background:var(--panel);border:1px solid var(--stroke);border-radius:15px;box-shadow:0 7px 25px #0003;backdrop-filter:blur(8px)}#hud{position:fixed;inset:0;pointer-events:none}#hud button,#hud .toolbar,#hud .hotbar,#hud .joystick,#hud .mobile-buttons{pointer-events:auto}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px}.vitals{width:245px;padding:11px 12px}.stat-line{display:flex;gap:7px;align-items:center;margin:3px 0;font-size:10px;font-weight:800}.stat-line>span{width:80px}.stat-line>b{width:25px;text-align:right;font-size:11px}.meter{flex:1;min-width:20px;border-radius:8px;height:9px;background:#1d2a2e;overflow:hidden}.fill{width:100%;height:100%;transition:width .25s}.health{background:linear-gradient(90deg,#d54252,#fc6977)}.stamina{background:#e9be65}.food{background:#eb9d61}.water{background:#67bbda}.time{text-align:center;padding:10px 17px;min-width:155px}.time strong{font-size:15px;color:var(--amber);letter-spacing:1.7px}.time #clock{font-size:26px;font-weight:900;line-height:1.2}.time small{display:block;color:var(--muted);font-size:11px}.time.blood{background:#5c1218e0;border-color:#fa5c64;box-shadow:0 0 15px #ff36464a}.scores{text-align:right;padding:10px 15px;font-size:14px;min-width:136px}.scores small{display:block;color:var(--muted)}.small-gap{padding-left:8px}.quest{position:absolute;top:158px;left:16px;padding:12px 14px;width:234px;font-size:12px}.eyebrow,.overline{color:var(--amber);font-size:10px;font-weight:900;letter-spacing:2px}.quest strong{display:block;font-size:14px;margin:4px 0}.quest #quest-desc{color:var(--muted)}.quest-progress{margin-top:7px;color:var(--green);font-weight:800}.crosshair{position:absolute;top:50%;left:50%;width:17px;height:17px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 2px #111)}.crosshair span{position:absolute;background:white;border-radius:10px}.crosshair span:first-child{width:17px;height:2px;top:7px}.crosshair span:last-child{height:17px;width:2px;left:7px}.crosshair.hit{filter:drop-shadow(0 0 5px #e74736)}.crosshair.hit span{background:#ff6565}#hitflash{pointer-events:none;position:absolute;inset:0;background:#ff3838;opacity:0;transition:opacity .2s}.prompt{position:absolute;left:50%;top:62%;transform:translateX(-50%);max-width:min(90vw,460px);background:#111f26e3;border:1px solid #c2ab789a;border-radius:10px;padding:9px 14px;text-align:center;color:#fff5d0;font-size:13px}.toast{position:absolute;top:23%;left:50%;transform:translateX(-50%);max-width:70%;background:#152935f0;border:1px solid #bfa66f;border-radius:12px;padding:10px 17px;text-align:center;font-weight:800;font-size:13px;box-shadow:0 6px 40px #0008}.bottom{position:absolute;bottom:13px;left:16px;right:16px;display:flex;align-items:end;justify-content:space-between;gap:8px}.bottom-left{display:flex;flex-direction:column;gap:7px}.resources{padding:8px 13px;font-size:12px;display:flex;gap:12px}.resources b{color:#ffe1aa}.hints{padding:9px 12px;color:var(--muted);font-size:10px}.hints b{color:white}.hotbar{display:flex;padding:6px;gap:5px;align-self:end}.hot-slot{border:2px solid #536363;background:#1c303a;min-width:62px;height:58px;border-radius:10px;color:var(--pale);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.hot-slot.selected{border-color:var(--amber);background:#53422d}.hot-slot small{font-size:9px;max-width:68px;white-space:nowrap;overflow:hidden}.hot-slot .emoji{font-size:20px}.hot-slot i{position:absolute;top:2px;left:4px;font-size:9px;color:#c5c9c8;font-style:normal}.hot-slot .count{position:absolute;top:1px;right:3px;font-size:9px;color:#fbd191}.bottom-actions{display:flex;gap:5px}.bottom-actions button,.toolbar button{border:1px solid var(--stroke);border-radius:11px;color:var(--pale);background:var(--panel);padding:12px}.toolbar{position:absolute;right:15px;top:125px;display:flex;flex-direction:column;gap:5px}.toolbar button{text-align:left;padding:9px 10px;font-size:11px}.toolbar button:hover,.bottom-actions button:hover{background:#34505b}.fullscreen{position:fixed;inset:0;background:radial-gradient(circle at 35% 40%,#34524be3,#09131cf7 66%);z-index:80;display:flex;align-items:center;justify-content:center;padding:18px}.hero-card{width:min(100%,550px);padding:clamp(20px,4vw,48px);border:1px solid #b7bf9a55;background:linear-gradient(145deg,#1c3535f7,#101b25f9);box-shadow:0 22px 90px #000b;border-radius:24px}.hero-card h1{font-size:clamp(40px,5vw,62px);line-height:.98;letter-spacing:-2px;margin:15px 0 8px}.hero-card h1 em{font-style:normal;color:var(--amber)}.subtitle{color:#9be5a5;letter-spacing:3px;font-weight:800;text-transform:uppercase;font-size:13px}.hero-card p{line-height:1.6;color:#c4d2cc;font-size:14px}.menu-actions{display:flex;gap:10px;margin:25px 0}.primary,.secondary{border:0;border-radius:12px;font-weight:900;padding:15px 20px}.primary{color:#172229;background:linear-gradient(135deg,#ffc86b,#f5a65a);box-shadow:0 4px 20px #eead5a44}.secondary{background:#293f45;border:1px solid #678582;color:#e0f2ed}.primary:hover{filter:brightness(1.1)}.secondary:hover{background:#3a5359}.menu-note{font-size:11px!important;color:#a5bbb7!important}.version{color:#789c9b;font-size:10px}.modal{display:flex;flex-direction:column;width:min(96vw,790px);max-height:min(88vh,900px);background:#10212b;border:1px solid #56736e;border-radius:18px;box-shadow:0 15px 80px #000c;overflow:hidden}.modal-header{padding:16px 20px;border-bottom:1px solid #3e5459;display:flex;justify-content:space-between;align-items:start}.modal-header small{font-size:10px;color:var(--amber);letter-spacing:2px}.modal-header h2{font-size:24px;margin:2px 0}.modal-content{overflow:auto;padding:18px 20px;min-height:140px}.modal-footer{padding:11px 20px;font-size:11px;border-top:1px solid #3e5459;color:#96b0ac}.close{border:1px solid #648080;background:#233a42;color:white;border-radius:10px;width:38px;height:38px}.grid-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px}.item-card{min-height:84px;text-align:left;background:#1b323b;border:1px solid #466269;border-radius:12px;padding:10px;color:#dcebe5}.item-card b{display:block;font-size:12px}.item-card small{color:#a3bcb8}.item-card .item-icon{font-size:23px}.item-card .qty{color:#f5d38a;float:right;font-weight:900}.item-card:disabled{opacity:.42;cursor:not-allowed}.item-card:hover:not(:disabled){background:#2c4e54;border-color:var(--amber)}.item-card .cost{margin-top:5px;color:#9bb3b4;font-size:10px}.item-card .cost.bad{color:#ed8585}.section-title{font-weight:900;font-size:14px;color:var(--amber);margin:15px 0 10px}.note{font-size:12px;color:#aac2bd;line-height:1.6;margin:0 0 14px}.pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.pill{background:#223c45;border:1px solid #4a7477;border-radius:8px;color:white;padding:8px 10px;font-size:12px}.pill.active{border-color:var(--amber);background:#6b4b31}.quest-row{margin:8px 0;padding:10px;background:#203641;border:1px solid #3b5559;border-radius:10px}.quest-row b{color:#f7c98a}.quest-row small{display:block;color:#a8c0bb}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}.skill{border:1px solid #425d61;background:#1e3540;padding:12px;border-radius:12px}.skill b,.skill small{display:block}.skill small{color:#9eadaa;margin:6px 0}.skill button{padding:7px 10px;background:#6d9968;border:0;border-radius:7px;color:#0b210e;font-weight:900}.skill button:disabled{opacity:.5}.map-canvas{width:100%;aspect-ratio:1.8;border-radius:12px;background:#28393b;border:1px solid #77928b}.two-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.narrow-button{padding:7px 11px;background:#315361;border:1px solid #67857f;border-radius:8px;color:white;font-size:11px}.accent{color:var(--amber)}.warning{color:#ff968b}.success{color:#9debab}.hidden-mobile{display:block}.mobile{display:none}.end-card{text-align:center}.end-card h1{font-size:33px}.end-stats{line-height:2;color:#ffd199;margin:12px 0}.end-card button{margin:5px}#fatal{z-index:100}
@media(max-width:900px){.hints{display:none}.hot-slot{min-width:50px;height:53px}.topbar{padding:7px}.vitals{width:181px;padding:7px}.stat-line>span{width:68px;font-size:9px}.stat-line{gap:3px}.time{min-width:118px;padding:7px}.time #clock{font-size:21px}.scores{min-width:106px;font-size:11px;padding:8px}.quest{top:110px;left:7px;width:180px}.toolbar{right:7px;top:105px}.toolbar button{padding:9px;font-size:14px}.toolbar button span{display:none}.bottom{left:7px;right:7px;bottom:8px}.resources{font-size:10px}.hotbar{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}.bottom-actions{display:none}}
@media(pointer:coarse),(max-width:700px){.mobile{display:block;position:absolute;inset:0;pointer-events:none}.joystick{pointer-events:auto;position:absolute;left:16px;bottom:95px;width:112px;height:112px;border-radius:50%;background:#2b3f4788;border:2px solid #ffffff55;touch-action:none}.stick{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#ffcb70ba;border:2px solid #ffe5af}.mobile-buttons{pointer-events:auto;position:absolute;bottom:90px;right:13px;display:grid;grid-template-columns:repeat(2,62px);gap:7px}.mobile-buttons button{height:55px;border-radius:14px;border:1px solid #ffce7e;color:white;background:#283944de;font-size:11px;font-weight:900}.mobile-buttons #mobile-attack{background:#b15b3fe6}.mobile-help{position:absolute;right:12px;bottom:212px;font-size:9px;color:#f4e6c2}.bottom{bottom:8px}.hotbar{bottom:0}.hot-slot{min-width:40px;width:40px;height:43px;padding:0}.hot-slot small{font-size:7px}.hot-slot .emoji{font-size:16px}.hot-slot i,.hot-slot .count{font-size:8px}.resources{display:none}.quest{top:102px;width:150px;font-size:10px;padding:8px}.quest strong{font-size:11px}.time{min-width:95px}.time strong{font-size:12px}.time #clock{font-size:19px}.time small{font-size:9px}.scores{min-width:83px}.vitals{width:145px}.stat-line>span{width:46px;font-size:7px}.stat-line>b{font-size:9px}.topbar{gap:4px}.toolbar{top:155px}.toolbar button{padding:7px;font-size:12px}.hero-card{padding:22px}.menu-actions{flex-direction:column}.modal-content{padding:11px}.modal-header{padding:12px}.grid-items{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px}.item-card{padding:7px}.two-cols{grid-template-columns:1fr}}
@media(max-width:390px){.scores{display:none}.hot-slot{min-width:34px;width:34px}.joystick{bottom:90px;width:95px;height:95px}.stick{left:29px;top:29px;width:34px;height:34px}}

/* Batch 3 exploration tracker */
.explore-guide{position:absolute;top:276px;left:16px;width:234px;padding:10px 13px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.explore-guide strong{color:#f2ca85}.explore-guide small{color:#bed7d0;line-height:1.35}
@media(max-width:900px){.explore-guide{left:7px;top:226px;width:180px;font-size:11px}}
@media(max-width:700px){.explore-guide{top:204px;width:150px;padding:7px;font-size:10px}}

/* Batch 4 environment controls and optional lightweight performance HUD */
.perf-stats{position:absolute;right:16px;bottom:165px;padding:8px 12px;line-height:1.25;font-size:12px;color:#dbf3e8;pointer-events:none;z-index:8;background:#142a32d9;}
#flashlight-indicator{color:#e8d79b;font-weight:800;letter-spacing:.02em}
#flashlight-button{border-color:#d8be81;}
@media(max-width:900px){.perf-stats{right:8px;bottom:140px;font-size:10px}}
@media(max-width:700px){.perf-stats{right:8px;bottom:265px;font-size:9px;max-width:155px}}

/* Batch 5: placement feedback, upgrades and touch construction actions */
.build-guide{position:absolute;left:50%;top:53%;transform:translateX(-50%);width:min(440px,90vw);padding:9px 14px;display:flex;flex-direction:column;gap:3px;text-align:center;border-color:#7bdcb5;color:#d9f7e5;background:#163a34df;font-size:12px;pointer-events:none;}
.build-guide strong{font-size:14px;color:#ffe2a5}.build-guide small{font-size:10px}.build-guide.build-bad{border-color:#ed8c73;background:#4c2524df;color:#ffd3c6}
.upgrade-strip{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 14px;padding:11px;border:1px solid #86ad9b;border-radius:10px;background:#213d3b}.upgrade-strip strong{font-size:12px;color:#f7da9a}.upgrade-strip small{color:#b6ccc5;font-size:11px}.upgrade-strip button{margin-left:auto}.upgrade-strip button:disabled{opacity:.4}
@media(max-width:900px){.build-guide{top:54%;width:min(360px,76vw);font-size:10px}}
@media(pointer:coarse),(max-width:700px){.build-guide{top:46%;left:50%;width:min(300px,78vw);padding:6px 8px;font-size:10px}.build-guide strong{font-size:11px}.build-guide small{font-size:9px}.mobile-buttons{grid-template-columns:repeat(3,58px);right:9px;bottom:97px;gap:4px}.mobile-buttons button{height:44px;font-size:9px}.mobile-help{bottom:240px}}

/* Batch 6: inventory slots, crop management and chest stack controls */
.capacity-card{background:linear-gradient(120deg,#23463e,#1e333e);border:1px solid #62877c;border-radius:12px;padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px;color:#f4e7b5}.capacity-card small{font-size:11px;color:#bcd4c9;line-height:1.4}.capacity-track{height:9px;width:100%;border:1px solid #526964;background:#101e23;border-radius:9px;overflow:hidden;margin:8px 0 12px}.capacity-track span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#7ec98c,#e1c578);transition:width .15s}.farm-header{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#234039;border:1px solid #486e58;border-radius:12px;padding:14px}.farm-header strong{font-size:17px;color:#f9d590}.farm-header small{display:block;color:#b4d7b8;font-size:11px;margin-top:5px}.farm-header b{color:#72c8de;font-size:13px}.farm-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.farm-actions button:disabled{opacity:.42}.storage-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.storage-item{display:flex;flex-direction:column;gap:6px;padding:10px;margin:8px 0;border-radius:10px;background:#1d363d;border:1px solid #48615f;min-height:88px}.storage-item strong{font-size:12px;color:#f0dec1}.storage-item small{color:#a7bbb1;font-size:10px}.storage-actions{display:flex;gap:6px;flex-wrap:wrap}.storage-actions .narrow-button{flex:1;min-width:48px}.storage-actions .narrow-button:hover{background:#3e6872}@media(max-width:620px){.storage-columns{grid-template-columns:1fr}.farm-header{align-items:start;flex-direction:column}.farm-actions button{flex:1}}

/* Batch 7: survivor injury status */
.conditions{margin-top:8px;padding:5px 7px;background:#234038;border-radius:7px;font-size:10px;color:#aee4c8;line-height:1.35}.conditions.injured{background:#502b27;color:#ffcbc2;border:1px solid #da675b}@media(max-width:700px){.conditions{font-size:8px;padding:3px 4px;margin-top:4px}}

/* Batch 8 combat feedback */
.combat-status{position:absolute;bottom:153px;left:50%;transform:translateX(-50%);padding:7px 12px;font-size:12px;font-weight:700;z-index:7;pointer-events:none;white-space:nowrap;color:#d8ecf7;background:rgba(9,24,35,.78);border:1px solid rgba(130,194,210,.34)}
#mobile-aim.active{background:#3c796b!important;color:white!important;border-color:#b4f9dc!important}
@media(max-width:720px){.combat-status{bottom:161px;font-size:10px;max-width:65vw;overflow:hidden;text-overflow:ellipsis}.mobile-buttons{gap:4px}.mobile-buttons button{min-width:44px;padding:7px 5px;font-size:10px}}

/* Batch 9: unobtrusive combat response and visible progression */
.combat-feedback{position:absolute;left:50%;top:39%;transform:translateX(-50%);font-size:17px;font-weight:1000;color:#d1f7e8;text-shadow:0 2px 9px #111;pointer-events:none;z-index:9;white-space:nowrap;letter-spacing:1px}
.combat-feedback.critical{color:#ffe28a;font-size:21px}
.perk-info{padding:6px 0;color:#c2e6be!important;font-weight:700;border-top:1px solid #3f655d;margin-top:8px!important}
@media(max-width:700px){.combat-feedback{top:40%;font-size:13px}.combat-feedback.critical{font-size:15px}}
/* Batch 10: the extra Radio control remains reachable on compact displays. */
@media(max-width:900px){.toolbar{max-height:calc(100dvh - 190px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}}

/* Release candidate: compact touch toolbar and clear active aim indication. */
#mobile-aim.active{background:#547c64;border-color:#b8f0bb;box-shadow:0 0 0 1px #b8f0bb66 inset}
@media(pointer:coarse),(max-width:700px){
  .toolbar{top:151px;right:5px;display:grid;grid-template-columns:repeat(3,36px);gap:3px}
  .toolbar button{width:36px;min-height:35px;padding:5px 3px;text-align:center;font-size:13px}
  .mobile-buttons{bottom:max(100px,env(safe-area-inset-bottom) + 90px)}
  .joystick{bottom:max(98px,env(safe-area-inset-bottom) + 90px)}
}
@media(max-width:430px){
  .toolbar{grid-template-columns:repeat(3,32px)}.toolbar button{width:32px;min-height:32px;font-size:12px}
  .topbar{gap:2px}.scores{min-width:73px;padding:7px 3px}.vitals{width:140px}.time{min-width:86px;padding:6px 3px}
}

/* Final Polish 03: hit indicator rotates toward incoming damage (top = ahead). */
.damage-direction{position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:11;display:flex;justify-content:center;align-items:flex-start;color:#ff5454;text-shadow:0 2px 12px #300;font-size:39px;font-weight:900;transition:opacity .12s linear;}
.damage-direction span{display:block;line-height:1;filter:drop-shadow(0 0 7px #ff3030)}
#mobile-attack{touch-action:none;user-select:none;-webkit-user-select:none;}
@media(max-width:700px){.damage-direction{width:150px;height:150px;font-size:28px}.mobile-buttons #mobile-attack{font-size:8px;letter-spacing:-.2px}}

/* Interactive interiors: sleep/short-rest dimmer; touch instructions stay legible. */
.rest-overlay{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,#0c17224d 14%,#030911eb 100%);opacity:0;transition:opacity .28s ease;z-index:5}
@media(prefers-reduced-motion:reduce){.rest-overlay{transition:none}}

/* Neighborhood planner control layout: compact on desktop and phones. */
.modal-content .capacity-card small{display:block;line-height:1.5;margin-top:4px;}
.modal-content .pills{flex-wrap:wrap;}
@media(max-width:520px){.toolbar button span{font-size:10px}.modal-content .pills button{min-height:36px}}

.town-plan-tiles{display:grid;gap:3px;margin:12px 0;justify-content:center}.town-plan-tiles span{width:44px;height:44px;background:#516957;border:2px solid #a3bb9d;display:flex;align-items:center;justify-content:center;color:#f0efd7;font-weight:900;font-size:8px;border-radius:3px;text-align:center}.town-plan-strip{display:flex;flex-wrap:wrap;gap:4px;margin:13px 0}.town-plan-strip span{background:#4e5960;border:2px solid #cfc5a1;min-width:31px;padding:6px;color:#e8d19b;text-align:center;border-radius:3px}

/* Town Planner version 19: precise drag-to-draw roads on desktop and touch. */
.road-draw-canvas{display:block;width:100%;max-width:600px;aspect-ratio:20/11;height:auto;margin:12px auto;border:2px solid #9fbfa6;background:#243d3d;border-radius:10px;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none;image-rendering:pixelated}
#plan-build-button{display:block;width:100%;margin:10px 0 6px}
#plan-build-button:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:520px){.road-draw-canvas{max-height:220px}.town-plan-tiles span{width:38px;height:38px;font-size:7px}}

/* V20 overhead room-and-construction editor. */
.modal:has(#home-editor-canvas){width:min(96vw,1100px);max-height:94vh}
.home-editor-canvas{display:block;width:100%;max-width:780px;height:auto;aspect-ratio:26/17;background:#24382f;border:2px solid #89b6a2;border-radius:12px;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none;margin:8px auto}
.editor-layout{display:flex;justify-content:center;padding:8px;background:#152c2d;border:1px solid #3d6560;border-radius:13px;max-width:900px;margin:auto}
.editor-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:10px 0}
.editor-actions button{padding:9px 12px;min-height:37px}
.editor-actions strong{font-size:12px;color:#ffe0a6}
.editor-pieces{display:flex;flex-wrap:wrap;gap:5px;max-height:132px;overflow:auto;border:1px solid #425b60;border-radius:10px;background:#172e35;padding:10px}
.editor-pieces .pill{font-size:11px;padding:5px 9px}
@media(max-width:620px){.modal:has(#home-editor-canvas){width:100%;max-height:96dvh}.home-editor-canvas{max-height:52dvh}.editor-actions{gap:4px}.editor-actions button{padding:7px}.editor-pieces{max-height:95px}}