/* ═══════════════════════════════════════════════════════════════════════════
   FISHING („Angeln") — Buehne und Bedienfeld (v3.56)
   ───────────────────────────────────────────────────────────────────────────
   Liegt NACH design.css, battles.css und spiele.css. Kopf, Einsatzkarte und
   Play-Knopf kommen aus spiele.css (derselbe Rahmen wie jedes Spiel); hier
   stehen nur der See, die Rute, Schnur, Schwimmer, Spannungsbalken und die
   Ergebnis-Einblendungen. Zeichnen tut public/js/angeln.js.

   Die Buehne folgt der Cases-Buehne: aussen Radius 20 auf --ink-950, innen
   Radius 10 mit fester Hoehe (420 px, Handy 300 px). Kein Gitterboden —
   stattdessen Wasser: zwei Wellen-Ebenen, die sich langsam gegeneinander
   schieben (nur transform, 12 s / 18 s), und ein Widerschein des Himmels.

   Alles Bewegte haengt an data-zustand (leerlauf | wurf | laeuft | holt |
   gefangen | gerissen) und data-zittern ('' | leicht | stark) am inneren
   Rahmen; das Skript setzt nur diese Attribute und die Positionen.
   ═══════════════════════════════════════════════════════════════════════════ */

.spiel-banner[data-g="angeln"], .tile[data-g="angeln"], .an-layout { --tone: #4cc9f0; --tone-rgb: 76,201,240 }

/* ── Bedienfeld ─────────────────────────────────────────────────────────── */
.an-karte .label { margin-bottom: 6px }
.an-auto { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; align-items: center }
.an-auto .input { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right }
.an-auto span { font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--muted); text-align: center }
.an-hinweis { margin: 8px 0 12px; font: var(--t-klein); color: var(--muted) }
.an-los { position: relative; flex-direction: column; gap: 1px; line-height: 1.1 }
.an-los__betrag { font: 700 .68rem var(--font-num); font-variant-numeric: tabular-nums; color: #06301a; opacity: .85 }
.an-los__betrag:empty { display: none }
/* Waehrend die Schnur draussen ist, pulst der Knopf — er ist jetzt „Reel in". */
/* v3.65: Der Puls lief als box-shadow-Animation (Neumalen je Bild, solange
   die Schnur draussen ist). Jetzt liegt der helle Schein fertig auf
   ::before und nur dessen opacity pulst. Der Knopf schneidet sonst ab
   (.btn overflow: hidden fuer das Streiflicht) – im Zustand „holt" darf der
   Schein heraus, das Streiflicht (::after) ist dann aus. */
.an-los.an-los--holt { overflow: visible }
.an-los.an-los--holt::after { content: none }
.an-los.an-los--holt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 6px 22px -6px rgba(61,220,132,.9), 0 0 0 4px rgba(61,220,132,.16);
  opacity: 0;
  animation: an-puls 1s ease-in-out infinite;
}
@keyframes an-puls {
  0%, 100% { opacity: 0 }
  50%      { opacity: 1 }
}

/* ── Buehne ─────────────────────────────────────────────────────────────── */
.an-buehne {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--ink-950);
  overflow: hidden;
}
.an-innen {
  position: relative;
  height: 420px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  background: #0b1226;
  user-select: none;
}
.an-himmel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none }

/* Wasser: ab dem Horizont (236 / 420 = 56,2 %) zwei Wellen-Ebenen aus
   Verlaeufen, doppelt so breit wie die Buehne, die nach links wandern. */
