/* Dark Theme nach Phoenix-Artwork: Nachtblau-Schwarz, Pergament-Schrift,
   Eisblau-Akzent (Phoenix) + Magenta (Nebel) als Zweitakzent */
:root {
    --bg: #0a0d14;
    --card: #131a26;
    --text: #e8e2d0;
    --muted: #93a0b4;
    --accent: #7db3d8;
    --accent-strong: #9ecbea;
    --magenta: #bf5b9e;
    --border: #263349;
    --hover: #1a2436;
    --input-bg: #0f141d;
    --good: #3fbf6f;
    --bad: #e66767;
    /* Breite der zentrierten Inhaltsspalte. Header, Navigation, Filterleiste und
       main richten sich danach, damit alles buendig bleibt. */
    --page-max: 1600px;
}

* {
    box-sizing: border-box;
}

/* Das hidden-Attribut muss staerker sein als unsere display-Regeln: eine
   ID-Regel wie "#filter-bar { display: flex }" schlaegt sonst das display:none
   des Browsers, und versteckte Elemente bleiben sichtbar. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    padding: 2.5rem 2rem 1.25rem;
    /* Header-Inhalt auf die zentrierte Inhaltsspalte ausrichten,
       Hintergrundbild bleibt vollbreit */
    padding-left: max(2rem, calc(50% - var(--page-max) / 2 + 2rem));
    padding-right: max(2rem, calc(50% - var(--page-max) / 2 + 2rem));
    position: relative;
    /* Tarot-Artwork als Hintergrund; der Verlauf haelt die Schrift lesbar.
       Fehlt das Bild, bleibt einfach der dunkle Verlauf stehen. */
    background-image:
        linear-gradient(to right,
            rgba(10, 13, 20, 0.94) 0%,
            rgba(10, 13, 20, 0.75) 45%,
            rgba(10, 13, 20, 0.35) 100%),
        url("img/hsf.png");
    background-size: cover;
    /* Erster Wert: Verlauf (egal, deckt alles), zweiter: Bild - 5% nach rechts geschoben */
    background-position: center 30%, 55% 30%;
    border-bottom: 1px solid var(--accent);
}

header h1 {
    margin: 0;
    color: var(--accent);
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.subtitle {
    color: var(--text);
    margin-top: 0.25rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

main {
    flex: 1;
    padding: 1rem 2rem 2rem;
    display: grid;
    /* minmax(0,1fr): breite Tabellen duerfen die Spalte nicht ueber --page-max
       aufblaehen - Scrollen uebernimmt .scroll-x in der Karte */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-width: var(--page-max);
    width: 100%;
    margin: 0 auto;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

.card h2 {
    margin-top: 0;
    color: var(--text);
}

.controls {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.controls label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.controls input,
#filter-bar input,
#filter-bar select,
.controls select,
.auth-form input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
}

.controls input {
    width: 10rem;
}

/* Namensfelder brauchen Platz: Kartennamen sind laenger als 10rem.
   max-width bremst das Feld auf schmalen Schirmen wieder ein */
.controls input.wide {
    width: 24rem;
    max-width: 100%;
}

.controls label.typeahead {
    max-width: 100%;
}

input:focus, select:focus {
    outline: 1px solid var(--accent);
}

button {
    background: var(--accent);
    color: #0b1018;
    border: none;
    border-radius: 6px;
    padding: 0.55rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

button:hover {
    background: var(--accent-strong);
}

button:disabled {
    opacity: 0.5;
    cursor: wait;
}

button.secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    font-weight: 400;
}

button.secondary:hover {
    background: var(--hover);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--muted);
    font-weight: 600;
}

th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable:hover,
th.sorted {
    color: var(--accent);
}

.th-tip {
    display: none;
}

th:has(.th-tip) {
    cursor: help;
}

th.sortable:has(.th-tip) {
    cursor: pointer;
}

#meta-search {
    width: 14rem;
}

.muted {
    color: var(--muted);
}

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.above {
    color: var(--good);
}

.below {
    color: var(--muted);
}

/* Vorbehalt an einer Zahl, die fuer sich genommen belastbar aussieht
   (z.B. Karten-Delta, das groesstenteils auf die Pilotenstaerke zurueckgeht) */
.warn {
    color: var(--magenta);
    cursor: help;
    font-weight: 700;
}

tr.clickable {
    cursor: pointer;
}

tr.clickable:hover td {
    background: var(--hover);
}

#tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    justify-content: center;
    max-width: var(--page-max);
    width: 100%;
    margin: 0 auto;
}

