/* Оформление игрового поля. Полигон масштабирует iframe на весь плеер. */
* { margin: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #0B2E5C;
  background: linear-gradient(135deg, #0B2E5C 0%, #1D5FA8 45%, #3FC1E8 100%);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

#screen {
  width: min(70vmin, 512px);
  height: auto;
  aspect-ratio: 256 / 240;
  image-rendering: pixelated;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 16px);
}

#hud {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
}

#hud .tag {
  background: #15181D;
  color: #00E0FF;
  padding: 4px 10px;
}

#hud .msg { color: rgba(255, 255, 255, 0.65); }