/* ============================================================================
   KILLINFLUENCER — Komponenten
   Wiederverwendbare Bausteine: Knöpfe, Badges, Avatare, Karten, Balken,
   Feed, Tabellen, Formulare, Chips, Verlinkungen.
   ========================================================================== */

/* --------------------------------- Knöpfe --------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font-family: var(--sans); font-weight: 800; font-size: .86rem;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .7rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--kill { background: var(--kill); color: var(--on-kill); }
.btn--kill:hover { box-shadow: var(--glow-kill); color: var(--on-kill); }
.btn--love { background: var(--love); color: var(--love-contrast); }
.btn--love:hover { box-shadow: var(--glow-love); color: var(--love-contrast); }
.btn--ghost { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--muted); color: var(--text); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--block { width: 100%; }
.btn--mini { padding: .42rem .68rem; font-size: .72rem; }

/* --------------------------------- Badges --------------------------------- */
.badges { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.badges--links { margin-top: -.1rem; }

.badge {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
    padding: .18rem .5rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--muted);
}
.badge--running { border-color: var(--line-strong); color: var(--status-running); }
.badge--saved   { border-color: var(--love); color: var(--love); }
.badge--killed  { border-color: var(--kill); color: var(--kill); }
.badge--gold     { border-color: var(--gold); color: var(--gold); }
.badge--link     { border-color: rgb(var(--gold-rgb) / .5); color: var(--gold); }
.badge--link:hover { background: var(--gold); color: var(--on-gold); text-decoration: none; }

