/* ===========================================================================
   Durak – Oberfläche
   =========================================================================== */

:root {
    --dk-bg: #0b1020;
    --dk-bg-2: #0e1628;
    --dk-felt: #0d3b2e;
    --dk-felt-2: #05221a;
    --dk-panel: rgba(255, 255, 255, .045);
    --dk-panel-strong: rgba(255, 255, 255, .075);
    --dk-line: rgba(255, 255, 255, .10);
    --dk-line-strong: rgba(255, 255, 255, .18);
    --dk-text: #eef2f8;
    --dk-muted: #98a3b8;
    --dk-faint: #6b7689;
    --dk-accent: #34d399;
    --dk-accent-dim: rgba(52, 211, 153, .18);
    --dk-gold: #f7c948;
    --dk-gold-dim: rgba(247, 201, 72, .16);
    --dk-danger: #fb7185;
    --dk-danger-dim: rgba(251, 113, 133, .16);
    --dk-radius: 14px;
    --dk-radius-sm: 9px;
    --dk-card-w: clamp(46px, 6.4vw, 76px);
    --dk-card-h: calc(var(--dk-card-w) * 1.44);
    --dk-shadow: 0 10px 30px -8px rgba(0, 0, 0, .65);
    --dk-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--dk-bg);
    color: var(--dk-text);
    font-family: var(--dk-font);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

body {
    background:
        radial-gradient(1100px 620px at 50% 118%, #14513d 0%, rgba(20, 81, 61, 0) 62%),
        radial-gradient(760px 520px at 88% -12%, #1b2a52 0%, rgba(27, 42, 82, 0) 60%),
        linear-gradient(180deg, var(--dk-bg) 0%, var(--dk-bg-2) 100%);
    background-attachment: fixed;
}

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; }

.dk-app { min-height: 100dvh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ Buttons */

.dk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.25rem;
    border: 1px solid var(--dk-line-strong);
    border-radius: 999px;
    background: var(--dk-panel-strong);
    color: var(--dk-text);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dk-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .13); transform: translateY(-1px); }
.dk-btn:active:not(:disabled) { transform: translateY(0); }
.dk-btn:disabled { opacity: .38; cursor: not-allowed; }

