/* =====================================================================
   Fruwild Boxing — visuelle Sprache
   Plakat (Creme-Papier, Anton-Versalien) fürs Menü,
   Hallendunkel + Broadcast-Leiste für den Kampf.
   Bewusst einthemig: das Spiel legt seine eigene Welt fest.
   ===================================================================== */

:root {
  --hall:    #0a0a0d;   /* Hallendunkel, minimal blaustichig */
  --paper:   #e8e0cf;   /* Plakatpapier, warmes Creme */
  --paper-2: #d6ccb4;   /* Papierschatten */
  --ink:     #16130f;   /* Plakattinte, warmes Schwarz */
  --blood:   #c8102e;   /* Handschuhrot */
  --gold:    #d4a017;   /* Gürtelgold */
  --steel:   #6f737d;   /* gewählter Neutralton, leicht kühl */

  --display: 'Anton', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --util:    'Oswald', 'Arial Narrow', system-ui, sans-serif;

  /* Breite des Startplakats. Die Werbespalten daneben rechnen damit. */
  --plakat: 430px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--hall);
  color: var(--paper);
  font-family: var(--util);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

canvas#scene { display: block; width: 100%; height: 100%; }

[hidden] { display: none !important; }

button, select { font-family: inherit; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =====================================================================
   Broadcast-HUD
   ===================================================================== */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.scoreband {
  background: linear-gradient(180deg, rgba(8, 8, 11, 0.92), rgba(8, 8, 11, 0.7));
  border-bottom: 2px solid var(--blood);
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}

.scorebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1px;
  max-width: 940px;
  margin: 0 auto;
}

.corner { padding: 8px 14px 9px; display: flex; flex-direction: column; gap: 5px; }
.corner.away { align-items: flex-end; }

.corner-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Eckfarbe — im Boxen die Kennzeichnung der beiden Kämpfer */
.corner-name::before {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--tag, var(--blood));
  flex: none;
}

.corner.away .corner-name { flex-direction: row-reverse; }

.track {
  width: 100%;
  height: 13px;
  background: rgba(233, 224, 207, 0.12);
  border: 1px solid rgba(233, 224, 207, 0.3);
  overflow: hidden;
}

.track > i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(180deg, #f0415a, var(--blood));
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), background 0.3s;
}

.corner.away .track > i { transform-origin: right center; }
.track > i.low      { background: linear-gradient(180deg, #ffa33d, #d3630b); }
/* Kein Dauerblinken: die Farbe allein sagt schon, dass es eng wird. */
.track > i.critical { background: linear-gradient(180deg, #ff2d3d, #7e0714); }

.track.wind { height: 5px; border-color: rgba(233, 224, 207, 0.22); }
.track.wind > i { background: linear-gradient(180deg, #f0c35a, var(--gold)); transition: transform 0.1s linear; }

.clock {
  padding: 6px 18px 8px;
  text-align: center;
  border-left: 1px solid rgba(233, 224, 207, 0.18);
  border-right: 1px solid rgba(233, 224, 207, 0.18);
}

.clock .round-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--steel);
  text-transform: uppercase;
}

.clock .time {
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.clock .time.urgent { color: var(--blood); }

.knockdowns {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
  height: 5px;
}

.knockdowns span { width: 14px; height: 100%; background: rgba(233, 224, 207, 0.18); }
.knockdowns span.used { background: var(--blood); }

/* --- Mitteilungen im Ring --- */

.callout {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.82);
  font-family: var(--display);
  font-size: clamp(38px, 9vw, 84px);
  line-height: 0.9;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 4px 0 rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.22s, transform 0.42s cubic-bezier(.16,1.5,.3,1);
}

.callout.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.callout.hot { color: var(--blood); }
.callout.good { color: var(--gold); }

.combo {
  position: absolute;
  right: 6vw;
  top: 27%;
  text-align: right;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.14s, transform 0.2s cubic-bezier(.16,1.6,.3,1);
}

.combo.show { opacity: 1; transform: translateX(0); }
.combo b { display: block; font-family: var(--display); font-size: clamp(30px, 6vw, 54px); line-height: 0.9; color: var(--gold); }
.combo span { font-size: 11px; letter-spacing: 0.24em; color: var(--paper); opacity: 0.6; text-transform: uppercase; }

/*
 * Abbrechen — der einzige Weg aus dem Kampf auf Geräten ohne Tastatur.
 * Sitzt unter der Anzeigenleiste statt darin, sonst deckt er auf
 * schmalen Schirmen den eigenen Namen zu.
 */
#abort {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 74px);
  left: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 11px;
  font-family: var(--util);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 10, 14, 0.72);
  border: 1px solid rgba(233, 224, 207, 0.32);
  border-radius: 3px;
  cursor: pointer;

  /* Das HUD lässt Zeiger durch; dieser Knopf muss sie fangen. */
  pointer-events: auto;
  transition: background 0.14s, border-color 0.14s;
}

#abort:hover { background: rgba(200, 16, 46, 0.85); border-color: var(--blood); }
#abort:active { transform: translateY(1px); }
#abort .kreuz { font-size: 13px; line-height: 1; }

@media (max-width: 560px) {
  #abort {
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    left: 8px;
    padding: 9px 12px;
    font-size: 10px;
  }
  #abort span:last-child { display: none; }   /* nur das Kreuz */
}

/* Deckungs-Anzeige */
#guard-tag {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.12s;
}