/* --------------------------------- Avatare -------------------------------- */
.avatar {
    display: grid; place-items: center; object-fit: cover;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.avatar--emoji { font-size: 1.5rem; }
.avatar--xs { width: 30px; height: 30px; font-size: .95rem; border-radius: var(--radius-sm); }
.avatar--sm { width: 42px; height: 42px; font-size: 1.25rem; }
.avatar--md { width: 56px; height: 56px; font-size: 1.7rem; }
.avatar--lg { width: 100%; aspect-ratio: 1 / 1; height: auto; font-size: 3rem; border-radius: 10px; }
.avatar--xl { width: 150px; height: 150px; font-size: 4rem; border-radius: var(--radius); }

/* ---------------------------- Verlinkungen (Links) ------------------------ */
.linkgrid { display: grid; gap: 0 var(--space-3); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.linkgrid .field { margin-bottom: .7rem; }

.linklist { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: .7rem; }
.linkchip {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--line); background: var(--panel-2);
    border-radius: var(--radius-pill);
    padding: .26rem .7rem;
    font-size: .78rem; color: var(--text);
}
.linkchip:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.linkchip__label { font-weight: 700; letter-spacing: .04em; }
.linkchip__url { color: var(--muted); font-size: .7rem; }
.linkchip:hover .linkchip__url { color: inherit; }

.linkrow { display: inline-flex; gap: var(--space-1); }
.profile-link { color: var(--muted); font-size: 1rem; white-space: nowrap; }
.profile-link:hover { color: var(--gold); }

/* ---------------------------------- Karte --------------------------------- */
.card {
    position: relative;
    display: flex; flex-direction: column; gap: .75rem;
    background: linear-gradient(180deg, var(--panel), var(--bg-soft));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem;
    overflow: hidden;
    transition: border-color .2s ease, transform .15s ease;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card::after {
    content: ""; position: absolute; top: 0; right: 0; width: 130px; height: 130px;
    background: radial-gradient(circle at 100% 0, rgb(var(--kill-rgb) / .18), transparent 70%);
    pointer-events: none;
}
.card--saved { border-color: rgb(var(--love-rgb) / .45); }
.card--saved::after { background: radial-gradient(circle at 100% 0, rgb(var(--love-rgb) / .28), transparent 70%); }
.card--killed { filter: saturate(.35); }
.card--killed::after { background: radial-gradient(circle at 100% 0, rgb(var(--kill-rgb) / .22), transparent 70%); }
.card--rank1 { border-color: var(--gold); box-shadow: 0 18px 50px -34px rgb(var(--gold-rgb) / .9); }

.card__rank {
    position: absolute; top: .5rem; right: .8rem;
    font-family: var(--mono); font-size: 2rem; font-weight: 800;
    color: transparent; -webkit-text-stroke: 1px var(--line);
    pointer-events: none;
}
.card--rank1 .card__rank { -webkit-text-stroke: 1px var(--gold); }

.card__head { display: flex; gap: var(--space-2); align-items: center; }
.card__portrait { flex: 0 0 auto; display: block; }
.card__ident { min-width: 0; }
.card__name { font-size: 1.08rem; margin: 0; text-transform: none; letter-spacing: 0; }
.card__name a { color: inherit; }
.card__name a:hover { color: var(--love); text-decoration: none; }
.card__handle { font-family: var(--mono); font-size: .76rem; color: var(--muted); }

.card__reason {
    font-size: .87rem; color: var(--text-soft); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__stats { display: flex; gap: var(--space-3); flex-wrap: wrap; font-family: var(--mono); font-size: .8rem; }
.card__stats div { display: flex; flex-direction: column; }
.card__stats span:first-child { color: var(--muted); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.card__actions { display: flex; gap: var(--space-1); margin-top: auto; }
.card__actions .btn { flex: 1; }

/* ============================== DAS URTEIL =============================== */
/* Zwei Balken, ein Ziel: KILL (rot) und LOVE (grün) sammeln beide auf
   dieselbe Summe. Wer zuerst voll ist, entscheidet das Urteil.            */

.race { display: grid; gap: .45rem; }

.race__row {
    display: grid;
    grid-template-columns: 5.4rem 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--mono);
    font-size: .76rem;
}
.race__side { font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.race__amount { color: var(--muted); white-space: nowrap; }
.race__amount strong { color: var(--text); }
.race__amount small { font-size: .68rem; }

.race__foot {
    display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
    font-family: var(--mono); font-size: .7rem; color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: var(--space-1);
}

/* ------------------------------- Fortschritt ------------------------------ */
.meter { display: flex; flex-direction: column; gap: .3rem; }
.meter__bar {
    height: 12px; border-radius: var(--radius-pill); overflow: hidden;
    background: var(--track); border: 1px solid var(--line);
}
.meter__fill {
    display: block;
    height: 100%; width: 0;
    background-image: linear-gradient(90deg, var(--kill-dark), var(--kill)),
        repeating-linear-gradient(45deg, rgb(255 255 255 / .16) 0 6px, transparent 6px 12px);
    background-blend-mode: overlay;
    animation: meter-stripes 1.1s linear infinite;
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
.meter__fill--love {
    background-image: linear-gradient(90deg, var(--love-dark), var(--love)),
        repeating-linear-gradient(45deg, rgb(6 40 15 / .18) 0 6px, transparent 6px 12px);
}
.meter__fill--full { animation: none; }
@keyframes meter-stripes { to { background-position: 24px 0, 24px 0; } }
.meter__meta {
    display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
    font-family: var(--mono); font-size: .72rem; color: var(--muted);
}

/* --------------------------------- Stempel -------------------------------- */
/* Groß und unübersehbar: FREIGEKAUFT (grün) oder HINGERICHTET (rot).
   Erscheint auf Karten, Prangerakten und in den Hallen, sobald das Urteil steht. */
.stamp {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: var(--mono); font-weight: 800;
    font-size: var(--stamp-size);
    letter-spacing: .2em; text-indent: .2em;
    padding: .3rem 1rem;
    border: 5px solid currentColor;
    border-radius: 8px;
    text-transform: uppercase;
    white-space: var(--stamp-wrap);
    overflow-wrap: var(--stamp-break);
    word-break: var(--stamp-break);
    max-width: calc(100% - 1rem);
    box-sizing: border-box;
    text-align: center;
    line-height: 1.1;
    pointer-events: none;
    background: rgb(8 8 10 / .82);
    backdrop-filter: blur(3px);
    box-shadow: 0 0 0 3px rgb(8 8 10 / .45), 0 14px 44px rgb(0 0 0 / .65);
    z-index: 3;
}
.stamp--saved  { color: var(--love); transform: translate(-50%, -50%) rotate(-12deg); text-shadow: 0 0 20px rgb(var(--love-rgb) / .65); }
.stamp--killed { color: var(--kill); transform: translate(-50%, -50%) rotate(9deg); text-shadow: 0 0 20px rgb(var(--kill-rgb) / .7); }

/* Lange Stempel-Labels (FREIGEKAUFT, HINGERICHTET) brauchen mehr Platz als
   SAVED/KILLED. Poster und Karten messen deshalb ihren eigenen Platz und
   verkleinern den Stempel entsprechend — siehe responsive.css für die
   Rückfall-Regeln ohne Container-Queries. */
@supports (container-type: inline-size) {
    .poster { container-type: inline-size; }

    .poster .stamp { --stamp-size: 1rem; letter-spacing: .1em; }
    @container (max-width: 320px) { .poster .stamp { --stamp-size: .88rem; letter-spacing: .06em; } }
    @container (max-width: 260px) {
        .poster .stamp {
            --stamp-size: .78rem; letter-spacing: .02em; text-indent: .02em;
            padding: .22rem .5rem; border-width: 3px;
        }
    }
    /* Unter 200px Innenbreite ist für den langen Stempel kein Platz mehr für
       die Drehung — gerade gestellt bleibt er einzeilig und lesbar. */
    @container (max-width: 200px) {
        .poster .stamp {
            --stamp-size: .70rem; letter-spacing: .02em; text-indent: .02em;
            padding: .2rem .45rem; border-width: 3px;
        }
        .poster .stamp--saved, .poster .stamp--killed { transform: translate(-50%, -50%); }
    }
}

/* Größere Variante für die Prangerakte */
.stamp--big {
    position: static; transform: rotate(-8deg);
    font-size: var(--stamp-size-big);
    padding: .45rem 1.2rem;
    border-width: 6px;
    letter-spacing: .22em;
    display: inline-block;
    max-width: 100%;
}
.stamp--big.stamp--killed { transform: rotate(6deg); }

/* Am Foto der Prangerakte klebend */
.stamp--onphoto { font-size: clamp(1rem, 2.6vw, 1.4rem); padding: .25rem .8rem; border-width: 4px; }

/* -------------------------------- Guthaben --------------------------------- */
.wallet { display: grid; gap: var(--space-3); }
.wallet__row { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.wallet__label {
    display: block;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.wallet__value {
    display: block;
    font-family: var(--mono); font-size: clamp(2rem, 6vw, 3rem); font-weight: 800;
    line-height: 1.1; color: var(--love);
}
.wallet__next { display: block; font-family: var(--mono); font-size: 1.1rem; font-weight: 800; }
.wallet__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wallet__stats {
    display: flex; gap: var(--space-4); flex-wrap: wrap;
    font-family: var(--mono); font-size: .84rem;
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
}
.wallet__stats div { display: flex; flex-direction: column; }
.wallet__stats span { color: var(--muted); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---------------------------------- Feed ---------------------------------- */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.feed__item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 10px;
    padding: .7rem .9rem;
}
.feed__item--kill { border-left-color: var(--kill); }
.feed__item--love { border-left-color: var(--love); }
.feed__top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.feed__who { font-weight: 700; }
.feed__amount { font-family: var(--mono); font-weight: 800; }
.feed__amount--kill { color: var(--kill); }
.feed__amount--love { color: var(--love); }
.feed__msg { color: var(--text-soft); font-size: .89rem; margin: .3rem 0 0; }
.feed__meta { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.feed__meta a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); }

/* -------------------------------- Tabellen -------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.ranking { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 820px; }
table.ranking th, table.ranking td { padding: .62rem .85rem; text-align: left; border-bottom: 1px solid var(--line); }
table.ranking thead th {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); background: var(--panel-2); position: sticky; top: 0;
}
table.ranking tbody tr:hover { background: rgb(255 255 255 / .025); }
table.ranking .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
table.ranking .v-kill { color: var(--kill); font-weight: 700; }
table.ranking .v-love { color: var(--love); font-weight: 700; }

.row-ident { display: flex; align-items: center; gap: var(--space-2); color: var(--text); }
.row-ident span { display: flex; flex-direction: column; line-height: 1.25; }
.row-ident small { font-size: .7rem; }
.row-ident:hover strong { color: var(--love); }

/* ------------------------------- Pagination ------------------------------- */
.pagination { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; margin-top: 1.6rem; }
.pagination a, .pagination span {
    font-family: var(--mono); font-size: .82rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .35rem .7rem; color: var(--text);
}
.pagination a:hover { border-color: var(--love); color: var(--love); }
.pagination .is-active { background: var(--love); border-color: var(--love); color: var(--love-contrast); font-weight: 700; }

/* -------------------------------- Formulare ------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field--grow { flex: 1 1 240px; }
.field > label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.field input[type="text"], .field input[type="number"], .field input[type="search"],
.field input[type="date"], .field input[type="file"], .field select, .field textarea {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 9px;
    padding: .6rem .72rem;
    font-family: var(--sans); font-size: .93rem; width: 100%;
}
.field input[type="file"] { padding: .5rem; font-size: .85rem; }
.field input[type="file"]::file-selector-button {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--line); border-radius: 7px;
    padding: .35rem .7rem; margin-right: .7rem; font-weight: 700; cursor: pointer;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--love); outline-offset: 1px; }
.field .hint { font-size: .76rem; color: var(--muted); }

.form-grid { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr 1fr; }
.form-grid .field--full { grid-column: 1 / -1; }

.preview { margin-top: var(--space-2); }
.preview img { max-height: 180px; border-radius: 10px; border: 1px solid var(--line); }

/* ------------------------------ Betrags-Chips ----------------------------- */
.amount-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-2); }
.chip {
    display: inline-block;
    font-family: var(--mono); font-size: .8rem; font-weight: 700;
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: .3rem .7rem; cursor: pointer;
}
.chip:hover { border-color: var(--love); color: var(--love); }
.chip.is-active { border-color: var(--love); color: var(--love); background: rgb(var(--love-rgb) / .12); }
.chip--active { border-color: var(--love); color: var(--love); }
.chip--reset { border-color: var(--line); color: var(--muted); }
.chips { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: 1.2rem; }

.honeypot { position: absolute; left: -9999px; opacity: 0; }

/* ------------------------------ Stimmen-Wahl ------------------------------ */
.vote-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: 1.1rem; }
.vote-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.vote {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    text-align: center;
    border: 2px solid var(--line); border-radius: 12px;
    padding: .8rem .6rem;
    cursor: pointer;
    background: var(--bg-soft);
    transition: all .15s ease;
}
.vote__icon { font-size: 1.8rem; line-height: 1; }
.vote__label { font-family: var(--mono); font-weight: 800; letter-spacing: .18em; font-size: .95rem; }
.vote small { color: var(--muted); font-size: .7rem; line-height: 1.3; }
.vote--kill .vote__label { color: var(--kill); }
.vote--love .vote__label { color: var(--love); }
.vote:hover { border-color: var(--muted); }
.vote-toggle input[value="kill"]:checked + .vote {
    border-color: var(--kill); background: rgb(var(--kill-rgb) / .12); box-shadow: 0 0 24px -6px rgb(var(--kill-rgb) / .7);
}
.vote-toggle input[value="love"]:checked + .vote {
    border-color: var(--love); background: rgb(var(--love-rgb) / .12); box-shadow: 0 0 24px -6px rgb(var(--love-rgb) / .7);
}

/* ------------------------------ Filter-Bausteine -------------------------- */
.filterset { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem .4rem; margin: 0 0 .9rem; }
.filterset legend {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); padding: 0 .5rem;
}
.checkgrid { display: flex; gap: var(--space-2) .9rem; flex-wrap: wrap; padding-bottom: .4rem; }
.check { display: inline-flex; align-items: center; gap: var(--space-1); font-size: .85rem; cursor: pointer; }
/* Formular-Steuerelemente nutzen das mittlere Rosé: auf dem hellen LOVE
   wäre das weiße Häkchen sonst kaum zu erkennen. */
.check input { accent-color: var(--love-dark); width: 15px; height: 15px; }
.check--kill input { accent-color: var(--kill); }
.check:hover span { color: var(--love); }
.check--kill:hover span { color: var(--kill); }

.rangewrap { display: flex; gap: var(--space-4); flex-wrap: wrap; padding-bottom: .4rem; }
.rangegroup { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.rangegroup__label { font-size: .8rem; color: var(--muted); min-width: 120px; }
.rangegroup input {
    background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
    border-radius: var(--radius-sm); padding: .45rem .6rem; font-size: .85rem; width: 110px;
}
.rangegroup input[type="date"] { width: 155px; }
.rangegroup input:focus { outline: 2px solid var(--love); outline-offset: 1px; }

/* --------------------------------- FAQ ------------------------------------ */
.faq { display: grid; gap: var(--space-2); }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary::marker { color: var(--love); }
.faq p { margin: var(--space-2) 0 0; color: var(--text-soft); }

/* ------------------------------ Admin-Bereich ----------------------------- */
.nav__admin { color: var(--gold) !important; }
.nav__admin.is-active { text-decoration: underline; text-underline-offset: 6px; }

.admin-zone {
    background: rgb(var(--kill-rgb) / .07);
    border: 1px dashed var(--kill);
    border-radius: var(--radius);
    padding: 1rem;
}
.admin-zone h3 { color: var(--kill); }

/* Tabellen im Verwaltungsbereich etwas dichter */
.ranking td form { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin: 0; }
.ranking td input[type="text"] {
    background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
    border-radius: var(--radius-sm); padding: .3rem .45rem; font-size: .8rem;
}
.ranking td input[type="text"]:focus { outline: 2px solid var(--love); outline-offset: 1px; }