/* F12A: gebruikt bestaande Antenne thema-variabelen en knoppen waar beschikbaar */
.music-puzzle-panel{max-width:920px;margin:0 auto 3rem;padding:clamp(1rem,2vw,1.75rem)}
.music-puzzle-settings,.music-puzzle-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin:1rem 0}
.music-puzzle-settings label{display:flex;flex-direction:column;gap:.4rem;min-width:170px;flex:1}
.music-puzzle-settings input,.music-puzzle-settings select{max-width:100%;font:inherit;padding:.65rem;border:1px solid currentColor;border-radius:.4rem;background:transparent;color:inherit}
.music-puzzle-settings button,.music-puzzle-toolbar button{border:1px solid currentColor;border-radius:.4rem;padding:.72rem 1rem;font:inherit;font-weight:700;cursor:pointer;background:var(--theme-accent,var(--accent,#e99a66));color:var(--theme-on-accent,#17120f)}
.music-puzzle-toolbar strong{font-variant-numeric:tabular-nums}.music-puzzle-toolbar button:disabled{opacity:.5;cursor:not-allowed}
.music-puzzle-toolbar [hidden]{display:none}.music-puzzle-note{line-height:1.5;opacity:.9}
.music-puzzle-grid{width:min(100%,640px);aspect-ratio:1;margin:1.5rem auto;display:grid;gap:3px;padding:4px;background:rgba(0,0,0,.35);border:2px solid currentColor;border-radius:.6rem;box-shadow:0 12px 35px rgba(0,0,0,.25)}
.music-puzzle-tile{min-width:0;min-height:0;border:2px solid transparent;position:relative;cursor:pointer;border-radius:.18rem;background-color:rgba(0,0,0,.2);background-repeat:no-repeat;touch-action:manipulation}
.music-puzzle-tile:focus-visible{outline:3px solid currentColor;outline-offset:1px}.music-puzzle-tile.is-selected{border-color:#fff;box-shadow:inset 0 0 0 2px rgba(0,0,0,.7)}
.music-puzzle-grid.is-paused{visibility:hidden}
@media(max-width:600px){.music-puzzle-settings label{min-width:100%}.music-puzzle-toolbar{align-items:center}.music-puzzle-grid{gap:2px}}

/* F12B: oefenvragen, uitsluitend bestaande themavariabelen / inherited styles */
.music-puzzle-quiz-config{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0;}
.music-puzzle-quiz-config label{display:flex;flex-direction:column;gap:6px;min-width:0;}
.music-puzzle-quiz-config input{width:100%;min-width:0;padding:10px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;}
.music-puzzle-question{margin:18px auto;padding:22px;max-width:650px;text-align:center;border:1px solid currentColor;border-radius:12px;}
.music-puzzle-question[hidden]{display:none!important;}
.music-puzzle-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;}
.music-puzzle-options button{padding:14px 10px;min-height:54px;cursor:pointer;}
@media(max-width:580px){.music-puzzle-quiz-config,.music-puzzle-options{grid-template-columns:1fr;}}
/* F12C: catalogus volgt automatisch de bestaande Antenne themakleuren. */
.rd-mp-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.rd-mp-card{overflow:hidden;border:1px solid var(--border-color,var(--border,#ffffff24));border-radius:14px;background:var(--surface,#ffffff08)}.rd-mp-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.rd-mp-card>div{padding:14px}.rd-mp-card h3{font-size:1.08rem;margin:0 0 6px}.rd-mp-card p{margin:0 0 12px}.rd-mp-card button{cursor:pointer;padding:9px 18px;border-radius:9px;background:var(--primary,var(--accent,#317fa4));color:var(--on-primary,#fff);border:0;font-weight:700}@media(max-width:850px){.rd-mp-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.rd-mp-catalog{grid-template-columns:1fr}}

/* F12C2B: puzzeldetail als eigen weergave en antwoord bovenop het bord. */
[data-mp-catalog-section][hidden],.rd-mp-play-layout[hidden],[data-mp-overlay][hidden],.rd-mp-quiz-overlay [hidden],.rd-mp-crumb [hidden]{display:none!important}
.rd-mp-crumb{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1rem;font-size:.9rem;opacity:.9}
.rd-mp-crumb button{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer}
.rd-mp-play-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(225px,290px);align-items:start;gap:1.1rem}
.rd-mp-play-layout .music-puzzle-panel{width:100%;max-width:none;margin:0}
.rd-mp-times{padding:1.25rem;border-radius:12px;position:sticky;top:1rem}
.rd-mp-times-info{opacity:.7;font-size:.87rem;line-height:1.5}
.rd-mp-stage{position:relative;max-width:640px;margin:1.5rem auto}
.rd-mp-stage .music-puzzle-grid{margin:0 auto}
.rd-mp-quiz-overlay{position:absolute;inset:0;z-index:15;display:grid;place-items:center;padding:clamp(8px,2vw,20px);background:rgba(0,0,0,.77);border-radius:12px;animation:rdMpFade .35s ease-out}
.rd-mp-quiz-card{width:min(100%,520px);max-height:100%;overflow-y:auto;border:1px solid var(--border-color,var(--border,currentColor));background:var(--surface,var(--theme-surface,#201914));border-radius:15px;padding:clamp(12px,2vw,24px);box-shadow:0 18px 48px rgba(0,0,0,.45);text-align:center}
.rd-mp-quiz-card .music-puzzle-question{margin:0;padding:0;border:0;max-width:none}
.rd-mp-complete{animation:rdMpPop .7s ease-out}.rd-mp-complete h3{font-size:clamp(1.4rem,3vw,2.3rem);margin:.4rem 0}.rd-mp-complete p{line-height:1.5}
.rd-mp-spark{font-size:3rem;color:var(--theme-accent,var(--accent,currentColor));display:block;animation:rdMpGlow 1.2s ease-in-out infinite alternate}
@keyframes rdMpFade{from{opacity:0}to{opacity:1}}@keyframes rdMpPop{from{transform:scale(.84);opacity:0}to{transform:scale(1);opacity:1}}@keyframes rdMpGlow{from{transform:scale(.9)}to{transform:scale(1.08)}}
@media(max-width:900px){.rd-mp-play-layout{grid-template-columns:1fr}.rd-mp-times{position:static}}
@media(prefers-reduced-motion:reduce){.rd-mp-quiz-overlay,.rd-mp-complete,.rd-mp-spark{animation:none}}

/* F12C2C1 FIX2 — keep the puzzle visible during pause, after completion and under the quiz. */
.music-puzzle-grid.is-paused{visibility:visible}
.music-puzzle-grid.is-paused .music-puzzle-tile{cursor:default}
.rd-mp-quiz-overlay{background:rgba(0,0,0,.42)}

/* F12C2C2B4 - geverifieerde prijsreveal */
.rd-mp-stage{position:relative}
.rd-mp-rewards{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(5,11,25,.78);border-radius:inherit;padding:16px;backdrop-filter:blur(5px)}
.rd-mp-rewards-card{width:min(96%,430px);max-height:95%;overflow:auto;text-align:center;border-radius:20px;padding:clamp(18px,4vw,32px);background:var(--rd-card-bg,var(--card-bg,#18243b));color:var(--rd-text,var(--text-color,#fff));border:1px solid var(--rd-border,rgba(255,255,255,.22));box-shadow:0 20px 55px rgba(0,0,0,.32)}
.rd-mp-rewards-card h3{margin:0 0 12px;font-size:clamp(22px,4vw,32px)}
.rd-mp-reward-items{display:grid;gap:10px;margin:20px 0}
.rd-mp-reward-item{opacity:0;transform:translateY(12px) scale(.97);transition:opacity .55s ease,transform .55s ease;padding:12px;border:1px solid var(--rd-border,rgba(255,255,255,.25));border-radius:12px;background:var(--rd-panel-bg,rgba(255,255,255,.09));font-weight:800;font-size:clamp(16px,3vw,22px)}
.rd-mp-reward-item.is-visible{opacity:1;transform:none}
.rd-mp-rewards-close{padding:10px 28px;border-radius:10px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.rd-mp-reward-item{transition:none}}

/* F12C2C2B5 - klaarlabels en prijsicoontjes */
.rd-mp-card{position:relative}
.rd-mp-card__media{position:relative;overflow:hidden}
.rd-mp-card__body{padding:14px}
.rd-mp-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.rd-mp-card.is-completed{box-shadow:0 0 0 2px rgba(214,52,52,.42),0 14px 32px rgba(0,0,0,.24)}
.rd-mp-card__ribbon{position:absolute;left:-20%;right:-20%;top:16%;transform:rotate(-18deg);display:flex;justify-content:center;align-items:center;padding:10px 0;background:rgba(192,24,24,.92);color:#fff;border:3px solid rgba(255,255,255,.92);font-weight:900;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 12px 30px rgba(0,0,0,.35);pointer-events:none}
.rd-mp-reward-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.rd-mp-reward-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border-color,var(--border,#ffffff24));background:var(--surface,#ffffff08);font-size:.82rem;font-weight:700;line-height:1}
.rd-mp-reward-chip__icon{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:999px;background:rgba(255,255,255,.12);font-size:.82rem}
.rd-mp-reward-chip--points .rd-mp-reward-chip__icon{background:rgba(82,154,255,.2)}
.rd-mp-reward-chip--gold .rd-mp-reward-chip__icon{background:rgba(255,200,64,.23)}
.rd-mp-reward-chip--cards .rd-mp-reward-chip__icon{background:rgba(123,92,255,.22)}
.rd-mp-reward-chip--bonus .rd-mp-reward-chip__icon{background:rgba(49,201,135,.24)}
.rd-mp-reward-chip--competition .rd-mp-reward-chip__icon{background:rgba(255,112,67,.24)}
.rd-mp-stage.is-finished .music-puzzle-grid,.music-puzzle-grid.is-finished{border-color:rgba(202,48,48,.95);box-shadow:0 0 0 4px rgba(202,48,48,.16),0 12px 35px rgba(0,0,0,.25)}
.rd-mp-finished-banner{position:absolute;inset:0;z-index:12;display:grid;place-items:center;pointer-events:none}
/* F12L: [hidden] must always suppress the completion ribbon for a fresh/in-progress round. */
.rd-mp-finished-banner[hidden]{display:none!important}
.rd-mp-finished-banner span{display:inline-flex;align-items:center;justify-content:center;min-width:min(92%,560px);padding:14px 30px;transform:rotate(-18deg);background:rgba(196,24,24,.9);color:#fff;border:4px solid rgba(255,255,255,.96);border-radius:10px;box-shadow:0 18px 38px rgba(0,0,0,.32);font-size:clamp(1.5rem,4vw,3rem);font-weight:900;letter-spacing:.22em;text-transform:uppercase}
@media(max-width:600px){.rd-mp-card__ribbon{font-size:.9rem;padding:8px 0}.rd-mp-finished-banner span{padding:10px 16px;letter-spacing:.14em}}

/* F12C2C2C - Klassement naast de Muziek Puzzle, op Antenne-themakleuren */
.rd-mp-leaderboard{margin-top:1rem;min-height:72px}
.rd-mp-rank-list{display:grid;gap:.45rem;margin:0;padding:0;list-style:none;counter-reset:none}
.rd-mp-rank-row{display:grid;grid-template-columns:1.7rem minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:.7rem .55rem;border-radius:9px;border:1px solid var(--border-color,var(--border,#ffffff24));background:var(--surface,#ffffff08);font-size:.91rem}
.rd-mp-rank-row.is-you{border-color:var(--theme-accent,var(--accent,currentColor));box-shadow:inset 3px 0 0 var(--theme-accent,var(--accent,currentColor))}
.rd-mp-rank-position{font-weight:800;opacity:.85}
.rd-mp-rank-name{min-width:0;overflow-wrap:anywhere}
.rd-mp-rank-time{white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:.9rem}
.rd-mp-my-rank{margin:1rem 0 0;border:1px solid var(--border-color,var(--border,#ffffff24));padding:.75rem;border-radius:9px;font-size:.9rem;font-weight:700}
.rd-mp-times .module-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem;align-items:center}
.rd-mp-times .module-heading__tag{font-size:.74rem}


/* F12C2G — Eigen Radio-Digitaal prijsafbeeldingen in puzzelkaarten en popup */
.music-puzzle-page .rd-mp-reward-chip__icon{width:31px;height:31px;flex:0 0 31px;background:transparent;border-radius:0}
.music-puzzle-page .rd-mp-reward-chip__icon img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))}
.music-puzzle-page .rd-mp-reward-chip{min-height:42px;gap:7px;padding:5px 10px}
.music-puzzle-page .rd-mp-reward-item{display:flex;align-items:center;justify-content:center;gap:13px;text-align:left}
.music-puzzle-page .rd-mp-reward-image{width:56px;height:56px;flex:0 0 56px;object-fit:contain;display:block}
@media(max-width:520px){.music-puzzle-page .rd-mp-reward-image{width:42px;height:42px;flex-basis:42px}}

/* F15C — Ontwerp-presets, uitsluitend wanneer expliciet bij een puzzel gekozen.
   De oude (default) puzzelvormgeving en Antenne-themakleuren blijven intact. */
.rd-mp-card[data-mp-design-active="1"]{
  border-radius:var(--mp-card-radius,14px);
  background-color:var(--mp-panel-color,var(--surface,#ffffff08));
  color:var(--mp-text-color,inherit);
  font-family:var(--mp-font,inherit);
  border-color:var(--mp-accent-color,var(--border-color,var(--border,#ffffff24)));
}
.rd-mp-card[data-mp-design-active="1"] .rd-mp-card__media{padding:0}
.rd-mp-card[data-mp-design-active="1"] .rd-mp-card__ribbon{background:var(--mp-finished-color,rgba(192,24,24,.92))}
.rd-mp-card[data-mp-design-active="1"][data-mp-chip-style="compact"] .rd-mp-reward-chip{padding:3px 7px;min-height:34px;font-size:.74rem}
.rd-mp-card[data-mp-design-active="1"][data-mp-chip-style="compact"] .rd-mp-reward-chip__icon{width:23px;height:23px;flex-basis:23px}
.rd-mp-design-intro[hidden]{display:none!important}
.rd-mp-design-intro{margin:0 0 12px;opacity:.85;line-height:1.5}
.rd-mp-play-layout[data-mp-design-active="1"]{
  color:var(--mp-text-color,inherit);
  font-family:var(--mp-font,inherit);
}
.rd-mp-play-layout[data-mp-design-active="1"] .music-puzzle-panel,
.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-times{
  position:relative;
  isolation:isolate;
  background-color:var(--mp-panel-color,var(--surface,#ffffff08));
  border-radius:var(--mp-panel-radius,14px);
  border-color:var(--mp-accent-color,var(--border-color,var(--border,currentColor)));
}
.rd-mp-play-layout[data-mp-design-active="1"] .music-puzzle-panel::before,
.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-times::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--mp-background-image,none);
  background-position:center;background-size:cover;
  border-radius:inherit;opacity:var(--mp-background-opacity,.12);
}
.rd-mp-play-layout[data-mp-design-active="1"] .music-puzzle-panel > *,
.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-times > *{position:relative;z-index:1}
.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-stage{max-width:var(--mp-board-width,640px)}
.rd-mp-play-layout[data-mp-design-active="1"] .music-puzzle-grid{
  width:100%;max-width:var(--mp-board-width,640px);
  gap:var(--mp-gap,3px);padding:var(--mp-padding,4px);
  border-color:var(--mp-accent-color,currentColor);
  box-shadow:0 12px 35px rgba(0,0,0,.25);
}
.rd-mp-play-layout[data-mp-design-active="1"] .music-puzzle-tile{
  border-radius:var(--mp-tile-radius,3px);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.06);
}
.rd-mp-play-layout[data-mp-design-active="1"] .music-puzzle-tile:not(.is-selected){border-color:var(--mp-tile-border-color,transparent)}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-tile-effect="raised"] .music-puzzle-tile{box-shadow:inset 0 3px 3px rgba(255,255,255,.24),inset 0 -4px 6px rgba(0,0,0,.38)}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-tile-effect="deep"] .music-puzzle-tile{box-shadow:inset 0 5px 4px rgba(255,255,255,.32),inset 0 -7px 9px rgba(0,0,0,.52),0 2px 3px rgba(0,0,0,.3)}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-shadow="none"] .music-puzzle-grid{box-shadow:none}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-shadow="soft"] .music-puzzle-grid{box-shadow:0 6px 15px rgba(0,0,0,.18)}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-shadow="strong"] .music-puzzle-grid{box-shadow:0 22px 42px rgba(0,0,0,.48)}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-layout="compact"] .music-puzzle-panel{padding:clamp(.75rem,1.5vw,1.1rem)}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-layout="spacious"] .music-puzzle-panel{padding:clamp(1.5rem,3vw,2.2rem)}
.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-quiz-overlay{background:rgba(0,0,0,var(--mp-overlay-dim,.42))}
.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-finished-banner span{background:var(--mp-finished-color,rgba(196,24,24,.9))}
.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-rewards-card{border-color:var(--mp-accent-color,var(--rd-border,rgba(255,255,255,.22)))}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-motion="subtle"] .rd-mp-quiz-overlay{animation-duration:.18s}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-motion="none"] .rd-mp-quiz-overlay,
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-motion="none"] .rd-mp-complete,
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-motion="none"] .rd-mp-spark{animation:none!important}
.rd-mp-play-layout[data-mp-design-active="1"][data-mp-motion="none"] .rd-mp-reward-item{transition:none!important}
@media(max-width:600px){
  .rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-stage{width:100%;max-width:100%}
  .rd-mp-play-layout[data-mp-design-active="1"] .music-puzzle-grid{max-width:100%}
}

/* Alleen het paneel met puzzeltijden krijgt een ondoorzichtige achtergrond. */
.rd-mp-play-layout .rd-mp-times,.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-times{background:#2d201b;background-image:none}
.rd-mp-play-layout[data-mp-design-active="1"] .rd-mp-times::before{display:none}