.an-wasser { position: absolute; left: 0; right: 0; top: 56.2%; bottom: 0; z-index: 1; overflow: hidden; pointer-events: none }
.an-spiegel { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(217,116,60,.16), rgba(76,201,240,.06) 40%, transparent 75%) }
.an-welle { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; opacity: .5; will-change: transform }
.an-welle--1 {
  background:
    repeating-radial-gradient(ellipse 120px 14px at 50% 30%, rgba(255,255,255,.07) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(255,255,255,.035) 22px 23px);
  animation: an-welle-links 12s linear infinite;
}
.an-welle--2 {
  background:
    repeating-radial-gradient(ellipse 160px 16px at 30% 70%, rgba(180,220,255,.06) 0 3px, transparent 3px 80px),
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(76,201,240,.05) 34px 35px);
  animation: an-welle-links 18s linear infinite reverse;
  opacity: .4;
}
@keyframes an-welle-links { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* Fisch-Schatten unter Wasser: Silhouette der aktuellen Stufe, halbtransparent,
   waechst mit der Naehe (--an-groesse setzt das Skript). */
.an-schatten {
  position: absolute; z-index: 2;
  width: calc(120px * var(--an-groesse, 1)); height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0) blur(1.2px);
  opacity: 0;
  pointer-events: none;
  transition: left .35s var(--ease-out), opacity .4s, width .35s var(--ease-out);
}
.an-innen[data-zustand="laeuft"] .an-schatten, .an-innen[data-zustand="holt"] .an-schatten { opacity: .5 }
.an-schatten--blitz { animation: an-aufblitzen .55s var(--ease-out) }
@keyframes an-aufblitzen {
  0%   { filter: brightness(0) blur(1.2px); opacity: .5 }
  35%  { filter: brightness(1.6) blur(0); opacity: .95 }
  100% { filter: brightness(0) blur(1.2px); opacity: .5 }
}

/* Schnur: SVG ueber der ganzen Buehne, Einheiten 900 × 420. */
.an-schnur { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; overflow: visible }
/* v3.89: 1.6 px verschwanden vor dem hellen Wasser — man sah nicht, wo die
   Schnur haengt. Dickere Linie mit dunklem Saum darunter (paint-order). */
.an-schnur polyline {
  fill: none;
  stroke: rgba(240,246,255,.95);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.85));
}
.an-innen[data-zittern="stark"] .an-schnur polyline { stroke: rgba(255,214,214,.95) }

/* Rute: links unten, dreht um den Griff. Zittern ab 70 % Spannung, staerker ab 85 %. */
.an-rute {
  position: absolute; left: 3%; bottom: 3%; z-index: 5;
  height: 66%; width: auto;
  transform-origin: 12% 92%;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.55));
  pointer-events: none;
}
.an-innen[data-zittern="leicht"] .an-rute { animation: an-zittern .09s linear infinite }
.an-innen[data-zittern="stark"]  .an-rute { animation: an-zittern-stark .09s linear infinite }
@keyframes an-zittern       { 0%, 100% { transform: rotate(-1.5deg) } 50% { transform: rotate(1.5deg) } }
@keyframes an-zittern-stark { 0%, 100% { transform: rotate(-3deg) }   50% { transform: rotate(3deg) } }
.an-innen[data-zustand="gerissen"] .an-rute { animation: an-rueckschlag .4s var(--ease-out) both }
@keyframes an-rueckschlag { 0% { transform: rotate(4deg) } 30% { transform: rotate(-9deg) } 100% { transform: rotate(0) } }
.an-innen[data-zustand="gefangen"] .an-rute { animation: an-hochreissen .5s var(--ease-out) both }
@keyframes an-hochreissen { 0% { transform: rotate(3deg) } 40% { transform: rotate(-6deg) } 100% { transform: rotate(0) } }

/* Schwimmer: an der Schnur, duempelt im Leerlauf (2,4 s). */
.an-schwimmer {
  position: absolute; z-index: 5;
  width: 28px; height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
  pointer-events: none;
  transition: opacity .25s;
}
.an-innen[data-zustand="leerlauf"] .an-schwimmer { animation: an-duempeln 2.4s ease-in-out infinite }
.an-innen[data-zustand="laeuft"] .an-schwimmer { animation: an-duempeln 1.1s ease-in-out infinite }
@keyframes an-duempeln { 0%, 100% { translate: 0 -3px; rotate: -4deg } 50% { translate: 0 3px; rotate: 4deg } }
.an-innen[data-zustand="gerissen"] .an-schwimmer, .an-innen[data-zustand="gefangen"] .an-schwimmer { opacity: 0 }

/* Spritzer: sechs (beim Fang zehn) Tropfen, die aus dem Eintauchpunkt fliegen. */
.an-spritzer { position: absolute; z-index: 6; width: 0; height: 0; pointer-events: none }
.an-spritzer i {
  position: absolute; left: 0; top: 0;
  width: var(--g, 4px); height: var(--g, 4px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #9fe3ff 60%, rgba(159,227,255,.2));
  animation: an-tropfen .8s cubic-bezier(.2,.6,.4,1) both;
}
@keyframes an-tropfen {
  0%   { transform: translate(0, 0) scale(1); opacity: 1 }
  60%  { transform: translate(var(--dx), var(--dy)) scale(.9); opacity: .9 }
  100% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) * -0.2 + 22px)) scale(.4); opacity: 0 }
}

