/* ============================================================
   TOUCH UND TABLET (Fabian, 24.08. abends)
   ============================================================

   "Touch-Politur für iPad und iPhone. Overscroll abschalten,
    Doppeltipp-Zoom unterbinden, Textauswahl-Griffe im Kampf verhindern,
    echtes iPad-Layout. Vor allem Tablet wäre für mich persönlich super."
   "Ich möchte am liebsten im Breitbild auf dem Tablet spielen."

   Diese Datei kommt als LETZTE – sie darf also überschreiben, ohne dass
   irgendwo !important nötig wird.

   Zwei Teile:
     1. Touch-Politur, überall gültig
     2. Breitbild ab 900 px im Querformat

   Warum Breitbild und nicht Hochkant: Riftle ist von Natur aus ein
   Spiel mit zwei Seiten. Im Kampf stehen Held und Gegner gegenüber, der
   Händler hat Regal, Amboss und Beutel, ein Rätsel hat Frage und
   Antworten. Das alles liegt hochkant untereinander und muss gescrollt
   werden – nebeneinander passt es auf einen Blick.
   ============================================================ */


/* ============================================================
   1. TOUCH-POLITUR
   ============================================================ */

/* Doppeltipp-Zoom abschalten.
   Auf iOS zoomt ein doppelter Tipp die Seite – im Kampf tippt man aber
   schnell hintereinander auf denselben Fähigkeitsknopf, und dann springt
   plötzlich die halbe Oberfläche. "manipulation" erlaubt Wischen und
   Kneif-Zoom weiter, nimmt nur den Doppeltipp heraus. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;   /* iOS vergrößert sonst eigenmächtig */
}

/* Kein Überziehen der Seite. Ohne das federt in der installierten App die
   ganze Oberfläche mit, sobald man am Rand wischt – das sieht nach
   Webseite aus, nicht nach App. */
html, body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

/* Der graue Kasten, den iOS beim Antippen über jeden Knopf legt. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Textauswahl-Griffe: Wer im Kampf einen Knopf einen Moment zu lang hält,
   bekommt sonst die blauen Griffe und das Lupen-Fenster – mitten im Zug.
   Ausgenommen bleibt alles, wo man wirklich Text markieren will: die
   Eingabefelder und die Lesetexte (Heldenbuch, Vorspann, Kampflog). */
