/* Kontrakt-Rommé (Etappe 70).
   Anzeige-Entscheidung (S21): Die eigene AUFGABE steht oben und klebt — sie
   ist die Ansage der ganzen Runde. Danach die eigene Hand (sie ist zugleich
   die Bedienung), dann der Tisch, zuletzt die anderen als eine Zahl. */

.hero-cards { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.hero-cards span {
    display: grid; place-items: center; width: 34px; height: 46px; border-radius: 7px;
    font-weight: 800; font-size: 17px; color: #10131a; background: #f3f4f7;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.hero-cards span:nth-child(1) { background: #ff6b6b; }
.hero-cards span:nth-child(2) { background: #51cf66; }
.hero-cards span:nth-child(3) { background: #4dabf7; }
.hero-cards span:nth-child(4) { background: #ffd43b; }
.hero-cards span:nth-child(5) { background: linear-gradient(135deg, #ffd43b, #ff6b6b); }

/* ── Die eigene Aufgabe ── */
.task-bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 12px; margin: 0 -12px 10px; border-radius: 0 0 14px 14px;
}
.round-chip {
    font-size: 12px; color: var(--muted); border: 1px solid var(--panel-border);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.my-contract { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.my-contract .want { color: var(--gold); }
.my-contract .done { color: var(--green); }

/* ── Karten ── */
.card {
    display: inline-grid; place-items: center;
    width: 38px; height: 52px; border-radius: 8px;
    font-size: 19px; font-weight: 800; color: #10131a;
    background: #e9ecf1; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    font-variant-numeric: tabular-nums;
}
.card.sm { width: 28px; height: 38px; font-size: 14px; border-radius: 6px; }
/* Die Farbe ist NIE das einzige Merkmal — die Zahl steht immer daneben. */
.card.c-r { background: #ff8787; }
.card.c-g { background: #8ce99a; }
.card.c-b { background: #74c0fc; }
.card.c-y { background: #ffe066; }
.card.joker { background: linear-gradient(135deg, #ffd43b, #ff8787); color: #10131a; }
.card.skip { background: #495057; color: #f1f3f5; }
.card.empty { background: transparent; border: 1px dashed var(--panel-border); color: var(--muted); }

/* ── Mitspieler ── */
.players { display: grid; gap: 5px; margin-bottom: 10px; }
.pl {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 11px; border-radius: 10px; background: var(--panel);
    border: 1px solid var(--panel-border);
}
.pl.turn { border-color: rgba(242, 193, 78, .6); background: rgba(242, 193, 78, .08); }
.pl.me { border-color: rgba(79, 140, 255, .45); }
.pl .nm { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
    flex: 1 1 auto; min-width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .tag { font-size: 11px; color: var(--muted); border: 1px solid var(--panel-border);
    border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pl .tag.skip { color: var(--red); border-color: rgba(229, 72, 77, .5); }
.pl .pts { font-size: 18px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ── Stapel ── */
.piles { display: flex; gap: 12px; justify-content: center; margin: 12px 0; }
.pile {
    display: grid; place-items: center; gap: 5px; min-width: 84px; min-height: 88px;
    padding: 8px; border-radius: 12px; background: var(--panel);
    border: 1px solid var(--panel-border); cursor: pointer; color: inherit;
}
.pile:hover:not(:disabled) { border-color: rgba(242, 193, 78, .6); }
.pile:disabled { opacity: .55; cursor: default; }
.pile-back { font-size: 30px; }
.pile-n { font-size: 11.5px; color: var(--muted); }

/* ── Tisch ── */
.table { display: grid; gap: 8px; margin: 10px 0; }
.lay { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lay .who { font-size: 12px; color: var(--muted); min-width: 4.5em; }
.meld {
    display: flex; gap: 3px; padding: 5px 7px; border-radius: 9px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-border);
    cursor: pointer;
}
.meld:hover:not(:disabled) { border-color: rgba(63, 191, 111, .6); }
.meld:disabled { cursor: default; }
.empty-note { color: var(--muted); font-size: 13px; margin: 6px 0; }

/* ── Eigene Hand ── */
.hand {
    display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
    padding: 10px; margin-top: 10px; border-radius: 12px;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--panel-border);
}
.hand-card {
    padding: 0; border: 2px solid transparent; background: none; border-radius: 10px;
    cursor: pointer; line-height: 0; min-height: 44px;
}
.hand-card.picked { border-color: var(--gold); transform: translateY(-6px); }
.hand-card:disabled { opacity: .75; cursor: default; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.actions .btn { min-height: 44px; }

.round-box { margin-top: 14px; }
.round-box h2 { font-size: 18px; margin: 0 0 8px; }

@media (max-width: 420px) {
    .card { width: 32px; height: 44px; font-size: 16px; }
    .card.sm { width: 24px; height: 32px; font-size: 12px; }
    .my-contract { font-size: 15px; }
}