/* Stadt Land Fluss — eigene Optik. Chrome kommt aus ../style.css. */

.hero-letters { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.hero-letters span {
    width: 52px; height: 62px; border-radius: 10px; display: grid; place-items: center;
    font-size: 34px; font-weight: 800; color: #1c2230; background: #fdfdfa;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.hero-letters span:nth-child(1) { transform: rotate(-7deg); }
.hero-letters span:nth-child(3) { transform: rotate(7deg); }

/* ── Der Buchstabe ist die Ansage der Runde ──
   Er bleibt KLEBEN: Beim Tippen scrollt man die sechs Felder durch, und
   ausgerechnet das, was man dabei ständig braucht, war oben aus dem Bild
   gewandert. Rechts bleibt Platz für die fixe Knopfreihe der Shell (152 px),
   damit der Buchstabe nicht darunter rutscht. */
.letter-bar {
    display: flex; align-items: center; gap: 12px; margin: 2px 0 12px;
    padding: 8px 0 8px; padding-right: 164px;
}
@media (min-width: 900px) { .letter-bar { padding-right: 0; } }
.round-chip {
    font-size: 13px; font-weight: 700; color: var(--muted);
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.big-letter {
    margin-left: auto; margin-right: auto;
    font-size: clamp(46px, 14vw, 72px); font-weight: 800; line-height: 1;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Nicht zusammenstauchen lassen: In der Messung war aus „8 s" ein „8" geworden,
   weil der Buchstabe in der Mitte den Platz nahm. */
.round-chip, .slf-timer { flex: 0 0 auto; }
.slf-timer { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.slf-timer.urgent { color: var(--red); font-weight: 800; }

/* ── Schreiben: die Felder SIND das Bild ── */
.write-box { width: 100%; margin-bottom: 14px; }
.fields { display: grid; gap: 10px; }
@media (min-width: 720px) { .fields { grid-template-columns: 1fr 1fr; column-gap: 14px; } }
.fld { display: grid; gap: 4px; }
.fld .fl { font-size: 12.5px; color: var(--muted); letter-spacing: .03em; }
.fld input { min-height: 46px; font-size: 16px; }   /* 16px: iOS zoomt sonst beim Fokus */
/* Passt der Anfangsbuchstabe, sieht man es sofort — das ist die einzige Regel,
   die der Server hart prüft, also darf man sie beim Tippen schon erkennen. */
.fld.ok input { border-color: rgba(63, 191, 111, .65); background: rgba(63, 191, 111, .08); }
.write-foot { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
#btn-stop:disabled { opacity: .4; }

/* ── Vergleich ── */
.review-box { width: 100%; margin-bottom: 14px; }
.review-box h2 { font-size: 17px; margin: 0 0 10px; }
.rv { margin-bottom: 12px; }
.rvh { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.rvl { display: grid; gap: 4px; }
.rvi {
    display: grid; grid-template-columns: minmax(4em, auto) 1fr auto; align-items: center; gap: 10px;
    padding: 7px 11px; border-radius: 9px; font-size: 14px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-border);
}
.rvi.me { border-color: rgba(79, 140, 255, .5); }
.rvi .who { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvi .ans { font-weight: 600; overflow-wrap: anywhere; }
.rvi .p { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2em; text-align: right; }
/* Die Farbe sagt, was passiert ist — schneller als die Zahl zu lesen. */
.rvi.alone { background: rgba(242, 193, 78, .12); border-color: rgba(242, 193, 78, .45); }
.rvi.alone .p { color: var(--gold); }
.rvi.unique { background: rgba(63, 191, 111, .1); border-color: rgba(63, 191, 111, .4); }
.rvi.unique .p { color: var(--green); }
.rvi.shared .p { color: var(--muted); }
.rvi.none { opacity: .5; }
.rvi.none .ans { color: var(--muted); }

/* ── Stand ── */
.board { display: grid; gap: 6px; margin-bottom: 14px; }
.bl {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px; border-radius: 11px; background: var(--panel);
    border: 1px solid var(--panel-border);
}
.bl.me { border-color: rgba(79, 140, 255, .45); background: rgba(79, 140, 255, .07); }
.bl.stopped { border-color: rgba(242, 193, 78, .55); }
.bl .nm { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600;
    flex: 1 1 auto; min-width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl .tag { font-size: 11px; color: var(--green); border: 1px solid rgba(63, 191, 111, .5);
    border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.bl .tag.stop { color: var(--gold); border-color: rgba(242, 193, 78, .6); }
/* Die eine Zahl (S21) */
.bl .pts { font-size: 21px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }