/* =========================================================================
   SpencerNet — "Modern Sports Dark" Theme
   Foundation stylesheet: design tokens, layout, nav, cards, tables, KPIs.
   ========================================================================= */

:root {
    /* Surfaces (deep sport-night) */
    --bg:          #0b0e13;
    --bg-elev:     #121722;
    --surface:     #161d29;
    --surface-2:   #1d2634;
    --border:      #263141;
    --border-soft: #1c2431;

    /* Text */
    --text:   #e8edf4;
    --muted:  #93a1b3;
    --faint:  #667585;

    /* Brand — SpencerNet heritage yellow */
    --accent:      #ffd21e;
    --accent-2:    #ffb300;
    --accent-ink:  #1a1400;
    --accent-glow: rgba(255, 210, 30, .18);

    /* States */
    --ok:   #34d399;
    --bad:  #f87171;
    --warn: #fbbf24;
    --info: #60a5fa;

    --radius:    14px;
    --radius-sm: 9px;
    --shadow:    0 10px 30px rgba(0, 0, 0, .35);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .25);

    --font: -apple-system, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
    --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--text);
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(255, 210, 30, .06), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(96, 165, 250, .05), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 1rem; color: var(--muted); }

/* ---- Top bar / nav ------------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.5rem;
    background: linear-gradient(180deg, rgba(22, 29, 41, .92), rgba(18, 23, 34, .82));
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-ink);
    font-size: 1.1rem;
    box-shadow: 0 0 0 1px rgba(255, 210, 30, .3), 0 6px 18px var(--accent-glow);
}
.brand-name { font-size: 1.05rem; }
.brand-name b { color: var(--accent); }

.mainnav { display: flex; gap: .25rem; flex-wrap: wrap; }
.mainnav a {
    color: var(--muted);
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mainnav a:hover { background: var(--surface-2); color: var(--text); }
.mainnav a.active { background: var(--accent-glow); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,210,30,.25); }

/* ---- Layout -------------------------------------------------------------- */
.container { max-width: 1080px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.page-head { margin-bottom: 1.5rem; }
.page-head .eyebrow {
    text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
    color: var(--accent); font-weight: 700; margin-bottom: .35rem;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    padding: 1.6rem 1.8rem;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 210, 30, .10), transparent 45%),
        var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute; right: -40px; top: -40px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
}
.hero h1 { position: relative; }
.hero .lead { max-width: 60ch; }

/* ---- Cards & grid -------------------------------------------------------- */
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.card h2 { font-size: 1.05rem; }
.card-sub { font-size: .85rem; color: var(--faint); margin-top: -.2rem; }

/* ---- KPI tiles ----------------------------------------------------------- */
.kpi {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
}
.kpi .kpi-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.kpi .kpi-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin-top: .2rem; }
.kpi .kpi-value.accent { color: var(--accent); }

/* ---- Check list ---------------------------------------------------------- */
.checklist { display: flex; flex-direction: column; gap: .1rem; }
.check {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .2rem;
    border-bottom: 1px solid var(--border-soft);
}
.check:last-child { border-bottom: 0; }
.check .check-label { width: 160px; color: var(--muted); font-size: .9rem; flex: none; }
.check .check-value { font-family: var(--mono); font-size: .88rem; color: var(--text); word-break: break-word; }
.check .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.ok  { background: var(--ok);  box-shadow: 0 0 8px rgba(52, 211, 153, .6); }
.dot.bad { background: var(--bad); box-shadow: 0 0 8px rgba(248, 113, 113, .6); }

/* ---- Badges & pills ------------------------------------------------------ */
.badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .28rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    border: 1px solid var(--border);
}
.badge.ok   { color: var(--ok);   background: rgba(52, 211, 153, .1);  border-color: rgba(52, 211, 153, .3); }
.badge.bad  { color: var(--bad);  background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .3); }
.badge.warn { color: var(--warn); background: rgba(251, 191, 36, .1);  border-color: rgba(251, 191, 36, .3); }