#guard-tag.show { opacity: 0.9; }

/* Messanzeige, nur über ?diag sichtbar */
#diag {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre;
  color: #9ef7b0;
  background: rgba(0, 0, 0, 0.82);
  pointer-events: none;
  overflow-x: auto;
}

/* =====================================================================
   Overlays — Plakat
   ===================================================================== */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  padding-block: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 16px);
  overflow-y: auto;
  /* body sperrt jede Geste, damit im Ring nichts wegrutscht. Ein Blatt
     ist aber genau das, was gescrollt werden muss — sonst bleibt das
     Plakat auf dem Handy unten abgeschnitten. */
  touch-action: pan-y;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200, 16, 46, 0.22), transparent 60%),
    rgba(6, 6, 9, 0.96);
}

/*
 * Hier stand backdrop-filter: blur(4px). Ein Weichzeichner über eine
 * Leinwand, die sich jedes Bild neu zeichnet, muss vom Browser in jedem
 * Bild neu berechnet werden — auf manchen Treibern zuckt er dabei
 * sichtbar. Das Plakat liegt ohnehin auf fast deckendem Schwarz; der
 * Unterschied ist Zierde, das Flimmern war es nicht wert.
 */

/*
 * Werbung links und rechts vom Startplakat.
 *
 * Das Blatt bekommt drei Spalten: Banner, Plakat, Banner. Die äußeren
 * sind 1fr breit und damit gleich — dadurch steht das Plakat weiter
 * genau in der Fenstermitte, auch wenn nur eine Anzeige geladen wird
 * oder ein Werbeblocker beide entfernt.
 *
 * Unterhalb von 1000 px bleiben beide weg: Plakat (430) plus zweimal
 * Banner (160) plus Abstände braucht rund 840 px, und auf dem Handy
 * hätte eine Anzeige die Auswahl nach unten geschoben.
 */
.werbung {
  display: none;
  grid-row: 1;
  width: var(--werbung-breite, 160px);
  /*
   * Das Plakat ist mit der Gegnerauswahl höher als das Fenster; das
   * Blatt scrollt dann. Mitwandernde Banner wären nach dem ersten
   * Wischen für immer weg, deshalb kleben sie oben fest.
   */
  align-self: start;
  position: sticky;
  top: 0;
}

.werbung.links  { grid-column: 1; justify-self: end; }
.werbung.rechts { grid-column: 3; justify-self: start; }

/* „Anzeige" darüber — Kennzeichnungspflicht, und AdSense verlangt es. */
.werbung-marke {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(232, 224, 207, 0.35);
}

/* Ohne eingetragene Kennung: nur die Fläche, damit sichtbar ist, wohin
   die Anzeige kommt. */
.werbung.leer::after {
  content: '';
  display: block;
  height: var(--werbung-hoehe, 600px);
  border: 1px dashed rgba(232, 224, 207, 0.16);
  border-radius: 3px;
  background: rgba(232, 224, 207, 0.025);
}

.werbung ins.adsbygoogle { background: transparent; }

/*
 * Die drei Spalten entstehen erst hier. Darunter bleibt das Blatt
 * einspaltig wie bisher — sonst wäre der Bezugsrahmen für die
 * Plakatbreite (min(430px, 100%)) plötzlich eine Rasterspalte statt
 * des Blatts, und auf schmalen Geräten stünde das Plakat zu eng.
 */
