:root{
  --cyan:#00d9ff; --blue:#0b8cff; --orange:#ff7a00; --red:#ff355b; --violet:#c24cff;
  --bg:#020913; --panel:rgba(3,17,29,.96); --line:#0b72a0; --text:#f5fbff; --muted:#9bb5c5;
}
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
body{min-height:100vh;overflow-x:hidden}
.stage{position:relative;width:min(100vw,1024px);margin:0 auto;background:#020913}
.mockup{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.hot{position:absolute;border:0;background:transparent;cursor:pointer;padding:0;z-index:3}
.hot:focus-visible{outline:2px solid #fff;box-shadow:0 0 0 5px #00d9ff88;border-radius:8px}
.hot:hover{background:rgba(0,217,255,.06);box-shadow:inset 0 0 0 1px rgba(0,217,255,.35)}
/* Navigation positions relative to 1024x1536 */
.nav{top:2.0%;height:3.7%}
.home{left:19.5%;width:5.0%}.onair{left:24.8%;width:6.1%}.sendung{left:31.1%;width:7.4%}.playlist{left:38.6%;width:6.6%}.events{left:45.4%;width:5.8%}.team{left:51.5%;width:5.2%}.lounge{left:56.8%;width:9.0%}.about{left:66.1%;width:7.2%}.contact{left:73.4%;width:6.5%}.chat{left:81.1%;width:15.4%}
.game{top:19.25%;height:12.5%}.intro{left:3.1%;width:23.2%}.cover{left:27.2%;width:22.5%}.trivia{left:50.6%;width:22.5%}.battle{left:74.1%;width:22.6%}
.big-intro{left:3.1%;top:32.75%;width:61.2%;height:19.35%}.highscore-btn{left:66.9%;top:48.0%;width:30.5%;height:4.05%}
.list-intro{left:3.1%;top:53.3%;width:31.2%;height:4.1%}.list-cover{left:3.1%;top:57.4%;width:31.2%;height:4.1%}.list-trivia{left:3.1%;top:61.4%;width:31.2%;height:4.1%}.list-battle{left:3.1%;top:65.4%;width:31.2%;height:4.1%}
.challenge{left:35.5%;top:66.5%;width:29.6%;height:4.1%}
.score{top:55.1%;height:2.9%}.score.day{left:66.9%;width:9.5%}.score.week{left:77.1%;width:10.3%}.score.all{left:88.0%;width:9.0%}
.bottom{top:72.1%;height:10.0%}.events-card{left:3.0%;width:31.3%}.team-card{left:35.5%;width:29.3%}.community-card{left:66.0%;width:31.3%}
.modal{position:fixed;inset:0;background:rgba(0,2,8,.84);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:18px;z-index:99}
.modal.open{display:flex}.dialog{position:relative;width:min(900px,96vw);max-height:92vh;overflow:auto;border:1px solid #0ad7ff;border-radius:18px;background:linear-gradient(180deg,rgba(4,20,35,.98),rgba(1,7,16,.99));box-shadow:0 0 40px #00bfff55,0 0 100px #ff5a0028;padding:28px}
.close{position:absolute;right:14px;top:10px;border:0;background:none;color:#fff;font-size:36px;cursor:pointer;z-index:2}.eyebrow{color:var(--cyan);letter-spacing:.12em;font-weight:800;font-size:.78rem}.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.panel-head h2{font-size:clamp(2rem,5vw,4rem);margin:.15em 0;background:linear-gradient(90deg,#76e7ff,#fff,#ff7c20);-webkit-background-clip:text;color:transparent}.panel-head p{margin:.25rem 0;color:#cde6f5}.score-pill{border:1px solid #00d9ff;border-radius:12px;padding:10px 14px;background:#021828;box-shadow:0 0 20px #00d9ff33;white-space:nowrap}.progress{height:8px;border-radius:99px;background:#0c2435;margin:18px 0 22px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#00baff,#49e5ff);box-shadow:0 0 16px #00d9ff}.question-card{border:1px solid #0f5473;border-radius:16px;background:#06131f;padding:22px}.question-card h3{font-size:clamp(1.25rem,3vw,1.8rem);margin:15px 0 18px}.question-visual{min-height:110px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,#073e67 0,#03111f 55%,#020811 100%);font-size:52px;box-shadow:inset 0 0 35px #00d9ff22}.wave{width:82%;height:54px;background:repeating-linear-gradient(90deg,#09d6ff 0 2px,transparent 2px 6px);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);transform:scaleY(.55);filter:drop-shadow(0 0 6px #09d6ff)}.cover-art{width:110px;height:110px;border-radius:10px;background:linear-gradient(135deg,#06182b 0 45%,#ff2d55 46% 52%,#ff7a00 53% 60%,#0b8cff 61%);box-shadow:0 0 22px #ff3c5a55}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer{padding:14px 16px;text-align:left;border:1px solid #3d6d86;background:#0a2030;color:#fff;border-radius:10px;font-size:1rem;cursor:pointer}.answer:hover{border-color:#00d9ff;box-shadow:0 0 15px #00d9ff22}.answer.correct{background:#063725;border-color:#00e68a}.answer.wrong{background:#43101b;border-color:#ff3b61}.answer:disabled{cursor:default}.game-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:#a8c2d2}.primary{border:1px solid #00d9ff;border-radius:10px;color:#fff;background:linear-gradient(180deg,#0b98ff,#006ad9);padding:12px 22px;font-weight:800;cursor:pointer}.primary:disabled{opacity:.45;cursor:not-allowed}
.info-card{padding:10px 4px 4px}.info-card h2{font-size:2rem;margin:.2rem 0 1rem;color:#61e4ff}.info-card p,.info-card li{line-height:1.65;color:#d6e7f1}.leaderboard{width:100%;border-collapse:collapse}.leaderboard td{padding:10px 8px;border-bottom:1px solid #0d3950}.leaderboard td:last-child{text-align:right;color:#ffd34d;font-weight:800}
@media(max-width:720px){.dialog{padding:20px 16px}.answers{grid-template-columns:1fr}.panel-head{display:block}.score-pill{display:inline-block;margin-top:10px}.hot:hover{box-shadow:none;background:transparent}}

/* Functional audio previews + changing cover art */
.audio-demo{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}.audio-demo .wave{height:58px}.audio-demo small,.demo-note{color:#7fa6bb;font-size:.76rem}.audio-play{border:1px solid #00d9ff;border-radius:9px;background:#04253a;color:#baf5ff;padding:10px 14px;font-weight:800;cursor:pointer;box-shadow:0 0 16px #00d9ff22}.audio-play:hover,.audio-play.playing{background:#073f5e;box-shadow:0 0 22px #00d9ff55}.cover-art{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;padding:10px;color:#fff;font-size:.7rem;letter-spacing:.16em}.cover-art b{font-size:2.2rem;line-height:1;text-shadow:0 0 14px #fff}.cover-art:before,.cover-art:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);opacity:.85}.cover-art:before{width:90px;height:90px;left:-30px;top:-25px}.cover-art:after{width:70px;height:70px;right:-20px;bottom:-18px}.cover-art span,.cover-art b{position:relative;z-index:2}.cover-0{background:radial-gradient(circle at 30% 30%,#20c7ff 0 12%,transparent 13%),linear-gradient(135deg,#020611 0 45%,#ff4b19 46% 58%,#081b35 59%)}.cover-0:before{background:#00aaff}.cover-0:after{background:#ff4a00}.cover-1{background:linear-gradient(145deg,#f3d8b5 0 38%,#9b5c44 39% 54%,#27151f 55%)}.cover-1:before{background:#ffd39a}.cover-1:after{background:#b85d7e}.cover-2{background:linear-gradient(30deg,#0f071e,#362868 42%,#ec2c81 43% 58%,#111a42 59%)}.cover-2:before{background:#804dff}.cover-2:after{background:#ff2f88}.cover-3{background:linear-gradient(160deg,#fff0c7,#ffba2f 40%,#d02a42 41% 58%,#2b0c1d 59%)}.cover-3:before{background:#ffd858}.cover-3:after{background:#ff1e37}.cover-4{background:linear-gradient(135deg,#0a0714,#741d4f 35%,#fe6a83 36% 53%,#180d29 54%)}.cover-4:before{background:#ed4b9a}.cover-4:after{background:#6d34ff}.battle-player{width:100%;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch}.battle-side{min-height:150px;border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:1.1rem;text-align:center}.battle-side.fire{border:1px solid #ff6a19;background:radial-gradient(circle at 50% 100%,#6d1e00,#1a0905 70%);box-shadow:inset 0 0 28px #ff4d001f}.battle-side.ice{border:1px solid #00bfff;background:radial-gradient(circle at 50% 100%,#003a62,#06101c 70%);box-shadow:inset 0 0 28px #00bbff1f}.versus{display:flex;align-items:center;font-weight:900;color:#fff;font-size:1.45rem;text-shadow:0 0 14px #fff}.battle-player .demo-note{grid-column:1/-1;margin:0;text-align:center}.quiz-icon{font-size:64px}
@media(max-width:620px){.battle-player{grid-template-columns:1fr}.versus{justify-content:center}.battle-player .demo-note{grid-column:1}.battle-side{min-height:110px}}

/* Original music catalog artwork */
.real-cover{width:220px;height:220px;border-radius:16px;border:1px solid #1b6b8f;background:linear-gradient(145deg,#04111d,#0a2638);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;color:#bcecff;box-shadow:0 0 30px #00c8ff2e}
.loading-cover:after{content:"";width:28px;height:28px;border:3px solid #14516a;border-top-color:#00ddff;border-radius:50%;animation:spin .8s linear infinite;margin-top:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.cover-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px}
.real-cover-img{width:min(260px,70vw);height:min(260px,70vw);object-fit:cover;border-radius:14px;border:1px solid #2c789b;box-shadow:0 0 30px #00c8ff36,0 0 55px #ff57221c}
.cover-figure figcaption{font-size:.72rem;color:#7fa6bb}
.error-cover small{color:#7fa6bb}
.battle-art{width:96px;height:96px;border-radius:10px;background:#061521;display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;border:1px solid #24556b;box-shadow:0 0 18px #0008}
.battle-art img{width:100%;height:100%;object-fit:cover}
.audio-play:disabled{opacity:.7;cursor:wait}

/* Shared Netlify highscore: covers the sample leaderboard baked into the mockup. */
.live-highscore{position:absolute;left:67.25%;top:57.95%;width:29.15%;height:13.05%;z-index:6;background:#03101b;border-radius:7px;overflow:hidden;pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.68)}
.live-score-rows{height:100%;display:grid;grid-template-rows:repeat(7,1fr);padding:4.5% 6.5% 4.5%;gap:0;align-content:center}
.live-score-row{display:grid;grid-template-columns:9% 1fr auto;align-items:center;column-gap:3%;min-height:0;border-bottom:1px solid rgba(38,111,143,.28);font-size:clamp(7px,1.05vw,12px);line-height:1;color:#f6fbff}
.live-score-row:last-child{border-bottom:0}.live-score-rank{display:flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;border-radius:.45em;background:#0a2538;border:1px solid #15506d;font-weight:900}.live-score-row:nth-child(1) .live-score-rank{background:#9a6200;border-color:#ffd04b}.live-score-row:nth-child(2) .live-score-rank{background:#4b4d55;border-color:#d6d9e3}.live-score-row:nth-child(3) .live-score-rank{background:#63351c;border-color:#d88955}.live-score-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.live-score-points{white-space:nowrap;text-align:right;color:#fff}.live-score-row:nth-child(1) .live-score-points{color:#ffd54f;font-weight:900}.live-score-row.me{background:linear-gradient(90deg,rgba(0,217,255,.12),transparent);box-shadow:inset 2px 0 #00d9ff}.live-score-loading,.live-score-empty{grid-row:1/-1;display:flex;align-items:center;justify-content:center;text-align:center;color:#8bb4ca;font-size:clamp(7px,1vw,11px);padding:10%}
.player-form{display:grid;gap:14px;margin-top:18px}.player-form label{font-weight:800;color:#dff7ff}.player-form input{width:100%;border:1px solid #24607d;background:#061725;color:#fff;border-radius:10px;padding:13px 14px;font-size:1rem;outline:none}.player-form input:focus{border-color:#00d9ff;box-shadow:0 0 0 3px #00d9ff22}.form-error{min-height:1.3em;color:#ff6b83;font-size:.9rem}.profile-note{color:#8eb2c5!important;font-size:.86rem}.leaderboard .me td{background:#07314a;color:#fff}.leaderboard .me td:last-child{color:#63ecff}.highscore-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.secondary{border:1px solid #31586d;border-radius:10px;color:#d7edf8;background:#071724;padding:12px 22px;font-weight:800;cursor:pointer}


/* Final highscore cleanup: the mockup image contains a baked-in sample list.
   Keep the working live leaderboard inset, but use a separate wider opaque layer
   behind it so no sample names can peek out around the live rows. */
.sample-highscore-cover{
  position:absolute;
  left:66.55%;
  top:58.18%;
  width:30.05%;
  height:12.72%;
  z-index:5;
  background:#03101b;
  border-radius:4px;
  pointer-events:none;
}
.live-highscore{
  z-index:7;
}

/* --- MoonFire Timeline / Hitster-inspiriertes eigenes Spiel --- */
.timeline-launch{
  position:absolute;left:50%;top:18.15%;transform:translate(-50%,-50%);z-index:8;
  min-width:min(440px,62%);min-height:38px;padding:7px 18px;border:1px solid #00d9ff;border-radius:999px;
  background:linear-gradient(90deg,rgba(0,93,160,.96),rgba(4,20,35,.98) 48%,rgba(169,55,0,.94));
  color:#fff;box-shadow:0 0 16px #00cfff66,0 0 22px #ff6a003d,inset 0 0 18px #ffffff0d;
  display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-weight:900;letter-spacing:.04em;
}
.timeline-launch:hover{box-shadow:0 0 24px #00d9ff99,0 0 28px #ff6a0066;transform:translate(-50%,-50%) scale(1.02)}
.timeline-launch small{font-size:.68rem;font-weight:600;color:#d5effa;letter-spacing:0}.timeline-new{font-size:.68rem;background:#ff5a00;color:#fff;border-radius:99px;padding:3px 7px;box-shadow:0 0 10px #ff6a00}

.timeline-game{padding:2px 2px 8px}.timeline-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.timeline-head h2{margin:.15rem 0;font-size:clamp(2rem,5vw,3.5rem);background:linear-gradient(90deg,#5ce9ff,#fff,#ff812d);-webkit-background-clip:text;color:transparent}.timeline-head p{margin:.25rem 0;color:#cde6f5}.timeline-round-pill{border:1px solid #00d9ff;border-radius:12px;background:#041c2c;padding:9px 13px;white-space:nowrap}.timeline-help{margin:14px 0;padding:10px 13px;border:1px solid #164a62;border-radius:10px;background:#061522;color:#b9d5e5;font-size:.92rem}.mystery-song{border:1px solid #0a7fa8;border-radius:14px;background:radial-gradient(circle at 50% 20%,#093653,#04111e 65%);padding:16px;text-align:center;box-shadow:inset 0 0 30px #00cfff15}.mystery-icon{font-size:44px;filter:drop-shadow(0 0 12px #00d9ff)}.mystery-song h3{margin:7px 0 10px}.timeline-audio{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.timeline-audio .audio-play{max-width:320px}.timeline-board{margin-top:18px;display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:10px 5px 18px;scrollbar-color:#0aa5d1 #04111e}.timeline-card{flex:0 0 150px;min-height:118px;border:1px solid #376274;border-radius:12px;background:linear-gradient(180deg,#0a2232,#06121d);padding:12px;display:flex;flex-direction:column;justify-content:center;text-align:center;box-shadow:0 0 14px #0008}.timeline-card .year{font-size:1.55rem;font-weight:950;color:#ffd257;text-shadow:0 0 12px #ff9c0033}.timeline-card .title{font-weight:800;margin-top:5px}.timeline-card .artist{font-size:.78rem;color:#9fb9c8;margin-top:4px}.timeline-slot{flex:0 0 58px;min-height:118px;border:1px dashed #00cfff;border-radius:12px;background:#00cfff0a;color:#5eeaff;display:flex;align-items:center;justify-content:center;text-align:center;padding:5px;cursor:pointer;font-size:.72rem;font-weight:800;transition:.18s}.timeline-slot:hover,.timeline-slot.dragover{background:#00cfff22;box-shadow:0 0 18px #00d9ff66;transform:scale(1.04)}.timeline-slot.locked{pointer-events:none;opacity:.45}.timeline-drag{margin:13px auto 0;width:min(390px,100%);border:1px solid #ff7d1a;border-radius:12px;background:linear-gradient(135deg,#2c1305,#081a28);padding:12px;cursor:grab;box-shadow:0 0 16px #ff6a0033}.timeline-drag:active{cursor:grabbing}.timeline-drag strong{display:block;color:#fff}.timeline-drag small{color:#ffc18e}.timeline-result{margin-top:12px;min-height:48px;border-radius:10px;padding:10px 12px;display:none}.timeline-result.show{display:block}.timeline-result.good{border:1px solid #00e68a;background:#063725;color:#d5ffec}.timeline-result.bad{border:1px solid #ff4e6c;background:#3b0c18;color:#ffe0e6}.timeline-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.timeline-score{font-weight:900;color:#ffd257}.timeline-score span{font-size:1.3rem}.timeline-finish-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.timeline-year-reveal{color:#ffd257;font-weight:950}.timeline-tip{font-size:.78rem;color:#89aabd;margin-top:6px}
@media(max-width:720px){.timeline-launch{min-width:78%;top:18.05%;padding:5px 10px;min-height:32px;font-size:.72rem}.timeline-launch small{display:none}.timeline-head{display:block}.timeline-round-pill{display:inline-block;margin-top:8px}.timeline-card{flex-basis:128px}.timeline-slot{flex-basis:48px}.timeline-board{margin-left:-7px;margin-right:-7px}.timeline-controls{align-items:stretch;flex-direction:column}.timeline-controls .primary{width:100%}}


/* Five games in one row. This layer fully replaces the four baked-in mockup cards. */
.game-card-row{
  position:absolute;left:3.05%;top:19.20%;width:93.90%;height:12.55%;z-index:8;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.05%;
  padding:.12%;background:#020913;
}
.game-card{
  position:relative;min-width:0;border-radius:9px;padding:7% 5.5% 5.5%;
  color:#fff;background:radial-gradient(circle at 50% 18%,rgba(0,198,255,.12),rgba(4,12,22,.97) 56%,#020812 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;
  cursor:pointer;font-family:inherit;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;
}
.game-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 35%,rgba(255,255,255,.02));}
.game-card:hover{transform:translateY(-2px);}
.game-card-icon{font-size:clamp(22px,3.8vw,46px);line-height:1;filter:drop-shadow(0 0 9px currentColor);margin-bottom:2px}
.game-card strong{font-size:clamp(10px,1.65vw,20px);line-height:1.05;white-space:nowrap;text-shadow:0 0 12px currentColor}
.game-card small{font-size:clamp(6.5px,.92vw,11px);line-height:1.25;color:#eef8ff;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.game-card-cta{width:100%;border:1px solid currentColor;border-radius:7px;padding:4.5% 3%;font-size:clamp(6.5px,.85vw,10px);font-weight:900;background:rgba(3,15,27,.78);box-shadow:inset 0 0 14px rgba(255,255,255,.03),0 0 10px currentColor}
.game-card-badge{position:absolute;right:5px;top:5px;font-size:clamp(5px,.65vw,8px);font-weight:900;padding:2px 5px;border-radius:999px;background:#ff5b00;color:#fff;box-shadow:0 0 10px #ff6a00}
.game-card-intro{color:#39ddff;border:1px solid #00d7ff;box-shadow:inset 0 0 26px #00cfff1f,0 0 14px #00cfff46}
.game-card-cover{color:#ff5571;border:1px solid #ff355b;box-shadow:inset 0 0 26px #ff24401f,0 0 14px #ff355b42}
.game-card-trivia{color:#eb63ff;border:1px solid #cd46ff;box-shadow:inset 0 0 26px #c72fff1f,0 0 14px #c84cff42}
.game-card-battle{color:#ffad31;border:1px solid #ff7a00;box-shadow:inset 0 0 26px #ff6a001f,0 0 14px #ff7a0042}
.game-card-timeline{color:#5de8ff;border:1px solid #42ddff;background:radial-gradient(circle at 50% 18%,rgba(255,111,0,.16),rgba(4,22,34,.98) 58%,#020812 100%);box-shadow:inset 0 0 26px #ff6a0019,0 0 14px #00d9ff46}
@media(max-width:720px){
  .game-card-row{gap:.7%;left:2.5%;width:95%;}
  .game-card{border-radius:6px;padding:8% 3.5% 5%}
  .game-card small{font-size:clamp(5.8px,1.05vw,8px)}
  .game-card-cta{padding:5% 1%;}
}


/* Timeline als fünfter Eintrag in „Aktuelle Spiele“ */
.current-timeline{
  position:absolute;left:3.1%;top:69.42%;width:31.2%;height:2.38%;z-index:8;
  border:1px solid #15506d;border-radius:5px;background:#061522;color:#f5fbff;
  display:grid;grid-template-columns:12% 1fr auto;align-items:center;padding:0 4%;
  font-family:inherit;cursor:pointer;box-shadow:inset 0 0 14px rgba(0,217,255,.04);
}
.current-timeline:hover{border-color:#00d9ff;background:#082033;box-shadow:0 0 12px rgba(0,217,255,.25)}
.current-timeline span{font-size:clamp(9px,1.5vw,17px);color:#5de8ff;filter:drop-shadow(0 0 5px #00d9ff)}
.current-timeline strong{text-align:left;font-size:clamp(7px,1.05vw,12px);letter-spacing:.02em}
.current-timeline small{font-size:clamp(10px,1.5vw,18px);color:#5de8ff;font-weight:900}

/* Aktuelle Spiele: komplette Liste als einheitliche 5er-Liste */
.current-games-list{
  position:absolute;
  left:3.10%;
  top:55.73%;
  width:31.20%;
  height:15.45%;
  z-index:9;
  display:grid;
  grid-template-rows:repeat(5,1fr);
  background:#03111e;
  border-radius:0 0 7px 7px;
  overflow:hidden;
}
.current-game{
  min-width:0;
  border:0;
  border-bottom:1px solid rgba(35,96,125,.48);
  background:#03111e;
  color:#f6fbff;
  display:grid;
  grid-template-columns:15% 1fr auto;
  align-items:center;
  column-gap:3.4%;
  padding:0 4.2%;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.current-game:last-child{border-bottom:0}
.current-game:hover{background:#062033}
.current-game-icon{
  width:100%;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid currentColor;
  border-radius:7px;
  background:#061928;
  font-size:clamp(12px,1.75vw,22px);
  line-height:1;
  box-shadow:0 0 9px currentColor,inset 0 0 9px rgba(255,255,255,.04);
}
.current-game-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.current-game-copy strong{font-size:clamp(8px,1.18vw,13px);line-height:1.05;color:#fff;white-space:nowrap}
.current-game-copy small{font-size:clamp(6px,.78vw,9px);line-height:1.1;color:#dceaf2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.current-game-play{font-size:clamp(6px,.78vw,9px);line-height:1;color:#24e9ff;white-space:nowrap}
.current-game-intro{color:#2fdcff}
.current-game-cover{color:#ff4768}
.current-game-trivia{color:#df54ff}
.current-game-battle{color:#ff8b16}
.current-game-timeline{color:#58e6ff}
@media(max-width:720px){
  .current-game{grid-template-columns:14% 1fr auto;column-gap:2.8%;padding:0 3.6%}
  .current-game-copy small{font-size:clamp(5.2px,.86vw,7px)}
  .current-game-play{font-size:clamp(5.2px,.84vw,7px)}
}
/* Einheitliche MoonFire-Hauptnavigation – wie auf der Startseite */
.mf-top-nav{position:absolute;z-index:50;left:20.5%;top:0;width:78.0%;height:5.54%;display:flex;align-items:center;justify-content:space-between;gap:.2%;padding:0 .65%;background:#02070d;border-bottom:1px solid rgba(0,200,255,.28);white-space:nowrap;overflow:hidden;line-height:1;font-family:Arial,Helvetica,sans-serif}
.mf-top-nav-item{position:relative;display:flex;align-items:center;justify-content:center;height:100%;padding:0 .18%;color:#fff;font-size:clamp(6px,.92vw,10px);font-weight:700;line-height:1;text-transform:none;text-shadow:0 1px 3px #000;text-decoration:none;cursor:pointer}
.mf-top-nav-item:visited{color:#fff}.mf-top-nav-item:hover{color:#dff8ff}.mf-top-nav-item:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:4px}
.mf-top-nav-item.active,.mf-top-nav-item.active:visited{color:#00d8ff}
.mf-top-nav-item.active::after{content:"";position:absolute;left:8%;right:8%;bottom:25%;height:2px;background:#00d8ff;border-radius:2px;box-shadow:0 0 8px rgba(0,216,255,.55)}


/* Play/Stop + Lautstärke für Intro Quiz, SongBattle und Timeline */
.audio-volume{
  width:min(360px,100%);display:grid;grid-template-columns:auto minmax(110px,1fr) 44px;
  align-items:center;gap:10px;padding:8px 11px;border:1px solid #174d66;border-radius:10px;
  background:#031a29;color:#bcecff;font-size:.76rem;font-weight:800;
}
.audio-volume span{white-space:nowrap}.audio-volume-value{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.audio-volume-range{width:100%;accent-color:#00d9ff;cursor:pointer}
.audio-play.playing{border-color:#ff7440;background:linear-gradient(180deg,#6b260e,#3a1106);color:#fff4ec;box-shadow:0 0 22px #ff5f2f55}
.audio-play.loading{cursor:wait;opacity:.82}
.battle-player .battle-volume{grid-column:1/-1;justify-self:center;margin-top:-2px}
.timeline-audio{align-items:center}.timeline-audio .timeline-volume{flex:1 1 260px;max-width:360px}
@media(max-width:620px){.audio-volume{grid-template-columns:1fr 42px}.audio-volume span{grid-column:1/-1}.battle-player .battle-volume{grid-column:1}}