/* =====================================================================
   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-weight: bold;      /* wie zuvor als <h1> */
  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: oben links auf dem Plakat, links neben dem Titel. */
.hub-link {
  position: absolute;
  left: 14px;
  top: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px 6px 5px;
  font-family: var(--util);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(22, 19, 15, 0.35);
}

.hub-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* =====================================================================
   Stickman auf dem Plakat: Gesicht, Bild-Knopf, Stufe
   ===================================================================== */

.stickman-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 16px 0 14px;
}

/* Der Kopf des Stickmans — gemalt, bis jemand ein Bild hochlädt. */
.gesicht {
  width: 92px;
  height: 92px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: #f4f1ea center / cover no-repeat;
  background-image:
    radial-gradient(circle at 36% 46%, var(--ink) 0 5px, transparent 5.5px),
    radial-gradient(circle at 64% 46%, var(--ink) 0 5px, transparent 5.5px),
    linear-gradient(var(--ink), var(--ink));
  background-size: 100% 100%, 100% 100%, 26px 4px;
  background-position: center, center, 50% 70%;
}

.gesicht.bild { background-size: cover; background-position: center; }

/* Der Kopf ist ein Knopf, sobald das Original gespeichert ist: Tippen ändert den Ausschnitt. */
button.gesicht {
  position: relative;
  padding: 0;
  font: inherit;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
}

button.gesicht.aenderbar { cursor: pointer; margin-bottom: 18px; }
button.gesicht.aenderbar:hover,
button.gesicht.aenderbar:focus-visible { outline: 2px solid var(--blood); outline-offset: 2px; }

.gesicht-edit { display: none; }

.gesicht.aenderbar .gesicht-edit {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: 2px 8px 3px;
  font-family: var(--util);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
}

.stickman-knoepfe {
  display: flex;
  gap: 6px;
  width: 100%;
}

.nebensache.hochladen {
  text-align: center;
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.nebensache.hochladen:focus-within { outline: 2px solid var(--blood); outline-offset: 2px; }

.stickman-block .upload-note { text-align: center; }

.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; }

/* Hinweiszeile unter dem Bild-Knopf */
.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; }

/* Zweitrangige Knöpfe: `act` bleibt der großen Handlung des Plakats
   vorbehalten — „Kampf starten". */
.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); }

.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; }
  .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; }
}

/* =====================================================================
   Ladescreen
   Liegt über allem, bis das Spiel steht — siehe src/laden.js.
   ===================================================================== */

#laden {
  position: fixed;
  inset: 0;
  z-index: 50;            /* über HUD (3), Plakat (10) und Messanzeige (40) */
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(200, 16, 46, 0.2), transparent 62%),
    var(--hall);
  transition: opacity 0.45s ease;
}

#laden.weg {
  opacity: 0;
  pointer-events: none;
}

.laden-inhalt {
  width: min(430px, 100%);
  text-align: center;
}

.laden-marke {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}

.laden-leiste {
  height: 12px;
  overflow: hidden;
  border: 2px solid rgba(232, 224, 207, 0.32);
  background: rgba(232, 224, 207, 0.07);
}

.laden-fuell {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blood), var(--gold));
  box-shadow: 0 0 18px rgba(212, 160, 23, 0.4);

  /*
   * Gefüllt wird über scaleX, nicht über die Breite: Das kostet kein
   * neues Layout je Bild, und die Leiste ist damit auch auf schwachen
   * Geräten flüssig.
   *
   * Bewusst ohne transition — die Kurve kommt Bild für Bild aus
   * laden.js, eine Überblendung würde sie nur verschmieren.
   */
  transform: scaleX(0);
  transform-origin: left center;
}

.laden-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}

.laden-prozent {
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.laden-hinweis {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
}

#laden.fehler .laden-stufe,
#laden.fehler .laden-hinweis { color: var(--blood); }

.laden-neu {
  margin-top: 14px;
  padding: 10px 22px;
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.laden-neu:hover { background: var(--paper); color: var(--ink); }

/*
 * Wartender Hauptknopf — die Quittung auf „Kampf eröffnen".
 *
 * Bis der Gegner steht, vergeht ein Moment. Der Knopf bleibt in dieser
 * Zeit rot und sagt, woran es liegt; ein Streifen wandert darüber,
 * damit die Zeile nicht wie eingefroren aussieht.
 */
.act.wartet,
.act.wartet:disabled {
  position: relative;
  overflow: hidden;
  cursor: progress;
  background: var(--blood);
  color: var(--paper);
  font-size: 21px;
}

.act.wartet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 224, 207, 0.32),
    transparent
  );
  transform: translateX(-100%);
  animation: act-wartet 1.15s linear infinite;
}

@keyframes act-wartet {
  to { transform: translateX(100%); }
}

/* Ohne Bewegung bleibt die Quittung der Text und ein ruhiger Schimmer. */
@media (prefers-reduced-motion: reduce) {
  .act.wartet::after { animation: none; transform: none; opacity: 0.5; }
}