/* Der gefangene Fisch springt aus dem Wasser (700 ms) und faellt zurueck. */
.an-fisch {
  position: absolute; z-index: 7;
  width: 120px; height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(76,201,240,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.6));
  pointer-events: none;
}
.an-fisch[hidden] { display: none }
.an-fisch--sprung { animation: an-sprung .7s cubic-bezier(.3,.6,.35,1) both }
@keyframes an-sprung {
  0%   { transform: translate(-50%, -30%) scale(.55) rotate(-24deg); opacity: 0 }
  25%  { opacity: 1 }
  55%  { transform: translate(-50%, -170%) scale(1.05) rotate(8deg); opacity: 1 }
  100% { transform: translate(-50%, -120%) scale(.9) rotate(18deg); opacity: 0 }
}
.an-fisch--steht { transform: translate(-50%, -140%) }

/* Multiplikator: gross in der Mitte, gruen → gold → rot mit der Hoehe. */
.an-mult {
  position: absolute; left: 50%; top: 13%; z-index: 8;
  transform: translateX(-50%);
  font-family: var(--font-disp);
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--play-ink);
  text-shadow: 0 0 28px rgba(61,220,132,.45), 0 4px 12px rgba(0,0,0,.6);
  pointer-events: none;
  transition: color .3s, text-shadow .3s;
}
.an-mult[hidden] { display: none }
.an-mult[data-ton="gold"] { color: var(--gold); text-shadow: 0 0 28px rgba(245,196,106,.5), 0 4px 12px rgba(0,0,0,.6) }
.an-mult[data-ton="rot"]  { color: #ff6b6b; text-shadow: 0 0 28px rgba(255,107,107,.5), 0 4px 12px rgba(0,0,0,.6) }
.an-mult--gerissen { font-size: 1.7rem; letter-spacing: -.02em; text-decoration: line-through; text-decoration-thickness: 3px; color: #ff6b6b }

/* Stufenwechsel: Chip „Salmon!" unter dem Multiplikator. */
.an-chip {
  position: absolute;
  left: 50%;
  top: 33%;
  z-index: 8;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(76,201,240,.45);
  background: rgba(15,18,22,.8);
  font: var(--t-knopf-klein);
  letter-spacing: var(--ls-knopf);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #bfefff;
  pointer-events: none;
}
.an-chip[hidden] { display: none }
.an-chip--auf { animation: an-chip-auf 1.4s var(--ease-out) both }
@keyframes an-chip-auf {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(.8) }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1.05) }
  80%  { opacity: 1; transform: translate(-50%, 0) scale(1) }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(.96) }
}

/* Fang-Karte in Gold. */
.an-fang {
  position: absolute; left: 50%; bottom: 12%; z-index: 9;
  display: flex; align-items: center; gap: 12px;
  transform: translateX(-50%);
  padding: 10px 18px 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(245,196,106,.5);
  background: linear-gradient(180deg, rgba(60,44,14,.92), rgba(24,20,12,.94));
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.8), 0 0 30px -8px rgba(245,196,106,.5);
  animation: an-fang-auf .45s var(--ease-spring) both;
  pointer-events: none;
}
.an-fang[hidden] { display: none }
.an-fang img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(245,196,106,.6)) }
.an-fang b { display: block; font: var(--t-karte); color: #ffe08a; white-space: nowrap }
.an-fang span { display: block; margin-top: 2px; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap }
@keyframes an-fang-auf { from { opacity: 0; transform: translate(-50%, 14px) scale(.9) } to { opacity: 1; transform: translate(-50%, 0) scale(1) } }

/* Roter Blitz am Rand beim Reissen. */
.an-blitz { position: absolute; inset: 0; z-index: 10; border-radius: 10px; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(255,80,80,0) }
.an-innen[data-zustand="gerissen"] .an-blitz { animation: an-rotblitz .7s var(--ease-out) both }
@keyframes an-rotblitz {
  0%   { box-shadow: inset 0 0 0 0 rgba(255,80,80,0) }
  18%  { box-shadow: inset 0 0 90px 12px rgba(255,80,80,.6) }
  100% { box-shadow: inset 0 0 0 0 rgba(255,80,80,0) }
}

/* Ergebnis-Einblendung oben, wie .buehne-ergebnis in spiele.css. */
.an-ergebnis {
  position: absolute; left: 50%; top: 16px; z-index: 11;
  transform: translate(-50%, 0);
  padding: 12px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(15,18,22,.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.8);
  text-align: center;
  pointer-events: none;
  animation: an-ergebnis-rein .32s var(--ease-spring) both, an-ergebnis-raus .3s var(--ease-out) 2.2s both;
}
.an-ergebnis__mult { font-family: var(--font-disp); font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums }
.an-ergebnis--sieg .an-ergebnis__mult { color: var(--play-ink); text-shadow: 0 0 24px rgba(61,220,132,.45) }
.an-ergebnis--verlust .an-ergebnis__mult { color: var(--red-ink) }
.an-ergebnis__betrag { margin-top: 6px; font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--gold) }
.an-ergebnis--verlust .an-ergebnis__betrag { color: var(--text-2) }
@keyframes an-ergebnis-rein { from { opacity: 0; transform: translate(-50%, -10px) scale(.8) } to { opacity: 1; transform: translate(-50%, 0) scale(1) } }
@keyframes an-ergebnis-raus { to { opacity: 0; transform: translate(-50%, -8px) scale(.96) } }