.tab {
    background: none;
    color: var(--muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 400;
}

.tab:hover {
    background: none;
    color: var(--text);
}

.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

#filter-bar {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
    padding: 0.75rem 2rem;
    max-width: var(--page-max);
    width: 100%;
    margin: 0 auto;
}

#filter-bar label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.scroll-x {
    overflow-x: auto;
}

.drill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 900px) {
    .drill-grid {
        grid-template-columns: 1fr;
    }
}

.chart-wrap {
    position: relative;
    max-width: 900px;
}

.chart-wrap svg {
    width: 100%;
    height: auto;
    display: block;
}

.axis-label {
    font-size: 11px;
    fill: #8b98ac;
}

.end-label {
    font-size: 11px;
    font-weight: 600;
}

/* Detailkarten (Drilldown, Spielerprofil, Turnier): Schliessen-Knopf oben rechts,
   damit die Ueberschrift die volle Breite behaelt */
#drill-card,
#player-card,
#tournament-detail,
#deck-detail {
    position: relative;
}

#drill-close,
#player-close,
#tournament-close,
.deck-detail-actions {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
}

.deck-detail-actions {
    display: flex;
    gap: 0.5rem;
}

/* Tischansicht einer Runde: kompakte Karten nebeneinander */
.pod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.pod {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

/* Draws sind in cEDH haeufig (rund ein Viertel der Tische) und verdienen eine eigene Markierung */
.pod-draw {
    border-color: var(--magenta);
}

.pod-head {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.pod ol {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
}

.pod li {
    margin-bottom: 0.2rem;
}

.pod li span {
    display: block;
    font-size: 0.8rem;
}

.pod-winner {
    font-weight: 700;
    color: var(--good);
}

#tournament-rounds h4 {
    margin: 1rem 0 0.5rem;
}

/* Verlaufslinie in Tabellenzeilen (Karten-Trend) */
.spark {
    width: 72px;
    height: 18px;
    display: block;
}

/* Archetypen: eine Karte je Gruppe */
.archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.archetype {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.archetype h4 {
    margin: 0 0 0.25rem;
    color: var(--accent-strong);
}

.archetype h5 {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 600;
}

.archetype p {
    margin: 0.25rem 0;
}

ul.signature {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

ul.signature span {
    display: block;
    font-size: 0.78rem;
}

/* Volltext-Decklisten (die API liefert bei vielen Eintraegen keine URL) */
details.decklist summary {
    cursor: pointer;
    color: var(--accent);
}

details.decklist pre {
    max-height: 320px;
    overflow: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
    font-size: 0.85rem;
    color: var(--text);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.3rem;
}

.tooltip,
.col-tooltip {
    background: #1b2536;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text);
    pointer-events: none;
}

.tooltip {
    position: absolute;
    max-width: 260px;
}

.col-tooltip {
    position: fixed;
    z-index: 1000;
    font-weight: 400;
    max-width: 280px;
    white-space: normal;
}

.preset-group {
    display: flex;
    gap: 0.25rem;
    align-items: end;
}

.preset {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 400;
}

.preset:hover {
    background: var(--hover);
    color: var(--accent);
    border-color: var(--accent);
}

.preset.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0b1018;
    font-weight: 600;
}

.chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--hover);
    border: 1px solid var(--magenta);
    color: var(--text);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

.chip button {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 1rem;
    padding: 0 0.1rem;
    line-height: 1;
    cursor: pointer;
}

.suggestions {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #1b2536;
    max-width: 34rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

.suggestions div {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
}

.suggestions div:hover {
    background: var(--hover);
}

.suggestions .muted {
    font-size: 0.8rem;
}

/* Typeahead: Liste haengt unter dem Feld, statt das Layout aufzuschieben */
.typeahead {
    position: relative;
}

.suggestions.ta-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    width: 100%;
    min-width: min(24rem, 100%);
    max-height: 21rem;
    overflow-y: auto;
    margin: 0.25rem 0 0;
    color: var(--text);
}

.suggestions.ta-menu div[role="option"] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.suggestions.ta-menu div[role="option"].active {
    background: var(--hover);
}

.suggestions.ta-menu .ta-hint {
    color: var(--muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.suggestions mark {
    background: none;
    color: var(--accent);
    font-weight: 600;
}

.error {
    color: var(--bad);
}

footer {
    padding: 1rem 2rem;
    color: var(--muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--border);
}

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

.auth-main {
    max-width: 26rem;
    margin: 2rem auto;
    width: 100%;
}

.auth-card {
    border-color: var(--accent);
    box-shadow: 0 0 46px rgba(191, 91, 158, 0.14);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 1rem 0;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.auth-form input {
    font-size: 1rem;
}

.auth-main a {
    color: var(--accent);
}

#user-box {
    position: absolute;
    top: 1.5rem;
    right: max(2rem, calc(50% - var(--page-max) / 2 + 2rem));
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--muted);
}

#user-box button {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

/* ---------- Meine Decks ---------- */

#deck-list tbody tr {
    cursor: pointer;
}

.deck-actions {
    white-space: nowrap;
    text-align: right;
}

.deck-actions button {
    padding: 0.2rem 0.55rem;
    font-size: 0.85rem;
}

/* Mana-Pips: helle Kartenfarben, dunkler Text; Hybride als geteilter Kreis */
.pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #1a1a1a;
    margin-left: 2px;
    vertical-align: middle;
}

