/* Tischhintergrund als CSS-Nachbau von app/src/main/res/drawable/background.xml - bewusst
   theme-invariant (siehe AGENTS.md "Visuelles Design"), daher kein Dark-Mode-Gegenstück. */
/* Alle Maße hängen an diesen Variablen, damit der Tisch auch auf einem Smartphone passt.
   Die Kartenbreite richtet sich nach Breite und Höhe des Fensters: übereinander stehen Gegnerhand,
   Tischmitte und eigene Hand, zusammen knapp 3,9 Kartenbreiten, dazu Ränder, Button-Leiste und
   Zwischenräume. */
:root {
    --edge: 24px;
    --bar-h: 36px;
    /* Die eigene Hand steht immer über der Button-Leiste: mittig am unteren Rand würde sie bei
       schmalen Fenstern die Buttons überdecken, und die Leiste der Anleitung liegt ebenfalls dort. */
    --hand-bottom: calc(var(--edge) + var(--bar-h) + 12px);
    --card-w: min(130px, 21vw, calc((100vh - 2 * var(--edge) - var(--bar-h) - 36px) / 3.9));
    --card-h: calc(var(--card-w) * 1.25);
    /* Abstand der Gegnerhand vom oberen und der eigenen Hand vom unteren Rand des Tischs. */
    --opponent-top: var(--edge);
    --own-bottom: var(--hand-bottom);
}

/* Größere Fenster: Gegnerhand, Tischmitte und eigene Hand rücken zu einer Gruppe zusammen (höchstens
   eine halbe Kartenhöhe Abstand), statt an den Rändern zu kleben - der freie Platz verteilt sich
   nach oben und unten. Reicht die Höhe dafür nicht, ergeben die Formeln wieder genau die
   Randabstände von oben. Die Prozentwerte beziehen sich auf die Höhe des Tischs (die Variablen
   werden nur in top/bottom verwendet). Auf dem Smartphone bleibt die eigene Hand direkt über der
   Button-Leiste. */
@media (min-width: 601px) {
    :root {
        --row-gap: min(
            calc(var(--card-h) * 0.5),
            calc((100% - var(--edge) - var(--hand-bottom) - 3 * var(--card-h)) / 2)
        );
        --opponent-top: calc(
            (100% + var(--edge) - var(--hand-bottom)) / 2 - 1.5 * var(--card-h) - var(--row-gap)
        );
        --own-bottom: calc(
            (100% - var(--edge) + var(--hand-bottom)) / 2 - 1.5 * var(--card-h) - var(--row-gap)
        );
    }
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #123B28;
    font-family: sans-serif;
}

#table {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #2E7D4F 0%, #1F5C3D 55%, #123B28 100%);
}

