/* Spielbox: Rahmen um den Emulator <atari-800xl> auf den Spielseiten.
   Einheitliches Aussehen auf allen Seiten; Akzentfarbe pro Seite über --spielbox-akzent.
   Alle Regeln sind auf .spielbox beschränkt, damit die Seiten-Styles nicht stören. */

.spielbox {
  --spielbox-akzent: #ffd040;
  --spielbox-grund: #14142a;
  --spielbox-text: #f2f2ff;

  max-width: 800px;
  margin: 1.6em auto;
  padding: 0 14px 14px;
  background: var(--spielbox-grund);
  border: 3px solid var(--spielbox-akzent);
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.5);
  color: var(--spielbox-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  text-shadow: none;
  scroll-margin-top: 12px;
}

.spielbox * {
  text-shadow: none;
}

/* Kopfzeile */
.spielbox .spielbox-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 -14px 12px;
  padding: 8px 14px;
  background: var(--spielbox-akzent);
  border-radius: 6px 6px 0 0;
  color: #14142a;
}

.spielbox .spielbox-titel {
  margin: 0;
  color: #14142a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
}

.spielbox .spielbox-untertitel {
  margin: 0;
  font-size: 13px;
}

/* Symbole „Ton“ und „lösen“ rechts im Kopf (werden von spielbox.js eingefügt) */
.spielbox .spielbox-kopf .spielbox-ton,
.spielbox .spielbox-kopf .spielbox-loesen {
  margin-left: auto;
  padding: 5px 7px;
  background: transparent;
  border: 1px solid rgba(20, 20, 42, 0.45);
  border-radius: 4px;
  color: #14142a;
  line-height: 0;
}

.spielbox .spielbox-kopf .spielbox-ton + .spielbox-loesen {
  margin-left: 0;
}

.spielbox .spielbox-kopf .spielbox-ton[aria-pressed="true"] {
  background: rgba(20, 20, 42, 0.15);
  border-color: #14142a;
}

.spielbox .spielbox-kopf .spielbox-ton:hover,
.spielbox .spielbox-kopf .spielbox-ton:focus-visible,
.spielbox .spielbox-kopf .spielbox-loesen:hover,
.spielbox .spielbox-kopf .spielbox-loesen:focus-visible {
  background: rgba(20, 20, 42, 0.15);
  border-color: #14142a;
}

/* Gelöst: schwebt als verschiebbares Fenster über der Seite (Klasse setzt spielbox.js,
   Position über left/top, Breite des Emulators über --spielbox-breite). */
.spielbox.ist-geloest {
  position: fixed;
  z-index: 90;   /* über der Seite und ihren Menüs, unter Zoom-Ansichten (z. B. Kartenansicht, 100) */
  box-sizing: border-box;
  width: calc(var(--spielbox-breite, 800px) + 34px);   /* + Innenabstand und Rahmen */
  max-width: none;
  margin: 0;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 18px 50px rgba(0, 0, 0, 0.7);
}

.spielbox.ist-geloest .spielbox-kopf {
  cursor: move;
  touch-action: none;
  user-select: none;
}

.spielbox.ist-geloest .spielbox-kopf button {
  cursor: pointer;
}

.spielbox.wird-gezogen {
  opacity: 0.92;
}

.spielbox.wird-gezogen .spielbox-kopf {
  cursor: grabbing;
}

/* Platzhalter an der alten Stelle, solange die Spielbox schwebt */
.spielbox-platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 800px;
  margin: 1.6em auto;
  padding: 16px;
  background: rgba(20, 20, 42, 0.25);
  border: 3px dashed #ffd040;
  border-radius: 10px;
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  box-sizing: border-box;
}

.spielbox-platzhalter[hidden] {
  display: none;
}

.spielbox-platzhalter p {
  margin: 0;
}

.spielbox-platzhalter button {
  padding: 6px 14px;
  background: #2a2a4e;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.spielbox-platzhalter button:hover,
.spielbox-platzhalter button:focus-visible {
  background: #3a3a6e;
  border-color: #ffd040;
}

/* Auf schmalen Bildschirmen hat ein schwebendes Fenster keinen Platz */
@media (max-width: 899px) {
  .spielbox .spielbox-kopf .spielbox-loesen {
    display: none;
  }
}

/* Bildschirm mit Kurzhilfe auf dem Startbild. So breit wie der Emulator selbst, damit der
   Balken der Kurzhilfe nicht über das Bild hinausragt (z. B. bei border="0") */
.spielbox .spielbox-bildschirm {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 0;
}

.spielbox atari-800xl {
  display: inline-block;
}

.spielbox .spielbox-kurzhilfe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  pointer-events: none;   /* Klicks gehen an das Startbild */
}

