/* Lügner: Tisch, Sitze mit Kelchen, Hand, Aufdeck- und Kelch-Moment. Farben aus den Paletten in app.css. */

.ld-game { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ld-main { flex: 0 0 auto; position: relative; padding: .8rem; display: flex; flex-direction: column; gap: .8rem; }
.ld-side { flex: 0 0 auto; padding: 0 .8rem .8rem; }
@media (min-width: 960px) {
    .ld-game { flex-direction: row; overflow: hidden; }
    .ld-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; max-width: 900px; margin: 0 auto; }
    .ld-side { flex: 0 0 340px; overflow-y: auto; padding: .8rem .8rem .8rem 0; }
}

.ld-head { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; font-size: 1.05rem; }
.ld-table-card b { color: var(--accent); font-size: 1.15rem; }

.ld-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; }
.ld-seat {
    padding: .5rem .7rem; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: .3rem;
}
.ld-seat.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.ld-seat.out { opacity: .5; }
.ld-seat-name { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-weight: 600; }
.ld-seat-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .9rem; }
.ld-vessels { letter-spacing: -.1em; }
.ld-vessel.gone { opacity: .18; filter: grayscale(1); }
.ld-cards { color: var(--muted); white-space: nowrap; }

.ld-center {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .8rem 1rem; border-radius: 12px;
    background: color-mix(in srgb, var(--surface-3) 60%, #000 40%);
    border: 1px solid var(--line);
}
.ld-pile { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; }
.ld-pile-count { font-size: 2rem; font-weight: 800; line-height: 1; }
.ld-claim { flex: 1 1 auto; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }

.ld-hand-area { display: flex; flex-direction: column; gap: .5rem; }
.ld-status { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.ld-hand { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 96px; align-items: center; }

.ld-card {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    width: 68px; height: 96px; margin: 0; padding: 0;
    border-radius: 8px;
    background: #efe6d2; color: #1e1a08;
    border: 2px solid #8a5a3b;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    font: inherit; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    position: relative;
}
.ld-card:hover:not(:disabled) { transform: translateY(-4px); background: #efe6d2; }
.ld-card:disabled { cursor: default; opacity: .8; }
.ld-card.selected { transform: translateY(-10px); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), 0 6px 12px rgba(0,0,0,.4); }
.ld-card.matches::after { content: "✓"; position: absolute; top: 4px; right: 6px; font-size: .75rem; color: #2f7d3a; font-weight: 800; }
.ld-card.lie { border-color: var(--error); }
.ld-card-symbol { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 700; line-height: 1; }
.ld-card.kind-ace .ld-card-symbol, .ld-card.kind-king .ld-card-symbol { color: #b8382f; }
.ld-card.kind-queen .ld-card-symbol { color: #1e1a08; }
.ld-card.kind-joker .ld-card-symbol { color: #7a3fb0; }
.ld-card-name { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: #5a4a3a; }
.ld-card.small { width: 52px; height: 74px; }
.ld-card.small .ld-card-symbol { font-size: 1.5rem; }
.ld-card.small .ld-card-name { font-size: .6rem; }

.ld-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ld-liar { background: var(--error); border-color: var(--error); color: #fff; font-weight: 800; }
.ld-liar:hover:not(:disabled) { filter: brightness(1.1); background: var(--error); }

.ld-log ul { list-style: none; padding: 0; margin: 0; font-size: .85rem; max-height: 60vh; overflow-y: auto; }
.ld-log li { padding: .2rem 0; border-top: 1px solid var(--line); }
.ld-log li:first-child { border-top: 0; }
.ld-log li .muted { display: inline-block; min-width: 2em; }

/* --- Aufdeck- und Kelch-Moment --------------------------------------------- */

.ld-reveal {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    animation: ld-reveal 5.5s ease-out forwards;
    padding: 1rem;
}
.ld-reveal-inner {
    display: flex; flex-direction: column; align-items: center; gap: .7rem;
    padding: 1.2rem 1.6rem; border-radius: 14px;
    background: rgba(20, 10, 6, .94); color: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,.6);
    text-align: center; max-width: 480px;
}
.ld-reveal-cards { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.ld-reveal-verdict { font-weight: 800; font-size: 1.15rem; }
.ld-reveal-drink { opacity: 0; animation: ld-line 5.5s ease-out forwards; }
.ld-reveal-outcome { font-weight: 800; font-size: 1.1rem; opacity: 0; animation: ld-outcome 5.5s ease-out forwards; }
.ld-reveal.hit .ld-reveal-outcome { color: #ff8a7a; }
.ld-reveal.survived .ld-reveal-outcome { color: #9be29b; }
@keyframes ld-reveal { 0% { opacity: 0; transform: scale(.95); } 6% { opacity: 1; transform: scale(1); } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ld-line { 0%, 25% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes ld-outcome { 0%, 55% { opacity: 0; transform: translateY(6px); } 65%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ld-reveal { animation: none; opacity: 0; }
}