* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0c24; color: #e8ebff; font-family: system-ui, sans-serif; }
#wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
canvas { max-width: 100%; max-height: 100%; aspect-ratio: 760 / 600; background: #0a0c24; }
#menu {
  position: absolute; inset: 0; margin: auto; width: min(460px, 94vw); height: fit-content;
  background: rgba(18, 21, 58, .96); border: 2px solid #3a4180; border-radius: 16px; padding: 22px 26px;
  display: flex; flex-direction: column; gap: 10px;
}
#menu[hidden], [hidden] { display: none !important; }
#menu h1 { margin: 0 0 4px; text-align: center; font-size: 34px; letter-spacing: 2px; color: #ffd43b; }
#menuMain, #hostPanel, #joinPanel { display: flex; flex-direction: column; gap: 10px; }
button {
  background: #4dabf7; color: #08122a; border: 0; border-radius: 10px; padding: 11px 14px;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
button:hover { filter: brightness(1.12); }
button.secondary { background: #3a4180; color: #e8ebff; }
textarea {
  width: 100%; background: #0c0f2c; color: #b9c0ee; border: 1px solid #3a4180; border-radius: 8px;
  padding: 8px; font: 12px ui-monospace, Consolas, monospace; resize: none;
}
label { font-size: 14px; color: #b9c0ee; }
.hint, .keys, #status { margin: 0; font-size: 13px; color: #8f98c9; text-align: center; }
#status { min-height: 18px; color: #ffd43b; }