* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  background: #05070d; color: #cfd6e4;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px; -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
.center { align-items: center; justify-content: center; }
.error { color: #ff7b72; min-height: 1.2em; font-size: 13px; }
.grow { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }

h1 { font-size: 28px; line-height: 1.1; margin-bottom: 16px; color: #e8eefc; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #7f8ba3; margin-bottom: 8px; }

.panel {
  background: #0d1220; border: 1px solid #1c2740; border-radius: 12px;
  padding: 14px; margin: 8px; min-width: 0;
}
input, select, button {
  font: inherit; color: inherit; border-radius: 8px; border: 1px solid #2a3a5e;
  background: #131a2e; padding: 10px 12px;
}
input, select { width: 100%; margin-bottom: 8px; }
button { cursor: pointer; white-space: nowrap; }
button.primary { background: #2456b3; border-color: #2f6ad4; color: #fff; }
button.small { padding: 6px 10px; font-size: 13px; }
button:disabled { opacity: .45; cursor: default; }
label.check { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
label.check input { width: auto; margin: 0; }

.bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: #0d1220; border-bottom: 1px solid #1c2740;
  z-index: 5;
}
.chip {
  padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.chip.empire { background: #1d3557; color: #9cc3ff; }
.chip.rebels { background: #4d1f24; color: #ff9c9c; }

.lobby-body { overflow-y: auto; flex: 1; padding-bottom: 24px; }
.list .item {
  display: flex; align-items: center; gap: 8px; padding: 10px 4px;
  border-bottom: 1px solid #1c2740; font-size: 14px;
}
.list .item:last-child { border-bottom: 0; }
.muted { color: #7f8ba3; font-size: 13px; }

#map { flex: 1; position: relative; touch-action: none; }
#map canvas { position: absolute; inset: 0; }

#hud-credits { font-variant-numeric: tabular-nums; font-weight: 600; }
#hud-credits .inc { color: #7f8ba3; font-weight: 400; font-size: 13px; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: #0d1220; border-top: 1px solid #2a3a5e;
  border-radius: 16px 16px 0 0;
  max-height: 62vh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -12px 40px rgba(0,0,0,.6);
}
.sheet-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px;
}
.sheet-head .title { font-weight: 700; font-size: 17px; color: #e8eefc; }
.sheet-tabs { display: flex; gap: 4px; padding: 0 10px; }
.sheet-tabs button {
  flex: 1; background: none; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 8px; color: #7f8ba3;
}
.sheet-tabs button.active { color: #e8eefc; border-bottom-color: #2f6ad4; }
.sheet-body { overflow-y: auto; padding: 10px 14px 16px; }

.build-item, .fleet-card, .tech-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid #1c2740;
}
.build-item:last-child, .fleet-card:last-child, .tech-item:last-child { border-bottom: 0; }
.build-item .info, .tech-item .info { flex: 1; min-width: 0; }
.build-item .name, .tech-item .name { font-size: 14px; color: #e8eefc; }
.build-item .meta, .tech-item .meta { font-size: 12px; color: #7f8ba3; }

.fleet-card { flex-direction: column; align-items: stretch; gap: 6px; }
.fleet-card .fleet-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.unit-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; }
.unit-row .hull { margin-left: auto; color: #7f8ba3; font-size: 12px; }
.unit-row .hull.hurt { color: #f0b45a; }

.queue-row { display: flex; gap: 8px; font-size: 13px; color: #a9b6cf; padding: 4px 0; }
.queue-row .eta { margin-left: auto; color: #7f8ba3; }

#toasts {
  position: fixed; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 20; pointer-events: none;
}
.toast {
  background: #182338; border: 1px solid #2a3a5e; border-radius: 10px;
  padding: 8px 14px; font-size: 13px; max-width: 92vw;
  animation: toast-in .2s ease-out;
}
.toast.bad { border-color: #7a2e2e; background: #2b1518; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

.overlay {
  position: fixed; inset: 0; z-index: 30; background: rgba(3,5,10,.88);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.overlay .panel { padding: 28px; }
.overlay h1 { margin-bottom: 8px; }

.hint {
  position: fixed; bottom: 14px; left: 0; right: 0; text-align: center;
  z-index: 8; pointer-events: none;
}
.hint span {
  background: #182338; border: 1px solid #2f6ad4; border-radius: 999px;
  padding: 6px 14px; font-size: 13px;
}