.dk-btn-primary {
    background: linear-gradient(180deg, #3ddda3, #21a97b);
    border-color: transparent;
    color: #05261c;
    box-shadow: 0 8px 22px -10px rgba(52, 211, 153, .8);
}
.dk-btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #4ee7ae, #24b986); }

.dk-btn-gold {
    background: linear-gradient(180deg, #ffd964, #e9b52c);
    border-color: transparent;
    color: #3a2a00;
    box-shadow: 0 8px 22px -10px rgba(247, 201, 72, .75);
}
.dk-btn-gold:hover:not(:disabled) { background: linear-gradient(180deg, #ffe27f, #f3c33c); }

.dk-btn-danger {
    background: linear-gradient(180deg, #fb8ea1, #e4586f);
    border-color: transparent;
    color: #3d0812;
    box-shadow: 0 8px 22px -10px rgba(251, 113, 133, .7);
}
.dk-btn-danger:hover:not(:disabled) { background: linear-gradient(180deg, #ffa1b1, #ee6b80); }

.dk-btn-ghost { background: transparent; border-color: var(--dk-line); color: var(--dk-muted); }
.dk-btn-ghost:hover:not(:disabled) { color: var(--dk-text); border-color: var(--dk-line-strong); }

.dk-btn-sm { padding: .42rem .8rem; font-size: .82rem; }

/* -------------------------------------------------------------- Spielkarten */

.pcard {
    position: relative;
    width: var(--dk-card-w);
    height: var(--dk-card-h);
    flex: 0 0 auto;
    border-radius: var(--dk-radius-sm);
    background: linear-gradient(160deg, #fffefb 0%, #f2f0ea 100%);
    border: 1px solid rgba(0, 0, 0, .28);
    box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--dk-card-w) * .07);
    user-select: none;
    overflow: hidden;
}

.pcard.is-red { color: #d02338; }
.pcard.is-black { color: #17202e; }

.pcard-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: .95;
    font-weight: 800;
    font-size: calc(var(--dk-card-w) * .3);
    letter-spacing: -.02em;
}

.pcard-corner i { font-style: normal; font-size: calc(var(--dk-card-w) * .24); }
.pcard-corner-flip { align-self: flex-end; transform: rotate(180deg); }

.pcard-pip {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: calc(var(--dk-card-w) * .56);
    opacity: .17;
    pointer-events: none;
}

/* Trumpffarbe deutlich markieren */
.pcard.is-trump {
    border-color: rgba(215, 160, 20, .9);
    box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .55), 0 0 0 2px var(--dk-gold-dim),
                inset 0 1px 0 rgba(255, 255, 255, .9);
}

.pcard-back {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 4px, transparent 4px 8px),
        linear-gradient(155deg, #3b4a8f 0%, #23305e 55%, #1a2348 100%);
    border-color: rgba(255, 255, 255, .16);
}

.pcard-back::after {
    content: "";
    position: absolute;
    inset: calc(var(--dk-card-w) * .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: calc(var(--dk-radius-sm) - 3px);
}

/* --------------------------------------------------------------- Kopfzeile */

.dk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem clamp(.6rem, 2vw, 1.4rem);
    border-bottom: 1px solid var(--dk-line);
    background: rgba(8, 12, 24, .55);
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
}

.dk-bar-group { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.dk-logo {
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .82rem;
    color: var(--dk-muted);
}

.dk-code {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .6rem .3rem .7rem;
    border: 1px dashed var(--dk-line-strong);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .22em;
    font-size: .9rem;
    transition: border-color .16s ease, color .16s ease;
}

.dk-code:hover { border-color: var(--dk-accent); color: var(--dk-accent); }
.dk-code small { letter-spacing: normal; font-weight: 600; font-size: .68rem; color: var(--dk-faint); }

.dk-score {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--dk-muted);
    white-space: nowrap;
}

.dk-score b { color: var(--dk-text); font-variant-numeric: tabular-nums; font-size: 1rem; }

/* ------------------------------------------------------------------- Board */

.dk-board {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(.4rem, 1.4vh, 1rem);
    padding: clamp(.5rem, 1.6vh, 1.1rem) clamp(.5rem, 2vw, 1.4rem);
    min-height: 0;
}

.dk-seat { display: flex; flex-direction: column; align-items: center; gap: .5rem; }

/* Liste der Mitspieler (bis zu 4 bei 5 Spielern) – reiht sich nebeneinander auf,
   bricht auf schmalen Bildschirmen um. */
.dk-roster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: .5rem clamp(.6rem, 2vw, 1.6rem);
}

.dk-seat-compact { gap: .35rem; }
.dk-seat-compact .dk-fan { min-height: calc(var(--dk-card-h) * .62); transform: scale(.62); transform-origin: top center; margin-bottom: calc(var(--dk-card-h) * -.38); }

.dk-seat-info {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .8rem;
    border: 1px solid var(--dk-line);
    border-radius: 999px;
    background: var(--dk-panel);
    font-size: .86rem;
}

/* Rolle wird rein farblich am Rand der Pille markiert, ohne zusätzlichen Text
   ("greift an"/"verteidigt") – wer gerade dran ist, gewinnt mit is-turn. */
.dk-seat-info.role-attack { border-color: rgba(251, 113, 133, .6); }
.dk-seat-info.role-defend { border-color: rgba(96, 165, 250, .6); }

.dk-seat-info.is-turn {
    border-color: rgba(52, 211, 153, .55);
    background: var(--dk-accent-dim);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .07);
}

.dk-seat-name { font-weight: 700; }
.dk-seat-meta { color: var(--dk-muted); font-size: .8rem; }

.dk-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dk-dot.on { background: var(--dk-accent); box-shadow: 0 0 0 3px var(--dk-accent-dim); }
.dk-dot.off { background: var(--dk-faint); }

/* Handkartenfächer */

/* Nach dem Aufnehmen kann eine Hand deutlich mehr als sechs Karten haben. Die
   Überlappung wird darum aus der Kartenzahl (--dk-n, kommt aus der Komponente) und der
   verfügbaren Breite berechnet: das Fächer passt dadurch immer in die Zeile und
   erzeugt nie einen waagerechten Scrollbalken. */
.dk-fan {
    --dk-n: 6;
    --dk-step: .66;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    min-height: var(--dk-card-h);
}

.dk-fan > * {
    margin-left: calc(
        min(var(--dk-card-w) * var(--dk-step), (100% - var(--dk-card-w)) / max(1, var(--dk-n) - 1))
        - var(--dk-card-w));
}

.dk-fan > *:first-child { margin-left: 0; }

.dk-hand-slot {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--dk-radius-sm);
    transition: transform .16s cubic-bezier(.2, .8, .3, 1), filter .16s ease;
}

.dk-hand-slot:hover:not(:disabled) { transform: translateY(-16px); z-index: 5; }
.dk-hand-slot:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 3px; z-index: 6; }

.dk-hand-slot.is-selected { transform: translateY(-24px); z-index: 7; }

.dk-fan-static { --dk-step: .58; }

/* Die eigene Hand ist die wichtigste Fläche am Tisch – deutlich größer als
   Gegner-, Talon- und Ablage-Karten, die nur den Überblick liefern müssen. */
.dk-fan-mine { --dk-card-w: clamp(60px, 9.5vw, 104px); }

/* -------------------------------------------------- Mitte: Talon / Tisch */

.dk-middle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(.6rem, 2vw, 1.6rem);
    min-height: 0;
}

.dk-pile { display: flex; flex-direction: column; align-items: center; gap: .4rem; }

.dk-pile-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dk-faint);
    white-space: nowrap;
}