.deck-grid-group h4,
.deck-text-group h4,
.deck-stack-col h4 {
    margin: 1.1rem 0 0.5rem;
    color: var(--accent);
}

/* Grid / Spoiler */
.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.deck-spoiler {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    margin-top: 0.75rem;
}

.deck-tile {
    margin: 0;
    position: relative;
}

.deck-tile img {
    width: 100%;
    display: block;
    border-radius: 4.75% / 3.5%;
    aspect-ratio: 488 / 680;
}

.deck-tile-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 488 / 680;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.85rem;
    background: var(--input-bg);
}

.deck-qty-badge {
    position: absolute;
    top: 5.5%;
    left: 5%;
    background: rgba(10, 13, 20, 0.88);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Stacked: nur die Titelzeile jeder Karte bleibt sichtbar, Hover hebt sie hervor.
   Feste Spaltenbreite 170px -> Kartenhoehe 237px, Ueberlappung laesst 34px stehen */
.deck-stacks {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
}

.deck-stack-col {
    width: 170px;
}

.deck-stack {
    display: flex;
    flex-direction: column;
}

.deck-stack .stack-card {
    position: relative;
    margin-top: -203px;
    transition: transform 0.1s ease;
}

.deck-stack .stack-card:first-child {
    margin-top: 0;
}

.deck-stack .stack-card img,
.deck-stack .stack-card .deck-tile-fallback {
    width: 100%;
    display: block;
    border-radius: 4.75% / 3.5%;
    aspect-ratio: 488 / 680;
}

.deck-stack .stack-card:hover {
    z-index: 5;
    transform: translateY(-6px) scale(1.04);
}

.deck-stack .stack-card:hover img {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65);
}

/* Textansicht: mehrspaltig, Zeile = Anzahl, Name, Kosten; Hover zeigt das Kartenbild */
.deck-text {
    columns: 3 240px;
    column-gap: 1.75rem;
}

