* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; background: #0b1020; overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #eef;
}
#game { width: 100vw; height: 100vh; }
#game canvas { display: block; margin: 0 auto; }

.hidden { display: none !important; }

#overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 24, 0.78); z-index: 10;
}
/* On the start screen, let the splash art show: dim less and drop the card lower. */
body.menu-bg #overlay {
  align-items: flex-end; padding-bottom: 5vh;
  background: linear-gradient(to bottom, rgba(6,10,24,0) 30%, rgba(6,10,24,0.55) 70%);
}
body.menu-bg #overlay-card {
  background: rgba(20, 27, 51, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-color: rgba(123, 160, 255, 0.25);
}
/* The splash already shows the logo, so hide the card's text title on the start screen. */
body.menu-bg #overlay-card h1 { display: none; }
#overlay-card {
  background: #141b33; border: 1px solid #2b3a66; border-radius: 14px;
  padding: 28px 32px; width: min(440px, 92vw); box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
#overlay-card h1 { margin: 0 0 18px; font-size: 26px; letter-spacing: .5px; color: #79ffd0; }
#overlay-body { display: flex; flex-direction: column; gap: 12px; }
#overlay-body input {
  padding: 12px 14px; border-radius: 9px; border: 1px solid #33406e;
  background: #0e1530; color: #eef; font-size: 16px;
}
#overlay-body button {
  padding: 12px 14px; border-radius: 9px; border: none; cursor: pointer;
  background: #2d7cf6; color: #fff; font-size: 16px; font-weight: 600;
}
#overlay-body button.secondary { background: #2b3a66; }
#overlay-body button:hover { filter: brightness(1.1); }
#overlay-body .row { display: flex; gap: 10px; }
#overlay-body .row > * { flex: 1; }
#overlay-body .muted { color: #8da; opacity: .7; font-size: 13px; text-align: center; }
#overlay-body .err { color: #ff8585; font-size: 13px; text-align: center; min-height: 16px; }
#overlay-body .list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
#overlay-body .list .item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: #0e1530; border-radius: 8px; border: 1px solid #29335c;
}
#overlay-body .list .item button { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; }