/*
 * Die Stempelzeile atmet, solange ein Gegner im Hintergrund gebaut
 * wird. Ein „wird aufgebaut …", das genauso still steht wie ein
 * „wartet im Ring", sagt nicht, dass gerade etwas läuft.
 */
.stamp.laedt {
  color: var(--blood);
  animation: stamp-atmet 1.5s ease-in-out infinite;
}

@keyframes stamp-atmet {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/*
 * Pflichtlinks unter dem Plakat. Leiser als der Weg zurück zum Hub:
 * Sie müssen dastehen und erreichbar sein, aber niemand sucht sie.
 */
.recht-links {
  margin: 10px 0 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #857a6b;
}

.recht-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 19, 15, 0.2);
  padding-bottom: 1px;
}

.recht-links a:hover { color: var(--blood); border-bottom-color: var(--blood); }
.recht-links .trenner { margin: 0 8px; opacity: 0.6; }

/* Bildausschnitt wählen: Foto ranzoomen und verschieben, bevor es das Gesicht wird. */
.zuschnitt {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 13, 0.88);
}

.zuschnitt-karte {
  width: min(100%, 360px);
  max-height: 100%;
  overflow-y: auto;
  padding: 16px;
  color: var(--ink);
  background: var(--paper);
  text-align: center;
}

.zuschnitt-titel {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zuschnitt-bild {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
  border: 3px solid var(--ink);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.zuschnitt-bild:active { cursor: grabbing; }

.zuschnitt-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zuschnitt-zoom input { flex: 1; accent-color: var(--blood); }
.zuschnitt-karte .act { margin-top: 12px; font-size: 20px; padding: 11px; }
.zuschnitt-karte .act.quiet { margin-top: 8px; font-size: 14px; padding: 9px; }

/* =====================================================================
   Spielinfo unter dem Startplakat (#spielinfo, fest im HTML)
   ===================================================================== */

.spielinfo-boxing {
  width: min(var(--plakat), 100%);
  margin-top: 22px;
  padding: 22px 24px 20px;
  text-align: left;
  color: var(--ink);
  background: 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);
  font-size: 14px;
  line-height: 1.55;
  user-select: text;
  -webkit-user-select: text;
}
#menu .spielinfo-boxing { grid-column: 1 / -1; justify-self: center; }
.spielinfo-boxing h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  color: var(--blood);
}
.spielinfo-boxing h2 { margin: 6px 0 0; font-family: var(--display); font-weight: normal; font-size: 22px; line-height: 1.1; }
.spielinfo-boxing h3 { margin: 14px 0 4px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blood); }
.spielinfo-boxing p { margin: 0 0 8px; }
.spielinfo-boxing ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 5px; }


/* =====================================================================
   1 gegen 1 online: Raum, Code, Beitreten — und das Porträt des Freundes
   ===================================================================== */

.online { margin-top: 4px; }

.online-titel {
  margin: 12px 0 6px;
  font-family: var(--util);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.online-reihe {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}

.online-code {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid rgba(22, 19, 15, 0.28);
}
.online-code:focus { outline: 2px solid var(--blood); outline-offset: 2px; border-color: var(--ink); }
.online-code::placeholder { color: rgba(22, 19, 15, 0.3); letter-spacing: 0.2em; }
.online-code:disabled, .nebensache:disabled { opacity: 0.5; cursor: not-allowed; }

.online-grosscode {
  margin: 10px 0 4px;
  font-family: var(--display);
  font-size: 54px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--blood);
  user-select: all;
}

.online-status { min-height: 1.4em; }
.online .nebensache { flex: 1; }
.result-hinweis { min-height: 1.4em; margin: 10px 0 0; }

/* Porträt des Freundes neben seinem Namen in der Lebensanzeige */
.corner-face {
  display: none;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--tag, var(--blood));
}
.corner-face.show { display: inline-block; }


/* =====================================================================
   Lobby vor dem 1-gegen-1-Kampf
   ===================================================================== */

.lobby-einladung { margin-bottom: 4px; }
.lobby-einladung .online-reihe { margin: 6px 0; }

/* Die beiden Kämpfer mit ihrem Bild, etwas kleiner als auf dem Startplakat */
.lobby-bout { margin: 14px 0 8px; align-items: flex-start; }
.lobby-bout .gesicht { width: 80px; height: 80px; margin: 8px auto 6px; }
.lobby-bout button.gesicht.aenderbar { margin-bottom: 16px; }
.lobby-bout .vs { align-self: center; }

/* Wahl „Standardbild" / „Bild hochladen": das Etikett sieht aus wie die Knöpfe daneben */
.pick label {
  flex: 1;
  padding: 9px 4px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  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 label:hover { border-color: var(--ink); }
.pick label.an { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pick label:focus-within { outline: 2px solid var(--blood); outline-offset: 2px; }

.lobby-poster .online-titel { margin-top: 14px; }
.lobby-poster .pick { margin-bottom: 4px; }
.lobby-poster .act { margin-top: 12px; }
.lobby-poster .act.quiet { margin-top: 8px; }
.lobby-hinweis { min-height: 1.4em; margin: 10px 0 0; font-size: 12px; }