.dk-pile-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--dk-muted); font-size: .82rem; }

/* Talon mit querliegender Trumpfkarte */
.dk-talon-stack {
    position: relative;
    width: calc(var(--dk-card-w) * 1.62);
    height: var(--dk-card-h);
}

.dk-talon-trump { position: absolute; left: calc(var(--dk-card-w) * .52); top: 0; transform: rotate(90deg); }
.dk-talon-deck { position: absolute; left: 0; top: 0; }
.dk-talon-deck > .pcard { position: absolute; left: 0; top: 0; }

.dk-trump-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--dk-gold-dim);
    border: 1px solid rgba(247, 201, 72, .4);
    color: var(--dk-gold);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.dk-trump-badge span { font-size: 1rem; line-height: 1; }

/* Kampffeld */

.dk-field {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: calc(var(--dk-card-w) * .34) calc(var(--dk-card-w) * .5);
    min-height: calc(var(--dk-card-h) * 1.25);
    padding: clamp(.5rem, 1.5vh, 1rem);
    border: 1px dashed var(--dk-line);
    border-radius: var(--dk-radius);
    background: radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
}

.dk-field-empty { color: var(--dk-faint); font-size: .86rem; text-align: center; align-self: center; }

.dk-pair {
    position: relative;
    width: calc(var(--dk-card-w) * 1.3);
    height: calc(var(--dk-card-h) * 1.16);
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--dk-radius-sm);
    animation: dk-deal .22s cubic-bezier(.2, .8, .3, 1);
}

.dk-pair > .pcard { position: absolute; left: 0; top: 0; }
.dk-pair-defence { left: calc(var(--dk-card-w) * .3) !important; top: calc(var(--dk-card-h) * .16) !important; transform: rotate(7deg); }

.dk-pair:not(:disabled) { cursor: pointer; }

@keyframes dk-deal {
    from { opacity: 0; transform: translateY(-16px) scale(.94); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Aktionen */

.dk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem clamp(.6rem, 2vw, 1.4rem) 1rem;
    border-top: 1px solid var(--dk-line);
    background: rgba(8, 12, 24, .5);
    backdrop-filter: blur(10px);
}

.dk-buttons { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.dk-toast {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: var(--dk-radius-sm);
    background: var(--dk-danger-dim);
    border: 1px solid rgba(251, 113, 133, .4);
    color: #ffd7de;
    font-size: .85rem;
}

.dk-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .45rem 1rem;
    background: var(--dk-gold-dim);
    border-bottom: 1px solid rgba(247, 201, 72, .3);
    color: var(--dk-gold);
    font-size: .85rem;
}

/* ------------------------------------------------------------------ Panels */

.dk-center {
    flex: 1;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
}

.dk-panel {
    width: min(560px, 100%);
    padding: clamp(1.4rem, 4vw, 2.4rem);
    border: 1px solid var(--dk-line);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    backdrop-filter: blur(14px);
    box-shadow: var(--dk-shadow);
}

.dk-title {
    font-size: clamp(2.1rem, 6vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
}

.dk-subtitle { color: var(--dk-muted); margin-top: .5rem; font-size: .95rem; line-height: 1.5; }

.dk-suits { display: flex; gap: .4rem; font-size: 1.5rem; margin-bottom: .7rem; }
.dk-suits span:nth-child(2), .dk-suits span:nth-child(3) { color: #ef4f63; }
.dk-suits span:nth-child(1), .dk-suits span:nth-child(4) { color: var(--dk-muted); }

.dk-field-group { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.4rem; }

.dk-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dk-faint); }

.dk-input {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--dk-line-strong);
    border-radius: var(--dk-radius-sm);
    background: rgba(0, 0, 0, .28);
    color: var(--dk-text);
    font-size: 1rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.dk-input::placeholder { color: var(--dk-faint); }
.dk-input:focus { outline: none; border-color: var(--dk-accent); box-shadow: 0 0 0 3px var(--dk-accent-dim); }

.dk-input-code {
    text-transform: uppercase;
    letter-spacing: .5em;
    font-weight: 700;
    font-size: 1.35rem;
    text-align: center;
    padding-left: .5em;
}

.dk-row { display: flex; gap: .6rem; align-items: stretch; }
.dk-row > .dk-input { flex: 1; min-width: 0; }

.dk-bot-row { display: flex; gap: .6rem; }
.dk-bot-row > .dk-btn { flex: 1; }

.dk-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.5rem 0;
    color: var(--dk-faint);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.dk-divider::before, .dk-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dk-line);
}

