/* Tipp und Analyse (JAS-9). Hervorhebungen nie nur über Farbe: Rahmen, Stern und das Wort „empfohlen“. */

.table-hint-button {
    margin-inline-start: auto;
}

.table-hint-button[disabled] {
    opacity: 0.55;
}

.game-table__hint {
    display: flex;
    justify-content: center;
    padding-inline: var(--space-2);
}

.hint-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    max-width: 40rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    color: var(--color-text);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
}

.hint-panel__title {
    margin: 0;
    font-size: var(--font-size-base);
}

.hint-panel__text,
.hint-panel__busy {
    flex: 1 1 16rem;
    margin: 0;
}

.hint-panel__spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-inline-end: var(--space-2);
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: hint-spin 0.9s linear infinite;
    vertical-align: -0.1em;
}

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

@media (prefers-reduced-motion: reduce) {
    .hint-panel__spinner { animation: none; }
}

.playing-card--recommended .playing-card__face {
    stroke: var(--color-accent);
    stroke-width: 3;
}

.playing-card--also-good .playing-card__face {
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-dasharray: 4 3;
}

.playing-card__mark {
    fill: var(--color-accent);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

/* Kartenbild (JAS-16): Rahmen als Outline um den Wrapper, Stern als Abzeichen auf hellem Grund im linken Streifen unter dem Index.
   In der Fächerhand deckt die rechte Nachbarkarte die rechte Hälfte zu (margin-left −50 %, table.css); links bleibt der Stern sichtbar.
   Die Grösse folgt der Handkarte, damit er auch auf schmalen Phones (2,4rem) ganz im sichtbaren Streifen liegt. */
.playing-card--image.playing-card--recommended {
    outline: 3px solid var(--color-accent);
    outline-offset: 1px;
}

.playing-card--image.playing-card--also-good {
    outline: 2px dashed var(--color-accent);
    outline-offset: 1px;
}

.playing-card--image .playing-card__mark {
    position: absolute;
    top: 24%;
    left: 4%;
    padding: 0 0.15em;
    font-size: min(14px, calc(var(--hand-card-w, 4rem) * 0.28));
    border-radius: var(--radius-s);
    background: var(--color-card-face);
    color: var(--color-accent);
    line-height: 1.1;
}

.sheet-option--recommended {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.sheet-option__mark {
    color: var(--color-accent);
}

/* Auf primären Knöpfen (z. B. „Weisen“) ist der Hintergrund schon die Akzentfarbe: Stern in der Textfarbe des Knopfs, damit er sichtbar bleibt. */
.button--primary .sheet-option__mark {
    color: currentColor;
}

/* .app-content erbt overflow-wrap: anywhere; in der Analyse bricht nie ein Wort mitten im Wort um, nur an Leerzeichen. */
.analysis {
    margin-block: var(--space-3);
    overflow-wrap: normal;
}

.analysis__title {
    font-size: var(--font-size-base);
}

/* Sechs Spalten brauchen mehr Platz als das Rundenresultat allein (32rem). */
.dialog--analysis {
    width: min(100%, 48rem);
}

.analysis__table {
    width: 100%;
}

.analysis__card {
    white-space: nowrap;
}

.analysis__row--mistake th,
.analysis__row--mistake td[data-col="grade"] {
    font-weight: var(--font-weight-bold);
}

.analysis__unforced {
    display: block;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* Phone: Sechs Spalten passen nicht in die Breite. Jede Zeile wird eine Karte, jeder Wert steht mit seiner Beschriftung (data-label) auf einer
   eigenen Zeile, der Knopf „Ab hier neu spielen“ in voller Breite. Die Kopfzeile bleibt für Screenreader erhalten. */
@media (max-width: 600px) {
    .analysis__table,
    .analysis__table tbody,
    .analysis__table tr,
    .analysis__table th,
    .analysis__table td {
        display: block;
    }

    .analysis__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .analysis__table tr {
        margin-block-end: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-m);
    }

    .analysis__table th,
    .analysis__table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0;
        border-bottom: 0;
        text-align: right;
    }

    .analysis__table th::before,
    .analysis__table td::before {
        content: attr(data-label);
        flex: none;
        color: var(--color-text-muted);
        font-weight: normal;
        text-align: left;
    }

    .analysis__table td[data-col="grade"] {
        flex-wrap: wrap;
    }

    .analysis__table td[data-col="actions"]::before {
        content: none;
    }

    .analysis__table td[data-col="actions"] .button {
        width: 100%;
        white-space: nowrap;
    }
}