/* ===== Kartenspiele: nur auf der Karten-Seite geladen =====
   Basis-Design (Karten-Container, Tabs, Buttons) kommt aus tools.css —
   hier stehen Spielkarten-Optik und die Spieltisch-Layouts. */

#cd-home.active{display:grid}

/* -- Spielkarte (Fläche bleibt bewusst hell — Karten sind physische Objekte) -- */
.card-area{--cw:64px;position:relative}
@media(max-width:640px){.card-area{--cw:44px}}
.pcard{width:var(--cw);height:calc(var(--cw)*1.42);border-radius:calc(var(--cw)*.11);background:#fdfcf5;border:1px solid rgba(0,0,0,.22);box-shadow:0 1px 3px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;position:relative;user-select:none;flex-shrink:0;font-family:'JetBrains Mono',monospace;box-sizing:border-box}
.pcard.red{color:#c13a37}
.pcard.black{color:#22201c}
.pc-corner{position:absolute;top:4px;left:5px;font-size:calc(var(--cw)*.2);line-height:1.05;font-weight:700;text-align:center}
.pc-b{top:auto;left:auto;bottom:4px;right:5px;transform:rotate(180deg)}
.pc-mid{font-size:calc(var(--cw)*.42)}
.pcard.back{background:var(--accent);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 6px,transparent 6px 12px);border-color:color-mix(in srgb,var(--accent) 55%,#000)}
.pcard.back::after{content:'';position:absolute;inset:5px;border:1.5px solid rgba(255,255,255,.4);border-radius:inherit}
.pcard.click{cursor:pointer;transition:transform .12s,box-shadow .12s}
.pcard.click:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.22)}
.pcard.sel{outline:2.5px solid var(--accent);outline-offset:1px;transform:translateY(-4px)}
.pcard.dim{opacity:.4}
.pcard.mini{width:26px;height:37px;border-radius:4px}
.pcard-slot{width:var(--cw);height:calc(var(--cw)*1.42);border-radius:calc(var(--cw)*.11);border:1.5px dashed var(--line);flex-shrink:0;box-sizing:border-box}
.pcard-slot.click{cursor:pointer}
.pcard-slot.click:hover{border-color:var(--accent)}

/* -- Solitär -- */
.sol-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.sol-group{display:flex;gap:8px}
.sol-tab{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;justify-items:center}
.sol-pile{position:relative;width:var(--cw)}
.sol-pile .pcard,.sol-pile .pcard-slot{position:absolute;top:0;left:0}
.sol-count{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--ink-soft)}

/* -- Spielleisten / Statuszeilen -- */
.cd-bar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.cd-bar .spacer{flex:1}
.cd-stat{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 10px}
.cd-stat b{color:var(--accent);font-weight:700}
.cd-msg{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-align:center;font-size:.88rem;font-weight:600;margin:10px 0;min-height:22px}
.cd-msg.ok{color:var(--success);border-color:color-mix(in srgb,var(--success) 40%,transparent)}
.cd-msg.warn{color:var(--warn)}
.cd-msg.bad{color:var(--danger)}

/* -- Gegner-/Spielerleisten (Mau-Mau, Schwimmen) -- */
.opp-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.opp{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-align:center;min-width:86px}
.opp.active{border-color:var(--accent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent)}
.opp .opp-name{font-size:.76rem;font-weight:600;margin-bottom:5px}
.opp .opp-cards{display:flex;justify-content:center;gap:0}
.opp .opp-cards .pcard.mini{margin-left:-14px}
.opp .opp-cards .pcard.mini:first-child{margin-left:0}
.opp .opp-info{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--ink-soft);margin-top:4px}
.opp .opp-lives{font-size:.7rem;letter-spacing:2px;color:var(--danger);margin-top:3px}

/* -- Tischmitte (Ablage + Stapel) -- */
.table-mid{display:flex;gap:18px;justify-content:center;align-items:center;margin:14px 0}
.table-mid .mid-lbl{font-family:'JetBrains Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);text-align:center;margin-top:5px}

/* -- Eigene Hand als Fächer -- */
.hand{display:flex;justify-content:center;padding-top:8px;flex-wrap:wrap;min-height:calc(var(--cw)*1.55)}
.hand .pcard{margin-left:calc(var(--cw)*-.4)}
.hand .pcard:first-child{margin-left:0}
.hand .pcard.click:hover{transform:translateY(-9px)}
.hand-lbl{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin-top:10px}

/* -- Aktionszeile -- */
.cd-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.cd-actions .btn{width:auto;padding:9px 20px;margin-top:0}

/* -- Blackjack -- */
.bj-seat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}
.bj-seat.active{border-color:var(--accent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent)}
.bj-seat .bj-cards{display:flex;justify-content:center;margin:8px 0 4px}
.bj-seat .bj-cards .pcard{margin-left:calc(var(--cw)*-.55)}
.bj-seat .bj-cards .pcard:first-child{margin-left:0}
.bj-seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.bj-dealer{display:flex;flex-direction:column;align-items:center;padding:10px 0 4px}
.bj-dealer .bj-cards{display:flex}
.bj-dealer .bj-cards .pcard{margin-left:calc(var(--cw)*-.55)}
.bj-dealer .bj-cards .pcard:first-child{margin-left:0}
.bj-val{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.bj-val.bust{color:var(--danger)}
.bj-val.bj{color:var(--success)}
.chip-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.chip{width:44px;height:44px;border-radius:50%;border:3px dashed rgba(255,255,255,.55);background:var(--accent);color:#fff;font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.chip:hover{transform:translateY(-3px)}
.chip.c10{background:var(--success)}
.chip.c25{background:var(--warn)}
.chip.c50{background:var(--danger)}

/* -- Setup-Bereiche -- */
.cd-setup-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.cd-setup-list .row{display:flex;gap:8px;align-items:center}
.cd-setup-list .row input{flex:1;margin-bottom:0}
.cd-setup-list .row button{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:16px}
.cd-setup-list .row button:hover{color:var(--danger)}

/* -- Übergabe-Overlay (Pass-and-Play) -- */
.handover-ov{position:fixed;inset:0;background:rgba(10,9,8,.88);z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}
.handover-ov.show{display:flex}
.handover-ov .ho-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:#b0a99a;margin-bottom:14px}
.handover-ov .ho-avatar{width:76px;height:76px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;margin:0 auto 16px}
.handover-ov .ho-name{font-size:1.6rem;font-weight:700;color:#f4f0e7;margin-bottom:6px}
.handover-ov .ho-sub{font-size:.9rem;color:#b0a99a;margin-bottom:26px}
.handover-ov .btn{width:auto;padding:13px 44px;font-size:1rem}

/* -- Farbwunsch-Dialog (Mau-Mau Bube) -- */
.wish-row{display:flex;gap:8px;justify-content:center;margin-top:10px}
.wish-btn{width:52px;height:52px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:26px;cursor:pointer;transition:all .12s}
.wish-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.wish-btn.red{color:#c13a37}
.wish-btn.black{color:var(--ink)}

/* -- Sieg-/Endbanner -- */
.cd-winner{background:color-mix(in srgb,var(--success) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 45%,transparent);border-radius:12px;padding:18px;text-align:center;margin-top:12px}
.cd-winner .w-title{font-size:1.2rem;font-weight:700;color:var(--success);margin-bottom:4px}
.cd-winner .w-sub{font-size:.82rem;color:var(--ink-soft)}