/* Klecks — eigene Optik. Chrome kommt aus ../style.css, die Zeichenfläche
   und ihre Werkzeuge aus ../shell.css (LWDraw, S5). */

.hero-blobs { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.hero-blobs span {
    width: 34px; height: 34px; border-radius: 50% 60% 55% 45%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.hero-blobs span:nth-child(1) { background: var(--red); transform: rotate(-12deg); }
.hero-blobs span:nth-child(2) { background: var(--gold); transform: rotate(8deg) scale(1.15); }
.hero-blobs span:nth-child(3) { background: var(--accent); transform: rotate(-4deg); }

.need-two {
    font-size: 12.5px; color: var(--muted); margin: 10px 0 0;
    border-left: 2px solid rgba(242, 193, 78, .5); padding-left: 9px;
}

/* ── Das Wort ist die Ansage der Runde ──
   Es KLEBT oben: Wer rät, tippt unten und schaut ständig hoch — genau das,
   was man dabei braucht, darf nicht aus dem Bild wandern (gleiche Lehre wie
   die Buchstabenleiste in Stadt Land Fluss, E63). Rechts bleibt Platz für die
   fixe Knopfreihe der Shell. */
.word-bar {
    display: flex; align-items: center; gap: 12px; margin: 2px 0 10px;
    padding: 8px 164px 8px 0;
}
@media (min-width: 900px) { .word-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;
}
.word {
    margin: 0 auto; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
    justify-content: center; min-width: 0;
}
.word .plain {
    font-size: clamp(22px, 5.5vw, 34px); font-weight: 800; letter-spacing: .04em;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.word i { font-style: normal; font-size: clamp(20px, 5vw, 30px); font-weight: 800; line-height: 1; }
.word .blank { color: var(--muted); opacity: .55; }
/* Aufgedeckte Buchstaben leuchten — sonst übersieht man den Hinweis,
   auf den man gerade wartet. */
.word .shown { color: var(--gold); }
.word .gap { width: .5em; }
/* Nicht zusammenstauchen lassen (E63: aus „8 s" war ein „8" geworden). */
.round-chip, .k-timer { flex: 0 0 auto; }
.k-timer { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-timer.urgent { color: var(--red); font-weight: 800; }

/* ── Wortwahl ── */
.choose-box { width: 100%; margin-bottom: 12px; text-align: center; }
.choose-box h2 { font-size: 16px; margin: 0 0 10px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.choices .choice { font-size: 16px; font-weight: 700; padding: 12px 18px; min-height: 48px; }

/* ── Raten ── */
.guess-box { display: flex; gap: 8px; margin-top: 12px; }
.guess-box input { flex: 1 1 auto; min-height: 48px; font-size: 16px; }   /* 16px: iOS zoomt sonst */
.guess-box .btn { flex: 0 0 auto; min-height: 48px; }
.near-hint {
    margin: 8px 0 0; font-size: 14px; font-weight: 800; color: var(--gold); text-align: center;
    animation: kNear 2.5s ease-out;
}
@keyframes kNear { 0% { transform: scale(1.25); } 20% { transform: scale(1); } 100% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .near-hint { animation: none; } }

/* ── Tipp-Verlauf ── */
.feed { margin-top: 10px; max-height: 132px; overflow-y: auto; display: grid; gap: 3px; }
.fi {
    display: flex; gap: 8px; align-items: baseline; font-size: 13.5px;
    padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .035);
}
.fi .who { color: var(--muted); font-size: 12px; flex: 0 0 auto; max-width: 8em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi .tx { overflow-wrap: anywhere; flex: 1 1 auto; }
/* E69: Fast-Treffer liegen bis zur Auflösung verdeckt — danach stehen sie im
   Feed, markiert, und sind genau die Tipps, über die man streiten will. */
.fi.near .tx { color: var(--gold); }
.fi .tag { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Stand ── */
.board { display: grid; gap: 6px; margin: 14px 0; }
.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.drawer { border-color: rgba(154, 107, 255, .55); }
.bl.solved { border-color: rgba(63, 191, 111, .5); }
.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; border-radius: 999px; padding: 1px 8px; white-space: nowrap;
    color: var(--muted); border: 1px solid var(--panel-border); }
.bl .tag.pen { color: var(--accent-2); border-color: rgba(154, 107, 255, .55); }
.bl .tag.ok { color: var(--green); border-color: rgba(63, 191, 111, .5); }
/* Die eine Zahl (S21) */
.bl .pts { font-size: 21px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }