/* Feierabend! — Touch- und Mehrspieler-Ergänzung.
 *
 * Wird NACH css/tokens.css und css/feierabend.css geladen und ergänzt diese
 * nur. Alles, was hier steht, betrifft entweder Teile, die es im Einzelspieler
 * nicht gibt (Touch-Steuerung, Lobby, Kollegenleiste), oder es zieht die
 * vorhandene Oberfläche auf Handymaß zusammen.
 *
 * Farben: ausschließlich --bechtle-*-Tokens. Die rgba()-Tripel sind keine
 * neuen Farben, sondern die Kanäle vorhandener Tokens — dieselbe Liste wie in
 * css/feierabend.css:
 *   rgba(  3, 32, 20, x) = #032014  --bechtle-gruen-dunkel-shade40  (Grund)
 *   rgba(  4, 48, 31, x) = #04301F  --bechtle-gruen-dunkel-shade60  (Fläche)
 *   rgba(  6, 64, 41, x) = #064029  --bechtle-gruen-dunkel-shade80  (Rahmen)
 *   rgba( 35,169,106, x) = #23A96A  --bechtle-gruen
 *   rgba(170,222, 12, x) = #AADE0C  --bechtle-limette
 *   rgba( 47,251,149, x) = #2FFB95  --bechtle-mint
 *   rgba( 39,201,209, x) = #27C9D1  --bechtle-cyan
 *   rgba(217, 72,108, x) = #D9486C  --bechtle-status-fehler
 * Limette, Mint und Cyan tragen niemals weißen Text — dort immer Schwarz.
 */

/* ================================================== Maße für Daumenbedienung
 * Eigene Tokens nur für Geometrie und sichere Bereiche, niemals für Farben.
 * 56 px ist das Mindestmaß für einen Knopf, den man im Gedränge am Messestand
 * blind trifft. env(safe-area-inset-*) ist auf Geräten ohne Aussparung 0. */
:root {
  --fa-touch-size: 56px;
  --fa-touch-gap: 0.5rem;
  --fa-stick-size: 132px;
  --fa-knob-size: 54px;
  --fa-safe-t: env(safe-area-inset-top, 0px);
  --fa-safe-r: env(safe-area-inset-right, 0px);
  --fa-safe-b: env(safe-area-inset-bottom, 0px);
  --fa-safe-l: env(safe-area-inset-left, 0px);
}

/* ======================================================= Grundlagen am Gerät
 * Kein Gummiband-Scrollen, kein blauer Aufblitz beim Tippen, kein
 * Doppeltipp-Zoom auf der Spielfläche. */
html, body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}

/* Die Adressleiste von Mobil-Safari wandert; 100 % vom Viewport ist dort
 * zeitweise zu hoch. dvh löst das, wo es vorhanden ist. */
@supports (height: 100dvh) {
  html, body, #app { height: 100dvh; }
}

#cv {
  touch-action: none;                   /* Wischen steuert die Figur, nicht die Seite */
}

/* ==================================================== Touch-Steuerungsschicht
 * Liegt über dem HUD, aber unter den Overlays (die haben z-index 3) — ein
 * offener Pausenraum darf nicht durchgetippt werden. Die Schicht selbst fängt
 * keine Zeiger: touch.js hört am Canvas, Stick und Knopfring sind nur Bild. */
#touch-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#touch-layer button { pointer-events: auto; }

/* Nur Rückfall: touch.js zeichnet den Stick inzwischen auf dem Canvas (dort
 * sitzt er am Daumen, ohne mit der Letterbox zu wandern) und blendet
 * #touch-stick beim Start inline aus. Diese Regeln greifen deshalb im
 * laufenden Spiel nicht mehr — sie bleiben stehen, damit das Element aus
 * index.html auch ohne touch.js nicht als nackter Kasten dasteht. Zentriert
 * wird über negative Ränder, damit transform frei bleibt. */
#touch-stick {
  position: absolute;
  left: 20%;
  top: 68%;
  width: var(--fa-stick-size);
  height: var(--fa-stick-size);
  margin: calc(var(--fa-stick-size) / -2) 0 0 calc(var(--fa-stick-size) / -2);
  border: 2px solid rgba(170, 222, 12, 0.55);
  border-radius: 50%;
  background: rgba(3, 32, 20, 0.32);
  opacity: 0.9;
}

#touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fa-knob-size);
  height: var(--fa-knob-size);
  margin: calc(var(--fa-knob-size) / -2) 0 0 calc(var(--fa-knob-size) / -2);
  border: 2px solid rgba(3, 32, 20, 0.9);
  border-radius: 50%;
  background: rgba(47, 251, 149, 0.85);   /* Mint, trägt keinen Text */
}

/* Knöpfe unten rechts, dort ruht der rechte Daumen. Über der Aussparung des
 * Geräts bleibt Platz, sonst liegt „Übergabe" auf dem Home-Balken. */
.touch-btn {
  position: absolute;
  right: calc(0.9rem + var(--fa-safe-r));
  bottom: calc(0.9rem + var(--fa-safe-b));
  min-width: calc(var(--fa-touch-size) * 1.9);
  min-height: var(--fa-touch-size);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid var(--bechtle-limette);
  border-radius: var(--fa-radius-pill);
  background: var(--bechtle-limette);
  color: var(--bechtle-schwarz);          /* auf Limette niemals Weiß */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;             /* kein Doppeltipp-Zoom */
}

.touch-btn:active {
  background: var(--bechtle-limette-shade80);
  transform: translateY(1px);
}

/* Der kleine Knopf (Menü) sitzt über dem großen, gleiche Höhe, quadratisch. */
.touch-btn.small {
  min-width: var(--fa-touch-size);
  height: var(--fa-touch-size);
  bottom: calc(0.9rem + var(--fa-safe-b) + var(--fa-touch-size) + var(--fa-touch-gap));
  padding: 0;
  font-size: 1.3rem;
  border-color: var(--bechtle-rahmen);
  background: rgba(3, 32, 20, 0.85);
  color: var(--bechtle-text);
}

.touch-btn.small:active { background: rgba(6, 64, 41, 0.95); }

/* Ein Knopf, der gerade nichts tut, verschwindet nicht — er wird nur still.
 * mp-ui.js setzt disabled, wenn niemand in Reichweite im Krankenstand ist. */
.touch-btn:disabled {
  opacity: 0.4;
  box-shadow: none;
}

/* ============================================================= Bitte quer
 * Nicht erzwingen, nur bitten. Sichtbar ausschließlich im Hochformat auf
 * kleinen Geräten; im Querformat bleibt die Einblendung aus, selbst wenn das
 * Script vergisst, sie zu verstecken. */
#rotate-hint { display: none; }

@media (orientation: portrait) and (max-width: 900px) {
  #rotate-hint:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(1.5rem + var(--fa-safe-t)) 1.5rem calc(1.5rem + var(--fa-safe-b));
    background: rgba(3, 32, 20, 0.96);
    text-align: center;
  }
}

.rotate-inner {
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--bechtle-text);
}

.rotate-icon {
  font-size: 3.4rem;
  line-height: 1;
  animation: fa-rotate-bitte 2.4s ease-in-out infinite;
}

@keyframes fa-rotate-bitte {
  0%, 45% { transform: rotate(0deg); }
  60%, 95% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

/* ==================================================== Kollegenleiste im HUD
 * Schmale Leiste am rechten Rand: Farbpunkt, Name, kleiner Lebensbalken.
 * mp-ui.js benennt die Zeilen selbst, deshalb greift die Grundform über den
 * Kindselektor — die Klassen darunter sind die Feinabstimmung. */
.mp-team {
  position: absolute;
  top: calc(4.4rem + var(--fa-safe-t));
  right: calc(0.7rem + var(--fa-safe-r));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: min(13rem, 36vw);
  pointer-events: none;
}

.mp-team:empty { display: none; }

.mp-team > * {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.4rem;
  row-gap: 0.2rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--bechtle-rahmen);
  border-radius: var(--fa-radius-s);
  background: rgba(3, 32, 20, 0.74);
  font-size: 0.76rem;
}

/* Farbpunkt: die Rollenfarbe setzt mp-ui.js inline, hier nur die Form. */
.mp-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--bechtle-primaer);
}

.mp-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* Der Balken läuft über die ganze Zeilenbreite. Spur rot, Füllung grün — wie
 * im großen HUD, nur dünner. */
.mp-hp {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: var(--fa-radius-pill);
  background: rgba(217, 72, 108, 0.8);
  overflow: hidden;
}

.mp-hp > *,
.mp-hp-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--bechtle-gruen);
}

/* Im Krankenstand: gedämpft, aber sichtbar — niemand verschwindet vom Bild. */
.mp-team > .down,
.mp-team > .krank {
  opacity: 0.55;
  border-color: var(--bechtle-status-fehler);
}

.mp-team > .down .mp-name,
.mp-team > .krank .mp-name {
  font-style: italic;
  font-weight: 500;
}

.mp-team > .down .mp-hp-fill,
.mp-team > .krank .mp-hp-fill { background: var(--bechtle-status-fehler); }

/* Der eigene Eintrag steht oben und ist abgesetzt. */
.mp-team > .self,
.mp-team > .me { border-left: 3px solid var(--bechtle-limette); }

/* =============================================== Bereitschaft im Pausenraum */
.mp-readybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--bechtle-rahmen);
  border-left: 3px solid var(--bechtle-limette);
  border-radius: var(--fa-radius-s);
  background: rgba(6, 64, 41, 0.55);
  font-size: 0.84rem;
}

.mp-readybar strong {
  font-variant-numeric: tabular-nums;
  color: var(--bechtle-limette);
}

.mp-readybar .mp-dot { flex: 0 0 auto; }

/* Wer fertig ist, bekommt ein volles Band; wer noch überlegt, nur einen Rand. */
.mp-readybar .ready,
.mp-readybar .mp-ready {
  padding: 0.08rem 0.5rem;
  border-radius: var(--fa-radius-pill);
  background: var(--bechtle-limette);
  color: var(--bechtle-schwarz);
  font-weight: 700;
}

.mp-readybar .waiting,
.mp-readybar .mp-waiting {
  padding: 0.08rem 0.5rem;
  border: 1px solid var(--bechtle-rahmen);
  border-radius: var(--fa-radius-pill);
  color: var(--bechtle-text-gedaempft);
}

/* ======================================== Beitritt und Lobby (#overlay-mp) */
.mp-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 1rem 0;
  max-width: 24rem;
}

.mp-field label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bechtle-text-gedaempft);
}

/* Eingabefelder: mindestens 16 px, sonst zoomt iOS beim Fokus in die Seite
 * hinein und kommt nicht von allein wieder heraus. max() hält das auch dann
 * ein, wenn die Grundschriftgröße im Gerät kleiner steht. */
#overlay-mp input:not(.codeinput),
.mp-field input:not(.codeinput) {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 16px;
  font-size: max(1rem, 16px);
  color: var(--bechtle-text);
  border: 1px solid var(--bechtle-rahmen);
  border-radius: var(--fa-radius-s);
  background: rgba(3, 32, 20, 0.72);
}

#overlay-mp input::placeholder,
.codeinput::placeholder {
  color: var(--bechtle-text-gedaempft);
  opacity: 0.7;
}

#overlay-mp input:focus-visible,
.codeinput:focus-visible {
  border-color: var(--bechtle-limette);
  outline: 2px solid var(--bechtle-limette);
  outline-offset: 1px;
}

/* Zwei Kästen nebeneinander — eröffnen oder beitreten. Unter 720 px gestapelt,
 * weil zwei Spalten dort nur noch Wortsalat wären. */
.mp-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fa-gap);
  margin-top: 0.5rem;
}

@media (max-width: 720px) {
  .mp-two { grid-template-columns: minmax(0, 1fr); }
}

.mp-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem;
  border: 1px solid var(--bechtle-rahmen);
  border-radius: var(--fa-radius-s);
  background: rgba(3, 32, 20, 0.62);
}

.mp-box .hint { flex: 1 1 auto; }

.mp-box > button { width: 100%; }

/* Der Raumcode wird abgetippt, nicht gelesen: vier große Buchstaben, weit
 * gesperrt. Die Sperrung hängt als Leerraum hinter dem letzten Zeichen und
 * zählt beim Zentrieren mit — die Buchstaben rutschen dadurch um die HALBE
 * Sperrung nach links. Genau diesen halben Betrag holt text-indent zurück. */
