:root {
  color-scheme: light dark;
  --accent-gold:    #f5b800;
  --accent-silver:  #a8a8a8;
  --accent-bronze:  #cd7f32;
  --accent-spotify: #1db954;
  --accent-vote:    #e74c3c;
  --shadow-lift:    0 18px 48px rgba(0,0,0,0.28);
  --shadow-fly:     0 24px 56px rgba(0,0,0,0.32);
}

/* Scroll-Anker deaktivieren – verhindert automatische Scroll-Verschiebungen bei DOM-Änderungen */
html, body { overflow-anchor: none; }

/* ── Body ── */
body { position: relative; background-color: #f0f2f5; }

/* ── Header Hintergrundbild ── */
header {
  background-image: url(https://www.channel80.de/ncc/header);
  position: fixed;
  top: 0; left: 0;
  height: 100%; width: 100%;
  z-index: -1;
  opacity: 0.18;
  background-position: center top;
  background-repeat: repeat;
  background-attachment: fixed;
  background-color: #fff;
}

/* ── Charts Container ── */
#charts { max-width: 860px; padding-top: 1.5rem; padding-bottom: 3rem; }

/* ── Seiten-Header ── */
.chart-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.chart-header h2 {
  margin: 0;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #e0a000, #c05000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.chart-header .live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #e74c3c; color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase;
}
.chart-header .live-badge::before {
  content: ''; display: block; width: 7px; height: 7px;
  border-radius: 50%; background: #fff;
  animation: livePulse 1.4s infinite ease-in-out;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── Chart List ── */
.chart-list { list-style: none; padding: 0; margin: 0; position: relative; overflow-anchor: none; }

/* ── Chart Item Basis ── */
.chart-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: #fff linear-gradient(#fff, #f8f8f8);
  border-radius: 8px;
  box-shadow: 0 0 11px rgba(0,0,0,0.2);
  will-change: transform;
  z-index: 1;
  transform-origin: center center;
  border-left: 3px solid transparent;
  transition: 800ms all;
  overflow: visible;
}
.chart-item:hover {
  box-shadow: 0 0 11px rgba(0,0,0,0.5);
  transition: 200ms all;
}

/* ════════════════════════════════
   TOP 10 — subtile Hervorhebung
════════════════════════════════ */
.chart-item[data-pos="4"],  .chart-item[data-pos="5"],
.chart-item[data-pos="6"],  .chart-item[data-pos="7"],
.chart-item[data-pos="8"],  .chart-item[data-pos="9"],
.chart-item[data-pos="10"] {
  border-left-color: rgba(245,184,0,0.35);
  background: #fff linear-gradient(#fffff8, #f8f8f2);
}

/* ── TOP-10 Trennlinie nach Platz 10 ── */
.top10-divider {
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 16px;
  padding: 0;
  pointer-events: none;
}
.top10-divider::before,
.top10-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(180,140,0,0.4), transparent);
}
.top10-divider .divider-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b09000;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid rgba(180,140,0,0.35);
  border-radius: 20px;
  background: rgba(245,220,0,0.07);
}
.top10-divider .divider-label::before { content: '★'; font-size: 0.9em; }
.top10-divider .divider-label::after  { content: '★'; font-size: 0.9em; }

/* ════════════════════════════════
   TOP 3 — Gold / Silber / Bronze
════════════════════════════════ */
.chart-item[data-pos="1"] {
  background: #fff linear-gradient(#fffce8, #fff5cc);
  border-left-color: var(--accent-gold);
  box-shadow: 0 0 14px rgba(245,184,0,0.35);
}
.chart-item[data-pos="1"]:hover { box-shadow: 0 0 22px rgba(245,184,0,0.6); }
.chart-item[data-pos="1"] .trend span.pos { color: var(--accent-gold); font-size: 1.6em; }

.chart-item[data-pos="2"] {
  background: #fff linear-gradient(#f8f8f8, #ebebeb);
  border-left-color: var(--accent-silver);
}
.chart-item[data-pos="2"] .trend span.pos { color: var(--accent-silver); }

.chart-item[data-pos="3"] {
  background: #fff linear-gradient(#fff8f4, #ffeee2);
  border-left-color: var(--accent-bronze);
}
.chart-item[data-pos="3"] .trend span.pos { color: var(--accent-bronze); }

