* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0d0d1a;
  color: #c8d0e0;
  font-family: 'Courier New', monospace;
  height: 100vh;
  overflow: hidden;
}

/* ── Auth ─────────────────────────────────────────────────────────────────── */

#auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 24px;
}

#auth-screen h1 {
  color: #7eb8f7;
  font-size: 2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#login-form,
#register-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
}

#login-form input,
#register-form input {
  background: #1a1a2e;
  border: 1px solid #2a3a5e;
  color: #c8d0e0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

#login-form input:focus,
#register-form input:focus {
  border-color: #7eb8f7;
}

#login-form button,
#register-form button {
  background: #13131f;
  border: 1px solid #7eb8f7;
  color: #7eb8f7;
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: background 0.15s;
}

#login-form button:hover,
#register-form button:hover {
  background: #1a2a4e;
}

.error {
  color: #f38ba8;
  font-size: 13px;
  min-height: 18px;
}

/* ── Game ─────────────────────────────────────────────────────────────────── */

#game-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#hud {
  background: #13131f;
  border-bottom: 1px solid #1e1e3a;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

#hud-username { color: #7eb8f7; font-weight: bold; }
#hud-org { color: #888; font-size: 13px; }

#hud button {
  margin-left: auto;
  background: transparent;
  border: 1px solid #444;
  color: #888;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}

#hud button:hover { border-color: #f38ba8; color: #f38ba8; }

/* ── Main layout ──────────────────────────────────────────────────────────── */

#main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

#map-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 14px;
  border-right: 1px solid #1e1e3a;
}

/* ── Chat ─────────────────────────────────────────────────────────────────── */

#chat-panel {
  width: 300px;
  display: flex;
  flex-direction: column;
  background: #0f0f1c;
  flex-shrink: 0;
}

#chat-tabs {
  display: flex;
  border-bottom: 1px solid #1e1e3a;
  flex-shrink: 0;
}

.tab-btn {
  flex: 1;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-right: 1px solid #1e1e3a;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.tab-btn:last-child { border-right: none; }
.tab-btn.active { color: #7eb8f7; background: #13131f; }
.tab-btn:hover:not(.active) { color: #888; }

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-size: 12px;
  line-height: 1.5;
}

#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: #2a3a5e; }

.chat-message { padding: 2px 0; word-break: break-word; }
.chat-time { color: #444; }
.chat-user { color: #7eb8f7; }
.chat-content { color: #c8d0e0; }

#chat-input {
  background: #13131f;
  border: none;
  border-top: 1px solid #1e1e3a;
  color: #c8d0e0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  flex-shrink: 0;
}

#chat-input:focus { border-top-color: #7eb8f7; }