body {
  font-family: sans-serif;
  margin: 20px;
  background: #1e1e28;
  color: #eee;
}

#game {
  display: flex;
  gap: 20px;
}

#map {
  background: #2a2a38;
  border: 1px solid #444;
  width: 700px;
  height: 440px;
}

#winner-banner {
  font-size: 20px;
  font-weight: bold;
  color: #ffd54a;
  margin-bottom: 10px;
}

.province-circle {
  stroke: #111;
  stroke-width: 2;
  cursor: pointer;
}

.province-circle.selected {
  stroke: #ffd54a;
  stroke-width: 3;
}

.province-label {
  fill: #fff;
  font-size: 11px;
  pointer-events: none;
  text-anchor: middle;
}

.adjacency-line {
  stroke: #555;
  stroke-width: 1;
}

.army-marker {
  fill: #ffd54a;
  stroke: #000;
  stroke-width: 1;
}

.siege-ring {
  fill: none;
  stroke: #e33;
  stroke-width: 3;
}

#side-panel {
  min-width: 260px;
  background: #2a2a38;
  padding: 12px;
  border: 1px solid #444;
}

#players {
  margin-bottom: 10px;
  display: flex;
  gap: 20px;
  font-size: 14px;
}

button {
  margin: 4px 4px 4px 0;
  cursor: pointer;
}

input[type="number"] {
  width: 60px;
}

.owner-null { fill: #777; }

/* --- Screens & Auth --- */

.screen { max-width: 800px; margin: 0 auto; }
.hidden { display: none !important; }
.error { color: #e55; font-size: 14px; }
.result-text { font-size: 14px; }
.result-text.success { color: #5e5; }
.link-text { font-size: 14px; color: #aaa; }
.link-text a { color: #6af; }

#login-screen, #signup-screen {
  text-align: center;
  padding-top: 80px;
}

#login-screen form, #signup-screen form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin: 20px auto;
}

#login-screen input, #signup-screen input {
  padding: 10px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #2a2a38;
  color: #eee;
  font-size: 14px;
}

#login-screen button, #signup-screen button {
  padding: 10px;
  background: #2980ff;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

/* --- Lobby --- */

#lobby-screen header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

#lobby-screen header h1 { margin: 0; flex: 1; }
#lobby-user { color: #aaa; font-size: 14px; }
#logout-btn { background: #555; border: none; color: #eee; padding: 6px 12px; border-radius: 4px; cursor: pointer; }

.game-card, .invite-card {
  background: #2a2a38;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.game-status {
  background: #3a3a4a;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

#new-game-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
}

#new-game-form input, #new-game-form label {
  font-size: 14px;
}

#new-game-form input[type="text"],
#new-game-form input[type="number"] {
  padding: 8px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #2a2a38;
  color: #eee;
  width: auto;
}

#new-game-form button {
  padding: 10px;
  background: #2980ff;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

#back-to-lobby {
  background: #555;
  border: none;
  color: #eee;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 12px;
}

/* --- Admin Users Table --- */

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}

.users-table th, .users-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #444;
}

.users-table th {
  background: #2a2a38;
  color: #aaa;
  font-weight: 600;
}

.status-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-active { background: #1a5c2a; color: #5e5; }
.status-pending { background: #5c4a1a; color: #ed5; }