.card {
    position: absolute;
    width: var(--card-w);
    /* Feste Höhe für alle Karten: die Rückseite (c00.png, 500x728) hat ein anderes
       Seitenverhältnis als die Vorderseiten (500x625) und wird auf deren Maße gebracht, damit
       verdeckte und offene Karten gleich groß sind. */
    height: var(--card-h);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.card.clickable {
    cursor: pointer;
    transition: transform 0.1s ease-out;
    /* Ziehen der Karte (makePlayable() in main.kt) statt Scrollen/Markieren. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Gezogene Karte: folgt dem Zeiger ohne Verzögerung, liegt über den anderen Handkarten und ist
   wie in der App leicht durchscheinend, damit das Ziel darunter sichtbar bleibt. */
.card.dragging {
    opacity: 0.75;
    transition: none;
    z-index: 3;
    cursor: grabbing;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}


/* Nur mit echter Maus - auf Touch-Geräten bliebe die Karte nach dem Antippen angehoben. */
@media (hover: hover) {
    .card.clickable:hover {
        transform: translateY(-12px);
    }
}

/* Tischmitte: Einsatz, Ziehstapel, Ablagestapel, Summe - senkrecht mittig im freien Raum zwischen
   Gegnerhand und eigener Hand (der wegen der Button-Leiste nicht in der Fenstermitte liegt). */
.center-row {
    position: absolute;
    /* Die Reihe ist so hoch wie eine Karte. Zentriert wird ohne transform (und ohne z-index):
       beides würde einen eigenen Stapelkontext bilden, und dann ließe sich eine einzelne Karte
       nicht mehr über die Karten der Hände heben (flyIn() in CardMotion.kt). Gilt ebenso für
       .hand. */
    top: calc((100% + var(--edge) - var(--hand-bottom)) / 2 - var(--card-h) / 2);
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pile {
    position: relative;
    flex: none;
    width: var(--card-w);
    height: var(--card-h);
}

.pile .card {
    top: 0;
    left: 0;
}

/* Aufgebrauchter Ziehstapel: nur noch ein Umriss in Kartengröße. */
.draw-pile.empty {
    box-sizing: border-box;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 6px;
}

/* Einsatz und Summe sind gleich breit, damit die beiden Stapel genau in der Mitte bleiben. */
.table-value {
    flex: none;
    width: calc(var(--card-w) * 0.9);
    color: #EAEAEA;
    font-size: 28px;
    line-height: 1.1;
}

.table-value small {
    display: block;
    font-size: 13px;
    color: #BBBBBB;
}

.table-value.stake {
    text-align: right;
}

.hand {
    position: absolute;
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
    display: flex;
}

.hand .card {
    position: relative;
    /* Die Karten liegen einzeln nebeneinander, nicht überlappend: so ist bei den eigenen jeder
       Wert lesbar (beim Kartensatz Simple steht er in der Kartenmitte) und jede Karte in voller
       Breite antippbar, und die Gegnerhand sieht genauso aus. */
    margin: 0 2px;
}

.opponent-hand {
    top: var(--opponent-top);
}

.own-hand {
    bottom: var(--own-bottom);
}

.game-over,
.double-offer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: #EAEAEA;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 20px;
    text-align: center;
    /* Ohne feste Breite stünde durch left: 50% nur die halbe Fensterbreite zur Verfügung. */
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 32px);
}

.game-over-details {
    font-size: 16px;
    color: #BBBBBB;
}

/* Kurzer Hinweis mittig über der Gegnerhand; fängt keine Klicks ab. */
.notice {
    position: absolute;
    top: calc(var(--opponent-top) + var(--card-h) / 2);
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: #EAEAEA;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 24px);
    pointer-events: none;
}

.game-over button,
.double-offer button {
    font-size: 16px;
    padding: 8px 20px;
    /* Senkrechter Abstand für schmale Fenster, auf denen die Buttons umbrechen. */
    margin: 4px 6px;
    border: none;
    border-radius: 4px;
    background: #2E7D4F;
    color: #EAEAEA;
    cursor: pointer;
}

.game-over button:hover,
.double-offer button:hover {
    background: #3A9862;
}

.double-offer button.secondary {
    background: rgba(255, 255, 255, 0.15);
}

.double-offer button.secondary:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Liegt über der eigenen Hand, lässt Klicks aber bis auf die Buttons selbst durch. */
.toolbar {
    position: absolute;
    left: var(--edge);
    right: var(--edge);
    bottom: var(--edge);
    height: var(--bar-h);
    display: flex;
    gap: 12px;
    pointer-events: none;
}

.toolbar button {
    pointer-events: auto;
    font-size: 14px;
    padding: 0 16px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #EAEAEA;
    cursor: pointer;
    white-space: nowrap;
}

.toolbar button:hover {
    background: rgba(0, 0, 0, 0.5);
}

.toolbar button:disabled {
    opacity: 0.5;
    cursor: default;
}

.toolbar .double-button {
    margin-left: auto;
    background: #2E7D4F;
}

.toolbar .double-button:hover {
    background: #3A9862;
}

/* Fläche hinter einem offenen Overlay: dunkelt den Tisch leicht ab, ein Klick darauf schließt
   das Overlay (panelBackdrop() in main.kt). Steht im DOM vor dem Overlay, liegt also darunter. */
.panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.settings-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.92);
    color: #EAEAEA;
    --panel-pad-y: 24px;
    --panel-pad-x: 32px;
    padding: var(--panel-pad-y) var(--panel-pad-x);
    border-radius: 8px;
    min-width: 240px;
    text-align: left;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.settings-panel h2 {
    margin-top: 0;
    font-size: 18px;
}

.settings-panel label {
    display: block;
    margin-bottom: 12px;
}

.settings-panel select,
.settings-panel input[type="text"] {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    padding: 4px;
}

.settings-panel input[type="text"],
.settings-panel input[type="range"] {
    box-sizing: border-box;
    width: 100%;
}

.settings-panel input[type="range"] {
    display: block;
    margin: 6px 0 0;
    accent-color: #3A9862;
}

.slider-value {
    color: #BBBBBB;
}

/* Aufklappbarer Bereich "Erweitert" der Einstellungen. */
.settings-advanced {
    margin-bottom: 12px;
}

.settings-advanced summary {
    cursor: pointer;
    color: #BBBBBB;
    margin-bottom: 12px;
}

.settings-advanced > label:last-child {
    margin-bottom: 0;
}

.about-sources {
    margin: 0 0 16px;
    padding-left: 20px;
    font-size: 14px;
    max-width: 280px;
}

.about-sources a {
    color: #8FD3A9;
}

.settings-note {
    font-size: 13px;
    color: #BBBBBB;
}

.settings-panel button {
    font-size: 14px;
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    background: #2E7D4F;
    color: #EAEAEA;
    cursor: pointer;
}

.settings-panel button:hover {
    background: #3A9862;
}

.settings-panel button + button {
    margin-left: 8px;
}

.settings-panel button.secondary {
    background: rgba(255, 255, 255, 0.15);
}

.settings-panel button.secondary:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Fußzeile eines langen Overlays (Statistik): bleibt beim Scrollen am unteren Rand stehen, damit
   "Schließen" immer erreichbar ist. Sie reicht über den Innenabstand des Overlays bis an dessen
   Ränder und ist deckend, damit der Inhalt nicht durchscheint. */
