/* Aus spiel.html ausgelagert am 26.08.2026, damit die CSP ohne
   `style-src unsafe-inline` auskommt. Reihenfolge wie im Dokument. */
html, body {
  margin: 0; height: 100%; background: #000; overflow: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
        /* Pixelgrafik beim Hochskalieren nicht weichzeichnen. Wichtig:
           Das komplette Spiel liegt in EINEM Canvas; weiche Skalierung macht
           deshalb nicht nur Text, sondern auch Sprites und UI unsauber. */
        canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
/* Langes Draufbleiben ist beim Spielen der NORMALFALL — laufen heisst, den
     Finger liegen zu lassen. iOS wertet das aber als Textauswahl und blendet
     Lupe und Auswahlmenue ein. user-select allein reicht dagegen nicht,
     -webkit-touch-callout ist der Schalter dafuer. Eingabefelder nehmen wir
     ausdruecklich aus, sonst kann man dort nichts mehr markieren. */
  html, body, canvas, #tasten, #vollbild-knopf {
    -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  }
  input, textarea {
    -webkit-touch-callout:default; -webkit-user-select:text; user-select:text;
  }

  /* --- Vollbild-Knopf: nur auf Beruehrungsgeraeten, nur ausserhalb des Vollbilds --- */
  #vollbild-knopf{
    position:fixed; z-index:45;
    /* LINKS oben. Rechts oben sitzt die Pausetaste — dort lag der Knopf
       genau darueber und machte sie unerreichbar (gemessen: 46x40 px
       Ueberdeckung, also vollstaendig). */
    top:max(10px, env(safe-area-inset-top)); left:max(10px, env(safe-area-inset-left));
    padding:9px 14px; border:2px solid #4a3f5a; border-radius:10px;
    background:rgba(20,16,31,0.82); color:#ffd98a;
    font:600 14px Verdana,Arial,Helvetica,sans-serif; letter-spacing:.02em;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  #vollbild-knopf[hidden]{ display:none; }
  #vollbild-hinweis{
    position:fixed; z-index:60; left:50%; transform:translateX(-50%);
    bottom:max(16px, env(safe-area-inset-bottom));
    padding:10px 16px; border-radius:10px;
    background:rgba(20,16,31,.92); color:#ffb4b4; border:1px solid #6a3f4a;
    font:600 14px Verdana,Arial,Helvetica,sans-serif; max-width:90vw; text-align:center;
  }
  #vollbild-hinweis[hidden]{ display:none; }
  #vollbild-knopf:active{ background:rgba(60,48,84,0.92); }

  /* --- Bildschirmtasten --- */
  #tasten { position:fixed; inset:0; z-index:40; pointer-events:none;
            font-family:Verdana,Arial,sans-serif; }
  #tasten[hidden]{ display:none; }
  .tasten-rechts{
    position:absolute; bottom:max(18px, env(safe-area-inset-bottom));
    display:flex; align-items:flex-end; gap:14px; pointer-events:none;
    right:max(18px, env(safe-area-inset-right));
  }
  /* Steuerkreuz. Als Gitter gebaut, damit LINKS und RECHTS bauartbedingt
     nebeneinander liegen — vorher waren es zwei Knoepfe in einer Zeile, die
     sich in einem schmalen Balken uebereinander stellten. Hoch und runter
     braucht man ausserdem, um durch Menue und Landkarte zu kommen. */
  .kreuz{
    position:absolute; bottom:max(18px, env(safe-area-inset-bottom));
    left:max(18px, env(safe-area-inset-left));
    display:grid; gap:2px; pointer-events:none;
    grid-template-areas: ". o ." "l m r" ". u .";
  }
  .kreuz .kr-o{ grid-area:o; } .kreuz .kr-l{ grid-area:l; }
  .kreuz .kr-r{ grid-area:r; } .kreuz .kr-u{ grid-area:u; }
  /* Die Mitte ist kein Knopf, sondern nur der Steg dazwischen — ohne ihn
     sehen die vier Tasten aus wie vier einzelne Knoepfe statt wie ein Kreuz. */
  .kreuz-mitte{
    grid-area:m; align-self:stretch; justify-self:stretch;
    background:rgba(26,16,48,.45); border-top:2px solid rgba(255,217,138,.22);
    border-bottom:2px solid rgba(255,217,138,.22);
  }
  /* Die Groesse kommt aus --tt und richtet sich nach dem Spielfeld: auf einem
     456px breiten Feld waeren 74px-Knoepfe ein Sechstel der Spielflaeche. */
  #tasten{ --tt:74px; }
  .tt{
    pointer-events:auto; touch-action:none; -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    width:var(--tt); height:var(--tt); border-radius:50%;
    background:rgba(26,16,48,.55); color:#ffd98a; border:2px solid rgba(255,217,138,.40);
    font-size:calc(var(--tt) * .36); line-height:1;
    display:flex; align-items:center; justify-content:center;
    user-select:none; -webkit-user-select:none; padding:0;
  }
  .tt.gross{ width:calc(var(--tt) * 1.25); height:calc(var(--tt) * 1.25); font-size:calc(var(--tt) * .44); }
  .tt.klein{ width:calc(var(--tt) * .82);  height:calc(var(--tt) * .82);  font-size:calc(var(--tt) * .30); }
  /* Abgerundete Quadrate statt Kreise — so sieht man, dass sie zusammengehoeren. */
  /* --kr wird von tastenAusrichten() gesetzt: das Kreuz schrumpft so weit,
     bis es in den schwarzen Balken passt — aber nie unter 48px je Taste. */
  #tasten{ --kr:56px; }
  .tt.kr{ width:var(--kr); height:var(--kr);
          border-radius:22%; font-size:calc(var(--kr) * .36); }
  /* Aussenecken abrunden, Innenecken eckig lassen — dann liest sich das
     Gitter als EIN Bauteil. */
  .kreuz .kr-o{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
  .kreuz .kr-u{ border-top-left-radius:0;    border-top-right-radius:0; }
  .kreuz .kr-l{ border-top-right-radius:0;   border-bottom-right-radius:0; }
  .kreuz .kr-r{ border-top-left-radius:0;    border-bottom-left-radius:0; }
  /* Hochkant, wenn die Gruppe in den schwarzen Balken passt */
  /* Von oben nach unten: Blenden, Werfen, Springen. Der Sprung gehoert nach
     UNTEN — dort liegt der Daumen ohnehin, und er wird am oeftesten
     gebraucht. Vorher war es genau andersherum (column-reverse). */
  .tasten-rechts.hochkant{ flex-direction:column; align-items:center; }
  .tt.menue{
    pointer-events:auto; touch-action:none; position:absolute;
    top:max(14px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right));
    width:46px; height:46px; font-size:16px; font-weight:bold;
  }
  .tt:active{ background:rgba(255,217,138,.30); color:#fff; }
  #konto-schleier {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 7, 20, .82); z-index: 50; font-family: Verdana, Arial, sans-serif;
  }
  #konto-schleier[hidden] { display: none; }
  #konto-form {
    background: #1c1630; color: #f2eefb; border: 2px solid #4a3f6a; border-radius: 10px;
    padding: 26px 30px; width: min(92vw, 360px); box-shadow: 0 20px 60px rgba(0,0,0,.6);
  }
  #konto-form h2 { margin: 0 0 6px; font-size: 22px; color: #ffd98a; }
  #konto-text { margin: 0 0 18px; font-size: 13.5px; color: #b0a4c8; line-height: 1.45; }
  #konto-form label {
    display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
    color: #9ad0ff; margin: 12px 0 5px;
  }
  #konto-form input {
    width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px;
    border-radius: 6px; border: 1px solid #4a3f6a; background: #120e20; color: #f2eefb;
  }
  #konto-form input:focus { outline: 2px solid #ffd98a; outline-offset: 1px; }
  #konto-fehler {
    margin: 14px 0 0; padding: 9px 11px; border-radius: 6px; font-size: 13.5px;
    background: #3a1420; color: #ffb0b0; border: 1px solid #6a2436;
  }
  #konto-fehler[hidden] { display: none; }
  .konto-knoepfe { display: flex; gap: 10px; margin-top: 20px; }
  .konto-knoepfe button {
    flex: 1; padding: 11px; font-size: 15px; font-weight: bold; border-radius: 6px;
    border: none; cursor: pointer;
  }
  #konto-los { background: #ffd98a; color: #2a1a08; }
  #konto-los:disabled { opacity: .55; cursor: progress; }
  #konto-ab  { background: #2e2745; color: #cfc6e4; }
  .konto-wechsel { margin: 16px 0 0; text-align: center; }
  #konto-umschalten {
    background: none; border: none; color: #9ad0ff; font-size: 13px; cursor: pointer;
    text-decoration: underline; padding: 4px;
  }
  .konto-knoepfe button:focus-visible, #konto-umschalten:focus-visible {
    outline: 2px solid #ffd98a; outline-offset: 2px;
  }