/* Online-Doppelkopf - Grundstile. Kein Framework, keine externen Fonts. */

:root {
    --felt: #0c5c34;
    --felt-dark: #063d21;
    --panel-bg: rgba(14, 26, 20, 0.88);
    --panel-bg-solid: #142219;
    --panel-border: rgba(255, 255, 255, 0.10);
    --text: #f1f1ea;
    --text-dim: #9fb3a6;
    --accent: #e2b64d;
    --accent-2: #7fb3d5;
    --danger: #d9564a;
    --ok: #52c46a;
    --card-w: 64px;
    --card-h: 93px;
    --card-w-hand: calc(var(--card-w) * 1.98);
    --card-h-hand: calc(var(--card-h) * 1.98);
    --card-w-trick: calc(var(--card-w) * 1.48);
    --card-h-trick: calc(var(--card-h) * 1.48);
    /* Aufgedeckte Haende bei der Abrechnung: bewusst kompakt, nicht in
       Handkartengroesse (siehe .seat-hand-reveal). */
    --card-w-reveal: 80px;
    --card-h-reveal: 116px;
    --left-col-w: 257px;
    --chat-w: 274px;
    --seat-avatar-size: 73px;
    /* Rest-Korrektur fuer die Asymmetrie oben/unten (oben fester Randabstand,
       unten oberhalb der Handkarten) - siehe .seat.pos-left/.pos-right. */
    --seat-vcenter-fix: 99px;
    /* Genug Platz fuer mindestens drei Zeilen (Spieltyp + mehrere
       Ansagen/Absagen), damit bei vielen Ansagen nichts abgeschnitten
       wird oder ueberlappt. */
    --info-bar-h: 84px;
    --radius: 16px;
    --radius-sm: 10px;
    --gap: 16px;
    --shadow-float: 0 14px 34px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Verdana, Arial, sans-serif;
    background: linear-gradient(rgba(2, 12, 6, 0.35), rgba(2, 12, 6, 0.55)), url('../../img/background.png');
    background-size: 480px, cover;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed;
    color: var(--text);
    overflow-x: hidden;
}

button, input, select {
    font-family: inherit;
    font-size: 1rem;
}

button {
    cursor: pointer;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.5em 0.9em;
    min-height: 40px;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
button:hover { background: rgba(255, 255, 255, 0.16); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: var(--accent); color: #1a1400; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: #eec766; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

a { color: var(--accent-2); }

/* ---------------------------------------------------------------- */
/* Startbildschirm                                                   */
/* ---------------------------------------------------------------- */

#login-screen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4vmin;
    height: 100%;
    padding: 4vmin;
}
#login-screen[hidden] {
    display: none;
}

.player-picker {
    background: none;
    border: 4px solid transparent;
    border-radius: 50%;
    padding: 0;
    width: min(28vmin, 220px);
    height: min(28vmin, 220px);
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    min-height: 0;
    box-shadow: var(--shadow-float);
}
.player-picker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.player-picker:hover, .player-picker:focus-visible {
    border-color: var(--accent);
    transform: scale(1.04);
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 4vmin;
}
.overlay[hidden] { display: none; }

.dialog {
    background: var(--panel-bg-solid);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 1.5em;
    max-width: 92vw;
    width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-float);
}
.dialog.dialog-wide { width: 640px; }
.dialog h2 { margin-top: 0; }
.dialog .row { display: flex; gap: 0.6em; flex-wrap: wrap; margin-top: 1em; }
.dialog input[type="password"], .dialog input[type="text"] {
    width: 100%;
    padding: 0.6em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}
.field-error { color: #ff8a80; min-height: 1.4em; margin-top: 0.5em; }

/* ---------------------------------------------------------------- */
/* Spielraum-Layout: Tisch in der Mitte, Panels schweben darueber     */
/* ---------------------------------------------------------------- */

#game-room {
    display: grid;
    grid-template-columns: var(--left-col-w) 1fr var(--chat-w);
    grid-template-areas: "left table chat";
    height: 100vh;
    height: 100dvh;
    gap: var(--gap);
    padding: var(--gap);
}
#game-room[hidden] { display: none; }

