/* ================================================================
   FONTS
   ================================================================ */
@font-face { font-family: 'RockSalt-Regular';   src: url("RockSalt-Regular.ttf")   format('truetype'); }
@font-face { font-family: 'Righteous-Regular';  src: url("Righteous-Regular.ttf")  format('truetype'); }
@font-face { font-family: 'Domine-Regular';     src: url("Domine-Regular.ttf")     format('truetype'); }
@font-face { font-family: 'BlackOpsOne-Regular';src: url('BlackOpsOne-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Audiowide-Regular';  src: url('Audiowide-Regular.ttf')  format('truetype'); }
@font-face { font-family: 'PoetsenOne-Regular'; src: url('PoetsenOne-Regular.ttf') format('truetype'); }
@font-face { font-family: 'SigmarOne-Regular';  src: url('SigmarOne-Regular.ttf')  format('truetype'); }
@font-face { font-family: 'LondrinaSolid-Thin'; src: url('LondrinaSolid-Thin.ttf') format('truetype'); }

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
    --c-primary:      #b41717;
    --c-primary-dark: #8a0e0e;
    --c-gold:         #FCC200;
    --c-silver:       #C0C0C0;
    --c-bronze:       #CD7F32;
    --c-accent:       #E2BAA0;
    --c-bg:           #f2f2f7;
    --c-card:         #ffffff;
    --c-text:         #1c1c1e;
    --c-text-2:       #6c6c70;
    --c-border:       #e5e5ea;
    --c-success:      #34c759;
    --c-danger:       #ff3b30;
    --nav-h:          68px;
    --header-h:       54px;
    --font:           'PoetsenOne-Regular', 'Helvetica Neue', sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-bg:     #000000;
        --c-card:   #1c1c1e;
        --c-text:   #f2f2f7;
        --c-text-2: #8e8e93;
        --c-border: #38383a;
    }
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: clamp(13px, 4vw, 17px);
    line-height: 1.5;
    width: 100%;
    overflow-x: hidden;
    padding-bottom: calc(var(--nav-h) + 12px);
    padding-top: calc(var(--header-h) + 10px);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border-radius: 16px; display: block; }
video { width: 100%; border-radius: 16px; display: block; }
a { color: var(--c-primary); text-decoration: none; }
.feed-link {
    color: var(--c-primary);
    text-decoration: underline;
    text-decoration-color: rgba(180,23,23,.35);
    text-decoration-thickness: 1px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* ================================================================
   HEADER — standard (solid glass)
   ================================================================ */
header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--c-border);
    z-index: 100;
}

header h1 {
    font-family: var(--font);
    font-size: clamp(18px, 7vw, 26px);
    color: var(--c-primary);
    text-shadow: 1px 1px 2px rgba(0,0,0,.1);
}

header img {
    height: clamp(28px, 8.5vw, 40px);
    width: auto;
    border-radius: 0;
}

@media (prefers-color-scheme: dark) {
    header { background: rgba(28, 28, 30, 0.92); }
}

/* ================================================================
   HEADER — hero (full-bleed background image)
   ================================================================ */
header.hero {
    position: relative;
    height: 52vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 14px;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #1a1a1a;
}

header.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 65%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.65));
    pointer-events: none;
}

header.hero h1 {
    color: white;
    text-shadow: 2px 2px 6px rgba(0,0,0,.7);
    position: relative;
    z-index: 1;
}

header.hero img {
    position: relative;
    z-index: 1;
    border-radius: 0;
}

body:has(header.hero) { padding-top: 0; }

/* legacy app-padding hook */
body.app-padding header { padding-top: 8vw; }

/* ================================================================
   BOTTOM NAVIGATION
   ================================================================ */
