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

html, body {
  height: 100%;
  background: #05070f;
  overflow: hidden;
  font-family: "Press Start 2P", "Courier New", monospace;
}

#wrap {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(77,107,254,.14), transparent 60%),
    #05070f;
}

#identity-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 84vw);
  padding: 20px 24px 18px;
  transform: translate(-50%, -35%);
  color: #eef2ff;
  border: 2px solid #4d6bfe;
  background: linear-gradient(135deg, rgba(13, 20, 59, .98), rgba(5, 8, 25, .98));
  box-shadow: 0 0 0 4px rgba(5, 8, 25, .9), 0 0 34px rgba(77, 107, 254, .45);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  z-index: 5;
}

#identity-panel[hidden] { display: none; }

.callsign-kicker {
  display: block;
  margin-bottom: 10px;
  color: #ffe9a8;
  font-size: 9px;
  letter-spacing: 3px;
}

#identity-panel label {
  display: block;
  margin-bottom: 12px;
  color: #a9b8ef;
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: 700;
}

.callsign-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

#username,
#identity-panel button {
  min-height: 46px;
  border: 2px solid #34458e;
  border-radius: 0;
  font: 700 15px "Courier New", monospace;
}

#username {
  min-width: 0;
  padding: 0 14px;
  color: #fff;
  background: #070b18;
  outline: none;
  caret-color: #ffe9a8;
}

#username::placeholder { color: #53639c; }

#username:focus {
  border-color: #ffe9a8;
  box-shadow: inset 0 0 0 2px rgba(255, 233, 168, .14), 0 0 18px rgba(255, 233, 168, .22);
}

#identity-panel button {
  padding: 0 18px;
  color: #11152b;
  border-color: #ffe9a8;
  background: #ffe9a8;
  cursor: pointer;
}

#identity-panel button:hover { background: #fff4cd; }
#identity-panel button:focus-visible { outline: 3px solid #86a0ff; outline-offset: 3px; }
#identity-panel button:disabled { cursor: wait; opacity: .55; }

#identity-help,
#identity-status {
  display: block;
  margin-top: 10px;
  font: 12px "Courier New", monospace;
}

#identity-help { color: #6475b3; }
#identity-status { min-height: 15px; color: #ff8a9a; }

#game {
  width: min(96vw, calc((100vh - 70px) * 1.6));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 6px;
  box-shadow: 0 0 0 3px #1b2350, 0 0 60px rgba(77,107,254,.25);
  background: #070b18;
}

#hint {
  color: #5a6baf;
  font-size: 10px;
  letter-spacing: 1px;
  user-select: none;
}

@media (max-width: 640px) {
  .callsign-row { grid-template-columns: 1fr; }
  #identity-panel { padding: 18px; transform: translate(-50%, -42%); }
}