:root{font-family:Arial,Helvetica,sans-serif;color:#f4efdc;background:#172b32;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #f7ca70;outline-offset:4px}button:disabled{cursor:default}#game,#world{width:100%;height:100dvh;display:block}#world{touch-action:none}
header{position:absolute;top:0;left:0;right:0;padding:26px 32px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#132930aa,transparent);pointer-events:none;z-index:6}
.brand,.top-actions{display:flex;align-items:center;gap:14px}
.brand strong{font-size:17px;letter-spacing:2px}
.brand small{display:block;font-size:10px;letter-spacing:3.6px;margin-top:7px;color:#c4d0cc}
.logo{display:grid;place-items:center;border:1px solid #d0d8c866;width:48px;height:48px;font:italic bold 17px Georgia;flex-shrink:0;white-space:nowrap}
.mobile-neighborhood{display:none}
.top-actions{pointer-events:auto;font-size:12px;letter-spacing:1px}
.top-actions button{background:#203b40b8;border:1px solid #e2edce26;color:#f4efdc;padding:10px 14px;border-radius:6px}
.district{position:absolute;left:32px;top:125px;pointer-events:none;text-shadow:0 2px 15px #173038}
.eyebrow{font-size:11px;letter-spacing:2.2px;font-weight:bold;color:#d4d99f}
h1{font-family:Georgia,serif;font-weight:normal;font-size:38px;margin:10px 0}
.district p{font-size:14px;color:#d4ddd4;margin:0}
.stats{position:absolute;right:28px;top:116px;width:232px;background:#153037ec;border:1px solid #a1bcb534;border-radius:12px;padding:22px;box-shadow:0 16px 55px #0a202333;z-index:4}
.cash span{font-size:10px;letter-spacing:2px;color:#aebcb5}
.cash strong{display:block;font-size:37px;margin:7px 0 23px;letter-spacing:-1px;color:#e9edbd}
.stat{display:flex;justify-content:space-between;font-size:14px;margin:16px 0 9px;color:#dbe3d9}
.stat b{color:#fff6db}
.stat.small{font-size:12px}
.meter{height:7px;background:#ffffff14;border-radius:10px;overflow:hidden}
.meter i{height:100%;display:block;background:#b9d37b;transition:width .2s;width:100%;border-radius:10px}
.meter.slim{height:4px}
.slim i{background:#80bcc4}
.divider{height:1px;background:#ffffff20;margin:22px 0}
.stats>strong{display:block;font-size:14px;margin:12px 0}
.progress{height:5px}
.progress i{background:#e4b65c;width:0}
.stats p{font-size:12px;line-height:1.7;color:#b1c2be}
.stats>button{width:100%;font-size:12px;border:1px solid #b4c98a55;padding:11px 7px;background:#c0dc83;color:#193137;border-radius:5px}
.stats>button:disabled{color:#99aaa3;background:transparent;border-color:#ffffff16}
footer{position:absolute;bottom:0;left:0;right:0;padding:25px 32px;display:flex;justify-content:space-between;background:linear-gradient(transparent,#122a32dd);font-size:12px;pointer-events:none}
.controls{display:flex;gap:20px;align-items:center}
kbd{font:11px Arial;display:inline-block;padding:5px 7px;border:1px solid #c1d0c64d;background:#102e35a6;border-radius:4px;color:#ebeedc}
.legend{display:flex;gap:8px;align-items:center;color:#c6d0c5}
.green{color:#b7d780}
.orange{color:#edb060}
.blue{color:#82bedc}
.red{color:#df7976}
#prompt{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);background:#12303bed;padding:13px 22px;border:1px solid #d3e4bb66;border-radius:8px;font-size:14px;text-align:center;display:none;max-width:90%;z-index:4}
#toast{position:absolute;left:50%;top:105px;transform:translateX(-50%);padding:13px 22px;background:#f2ebd7;color:#29404a;font-size:14px;border-radius:7px;opacity:0;transition:opacity .2s;box-shadow:0 7px 20px #122c3330;pointer-events:none;z-index:11}
#overlay{position:absolute;inset:0;display:flex;align-items:center;padding:90px 7%;background:linear-gradient(90deg,#0b242cf0,#0b242c92 48%,#0b242c16);backdrop-filter:blur(2px);z-index:15}
.modal{max-width:430px}
.modal h2{font:normal 58px/1.05 Georgia,serif;letter-spacing:-2px;margin:18px 0 23px}
.modal>p{font-size:16px;line-height:1.65;color:#d0d9cf}
#instructions{margin:26px 0}
#instructions p{font-size:13px;color:#cbd4cb}
#instructions b{font-size:11px;color:#c3d987;margin-right:12px}
em{font-style:normal;color:#d5e4a6}
#start{padding:17px 21px;background:#d6e7a8;border:0;border-radius:6px;color:#233a3c;display:flex;justify-content:space-between;width:100%;font-weight:bold;font-size:15px}
#start:hover{background:#e6f1c4}
.footnote{display:block;font-size:11px;line-height:1.5;color:#99ada7;margin-top:18px}
.touch{display:none}
body.playing #overlay{display:none}
.mobile-text{display:none}
.desktop-text{display:inline}

@media(max-width:850px){
 header{padding:18px}
 .brand strong{font-size:13px}
 .brand small{font-size:9px}
 .logo{width:38px;height:38px}
 .top-actions #day{display:none}
 .district{left:20px;top:96px}
 h1{font-size:28px}
 .stats{right:16px;top:95px;width:183px;padding:15px}
 .cash strong{font-size:30px;margin-bottom:16px}
 .stats .eyebrow{font-size:9px}
 .stats p{font-size:11px}
 footer{padding:20px}
 .legend{display:none}
 .controls{gap:10px;font-size:10px}
 #toast{top:76px;max-width:90%;width:max-content}
 #overlay{padding:90px 7%}
 .modal h2{font-size:48px}
}

@media(max-width:680px), (max-height:550px){
 .mobile-text{display:inline}
 .desktop-text{display:none}
 header{position:fixed;top:0;left:0;right:0;height:40px;padding:0 12px;background:#10252cf2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #ffffff18;z-index:10;display:flex;align-items:center;justify-content:space-between}
 .brand strong,.brand small,#day{display:none}
 .logo{width:28px;height:28px;font-size:11px}
 .mobile-neighborhood{display:block;font-size:12px;font-weight:bold;color:#f3e9c6;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
 .top-actions{gap:5px}
 .top-actions button{padding:4px 8px;font-size:10.5px}
 #pause kbd{display:none}
 .district{display:none}
 
 .stats{position:fixed;top:44px;left:6px;right:6px;width:auto;max-width:none;height:36px;padding:2px 8px;background:#153037f0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #a1bcb544;border-radius:10px;box-shadow:0 6px 20px #04121788;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:6px}
 .cash{display:flex;align-items:baseline;gap:2px;flex-shrink:0}
 .cash span{display:none}
 .cash strong{font-size:15px;margin:0;color:#ffd54f}
 .stats .stat{margin:0;font-size:10.5px;display:flex;align-items:center;gap:3px;flex-shrink:0}
 .stats .stat.small{display:none}
 .stats .divider,.stats .eyebrow,.stats>strong,.stats p,#gear-owned{display:none}
 .stats .meter{display:none}
 .stats>button{width:auto;margin:0;padding:4px 8px;font-size:10.5px;font-weight:bold;border-radius:6px;flex-shrink:0;white-space:nowrap}
 #upgrade{background:#c0dc83;color:#183238}
 #gear-button{background:#274d57;color:#fff2d6;border-color:#5c8e9b}

 #prompt{bottom:16px;top:auto;left:50%;transform:translateX(-50%);max-width:calc(100% - 250px);padding:5px 14px;font-size:11px;background:#14343fee;border-radius:20px;border-color:#80deea88;box-shadow:0 4px 15px #00000066;z-index:10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #toast{top:10px;left:50%;transform:translateX(-50%);font-size:11.5px;padding:6px 14px;z-index:100}
 #tactical-hud{position:fixed;bottom:94px;left:14px;right:auto;transform:none;display:flex;flex-direction:column;gap:5px;z-index:10}
 #tactical-hud button{padding:5px 10px;font-size:10.5px;border-radius:16px}
 #tactical-hud kbd{display:none}
 #job-hud{position:fixed;top:82px;left:50%;transform:translateX(-50%);width:auto;min-width:250px;max-width:calc(100% - 20px);padding:4px 10px;z-index:8}
 .controls,footer{display:none}
}

.orientation-hint{display:none}
@media(max-width:680px) and (orientation:portrait){
 .orientation-hint{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);background:#10252cf4;border:1px solid #ffd54f88;color:#ffe082;padding:5px 14px;border-radius:18px;font-size:11px;font-weight:bold;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px rgba(0,0,0,0.5);z-index:12}
 .orientation-hint button{background:transparent;border:none;color:#ffab91;font-size:12px;padding:0 3px;cursor:pointer}
}

@media(max-height:520px){
 header{height:36px;padding:0 10px}
 .logo{width:26px;height:26px;font-size:11px}
 .mobile-neighborhood{font-size:11px;max-width:160px}
 .top-actions button{padding:4px 7px;font-size:10px}
 .stats{top:38px;height:32px;padding:1px 8px;gap:5px}
 .cash strong{font-size:14.5px}
 .stats .stat{font-size:10px}
 .stats>button{padding:3px 7px;font-size:10px}
 #job-hud{top:72px;padding:4px 10px}
 #job-hud strong{font-size:13px}
 #job-hud p{font-size:10.5px}
 #touch-stick{width:116px;height:116px}
 #touch-knob{width:42px;height:42px;margin:-21px 0 0 -21px}
 #pad button{width:32px;height:32px;font-size:12px}
 #touch-action{width:70px;height:70px}
 #touch-action #action-icon{font-size:20px}
 #touch-sprint{width:48px;height:48px;font-size:13px}
 #prompt{bottom:12px;padding:4px 10px;font-size:10.5px}
}

@media(pointer:coarse), (max-width:900px){
 .touch{display:flex;position:fixed;bottom:14px;left:14px;right:14px;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:10}
 
 /* Left side: Action button and Sprint button */
 .touch-actions{display:flex;gap:10px;align-items:flex-end;pointer-events:auto;flex-direction:row}
 #touch-action{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#234d5c,#122b33);border:3px solid #4fc3f7;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,0.5),inset 0 0 12px rgba(79,195,247,0.25);display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;transition:all .15s ease}
 #touch-action:active{transform:scale(0.93);background:#1a3d4a}
 #touch-action.context-active{background:linear-gradient(135deg,#f57c00,#e65100);border-color:#ffe082;box-shadow:0 0 25px rgba(255,167,38,0.7),inset 0 0 10px rgba(255,255,255,0.4);animation:pulseAct 1.2s infinite alternate}
 #touch-action #action-icon{font-size:24px;line-height:1}
 #touch-action small,#touch-action #action-label{font-size:10px;font-weight:bold;margin-top:2px;letter-spacing:.3px;color:#f0f8ff}
 
 #touch-sprint{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#2b462a,#172c16);border:2px solid #81c784;color:#ffe082;font-size:15px;box-shadow:0 4px 16px rgba(0,0,0,0.4);display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}
 #touch-sprint.active,#touch-sprint:active{background:linear-gradient(135deg,#43a047,#2e7d32);border-color:#c8e6c9;box-shadow:0 0 20px #81c784;transform:scale(0.94)}
 #touch-sprint small{font-size:9px;color:#c8e6c9;margin-top:1px}

 /* Right side: Virtual joystick and Directional buttons */
 #touch-stick{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(24,53,62,0.85) 0%,rgba(12,27,33,0.95) 100%);border:2px solid rgba(129,212,250,0.45);box-shadow:0 8px 30px rgba(0,0,0,0.6),inset 0 0 16px rgba(129,212,250,0.18);position:relative;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none}
 #touch-knob{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle,#327282 0%,#163b45 100%);border:2px solid #80deea;box-shadow:0 4px 14px rgba(0,0,0,0.7);pointer-events:none;transition:transform .04s ease-out}
 #pad{position:absolute;inset:0;pointer-events:none}
 #pad button{position:absolute;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);border:none;color:rgba(255,255,255,0.8);font-size:14px;display:grid;place-items:center;pointer-events:auto;touch-action:none}
 #pad button:active{background:rgba(128,222,234,0.3);color:#80deea}
 #pad button[data-key="arrowup"]{top:3px;left:50%;transform:translateX(-50%)}
 #pad button[data-key="arrowdown"]{bottom:3px;left:50%;transform:translateX(-50%)}
 #pad button[data-key="arrowleft"]{left:3px;top:50%;transform:translateY(-50%)}
 #pad button[data-key="arrowright"]{right:3px;top:50%;transform:translateY(-50%)}

 @keyframes pulseAct{0%{transform:scale(1)}100%{transform:scale(1.06)}}
 footer{display:none}
}