.dk-error {
    margin-top: 1rem;
    padding: .65rem .9rem;
    border-radius: var(--dk-radius-sm);
    background: var(--dk-danger-dim);
    border: 1px solid rgba(251, 113, 133, .4);
    color: #ffd7de;
    font-size: .88rem;
}

.dk-note { margin-top: 1.2rem; font-size: .82rem; color: var(--dk-faint); line-height: 1.6; }

.dk-details { margin-top: 1.6rem; border-top: 1px solid var(--dk-line); padding-top: 1rem; }
.dk-details summary { cursor: pointer; color: var(--dk-muted); font-size: .9rem; font-weight: 600; }
.dk-details summary:hover { color: var(--dk-text); }
.dk-details ul { margin: .8rem 0 0; padding-left: 1.2rem; color: var(--dk-muted); font-size: .87rem; line-height: 1.7; }

.dk-code-big {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin: 1.2rem 0;
    padding: 1rem;
    border: 1px dashed var(--dk-line-strong);
    border-radius: var(--dk-radius);
    font-size: clamp(2rem, 9vw, 2.9rem);
    font-weight: 800;
    letter-spacing: .32em;
    text-indent: .32em;
}

.dk-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--dk-line-strong);
    border-top-color: var(--dk-accent);
    border-radius: 50%;
    animation: dk-spin .8s linear infinite;
    flex: 0 0 auto;
}

@keyframes dk-spin { to { transform: rotate(360deg); } }

.dk-waiting { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--dk-muted); font-size: .92rem; }

/* -------------------------------------------------------------- Endabrechnung */

.dk-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    background: rgba(4, 7, 15, .72);
    backdrop-filter: blur(6px);
    animation: dk-fade .2s ease;
}

@keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } }

.dk-result { width: min(440px, 100%); text-align: center; }
.dk-result-emoji { font-size: 3.2rem; line-height: 1; }
.dk-result-title { font-size: 1.8rem; font-weight: 800; margin-top: .6rem; }
.dk-result-text { color: var(--dk-muted); margin-top: .5rem; line-height: 1.55; }

.dk-result-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin: 1.4rem 0;
    padding: .9rem;
    border-radius: var(--dk-radius);
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--dk-line);
}

.dk-result-score div { display: flex; flex-direction: column; gap: .2rem; }
.dk-result-score b { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.dk-result-score span { font-size: .78rem; color: var(--dk-faint); }

/* =========================================================================
   Lobby – Spielauswahl
   ========================================================================= */

.dk-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }

.dk-game {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .9rem 1rem;
    border: 1px solid var(--dk-line-strong);
    border-radius: var(--dk-radius);
    background: rgba(0, 0, 0, .28);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .12s ease;
}

/* Die Auswahl ausdrücklich ausnehmen: sonst würde der Hover-Zustand die grüne Markierung
   der gewählten Kachel überdecken – ausgerechnet direkt nach dem Anklicken. */
.dk-game:hover:not(:disabled):not(.is-active) {
    border-color: var(--dk-line-strong);
    background: rgba(255, 255, 255, .07);
    transform: translateY(-1px);
}