footer {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    height: var(--nav-h);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--c-border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

footer nav ul {
    list-style: none;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

footer nav li {
    flex: 1;
    display: flex;
    justify-content: center;
}

footer nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: var(--c-text-2);
    font-size: clamp(9px, 2.8vw, 12px);
    font-family: var(--font);
    padding: 6px 14px;
    border-radius: 14px;
    transition: color .2s, background .2s;
}

footer nav li a img {
    width: clamp(22px, 7vw, 30px);
    height: clamp(22px, 7vw, 30px);
    border-radius: 0;
    object-fit: contain;
}

footer nav li a p { margin: 0; }

footer nav li.nav-active a {
    color: var(--c-primary);
    background: rgba(180, 23, 23, 0.08);
}

@media (prefers-color-scheme: dark) {
    footer { background: rgba(28, 28, 30, 0.95); }
    footer nav li.nav-active a { background: rgba(180, 23, 23, 0.18); }

    .nav-item1 img { content: url('homelight.png'); }
    .nav-item2 img { content: url('pokallight.png'); }
    .nav-item3 img { content: url('gavellight.png'); }
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
    background: var(--c-card);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    margin: 0 12px 14px;
    overflow: hidden;
}

.card-body {
    padding: 14px 16px;
    font-size: 4.2vw;
    line-height: 1.5;
}

.card img, .card video { border-radius: 0; width: 100%; }

/* ================================================================
   FEED TYPE BADGE
   ================================================================ */
.feed-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 2.8vw;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.feed-tag.text  { background: rgba(0,122,255,.12);  color: #007AFF; }
.feed-tag.image { background: rgba(52,199,89,.12);  color: #34C759; }
.feed-tag.video { background: rgba(255,59,48,.12);  color: #FF3B30; }

/* ================================================================
   LIVE INDICATOR
   ================================================================ */
.live-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 3vw;
    color: var(--c-text-2);
}

.live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-success);
    animation: blink 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

/* ================================================================
   MATCH CARDS  (spielplan / turnier)
   ================================================================ */
.match-card {
    background: var(--c-card);
    border-radius: 20px;
    margin: 0 12px 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    border: 1.5px solid transparent;
}
.match-card.is-live {
    border-color: var(--c-success);
    box-shadow: 0 0 0 3px rgba(52,199,89,.12);
}
.match-card.is-pending-live {
    border-color: #ff9f0a;
    box-shadow: 0 0 0 3px rgba(255,159,10,.12);
}

.match-row {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 10px;
    font-size: 4.8vw;
    font-weight: bold;
    border-bottom: 1px solid var(--c-border);
    min-height: 50px;
}

.match-row:last-child { border-bottom: none; }

.team-pip {
    width: 11px; height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.match-team-name {
    flex: 1;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    line-height: 1.3;
}

.match-score {
    font-size: 6vw;
    font-weight: bold;
    min-width: 10vw;
    text-align: center;
    color: var(--c-text-2);
}

.match-score.winner  { color: var(--c-gold); text-shadow: 0 0 12px rgba(252,194,0,.5); }
.match-score.pending { color: var(--c-text-2); font-style: italic; }

/* ================================================================
   PHASE LABELS
   ================================================================ */
.phase-label {
    text-align: center;
    font-size: 4.8vw;
    font-weight: bold;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 18px 12px 8px;
    color: var(--c-text-2);
}
.phase-label.finale     { color: var(--c-gold);    font-size: 6vw; }
.phase-label.halbfinale { color: var(--c-silver);  }
.phase-label.gruppe     { color: var(--c-primary); }

/* 2-column grid for Gruppenspiele */
/* Rivalenspiel-Trennlinie */
.rival-divider {
    display: flex;
    align-items: center;
    padding: 2px 10px;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}
.rival-line { flex: 1; height: 1px; background: rgba(255,59,48,.15); }
.rival-pill {
    flex-shrink: 0;
    font-size: 2.4vw;
    font-weight: 800;
    color: #ff3b30;
    background: rgba(255,59,48,.12);
    border: 1px solid rgba(255,59,48,.4);
    border-radius: 20px;
    padding: 1px 6px;
    white-space: nowrap;
    letter-spacing: .02em;
    cursor: pointer;
}
.rival-pill:active { opacity: .7; }
.ticker-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 2.1vw;
    font-weight: 800;
    color: #ff3b30;
    background: rgba(255,59,48,.1);
    border: 1.5px solid rgba(255,59,48,.4);
    border-radius: 20px;
    padding: 2px 9px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font, sans-serif);
    line-height: 1.6;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ticker-btn::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff3b30;
    flex-shrink: 0;
    animation: tkDotPulse 1.4s ease-in-out infinite;
}
@keyframes tkDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .2; transform: scale(.65); }
}
.ticker-btn:active { background: rgba(255,59,48,.2); transform: scale(.93); }
.ticker-pill {
    display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:700;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;padding:3px 10px;
    color:var(--c-text,#fff);cursor:pointer;
    letter-spacing:.02em;white-space:nowrap;
    transition:background .12s;
}
.ticker-pill:hover { background:rgba(255,255,255,.13); }

.gruppe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px 4px;
}
.gruppe-grid .match-card {
    margin: 0;
    border-radius: 14px;
}
.gruppe-grid .match-row {
    padding: 8px 9px;
    gap: 5px;
    font-size: 3.0vw;
    min-height: 0;
}
.gruppe-grid .match-score {
    font-size: 4.0vw;
    min-width: 6vw;
}
.gruppe-grid .team-pip {
    width: 7px;
    height: 7px;
}
.gruppe-grid .rival-divider { padding: 1px 7px; gap: 4px; }
.gruppe-grid .rival-pill { font-size: 1.7vw; padding: 0 4px; }
.gruppe-grid .ticker-btn { font-size: 1.7vw; padding: 1px 6px; }
.gruppe-grid .ticker-btn::before { width: 5px; height: 5px; }
.gruppe-grid .ticker-pill { font-size: 1.7vw; padding: 1px 6px; }

