/* Imposter — spielspezifische Styles (Design-System + Game-Chrome aus ../style.css) */

.hero-spy { font-size: 56px; margin-bottom: 6px; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .5)); }

/* ── Phasen-Leiste ────────────────────────────────── */
.phase-bar { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 12px; }
.phase-chip {
    font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 999px; padding: 5px 12px;
}
.phase-timer { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.phase-timer.urgent { color: var(--red); font-weight: 700; }

/* ── Rollenkarte ──────────────────────────────────── */
.role-card {
    padding: 16px 18px; border-radius: var(--radius); text-align: center; font-size: 16px;
    background: var(--panel); border: 1px solid var(--panel-border); margin-bottom: 12px;
}
.role-card.crew { border-color: rgba(63, 191, 111, .45); background: rgba(63, 191, 111, .08); }
.role-card.crew .word { font-size: 22px; letter-spacing: .02em; }
.role-card.crew .cat { color: var(--muted); font-size: 13.5px; }
.role-card.spy { border-color: rgba(229, 72, 77, .5); background: rgba(229, 72, 77, .08); }
.role-card.reveal { animation: role-reveal .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes role-reveal {
    from { transform: rotateX(85deg) scale(.9); opacity: 0; }
    to { transform: rotateX(0) scale(1); opacity: 1; }
}

.out-hint { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 10px; }

/* ── Aktions-Boxen ────────────────────────────────── */
.action-box { width: 100%; margin-bottom: 14px; }
.action-title { font-size: 14.5px; color: var(--muted); margin-bottom: 10px; }
.action-title.spy { color: var(--red); }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.guess-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--panel-border); }
.btn.danger { border-color: rgba(229, 72, 77, .55); color: var(--red); }
.btn.danger:hover { background: rgba(229, 72, 77, .14); }

.vote-list { display: grid; gap: 8px; margin-bottom: 10px; }
.vote-btn { display: flex; justify-content: space-between; align-items: center; text-align: left; min-height: 44px; }
.vb-nm { display: inline-flex; align-items: center; gap: 8px; }
.vote-count {
    background: var(--accent); color: #fff; border-radius: 999px;
    min-width: 24px; text-align: center; padding: 1px 8px; font-size: 13px;
}
#btn-skip { width: 100%; display: flex; justify-content: space-between; align-items: center; }

/* ── Hinweis-Runden ───────────────────────────────── */
.hints { display: grid; gap: 12px; }
.round-box {
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius); padding: 12px 14px; opacity: .75;
}
.round-box.current { opacity: 1; }
.round-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.hint-row {
    display: grid; grid-template-columns: minmax(70px, auto) 1fr auto; gap: 10px;
    padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 14.5px;
}
.hint-row:first-of-type { border-top: 0; }
.hint-row .nm { color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.hint-row .tx { overflow-wrap: anywhere; }
.hint-row .tx i { color: var(--muted); }
.hint-row .mk { font-size: 12.5px; color: var(--gold); white-space: nowrap; }
.hint-row.elim .nm { text-decoration: line-through; }
.hint-row.gone { opacity: .5; }
.hint-row.gone .nm { text-decoration: line-through; }
.guess-mark { color: var(--red); font-weight: 700; }

/* ── Endscreen ────────────────────────────────────── */
.end-word { margin-top: 8px; font-size: 16px; }
.end-roles { list-style: none; padding: 0; margin: 14px 0 4px; display: grid; gap: 6px; text-align: left; }
.end-roles li { padding: 7px 12px; background: rgba(255, 255, 255, .05); border-radius: 9px; }
.end-roles li.spy { background: rgba(229, 72, 77, .12); color: var(--red); font-weight: 700; }