/* Zauberstich: Tisch, Sitze, Stich, Hand, Punktetafel. Farben aus den Paletten in app.css. */

.wz-game { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wz-main { flex: 0 0 auto; position: relative; padding: .8rem; display: flex; flex-direction: column; gap: .7rem; }
.wz-side { flex: 0 0 auto; padding: 0 .8rem .8rem; }
.wz-side .card { margin-bottom: .6rem; }
@media (min-width: 960px) {
    .wz-game { flex-direction: row; overflow: hidden; }
    .wz-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
    .wz-side { flex: 0 0 380px; overflow-y: auto; padding: .8rem .8rem .8rem 0; }
}

.wz-head { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; font-size: 1.05rem; }
.wz-trump { display: inline-flex; align-items: center; gap: .4rem; }

.suit-fire { --sc: #e05a3a; }
.suit-water { --sc: #3a8fe0; }
.suit-forest { --sc: #3fa35a; }
.suit-sun { --sc: #e0b13a; }
b.suit-fire, b.suit-water, b.suit-forest, b.suit-sun { color: var(--sc); }

.wz-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.wz-seat { padding: .45rem .6rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .25rem; }
.wz-seat.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.wz-seat-name { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-weight: 600; }
.wz-seat-meta { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .9rem; }
.wz-bid b { font-size: 1.1rem; }
.wz-bid b.exact { color: var(--accent-2); }
.wz-bid b.over { color: var(--error); }
.wz-score { font-weight: 800; }

.wz-table {
    display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; min-height: 120px;
    padding: .8rem 1rem; border-radius: 14px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-2) 30%, var(--surface-3)) 0%, var(--surface-3) 100%);
    border: 1px solid var(--line);
}
.wz-played { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.wz-played-who { font-size: .8rem; }
.wz-lead { align-self: center; margin-left: auto; }

.wz-status { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.wz-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wz-bid-value { font-size: 1.5rem; min-width: 2ch; text-align: center; }
.suit-btn { border-color: var(--sc); color: var(--sc); font-weight: 700; }
.suit-btn:hover:not(:disabled) { background: var(--sc); color: #fff; }

.wz-hand { display: flex; flex-wrap: wrap; gap: .45rem; align-items: flex-end; min-height: 96px; }

.wz-card {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    width: 64px; height: 90px; margin: 0; padding: 0;
    border-radius: 8px;
    background: #f7f2ff; color: var(--sc, #444);
    border: 2px solid var(--sc, #777);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    font: inherit;
    position: relative;
    transition: transform .12s ease, box-shadow .12s ease;
}
.wz-card.kind-wizard { --sc: #c9a2ff; background: #2a1a4e; color: #e8d3ff; }
.wz-card.kind-jester { --sc: #9a9a9a; background: #e8e8e8; color: #555; }
.wz-card-face { font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.wz-card-name { font-size: .62rem; letter-spacing: .03em; text-transform: uppercase; opacity: .85; }
button.wz-card { cursor: pointer; }
button.wz-card.legal:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--accent), 0 6px 12px rgba(0,0,0,.4); }
button.wz-card.legal { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px rgba(0,0,0,.4); }
button.wz-card:disabled { cursor: default; opacity: .55; }
button.wz-card.blocked { opacity: .35; }
.wz-card.small { width: 48px; height: 68px; }
.wz-card.small .wz-card-face { font-size: 1.3rem; }
.wz-card.mini { width: 30px; height: 42px; border-radius: 5px; }
.wz-card.mini .wz-card-face { font-size: .95rem; }
.wz-card.winner { box-shadow: 0 0 0 3px #ffd166, 0 4px 10px rgba(0,0,0,.5); transform: translateY(-4px); }

.wz-scores { width: 100%; border-collapse: collapse; font-size: .8rem; }
.wz-scores th, .wz-scores td { padding: .2rem .3rem; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wz-scores th.me { color: var(--accent); }
.wz-scores td.hit b { color: var(--accent-2); }
.wz-scores td.miss b { color: var(--error); }
.wz-cell-bid { display: block; font-size: .7rem; color: var(--muted); }
.wz-total td { border-top: 2px solid var(--line); font-size: .95rem; }

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

/* --- Stich-Moment ------------------------------------------------------------ */
.wz-flash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: wz-flash 2.6s ease-out forwards; }
.wz-flash-inner { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem 1.4rem; border-radius: 14px; background: rgba(15, 8, 30, .93); color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.wz-flash-cards { display: flex; gap: .4rem; }
.wz-flash-verdict { font-weight: 800; font-size: 1.1rem; }
@keyframes wz-flash { 0% { opacity: 0; transform: scale(.95); } 8% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wz-flash { animation: none; opacity: 0; } }