/* ── Medaillen – plastisch & deutlich ── */
.chart-item[data-pos="1"]::after,
.chart-item[data-pos="2"]::after,
.chart-item[data-pos="3"]::after {
  position: absolute;
  top: -14px; right: 8px;
  font-size: 2.4em;
  line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45)) drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  transform: rotate(-8deg);
  pointer-events: none;
}
.chart-item[data-pos="1"]::after { content: '🥇'; }
.chart-item[data-pos="2"]::after { content: '🥈'; }
.chart-item[data-pos="3"]::after { content: '🥉'; }

/* Karte hat genug Platz oben damit Medaille sichtbar bleibt */
.chart-item[data-pos="1"],
.chart-item[data-pos="2"],
.chart-item[data-pos="3"] { margin-top: 10px; }

/* ── Trend + Positionsnummer ── */
.chart-item .trend {
  text-align: center;
  min-width: 50px;
  margin-right: 12px;
  flex-shrink: 0;
}
.chart-item .trend span        { display: block; line-height: 1; }
.chart-item .trend span.up     { font-size: 1em;  color: #ddd; }
.chart-item .trend span.down   { font-size: 1em;  color: #ddd; }
.chart-item .trend span.pos    { font-size: 1.35em; font-weight: 800; color: #555; line-height: 1.2; }

.chart-list .trend.up   .up   { color: #2ecc71; }
.chart-list .trend.down .down { color: #e74c3c; }

/* ── Delta-Badge (+5 / -3) ── */
.delta-badge {
  display: inline-block;
  font-size: 0.6em; font-weight: 700;
  padding: 1px 5px; border-radius: 8px; margin-top: 3px;
  opacity: 0; transform: scale(0.7) translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.delta-badge.visible       { opacity: 1; transform: scale(1) translateY(0); }
.delta-badge.delta-up      { background: #d4f7e0; color: #1a7a40; }
.delta-badge.delta-down    { background: #fde8e8; color: #a01c1c; }

/* ── Album-Bild — 64×64 px ── */
.chart-item .image img {
  border-radius: 6px;
  width: 64px; height: 64px;
  object-fit: cover;
  display: block;
}

/* ── Meta ── */
.chart-item .meta   { flex: 1; padding-left: 12px; min-width: 0; }
.chart-item .title  { font-weight: 700; font-size: 0.98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 2px; margin-bottom: 2px; }
.chart-item .artist { font-size: 0.82em; text-align: right; color: #777; }

/* ── Spotify Play-Button ── */
.chart-item .player         { font-size: 2.6em; margin: 0 6px 0 10px; flex-shrink: 0; }
.chart-item .player a       { color: var(--accent-spotify); display: inline-block; transition: color .25s ease, transform .25s ease; }
.chart-item .player a:hover { color: #1ed760; transform: scale(1.18); }

/* ── Vote-Button ── */
.chart-item .vote { flex-shrink: 0; margin-left: 6px; }
.vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  padding: 5px 8px;
  cursor: pointer;
  color: #bbb;
  font-size: 1.4em;
  line-height: 1;
  transition: 250ms all;
}
.vote-btn:hover {
  border-color: var(--accent-vote);
  color: var(--accent-vote);
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(231,76,60,0.3);
  transition: 150ms all;
}
.vote-btn .vote-label {
  font-size: 0.38em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bbb;
  transition: 250ms color;
}
.vote-btn:hover .vote-label { color: var(--accent-vote); }
.vote-btn.voted {
  border-color: var(--accent-vote);
  color: var(--accent-vote);
  background: rgba(231,76,60,0.06);
}
.vote-btn.voted .vote-label { color: var(--accent-vote); }

/* ── LIFT-ANIMATION – Phase 1: Abheben ── */
.chart-item.lifting {
  box-shadow: var(--shadow-lift) !important;
  transform: scale(1.035) translateY(-5px) !important;
  z-index: 200 !important;
  transition: transform 600ms cubic-bezier(.4,0,.6,1),
              box-shadow 600ms ease !important;
}
/* ── LIFT-ANIMATION – Phase 2: Fliegen ── */
.chart-item.flying {
  z-index: 200 !important;
  box-shadow: var(--shadow-fly) !important;
}
/* ── LIFT-ANIMATION – Phase 3: Landen ── */
.chart-item.landing {
  z-index: 200 !important;
  transition: transform 320ms cubic-bezier(.1,.9,.2,1),
              box-shadow 320ms ease !important;
}
/* ── Slide-Mover ── */
.chart-item.sliding { z-index: 1; }

/* ── Fade In / Out ── */
.fade-in  { animation: fadeIn  .4s ease forwards; }
.fade-out { animation: fadeOut .4s ease forwards; }
@keyframes fadeIn  { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; height:0; padding:0; margin:0; } }

/* ── Modal ── */
.modal-content { border-radius: 1em; }
.modal-close {
  cursor: pointer; position: absolute; right: -20px; top: -20px;
  background: #fff; color: #000; font-size: 1.5em;
  border: 0 none; border-radius: 1em;
  box-sizing: content-box; box-shadow: 0 0 5px rgba(0,0,0,0.5);
  padding: 0.25em; width: 1em; height: 1em; line-height: 0;
}
#embedModalBody {
  max-height: 90vh; overflow: auto;
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
#embedModalBody iframe { width: 100%; display: block; border: none; }
.spinner { display: none; }

/* ══════════════════════════════
   DARK MODE
══════════════════════════════ */
@media (prefers-color-scheme: dark) {

  body { background-color: #1a1a1a; color: #ddd; }
  header { background-color: #000; opacity: 0.15; }

  .chart-header h2 {
    background: linear-gradient(135deg, #ffd560, #ff8c00);
    -webkit-background-clip: text; background-clip: text;
  }

  /* Basis-Karte */
  .chart-item {
    background: #111 linear-gradient(#222, #111);
    box-shadow: 0 0 11px rgba(255,255,255,0.2);
  }
  .chart-item:hover { box-shadow: 0 0 11px rgba(255,255,255,0.5); }

  /* Top 4–10 */
  .chart-item[data-pos="4"],  .chart-item[data-pos="5"],
  .chart-item[data-pos="6"],  .chart-item[data-pos="7"],
  .chart-item[data-pos="8"],  .chart-item[data-pos="9"],
  .chart-item[data-pos="10"] {
    background: #111 linear-gradient(#1e1e16, #151510);
    border-left-color: rgba(245,184,0,0.25);
  }

  /* Top 3 */
  .chart-item[data-pos="1"] {
    background: #111 linear-gradient(#332a00, #221c00);
    box-shadow: 0 0 19px rgba(245,184,0,0.35);
  }
  .chart-item[data-pos="1"]:hover { box-shadow: 0 0 28px rgba(245,184,0,0.55); }
  .chart-item[data-pos="2"] { background: #111 linear-gradient(#252525, #181818); }
  .chart-item[data-pos="3"] { background: #111 linear-gradient(#2a1a0e, #1a0e06); }

  .chart-item .trend span.up,
  .chart-item .trend span.down  { color: #444; }
  .chart-item .trend span.pos   { color: #bbb; }
  .chart-item[data-pos="1"] .trend span.pos { color: var(--accent-gold); }
  .chart-item[data-pos="2"] .trend span.pos { color: var(--accent-silver); }
  .chart-item[data-pos="3"] .trend span.pos { color: var(--accent-bronze); }

  .chart-item .title  { border-bottom-color: rgba(255,255,255,0.1); color: #eee; }
  .chart-item .artist { color: #888; }

  /* Delta-Badges */
  .delta-badge.delta-up   { background: #163d24; color: #5de08a; }
  .delta-badge.delta-down { background: #3d1616; color: #f07070; }

  /* Player */
  .chart-item .player a       { color: var(--accent-spotify); }
  .chart-item .player a:hover { color: #1ed760; }

  /* Vote */
  .vote-btn               { border-color: #444; color: #555; }
  .vote-btn .vote-label   { color: #555; }
  .vote-btn:hover         { border-color: var(--accent-vote); color: var(--accent-vote); }
  .vote-btn:hover .vote-label { color: var(--accent-vote); }
  .vote-btn.voted         { border-color: var(--accent-vote); color: var(--accent-vote); background: rgba(231,76,60,0.1); }

  /* Divider */
  .top10-divider::before,
  .top10-divider::after   { background: linear-gradient(to right, transparent, rgba(200,160,0,0.3), transparent); }
  .top10-divider .divider-label { color: #9a7e00; border-color: rgba(180,140,0,0.25); background: rgba(200,160,0,0.06); }

  .modal-close { background: #333; color: #eee; }
}