.deck-text-group {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.deck-text-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.deck-text-group li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.14rem 0.3rem;
    border-radius: 4px;
}

.deck-text-group li:hover {
    background: var(--hover);
}

.deck-row-qty {
    color: var(--muted);
    min-width: 1.2rem;
    text-align: right;
}

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

.deck-row-cost {
    white-space: nowrap;
}

/* Schwebende Kartenvorschau (Textansicht) */
#card-preview {
    position: fixed;
    z-index: 200;
    width: 250px;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* Statistiken unter der Kartenansicht */
.deck-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .deck-stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-block h4 {
    margin: 0.8rem 0 0.4rem;
}

/* Farbverteilung als Donut: zwei Diagramme nebeneinander, darunter die Legende */
.pie-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.pie-cell {
    flex: 1 1 180px;
    min-width: 0;
}

.mana-pie {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
}

.pie-label {
    font-size: 12px;
    font-weight: 700;
    fill: #1a1a1a;
    text-anchor: middle;
    dominant-baseline: middle;
}

.pie-total {
    font-size: 22px;
    font-weight: 700;
    fill: var(--text);
    text-anchor: middle;
}

.pie-total-label {
    font-size: 10px;
    fill: var(--muted);
    text-anchor: middle;
}

/* ---------- Deck-Editieren ---------- */

/* Werkzeugleiste der Deck-Ansicht: Ansicht/Gruppierung/Sortierung links, "Karte
   hinzufuegen" rechtsbuendig - und alles scrollt mit (sticky), damit man beim
   Bauen nie hochscrollen muss. Negative Seitenraender + Padding decken die volle
   Kartenbreite ab, damit nichts unter der Leiste hervorlugt */
.deck-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--card);
    margin: 0 -1.5rem 0.75rem;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

/* Rechte Gruppe der Toolbar: "Karte vorschlagen" + Suche. Die Suche darf
   schrumpfen statt umzubrechen - so bleibt sie auch auf schmaleren Fenstern
   rechts in derselben Reihe wie die anderen Controls */
.deck-toolbar #deck-suggest-btn {
    margin-left: auto;
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.deck-toolbar .deck-add {
    flex: 1 1 12rem;
    max-width: 21rem;
    min-width: 0;
}

.deck-add .add-row {
    display: flex;
    gap: 0.4rem;
}

.deck-add input {
    flex: 1;
    width: auto;
    min-width: 0;
}

.deck-add button {
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
}

/* Editier-Buttons (+/-/Pfeil): Overlay auf Kartenbildern, erst beim Hover sichtbar */
.deck-tile,
.stack-card,
.deck-text-group li {
    cursor: pointer;
}

.card-actions {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    display: none;
    gap: 4px;
    z-index: 6;
}

.deck-tile:hover .card-actions,
.stack-card:hover .card-actions {
    display: flex;
}

.card-actions button {
    width: 27px;
    height: 27px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(10, 13, 20, 0.92);
    color: var(--text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.card-actions button:hover {
    background: var(--hover);
    border-color: var(--accent);
}

/* Textansicht: Buttons klein und in der Zeile, Platz bleibt reserviert */
.deck-text-group li .card-actions {
    position: static;
    transform: none;
    display: flex;
    visibility: hidden;
}

.deck-text-group li:hover .card-actions {
    visibility: visible;
}

.deck-text-group li .card-actions button {
    width: 20px;
    height: 20px;
    font-size: 12px;
    border-radius: 4px;
}

/* Sideboard: eigene Gruppe ganz unten, optisch abgesetzt */
#deck-cards h4.sideboard-h {
    color: var(--magenta);
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
    margin-top: 1.75rem;
}

/* Karten- und Vorschlags-Dialog laufen beide Full Screen: Kartenbilder, Printing-Raster
   und die zwei Ranglisten brauchen den Platz. Browser geben Dialogen ein default-max von
   ~100%-2em - deshalb max-width/-height explizit uebersteuern. Der Inhalt bleibt auf
   Lesebreite zentriert, damit auf grossen Schirmen nichts zerlaeuft. */
#card-dialog,
#suggest-dialog {
    background: var(--card);
    color: var(--text);
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 1.25rem 2rem;
    overflow-y: auto;
}

