/* Blindgänger — die Ladung ist die Hauptsache, also bekommt sie die Fläche.
   Alles hier hält das S12-Gate: kein Querscrollen bei 360 px, Tippziele
   mindestens 44 px. */

.hero-bg { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; }
.hero-bg .sh {
    width: 14px; height: 34px; border-radius: 3px 3px 5px 5px;
    background: linear-gradient(180deg, #b9bec9 0 38%, #d8b46a 38% 100%);
    opacity: .55;
}
.hero-bg .sh.live { background: linear-gradient(180deg, #d9534f 0 38%, #d8b46a 38% 100%); opacity: .85; }

/* ── Die Ladung ─────────────────────────────────────── */
.ladung {
    max-width: 520px; margin: 4px auto 10px; padding: 12px;
    border-radius: 14px; background: var(--panel, #1b1e26);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.lz { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.lz .marken { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; min-width: 0; }
.lz .marken i {
    width: 12px; height: 26px; border-radius: 3px 3px 4px 4px; display: block;
    background: linear-gradient(180deg, #b9bec9 0 38%, #d8b46a 38% 100%);
}
.lz.echt .marken i { background: linear-gradient(180deg, #e2564f 0 38%, #d8b46a 38% 100%); }
.lz-text { font-variant-numeric: tabular-nums; font-size: .95rem; opacity: .85; white-space: nowrap; }
.lz.echt .lz-text { color: #ff9a95; }

.saege-warn { margin: 8px 0 0; text-align: center; font-size: .92rem; color: #ffcf7a; }

.bekannt-hint {
    max-width: 520px; margin: 0 auto 10px; padding: 10px 12px; border-radius: 12px;
    text-align: center; font-weight: 600;
}
.bekannt-hint.echt { background: rgba(226, 86, 79, .16); color: #ff9a95; }
.bekannt-hint.leer { background: rgba(120, 200, 140, .14); color: #9fe0b2; }

/* ── Leben ──────────────────────────────────────────── */
.players .herzen { letter-spacing: 1px; font-size: .95rem; }
.players .cuff { margin-left: 6px; opacity: .8; }

/* ── Gegenstände ────────────────────────────────────── */
.items-box {
    max-width: 520px; margin: 0 auto 10px; display: flex; flex-direction: column; gap: 8px;
}
/* Ohne diese Zeile schlägt `display:flex` das [hidden] des Browsers — genau
   die Falle aus E78 (dort stand „Abrechnen" seit E20 bei jedem sichtbar). */
.items-box[hidden] { display: none; }

.hand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hand-nm { font-size: .88rem; opacity: .75; min-width: 4.5em; }
.leer-hand { opacity: .4; }
.item {
    min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05); font-size: 1.25rem; cursor: pointer;
}
.item:disabled { opacity: .45; cursor: default; }
.item:not(:disabled):active { transform: scale(.94); }

/* ── Handeln ────────────────────────────────────────── */
.act-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.act-btns .btn { min-height: 48px; flex: 1 1 44%; min-width: 132px; }

.link-btn {
    display: block; margin: 10px auto 0; padding: 8px 12px; min-height: 44px;
    background: none; border: 0; color: inherit; opacity: .6;
    text-decoration: underline; cursor: pointer; font-size: .9rem;
}
.link-btn[hidden] { display: none; }

/* ── Verlauf ────────────────────────────────────────── */
.log-box { max-width: 520px; margin: 12px auto 0; font-size: .9rem; }
.log-box[hidden] { display: none; }
.log-box ol { margin: 8px 0 0; padding-left: 1.2em; opacity: .8; }
.log-box li { padding: 2px 0; }

@media (min-width: 700px) {
    .lz .marken i { width: 14px; height: 32px; }
    .ladung { padding: 16px; }
}