html, body {
  margin: 0;
  height: 100%;
  background: #0b0f1f;
  overflow: hidden;
  cursor: default;
}

#wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", Consolas, monospace;
  font-weight: bold;
  color: #fff;
}

.hidden { display: none !important; }

.panel {
  background: #46648c;
  border: 0.25em solid #fff;
  box-shadow: 0 0 0 0.25em #1a1c2c, 0.5em 0.5em 0 0.25em rgba(0, 0, 0, 0.45);
  padding: 1em 1.5em;
  width: 72%;
  max-height: 88%;
  overflow: auto;
  box-sizing: border-box;
}

.panel h1 {
  margin: 0 0 0.4em;
  font-size: 1.5em;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.08em;
}

.panel h2 {
  font-size: 1.05em;
  color: #f9b000;
  margin: 1em 0 0.4em;
  border-bottom: 2px solid #f9b000;
}

.panel h3 { font-size: 0.95em; margin: 0.4em 0; color: #c8f2ff; }

.hint, .small { color: #c8f2ff; text-align: center; margin: 0.3em 0 0.8em; }
.small { font-size: 0.75em; margin-top: 0.8em; }

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em 1em;
}

.field { display: flex; flex-direction: column; gap: 0.2em; }
.field span { font-size: 0.85em; text-transform: uppercase; }

input[type=text], input[type=email], input[type=password], input[type=number] {
  font: inherit;
  font-size: max(16px, 1.05em); /* unter 16px zoomt iPhone/iPad beim Antippen ins Bild */
  padding: 0.3em 0.4em;
  background: #34507a;
  color: #fff;
  border: 3px solid #a9bfd8;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

input:focus { border-color: #f9b000; background: #3d5a82; }
input.bad { border-color: #ff6b6b; }

.check {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  margin-top: 0.7em;
  font-size: 0.85em;
  font-weight: normal;
  cursor: pointer;
}

.check input {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  accent-color: #f9b000;
  margin: 0.1em 0 0;
}

.check input:focus { outline: 3px solid #f9b000; }

.err { color: #ff8f8f; min-height: 1.3em; margin-top: 0.6em; text-align: center; }

.buttons {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-top: 0.6em;
  flex-wrap: wrap;
}

.btn {
  font: inherit;
  padding: 0.45em 1em;
  background: #f9b000;
  color: #1a1c2c;
  border: 3px solid #1a1c2c;
  box-shadow: 0 0 0 2px #fff;
  cursor: pointer;
}

.btn:hover, .btn:focus { background: #ffc633; outline: none; }
.btn.ghost { background: #3b4a6b; color: #fff; }
.btn.ghost:hover, .btn.ghost:focus { background: #52668f; }
.btn.danger { background: #e04848; color: #fff; }
.btn.small { padding: 0.15em 0.5em; font-size: 0.8em; }

.admin { width: 90%; font-weight: normal; font-size: 0.8em; }
.admin p { margin: 0.3em 0; }
.admin .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.admin ol { margin: 0; padding-left: 1.4em; }
.admin table { width: 100%; border-collapse: collapse; }
.admin td, .admin th { text-align: left; padding: 0.15em 0.4em; border-bottom: 1px solid #5a7aa3; }
.admin .row { display: flex; gap: 0.6em; flex-wrap: wrap; align-items: center; }
.admin .row label { display: flex; flex-direction: column; gap: 0.2em; }
.admin .row input { width: 12em; }
.admin .warn { background: #e04848; padding: 0.4em; margin-bottom: 0.5em; }
.admin .ok { color: #7be07b; }

.logo {
  background: #fff;
  margin: -1em -1.5em 0.8em;
  padding: 0.5em;
  text-align: center;
  border-bottom: 0.25em solid #f9b000;
}
.logo img { height: 4.5em; margin: -0.6em 0; display: inline-block; }

.admin textarea {
  width: 100%;
  height: 8em;
  font: 0.8em "Courier New", monospace;
  box-sizing: border-box;
  background: #34507a;
  color: #fff;
  border: 2px solid #a9bfd8;
}
.admin .export { background: #3d5a82; padding: 0.5em; margin: 0.5em 0; }

/* Anmeldung: Formular oben, darunter läuft die Demo */
#overlay.top { align-items: flex-start; padding-top: 1.5%; box-sizing: border-box; }
#overlay.top .reg { font-size: 0.8em; padding: 0.7em 1.2em; max-height: 64%; width: 76%; }
#overlay.top .reg .logo { margin: -0.7em -1.2em 0.5em; padding: 0.3em; }
#overlay.top .reg .logo img { height: 3.4em; }
#overlay.top .reg h1 { margin-bottom: 0.2em; }
#overlay.top .reg .hint { margin: 0.1em 0 0.4em; }
#overlay.top .reg .check { margin-top: 0.4em; }
#overlay.top .reg .err { min-height: 1em; margin-top: 0.3em; }
#overlay.top .reg .small { margin-top: 0.3em; }

/* ---------- Tablet / Handy ---------- */
html, body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#overlay input, #overlay textarea { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
#overlay .panel { touch-action: pan-y; }
.reg.online { width: 56%; }
.reg.online .field input { font-size: 1.3em; text-transform: uppercase; }

#touch {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  font-family: "Courier New", Consolas, monospace; font-weight: bold; color: #fff;
}
#touch > * { pointer-events: auto; }
/* Bedienfelder im Look eines Laborgeräts: Edelstahl-Blende mit Navy-Rahmen und vier Schrauben */
#touch .t-panel {
  position: absolute; bottom: 3vmin; padding: 2vmin; box-sizing: border-box; display: flex; gap: 1.4vmin;
  border: 0.6vmin solid rgba(70, 100, 140, 0.85); border-radius: 2.4vmin;
  background:
    radial-gradient(circle, #8a93a6 0.5vmin, #4a5266 0.7vmin, transparent 0.8vmin) 0.6vmin 0.6vmin / 2vmin 2vmin no-repeat,
    radial-gradient(circle, #8a93a6 0.5vmin, #4a5266 0.7vmin, transparent 0.8vmin) calc(100% - 0.6vmin) 0.6vmin / 2vmin 2vmin no-repeat,
    radial-gradient(circle, #8a93a6 0.5vmin, #4a5266 0.7vmin, transparent 0.8vmin) 0.6vmin calc(100% - 0.6vmin) / 2vmin 2vmin no-repeat,
    radial-gradient(circle, #8a93a6 0.5vmin, #4a5266 0.7vmin, transparent 0.8vmin) calc(100% - 0.6vmin) calc(100% - 0.6vmin) / 2vmin 2vmin no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 0.3vmin, transparent 0.3vmin 0.9vmin),
    linear-gradient(160deg, rgba(222, 228, 238, 0.55), rgba(150, 160, 178, 0.45));
  box-shadow: 0 0.8vmin 0 rgba(26, 28, 44, 0.45);
}
#touch .t-move { left: max(2vmin, env(safe-area-inset-left)); width: 44vmin; height: 22vmin; }
#touch .t-act { right: max(2vmin, env(safe-area-inset-right)); width: 27vmin; height: 46vmin; flex-direction: column; }
#touch .t-key, #touch .t-btn {
  display: flex; align-items: center; justify-content: center;
  background: rgba(70, 100, 140, 0.6); border: 0.5vmin solid rgba(255, 255, 255, 0.8);
  border-radius: 2vmin; box-shadow: inset 0 0.8vmin 0 rgba(255, 255, 255, 0.25), 0 0.6vmin 0 rgba(26, 28, 44, 0.5);
  text-shadow: 0 0.3vmin 0 #1a1c2c; letter-spacing: 0.05em;
}
/* Tasten sind nur Anzeige: welche gedrückt ist, ergibt sich aus der Fingerposition im Feld (touch.js) */
#touch .t-key { flex: 1; pointer-events: none; font-size: 3.6vmin; }
#touch .t-left, #touch .t-right { font-size: 7vmin; background: rgba(79, 143, 207, 0.65); }
#touch .t-jump { background: rgba(80, 180, 90, 0.7); }
#touch .t-suck { background: rgba(249, 176, 0, 0.75); }
#touch .t-btn { position: absolute; border-radius: 50%; font-size: 3.6vmin; }
#touch .t-pause {
  position: absolute; top: calc(14vmin + env(safe-area-inset-top)); right: max(2vmin, env(safe-area-inset-right));
  width: 9vmin; height: 9vmin; border-radius: 2vmin; font-size: 3.5vmin;
}
#touch .on { background: rgba(255, 255, 255, 0.6) !important; transform: translateY(0.5vmin); box-shadow: inset 0 0.4vmin 0 rgba(26, 28, 44, 0.3); }

#rotate { display: none; }
@media (orientation: portrait) {
  body.touch #rotate {
    display: flex; position: fixed; inset: 0; z-index: 20; align-items: center; justify-content: center; text-align: center;
    background: #46648c; color: #fff; font: bold 6vmin "Courier New", monospace; line-height: 1.6;
  }
}

/* Kleine Bildschirme (Handy quer): Formular kompakter und scrollbar */
@media (max-height: 500px) {
  #overlay.top { padding-top: 0.5%; }
  #overlay.top .reg { max-height: 96%; max-height: 96dvh; width: 92%; padding: 0.4em 0.8em; }
  #overlay.top .reg .logo { display: none; }
  #overlay.top .reg .hint { display: none; }
  #overlay.top .reg .small { font-size: 0.65em; margin-top: 0.2em; }
  #overlay.top .reg .check { font-size: 0.75em; margin-top: 0.2em; }
  .fields { gap: 0.2em 0.6em; }
  .panel { max-height: 96%; }
}

/* Hinweis "Zum Home-Bildschirm" (iPhone/iPad in Safari) */
#a2hs {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30;
  background: #f9b000; color: #1a1c2c; border: 3px solid #1a1c2c; box-shadow: 0 0 0 2px #fff;
  font: bold 15px "Courier New", monospace; padding: 8px 36px 8px 12px; max-width: 86vw; line-height: 1.4;
}
#a2hs button { position: absolute; right: 4px; top: 4px; font: bold 16px monospace; background: none; border: 0; color: #1a1c2c; }

/* Scharfer QR-Code auf dem Ergebnisbildschirm */
#qrview { position: absolute; display: none; z-index: 2; image-rendering: pixelated; image-rendering: crisp-edges; box-shadow: 0 0 0 2px #1a1c2c; }