.spielbox .spielbox-kurzhilfe[hidden] {
  display: none;
}

/* Hinweis des Emulators (Gerät langsam) unten im Startbild nicht verdecken */
.spielbox.mit-leistungshinweis .spielbox-kurzhilfe {
  position: static;
  margin-top: 6px;
  border-radius: 4px;
}

.spielbox kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 5px;
  background: #f2f2ff;
  border: 1px solid #9999bb;
  border-bottom-width: 3px;
  border-radius: 4px;
  color: #14142a;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.85em;
  line-height: 1.5;
  text-align: center;
}

/* Bedienleiste */
.spielbox .spielbox-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.spielbox button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #2a2a4e;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

.spielbox button:hover,
.spielbox button:focus-visible {
  background: #3a3a6e;
  border-color: var(--spielbox-akzent);
}

/* Urheberhinweis (AltirraOS/BASIC), unauffällig rechts in der Leiste */
/* Block rechtsbündig in der Leiste, beide Zeilen darin zentriert */
.spielbox .spielbox-urheber {
  margin-left: auto;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.55;
  text-align: center;
}

.spielbox .spielbox-urheber a,
.spielbox .spielbox-urheber a:link,
.spielbox .spielbox-urheber a:visited {
  color: inherit;
  text-decoration: underline;
}

.spielbox button:disabled {
  opacity: 0.45;
  cursor: default;
}

.spielbox button[aria-expanded="true"] {
  border-color: var(--spielbox-akzent);
}

.spielbox .spielbox-steuerung[hidden] {
  display: none;
}

/* Steuerungstabelle */
.spielbox table.spielbox-tasten {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 14px;
}

.spielbox table.spielbox-tasten th,
.spielbox table.spielbox-tasten td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--spielbox-text);
  text-align: left;
  vertical-align: top;
}

.spielbox table.spielbox-tasten th {
  color: var(--spielbox-akzent);
}

.spielbox .spielbox-tipp {
  margin: 8px 0 0;
  font-size: 13px;
  opacity: 0.85;
}

/* Zugeklappt (Handy/Tablet, Klasse setzt spielbox.js): nur eine schmale Leiste */
.spielbox.ist-zugeklappt {
  padding: 0;
}

.spielbox.ist-zugeklappt > :not(.spielbox-zu) {
  display: none;
}

.spielbox .spielbox-zu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 12px;
}

.spielbox .spielbox-zu p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

/* Menüpunkt „Spielen“ auf Handy/Tablet ausblenden */
@media (hover: none) and (pointer: coarse) {
  .Menu .spielbox-menue {
    display: none !important;
  }
}

/* Hinweis für Geräte ohne Tastatur (Handy/Tablet) */
.spielbox .spielbox-mobil {
  display: none;
  margin: 10px 0 0;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

@media (hover: none) and (pointer: coarse) {
  .spielbox .spielbox-mobil {
    display: block;
  }
}

@media (max-width: 560px) {
  .spielbox {
    padding: 0 8px 10px;
  }

  /* Knöpfe gleich breit in einer Reihe, Lizenzhinweis in eigener Zeile zentriert */
  .spielbox .spielbox-leiste {
    flex-wrap: wrap;
    gap: 6px;
  }

  .spielbox .spielbox-leiste button {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    font-size: 13px;
    white-space: nowrap;
  }

  .spielbox .spielbox-urheber {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 2px;
  }

  .spielbox .spielbox-kopf {
    margin: 0 -8px 10px;
    padding: 8px;
  }

  .spielbox .spielbox-kurzhilfe {
    position: static;
    margin-top: 6px;
    border-radius: 4px;
    font-size: 13px;
  }
}

/* Wird die Knopfreihe zu schmal (je nach Seite und Handy), entfallen die Symbole */
.spielbox .spielbox-leiste {
  container-type: inline-size;
}

@container (max-width: 255px) {
  .spielbox .spielbox-leiste .spielbox-symbol {
    display: none;
  }
}

/* ------------------------------------------------------------------------------------------
   Handheld-Modus (Handy/Tablet, aufgebaut von handheld.js): Vollbild-Ansicht mit
   Steuerkreuz, Feuerknöpfen und Konsolentasten. Quer: Kreuz links, Feuer rechts, Tasten
   unter dem Bild. Hochkant: Bild oben, Bedienung darunter. Format des Bildes über
   --hh-format (Breite / Höhe, je nach border).
   ------------------------------------------------------------------------------------------ */

/* Startknopf statt Hinweis „Keine Touch-Steuerung“ */
.spielbox .spielbox-mobil:has(.spielbox-handheld-start) {
  padding: 0;
  background: none;
}

.spielbox button.spielbox-handheld-start {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--spielbox-akzent);
  border: none;
  border-radius: 6px;
  color: #14142a;
  font-size: 17px;
  font-weight: bold;
}