.dk-game:disabled { cursor: not-allowed; opacity: .6; }

.dk-game.is-active {
    border-color: var(--dk-accent);
    background: var(--dk-accent-dim);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .08);
}

.dk-game-icon { font-size: 1.5rem; line-height: 1; }
.dk-game-name { font-weight: 800; font-size: 1.05rem; }
.dk-game-text { font-size: .78rem; color: var(--dk-muted); line-height: 1.4; }

/* =========================================================================
   Blackjack
   ========================================================================= */

/* Der Blackjack-Tisch braucht keine Mitte wie Durak: oben der Dealer, darunter die
   Mitspieler, unten die eigenen Hände. */
.bj-board { justify-content: flex-start; gap: clamp(.6rem, 2vh, 1.4rem); }
.bj-board > .bj-me { margin-top: auto; }

.bj-dealer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: clamp(.6rem, 1.6vh, 1.1rem) 1rem;
    border: 1px dashed var(--dk-line);
    border-radius: var(--dk-radius);
    background: radial-gradient(120% 160% at 50% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
}

.bj-chips-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--dk-gold-dim);
    border: 1px solid rgba(247, 201, 72, .4);
    color: var(--dk-gold);
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Mehrere Hände nebeneinander – nach einem Split bis zu vier. */
.bj-hands { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .5rem clamp(.5rem, 2vw, 1.4rem); }

.bj-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .4rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--dk-radius);
    transition: border-color .16s ease, background .16s ease;
}

/* Die Hand, die gerade an der Reihe ist, muss auf einen Blick erkennbar sein. */
.bj-hand.is-active {
    border-color: rgba(52, 211, 153, .55);
    background: var(--dk-accent-dim);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .07);
}

/* Die Fächer-Formel aus .dk-fan rechnet die Überlappung aus der Breite des Elternteils.
   Eine Blackjack-Hand ist aber nur so breit wie ihr Inhalt – dort ergäbe die Rechnung
   eine Überlappung von fast 100 %. Deshalb hier eine feste Überlappung. */
.bj-hand .dk-fan { width: auto; }
.bj-hand .dk-fan > * { margin-left: calc(var(--dk-card-w) * -.4); }
.bj-hand .dk-fan > *:first-child { margin-left: 0; }

.bj-hand-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center; }

.bj-hands-small .bj-hand-meta { font-size: .78rem; }

