/* Aussehen der Seite rund um das Spiel: Bildschirmtasten, Namensfeld, Hochformat-Hinweis */

html, body {
  margin: 0;
  height: 100%;
  background: #111;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#game {
  width: 100%;
  height: 100%;
}
canvas {
  image-rendering: pixelated;
  touch-action: none;
}

/* ---------- Bildschirmtasten ---------- */
#touch-controls {
  --b: clamp(52px, 10vmin, 76px); /* Tastengröße */
  --edge: 14px;
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 5;
}
#touch-controls.visible { display: block; }
#touch-controls .pad {
  position: absolute;
  bottom: max(var(--edge), env(safe-area-inset-bottom));
}
#touch-controls .pad-left {
  left: max(var(--edge), env(safe-area-inset-left));
  width: calc(var(--b) * 3);
  height: calc(var(--b) * 3);
}
#touch-controls .pad-right {
  right: max(var(--edge), env(safe-area-inset-right));
  width: calc(var(--b) * 2.8);
  height: calc(var(--b) * 2.4);
}
#touch-controls .btn {
  position: absolute;
  pointer-events: auto;
  width: var(--b);
  height: var(--b);
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font: bold calc(var(--b) * 0.36) monospace;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#touch-controls .btn small {
  font-size: calc(var(--b) * 0.15);
  font-weight: normal;
  opacity: 0.85;
  margin-top: 2px;
}
#touch-controls .btn.active { background: rgba(255, 255, 255, 0.45); }
#touch-controls .up    { left: var(--b); top: 0; }
#touch-controls .left  { left: 0; top: var(--b); }
#touch-controls .right { left: calc(var(--b) * 2); top: var(--b); }
#touch-controls .down  { left: var(--b); top: calc(var(--b) * 2); }
#touch-controls .jump  { right: 0; bottom: 0; width: calc(var(--b) * 1.3); height: calc(var(--b) * 1.3); }
#touch-controls .fire  { right: calc(var(--b) * 1.45); bottom: 0; border-color: rgba(255, 200, 80, 0.9); }
#touch-controls .draw  { right: calc(var(--b) * 0.5); bottom: calc(var(--b) * 1.45); border-color: rgba(180, 220, 255, 0.9); }

/* ---------- Namenseingabe (echtes Eingabefeld, damit die Bildschirmtastatur erscheint) ---------- */
#name-input {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 11ch;
  padding: 6px 10px;
  font: bold 20px monospace; /* mind. 16px, sonst zoomt iOS beim Antippen */
  text-align: center;
  color: #ffe082;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #ffe082;
  border-radius: 6px;
  outline: none;
  z-index: 6;
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- Hinweis im Hochformat ---------- */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #111;
  color: #fff;
  font: 20px monospace;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}