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

html, body {
  height: 100%;
  overflow: hidden;
  background: #0E0A23;
}

canvas { display: block; }

/* ---------------------------------------------------------------- overlay */
#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;              /* panels re-enable their own events */
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #fff;
}

.hidden { display: none !important; }
.panel { pointer-events: auto; }

/* ------------------------------------------------------------- main menu */
#menu {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 38px 48px;
  background: rgba(16, 12, 40, 0.88);
  border: 1px solid rgba(120, 140, 255, 0.35);
  border-radius: 18px;
  box-shadow: 0 0 70px rgba(80, 90, 255, 0.22), 0 24px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.title {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #FF5A5F;
  text-shadow: 0 0 26px rgba(255, 90, 95, 0.5);
}
.title span {
  color: #7EC8FF;
  text-shadow: 0 0 26px rgba(126, 200, 255, 0.5);
  margin-left: 12px;
}
.subtitle {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: -8px;
}

input {
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  width: 280px;
  outline: none;
}
input:focus { border-color: #7EC8FF; }
input::placeholder { color: rgba(255, 255, 255, 0.35); font-weight: 400; }
#nameInput { text-transform: uppercase; letter-spacing: 2px; }
#codeInput {
  width: 130px;
  text-transform: uppercase;
  letter-spacing: 8px;
}

button {
  font: inherit;
  font-weight: 800;
  letter-spacing: 1px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  padding: 12px 22px;
  color: #0E0A23;
  background: linear-gradient(180deg, #7EE0A3, #3DBE72);
  transition: transform 0.06s ease, filter 0.12s ease;
}
button:hover { filter: brightness(1.12); transform: translateY(-1px); }
button:active { transform: translateY(1px); }
button.big { font-size: 18px; padding: 14px 34px; width: 100%; }
#joinBtn { background: linear-gradient(180deg, #8FB7FF, #5B8DEF); }
button.ghost { background: rgba(255, 255, 255, 0.12); color: #fff; }
#readyBtn.armed { background: linear-gradient(180deg, #FFD34D, #F0A731); }

.joinRow { display: flex; gap: 10px; align-items: stretch; }

#menuError {
  color: #FF8B8B;
  font-size: 13px;
  font-weight: 600;
  min-height: 17px;
}

.hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
  line-height: 1.7;
}
.hint b { color: rgba(255, 255, 255, 0.75); font-weight: 700; }

.back {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
}
.back:hover { color: #7EC8FF; }

/* ------------------------------------------------------------ lobby panel */
#lobbyPanel {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 12px 20px;
  background: rgba(16, 12, 40, 0.85);
  border: 1px solid rgba(120, 140, 255, 0.3);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

.codeWrap { display: flex; align-items: baseline; gap: 8px; }
.codeLabel {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
}
#roomCode {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #FFD34D;
  text-shadow: 0 0 18px rgba(255, 211, 77, 0.35);
}

#roster { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.chip.ready { border-color: rgba(126, 255, 170, 0.55); }
.chip .dot { width: 12px; height: 12px; border-radius: 50%; }
.chip .mark { opacity: 0.85; font-size: 12px; }

#lobbyPanel .wide { flex-basis: 100%; }

#modeRow { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
#lobbyPanel button.mode {
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
#lobbyPanel button.mode.active {
  color: #0E0A23;
  background: linear-gradient(180deg, #8FE6FF, #4FB8E8);
  border-color: transparent;
}
.chip .side {
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 6px;
  color: #0E0A23;
  font-weight: 800;
}
#modeHint .warn { color: #FFB86B; }

#lobbyPanel button { padding: 9px 18px; font-size: 14px; }

/* Narrow screens: keep the menu card inside the viewport. */
@media (max-width: 480px) {
  #menu { width: calc(100% - 32px); padding: 28px 20px; }
  .subtitle { text-align: center; letter-spacing: 2px; }
  .title { font-size: 38px; letter-spacing: 4px; }
  input { width: 100%; }
  .joinRow { width: 100%; }
  #codeInput { flex: 1; width: auto; }
}