@media (min-width: 1000px) {
  /*
   * Die mittlere Spalte ist auf die Plakatbreite festgelegt, nicht
   * `auto`. Sonst wächst sie auf die Maximalbreite des Plakatinhalts —
   * Auswahlkarten und Regeltabelle zusammen sind fast tausend Pixel —
   * und drückt die Banner an den Fensterrand, wo sie bei knapp
   * 1000 px Breite überlaufen würden.
   */
  #menu.sheet {
    grid-template-columns: 1fr var(--plakat) 1fr;
    column-gap: 28px;
  }

  #menu .poster { grid-column: 2; }

  .werbung { display: block; }
}

/*
 * Wer wenig Höhe hat — Notebook quer, 1280 × 720 —, hat neben dem
 * Plakat zwar Platz, aber nicht für 600 px Banner. Dann lieber keins
 * als eins, das über den Rand hängt.
 */
@media (max-height: 680px) {
  .werbung { display: none; }
}

/* Das Plakat selbst */
.poster {
  position: relative;
  width: min(var(--plakat), 100%);
  padding: 26px 24px 22px;
  text-align: center;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 30% 12%, rgba(255, 255, 255, 0.5), transparent 55%),
    linear-gradient(168deg, var(--paper), var(--paper-2));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(22, 19, 15, 0.35);
}

/* Angerissene Plakatkante oben und unten */
.poster::before,
.poster::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 9px, transparent 9px 12px);
}

.poster::before { top: -3px; }
.poster::after { bottom: -3px; }

.eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--blood);
  margin: 0 0 12px;
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(42px, 12vw, 62px);
  line-height: 0.82;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

.wordmark em { display: block; font-style: normal; color: var(--blood); }

.rule {
  height: 3px;
  margin: 14px 0;
  background: var(--ink);
  position: relative;
}

.rule::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 5px;
  height: 1px;
  background: var(--ink);
}

/* Kampfpaarung */
.bout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
}

.bout .side { text-align: center; }

.bout .who {
  font-family: var(--display);
  font-size: clamp(19px, 5.5vw, 26px);
  line-height: 0.95;
  text-transform: uppercase;
}

.bout .meta {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #5d5347;
  margin-top: 3px;
}

.bout .vs {
  font-family: var(--display);
  font-size: 30px;
  color: var(--blood);
  transform: rotate(-9deg);
}

/* Kleingedrucktes: Steuerung als Kampfregeln */
.legend {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 4px;
}

.legend caption {
  font-size: 10px;
  padding-top: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #5d5347;
  padding-bottom: 6px;
}

.legend td { padding: 3.5px 0; text-align: left; border-bottom: 1px dotted rgba(22, 19, 15, 0.22); }
.legend td:last-child { text-align: right; font-weight: 500; }
.legend tr:last-child td { border-bottom: 0; }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  font-family: var(--util);
  font-size: 11px;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border-radius: 2px;
}

.note {
  font-size: 12px;
  line-height: 1.45;
  color: #5d5347;
  margin: 12px 0 16px;
  text-wrap: balance;
}

.note strong { color: var(--blood); font-weight: 600; }

/* Auswahl + Aktion */
.pick {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.pick button {
  flex: 1;
  padding: 9px 4px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid rgba(22, 19, 15, 0.28);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.pick button:hover { border-color: var(--ink); }

.pick button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.act {
  display: block;
  width: 100%;
  padding: 15px;
  font-family: var(--display);
  font-size: 25px;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--blood);
  border: 0;
  cursor: pointer;
  transition: transform 0.09s, filter 0.16s;
}

.act:hover { filter: brightness(1.12); }
.act:active { transform: translateY(2px); }

.act.quiet {
  margin-top: 8px;
  font-family: var(--util);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid rgba(22, 19, 15, 0.3);
  padding: 10px;
}

.stamp {
  margin: 14px 0 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6f6558;
}

/* Rückweg zur Übersicht. Bewusst leise: er steht unter dem Startknopf
   und soll ihm nicht die Aufmerksamkeit nehmen. */
.hub-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--util);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f6558;
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 19, 15, 0.25);
  padding-bottom: 2px;
}

.hub-link:hover { color: var(--blood); border-bottom-color: var(--blood); }

/* =====================================================================
   Gegnerauswahl — Kartenreihe auf dem Plakat
   ===================================================================== */

.section {
  margin: 16px 0 8px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #5d5347;
}

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 5px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.28);
  border: 2px solid rgba(22, 19, 15, 0.22);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.card:hover { border-color: var(--ink); }

