/* Farbsturm: Tisch, Sitze, Ablage, Hand, Farbwahl, Effekt-Rückmeldung. Farben aus den Paletten in app.css. */

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

.color-red { --cc: #e04a3a; --ct: #fff; }
.color-blue { --cc: #2f7fe0; --ct: #fff; }
.color-green { --cc: #3fbf5a; --ct: #fff; }
.color-yellow { --cc: #f2c230; --ct: #1e1a05; }
.cs-dot { display: inline-block; width: .9em; height: .9em; border-radius: 50%; background: var(--cc); vertical-align: -.1em; margin-right: .25em; }

.cs-head { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.cs-direction { font-size: 1.4rem; line-height: 1; color: var(--accent); }

.cs-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .45rem; }
.cs-seat { padding: .4rem .55rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .2rem; }
.cs-seat.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.cs-seat.exposed { border-color: var(--error); }
.cs-seat-name { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-weight: 600; }
.cs-seat-meta { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.cs-count { display: inline-flex; align-items: center; gap: .3rem; }
.cs-score { margin-left: auto; font-weight: 800; }
.badge.last { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.cs-catch { margin: 0; background: var(--error); border-color: var(--error); color: #fff; font-weight: 800; }

.cs-back { display: inline-block; width: 18px; height: 26px; border-radius: 3px; background: repeating-linear-gradient(135deg, #1e293b 0 4px, #334155 4px 8px); border: 1px solid #64748b; }
.cs-back.big { width: 52px; height: 74px; border-radius: 6px; }

.cs-table {
    display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: center;
    padding: .8rem 1rem; border-radius: 14px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-2) 25%, var(--surface-3)) 0%, var(--surface-3) 100%);
    border: 1px solid var(--line);
}
.cs-pile { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin: 0; padding: .4rem .6rem; min-height: 0; background: transparent; border: 1px dashed var(--line); }
.cs-pile:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cs-pile:disabled { opacity: .6; }
.cs-pile-count { font-weight: 800; }
.cs-discard { display: flex; align-items: center; gap: .8rem; }
.cs-color { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; }
.cs-pending { color: var(--error); }
.cs-status { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }

.cs-card {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    width: 60px; height: 86px; margin: 0; padding: 0; flex: 0 0 auto;
    border-radius: 9px;
    background: var(--cc, #222); color: var(--ct, #fff);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    font: inherit;
    position: relative;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cs-card.wild { --cc: #1f2937; --ct: #fff; background: conic-gradient(#e04a3a 0 25%, #2f7fe0 0 50%, #3fbf5a 0 75%, #f2c230 0); }
.cs-card.wild .cs-card-face { background: #111827; border-radius: 6px; padding: .1rem .35rem; }
.cs-card.wild.chosen-red { box-shadow: 0 0 0 4px #e04a3a; }
.cs-card.wild.chosen-blue { box-shadow: 0 0 0 4px #2f7fe0; }
.cs-card.wild.chosen-green { box-shadow: 0 0 0 4px #3fbf5a; }
.cs-card.wild.chosen-yellow { box-shadow: 0 0 0 4px #f2c230; }
.cs-card.top { width: 72px; height: 104px; }
.cs-card-face { font-family: Arial, Helvetica, sans-serif; font-size: 1.9rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.cs-card.top .cs-card-face { font-size: 2.4rem; }
.cs-card-name { font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
button.cs-card { cursor: pointer; }
button.cs-card.playable { box-shadow: 0 0 0 3px var(--accent), 0 2px 6px rgba(0,0,0,.45); }
button.cs-card.playable:hover { transform: translateY(-6px); }
button.cs-card:disabled { cursor: default; opacity: .55; }
button.cs-card.blocked { opacity: .35; }

.cs-hand { display: flex; gap: .4rem; overflow-x: auto; padding: .4rem .2rem .6rem; -webkit-overflow-scrolling: touch; min-height: 100px; }
@media (min-width: 960px) { .cs-hand { flex-wrap: wrap; overflow: visible; } }

.cs-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-height: 1.5rem; }
.cs-last { font-weight: 900; }
.cs-colors { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem .7rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.cs-color-btn { background: var(--cc); color: var(--ct); border-color: var(--cc); font-weight: 800; }
.cs-color-btn:hover { background: var(--cc); filter: brightness(1.1); }

.cs-scores { width: 100%; border-collapse: collapse; font-size: .8rem; }
.cs-scores th, .cs-scores td { padding: .2rem .3rem; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cs-scores td.won { color: var(--accent-2); font-weight: 700; }
.cs-total td { border-top: 2px solid var(--line); font-size: .95rem; }
.cs-log ul { list-style: none; padding: 0; margin: 0; font-size: .85rem; max-height: 40vh; overflow-y: auto; }
.cs-log li { padding: .2rem 0; border-top: 1px solid var(--line); }
.cs-log li:first-child { border-top: 0; }
.cs-log li .muted { display: inline-block; min-width: 1.6em; }

/* --- Effekt-Rückmeldung -------------------------------------------------------- */
.cs-flash { position: absolute; left: 0; right: 0; top: 40%; display: flex; justify-content: center; pointer-events: none; animation: cs-flash 2.2s ease-out forwards; }
.cs-flash-inner { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 999px; background: rgba(10, 14, 28, .92); color: #fff; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.cs-flash-icon { font-size: 1.5rem; font-weight: 900; color: var(--accent); }
@keyframes cs-flash { 0% { opacity: 0; transform: translateY(8px) scale(.95); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cs-flash { animation: none; opacity: 0; } }