/* ── PhantastikCharts – seitenspezifisches CSS für duelle.php (Hype-Charts) ──
   Ausgelagert aus dem früheren Inline-<style>-Block (Aufräumaktion 2026-08-22),
   damit der Browser diese Datei über Page-Loads hinweg cachen kann (per <link>
   + asset_url()-Cache-Busting eingebunden, wie assets/style.css). */

.page-wrap { max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.chart-header { display: flex; align-items: baseline; gap: 0.75rem; border-bottom: 2px solid #1a1a1a; padding-bottom: 0.5rem; margin-bottom: 1.25rem; }
.chart-title { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }
.chart-meta { font-size: 0.78rem; color: #999; }
.chart-note { font-size: 0.8rem; color: #776a4a; background: #fbf6e8; border: 1px solid #ede0bc; border-radius: 6px; padding: 0.6rem 0.85rem; margin-bottom: 1.25rem; line-height: 1.5; }

/* Nur mobil (gleiche Schwelle wie .duel-jump-btn/.page-layout-Stapelung in style.css) — auf Desktop
   steht das Duell-Widget bereits sichtbar in der Sidebar, der Hinweis wäre dort überflüssig. */
.chart-note-mobile-hint { display: none; font-size: 0.85rem; line-height: 1.5; margin-bottom: 1.25rem; }
@media (max-width: 1000px) {
    .chart-note-mobile-hint { display: block; }
}

/* .filter-pill: siehe assets/style.css (Aufräumaktion 2026-08-22, 1:1-Duplikat). */
.filter-bar { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }

.chart-list { background: #fff; border: 1px solid #e0e0d8; border-radius: 6px; overflow: hidden; }
/* Zeilen-Hülle (border/hover/display:grid): siehe .list-row in assets/style.css
   (Aufräumaktion 2026-08-22, war 1:1-Duplikat) — hier nur noch die eigenen
   Spaltenbreiten. */
.chart-row { grid-template-columns: 52px 52px 1fr auto; min-height: 72px; }

.row-rank-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem 0.25rem; }
.row-rank-num { font-size: 1.25rem; font-weight: 800; color: #ccc; line-height: 1; }
.chart-row.rank-1 .row-rank-num { color: #c0a000; }
.chart-row.rank-2 .row-rank-num { color: #888; }
.chart-row.rank-3 .row-rank-num { color: #a0603a; }

.row-cover-wrap { padding: 0.5rem 0.25rem; position: relative; }
.row-cover { width: 40px; height: 58px; object-fit: cover; display: block; border-radius: 2px; }
.row-cover-zoom {
    display: none; position: absolute; left: 48px; top: 50%; transform: translateY(-50%);
    width: 120px; height: auto; border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25); z-index: 50; pointer-events: none;
}
.row-cover-wrap:hover .row-cover-zoom { display: block; }
.row-cover-empty { width: 40px; height: 58px; background: #ede8e0; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 1.1rem; }

.row-info { padding: 0.6rem 0.75rem; min-width: 0; }
.row-title { font-size: 0.9rem; font-weight: 700; color: #1a1a1a; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .title-subtitle: siehe assets/style.css (Aufräumaktion 2026-08-27, war 1:1-Duplikat). */
.row-author { font-size: 0.78rem; color: #777; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-genres { font-size: 0.68rem; color: #aaa; margin-top: 0.2rem; }

.row-right { padding: 0.6rem 0.75rem 0.6rem 0.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0; }
.row-pts { font-size: 0.88rem; font-weight: 700; color: #1a1a1a; white-space: nowrap; }
.row-stats { font-size: 0.72rem; color: #aaa; white-space: nowrap; }

/* .pagination/.page-btn: siehe assets/style.css — Außenabstand hier per Override
   erhalten (weicht vom gemeinsamen Default ab). */
.pagination { margin: 1.5rem 0 0; }

.coming-soon-state { background: #fff; border: 1px solid #e0e0d8; border-radius: 8px; padding: 4rem 2rem; text-align: center; margin: 2rem 0; }
.coming-soon-icon { font-size: 3rem; margin-bottom: 1rem; }
.coming-soon-state h2 { margin: 0 0 0.75rem; font-size: 1.4rem; color: #1a1a1a; }
.coming-soon-state p { color: #666; max-width: 480px; margin: 0 auto; line-height: 1.6; }

@media (max-width: 540px) {
    .chart-row { grid-template-columns: 44px 46px 1fr auto; }

    /* Rechte Spalte bleibt schmal: "77" gross und "Punkte" ruecken auf zwei Zeilen
       untereinander (statt "77 Punkte" auf einer breiten Zeile), das Wort "Siege" faellt
       weg ("13 Duelle · 100%" statt "... 100% Siege") -- beides zusammen haelt die Spalte
       schmal genug, damit fuer Titel/Autor noch was uebrig bleibt. Als Mockup mit dem
       Nutzer abgestimmt, siehe Chat. */
    .row-pts { display: flex; flex-direction: column; align-items: flex-end; white-space: normal; gap: 0.05rem; }
    .row-pts-num { font-size: 1rem; font-weight: 800; line-height: 1.1; }
    .row-pts-label { font-size: 0.6rem; font-weight: 400; color: #999; text-transform: uppercase; letter-spacing: 0.03em; }
    .row-stats { font-size: 0.66rem; }
    .row-siege-word { display: none; }
}