.codeinput {
  width: 100%;
  max-width: 12rem;
  min-height: 3.4rem;
  margin: 0.2rem auto 0;
  padding: 0.5rem 0.4rem;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--bechtle-font-mono);
  font-size: clamp(1.6rem, 7vw, 2.3rem);   /* deutlich über 16 px, iOS zoomt nicht */
  font-weight: 700;
  letter-spacing: 0.4em;
  text-indent: 0.2em;
  color: var(--bechtle-limette);
  border: 1px solid var(--bechtle-rahmen);
  border-radius: var(--fa-radius-s);
  background: rgba(3, 32, 20, 0.72);
}

/* -------------------------------------------------------- Kopf der Lobby */
.lobbyhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-gap);
  margin: 0.8rem 0 1.2rem;
  padding: 0.9rem;
  border: 1px solid var(--bechtle-rahmen);
  border-radius: var(--fa-radius);
  background: rgba(3, 32, 20, 0.6);
}

.lobbycode {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* Der Messefall: Der Code muss aus drei Metern vom Beamer ablesbar sein.
 * Deshalb absurd groß, gesperrt und in Mono — I und l, O und 0 dürfen sich
 * nicht ähneln (die Codes meiden diese Zeichen ohnehin). */
#mp-room {
  font-family: var(--bechtle-font-mono);
  font-size: clamp(3.2rem, 13vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--bechtle-limette);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Der Beitrittslink steht immer als Text daneben — ein QR, der nicht scannt,
 * darf niemanden aussperren. Lange URLs dürfen umbrechen. */
#mp-url {
  font-family: var(--bechtle-font-mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Weißer Rahmen um den QR: auf dunklem Grund findet die Kamera sonst die
 * Ruhezone nicht und scannt schlecht bis gar nicht. */
#mp-qr {
  flex: 0 0 auto;
  width: clamp(140px, 30vw, 216px);
  height: auto;
  padding: 0;
  border: 10px solid var(--bechtle-weiss);
  border-radius: 6px;
  background: var(--bechtle-weiss);
  image-rendering: pixelated;             /* Module bleiben beim Skalieren scharf */
}

/* ------------------------------------------------------- Wer ist dabei */
/* Eine Zeile trägt Name plus bis zu fünf Chips; ausgeschrieben braucht sie
 * rund 700 px („Fachinformatiker:in SI" allein ist 170 px breit). 13 rem
 * reichten dafür nicht — dann stand jeder Chip auf einer eigenen Zeile und
 * die Zeile wurde sechs Zeilen hoch. 20 rem sind der Kompromiss: auf dem
 * Beamer stehen weiter mehrere Spalten, am Handy bleibt es eine. */
.mp-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* Umbrechen ist Pflicht, nicht Geschmack: nur der Name kann schrumpfen, die
 * Chips nicht. Ohne flex-wrap quellen sie aus der Karte heraus, sobald eine
 * Spalte schmal wird — bei 20 rem und fünf Chips um mehrere hundert Pixel. */
.mp-players > * {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--bechtle-rahmen);
  border-left-width: 3px;                /* mp-ui.js setzt hier die Rollenfarbe */
  border-radius: var(--fa-radius-s);
  background: rgba(3, 32, 20, 0.65);
  font-size: 0.92rem;
}

.mp-players .mp-name { flex: 1 1 auto; }

.mp-players .mp-role,
.mp-players .mp-tag {
  flex: 0 0 auto;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--fa-radius-pill);
  background: rgba(39, 201, 209, 0.18);
  color: var(--bechtle-cyan);
}

.mp-players > .ready,
.mp-players > .mp-ready { border-left-color: var(--bechtle-limette); }

.mp-players > .down,
.mp-players > .krank { opacity: 0.6; }

.mp-players:empty::after {
  content: "Noch niemand da. Der Code wartet geduldig.";
  grid-column: 1 / -1;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  color: var(--bechtle-text-gedaempft);
}

/* Statuszeile beim Verbinden: eine Zeile, die nicht springt. */
#mp-status {
  min-height: 1.4em;
  margin-top: 0.6rem;
}

/* Klassenwahl auf dem Handy einspaltig — dieselben Karten wie im
 * Einzelspieler, nur als Liste mit Emoji links. */