.vs-btn {
    text-align: center;
    padding: 8px 14px;
    font-size: 3.4vw;
    color: var(--c-text-2);
    cursor: pointer;
    border-top: 1px solid var(--c-border);
    transition: background .15s;
    user-select: none;
}
.vs-btn:active { background: var(--c-bg); }
.gruppe-grid .vs-btn { font-size: 2.6vw; padding: 5px 6px; }

/* ================================================================
   WINNER BANNER
   ================================================================ */
.winner-banner {
    background: #fff;
    border-radius: 20px;
    margin: 0 12px 14px;
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
    position: relative;
    overflow: hidden;
}

.winner-trophy { font-size: 14vw; display: block; margin-bottom: 4px; }
.winner-label  { color: #888; font-size: 4.5vw; text-transform: uppercase; letter-spacing: .2em; opacity: .9; }
.winner-name   { font-size: 11vw; font-weight: bold; }

/* ================================================================
   STANDINGS
   ================================================================ */
.standings-card {
    background: var(--c-card);
    border-radius: 20px;
    margin: 0 12px 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    border: 1.5px solid var(--c-border);
}

/* ── Gruppen-Header ── */
.standings-header {
    padding: 12px 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.stg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6.5vw; height: 6.5vw;
    background: var(--c-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 2.8vw;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: 0;
}
.stg-title { flex: 1; min-width: 0; font-size: 4.3vw; font-weight: 800; color: var(--c-text); }
.stg-count { font-size: 3.2vw; font-weight: 600; color: var(--c-text-2); flex-shrink: 0; }

/* ── Tabellen-Kopfzeile (Spalten-Labels) ── */
.standings-table-hdr {
    display: flex;
    align-items: center;
    padding: 10px 14px 7px;
    gap: 10px;
    border-bottom: 2px solid var(--c-border);
}
.standings-th-rank { width: 8vw; flex-shrink: 0; }
.standings-th-pip  { width: 11px; flex-shrink: 0; }
.standings-th {
    min-width: 10vw;
    text-align: center;
    font-size: 2.8vw;
    font-weight: 700;
    color: var(--c-text-2);
    opacity: .5;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ── Team-Zeilen ── */
.standings-row {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    gap: 10px;
    border-bottom: 1.5px solid var(--c-border);
    font-size: 4.3vw;
    border-left: 3px solid transparent;
    transition: background .15s;
}
.standings-row:last-child { border-bottom: none; }
.standings-row:hover { background: rgba(180,23,23,.04); }

/* ── Qualifikationstrennlinie ── */
.standings-qual-sep {
    height: 3px;
    background: var(--c-primary);
    margin: 3px 0;
    opacity: .55;
}

.rank-num {
    width: 6.5vw; height: 6.5vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2vw;
    font-weight: bold;
    background: var(--c-border);
    color: var(--c-text);
    flex-shrink: 0;
}
.rank-1-row { background: rgba(180,23,23,.18); }
.rank-2-row { background: rgba(180,23,23,.09); }

.standings-name {
    flex: 1;
    font-weight: bold;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.standings-stat {
    font-size: 4.2vw;
    font-weight: bold;
    min-width: 10vw;
    text-align: center;
    color: var(--c-text-2);
    flex-shrink: 0;
}
.standings-stat.wins { color: var(--c-primary); }
.standings-stat.pos  { color: var(--c-success); }
.standings-stat.neg  { color: var(--c-danger);  }

/* ================================================================
   IN-PAGE TAB SWITCHER
   ================================================================ */
.tab-switcher {
    display: flex;
    padding: 12px 12px 0;
    gap: 8px;
    margin-bottom: 10px;
}

.tab-btn {
    flex: 1;
    padding: 11px 0;
    background: var(--c-card);
    border: none;
    border-radius: 14px;
    font-family: var(--font);
    font-size: 4.2vw;
    color: var(--c-text-2);
    cursor: pointer;
    font-weight: bold;
    transition: all .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.tab-btn.active {
    background: var(--c-primary);
    color: white;
    box-shadow: 0 4px 14px rgba(180,23,23,.35);
}

/* ================================================================
   RULES / ACCORDION
   ================================================================ */
.rule-card {
    background: var(--c-card);
    border-radius: 18px;
    margin: 0 12px 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

.rule-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 4.5vw;
    font-weight: bold;
    color: var(--c-text);
    text-align: left;
    gap: 10px;
}

.rule-icon  { font-size: 5vw; flex-shrink: 0; }
.rule-title { flex: 1; }

.rule-arrow {
    font-size: 5vw;
    color: var(--c-primary);
    transition: transform .3s ease;
    flex-shrink: 0;
    font-style: normal;
}

.rule-trigger.open .rule-arrow { transform: rotate(45deg); }

.rule-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    padding: 0 16px;
    font-size: 4vw;
    line-height: 1.65;
    color: var(--c-text-2);
}

.rule-body.open {
    max-height: 600px;
    padding: 14px 16px;
    border-top: 1px solid var(--c-border);
}

/* ================================================================
   COUNTDOWN
   ================================================================ */
.countdown-card {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
    border-radius: 20px;
    margin: 0 12px 14px;
    padding: 18px 16px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 18px rgba(180,23,23,.4);
}

.countdown-title {
    font-size: 3.3vw;
    opacity: .85;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.countdown-time {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 14vw;
}

.countdown-value { font-size: 9.5vw; font-weight: bold; line-height: 1; }
.countdown-uname { font-size: 2.6vw; opacity: .7; text-transform: uppercase; margin-top: 2px; }

/* ================================================================
   AKTUELLE SPIELE WIDGET
   ================================================================ */
.live-widget {
    background: var(--c-card);
    border-radius: 20px;
    margin: 0 12px 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

.live-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--c-border);
    font-size: 3.5vw;
    font-weight: bold;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.live-widget-body { padding: 10px 0; }
.live-widget-empty { padding: 14px 16px; color: var(--c-text-2); font-size: 3.8vw; text-align: center; }

/* ================================================================
   GAMES STRIP — 2-column horizontal widget on feed page
   ================================================================ */
.games-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px 12px 12px;
}

.games-strip-item {
    background: var(--c-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--c-border);
}

.games-strip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--c-border);
}

.games-strip-row:last-child { border-bottom: none; }

.games-strip-name {
    flex: 1;
    font-size: 3.2vw;
    font-weight: bold;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    line-height: 1.3;
}

.games-strip-score {
    font-size: 4.5vw;
    font-weight: bold;
    color: var(--c-text-2);
    min-width: 5vw;
    text-align: right;
    flex-shrink: 0;
}

.games-strip-score.winner { color: var(--c-gold); text-shadow: 0 0 8px rgba(252,194,0,.4); }
.games-strip-score.pending { font-style: italic; }

/* ── Becher-Ticker (alter Panel-Ticker in spieldetail etc.) ───────────────── */
.ticker-toggle {
    display: block;
    width: 100%;
    padding: 5px 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--c-border);
    color: var(--c-text-2);
    font-size: 3.2vw;
    cursor: pointer;
    text-align: center;
    letter-spacing: .03em;
    transition: background .15s;
}
.ticker-toggle:active { background: var(--c-border); }
.ticker-panel {
    border-top: 1px solid var(--c-border);
    padding: 8px;
    background: var(--c-bg);
}
.ticker-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.ticker-team {
    flex: 1;
    font-size: 3vw;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ticker-panel .ticker-btn {
    width: 7vw;
    height: 7vw;
    max-width: 28px;
    max-height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 4vw;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .1s;
}
.ticker-panel .ticker-btn:active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.ticker-count {
    font-size: 4.5vw;
    font-weight: bold;
    color: var(--c-text);
    min-width: 6vw;
    text-align: center;
    flex-shrink: 0;
}
.ticker-submit {
    width: 100%;
    padding: 7px 0;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 3.4vw;
    font-weight: bold;
    cursor: pointer;
    transition: opacity .15s;
}
.ticker-submit:active { opacity: .75; }
.ticker-msg {
    font-size: 3vw;
    color: var(--c-primary);
    text-align: center;
    margin-top: 4px;
    min-height: 1em;
}
.ticker-login-hint {
    border-top: 1px solid var(--c-border);
    padding: 7px 10px;
    font-size: 3vw;
    color: var(--c-text-2);
    text-align: center;
}
.ticker-login-hint a {
    color: var(--c-primary);
    text-decoration: underline;
}
.ticker-correct-btn {
    display: block;
    width: 100%;
    padding: 4px 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--c-border);
    color: var(--c-text-2);
    font-size: 2.8vw;
    cursor: pointer;
    text-align: center;
    letter-spacing: .02em;
    transition: background .15s;
}
.ticker-correct-btn:active { background: var(--c-border); }
.correction-panel {
    border-top: 1px solid var(--c-border);
    padding: 8px;
    background: rgba(255,159,10,.06);
}
.correction-pin-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 8px;
}
.correction-pin-label {
    font-size: 2.8vw;
    color: var(--c-text-2);
    flex-shrink: 0;
}
.correction-pin-input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 3.5vw;
    font-family: monospace;
    letter-spacing: .2em;
    text-align: center;
}
.correction-pin-input:focus { outline: none; border-color: #ff9f0a; }
.ticker-correct-submit {
    width: 100%;
    padding: 7px 0;
    background: #ff9f0a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 3.4vw;
    font-weight: bold;
    cursor: pointer;
    transition: opacity .15s;
}
.ticker-correct-submit:active { opacity: .75; }

/* ================================================================
   CONFETTI
   ================================================================ */
.confetti-piece {
    position: fixed;
    width: 10px; height: 14px;
    top: -14px;
    border-radius: 3px;
    animation: confetti-fall linear infinite;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
}

@keyframes confetti-fall {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg);   opacity: 1; }
    100% { transform: translateY(108vh) rotateZ(720deg) rotateX(360deg); opacity: 0; }
}