#card-dialog::backdrop,
#suggest-dialog::backdrop {
    background: rgba(4, 6, 10, 0.72);
}

#card-dialog > *,
#suggest-dialog > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Regeltext bleibt auf Lesebreite, auch wenn der Dialog 1400px breit ist */
.cd-card-grid {
    max-width: 900px;
}

#suggest-dialog h4 {
    margin: 0 0 0.3rem;
    color: var(--accent);
}

.sg-table {
    font-size: 0.9rem;
}

.sg-table th,
.sg-table td {
    padding: 0.35rem 0.5rem;
}

button.sg-add {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 0.1rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

button.sg-add:hover {
    background: var(--hover);
}

button.sg-add:disabled {
    color: var(--good);
    border-color: var(--good);
    opacity: 1;
    cursor: default;
}

.cd-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cd-head h3 {
    margin: 0;
}

.cd-head button {
    padding: 0.25rem 0.6rem;
}

.cd-tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0.75rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.cd-tab {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
}

.cd-tab.active {
    color: var(--text);
    border-color: var(--accent);
    background: var(--hover);
}

.cd-card-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .cd-card-grid {
        grid-template-columns: 1fr;
    }
}

.cd-img {
    width: 100%;
    border-radius: 12px;
}

.cd-line {
    margin: 0.25rem 0;
}

.cd-oracle {
    margin: 0.6rem 0;
    line-height: 1.5;
}

.cd-flavor {
    font-style: italic;
    color: var(--muted);
}

.cd-foot {
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
}

tr.cd-printing {
    cursor: pointer;
}

tr.cd-printing.current td {
    color: var(--accent-strong);
    font-weight: 600;
}

/* Toasts: kurze Rueckmeldungen rechts unten (gruen = ok, rot = Fehler) */
#toast-box {
    position: fixed;
    right: 1.25rem;
    /* ueber der "Nach oben"-Bubble, damit sich beide nicht ueberlagern */
    bottom: 4.75rem;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    background: var(--good);
    color: #0b1018;
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    max-width: 22rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
    opacity: 1;
    transform: none;
}

.toast.error {
    background: var(--bad);
}

/* ---------- Printings: Grid (default) und Liste ---------- */

.cd-printings-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.cd-printings-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

/* Der gewaehlte Druck ist in beiden Ansichten markiert */
figure.cd-printing img {
    border: 2px solid transparent;
}

figure.cd-printing.current img {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 3px rgba(126, 179, 216, 0.35);
}

/* ---------- Deck-Editor als eigene Seite ---------- */

/* Mit geoeffnetem Deck fuellt der Editor die Seite (Header und Navigation bleiben);
   randlos, damit die Kartenraster den Platz bekommen */
#deck-detail:not([hidden]) {
    min-height: calc(100vh - 12rem);
}

/* ---------- Overflow-Fix fuer zweispaltige Bereiche ---------- */

/* Grid-Spalten sind per Default min-width:auto und wachsen mit ihrem Inhalt -
   eine breite Tabelle (z.B. "Auf dem Rueckzug") schiebt die Spalte dann aus der
   Karte heraus, statt dass .scroll-x scrollt. minmax(0,1fr) deckelt das. */
.drill-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
    .drill-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dialog-Tab "Performance": Kennzahlen als Label/Wert-Zeilen */
.perf-stats {
    margin-bottom: 1rem;
}

.perf-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
}

.perf-label {
    color: var(--muted);
    font-size: 0.9rem;
}