#table-area {
    grid-area: table;
    position: relative;
    /* Bewusst kein overflow:hidden (mehr): #table-felt ist selbst schon
       rund (eigener border-radius), und die aufgedeckten Handkarten des
       oberen Spielers waehrend der Abrechnung duerfen ueber das Feld
       hinausragen, statt abgeschnitten zu werden. */
    border-radius: var(--radius);
}
#left-column {
    grid-area: left;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-height: 0;
}
#chat-panel { grid-area: chat; }

#chat-panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 0.9em;
    align-self: start;
    /* Platz oben fuer die Spielinfo-Leiste lassen, die exakt darueber sitzt
       (position:fixed, siehe #game-info-bar) - plus ein kleiner Rest, damit
       der Chat insgesamt weiterhin etwas kuerzer als die volle Spaltenhoehe
       bleibt. */
    margin-top: calc(var(--info-bar-h) + var(--gap));
    height: calc(100% - var(--info-bar-h) - var(--gap) - 20px);
}

/* Jedes Panel links schwebt einzeln ueber dem Tisch (eigener Schatten,
   eigene Kante), statt in einem einzigen durchgehenden Kasten zu stecken. */
.floating-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.9em;
    flex-shrink: 0;
}
.floating-card h3 { margin: 0 0 0.5em; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.panel-subtitle { float: right; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-dim); font-size: 0.85em; }
#panel-evening { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

#left-spacer { flex: 1 1 auto; }

#drink-bar {
    flex-shrink: 0;
    display: flex;
    gap: 0.6em;
    justify-content: center;
    padding-bottom: 0.3em;
}

#scoreboard-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
#scoreboard-table td { padding: 0.2em 0.3em; }
#scoreboard-table td.points { text-align: right; font-variant-numeric: tabular-nums; }

#games-table-wrap { max-height: 260px; overflow: auto; }
#games-table { width: 100%; border-collapse: collapse; font-size: 0.78em; }
#games-table th, #games-table td { padding: 0.3em 0.35em; text-align: right; white-space: nowrap; }
#games-table th:first-child, #games-table td:first-child { text-align: left; }
#games-table thead th { color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--panel-border); position: sticky; top: 0; background: var(--panel-bg-solid); }
#games-table tbody tr { cursor: pointer; }
#games-table tbody tr:hover { background: rgba(255, 255, 255, 0.07); }
#games-table tbody tr.aborted { opacity: 0.5; font-style: italic; }
#games-table tfoot td { border-top: 2px solid var(--panel-border); font-weight: 700; }
#games-table td.neg { color: #ff8a80; }
#games-table td.pos { color: #a5d6a7; }
.game-type-icons { font-size: 1em; }

/* Frei schwebende Buttons ohne eigenes Panel/Karte (Abschnitt 6.2) - etwas
   kleiner als frueher und ohne umschliessenden Kasten. */
.icon-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em;
    padding: 0 0.1em;
}
.icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 0;
}
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0a140f;
    color: var(--text);
    padding: 0.35em 0.7em;
    border-radius: 6px;
    font-size: 0.76rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    z-index: 30;
}
.icon-btn:hover::after, .icon-btn:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------- */
/* Tisch                                                             */
/* ---------------------------------------------------------------- */

#table-felt {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    /* Der Tisch reicht bewusst nicht bis zum unteren Rand des Spielbereichs:
       die eigene Hand sitzt teils dahinter (siehe own-hand-Kommentar), nicht
       einfach flach davor. */
    bottom: calc(var(--card-h-hand) - 15px);
    border-radius: 50% / 38%;
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08), transparent 60%),
        radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
    border: 10px solid #3b2415;
    box-shadow: var(--shadow-float), inset 0 0 60px rgba(0, 0, 0, 0.5);
    z-index: 4;
}

/* Sitzt genau ueber dem Chat-Panel, mit derselben Breite - deshalb
   position:fixed relativ zum Viewport (statt absolute relativ zu
   #table-area) und dieselben Breiten-/Abstandsvariablen wie die
   Grid-Spalte "chat". #table-area hat kein transform/filter, daher
   durchbricht fixed hier problemlos dessen overflow:hidden. */