html.handheld-offen,
html.handheld-offen body {
  overflow: hidden;
}

.handheld {
  --hh-format: 1.4766;
  --hh-luft: 8px;

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  gap: var(--hh-luft);
  padding: var(--hh-luft);
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(180deg, #26262e 0%, #16161c 55%, #0d0d12 100%);
  color: #f2f2ff;
  font-family: Arial, Helvetica, sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.handheld[hidden] {
  display: none;
}

.handheld * {
  box-sizing: border-box;
  -webkit-touch-callout: none;
}

.handheld button {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  touch-action: none;
}

/* Bild */
.handheld .hh-bild {
  grid-area: bild;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 6px;
  background: linear-gradient(180deg, #0a0a0d, #1c1c22);
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ✕, Pause, Ton */
.handheld .hh-oben {
  grid-area: oben;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: flex-start;
}

.handheld .hh-knopf,
.handheld .hh-taste {
  background: linear-gradient(180deg, #3a3a44, #24242c);
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 0 #0a0a0e, 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.handheld .hh-knopf:active,
.handheld .hh-taste.ist-gedrueckt {
  transform: translateY(2px);
  background: linear-gradient(180deg, #24242c, #30303a);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.handheld .hh-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #dcdce8;
  font-size: 18px;
  font-weight: bold;
}

.handheld .hh-knopf svg {
  width: 20px;
  height: 20px;
}

.handheld .hh-knopf.ist-aus {
  color: #ff6f8f;
}

/* Steuerkreuz: die ganze Fläche nimmt den Finger an */
.handheld .hh-kreuz {
  grid-area: kreuz;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.handheld .hh-kreuz-form {
  position: relative;
  flex: none;
  width: 140px;
  height: 140px;
}

/* vertiefter runder Sockel unter dem Kreuz */
.handheld .hh-kreuz-form::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #22222a 0 62%, #2e2e38 63%);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Kreuz aus einem Guss: gemeinsamer Schatten für beide Balken (filter auf dem Körper),
   gleiche Farbe, damit in der Mitte keine Naht entsteht */
.handheld .hh-kreuz-koerper {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 3px 0 #08080c) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.6));
}

.handheld .hh-balken {
  position: absolute;
  background: #2b2b34;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.handheld .hh-balken-senkrecht {
  left: 46px;
  top: 0;
  width: 48px;
  height: 140px;
}

.handheld .hh-balken-waagerecht {
  left: 0;
  top: 46px;
  width: 140px;
  height: 48px;
}

.handheld .hh-arm {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  z-index: 2;
  color: #8c8c9c;
  font-size: 16px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
}

.handheld .hh-arm[data-richtung="up"]    { left: 48px; top: 2px; }
.handheld .hh-arm[data-richtung="down"]  { left: 48px; top: 94px; }
.handheld .hh-arm[data-richtung="left"]  { left: 2px;  top: 48px; }
.handheld .hh-arm[data-richtung="right"] { left: 94px; top: 48px; }

.handheld .hh-arm.ist-gedrueckt {
  background: radial-gradient(circle at 40% 35%, #ff9db2 0, #ff2e5a 35%, #c8002e 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Feuerknöpfe (Lage und Größe setzt handheld.js) */
.handheld .hh-feuer {
  grid-area: feuer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.handheld .hh-feuer-gruppe {
  position: relative;
  flex: none;
}

.handheld .hh-feuerknopf {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  /* Feuer 2 und 3: silbern */
  background:
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(0, 0, 0, 0.35) 63% 66%, transparent 67%),
    radial-gradient(circle at 38% 30%, #e8e8ee 0, #9a9aa6 25%, #5a5a66 65%, #2c2c34 100%);
  box-shadow: 0 0 0 4px #c9c9d2, 0 0 0 5px #6a6a74, 0 0 0 9px #1a1a20, 0 6px 12px 9px rgba(0, 0, 0, 0.55);
}

/* Hauptfeuerknopf: rot */
.handheld .hh-feuerknopf[data-knopf="f1"] {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(0, 0, 0, 0.35) 63% 66%, transparent 67%),
    radial-gradient(circle at 38% 30%, #ff9db2 0, #ff2e5a 22%, #c8002e 58%, #6e0018 100%);
}

.handheld .hh-feuerknopf[hidden] {
  display: none;
}

.handheld .hh-feuerknopf.ist-gedrueckt {
  transform: scale(0.95);
  filter: brightness(0.8);
}

/* START, SELECT, OPTION, HELP, RESET */
.handheld .hh-konsole,
.handheld .hh-extra {
  display: flex;
  gap: 6px;
  justify-content: center;
  min-width: 0;
}

.handheld .hh-taste {
  position: relative;
  flex: 0 1 76px;
  min-width: 0;
  height: 44px;
  overflow: hidden;
  color: #b8b8c8;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* RESET erst nach Halten: Füllbalken zeigt den Fortschritt */
.handheld .hh-reset {
  color: #ff9a9a;
}

.handheld .hh-reset::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(255, 128, 128, 0.45);
}

.handheld .hh-reset.wird-gehalten::after {
  width: 100%;
  transition: width 0.7s linear;
}

/* Gamepad angeschlossen: Kreuz und Feuer ausblenden */
.handheld.mit-gamepad .hh-kreuz,
.handheld.mit-gamepad .hh-feuer {
  visibility: hidden;
}

/* Quer (Android wie iPhone): links ✕/Pause/Ton und Kreuz, Bild über die volle Höhe
   (oben und unten nur wenige Pixel Rand, dünner Rahmen), rechts oben
   START/SELECT/OPTION/RESET (2 × 2, flacher), darunter die Feuerknöpfe */
@media (orientation: landscape) {
  .handheld {
    --hh-links: 146px;
    --hh-rechts: 126px;
    --hh-oben-unten: 2px;   /* Abstand Bild – Bildschirmrand oben und unten */
    --hh-rahmen: 2px;       /* Rahmen um das Bild */
    --hh-bildbreite: min(calc((100dvh - 2 * var(--hh-oben-unten) - 2 * var(--hh-rahmen)) * var(--hh-format) + 2 * var(--hh-rahmen)),
                         calc(100vw - 4 * var(--hh-luft) - var(--hh-links) - var(--hh-rechts)));
    padding: var(--hh-oben-unten) var(--hh-luft);
    grid-template-columns: minmax(var(--hh-links), 1fr) var(--hh-bildbreite) minmax(var(--hh-rechts), 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "oben  bild unten"
      "kreuz bild feuer";
  }

  .handheld .hh-bild {
    padding: var(--hh-rahmen);
    border-radius: 6px;
  }

  .handheld .hh-oben,
  .handheld .hh-unten {
    padding-top: 6px;
  }

  .handheld .hh-feuer {
    padding-bottom: 6px;
  }

  .handheld .hh-unten {
    grid-area: unten;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: start;
    min-width: 0;
  }

  .handheld .hh-konsole,
  .handheld .hh-extra {
    display: contents;
  }

  .handheld .hh-taste {
    height: 34px;
    font-size: 10px;
  }
}

/* Hochkant: Bild oben, darunter ✕/Pause/Ton und HELP/RESET, dann Kreuz und Feuer,
   ganz unten START/SELECT/OPTION */
@media (orientation: portrait) {
  .handheld {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "bild  bild"
      "oben  extra"
      "kreuz feuer"
      "konsole konsole";
  }

  .handheld .hh-bild {
    height: calc((100vw - 2 * var(--hh-luft)) / var(--hh-format));
  }

  .handheld .hh-oben {
    justify-content: flex-start;
  }

  .handheld .hh-unten {
    display: contents;
  }

  .handheld .hh-konsole {
    grid-area: konsole;
    padding-bottom: 8px;
  }

  .handheld .hh-extra {
    grid-area: extra;
    justify-content: flex-end;
  }

  .handheld .hh-extra .hh-taste {
    flex: 0 1 64px;
  }
}