button, .c-ware, .pk-knopf, .c-chip, .vorschlag, .c-streiter-karte,
.taste-knopf, .c-zl-marke, .pk-tempo-marke, .c-slot, .c-beutel-teil,
.c-shop-regal, .c-amboss, .c-vs, .pk-arena, .pk-aktionen, .c-zocker-duell,
.c-blitz-knoepfe, .c-folgen, .c-enthuellung {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* kein Halte-Menü auf Bildern */
}
/* … aber lesen und tippen darf man überall dort: */
input, textarea, .pk-textbox, .c-buch-seiten, .c-vs-blase, .c-beg-rede,
.c-blatt, .c-iv, .c-folgen-was {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Auf dem iPhone zoomt Safari beim Antippen eines Eingabefeldes hinein,
   wenn dessen Schrift kleiner als 16 px ist. Danach steht die Seite
   verschoben da. */
input, select, textarea {
  font-size: max(16px, 1em);
}


/* ============================================================
   2. BREITBILD – Tablet im Querformat (und großer Bildschirm)
   ============================================================
   Ab 900 px Breite im Querformat. Das trifft iPad quer (1024 / 1180),
   iPad Pro und jeden Desktop – aber NICHT das iPhone quer (844 px breit,
   nur 390 hoch), wo zwei Spalten keinen Platz hätten.
   ============================================================ */

@media (min-width: 900px) and (orientation: landscape) {

  /* ---------- Die Grundfläche darf breiter werden ---------- */
  .spiel { max-width: 1180px; }

  /* ---------- Der Kampf: Arena links, Fähigkeiten rechts ----------
     Bewusst Grid statt umbrechendem Flexbox. Mit Flexbox hängt es an der
     Fensterbreite, was in eine Zeile passt: Auf dem iPad (1180) stand es
     richtig, auf dem iPad Pro (1366) rutschte plötzlich die Zugleiste
     neben die Arena und die Fähigkeiten fielen darunter. Im Grid steht
     jede Fläche in ihrer Spalte, egal wie breit der Bildschirm ist. */
  .pk-vollbild {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(0, 430px);
    justify-content: center;
    align-content: center;
    column-gap: 34px;
    row-gap: 6px;
  }
  /* Alles, was nicht ausdrücklich eine Spalte bekommt, geht über beide. */
  .pk-vollbild > * {
    max-width: none;
    grid-column: 1 / -1;
  }
  /* Zeile 1: Zugleiste links, Auto-Schalter rechts daneben. */
  .pk-vollbild > .pk-tempo { grid-column: 1; }
  .pk-vollbild > .pk-auto {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    margin: 0;
    width: auto;
  }
  /* Zeile 2: die beiden Hauptflächen. */
  .pk-vollbild > .pk-arena {
    grid-column: 1;
    margin-bottom: 0;
  }
  .pk-vollbild > .pk-aktionen {
    grid-column: 2;
    align-self: start;
    margin-top: 0;
  }

  /* Die Arena hat jetzt Platz – Held und Gegner dürfen größer stehen */
  .pk-arena { padding: 20px 20px 14px; }
  .pk-reihe { gap: 18px; }
  .pk-info { max-width: 360px; padding: 10px 15px 8px; }
  .pk-buehne { padding: 10px 26px 22px; }
  .pk-sprite, .mini-icon.pk-sprite { width: 132px; height: 132px; }
  .pk-boden { width: 140px; height: 32px; }
  .pk-textbox { font-size: 17px; min-height: 62px; padding: 11px 17px; }

  /* Fähigkeiten: mehr Luft, größere Ziele, der Text hat Platz */
  .pk-spell-liste { gap: 10px; }
  .pk-spell-zeile { gap: 14px; }
  .pk-knopf { width: 64px; height: 64px; }
  .pk-spell-text strong { font-size: 15.5px; }
  .pk-spell-text small { font-size: 13px; }

  /* ---------- Vorbereitung: das Duell groß, Ausrüstung daneben ---------- */
  .pk-vorbereitung .c-vs { max-width: 640px; }
  .c-vs-bild { width: 104px; height: 104px; }
  .c-vs-blitz { font-size: 26px; }

  /* ---------- Rätsel: die Vorschläge in zwei Spalten ---------- */
  .suche-wrap { max-width: 560px; }
  .vorschlaege {
    columns: 2;
    column-gap: 10px;
  }
  .vorschlaege .vorschlag {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  /* Die Antwortgitter dürfen die Breite nutzen */
  .c-champgitter {
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    max-height: 26rem;
  }
  /* Das Gitter für die Item- und Runen-Auswahl heißt .c-raten-gitter. */
  .c-raten-gitter {
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  }

  /* ---------- Der Händler: Regal, Amboss und Beutel nebeneinander ---------- */
  .c-shop { max-width: 1100px; }
  .c-shop-regal {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
  .c-shop-regal.traenke {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .c-beutel { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .c-angebot-liste { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  /* ---------- Zwischenspiele und Tafeln ---------- */
  .c-zocker, .c-blitz { max-width: 720px; margin-left: auto; margin-right: auto; }
  .c-zocker-duell { gap: 34px; }
  .c-zocker-bild { width: 108px; height: 108px; }
  .c-folgen { max-width: 640px; }
  .c-boss-warnung { max-width: 640px; }

  /* ---------- Die Enthüllung darf die Fläche füllen ---------- */
  .c-enthuellung { min-height: 56vh; }
  .c-enth-satz { font-size: clamp(24px, 3.4vw, 34px); }

  /* ---------- Truhe, Lohn, Ergebnis ---------- */
  .c-fund-liste { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .ergebnis-knoepfe { max-width: 560px; margin-left: auto; margin-right: auto; }
}


/* ============================================================
   Sehr breite Bildschirme: nicht weiter auseinanderlaufen lassen
   ============================================================ */
@media (min-width: 1400px) and (orientation: landscape) {
  .pk-vollbild { grid-template-columns: minmax(0, 700px) minmax(0, 460px); }
}


/* ============================================================
   Handy im Querformat – flach, aber breit
   ============================================================
   Ein iPhone quer ist 844 breit und nur 390 hoch. Untereinander passt der
   Kampf dort nicht mehr auf den Schirm (gemessen: es musste gescrollt
   werden). Nebeneinander schon – die Breite ist ja da, es fehlt nur die
   Höhe. Deshalb greift hier dieselbe Zweiteilung wie auf dem Tablet, nur
   in kleinerem Maßstab.
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 700px) {
  .pk-vollbild {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    justify-content: center;
    align-content: center;
    column-gap: 18px;
    row-gap: 2px;
    padding-top: calc(6px + env(safe-area-inset-top));
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  .pk-vollbild > * { max-width: none; grid-column: 1 / -1; }
  .pk-vollbild > .pk-tempo { grid-column: 1; }
  .pk-vollbild > .pk-auto {
    grid-column: 2; justify-self: end; align-self: center; margin: 0; width: auto;
  }
  .pk-vollbild > .pk-arena { grid-column: 1; margin: 0; }
  .pk-vollbild > .pk-aktionen { grid-column: 2; align-self: start; margin: 0; }

  /* Alles eine Nummer kleiner – 390 Pixel Höhe sind schnell voll. */
  .pk-arena { padding: 8px 10px 6px; }
  .pk-reihe { gap: 8px; }
  .pk-sprite, .mini-icon.pk-sprite { width: 74px; height: 74px; }
  .pk-boden { width: 84px; height: 18px; }
  .pk-buehne { padding: 2px 10px 10px; }
  .pk-textbox { font-size: 14px; min-height: 40px; padding: 5px 10px; margin-top: 6px; }
  .pk-knopf { width: 46px; height: 46px; }
  .pk-spell-liste { gap: 5px; }
  .pk-spell-zeile { gap: 8px; }
  .pk-spell-text strong { font-size: 13px; }
  .pk-spell-text small { font-size: 11px; }
  .c-zeitleiste { display: none; }   /* im Flachformat ist kein Platz dafür */

  /* Die Ankündigung des Gegners in einer Zeile statt drei – bei 390 px
     Höhe zählt jeder Millimeter (die volle Fassung ließ den Kampf wieder
     scrollen, gemessen am 25.08.). */
  .pk-absicht { padding: 5px 10px; margin-bottom: 6px; gap: 8px; align-items: center; }
  .pk-absicht-zeichen { font-size: 15px; }
  .pk-absicht-text { flex-direction: row; flex-wrap: wrap; column-gap: 8px; align-items: baseline; }
  .pk-absicht-text strong { font-size: 12.5px; }
  .pk-absicht-zahl { font-size: 11.5px; }
  .pk-absicht-text small { font-size: 11px; margin-top: 0; }
}


/* ============================================================
   iPad HOCHKANT (768–1180 px, Portrait)
   Zwei Spalten wären hier zu eng, aber die Handy-Säule ist zu schmal.
   Also: dieselbe Anordnung, nur großzügiger.
   ============================================================ */
@media (min-width: 700px) and (orientation: portrait) {
  .pk-vollbild > * { max-width: 680px; }
  .pk-sprite, .mini-icon.pk-sprite { width: 124px; height: 124px; }
  .pk-info { max-width: 340px; }
  .pk-knopf { width: 62px; height: 62px; }
  .pk-textbox { font-size: 17px; }
  .spiel { max-width: 760px; }
  .c-shop-regal { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .c-champgitter { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
}


/* ============================================================
   Der Hinweis "Leg mich auf den Startbildschirm" (Fabian, 24.08.)
   Steht unten, überdeckt nichts Wichtiges und geht von selbst wieder.
   ============================================================ */
.install-hinweis {
  position: fixed; z-index: 60;
  left: calc(12px + env(safe-area-inset-left, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  max-width: 460px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 13px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #14243f, #0a1428);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  color: var(--text);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .9, .3, 1);
}
.install-hinweis.da { opacity: 1; transform: none; }
.install-icon {
  width: 46px; height: 46px; border-radius: 11px; grid-row: span 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.install-text strong {
  display: block; font-family: "Cinzel", serif;
  font-size: 15px; color: var(--gold-hell); margin-bottom: 3px;
}
.install-text span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.install-text em { color: var(--text); font-style: normal; font-weight: 600; }
/* Das Teilen-Symbol von iOS, angedeutet */
.install-teilen {
  display: inline-block; padding: 0 5px; border-radius: 5px;
  background: rgba(10, 132, 255, .22); color: #6cb6ff; font-weight: 700;
}
.install-knoepfe {
  grid-column: 2; display: flex; gap: 8px; margin-top: 8px;
}
.install-hinweis button {
  font: inherit; font-size: 13px; padding: 7px 15px;
  border-radius: 999px; border: 0; cursor: pointer;
}
.install-ja {
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  color: #241703; font-weight: 700;
}
.install-nein { background: rgba(255, 255, 255, .08); color: var(--muted); }
.install-hinweis button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .install-hinweis { transition: none; }
}