*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0b1020;
  color:#e5e7eb;
  overflow:hidden;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:14px 14px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.brand .title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
}
.brand .subtitle{
  opacity:.85;
  font-size:12.5px;
  margin-top:4px;
}

.controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.06);
  color:#e5e7eb;
  padding:8px 10px;
  border-radius:10px;
  font-weight:650;
  cursor:pointer;
}
.btn:hover{ background:rgba(255,255,255,.10); }
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background:rgba(99,102,241,.25);
  border-color:rgba(99,102,241,.55);
}

.hud{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.hudItem{
  display:flex;
  gap:8px;
  align-items:baseline;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.hudItem .k{ opacity:.80; font-size:12px; }
.hudItem .v{ font-weight:800; }

.main{
  position:relative;
  height: calc(100vh - 92px);
}

#game{
  display:block;
  width:100%;
  height:100%;
}

.overlayMsg{
  position:absolute;
  left:50%;
  top:18%;
  transform:translate(-50%,-50%);
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.45);
  font-size:18px;
  font-weight:900;
  pointer-events:none;
  opacity:0;
  transition: opacity .08s ease;
}
.overlayMsg.show{ opacity:1; }
.overlayMsg.hidden{ display:none; }

.help{
  position:absolute;
  left:12px;
  bottom:12px;
  width:min(520px, calc(100% - 24px));
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.helpTitle{ font-weight:850; margin-bottom:6px; }
.helpLine{ font-size:13px; opacity:.90; line-height:1.35; }

.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}