/* ---- Tables -------------------------------------------------------------- */
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th {
    text-align: left; color: var(--muted); font-weight: 600;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .6rem .8rem; border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
table.data td { padding: .5rem .8rem; border-bottom: 1px solid var(--border-soft); }
table.data tr:hover td { background: rgba(255, 255, 255, .03); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.1rem; border-radius: 10px;
    font-weight: 700; font-size: .95rem; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
    transition: transform .05s, background .15s;
}
.btn:hover { text-decoration: none; background: var(--border); }
.btn:active { transform: translateY(1px); }
.btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-ink); border-color: transparent;
    box-shadow: 0 6px 18px var(--accent-glow);
}
.btn.primary:hover { filter: brightness(1.05); }

/* ---- Footer -------------------------------------------------------------- */
.footer {
    border-top: 1px solid var(--border);
    color: var(--faint); font-size: .82rem;
    padding: 1.5rem; text-align: center;
}
.footer .mono { font-family: var(--mono); }

/* ---- Utilities ----------------------------------------------------------- */
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.stack > * + * { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.callout {
    border-left: 3px solid var(--accent);
    background: var(--surface);
    padding: .9rem 1.1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--muted); font-size: .9rem;
}
.callout.bad { border-color: var(--bad); }
code.inline { font-family: var(--mono); background: var(--bg-elev); padding: .1rem .4rem; border-radius: 6px; font-size: .85em; }

