:root{
  --bg:#0b0b0b;
  --panel:#111;
  --accent:#b6b600;
  --muted:#9ea19a;
  --green:#6fcf6f;
  --danger:#ff6b6b;
  --font-sz:14px;
  --gap:10px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:#cfcfcf;font-family: "Courier New", Courier, monospace;font-size:var(--font-sz);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#app{display:flex;flex-direction:column;height:100vh;padding:12px;gap:12px}

.retro-bar{
  display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:linear-gradient(180deg,#1b1b1b,#0d0d0d);border:2px solid #2a2a2a;box-shadow:0 4px 0 rgba(0,0,0,.6) inset;
  color:var(--accent);letter-spacing:1px;font-weight:700;text-transform:uppercase
}
.footer{font-size:12px}

.top-row{display:flex:gap:12px}
.panel{background:var(--panel);border:2px solid #222;padding:10px;flex:1;min-height:120px;box-shadow:2px 2px 0 rgba(0,0,0,.6)}
.panel-title{font-size:13px;color:var(--muted);margin-bottom:8px;border-bottom:1px dashed #222;padding-bottom:8px}

.resources .resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.resource{background:#0f0f0f;border:1px solid #222;padding:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.res-left{display:flex;flex-direction:column}
.res-name{font-size:13px;color:var(--muted)}
.res-val{font-weight:700;font-size:18px}
.small{font-size:12px;color:#9a9a9a}

.status-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #151515}
.controls{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.btn{background:#111;border:2px solid #2a2a2a;color:var(--accent);padding:8px;border-radius:4px;cursor:pointer;font-weight:700}
.btn:active{transform:translateY(1px)}

.upgrades-row{display:flex;gap:8px;flex-wrap:wrap}
.upgrade{
  background:#0f0f0f;border:1px solid #222;padding:8px;min-width:180px;flex:1;
  display:flex;flex-direction:column;gap:6px
}
.upgrade .cost{font-size:12px;color:var(--muted)}
.row{display:flex;justify-content:space-between;align-items:center}

.log{flex-basis:140px;overflow:auto}
.log-body{font-size:13px;line-height:1.4;max-height:220px;overflow:auto;padding-top:6px;color:#dcdcdc}

/* Pixel-ish small UI */
.resource, .upgrade, .status-row{border-radius:2px}
#clock{color:#8f8f8f;font-weight:700}

/* responsive */
@media (max-width:800px){
  .top-row{flex-direction:column}
  .upgrades-row{flex-direction:column}
}