/* Reaktionsduell (E110). Die Fläche ist der Knopf — und ihre Farbe ist das
   ganze Signal: Rot heißt warten, Blau heißt NICHT tippen, Grün heißt jetzt. */
.hero-eher { display: flex; justify-content: center; gap: 6px; font-size: 46px; line-height: 1; margin-bottom: 6px; }
.eh-kopf { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; color: var(--muted); font-size: 15px; }

.rd-feld {
    width: 100%; min-height: min(56vh, 520px); border: 0; border-radius: 24px; cursor: pointer;
    display: grid; place-content: center; gap: 10px; text-align: center; font: inherit; color: #fff;
    touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
    background: #3a3f4d;
}
.rd-gross { font-size: clamp(36px, 10vw, 96px); font-weight: 900; letter-spacing: .02em; }
.rd-klein { font-size: clamp(15px, 3.6vw, 24px); opacity: .9; }
.rd-feld.warten { background: #8f1d2c; }
.rd-feld.taeuschung { background: #1d4ed8; }
.rd-feld.los { background: #16a34a; }
.rd-feld.frueh { background: #4a1a1f; }
.rd-feld.getippt { background: #14532d; }
/* Im Ergebnis gibt es nichts zu tippen — dann gehört der Platz der Liste. */
.rd-feld.ergebnis { min-height: 110px; }

.rd-ergebnis { display: grid; gap: 6px; margin: 14px 0; }
.rd-zeile { display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; align-items: baseline;
    padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-border); }
.rd-zeile b { font-variant-numeric: tabular-nums; }
.rd-zeile .roh { grid-column: 2 / -1; color: var(--muted); font-size: 12.5px; }
.rd-zeile.frueh b { color: var(--red); }

.rd-tabelle { display: grid; gap: 6px; margin: 12px 0; text-align: left; }
.rd-tabelle .rd-zeile { grid-template-columns: 2em 1fr 3em 6em; }

html.tv .rd-feld { min-height: 60vh; cursor: default; }
html.tv .rd-zeile { font-size: 22px; }

/* „Reaktionsduell" ist EIN Wort und bricht nicht um — bei 360 px ragte die
   Überschrift 27 px über den Rand (Mobile-Gate, E110). Also mit der Breite
   skalieren statt auf eine Silbentrennung zu hoffen. */
.hero h1 { font-size: clamp(32px, 10.5vw, 56px); }