/* ---- Top bar: user menu -------------------------------------------------- */
a.brand { text-decoration: none; color: var(--text); }
.usermenu { display: flex; align-items: center; gap: .6rem; }
.user-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .8rem .3rem .35rem; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none;
}
.user-chip:hover { text-decoration: none; border-color: var(--accent); }
.logout { color: var(--muted); font-size: 1.2rem; text-decoration: none; padding: .2rem .4rem; }
.logout:hover { color: var(--bad); text-decoration: none; }
.pill {
    padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
    text-decoration: none; border: 1px solid var(--border);
}
.pill-admin { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
.pill-admin:hover { text-decoration: none; filter: brightness(1.05); }
/* Akzent-Pille "Du" (eigene Zeile markieren) — kompakt wie im Prototyp. */
.pill.pill-me { padding: 1px 8px; font-size: .68rem; color: var(--accent); border-color: rgba(255, 210, 30, .4); }

/* ---- Wartungs-Banner (nur Admins bei aktivem Wartungsmodus) --------------- */
.maint-banner {
    padding: .5rem 1.5rem; font-size: .85rem; font-weight: 600;
    background: rgba(251, 191, 36, .12); border-bottom: 1px solid rgba(251, 191, 36, .35);
    color: var(--warn);
}
.maint-banner a { color: var(--warn); text-decoration: underline; }

/* ---- Narrow container (login/maintenance) -------------------------------- */
.container-narrow { max-width: 440px; margin: 0 auto; padding: 3rem 1.5rem; }

/* ---- Login / centered cards ---------------------------------------------- */
.login-wrap { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.login-card {
    width: 100%; max-width: 380px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2rem 1.8rem; box-shadow: var(--shadow);
}
.login-card.center { text-align: center; }
.login-brand { text-align: center; margin-bottom: 1.4rem; }
.login-brand h1 { font-size: 1.8rem; margin: .5rem 0 .1rem; }
.brand-mark.big { width: 60px; height: 60px; font-size: 2rem; border-radius: 16px; margin: 0 auto; }
.login-foot { font-size: .82rem; }

/* ---- Form controls ------------------------------------------------------- */
.field { display: block; }
.field > span { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .35rem; font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input:not([type]), select, textarea {
    width: 100%; padding: .6rem .75rem;
    background: var(--bg-elev); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
select { appearance: none; cursor: pointer; }
label { color: var(--text); }
.btn-block { width: 100%; justify-content: center; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 160px; }

/* ---- Alerts / flash ------------------------------------------------------ */
.flashes { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.2rem; }
.alert {
    padding: .75rem 1rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); font-size: .92rem; font-weight: 500;
}
.alert-success { color: var(--ok);   background: rgba(52, 211, 153, .1);  border-color: rgba(52, 211, 153, .3); }
.alert-error   { color: var(--bad);  background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .3); }
.alert-warn    { color: var(--warn); background: rgba(251, 191, 36, .1);  border-color: rgba(251, 191, 36, .3); }
.alert-info    { color: var(--info); background: rgba(96, 165, 250, .1);  border-color: rgba(96, 165, 250, .3); }

/* ---- Hero actions -------------------------------------------------------- */
.hero-actions { display: flex; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* ---- Podium -------------------------------------------------------------- */
.podium { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.podium-row {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem .8rem; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border);
}
.podium-pos {
    display: grid; place-items: center; width: 28px; height: 28px; flex: none;
    border-radius: 50%; font-weight: 800; font-size: .85rem;
    background: var(--border); color: var(--text);
}
.rank-1 .podium-pos { background: linear-gradient(135deg, #ffd21e, #ffb300); color: #1a1400; }
.rank-2 .podium-pos { background: linear-gradient(135deg, #d6dde5, #9aa7b4); color: #1a1d22; }
.rank-3 .podium-pos { background: linear-gradient(135deg, #e6a76b, #c97f3f); color: #1a1400; }
.podium-name { font-weight: 600; flex: 1; }
.podium-pts { font-family: var(--mono); color: var(--accent); font-weight: 700; }

/* ---- Quicklinks ---------------------------------------------------------- */
.quicklinks { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .8rem; }
.quicklink {
    display: block; padding: .7rem .9rem; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 500;
    transition: border-color .15s, transform .05s;
}
.quicklink:hover { text-decoration: none; border-color: var(--accent); }

/* ---- Tabs (Sub-Navigation innerhalb eines Bereichs) ---------------------- */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.tabs a {
    padding: .55rem .9rem; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Table helpers ------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.table-wrap table.data { min-width: 100%; }
.table-wrap table.data th { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .82rem; }
/* Primärwerte (Punkte/Rang) etwas größer wie im Prototyp (.88rem). */
table.data td.num-lg { font-size: .88rem; }
table.data tr.me td { background: var(--accent-glow); }
.rank-cell { font-weight: 800; color: var(--accent); font-family: var(--mono); white-space: nowrap; font-size: .88rem; }
/* Glücksblatt in der Platz-Zelle: schlichtes Emoji auf der Zahlen-Baseline, kein Pill. */
.rank-cell .luck { font-weight: 400; font-size: .9em; cursor: help; }

/* ---- Empty state --------------------------------------------------------- */
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }

/* ---- Section heading ----------------------------------------------------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.section-head h1 { margin: 0; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 820px) {
    .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid.cols-3 { grid-template-columns: 1fr; }
    .grid.cols-2 { grid-template-columns: 1fr; }
    .topbar { flex-wrap: wrap; gap: .6rem; }
    .mainnav { order: 3; width: 100%; overflow-x: auto; }
    .check .check-label { width: 120px; }
    .quicklinks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Wave 2: Avatare, Spieler-Zellen, Vereinslogos, Bank/Zahlung, Tipp-Badges
   ========================================================================== */

/* ---- Avatar ---- */
.avatar {
    position: relative; display: inline-flex; flex: none;
    align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--surface-2), var(--border));
    color: var(--muted); font-weight: 700; line-height: 1;
    box-shadow: inset 0 0 0 1px var(--border);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72em; z-index: 0; }
.avatar-sm { width: 30px; height: 30px; font-size: .8rem; }
.avatar-md { width: 46px; height: 46px; font-size: 1rem; }
.avatar-lg { width: 92px; height: 92px; font-size: 1.6rem; }
.avatar-xl { width: 128px; height: 128px; font-size: 2rem; }
.avatar-link { display: inline-block; line-height: 0; }
.avatar-link:hover .avatar { box-shadow: inset 0 0 0 1px var(--border), 0 0 0 2px var(--accent); }

.player-cell { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.player-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td .player-cell { max-width: 220px; }

.club-logo { vertical-align: middle; object-fit: contain; }

/* ---- Bank / Zahlung ---- */
.payment-box {
    border: 1px solid var(--accent);
    background: linear-gradient(135deg, var(--accent-glow), transparent 60%), var(--surface);
    border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.iban { font-family: var(--mono); letter-spacing: .04em; font-weight: 600; color: var(--text); }
.bank-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--border-soft); }
.bank-row:last-child { border-bottom: 0; }
.bank-row .k { color: var(--muted); }
.sensitive { filter: blur(5px); transition: filter .15s; cursor: pointer; }
.sensitive:hover, .sensitive.revealed { filter: none; }

/* ---- Tipp-Badges (1/0/2) ---- */
.tipbadge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px;
    font-weight: 800; font-size: .8rem; font-family: var(--mono);
    background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.tipbadge.hit { background: rgba(52, 211, 153, .15); border-color: rgba(52, 211, 153, .4); color: var(--ok); }
.tipbadge.miss { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .35); color: var(--bad); }
.tipbadge.none { opacity: .5; }

/* ---- Tendenz-Pfeile ---- */
.tendenz { font-weight: 800; }
.tendenz.up { color: var(--ok); }
.tendenz.down { color: var(--bad); }
.tendenz.flat { color: var(--muted); }

/* ---- Quick-Tipp / Sim-Buttons in der Tippabgabe ---- */
.tip-tools { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; align-items: center; }

/* ---- Treffer-Matrix (Treffer je Spieltag) ---- */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.matrix { border-collapse: collapse; font-size: .76rem; width: max-content; min-width: 100%; }
table.matrix th, table.matrix td {
    padding: .3rem .45rem; text-align: center;
    border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft);
    white-space: nowrap;
}
table.matrix thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; z-index: 3; }
table.matrix .sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 2; width: 38px; }
table.matrix .name-col { text-align: left; position: sticky; left: 38px; background: var(--surface); z-index: 2; min-width: 140px; }
table.matrix thead .sticky-col, table.matrix thead .name-col { z-index: 4; background: var(--surface-2); }
table.matrix tr.me .sticky-col, table.matrix tr.me .name-col { background: var(--surface-2); }
table.matrix tr.me td { background: var(--accent-glow); }
.hcell { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.hcell.zero { color: var(--faint); }
.hcell.none { color: var(--faint); opacity: .35; }
table.matrix .total-col { position: sticky; right: 0; background: var(--surface-2); color: var(--accent); z-index: 2; }

/* ---- Dashboard-Begrüßung mit Avatar ---- */
.hero-greeting { display: flex; align-items: center; gap: 1.3rem; }
.hero-greeting-avatar { flex: none; }
.hero-greeting-body { min-width: 0; }
@media (max-width: 600px) {
    .hero-greeting { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* ---- Statistik-Hub Kacheln ---- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.hub-tile {
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem 1.1rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); text-decoration: none; transition: border-color .15s, transform .05s;
}
.hub-tile:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.hub-tile .hub-ic { font-size: 1.6rem; }
.hub-tile .hub-t { font-weight: 700; }
.hub-tile .hub-d { font-size: .82rem; color: var(--muted); }

@media (max-width: 820px) {
    td .player-name { max-width: 90px; }
}

/* ==========================================================================
   Wave 3 — Prototyp-Feinschliff (Design-Import „SpencerNet Prototyp")
   ========================================================================== */

@keyframes pulseGlow { 0%,100%{ box-shadow:0 6px 18px rgba(255,210,30,.2) } 50%{ box-shadow:0 6px 30px rgba(255,210,30,.5) } }
@keyframes marquee { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes shimmer { from{ background-position:-200% 0 } to{ background-position:200% 0 } }
@keyframes livedot { from{ opacity:.35; transform:scale(.85) } to{ opacity:1; transform:scale(1) } }

/* Display-Font (grosse Zahlen / Countdown) */
.saira, .cd-big, .cd-num { font-family: 'Saira Condensed', var(--font); }

/* Avatar XS (Topbar-Chip) */
.avatar-xs { width: 24px; height: 24px; font-size: .6rem; }

/* Deadline-Strip unter der Topbar */
.deadline-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .45rem 1.5rem; background: rgba(255,210,30,.07);
    border-bottom: 1px solid rgba(255,210,30,.15); font-size: .85rem;
}
.deadline-strip .ds-label { color: #cbd5e1; }
.deadline-strip .ds-label strong { color: var(--text); }
.deadline-strip .ds-count { display: flex; align-items: center; gap: .5rem; }
.countdown {
    font-family: var(--mono); font-weight: 800; color: var(--accent);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.countdown.over { color: var(--muted); font-weight: 600; }
.livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; animation: livedot 1s ease-in-out infinite alternate; }

/* Grosser Countdown (Start-Hero) */
.cd-grid { display: flex; align-items: flex-start; gap: 12px; }
.cd-grid .cd-sep { font-family: 'Saira Condensed', var(--font); font-size: 44px; color: #3a4a61; line-height: 1.15; }
.cd-cell .cd-num { font-family: 'Saira Condensed', var(--font); font-size: 58px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-cell.sec .cd-num { color: var(--accent); }
.cd-cell .cd-lbl { font-size: .6rem; letter-spacing: .16em; color: var(--faint); text-transform: uppercase; margin-top: 2px; }

/* Ergebnis-Ticker (Marquee) */
.ticker {
    position: relative; border: 1px solid var(--border); border-radius: var(--radius);
    background: #0e1219; overflow: hidden; display: flex; align-items: center; height: 52px;
}
.ticker .ticker-label {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center;
    padding: 0 18px 0 16px; background: linear-gradient(90deg, #0e1219 72%, transparent);
    font-weight: 800; letter-spacing: .1em; color: var(--accent); font-size: .78rem; text-transform: uppercase;
}
.ticker .ticker-track { display: flex; gap: 36px; width: max-content; animation: marquee 44s linear infinite; padding-left: 180px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker .tk-item { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--muted); white-space: nowrap; }
.ticker .tk-item .tk-s { font-family: var(--mono); color: var(--accent); font-weight: 700; }
.ticker .tk-item b { color: var(--text); font-weight: 600; }

/* Inline-Logo in Tabellen/Zeilen */
.logo-inline { display: inline-flex; width: 20px; height: 20px; flex: none; object-fit: contain; vertical-align: middle; }

/* Pulsierender Primär-CTA (Start) */
.btn.pulse { animation: pulseGlow 2.6s ease-in-out infinite; }

/* Rang-1 Schimmer (Podium) */
.shine { position: relative; overflow: hidden; }
.shine::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,210,30,.14) 50%, transparent 60%);
    background-size: 200% 100%; animation: shimmer 3.2s linear infinite; pointer-events: none;
}

/* Mini-Balkendiagramm (Form) */
.formbars { display: flex; align-items: flex-end; gap: 9px; height: 84px; }
.formbars .fb { width: 20px; border-radius: 6px 6px 0 0; background: #2c3a4f; }
.formbars .fb.hot { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }

/* Mitspieler-Kachelgrid */
.member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.member-card {
    display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.3rem 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: transform .15s, border-color .15s;
}
.member-card:hover { transform: translateY(-2px); border-color: #3d4d66; }
/* Kachel-Foto: 84px wie im Prototyp + dauerhafter Akzent-Ring (avatar-xl wird hier verkleinert). */
.member-card .avatar-xl {
    width: 84px; height: 84px; font-size: 1.4rem; margin-bottom: .6rem;
    box-shadow: inset 0 0 0 1px var(--border), 0 0 0 3px rgba(255, 210, 30, .15);
}
@media (max-width: 900px) { .member-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .member-grid { grid-template-columns: 1fr; } }

/* 1/0/2 Tipp-Buttons (Tippen) */
.pick { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 8px; font-weight: 700; font-size: .82rem; font-family: var(--mono); cursor: pointer;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); transition: all .12s; }
.pick:hover { border-color: var(--accent); color: var(--text); }
.pick.sel { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; font-weight: 800; }
.pick.big { width: 40px; height: 36px; font-size: .92rem; }

/* Fortschrittsbalken (Tippabgabe) */
.progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .25s; }

/* Deadline-Strip responsiv */
@media (max-width: 640px) {
    .deadline-strip { padding: .45rem 1rem; font-size: .78rem; }
    .cd-cell .cd-num { font-size: 40px; }
}