* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0f1218; color: #e6e6e6;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
button { font: inherit; cursor: pointer; border: 1px solid #3a4150; background: #262b35;
  color: #e6e6e6; border-radius: 6px; padding: 6px 10px; }
button:hover:not(:disabled) { background: #323848; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: #b3421f; border-color: #d4552c; font-weight: 600; width: 100%; padding: 10px; }
button.primary:hover:not(:disabled) { background: #d4552c; }
button.active { background: #b3421f; border-color: #d4552c; }
button.danger { background: #7a2b2b; border-color: #a33; }
button.danger:hover { background: #963636; }
.muted { color: #9aa3b2; }
.small { font-size: 12px; }
h3 { margin: 0 0 8px; font-size: 15px; }

#app { display: flex; flex-direction: column; height: 100%; }
#topbar { display: flex; align-items: center; gap: 18px; padding: 8px 14px; background: #171b23;
  border-bottom: 1px solid #2b3140; flex: none; }
#topbar .stat { font-size: 16px; display: flex; align-items: center; gap: 6px; }
#topbar .stat b { font-variant-numeric: tabular-nums; }
#topbar .spacer { flex: 1; }
#topbar .controls { display: flex; gap: 6px; }
.bar { width: 140px; height: 12px; background: #2b3140; border-radius: 6px; overflow: hidden; }
.bar > div { height: 100%; background: #6fcf97; width: 100%; transition: width .2s, background .2s; }

main { flex: 1; display: flex; gap: 10px; padding: 10px; min-height: 0; }
#view { flex: 1; position: relative; min-width: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px #2b3140, 0 10px 30px rgba(0,0,0,.5); background: #0b0e14; }
#game { width: 100%; height: 100%; display: block; touch-action: none; }
.hint { position: absolute; left: 12px; bottom: 10px; background: rgba(0,0,0,.6); padding: 6px 10px;
  border-radius: 6px; font-size: 13px; pointer-events: none; }
.hint:empty { display: none; }

#panel { width: 330px; flex: none; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.card { background: #171b23; border: 1px solid #2b3140; border-radius: 8px; padding: 12px; }

#shop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.shop-item { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 6px;
  border: 1px solid #2b3140; background: #1f242e; cursor: pointer; user-select: none; }
.shop-item:hover { border-color: #4a5468; }
.shop-item.active { border-color: #d4552c; background: #3a2a24; }
.shop-item.poor { opacity: .5; }
.shop-item .name { font-weight: 600; }
.shop-item .cost { color: #f4c542; font-size: 13px; }
.shop-item .desc { font-size: 11px; color: #9aa3b2; }

#selected .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 13px; margin: 6px 0 10px; }
#selected .stats span { color: #9aa3b2; }
.upgrades { display: flex; flex-direction: column; gap: 5px; }
.upg { display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; }
.upg .lvl { color: #9aa3b2; font-size: 12px; min-width: 32px; }
.upg .nm { flex: 1; }
.upg .cost { color: #f4c542; }
.upg.max .cost { color: #6fcf97; }
.row { display: flex; gap: 6px; margin-top: 8px; }
.row button { flex: 1; }
.ammo { height: 8px; background: #2b3140; border-radius: 4px; overflow: hidden; margin: 4px 0 8px; }
.ammo > div { height: 100%; background: #f4c542; }

#overlay[hidden] { display: none; }
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center;
  justify-content: center; z-index: 10; }
.modal { background: #171b23; border: 1px solid #3a4150; border-radius: 12px; padding: 28px 32px;
  text-align: center; max-width: 440px; }
.modal h2 { margin: 0 0 10px; }

@media (max-width: 1000px) {
  html, body { overflow: auto; }
  main { flex-direction: column; }
  #view { height: 60vh; flex: none; }
  #panel { width: 100%; }
}