/* =====================================================================
   Repulsor — Seite um das Spiel
   =====================================================================

   Oben eine schmale Leiste, darunter die Leinwand in 16:9, so groß wie
   der erste Bildschirm erlaubt. Die Anleitung steht darunter zum
   Scrollen. Farben wie im Spiel: Tintenblau, Messing, Ziegelrot.
   ===================================================================== */

:root {
  --tinte: #05070d;
  --flaeche: #0d1120;
  --kante: #2a2f44;
  --messing: #dba843;
  --knochen: #cfc7ae;
  --creme: #f6efd2;
  --leiste: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--tinte);
  color: var(--knochen);
  font: 15.5px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.buehne {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
}

.leiste {
  height: var(--leiste);
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--kante);
}
.leiste .luecke { flex: 1; }
.leiste a {
  color: var(--knochen);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.leiste a:hover { color: var(--creme); }
.zurueck { display: inline-flex; align-items: center; gap: 4px; }
.zurueck svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.rahmen {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
}

canvas {
  display: block;
  width: min(100%, calc((100svh - var(--leiste)) * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--tinte);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
canvas.playing { cursor: none; }

/* Am Handy hochkant: Hinweis zum Drehen. Quer: Leiste weg, Spiel füllt den Bildschirm. */
.drehen {
  display: none;
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--messing);
  background: rgba(7, 9, 15, .88);
  color: var(--creme);
  font-size: 14px;
  text-align: center;
}
@media (pointer: coarse) and (orientation: portrait) {
  .drehen { display: block; }
}
@media (pointer: coarse) and (orientation: landscape) {
  :root { --leiste: 0px; }
  .leiste { display: none; }
  canvas { width: min(100%, calc(100svh * 16 / 9)); }
}

.info-text {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 32px 16px 56px;
  display: grid;
  gap: 12px;
}
.info-text h2 { margin: 0; color: var(--creme); font-size: 26px; line-height: 1.2; }
.info-text h3 { margin: 10px 0 0; color: var(--creme); font-size: 18px; line-height: 1.25; }
.info-text p { margin: 0; }
.info-text b { color: var(--creme); }
.info-text a { color: var(--messing); font-weight: 600; text-underline-offset: 3px; }
.regeln { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.spielinfo > div { display: grid; gap: 12px; }
.spielinfo-link { margin-top: 8px !important; }

.runde-vorbei { position: absolute; width: 0; height: 0; }

.ohne-js { text-align: center; padding: 20px; }