@media (max-width: 620px) {
  #mp-chars { grid-template-columns: minmax(0, 1fr); }

  #mp-chars .char-card {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    min-height: 3.4rem;
  }

  #mp-chars .char-card .card-emoji { font-size: 1.5rem; }

  #mp-chardetail { position: static; }

  /* Knöpfe untereinander und über die ganze Breite: leichter zu treffen. */
  .startrow { flex-direction: column; align-items: stretch; }
  .startrow > button { width: 100%; min-height: 3rem; }
}

/* ============================================== Handy im Querformat
 * Wenig Höhe, viel Breite: das HUD rückt zusammen, damit die Spielfläche
 * frei bleibt, und die Overlays nehmen die volle Höhe mit eigenem Bildlauf. */
@media (orientation: landscape) and (max-height: 540px) {
  #hud-top {
    gap: 0.35rem;
    padding: calc(0.35rem + var(--fa-safe-t)) calc(0.45rem + var(--fa-safe-r)) 0.3rem calc(0.45rem + var(--fa-safe-l));
  }

  .hud-card {
    min-width: 4rem;
    padding: 0.2rem 0.45rem;
    gap: 0;
  }

  .hud-label { font-size: 0.55rem; letter-spacing: 0.06em; }
  .hud-value { font-size: 1rem; }
  .hud-sub { font-size: 0.62rem; }
  .hud-timer { font-size: 0.92rem; }
  #hud-timerbar-track { height: 5px; }
  /* Der Pausenknopf behält seine Trefferfläche — er ist oben das Einzige, was
   * angetippt wird. Nur das Zeichen darin wird kleiner. */
  .icon-btn { font-size: 0.7rem; }

  /* Die Balken bleiben ÜBER dem Werkzeuggürtel. feierabend.css hebt sie in
   * engen Fenstern aus genau diesem Grund auf 4,2 rem; würde hier wieder auf
   * die Unterkante gesetzt, lägen Lebensbalken und Gürtel übereinander (bei
   * 568 px Breite überlappen 36 vw Balken und 46 vw Gürtel um rund 40 px).
   * Der Gürtel ist hier 2,2 rem hoch, 3 rem lassen ihn frei. */
  #hud-left {
    left: calc(0.5rem + var(--fa-safe-l));
    bottom: calc(3rem + var(--fa-safe-b));
    width: min(11.5rem, 36vw);
    gap: 0.2rem;
  }

  .bar-track { height: 10px; }
  .bar-wrap.xp .bar-track { height: 6px; }
  .bar-text { min-width: 4.4rem; font-size: 0.68rem; }
  .bar-wrap.xp .bar-text { font-size: 0.64rem; }
  #hud-charline { font-size: 0.68rem; }

  /* Der Werkzeuggürtel wird nur kleiner und bleibt unten mittig — zwischen
   * den beiden Daumenzonen: unten rechts liegt „Übergabe", unten links setzt
   * der Daumen den Stick auf. */
  #hud-weapons {
    gap: 0.25rem;
    bottom: calc(0.45rem + var(--fa-safe-b));
    max-width: 46vw;
  }

  .hudtile { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; }
  .hudtile-cd { height: 2px; }

  .mp-team {
    top: calc(3rem + var(--fa-safe-t));
    width: min(10.5rem, 30vw);
  }

  .mp-team > * { font-size: 0.7rem; padding: 0.2rem 0.35rem; }
  .mp-hp { height: 3px; }

  .announce-title { font-size: clamp(1.3rem, 5vw, 1.9rem); }
  .announce-sub { font-size: 0.82rem; }

  /* Overlays: volle Höhe, das Sheet scrollt selbst. Sonst schiebt der
   * Bildlauf der Seite die Adressleiste ins Bild. */
  .overlay {
    overflow: hidden;
    padding: calc(0.3rem + var(--fa-safe-t)) calc(0.4rem + var(--fa-safe-r)) calc(0.3rem + var(--fa-safe-b)) calc(0.4rem + var(--fa-safe-l));
  }

  .sheet {
    margin: 0 auto;                       /* waagerecht weiter mittig */
    height: 100%;
    max-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.7rem 0.8rem;
    border-radius: var(--fa-radius-s);
  }

  .gametitle { font-size: clamp(1.5rem, 5vw, 2.1rem); }
  .tagline { font-size: 0.9rem; }
  .brandbar { margin-bottom: 0.5rem; }
  .pickblock { margin-top: 0.8rem; padding-top: 0.6rem; }
  .invlist, .statpanel { max-height: 9rem; }
  .helpblock { max-height: none; }

  .lobbyhead { margin: 0.5rem 0 0.8rem; padding: 0.6rem; }
  #mp-room { font-size: clamp(2.4rem, 11vh, 3.6rem); }
  #mp-qr { width: clamp(110px, 22vh, 150px); border-width: 8px; }
  .mp-field { margin: 0.6rem 0; }
  .codeinput { font-size: 1.7rem; }
}

