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

html, body {
  height: 100%;
  background: #05070d;
  color: #8ea3bd;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* The whole look depends on this: whole-number scaling with no smoothing, so one world
   pixel stays one square block instead of being blurred across three. */
/* The canvas is drawn one game pixel LARGER than the viewport on every side, and slid
   inside it. That overhang is what makes smooth scrolling possible without exposing an
   empty edge. */
#viewport {
  overflow: hidden;
  position: relative;
  background: #0b0f1a;
  box-shadow: 0 0 0 1px #1b2436, 0 18px 50px rgba(0, 0, 0, 0.65);
}

#screen, #sprites, #over {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

#hint {
  opacity: 0.72;
  transition: opacity 1.1s ease;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0 16px;
}
#hint.gone { opacity: 0; }
#hint b { color: #cfe0f2; font-weight: 600; }

#crash {
  position: fixed;
  left: 12px; bottom: 12px; right: 12px;
  padding: 10px 12px;
  background: #2a1220;
  border: 1px solid #7a2b45;
  color: #ffb3c6;
  white-space: pre-wrap;
  font-size: 12px;
}

/* --- who's playing ------------------------------------------------------------- */
#select {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(5, 8, 14, 0.90);
  backdrop-filter: blur(2px);
  z-index: 10;
}
#select.gone { display: none; }

#select h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b7c8dc;
}

#roster {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(92vw, 760px);
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 10px;
  min-width: 96px;
  border: 1px solid #253045;
  background: #0e141e;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.card:hover { border-color: #3d5170; background: #131b28; }
.card.on {
  border-color: #6fa8dc;
  background: #16202f;
  transform: translateY(-3px);
}
.card canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
.card span {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #91a4bb;
}
.card.on span { color: #dce8f6; }

.sel-hint { opacity: 0.55; font-size: 12px; }
.sel-hint b { color: #cfe0f2; }

#net {
  position: fixed;
  right: 12px;
  bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #6f8faf;
  opacity: 0.8;
}
#net.off { color: #a2626f; }