/* ================================================================
   LEGACY COMPAT — keeps existing pages working while they transition
   ================================================================ */
.container {
    background: var(--c-card);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    margin: 0 12px 14px;
    overflow: hidden;
    display: flex;
    font-family: var(--font);
    font-size: 4.5vw;
    color: var(--c-text);
}

.container .text {
    flex: 1;
    padding: 14px 16px;
    line-height: 1.5;
}

.container-wrapperSieger {
    background: var(--c-card);
    border-radius: 20px;
    margin: 0 12px 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

.containerNews1 {
    display: flex;
    align-items: center;
    background: var(--c-card);
    border-radius: 20px;
    margin: 0 12px 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    font-family: var(--font);
    font-size: 5vw;
}

/* grup table from renderGruppenTabelle() in config.php */
.gruppe-container {
    background: var(--c-card);
    margin: 0 12px 4px;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}

.gruppe-container table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font);
    font-size: 4.2vw;
}

.gruppe-container tr { border-bottom: 1px solid var(--c-border); }
.gruppe-container tr:last-child { border-bottom: none; }

.gruppe-container th,
.gruppe-container td {
    padding: 10px 8px;
    text-align: center;
    font-weight: bold;
}

.gruppe-container tr:first-child th {
    font-size: 3vw;
    color: var(--c-text-2);
    background: var(--c-card);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--c-border);
}

