*{margin:0;padding:0;box-sizing:border-box;}
body{background:#0a0a0a;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;overflow:hidden;}
#game{display:block;image-rendering:pixelated;image-rendering:crisp-edges;max-width:100vw;max-height:100vh;position:relative;z-index:1;touch-action:none;}
#joystick-base{display:none;position:fixed;bottom:20px;left:20px;width:120px;height:120px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.05);z-index:100;touch-action:none;
  -webkit-tap-highlight-color:transparent;user-select:none;}
#joystick-knob{position:absolute;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,0.25);border:2px solid rgba(255,255,255,0.45);
  top:34px;left:34px;pointer-events:none;transition:none;}
#btn-act{display:none;position:fixed;bottom:60px;right:16px;width:72px;height:72px;border-radius:50%;
  border:2px solid rgba(0,230,118,0.5);background:rgba(0,230,118,0.12);color:rgba(0,230,118,0.9);
  font-size:16px;font-weight:bold;font-family:monospace;cursor:pointer;z-index:100;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;}
#btn-act:active{background:rgba(0,230,118,0.3);}
#btn-stats{display:none;position:fixed;bottom:142px;right:16px;width:56px;height:56px;border-radius:50%;
  border:2px solid rgba(100,180,255,0.5);background:rgba(30,80,180,0.18);color:rgba(140,200,255,0.9);
  font-size:11px;font-weight:bold;font-family:monospace;cursor:pointer;z-index:100;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;line-height:1.2;}
#btn-stats:active{background:rgba(30,80,180,0.38);}
#btn-esc{display:none;position:fixed;top:16px;left:16px;width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(255,100,100,0.45);background:rgba(80,0,0,0.22);color:rgba(255,150,150,0.9);
  font-size:18px;font-weight:bold;font-family:monospace;cursor:pointer;z-index:200;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;}
#btn-esc:active{background:rgba(120,0,0,0.5);}
#btn-map{display:none;position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(100,180,255,0.4);background:rgba(20,60,120,0.2);color:rgba(140,200,255,0.9);
  font-size:11px;font-weight:bold;font-family:monospace;cursor:pointer;z-index:200;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;}
#btn-map:active{background:rgba(30,80,180,0.4);}
#btn-up,#btn-down{display:none;position:fixed;right:80px;width:48px;height:48px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);
  font-size:18px;font-weight:bold;font-family:monospace;cursor:pointer;z-index:100;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;}
#btn-up{bottom:152px;}
#btn-down{bottom:96px;}
#btn-up:active,#btn-down:active{background:rgba(255,255,255,0.2);}

/* Contextual mobile key bar — hidden by default, shown by updateMobileKeyBar()
   when a UI panel surfaces actionable keyboard shortcuts (bill popup, bank,
   stock, pause menu, etc). Sits along the bottom edge, centered. */
#mobile-keybar{
  display:none;
  position:fixed;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  gap:8px;
  z-index:150;
  pointer-events:auto;
  flex-wrap:wrap;
  justify-content:center;
  max-width:calc(100vw - 200px);
  padding:6px 8px;
  background:rgba(8,10,20,0.85);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
#mobile-keybar.on{display:flex;}
#mobile-keybar .mk{
  min-width:58px;
  height:44px;
  padding:0 12px;
  border:1px solid rgba(255,200,80,0.45);
  background:rgba(255,200,80,0.1);
  color:rgba(255,220,140,0.95);
  font-family:monospace;
  font-weight:bold;
  font-size:11px;
  letter-spacing:1px;
  border-radius:8px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  user-select:none;
  white-space:nowrap;
}
#mobile-keybar .mk:active,
#mobile-keybar .mk.flash{
  background:rgba(255,220,120,0.38);
  transform:scale(0.96);
  box-shadow:0 0 12px rgba(255,200,80,0.5);
  transition:background 60ms, box-shadow 60ms;
}
#mobile-keybar .mk.danger{
  border-color:rgba(255,100,100,0.5);
  background:rgba(255,80,80,0.12);
  color:rgba(255,180,180,0.95);
}
#mobile-keybar .mk.success{
  border-color:rgba(100,230,140,0.5);
  background:rgba(0,230,118,0.1);
  color:rgba(150,255,180,0.95);
}

/* ── Amount entry overlay — bank deposit/withdraw ──────────────────── */
#amount-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:9999;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
#amount-overlay.on{display:flex;}
#amount-box{
  background:rgba(10,12,24,0.98);
  border:1px solid rgba(100,180,255,0.35);
  border-radius:12px;
  padding:22px 24px;
  min-width:280px;
  max-width:calc(100vw - 32px);
  font-family:monospace;
  color:#eee;
  box-shadow:0 0 40px rgba(0,0,0,0.6);
}
#amount-title{
  font-size:16px;
  font-weight:bold;
  color:#f5c518;
  letter-spacing:1px;
  text-align:center;
  margin-bottom:4px;
}
#amount-sub{
  font-size:11px;
  color:#888;
  text-align:center;
  margin-bottom:14px;
  min-height:13px;
}
#amount-input{
  width:100%;
  padding:12px 14px;
  font-family:monospace;
  font-size:20px;
  font-weight:bold;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:8px;
  color:#fff;
  text-align:center;
  -webkit-appearance:none;
  -moz-appearance:textfield;
  appearance:none;
}
#amount-input::-webkit-outer-spin-button,
#amount-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#amount-input:focus{
  outline:none;
  border-color:rgba(100,180,255,0.6);
}
#amount-quick{
  display:flex;
  gap:6px;
  margin-top:10px;
  flex-wrap:wrap;
}
#amount-quick button{
  flex:1;
  min-width:56px;
  padding:10px 6px;
  font-family:monospace;
  font-size:11px;
  font-weight:bold;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.85);
  border-radius:6px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#amount-quick button:active{
  background:rgba(255,200,80,0.2);
}
#amount-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
}
#amount-actions button{
  flex:1;
  padding:13px;
  font-family:monospace;
  font-size:13px;
  font-weight:bold;
  letter-spacing:1px;
  border-radius:8px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#amount-cancel{
  background:rgba(255,80,80,0.1);
  border:1px solid rgba(255,100,100,0.4);
  color:rgba(255,180,180,0.9);
}
#amount-ok{
  background:rgba(0,230,118,0.12);
  border:1px solid rgba(0,230,118,0.5);
  color:rgba(150,255,180,0.95);
}
#amount-cancel:active{background:rgba(255,80,80,0.24);}
#amount-ok:active{background:rgba(0,230,118,0.28);}