#game-info-bar {
    position: fixed;
    top: var(--gap);
    right: var(--gap);
    left: auto;
    width: var(--chat-w);
    min-height: var(--info-bar-h);
    box-sizing: border-box;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.6em 1em;
    font-size: 0.85em;
    line-height: 1.5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    box-shadow: var(--shadow-float);
}
#game-info-bar .bock { color: var(--accent); font-weight: 600; }

#own-turn-badge {
    position: absolute;
    left: 50%;
    bottom: calc(var(--card-h-hand) + 34px);
    transform: translateX(-50%);
    background: var(--accent);
    color: #1a1400;
    font-weight: 700;
    padding: 0.35em 1em;
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(226, 182, 77, 0.7);
    z-index: 10;
    animation: doko-pulse 1.4s ease-in-out infinite;
}
#own-turn-badge[hidden] { display: none; }
@keyframes doko-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(226, 182, 77, 0.55); }
    50% { box-shadow: 0 0 22px rgba(226, 182, 77, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
    #own-turn-badge { animation: none; }
}

/* Kurzes Text-Banner ueber dem Tisch fuer "Doppelkopf!"/"Bockrunde!"
   (Gimmick, siehe render.js renderTableBanner). */
.table-banner {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--accent);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    z-index: 12;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
}
.table-banner[hidden] { display: none; }
.table-banner.show.doppelkopf { animation: doko-banner-pop 2.2s ease-out forwards; }
.table-banner.show.bock { animation: doko-banner-pop 3.6s ease-out forwards; color: #e2b64d; }
@keyframes doko-banner-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(2deg); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    82% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .table-banner.show { animation: none; opacity: 0; }
}

/* Gewinn-/Verlustserie in der Ewigen Liste (Gimmick, siehe render.js
   computeStreak). */
.streak-badge {
    display: inline-block;
    font-size: 0.78em;
    font-weight: 700;
    margin-left: 0.3em;
    white-space: nowrap;
}
.streak-badge.streak-cold { filter: saturate(0.9); }

/* Konfettiregen bei einem besonders deutlichen Sieg in der Abrechnung
   (Gimmick, siehe ui.js spawnConfetti). */
.confetti-piece {
    position: fixed;
    top: -12px;
    width: 8px;
    height: 14px;
    z-index: 999;
    pointer-events: none;
    opacity: 0.95;
    animation-name: doko-confetti-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes doko-confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(540deg); opacity: 0.85; }
}