.perf-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Die eigene Deck-Zeile in der Feld-Tabelle hervorheben */
tr.perf-own td {
    background: var(--hover);
    font-weight: 600;
}

#cd-pane-performance h4 {
    margin: 0 0 0.5rem;
    color: var(--accent);
}

/* Dialog-Kopf: Blaettern und Schliessen rechts */
.cd-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Feste quadratische Box: die Glyphen (‹ › ✕) sind unterschiedlich breit,
   ueber die Content-Breite wuerden die Buttons sonst verschieden gross */
.cd-nav button {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.25rem;
}

/* Das Kreuz traegt bei gleicher Groesse optisch mehr Flaeche als die Winkel */
#cd-close {
    font-size: 0.95rem;
}

.cd-nav button:disabled {
    cursor: default;
}

#cd-position {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: center;
}

/* Kleiner Dialog: neues Deck anlegen (die anderen Dialoge laufen Full Screen) */
#new-deck-dialog {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem 1.25rem;
    width: min(460px, 92vw);
}

#new-deck-dialog::backdrop {
    background: rgba(4, 6, 10, 0.72);
}

#new-deck-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

#new-deck-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--muted);
}

#new-deck-form input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 1rem;
}

.nd-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

/* ---------- Burger-Menue in der Kopfzeile ---------- */

.user-menu-wrap {
    position: relative;
}

/* Burger und "Abmelden" muessen gleich hoch sein: der Nachbar-Button waechst aus
   seinem Padding (~28px), eine feste Quadratgroesse stand daher oben und unten
   ueber. Deshalb bekommen beide dieselbe Hoehe, der Burger dazu die passende
   Breite. Die doppelte ID schlaegt "#user-box button" bei der Spezifitaet. */
#user-box button {
    height: 1.9rem;
}

#user-box #user-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    padding: 0;
}

/* Drei Striche aus einem Element: Mitte als Hintergrund, aussen per Pseudoelement */
.burger,
.burger::before,
.burger::after {
    display: block;
    width: 15px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.burger {
    position: relative;
}

.burger::before,
.burger::after {
    content: "";
    position: absolute;
    left: 0;
}

.burger::before {
    top: -5px;
}

.burger::after {
    top: 5px;
}

#user-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 60;
    min-width: 11rem;
    background: #1b2536;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

#user-menu a {
    display: block;
    padding: 0.55rem 0.9rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}

#user-menu a:hover {
    background: var(--hover);
    color: var(--accent);
}

/* ---------- Admin-Bereich ---------- */

/* Der Link "Zur App" sitzt in der Tab-Leiste, sieht aber wie ein Tab aus */
.tab-link {
    align-self: center;
    padding: 0.6rem 0.9rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
}

.tab-link:hover {
    color: var(--accent);
}

/* Kennzahlen des Datenbestands */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

.stat-card-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.stat-card-value {
    font-size: 1.35rem;
    font-weight: 600;
}

.stat-card-hint {
    color: var(--muted);
    font-size: 0.8rem;
}

.role-badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
}

.role-badge.role-admin {
    border-color: var(--accent);
    color: var(--accent);
}

#new-user-dialog,
#edit-user-dialog {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem 1.25rem;
    width: min(420px, 92vw);
}

#new-user-dialog::backdrop,
#edit-user-dialog::backdrop {
    background: rgba(4, 6, 10, 0.72);
}

#new-user-form,
#edit-user-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

#new-user-form label,
#edit-user-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--muted);
}

#new-user-form input,
#new-user-form select,
#edit-user-form input,
#edit-user-form select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 1rem;
}

/* Deck-Titel direkt editierbar: nur Hover/Fokus zeigen, dass hier etwas geht */
#deck-title[contenteditable] {
    cursor: text;
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    margin-left: -0.4rem;
    /* Platz fuer die Buttons oben rechts, damit lange Namen nicht darunter laufen */
    max-width: calc(100% - 16rem);
    outline: 1px solid transparent;
}