.card[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.card-name {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.card-tag {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.66;
  text-wrap: balance;
}

/* Vorschaufleck auf der Karte eines Charakters aus der Galerie */
.thumb {
  display: none;
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  background-color: rgba(22, 19, 15, 0.1);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  border: 1px solid rgba(22, 19, 15, 0.25);
}

/* Nur Karten mit Bild zeigen den Fleck — die festen Gegner nicht. */
.thumb.bild { display: block; }

.card.shared .card-tag::before {
  content: '↗ ';
  opacity: 0.8;
}

.check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #4a4238;
  cursor: pointer;
}

.check input { accent-color: var(--blood); width: 15px; height: 15px; }
.check input:disabled + span { opacity: 0.45; }

/* Galerie als eigener Bereich mit Suche */
.galerie {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(22, 19, 15, 0.3);
}

.section.eng { margin: 12px 0 6px; }

.suche {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(22, 19, 15, 0.3);
}

.suche::placeholder { color: rgba(22, 19, 15, 0.45); }

.pick.staerke {
  margin-bottom: 0;
  flex-wrap: wrap;
}

/*
 * Drei pro Zeile. Ohne feste Breite reißt der sechste Knopf allein in
 * die zweite Zeile und zieht sich über die ganze Breite.
 */
.pick.staerke button {
  flex: 1 1 calc(33.333% - 4px);
  padding: 8px 3px 9px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* Kästchen für die einzelnen Faktoren */
.werte-block { margin-top: 8px; }

.werte {
  display: grid;
  gap: 4px;
}

.wert-zeile {
  display: grid;
  grid-template-columns: 82px 66px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  cursor: text;
}

.wert-name {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  color: var(--ink);
  text-align: right;
}

.wert-zeile input {
  width: 100%;
  padding: 5px 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  text-align: right;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(22, 19, 15, 0.3);
}

.wert-hinweis {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6f6558;
}

.fest-werte {
  margin-top: 12px;
  padding: 10px;
  text-align: left;
  background: rgba(22, 19, 15, 0.06);
  border: 1px dashed rgba(22, 19, 15, 0.3);
}

.zuruecksetzen {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  font-family: var(--util);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid rgba(22, 19, 15, 0.3);
  cursor: pointer;
}

.zuruecksetzen:hover { border-color: var(--ink); }

@media (max-width: 560px) {
  .wert-zeile { grid-template-columns: 74px 58px 1fr; gap: 6px; font-size: 11px; }
  .wert-hinweis { display: none; }
}

/* Hinweiszeilen unter der Auswahl und in der Galerie */
.upload-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #6f6558;
}

.upload-note.bad { color: var(--blood); font-weight: 600; }

/* =====================================================================
   Charakterersteller im Menü

   Dieselben Klassen wie auf der Verwaltungsseite — beide Seiten hängen
   dasselbe src/ersteller.js ein. Nur das Aussehen bringt jede selbst
   mit: dort Hallendunkel, hier Plakatpapier. `.pick` und `.section`
   stehen schon weiter oben und gelten mit.
   ===================================================================== */
.eigene-block { margin-top: 10px; }
.eigene-knoepfe { display: flex; gap: 6px; }

/* Zweitrangige Knöpfe: `act` bleibt der großen Handlung des Plakats
   vorbehalten — „Kampf eröffnen". */
.nebensache {
  flex: 1;
  padding: 9px 6px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid rgba(22, 19, 15, 0.28);
  cursor: pointer;
  transition: border-color 0.14s;
}
.nebensache:hover { border-color: var(--ink); }
.nebensache.weg { color: var(--blood); border-color: rgba(200, 16, 46, 0.35); }
.nebensache.weg:hover { border-color: var(--blood); }

.ersteller-block {
  margin-top: 10px;
  padding: 12px;
  text-align: left;
  background: rgba(22, 19, 15, 0.05);
  border: 1px dashed rgba(22, 19, 15, 0.3);
}

.ersteller h2 {
  margin: 0 0 10px;
  font-family: var(--util);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #5d5347;
}

.ersteller .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ersteller .tab {
  flex: 1;
  padding: 9px 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid rgba(22, 19, 15, 0.28);
  cursor: pointer;
}
.ersteller .tab[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

/* Im Plakat ist kein Platz für zwei Spalten — Bühne über die Regler. */
.ersteller .spalten { display: flex; flex-direction: column; gap: 10px; }

.ersteller canvas.buehne,
.ersteller .fotoschau {
  display: block;
  width: 100%;
  /* Die Leinwand trägt die Pixelgröße als Attribut; ohne das hier wäre
     die ihre Mindestbreite, und das Plakat müsste sich danach richten. */
  min-width: 0;
  height: 250px;
  background: rgba(22, 19, 15, 0.82);
  border: 1px solid rgba(22, 19, 15, 0.3);
}
.ersteller .fotoschau { display: flex; gap: 5px; padding: 5px; }
.ersteller .fotofeld {
  position: relative;
  flex: 1;
  background: center/contain no-repeat;
  border: 1px dashed rgba(233, 224, 207, 0.25);
}
.ersteller .fotofeld span {
  position: absolute;
  left: 4px;
  bottom: 3px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(233, 224, 207, 0.65);
}
.ersteller .leer {
  margin: auto;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(233, 224, 207, 0.55);
}

.ersteller .farbgitter {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.ersteller .farbe {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #4a4238;
}
.ersteller .farbe input {
  flex: none;
  width: 34px;
  height: 26px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(22, 19, 15, 0.3);
  cursor: pointer;
}

.ersteller .schieber { display: flex; align-items: center; gap: 9px; }
.ersteller .schieber input { flex: 1; accent-color: var(--blood); }
.ersteller .zahl {
  min-width: 38px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: #5d5347;
}

.ersteller .dateiknopf {
  display: block;
  margin-bottom: 6px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
  background: var(--ink);
  cursor: pointer;
}
.ersteller .dateiknopf.leise {
  color: var(--ink);
  background: transparent;
  border: 1.5px solid rgba(22, 19, 15, 0.4);
}

.ersteller .versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ersteller .haken {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #4a4238;
  cursor: pointer;
}
.ersteller .haken input {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--blood);
}

/* Der Weg über Fotos ist der Handy-Weg — das soll man sehen. */
.ersteller .warnung {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  color: #4a4238;
  background: rgba(212, 160, 23, 0.18);
  border-left: 3px solid var(--gold);
}

.ersteller .hinweis {
  margin: 8px 0 0;
  min-height: 16px;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #6f6558;
}
.ersteller .hinweis.schlecht { color: var(--blood); font-weight: 600; }
.ersteller .hinweis.gut { color: #2f6d4f; font-weight: 600; }
.ersteller .leise { color: #7d7264; font-size: 10.5px; }

.ersteller .abschluss {
  margin-top: 14px;
  padding-top: 6px;
  border-top: 1px dashed rgba(22, 19, 15, 0.3);
}
.ersteller .abschluss > input[type="text"] {
  width: 100%;
  padding: 7px 8px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(22, 19, 15, 0.3);
}

.ersteller .modgitter { display: grid; gap: 5px; margin: 10px 0; }
.ersteller .modzeile {
  display: grid;
  grid-template-columns: 86px 60px 1fr;
  gap: 7px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #4a4238;
}
.ersteller .modzeile input {
  /* Ein Zahlenfeld bringt eine Eigenbreite von rund zwanzig Zeichen mit.
     Als Rasterzelle wäre die seine Mindestgröße — und das ganze Plakat
     müsste sich danach richten. */
  min-width: 0;
  width: 100%;
  padding: 5px 6px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(22, 19, 15, 0.3);
}

.ersteller .gruen {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: #2f6d4f;
  border: 0;
  cursor: pointer;
  transition: filter 0.14s;
}
.ersteller .gruen:hover { filter: brightness(1.12); }
.ersteller .gruen:disabled {
  background: #8d8478;
  color: rgba(232, 224, 207, 0.7);
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .ersteller .modzeile { grid-template-columns: 86px 60px; }
  .ersteller .modzeile .leise { display: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.act:disabled {
  cursor: not-allowed;
  background: #8d8478;
  color: rgba(232, 224, 207, 0.75);
}

.act:disabled:active { transform: none; }

/* Kampfergebnis: Karte des Punktrichters */
.verdict .wordmark { color: var(--blood); }
.scorecard {
  margin: 10px 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #3d362d;
}

.scorecard dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; }
.scorecard dt { text-align: left; color: #5d5347; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; align-self: center; }
.scorecard dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Touch-Steuerung
   ===================================================================== */

#touch {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 4;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
  pointer-events: none;
}

body.touch #touch { display: flex; }
/* Während ein Plakat offen ist, stören die Kampftasten nur */
body.sheet-open #touch { display: none; }

.pad { display: grid; gap: 8px; pointer-events: auto; }
.pad.left { grid-template-columns: repeat(2, 1fr); }
.pad.right { grid-template-columns: repeat(2, 1fr); }

/*
 * Steuerkreuz zum Gehen: drei Spalten, oben nur der Pfeil nach vorn.
 * Muss NACH .pad.left stehen — gleiche Spezifität, also entscheidet die
 * Reihenfolge, und .pad.left würde sonst auf zwei Spalten zurückstellen.
 */
.pad.left.kreuz {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pad.kreuz .tbtn {
  width: 58px;
  font-size: 19px;
  line-height: 1;
  padding: 0;
}

.tbtn {
  width: 66px;
  height: 54px;
  font-family: var(--util);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(22, 19, 15, 0.6);
  border: 1.5px solid rgba(233, 224, 207, 0.4);
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.08s, transform 0.08s;
}

.tbtn.hit { background: rgba(200, 16, 46, 0.72); border-color: rgba(255, 180, 190, 0.6); }

/* Haken sind auch Schläge, aber die schweren: dunkler und mit Goldrand,
   damit der Daumen sie im Eifer von Jab und Gerade unterscheidet. */
.tbtn.haken { background: rgba(122, 8, 28, 0.78); border-color: rgba(212, 160, 23, 0.7); }

/* Am Boden bewirkt kein Knopf etwas — dann sollen sie auch nicht so
   aussehen, als täten sie es. */
body.liegt #touch { opacity: 0.25; pointer-events: none; }
.tbtn.wide { grid-column: span 2; width: 100%; }
.tbtn:active, .tbtn.down { background: var(--gold); color: var(--ink); transform: scale(0.94); }

/* =====================================================================
   Schmale Displays
   ===================================================================== */

@media (max-width: 560px) {
  .scorebar { grid-template-columns: 1fr auto 1fr; }
  .corner { padding: 6px 10px 7px; }
  .corner-name { font-size: 10px; letter-spacing: 0.1em; }
  .clock { padding: 5px 10px 7px; }
  .clock .time { font-size: 24px; }
  .track { height: 10px; }
  .poster { padding: 22px 18px 18px; }
  .roster { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 5px; }
  .card { padding: 8px 3px 9px; }
  .card-name { font-size: 12.5px; }
  .card-tag { font-size: 9px; }
  .combo { right: 4vw; top: 24%; }
  #guard-tag { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
}

@media (max-height: 560px) {
  /* Drei Knopfreihen statt zwei: flacher, sonst reicht die Höhe nicht. */
  .tbtn { height: 44px; font-size: 9px; }
}

@media (max-height: 460px) {
  .callout { top: 32%; font-size: clamp(30px, 7vw, 54px); }
  .tbtn { height: 38px; }
  #touch { padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 8px); gap: 8px; }
  .pad { gap: 6px; }
}

/*
 * Am Boden. Ein dunkler Rand, der zur Mitte hin ausläuft — dasselbe
 * Bild wie in einer Übertragung, wenn jemand auf der Leinwand liegt.
 * Bewusst keine Schrift: die zählt der Ringrichter groß in der Mitte,
 * und zwei Texte übereinander liest niemand.
 */
#liegen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease-out;
  /* Rahmen, nicht Vorhang: bis weit nach außen bleibt das Bild frei,
     erst zum Rand hin wird es dunkel. Auf einem hochkanten Handy ist die
     Ellipse sonst so schnell am Ende, dass vom Ring nichts übrig
     bleibt. */
  background:
    radial-gradient(ellipse 145% 110% at 50% 58%, transparent 45%, rgba(4, 2, 6, 0.8) 100%);
}

#liegen.show { opacity: 1; }

/* =====================================================================
   Virtueller Stick (Touch) und Blick-Schalter
   ===================================================================== */

.stick {
  position: relative;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 1.5px solid rgba(233, 224, 207, 0.35);
  background: rgba(22, 19, 15, 0.45);
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.stick .knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(233, 224, 207, 0.55);
  border: 1.5px solid rgba(233, 224, 207, 0.7);
  transition: background 0.08s;
  will-change: transform;
}

.stick.aktiv .knob { background: var(--gold); }

.legend.pad { margin-top: 10px; }

#blick-tag {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s;
}
#blick-tag.show { opacity: 0.85; }

@media (max-height: 460px) {
  .stick { width: 100px; height: 100px; }
  .stick .knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}