.seat {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    width: 130px;
    z-index: 7;
}
.seat.pos-bottom {
    bottom: calc(var(--card-h-hand) + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}
/* top:50% + translateY(-50%) wuerde den GESAMTEN Sitzblock (Bild+Name+
   Handkarten-Reihe usw.) zentrieren, nicht nur das Spielerbild - je nach
   Phase haengt unterschiedlich viel Inhalt darunter, wodurch das Bild
   selbst spuerbar aus der Mitte wandern wuerde. Stattdessen wird um genau
   die halbe Bildhoehe (--seat-avatar-size/2) verschoben: das Spielerbild
   (immer das erste Element im Sitzblock) liegt dadurch IMMER exakt auf
   50% der Tischhoehe, unabhaengig vom Rest des Inhalts. Der zusaetzliche
   Korrekturwert gleicht aus, dass oben/unten nicht symmetrisch positioniert
   sind (oben ein fester Abstand zum Rand, unten oberhalb der Handkarten). */
.seat.pos-left { left: 0.5em; top: calc(50% - var(--seat-vcenter-fix)); transform: translateY(calc(var(--seat-avatar-size) / -2)); }
.seat.pos-top { top: 2.6em; left: 50%; transform: translateX(-50%); }
.seat.pos-right { right: 0.5em; top: calc(50% - var(--seat-vcenter-fix)); transform: translateY(calc(var(--seat-avatar-size) / -2)); }

.seat-avatar {
    width: 73px;
    height: 73px;
    /* Kein overflow:hidden mehr hier - sonst wuerden Offline-/Geber-Badge
       an den Raendern abgeschnitten. Die kreisrunde Bildmaske sitzt direkt
       auf dem <img> (siehe unten). */
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.seat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; transition: filter 0.2s; }
.seat.is-turn .seat-avatar { border-color: var(--accent); box-shadow: 0 0 14px var(--accent); }
.seat.absent .seat-avatar img { filter: grayscale(100%) brightness(0.65); }

.seat .offline-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    border: 2px solid var(--felt-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.seat .offline-badge svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.seat .solo-mark {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.seat .dealer-mark {
    position: absolute;
    left: -8px;
    top: -8px;
    background: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Schweinchen-Abzeichen (unten links) und Hochzeits-Abzeichen (oben rechts,
   dieselbe Position wie .solo-mark - beide schliessen sich gegenseitig aus:
   eine Hochzeit ist immer gameType.kind==='normal', nie 'solo'). Beide
   bleiben bis zum Ende des aktuellen Spiels sichtbar (siehe render.js). */
.seat .schweinchen-badge {
    position: absolute;
    left: -8px;
    bottom: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.seat .marriage-badge {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.rings-icon { width: 1em; height: 0.67em; vertical-align: -0.08em; }
.seat .marriage-badge .rings-icon { width: 17px; height: 11px; }

/* Symbol "letzter Stich": vier verdeckte Karten, klickbar, deutlich vom
   Spielerbild abgesetzt in Richtung Tischmitte (vorne links vom Spieler
   aus gesehen). Position haengt von der Sitzposition ab, da "links zur
   Mitte" je nach Blickrichtung des Spielers eine andere Bildschirmecke ist. */
.seat .last-trick-badge {
    position: absolute;
    width: 40px;
    height: 32px;
    cursor: pointer;
}
.seat.pos-bottom .last-trick-badge { top: -6px; left: -58px; }
.seat.pos-top .last-trick-badge { bottom: -6px; right: -58px; }
.seat.pos-left .last-trick-badge { top: -6px; right: -58px; }
.seat.pos-right .last-trick-badge { bottom: -6px; left: -58px; }
.seat .last-trick-badge .stack-card {
    position: absolute;
    width: 26px;
    height: 32px;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    display: block;
}
.seat .last-trick-badge .stack-card:nth-child(1) { transform: rotate(-10deg); left: 0; }
.seat .last-trick-badge .stack-card:nth-child(2) { transform: rotate(-3deg); left: 4px; }
.seat .last-trick-badge .stack-card:nth-child(3) { transform: rotate(4deg); left: 8px; }
.seat .last-trick-badge .stack-card:nth-child(4) { transform: rotate(11deg); left: 12px; }

.seat-name { font-size: 0.85em; text-align: center; white-space: nowrap; }
.seat.is-turn .seat-name { color: var(--accent); font-weight: 700; }
.seat-party { font-size: 0.75em; color: var(--text-dim); }

.seat-announce-badges { display: flex; gap: 0.2em; flex-wrap: wrap; justify-content: center; max-width: 120px; }
.announce-badge {
    font-size: 0.65em;
    font-weight: 700;
    padding: 0.05em 0.42em;
    border-radius: 999px;
    background: var(--accent);
    color: #1a1400;
}
.announce-badge.kontra { background: var(--danger); color: #fff; }

.seat-hand-back {
    display: flex;
}
.seat-hand-back .mini-card {
    width: 39px;
    height: 58px;
    margin-left: -23px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    display: block;
}
.seat-hand-back .mini-card:first-child { margin-left: 0; }

/* Aufgedeckte Haende waehrend der Abrechnung: gross, dafuer ueberlappend
   (wie ein Kartenfaecher) - jede Karte bleibt an ihrer oben liegenden
   Ecke (Rang/Farbe) erkennbar. Fuer links/rechts eine Spalte auf der
   Seite zur Tischmitte hin (von oben nach unten ueberlappend, jeweils die
   OBERE Kartenkante bleibt sichtbar); fuer oben eine Reihe oberhalb des
   Spielerbilds (das eigene/untere Bild bekommt seine Aufdeckung direkt in
   #own-hand, siehe dort). */
.seat-hand-reveal {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
}
.seat-hand-reveal .reveal-card {
    width: var(--card-w-reveal);
    height: var(--card-h-reveal);
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
    display: block;
    margin-top: calc(var(--card-h-reveal) * -0.5);
}
.seat-hand-reveal .reveal-card:first-child { margin-top: 0; }
.seat.pos-left .seat-hand-reveal {
    flex-direction: column;
    left: 100%;
    top: calc(-70px - var(--card-h-reveal));
    margin-left: 16px;
    max-height: 720px;
}
.seat.pos-right .seat-hand-reveal {
    flex-direction: column;
    right: 100%;
    top: calc(-70px - var(--card-h-reveal));
    margin-right: 16px;
    max-height: 720px;
}
.seat.pos-top .seat-hand-reveal {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: calc(14px - var(--card-h-reveal));
    width: 480px;
    max-width: 85vw;
    justify-content: center;
}
.seat.pos-top .seat-hand-reveal .reveal-card {
    margin-top: 0;
    margin-left: calc(var(--card-w-reveal) * -0.5);
}
.seat.pos-top .seat-hand-reveal .reveal-card:first-child { margin-left: 0; }

/* Ansage-Sprechblase: 5 Sekunden am Spielerbild animiert, danach nur noch
   das dauerhafte kleine Badge (seat-announce-badges). */
.announce-bubble {
    position: absolute;
    left: 50%;
    /* Mehrere gleichzeitig faellige Sprechblasen am selben Spielerbild
       (siehe render.js/bubbleQueue) werden per --stack-index gestaffelt
       uebereinander angeordnet statt exakt uebereinanderzuliegen. */
    bottom: calc(100% + 8px + var(--stack-index, 0) * 36px);
    transform: translateX(-50%) scale(0.6);
    background: var(--accent);
    color: #1a1400;
    font-weight: 700;
    font-size: 0.85em;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: var(--shadow-float);
    z-index: 3;
    animation: doko-bubble-pop 5s ease-out forwards;
    pointer-events: none;
}
.announce-bubble.kontra { background: var(--danger); color: #fff; }
.announce-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent);
}
.announce-bubble.kontra::after { border-top-color: var(--danger); }
@keyframes doko-bubble-pop {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    12% { transform: translateX(-50%) scale(1.08); opacity: 1; }
    20% { transform: translateX(-50%) scale(1); opacity: 1; }
    85% { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .announce-bubble { animation: none; }
}

.ready-btn {
    font-size: 0.78em;
    padding: 0.3em 0.8em;
    min-height: 0;
}
.ready-check {
    font-size: 0.78em;
    color: var(--ok);
    font-weight: 700;
}

#birthday-cakes .cake { position: absolute; font-size: 1.4em; transform: translateY(-2.6em); }

.drink-glass {
    width: 48px;
    height: 64px;
    cursor: pointer;
    display: block;
}
/* Am Tisch (innerhalb .seat): freigestellt positioniert, vorne rechts vom
   jeweiligen Spieler aus gesehen, zur Tischmitte hin (spiegelbildlich zum
   last-trick-badge, siehe dort). Das Etikettenglas in der linken Leiste
   (.drink-picker-glass) bleibt bewusst im normalen Fluss. */
.seat .drink-glass { position: absolute; }
.seat.pos-bottom .drink-glass { top: -10px; right: -70px; }
.seat.pos-top .drink-glass { bottom: -10px; left: -70px; }
.seat.pos-left .drink-glass { bottom: -10px; right: -70px; }
.seat.pos-right .drink-glass { top: -10px; left: -70px; }

.drink-picker-glass {
    width: 58px;
    height: 77px;
    border-radius: 8px;
    transition: transform 0.12s;
}
.drink-picker-glass:hover { transform: translateY(-3px) scale(1.05); }
.drink-picker-glass.selected { filter: drop-shadow(0 0 6px var(--accent)); }

#trick-area {
    position: absolute;
    /* Etwas oberhalb der Tischmitte, damit der Stich bei den grossen
       Kartengroessen nicht mit dem Bild des aktuellen (unteren) Spielers
       kollidiert. */
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    z-index: 5;
}
.trick-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--card-w-trick);
    height: var(--card-h-trick);
    margin: calc(var(--card-h-trick) / -2) 0 0 calc(var(--card-w-trick) / -2);
    transition: transform 0.45s ease-out, opacity 0.3s;
}
.trick-card.at-bottom { transform: translate(-50%, 70px); }
.trick-card.at-left { transform: translate(-90px, -50%) rotate(-8deg); }
.trick-card.at-top { transform: translate(-50%, -70px) rotate(180deg); }
.trick-card.at-right { transform: translate(90px, -50%) rotate(8deg); }
.trick-card.settled.slot-0 { transform: translate(-40px, -20px) rotate(-6deg); }
.trick-card.settled.slot-1 { transform: translate(-14px, -34px) rotate(-2deg); }
.trick-card.settled.slot-2 { transform: translate(14px, -20px) rotate(3deg); }
.trick-card.settled.slot-3 { transform: translate(40px, -6px) rotate(7deg); }

/* Stich fertig ausgewertet: die vier liegenden Karten werden zum Gewinner
   hin "eingesammelt" (dieselben at-bottom/-left/-top/-right-Zielpositionen
   wie beim Einfliegen) statt einfach zu verschwinden. */
.trick-card.collecting {
    opacity: 0;
    transition: transform 0.48s ease-in, opacity 0.4s ease-in 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    .trick-card { transition: none; }
}

/* ---------------------------------------------------------------- */
/* Eigene Hand                                                       */
/* ---------------------------------------------------------------- */

#own-hand {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding-bottom: 4px;
    /* Immer vollstaendig VOR dem Tisch (hoeher als #table-felt) - eine
       fruehere Version liess die Karten teilweise hinter der Tischkante
       verschwinden, das war ein Fehler, keine Absicht. */
    z-index: 6;
}
/* Abrechnung: eigene aufgedeckte Hand nicht gefaechert, ggf. zweizeilig. */
#own-hand.reveal-mode {
    flex-wrap: wrap;
    justify-content: center;
    width: 480px;
    max-width: 92vw;
}
.hand-card {
    width: var(--card-w-hand);
    height: var(--card-h-hand);
    margin-left: calc(var(--card-w-hand) * -0.56);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.12s, opacity 0.12s;
    cursor: pointer;
    background-size: cover;
    border: 1px solid rgba(0, 0, 0, 0.3);
    position: relative;
    /* Spielbare Karten liegen immer VOR nicht-spielbaren, unabhaengig von
       der Handreihenfolge - siehe .hand-card.illegal weiter unten (behebt
       einen Renderfehler, bei dem ausgegraute Karten teilweise ueber
       validen lagen). */
    z-index: 1;
}
.hand-card:first-child { margin-left: 0; }
.hand-card:hover { transform: translateY(-10px); z-index: 3; }
.hand-card.illegal {
    cursor: default;
    filter: grayscale(90%) brightness(0.6);
    z-index: 0;
}
.hand-card.illegal:hover { transform: none; }
.hand-card.reveal-flat {
    width: var(--card-w-reveal);
    height: var(--card-h-reveal);
    margin-left: calc(var(--card-w-reveal) * -0.5);
    cursor: default;
    z-index: auto;
}
.hand-card.reveal-flat:first-child { margin-left: 0; }
.hand-card.reveal-flat:hover { transform: none; }

/* Groesse kommt bewusst von .hand-card/.trick-card (var(--card-w/h)) - hier
   nur display:block, damit width:100%/height:100% nicht mit gleicher
   Spezifitaet ueber die Kaskade die eigentliche Kartengroesse ueberschreibt. */
.card-svg { display: block; }

/* ---------------------------------------------------------------- */
/* Chat                                                               */
/* ---------------------------------------------------------------- */

#chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4em; padding: 0.25em; }
.chat-msg { font-size: 0.88em; }
.chat-msg .who { color: var(--accent-2); font-weight: 600; }
.chat-msg .when { color: var(--text-dim); font-size: 0.8em; margin-left: 0.4em; }
#chat-form { display: flex; gap: 0.4em; padding-top: 0.5em; }
#chat-input { flex: 1; padding: 0.5em; border-radius: var(--radius-sm); border: 1px solid var(--panel-border); background: rgba(255, 255, 255, 0.08); color: var(--text); }
#chat-load-more { align-self: center; margin-bottom: 0.4em; font-size: 0.85em; }

/* ---------------------------------------------------------------- */
/* Mobile / schmale Bildschirme                                      */
/* ---------------------------------------------------------------- */

.panel-toggle { display: none; }

@media (max-width: 900px) {
    #game-room {
        grid-template-columns: 1fr;
        grid-template-areas: "table";
        position: relative;
        padding: 0;
        gap: 0;
    }
    #table-area { border-radius: 0; }
    #left-column, #chat-panel {
        position: fixed;
        top: var(--gap);
        bottom: var(--gap);
        width: min(85vw, 340px);
        z-index: 50;
        transition: transform 0.2s ease;
        overflow-y: auto;
        /* Auf schmalen Bildschirmen gibt es keine feste Spielinfo-Leiste
           darueber (siehe #game-info-bar-Mobile-Override) - der Chat darf
           hier wieder die volle Drawer-Hoehe (top..bottom) nutzen. */
        margin-top: 0;
        height: auto;
    }
    #left-column { left: var(--gap); transform: translateX(calc(-100% - var(--gap))); }
    #chat-panel { right: var(--gap); transform: translateX(calc(100% + var(--gap))); }
    #left-column.open { transform: translateX(0); }
    #chat-panel.open { transform: translateX(0); }
    .panel-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0.5em;
        z-index: 60;
        border-radius: 999px;
        width: 44px;
        padding: 0;
        box-shadow: var(--shadow-float);
    }
    .panel-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
    #toggle-left { left: 0.5em; }
    #toggle-chat { right: 0.5em; }
    :root { --card-w: 48px; --card-h: 70px; --seat-avatar-size: 57px; --seat-vcenter-fix: 74px; }
    .seat { width: 96px; }
    .seat-avatar { width: 57px; height: 57px; }
    .seat .last-trick-badge, .seat .drink-glass { display: none; }
    /* Auf schmalen Bildschirmen gibt es keine Chat-Spalte, an der sich die
       Leiste ausrichten koennte - hier wieder inhaltsbreit, unterhalb des
       fest positionierten Chat-Toggle-Buttons oben rechts. */
    #game-info-bar { top: 3.4em; right: 0.5em; width: auto; max-width: 65%; height: auto; display: block; text-align: center; }
}

@media (max-width: 480px) {
    :root { --card-w: 40px; --card-h: 58px; }
}

.hidden { display: none !important; }
.badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.1em 0.6em;
    font-size: 0.78em;
    margin-left: 0.3em;
}
.settlement-table { width: 100%; border-collapse: collapse; font-size: 0.92em; margin-top: 0.5em; }
.settlement-table td, .settlement-table th { padding: 0.25em 0.4em; border-bottom: 1px solid var(--panel-border); text-align: left; }
.settlement-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

#panel-alltime { cursor: pointer; }
.all-games-date { margin: 1.2em 0 0.4em; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.all-games-date:first-child { margin-top: 0; }
.games-mini-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.games-mini-table th, .games-mini-table td { padding: 0.25em 0.4em; text-align: right; white-space: nowrap; }
.games-mini-table th:first-child, .games-mini-table td:first-child { text-align: left; }
.games-mini-table tr:first-child th { color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--panel-border); }
.games-mini-table tr.aborted { opacity: 0.5; font-style: italic; }
.games-mini-table td.neg { color: #ff8a80; }
.games-mini-table td.pos { color: #a5d6a7; }