.bj-total {
    padding: .16rem .55rem;
    border-radius: 999px;
    background: var(--dk-panel-strong);
    border: 1px solid var(--dk-line);
    font-weight: 700;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bj-total.is-bust { background: var(--dk-danger-dim); border-color: rgba(251, 113, 133, .45); color: #ffd7de; }
.bj-total.is-blackjack { background: var(--dk-gold-dim); border-color: rgba(247, 201, 72, .45); color: var(--dk-gold); }

.bj-bet { font-size: .78rem; color: var(--dk-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.bj-outcome {
    padding: .14rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bj-outcome.is-win, .bj-result.is-win { background: var(--dk-accent-dim); color: var(--dk-accent); }
.bj-outcome.is-lose, .bj-result.is-lose { background: var(--dk-danger-dim); color: var(--dk-danger); }
.bj-outcome.is-push, .bj-result.is-push { background: var(--dk-panel-strong); color: var(--dk-muted); }

.bj-result {
    padding: .45rem .9rem;
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Die eigenen Karten sind – wie bei Durak – die wichtigste Fläche am Tisch. */
.bj-fan-mine { --dk-card-w: clamp(56px, 8.5vw, 92px); }

.bj-seat-state, .bj-empty { font-size: .82rem; color: var(--dk-faint); }
.bj-empty { min-height: calc(var(--dk-card-h) * .8); display: grid; place-items: center; }

/* Setzleiste */

.bj-betbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.bj-bet-amount { font-size: .88rem; color: var(--dk-muted); white-space: nowrap; }
.bj-bet-amount b { color: var(--dk-gold); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.bj-chip {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, .45);
    background: radial-gradient(circle at 50% 35%, #3f4f7a, #202c4f);
    color: var(--dk-text);
    font-weight: 800;
    font-size: .8rem;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform .12s ease, box-shadow .16s ease;
}

.bj-chip:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .8); }
.bj-chip:disabled { opacity: .35; cursor: not-allowed; }

/* =========================================================================
   Poker (Texas Hold'em)
   ========================================================================= */

.pk-board { justify-content: space-between; gap: clamp(.5rem, 1.6vh, 1.2rem); }

.pk-seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .45rem .6rem;
    border: 1px solid transparent;
    border-radius: var(--dk-radius);
    transition: border-color .16s ease, background .16s ease, opacity .16s ease;
}

/* Wer ausgestiegen ist, tritt sichtbar in den Hintergrund. */
.pk-seat.is-folded { opacity: .42; }

.pk-seat.is-winner {
    border-color: rgba(247, 201, 72, .55);
    background: var(--dk-gold-dim);
    box-shadow: 0 0 0 4px rgba(247, 201, 72, .07);
}

.pk-me { margin-top: auto; }

/* Positionsmarken (Button, Small und Big Blind) an der Namenspille. */
.pk-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--dk-panel-strong);
    border: 1px solid var(--dk-line-strong);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.pk-cards { display: flex; align-items: flex-end; --dk-card-w: clamp(38px, 5vw, 58px); }
.pk-cards > .pcard { margin-left: calc(var(--dk-card-w) * -.35); }
.pk-cards > .pcard:first-child { margin-left: 0; }

.pk-cards-mine { --dk-card-w: clamp(60px, 9vw, 100px); gap: .3rem; }
.pk-cards-mine > .pcard { margin-left: 0; }

.pk-handname {
    padding: .14rem .5rem;
    border-radius: 999px;
    background: var(--dk-panel-strong);
    border: 1px solid var(--dk-line);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.pk-handname-mine { background: var(--dk-accent-dim); border-color: rgba(52, 211, 153, .4); color: var(--dk-accent); }

.pk-seat-state { display: flex; align-items: center; gap: .4rem; min-height: 1.2rem; flex-wrap: wrap; justify-content: center; }

.pk-bet {
    padding: .12rem .45rem;
    border-radius: 999px;
    background: var(--dk-gold-dim);
    border: 1px solid rgba(247, 201, 72, .35);
    color: var(--dk-gold);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pk-status { font-size: .74rem; color: var(--dk-faint); white-space: nowrap; }

/* Tischmitte: Pot und die fünf Gemeinschaftskarten */

.pk-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding: clamp(.7rem, 2vh, 1.3rem) 1rem;
    border: 1px dashed var(--dk-line);
    border-radius: var(--dk-radius);
    background: radial-gradient(120% 160% at 50% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
}

.pk-pot { display: flex; align-items: center; gap: .6rem; }

.pk-pot-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--dk-gold);
    font-variant-numeric: tabular-nums;
}

.pk-board-cards { display: flex; align-items: center; gap: clamp(.25rem, 1vw, .6rem); flex-wrap: wrap; justify-content: center; }

/* Platzhalter für noch nicht aufgedeckte Gemeinschaftskarten. */
.pk-slot {
    width: var(--dk-card-w);
    height: var(--dk-card-h);
    border: 1px dashed var(--dk-line);
    border-radius: var(--dk-radius-sm);
    flex: 0 0 auto;
}

.pk-pot-results { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.pk-pot-result { font-size: .8rem; color: var(--dk-muted); text-align: center; }

/* Erhöhungsleiste */

.pk-raise { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pk-raise-presets { display: flex; gap: .35rem; flex-wrap: wrap; }

.pk-slider {
    width: clamp(120px, 22vw, 240px);
    accent-color: var(--dk-gold);
    cursor: pointer;
}

/* ------------------------------------------------------------------ Mobil */

@media (max-width: 620px) {
    :root { --dk-card-w: clamp(42px, 12.5vw, 58px); }

    .dk-middle { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "talon field" "discard field"; row-gap: .5rem; }
    .dk-middle > .dk-pile-talon { grid-area: talon; }
    .dk-middle > .dk-field { grid-area: field; }
    .dk-middle > .dk-pile-discard { grid-area: discard; }

    .dk-bar-mid { order: 3; width: 100%; justify-content: center; }
    .dk-actions { flex-direction: column; align-items: stretch; text-align: center; }
    .dk-buttons { justify-content: center; }

    .bj-chip { width: 40px; height: 40px; font-size: .74rem; }
    .bj-betbar { justify-content: center; }

    .pk-raise { justify-content: center; }
    .pk-slider { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}