#deck-title[contenteditable]:hover {
    background: var(--hover);
}

#deck-title[contenteditable]:focus {
    background: var(--input-bg);
    outline-color: var(--accent);
}

/* Schaltflaeche, die wie ein Link aussieht (Deckliste in den Standings) */
button.linklike {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

button.linklike:hover {
    background: none;
    color: var(--accent-strong);
}

/* Originaltext einer Deckliste ohne strukturierte Karten */
.decklist-raw {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
}


/* ---------- Home / Dashboard ---------- */

/* Erst eine volle Breite fuer den Trend, darunter drei gleich breite Widgets */
/* Vier Widgets unter dem Trend: 2x2 statt 3+1, sonst haengt das vierte allein in Reihe zwei */
.dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.widget-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .dashboard {
        grid-template-columns: minmax(0, 1fr);
    }
}

.widget {
    display: flex;
    flex-direction: column;
}

.widget h3 {
    margin: 0 0 0.25rem;
    color: var(--accent);
}

.widget > p.muted {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
}

/* Der Trend nutzt im Dashboard die volle Kartenbreite */
.widget-wide .chart-wrap {
    max-width: none;
}

.widget-table {
    font-size: 0.9rem;
}

.widget-table th,
.widget-table td {
    padding: 0.35rem 0.4rem;
}

.widget-table td .muted {
    display: block;
    font-size: 0.8rem;
}

.widget-table .nowrap {
    white-space: nowrap;
}

/* Platzziffer vor dem Commander-Namen */
.rank {
    display: inline-block;
    min-width: 1.4rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Kopfzeile jedes Widgets: Titel links, Sprung in den ausfuehrlichen Tab rechts */
.widget-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.widget-head h3 {
    margin: 0;
}

.widget-more {
    flex-shrink: 0;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 400;
}

.widget-more:hover {
    background: none;
    color: var(--accent-strong);
    text-decoration: underline;
}

/* Spiele nach Region: Donut links, Legende als Tabelle rechts (Werte stehen im Text, nicht nur in der Farbe) */
.region-pie {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.region-pie .mana-pie {
    flex: 0 0 180px;
    max-width: 180px;
}

.region-legend {
    flex: 1 1 240px;
    min-width: 0;
}

.region-legend .swatch {
    margin-right: 0.5rem;
}

.region-legend tr.hl td {
    background: var(--hover);
    font-weight: 600;
}

/* Hervorgehobener Ausschnitt (gewaehlte Region): heller Rand in Textfarbe */
.pie-slice-hl {
    stroke: var(--text);
    stroke-width: 2.5;
}

/* Der Meta-Trend nutzt die volle Kartenbreite; die uebrigen Diagramme
   (Formkurve, Mana-Curve) bleiben auf ihrer Lesebreite */
#trend-chart {
    max-width: none;
}

/* "Nach oben"-Bubble: fixiert rechts unten, erscheint erst beim Scrollen */
#scroll-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 90;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--accent);
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}

#scroll-top:hover {
    background: var(--hover);
    border-color: var(--accent);
    color: var(--accent-strong);
}

/* Die Formkurve im Spielerprofil nutzt ebenfalls die volle Kartenbreite */
#player-form {
    max-width: none;
}

/* Zellen-Links (Turnier-Standings): nur Name und Deck fuehren weiter,
   nicht mehr die ganze Zeile */
td.link-cell {
    cursor: pointer;
    color: var(--accent);
}

td.link-cell:hover {
    background: var(--hover);
    color: var(--accent-strong);
    text-decoration: underline;
}

/* ---------- Deck-Suche ---------- */

/* Kennzahlen der Trefferauswertung nebeneinander */
.ds-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.ds-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ds-stat .perf-value {
    text-align: left;
    font-size: 1.1rem;
}

.ds-stat .perf-value .muted {
    display: block;
    font-size: 0.8rem;
}

/* ---------- Auswahlleiste am unteren Rand ---------- */