.header-container {
    background: var(--c-primary);
    border-radius: 20px 20px 0 0;
    margin: 14px 12px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
}

.header-container h1 {
    color: white;
    font-size: 6vw;
    margin: 0;
}

/* sieger / KO match table */
.sieger-container {
    background: url('ArenaquerGIF.gif') center/cover no-repeat;
    border-radius: 20px;
    margin: 0 12px 14px;
    min-height: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--c-primary);
}

.sieger-container .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1;
}

.sieger-container h2 {
    position: relative;
    z-index: 2;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px black;
    letter-spacing: .05em;
}

/* old tab system (turnier/feed pages) */
.tabcontent {
    display: none;
    flex-direction: column;
    width: 100%;
}

.tab {
    display: flex;
    padding: 12px 12px 0;
    gap: 8px;
}

.tab button {
    flex: 1;
    padding: 11px;
    background: var(--c-card);
    border: none;
    border-radius: 14px 14px 0 0;
    font-family: var(--font);
    font-size: 4.5vw;
    color: var(--c-text-2);
    cursor: pointer;
    font-weight: bold;
    transition: all .2s;
    border-bottom: 3px solid transparent;
}

.tab button.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    background: rgba(180,23,23,.06);
}

/* ================================================================
   RESPONSIVE — Phone landscape  (wide + short: orientation phones)
   ================================================================ */
