:root{
  --bg:#050b07;
  --fg:#b7ffd1;
  --green:#00ff66;
  --dim:#0c3b1d;
  --panel: rgba(0,0,0,0.55);
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--fg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

#game{
  position: fixed;
  inset: 0;
  z-index: 0;
}

#ui{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* let canvas receive input */
}

#topbar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.brand{ color: var(--green); letter-spacing: 1px; font-weight: 700; text-shadow: 0 0 10px rgba(0,255,102,0.25); }

.right{ display:flex; gap:8px; }

.btn{
  pointer-events: auto;
  border: 1px solid rgba(0,255,102,0.35);
  background: rgba(0,0,0,0.45);
  color: var(--fg);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.btn:hover{ border-color: rgba(0,255,102,0.8); }

#hud{
  display:flex;
  gap: 14px;
  padding: 4px 12px;
  color: rgba(183,255,209,0.9);
  flex-wrap: wrap;
  align-items: center;
}
.hudItem{ background: rgba(0,0,0,0.35); border: 1px solid rgba(0,255,102,0.18); padding: 4px 8px; border-radius: 6px; }
.hudItem.hpbar{ width: 140px; height: 16px; padding: 0; overflow: hidden; }
#hpfill{ height: 100%; width: 100%; background: linear-gradient(90deg, #00ff66, #a6ffcc); box-shadow: 0 0 10px rgba(0,255,102,0.25); }

.hudItem.btbar{ width: 140px; height: 16px; padding: 0; overflow: hidden; border-color: rgba(124,247,255,0.20); }
#btfill{ height: 100%; width: 100%; background: linear-gradient(90deg, #7cf7ff, #eaffff); box-shadow: 0 0 12px rgba(124,247,255,0.18); }

#terminal{
  pointer-events: auto;
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: min(360px, calc(50vw - 24px));
  max-height: 42vh;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(0,255,102,0.25);
  background: var(--panel);
  backdrop-filter: blur(2px);
  box-shadow: 0 0 30px rgba(0,255,102,0.08);
}

#log{
  margin: 0;
  padding: 10px 12px;
  max-height: 26vh;
  overflow: auto;
  color: rgba(183,255,209,0.95);
}

#typingRow{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px 12px;
  border-top: 1px solid rgba(0,255,102,0.18);
}

.prompt{ color: var(--green); }

#typing{
  flex:1;
  border: 1px solid rgba(0,255,102,0.25);
  background: rgba(0,0,0,0.55);
  color: var(--fg);
  padding: 8px 10px;
  border-radius: 8px;
  outline: none;
}
#typing:focus{ border-color: rgba(0,255,102,0.8); box-shadow: 0 0 0 2px rgba(0,255,102,0.15); }

.help{
  padding: 10px 12px 10px 12px;
  border-top: 1px solid rgba(0,255,102,0.18);
  font-size: 12px;
  color: rgba(183,255,209,0.7);
}