.panel-footer {
    position: sticky;
    /* Der Haftbereich endet am Inhaltsrand des Overlays, nicht an seiner Kante. */
    bottom: calc(-1 * var(--panel-pad-y));
    margin: 0 calc(-1 * var(--panel-pad-x)) calc(-1 * var(--panel-pad-y));
    padding: 12px var(--panel-pad-x) var(--panel-pad-y);
    background: #060A08;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Statistik: zwei Spalten (Diese Sitzung / Insgesamt), je Kennzahl eine Überschrift über beide
   Spalten und darunter ein Ringdiagramm pro Spalte. Die Farben entsprechen piechart_human/
   piechart_device der App (für rot-grün-farbenblinde Spieler:innen unterscheidbar gewählt). */
.statistics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 8px;
    margin: 16px 0;
}

.statistics-column {
    text-align: center;
    font-size: 15px;
}

.statistics-column small {
    display: block;
    color: #BBBBBB;
}

.statistics-metric {
    grid-column: 1 / -1;
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    color: #BBBBBB;
}

.statistics-grid button,
.statistics-grid button + button {
    justify-self: center;
    margin: 12px 0 0;
}

.donut {
    min-width: 110px;
}

.donut svg {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 6px;
}

.donut circle {
    fill: none;
    stroke-width: 20;
}

.donut-empty {
    stroke: rgba(255, 255, 255, 0.15);
}

.donut-human {
    stroke: #00A651;
}

.donut-device {
    stroke: #1976D2;
}

.donut-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 18px;
}

.donut-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.donut-dot.human {
    background: #00A651;
}

.donut-dot.device {
    background: #1976D2;
}

.donut-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spielanleitung (Intro.kt): liegt über dem ganzen Fenster und fängt alle Eingaben ab. Die
   Abdunklung ist der riesige Schatten des Spotlights - ohne hervorgehobenes Element ist es ein
   Punkt in der Fenstermitte, mit Element ein Fenster darum. */
#intro {
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    color: #FFFFFF;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s, visibility 0s 0.4s;
    touch-action: none;
    /* Reiner Anzeigetext: weder markierbar noch mit blinkender Einfügemarke nach einem Klick
       (die zeigen manche Browser auch in nicht editierbarem Text). */
    user-select: none;
    -webkit-user-select: none;
    caret-color: transparent;
    cursor: default;
}

#intro.active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s;
}

.intro-spotlight {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.78);
    transition: left 0.4s, top 0.4s, width 0.4s, height 0.4s;
}

.intro-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: max-content;
    max-width: min(calc(100vw - 32px), 420px);
    text-align: center;
    font-size: 20px;
    line-height: 1.35;
    white-space: pre-line;
    text-shadow: 0 1px 4px #000000;
    opacity: 0;
    transition: opacity 0.4s;
}

.intro-text.centered {
    top: 50%;
    transform: translate(-50%, -50%);
}

#intro button {
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: none;
    color: #FFFFFF;
    cursor: pointer;
}

body.intro-active .toolbar {
    visibility: hidden;
}

.intro-bar {
    position: absolute;
    left: var(--edge);
    right: var(--edge);
    bottom: var(--edge);
    height: var(--bar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#intro .intro-skip {
    padding: 0 8px;
    font-size: 14px;
    text-decoration: underline;
}

.intro-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.intro-nav button {
    font-size: 32px;
    line-height: 1;
}

.intro-nav button.invisible {
    visibility: hidden;
}

#intro .intro-nav button.cta {
    padding: 0 16px;
    border-radius: 4px;
    background: #2E7D4F;
    font-size: 16px;
}

.intro-dots {
    display: flex;
    gap: 8px;
}

.intro-dots.hidden {
    display: none;
}

.intro-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.intro-dot.active {
    background: #FFFFFF;
}

/* Meldungen und Overlays liegen immer über den Karten - auch über einem Stapel, den eine
   Kartenbewegung gerade angehoben hat (z-index 1, siehe flyIn() in main.kt). */
/* Über allen Karten, auch über einer gerade bewegten oder gezogenen (z-index 1 bis 3). */
.game-over,
.double-offer,
.notice,
.panel-backdrop,
.settings-panel {
    z-index: 4;
}

/* Kleine Fenster (Smartphone hochkant oder quer): engere Ränder. */
@media (max-width: 600px), (max-height: 500px) {
    :root {
        --edge: 12px;
    }
}

/* Hochkant-Smartphone: Buttons nur mit Symbol, kompaktere Overlays. */
@media (max-width: 600px) {
    .table-value {
        font-size: 24px;
    }

    .toolbar .label {
        display: none;
    }

    /* Fünf Symbol-Buttons und "×2" müssen auch auf 320 px Breite nebeneinander passen. */
    .toolbar {
        gap: 6px;
    }

    .toolbar button {
        padding: 0 10px;
    }

    .settings-panel {
        --panel-pad-y: 16px;
        --panel-pad-x: 20px;
    }
}

/* Finger statt Maus: Buttons auf eine gut treffbare Mindestgröße bringen. */
@media (pointer: coarse) {
    :root {
        --bar-h: 44px;
    }

    .toolbar button {
        min-width: 44px;
    }

    .game-over button,
    .double-offer button,
    .settings-panel button {
        min-height: 44px;
    }
}