@media screen and (orientation: landscape) and (max-height: 499px) {
    body {
        font-size: clamp(12px, 2vw, 14px);
        padding-right: 68px;
        padding-bottom: 0;
        padding-top: calc(var(--header-h) + 8px);
    }

    header:not(.hero) { padding: 0 12px; }
    header:not(.hero) h1 { font-size: clamp(15px, 3vw, 20px); }
    header:not(.hero) img { height: 28px; }
    header.hero { height: 36vw; }
    header.hero h1 { font-size: clamp(16px, 3.5vw, 22px); }

    /* Right-side vertical nav */
    footer {
        top: 0; bottom: 0;
        right: 0; left: auto;
        width: 60px; height: 100dvh;
        border-top: none;
        border-left: 1px solid var(--c-border);
        border-radius: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    footer nav ul {
        flex-direction: column;
        height: auto;
        gap: 6px;
        padding: 8px 0;
        align-items: stretch;
    }
    footer nav li          { flex: none; width: 100%; }
    footer nav li a        { font-size: 9px; padding: 8px 4px; gap: 2px; }
    footer nav li a img    { width: 22px; height: 22px; }

    .match-row    { font-size: 13px; min-height: 36px; }
    .match-score  { font-size: 14px; min-width: 26px; }
    .phase-label  { font-size: 13px; padding: 10px 12px 5px; }
    .tab-btn      { font-size: 12px; padding: 8px 0; }
    .standings-row    { font-size: 13px; }
    .standings-header { font-size: 14px; }
}

/* ================================================================
   RESPONSIVE — Tablet & Desktop  (≥ 768 wide  AND  ≥ 500 tall)
   ================================================================ */
@media screen and (min-width: 768px) and (min-height: 500px) {
    :root {
        --sidebar-w: 185px;
    }

    body {
        font-size: 15px;
        padding-left: var(--sidebar-w);
        padding-right: 0;
        padding-bottom: 32px;
        padding-top: calc(var(--header-h) + 12px);
        max-width: calc(var(--sidebar-w) + 940px);
        margin-left: auto;
        margin-right: auto;
    }
    body:has(header.hero) { padding-top: 0; }

    /* Hero header: constrained height on desktop */
    header.hero { height: min(56vw, 280px); }

    /* Fixed header — content aligned with body content area */
    header:not(.hero) {
        padding-left: max(
            calc(var(--sidebar-w) + 16px),
            calc((100vw - var(--sidebar-w) - 940px) / 2 + var(--sidebar-w) + 16px)
        );
        padding-right: max(16px, calc((100vw - var(--sidebar-w) - 940px) / 2 + 16px));
    }
    header h1  { font-size: clamp(18px, 1.8vw, 24px); }
    header img { height: 34px; }

    /* ── Left sidebar navigation ── */
    footer {
        top: 0; bottom: 0;
        left: max(0px, calc((100vw - var(--sidebar-w) - 940px) / 2));
        right: auto;
        width: var(--sidebar-w);
        height: 100dvh;
        border-top: none;
        border-right: 1px solid var(--c-border);
        border-radius: 0;
        padding: calc(var(--header-h) + 8px) 0 0;
        display: flex;
        flex-direction: column;
    }
    footer nav          { flex: 1; display: flex; flex-direction: column; }
    footer nav ul       { flex-direction: column; height: auto; gap: 2px; padding: 10px 10px; align-items: stretch; }
    footer nav li       { flex: none; width: 100%; }
    footer nav li a     { font-size: 14px; padding: 11px 14px; flex-direction: row; justify-content: flex-start; gap: 11px; border-radius: 12px; }
    footer nav li a img { width: 22px; height: 22px; }
    footer nav li a p   { font-size: 14px; margin: 0; }

    /* ── Content wrapper ── */
    .page-wrap { max-width: 760px; margin: 0 auto; }

    /* ── Typography: fixed px overrides for all CSS-class vw sizes ── */
    .card-body           { font-size: 15px; }
    .match-row           { font-size: 16px; min-height: 48px; }
    .match-score         { font-size: 20px; min-width: 40px; }
    .match-team-name     { font-size: 15px; }
    .phase-label         { font-size: 17px; padding: 18px 12px 8px; }
    .phase-label.finale  { font-size: 22px; }
    .phase-label.halbfinale { font-size: 18px; }
    .standings-header    { padding: 12px 16px 0; }
    .stg-badge           { width: 26px; height: 26px; font-size: 10px; border-radius: 4px; }
    .stg-title           { font-size: 15px; }
    .stg-count           { font-size: 12px; }
    .standings-table-hdr { padding: 6px 14px 5px; margin-top: 8px; }
    .standings-th       { font-size: 11px; min-width: 44px; }
    .standings-th-rank  { width: 26px; }
    .standings-row      { font-size: 15px; }
    .standings-stat     { font-size: 15px; min-width: 44px; }
    .standings-name     { font-size: 15px; }
    .rank-num           { width: 26px; height: 26px; font-size: 12px; }
    .tab-btn             { font-size: 15px; padding: 12px 0; }
    .winner-trophy       { font-size: 64px; }
    .winner-label        { font-size: 15px; letter-spacing: .18em; }
    .winner-name         { font-size: 44px; }
    .countdown-value     { font-size: 40px; }
    .countdown-uname     { font-size: 12px; }
    .countdown-unit      { min-width: 62px; }
    .countdown-title     { font-size: 13px; }
    .live-widget-header  { font-size: 13px; }
    .live-widget-empty   { font-size: 14px; }
    .games-strip-name    { font-size: 13px; }
    .games-strip-score   { font-size: 17px; min-width: 22px; }
    .rule-trigger        { font-size: 16px; }
    .rule-icon           { font-size: 20px; }
    .rule-arrow          { font-size: 18px; }
    .rule-body           { font-size: 15px; }
    .feed-tag            { font-size: 12px; }
    .live-bar            { font-size: 13px; }
    .header-container h1 { font-size: 20px; }
    .gruppe-container table  { font-size: 14px; }
    .gruppe-container th,
    .gruppe-container td     { padding: 8px 6px; }
    .gruppe-grid .match-row  { font-size: 13px; min-height: 0; padding: 7px 8px; }
    .gruppe-grid .match-score{ font-size: 14px; min-width: 24px; }
    .tab-switcher            { padding: 14px 0 0; gap: 10px; }

    /* Overlays: remove bottom-nav padding since nav is now a sidebar */
    #team-overlay  > div:nth-child(2),
    #alumni-overlay > div:nth-child(2),
    #admin-overlay  > div:nth-child(2) {
        padding-bottom: 14px !important;
    }
    /* Notification banner: sit above the fold, not above nav bar */
    #notif-banner { bottom: 14px !important; }
}