/* Spannungsbalken: senkrecht rechts in der Buehne; fuellt sich logarithmisch
   (--an-fuell setzt das Skript), gruen unten, gelb, rot oben. */
/* v3.89: 14 px am aeussersten Rand, ohne Zahl — die Spannung entscheidet
   ueber die Runde und war das Unauffaelligste im Bild. */
.an-spannung {
  --an-fuell: 0%;
  position: absolute; right: 22px; top: 66px; bottom: 44px; z-index: 12;
  width: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.4);
  overflow: visible;
}
.an-spannung__fuell {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* Volle Hoehe mit dem ganzen Verlauf; ein Deckel (::after) in der
     Balkenfarbe verdeckt oben, was noch nicht gefuellt ist — so laeuft der
     Verlauf ueber die GANZE Balkenhoehe, nicht ueber die Fuellung. */
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(0deg, #3ddc84 0%, #f5c46a 55%, #ff5c5c 100%);
}
.an-spannung::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% - var(--an-fuell));
  border-radius: 999px 999px 0 0;
  background: var(--ink-950);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: height .12s linear;
}
/* v3.89: „Tension" allein sagte nichts — jetzt steht der Wert dabei
   (Angeln.spannungZeigen schreibt ihn hinein). */
.an-spannung__text {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 8px);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font: var(--t-etikett-klein);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.an-spannung[data-stufe="mittel"] { box-shadow: inset 0 0 0 1px rgba(245,196,106,.3), 0 0 16px -2px rgba(245,196,106,.45) }
/* v3.65: Statt filter: brightness (ganzer Balken neu gefiltert, zweimal pro
   Sekunde) blitzt eine helle Deckschicht (::before) per opacity auf – die
   Wirkung „der Balken gluet heller" bleibt, der Compositor erledigt sie. */
.an-spannung[data-stufe="hoch"] { box-shadow: inset 0 0 0 1px rgba(255,92,92,.4), 0 0 22px -2px rgba(255,92,92,.7) }
.an-spannung[data-stufe="hoch"]::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 22px 0 rgba(255,92,92,.55);
  opacity: 0;
  animation: an-balken-puls .5s ease-in-out infinite;
}
@keyframes an-balken-puls { 0%, 100% { opacity: 0 } 50% { opacity: 1 } }