#compare-bar {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(60rem, 92vw);
    padding: 0.6rem 1rem;
    background: var(--card);
    border: 1px solid var(--accent);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
}

.cmp-bar-title {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.cmp-bar-slot {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-width: 20rem;
}

.cmp-bar-slot.empty {
    color: var(--muted);
    border-style: dashed;
}

.cmp-bar-slot strong,
.cmp-bar-slot .muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmp-bar-slot button {
    background: none;
    border: none;
    color: var(--muted);
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.cmp-bar-slot button:hover {
    background: none;
    color: var(--bad);
}

#cmp-bar-go {
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
}

/* ---------- Deck-Vergleich ---------- */

.cmp-pickers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 1000px) {
    .cmp-pickers,
    .cmp-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.cmp-picker {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.cmp-picker-label {
    color: var(--accent);
    font-weight: 600;
}

.cmp-picker-add {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.cmp-picker-add select,
.cmp-picker-add input {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--text);
    font-size: 0.85rem;
    max-width: 12rem;
}

.cmp-picker-add button {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

.cmp-diff-toggle {
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem !important;
}

.cmp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.cmp-side h3 {
    margin: 0 0 0.25rem;
    color: var(--accent);
}

.cmp-side h3 .muted {
    font-size: 0.85rem;
    font-weight: 400;
}

/* Karten, die die jeweils andere Liste nicht spielt */
.cmp-only-a {
    color: var(--accent-strong);
}

.cmp-only-b {
    color: var(--magenta);
}

/* Unterschiedliche Karten: kraeftiger Rahmen plus farbiges Overlay auf dem Bild */
figure.deck-tile.cmp-only-a img,
.stack-card.cmp-only-a img {
    outline: 3px solid var(--accent-strong);
    outline-offset: -3px;
}

figure.deck-tile.cmp-only-b img,
.stack-card.cmp-only-b img {
    outline: 3px solid var(--magenta);
    outline-offset: -3px;
}

figure.deck-tile.cmp-only-a::after,
.stack-card.cmp-only-a::after,
figure.deck-tile.cmp-only-b::after,
.stack-card.cmp-only-b::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4.75% / 3.5%;
    pointer-events: none;
}

figure.deck-tile.cmp-only-a::after,
.stack-card.cmp-only-a::after {
    background: rgba(126, 179, 216, 0.22);
}

figure.deck-tile.cmp-only-b::after,
.stack-card.cmp-only-b::after {
    background: rgba(191, 91, 158, 0.24);
}

/* Abschnitt "Nicht in der anderen Liste" unter den Kategorien */
.cmp-diff-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.cmp-diff-section h4 {
    margin: 0 0 0.6rem;
}

.cmp-diff-section.side-a h4 {
    color: var(--accent-strong);
}

.cmp-diff-section.side-b h4 {
    color: var(--magenta);
}

li.cmp-only-a .deck-row-name {
    color: var(--accent-strong);
    font-weight: 600;
}

li.cmp-only-b .deck-row-name {
    color: var(--magenta);
    font-weight: 600;
}

/* Im Vergleich sind die Raster schmaler - kleinere Kacheln */
.cmp-side .deck-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

/* Die Checkbox erbt sonst die 10rem-Breite der .controls-Inputs */
.cmp-diff-toggle input {
    width: auto;
}

/* Platz am Seitenende, damit die fixe Vergleichsleiste nichts verdeckt */
main:has(#pane-decksearch:not([hidden])),
main:has(#pane-compare:not([hidden])) {
    padding-bottom: 6rem;
}

/* Underperformer-Zeilen: zwei kompakte Aktionen nebeneinander */
.sg-cut-actions {
    white-space: nowrap;
}

.sg-cut-actions .sg-add + .sg-add {
    margin-left: 0.3rem;
}

/* Der zweite Toolbar-Button teilt sich den Platz mit "Karte vorschlagen" */
.deck-toolbar #deck-cut-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    white-space: nowrap;
}