/* Dark mode sidebar */
@media (prefers-color-scheme: dark) and (min-width: 768px) and (min-height: 500px) {
    footer {
        background: rgba(28, 28, 30, 0.97) !important;
        border-right-color: var(--c-border);
        border-top: none;
    }
}

/* ── SSE live indicator (display.php header) ── */
.sse-status { color: #30d158; font-weight: 700; opacity: 0; transition: opacity .4s; }
.sse-status.connected { opacity: 1; animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}

/* ── New feed card slide-in ── */
/* ── Feed 2-column grid ── */
#feed-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 10px 0;
}

.feed-grid-card {
    background: var(--c-card);
    border-radius: 16px;
    border: 1.5px solid var(--c-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s, box-shadow .15s;
    height: 44vw;
    max-height: 185px;
}
.feed-grid-card:active { transform: scale(.97); }

.feed-grid-card--pinned { box-shadow: 0 0 0 1.5px rgba(252,194,0,.45); }

.fgc-thumb {
    width: 100%;
    height: 22vw;
    max-height: 90px;
    background-size: cover;
    background-color: var(--c-border);
    flex-shrink: 0;
}
.fgc-thumb--icon {
    background: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8vw;
    color: var(--c-text-2);
}

.fgc-text {
    flex: 1;
    padding: 7px 9px 4px;
    font-size: 3vw;
    color: var(--c-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fgc-footer {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px 7px;
    flex-shrink: 0;
    border-top: 1px solid var(--c-border);
}

.fgc-av {
    width: 7vw;
    max-width: 28px;
    height: 7vw;
    max-height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid var(--c-border);
}
.fgc-av-init {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8vw;
    font-weight: 700;
    color: #fff;
}

.fgc-reacts {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.fgc-em {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: clamp(13px, 4vw, 16px);
    color: var(--c-text-2);
    white-space: nowrap;
    line-height: 1;
}
.fgc-em span { font-size: clamp(11px, 3.2vw, 13px); font-weight: 700; }

.fgc-time {
    font-size: 2.4vw;
    color: var(--c-text-2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Feed modal overlay */
#feed-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.72);
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
#feed-modal.open { display: flex; }
#feed-modal-inner {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--c-bg);
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#feed-modal-inner .card {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
}
#feed-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0;
    width: 40px;
    height: 5px;
    background: var(--c-border);
    border-radius: 3px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

@keyframes feedCardIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.feed-card-new {
    animation: feedCardIn .35s cubic-bezier(.25,.46,.45,.94) both;
}


/* ── 🆕 new-post indicator (feed page, scrolled down) ── */
.feed-cups {
    position: fixed;
    bottom: calc(var(--nav-h, 64px) + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--c-card);
    border: 1.5px solid var(--c-border);
    border-radius: 24px;
    padding: 7px 14px 7px 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.22);
    cursor: pointer;
    z-index: 400;
    user-select: none;
}
.feed-cups--in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
@keyframes cupPop {
    0%   { opacity: 0; transform: scale(.4) translateY(6px); }
    65%  { transform: scale(1.2) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.fc-cup {
    font-size: 18px;
    display: inline-block;
    animation: cupPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.fc-extra {
    font-size: 12px;
    font-weight: 800;
    color: var(--c-text);
    margin-left: 1px;
}
.fc-arrow {
    font-size: 14px;
    color: var(--c-text-2);
    margin-left: 4px;
    font-weight: 700;
}

/* ── Feed new-content badge (bottom nav + feed tab) ── */
/* ── New feed card shimmer border (8 s) ── */
@keyframes newCardShimmer {
    0%   { box-shadow: 0 0 0 2px rgba(180,23,23,.9),    0 4px 22px rgba(180,23,23,.35); }
    20%  { box-shadow: 0 0 0 2.5px rgba(200,30,30,1),   0 4px 28px rgba(190,25,25,.4); }
    42%  { box-shadow: 0 0 0 2px rgba(180,23,23,.85),   0 4px 22px rgba(180,23,23,.35); }
    64%  { box-shadow: 0 0 0 2px rgba(180,23,23,.6),    0 4px 18px rgba(180,23,23,.22); }
    82%  { box-shadow: 0 0 0 1.5px rgba(180,23,23,.35), 0 4px 12px rgba(180,23,23,.12); }
    100% { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
}
.feed-card-new {
    animation:
        feedCardIn .35s cubic-bezier(.25,.46,.45,.94) both,
        newCardShimmer 8s ease-out .3s forwards;
}

/* ── Bottom-nav FEED pulse when new posts exist ── */
@keyframes feedNavPulse {
    0%   {
        transform: scale(1);
        background: rgba(180,23,23,.6);
        box-shadow: 0 0 0 0 rgba(180,23,23,.4), 0 2px 8px rgba(180,23,23,.18);
    }
    50%  {
        transform: scale(1.05);
        background: rgba(180,23,23,.92);
        box-shadow: 0 0 0 7px rgba(180,23,23,0), 0 4px 14px rgba(180,23,23,.35);
    }
    100% {
        transform: scale(1);
        background: rgba(180,23,23,.6);
        box-shadow: 0 0 0 0 rgba(180,23,23,.4), 0 2px 8px rgba(180,23,23,.18);
    }
}
@keyframes feedNavIconBob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-2px); }
}
.nav-item1 a.feed-nav-pulse {
    color: #fff !important;
    animation: feedNavPulse 1.8s ease-in-out infinite;
    transform-origin: center;
}
.nav-item1 a.feed-nav-pulse img {
    animation: feedNavIconBob 1.8s ease-in-out infinite;
}

/* ── Inline 3-page swipe widget ── */
.live-widget[data-swipeable] {
    box-shadow: 0 8px 28px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid var(--c-border);
}

.sw-track {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.sw-track::-webkit-scrollbar { display: none; }

.sw-page {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
}

.sw-side-hdr { color: var(--c-text-2) !important; }

.sw-lazy-body { min-height: 80px; }

.sw-loading {
    text-align: center;
    color: var(--c-text-2);
    font-size: clamp(12px, 3.5vw, 14px);
    padding: 28px 16px;
}
.sw-empty {
    text-align: center;
    color: var(--c-text-2);
    font-size: clamp(12px, 3.5vw, 14px);
    padding: 20px 16px;
}


.sw-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 7px 0 11px;
}
.sw-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-border);
    transition: background .2s, transform .2s, width .2s;
}
.sw-dot.sw-dot-act {
    background: var(--c-primary);
    transform: scale(1.4);
}