html, body { margin: 0; height: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Repeated control styles. Written here rather than repeated inline so the
   markup stays readable; Tailwind Play CDN cannot use @apply reliably, so
   these are plain CSS. */
.preset-btn {
  border-radius: 0.375rem;
  border: 1px solid rgb(51 65 85);
  background: rgb(30 41 59);
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  color: rgb(203 213 225);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.preset-btn:hover { background: rgb(51 65 85); border-color: rgb(71 85 105); }
.preset-btn.active { background: rgb(2 132 199); border-color: rgb(14 165 233); color: #fff; }

.field {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid rgb(51 65 85);
  background: rgb(15 23 42);
  padding: 0.375rem 0.55rem;
  font-size: 0.8125rem;
  color: rgb(226 232 240);
  outline: none;
}
.field:focus { border-color: rgb(14 165 233); box-shadow: 0 0 0 2px rgb(14 165 233 / 0.25); }

.seg { cursor: pointer; }
.seg-label {
  display: block;
  border-radius: 0.375rem;
  padding: 0.3rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: rgb(148 163 184);
  transition: background 120ms, color 120ms;
}
.seg input:checked + .seg-label { background: rgb(2 132 199); color: #fff; }

.map-btn {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid rgb(51 65 85);
  background: rgb(15 23 42 / 0.85);
  font-size: 1rem;
  line-height: 1;
  color: rgb(203 213 225);
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.map-btn:hover { background: rgb(30 41 59); color: #fff; }

.mini-btn {
  border-radius: 0.25rem;
  border: 1px solid rgb(51 65 85);
  background: rgb(30 41 59);
  padding: 0.05rem 0.4rem;
  font-size: 0.6875rem;
  color: rgb(148 163 184);
  cursor: pointer;
}
.mini-btn:hover { background: rgb(51 65 85); color: rgb(226 232 240); }

/* A row is a flex container rather than a <label> so the checkbox and the
   name can do different things: the checkbox toggles, the name solos. */
.player-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.8125rem;
}
.player-row:hover { background: rgb(30 41 59); }
.player-row input[type="checkbox"] { cursor: pointer; flex: none; }

/* Heads are 8x8 source images; nearest-neighbour keeps them blocky rather
   than smearing them when scaled up to row height. */
.player-head {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border: 2px solid transparent;
  border-radius: 0.1875rem;
  background: rgb(15 23 42);
  image-rendering: pixelated;
}
.player-row.dimmed .player-head { opacity: 0.4; }


.player-name {
  flex: 1;
  overflow: hidden;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: rgb(226 232 240);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.player-name:hover { color: rgb(56 189 248); }
.player-row.dimmed .player-name { color: rgb(100 116 139); }

.player-count {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: rgb(100 116 139);
}

/* Live-mode indicator */
.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex: none;
}
.live-off { background: rgb(71 85 105); }
.live-connecting { background: rgb(234 179 8); animation: live-pulse 1s ease-in-out infinite; }
.live-on { background: rgb(34 197 94); animation: live-pulse 2s ease-in-out infinite; }
.live-error { background: rgb(239 68 68); }

@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 0.45; }
}

#live-toggle-row:hover { border-color: rgb(51 65 85); }
#live-toggle:checked ~ #live-status { color: rgb(148 163 184); }

#map-container:active { cursor: grabbing; }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgb(51 65 85); border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: rgb(71 85 105); }

/* flatpickr dark theme fits the slate palette */
.flatpickr-calendar.dark { background: rgb(15 23 42); border: 1px solid rgb(51 65 85); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: rgb(2 132 199); border-color: rgb(2 132 199); }