:root {
  --bg: #2b3a48;
  --bg-panel: #253340;
  --teal: #5faab8;
  --teal-bright: #7dc4d0;
  --teal-dim: #3a6e78;
  --text: #b8dae0;
  --text-inv: #1e2a34;
  --pin: #b0bef8;
  --pin-border: #d4dcff;
  --pin-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Montserrat', 'Roboto', sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  display: grid;
  grid-template-columns: 180px 1fr auto;
  grid-template-rows: 64px 1fr;
  gap: 12px;
  padding: 12px;
}

/* -------- Players sidebar -------- */
#players-panel {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#players-panel h2 {
  margin: 0;
  padding-top: 4px;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

#players-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#players-list li {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--teal);
  border-radius: 8px;
  overflow: hidden;
  cursor: default;
  transition: background-color 0.1s, color 0.1s;
}

#players-list li .name {
  flex: 1;
  padding: 4px 10px;
  font-weight: 700;
  text-transform: uppercase;
}

#players-list li .level {
  padding: 4px 10px;
  border-left: 2px solid var(--teal);
  min-width: 34px;
  text-align: center;
}

#players-list li.highlight {
  background: var(--teal);
  color: var(--text-inv);
}

#players-list li.highlight .level { border-left-color: var(--text-inv); }

/* TOP BAR */
#topbar {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  gap: 24px;
}

#host-metrics {
  display: flex;
  gap: 12px;
  font-size: 16px;
}

#auth-slot { display: flex; align-items: center; }

.auth-btn, #user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--teal);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
}

.auth-btn:hover { background: var(--teal-dim); }
.steam-icon { width: 22px; height: 22px; }

#user-badge img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--teal);
}

/* -------- Map area -------- */
/* The viewport the map is panned and zoomed inside of. Sized by the page grid,
   never by the map, which is what lets the map size itself against this box in
   turn. The frame lives here rather than on the map so that it stays put, and
   stays 2px, while the map moves and scales underneath it. */
#map-area {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--teal);
  border-radius: 8px;
  background: var(--bg-panel);
  cursor: grab;
  user-select: none;
}

/* Pins would otherwise light up and pop tooltips as they slide under a dragging
   cursor, which reads as the map fighting back */
#map-area.dragging { cursor: grabbing; }
#map-area.dragging .pin { pointer-events: none; }

/* The map is square because the image is, and it is sized to the smaller of the
   two axes so the whole thing is on screen at fit zoom whatever the window shape.
   Pins are placed at a percentage of this box and the image is stretched to
   exactly fill it, so a percentage is a fixed point on the image -- at any size,
   and now at any pan and zoom, since both are just a transform on this one box
   and the pins are inside it. */
#map-canvas {
  position: relative;
  width: min(100cqw, 100cqh);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  background: url('assets/pal-1.0.jpg') 0 0 / 100% 100% no-repeat;
  transform-origin: 0 0;
  will-change: transform;
}

/* A pin rides inside the zoomed map, so it would be drawn 8x wide at 8x zoom.
   Dividing out the map's scale holds it at 14px on screen while its anchor point
   still moves with the terrain. --zoom is set on #map-canvas by app.js; the
   fallback keeps the pins the right size if the map has not been drawn yet. */
.pin {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) scale(calc(1 / var(--zoom, 1)));
  border-radius: 50%;
  background: var(--pin);
  border: 2px solid var(--pin-border);
  cursor: pointer;
  box-shadow: var(--pin-shadow);
  transition: box-shadow 0.1s;
}

/* Keeps the drop shadow under the glow, or the pin would flatten out against
   the map at exactly the moment it is highlighted */
.pin.highlight {
  transform: translate(-50%, -50%) scale(calc(1.3 / var(--zoom, 1)));
  box-shadow: var(--pin-shadow), 0 0 12px var(--pin-border);
}

/* Lives outside the map so the map's overflow can clip the map without also
   clipping this. app.js places it in viewport coordinates, off the pin's
   on-screen box, which keeps it the same size at every zoom level. */
#tooltip {
  position: fixed;
  z-index: 10;
  border: 2px solid var(--teal);
  background: var(--bg-panel);
  color: var(--text);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 20px;
  pointer-events: none;
  white-space: nowrap;
  display: inline-flex;
  gap: 10px;
  transform: translate(12px, -130%);
}

#tooltip .level,
#tooltip .ping {
  padding-left: 10px;
  border-left: 2px solid var(--teal);
}

/* Pins near the right edge get their tooltip on the left, or the map clips it */
#tooltip.flip { transform: translate(calc(-100% - 12px), -130%); }

.hidden { display: none !important; }

/* -------- Right panel -------- */
#right-panel {
  grid-column: 3;
  grid-row: 2;
  display: none;
  flex-direction: column;
  gap: 18px;
  width: 170px;
}

body.show-right-panel #right-panel { display: flex; }

#right-panel section h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

.action-btn, .download-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: 2px solid var(--teal);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 8px;
  text-decoration: none;
  text-transform: uppercase;
}

.action-btn:hover, .download-item:hover { background: var(--teal-dim); }

#backup-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#backup-list li { margin-bottom: 8px; }
#backup-list .download-item { margin-bottom: 0; font-size: 16px; }