/* =============================================== Sehr schmales Querformat
 * Alte Geräte im Querformat: die Punktekarte ist verzichtbar, Welle und Uhr
 * sind es nicht. */
@media (orientation: landscape) and (max-height: 400px) {
  #hud-punktecard { display: none; }
  #hud-left { width: min(9.5rem, 32vw); }
  .hudtile { width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }
}

/* ==================================================== Zeigergerät ohne Maus
 * Auf Touchgeräten bleibt ein :hover nach dem Tippen kleben, bis irgendwo
 * anders getippt wird. Deshalb hier die Ausgangswerte aus feierabend.css
 * wiederherstellen — :not(.sel)/:not(.on), damit ausgewählte und gesperrte
 * Zustände ihre Farbe behalten. */
@media (hover: none) {
  .card:hover {
    background: rgba(3, 32, 20, 0.72);
    transform: none;
  }

  .lvlcard:hover {
    background: rgba(3, 32, 20, 0.72);
    transform: none;
  }

  .char-card:not(.sel):hover {
    background: rgba(3, 32, 20, 0.65);
    transform: none;
  }

  .char-card.sel:hover { transform: none; }

  .primary:hover { transform: none; }
  .ghost:hover { background: transparent; }
  .diff-btn:not(.sel):hover { background: rgba(3, 32, 20, 0.6); }
  .diff-btn:hover { transform: none; }
  .icon-btn:hover { background: rgba(3, 32, 20, 0.78); }
  .card-lock:not(.on):hover { background: rgba(3, 32, 20, 0.9); }

  .sellbtn:hover {
    background: transparent;
    border-color: var(--bechtle-rahmen);
    color: var(--bechtle-text-gedaempft);
  }

  /* Rückmeldung gibt es stattdessen beim Drücken. */
  .card:active, .lvlcard:active, .char-card:active { background: rgba(6, 64, 41, 0.95); }
  .primary:active, .ghost:active, .diff-btn:active, .icon-btn:active { transform: translateY(1px); }

  /* Alles Antippbare mindestens 44 px hoch — darunter trifft man daneben. */
  .primary, .ghost, .diff-btn, .sellbtn { min-height: 2.75rem; }
  .sellbtn { padding-inline: 0.7rem; }
  .icon-btn { min-width: 2.75rem; min-height: 2.75rem; }

  /* Das Schloss am Angebot ist quadratisch — nur die Höhe zu erhöhen ergäbe
   * einen schmalen Streifen in der Kartenecke. */
  .card-lock { width: 2.75rem; height: 2.75rem; font-size: 1rem; }

  /* Kleinste Schriftgrade in den Overlays auf 14 px hoch: auf Armlänge ist
   * 0,72 rem am Handy nicht mehr lesbar. MULTIPLAYER.md 3.4 nennt 14 px als
   * Untergrenze — das gilt auch für die Teile, die es nur hier gibt. */
  #overlay-mp .hint,
  #overlay-mp .card-meta,
  #overlay-mp .card-flavor,
  #overlay-shop .hint,
  #overlay-shop .invrow-side,
  .mp-field label,
  .mp-readybar,
  .mp-players:empty::after { font-size: 0.875rem; }
}

/* ==================================================== Ruhiges Bild gewünscht
 * feierabend.css kürzt Zeiten auf nahezu Null; hier zusätzlich die
 * Dauerschleife des Dreh-Hinweises ganz aus. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .rotate-icon { animation: none !important; transform: rotate(-90deg); }
  .touch-btn:active, .primary:active, .ghost:active,
  .diff-btn:active, .icon-btn:active { transform: none; }
}