@font-face { font-family: "PS2P"; src: url("assets/fonts/press-start-2p.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "VT"; src: url("assets/fonts/vt323.woff2") format("woff2"); font-display: block; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #08040f; overflow: hidden;
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#spiel {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh;
  image-rendering: pixelated; image-rendering: crisp-edges; display: block;
}
#namensfeld { position: fixed; z-index: 5; }
#namensfeld input {
  width: 100%; height: 100%; box-sizing: border-box;
  background: #1a0f2e; color: #ffe27a; border: 3px solid #ff4fa3; outline: none;
  font-family: "PS2P", monospace; font-size: 16px; text-align: center; padding: 0 8px;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  box-shadow: 0 0 12px #ff4fa388;
}
#drehen {
  display: none; position: fixed; inset: 0; z-index: 20; background: #140a26;
  color: #ffe27a; font-family: "PS2P", monospace; font-size: 12px; text-align: center;
  align-items: center; justify-content: center; line-height: 1.8;
}
.drehen-box p { margin: 24px 30px 0; }
.handy {
  width: 40px; height: 70px; margin: 0 auto; border: 4px solid #5ff2e0; border-radius: 6px;
  animation: dreh 2s ease-in-out infinite;
}
@keyframes dreh { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { #drehen { display: flex; } }
#laden {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #ff4fa3; font: 16px "PS2P", monospace; text-shadow: 0 0 10px #ff4fa3; z-index: 10; background: #08040f;
  line-height: 2;
}
#laden span { color: #5ff2e0; font-size: 10px; text-shadow: none; }