/* Verlauf-Leiste: die letzten 20 Runden als Chips. */
.an-verlauf {
  display: flex; align-items: center; gap: 6px;
  height: 30px;
  margin-bottom: 10px;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
          mask: linear-gradient(90deg, #000 85%, transparent);
}
.an-verlauf__leer { font: var(--t-klein); color: var(--muted) }
.an-verlauf__chip {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-850);
  font: var(--t-zahl-klein);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  animation: an-chip-rein .3s var(--ease-out) both;
}
.an-verlauf__chip--gruen { border-color: rgba(61,220,132,.45); color: var(--play-ink); background: rgba(61,220,132,.1) }
.an-verlauf__chip--gold  { border-color: rgba(245,196,106,.5); color: var(--gold); background: rgba(245,196,106,.12) }
.an-verlauf__chip--rot   { border-color: rgba(255,92,92,.4); color: #ff8a8a; background: rgba(255,92,92,.1) }
@keyframes an-chip-rein { from { opacity: 0; transform: translateX(-6px) } to { opacity: 1; transform: none } }

/* Fairness-Dialog */
.an-fair__text { margin: 0 0 10px; font: var(--t-text); color: var(--muted) }
.an-fair__block { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ink-900) }
.an-fair__block > b { display: block; margin-bottom: 6px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) }
.an-fair__zeile { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; padding: 3px 0; font: var(--t-klein); color: var(--muted) }
.an-fair__zeile code { font-family: var(--font-num); font-size: .72rem; color: var(--text); word-break: break-all }

/* ── Handy und schmale Fenster ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Buehne zuerst, Bedienfeld darunter — wie bei den anderen Spielen. */
  .an-layout .an-buehne { order: -1 }
}
@media (max-width: 600px) {
  .an-innen { height: 300px }
  .an-mult { font-size: 2.4rem; top: 10% }
  .an-mult--gerissen { font-size: 1.2rem }
  .an-fisch { width: 84px }
  .an-schatten { width: calc(84px * var(--an-groesse, 1)) }
  .an-rute { height: 58% }
  .an-schwimmer { width: 22px }
  .an-fang { bottom: 8%; padding: 8px 12px 8px 8px; gap: 8px }
  .an-fang img { width: 44px; height: 44px }
  .an-fang b { font: var(--t-karte) }
  /* Spannungsbalken waagrecht unter der Buehne. */
  .an-spannung {
    position: relative; right: auto; top: auto; bottom: auto;
    width: 100%; height: 14px;
    margin-top: 14px;
  }
  .an-spannung__fuell { background: linear-gradient(90deg, #3ddc84 0%, #f5c46a 55%, #ff5c5c 100%) }
  .an-spannung::after {
    top: 0; bottom: 0; left: auto; right: 0;
    width: calc(100% - var(--an-fuell)); height: auto;
    border-radius: 0 999px 999px 0;
    transition: width .12s linear;
  }
  .an-spannung__text { top: auto; bottom: 100%; transform: translate(-50%, -4px) }
  .an-buehne { padding-bottom: 30px }
}

/* ── Reduzierte Bewegung: keine Wellen, kein Zittern, harte Wechsel ────────── */
@media (prefers-reduced-motion: reduce) {
  .an-welle, .an-innen[data-zittern] .an-rute, .an-innen[data-zustand] .an-rute, .an-innen[data-zustand] .an-schwimmer,
  .an-schatten--blitz, .an-chip--auf, .an-fang, .an-ergebnis, .an-fisch--sprung, .an-spritzer i, .an-los.an-los--holt::before,
  .an-spannung[data-stufe="hoch"]::before, .an-verlauf__chip, .an-innen[data-zustand="gerissen"] .an-blitz { animation: none }
  .an-schatten, .an-spannung__fuell, .an-spannung::after, .an-schwimmer, .an-mult { transition: none }
  .an-fisch--sprung { transform: translate(-50%, -140%); opacity: 1 }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDY-FEINSCHLIFF (v3.61) — Angeln unter 600 px
   ───────────────────────────────────────────────────────────────────────────
   Der Spannungsbalken liegt waagrecht unter der Buehne (aeltere Regel) und
   wurde vom Schwebe-Knopf verdeckt; der Knopf sitzt jetzt hoeher (design.css).
   Hier: Balken etwas dicker zum Ablesen, Cast-Knopf klebt unten wie bei den
   anderen Spielen, Fairness-Zeilen einspaltig.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .an-spannung { height: 16px; margin-top: 12px }
  .an-buehne { padding-bottom: 24px }
  /* v4.24 (D25): bottom 8px wie bei den anderen Spielen (spiele.css) — das
     Polster von #content haelt die untere Leiste schon frei; mit
     handy-leiste dazu klebte der Cast-Knopf doppelt so hoch. */
  .an-steuer .an-los {
    position: sticky;
    bottom: 8px;
    z-index: 5;
  }
  .an-karte .btn { min-height: 44px }
  .an-hinweis { font: var(--t-klein) }
  .an-fair__zeile { grid-template-columns: 1fr; gap: 2px }
}