/* Pagina "Speel mee" (meespelen.php). Bouwt verder op evenementen.css (kleuren, knoppen, secties,
   muzieklettertype). Alle klassen hier beginnen met "sp-". */

.sp-intro-actions { margin-top: 26px; }

/* ---------- Iedereen is welkom: van pp tot ff ---------- */
.sp-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.sp-level { background: var(--ev-raised); border: 1px solid var(--ev-line); border-radius: 20px; padding: 24px 26px 28px; }
.sp-dyn { display: block; font-size: 46px; line-height: 1; height: 38px; margin-bottom: 18px; color: var(--ev-text); }
.sp-level h2 { font-size: 22px; margin: 0 0 8px; }
.sp-level p { margin: 0; color: var(--ev-muted); font-size: 16px; }
/* ---------- Waarom samenspelen (een akkoord) en goed voor kinderen (stijgende noten) ---------- */
.sp-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.sp-why-intro h2, .sp-why-intro h3 { font-size: 32px; line-height: 1.15; margin: 0 0 12px; }
.sp-why-intro > p { margin: 0; max-width: 460px; color: var(--ev-muted); font-size: 17px; }
/* Kinderen: gespiegeld (tekening rechts), zodat de twee blokken niet hetzelfde ogen */
.sp-why-kids { margin-top: 110px; }
.sp-why-kids .sp-why-intro { order: 2; }
.sp-chord, .sp-rise { display: block; width: 100%; height: auto; margin-top: 30px; overflow: visible; }
.sp-chord { max-width: 440px; }
.sp-rise { max-width: 620px; }
.sp-chord .l, .sp-rise .l { stroke: var(--ev-staff); stroke-width: 1.4; }
.sp-chord .w, .sp-chord .clef, .sp-rise .w, .sp-rise .dyn { fill: var(--ev-text); }
.sp-chord .clef { opacity: .85; }
.sp-rise .s { stroke: var(--ev-text); stroke-width: 2.8; }
/* Notennaam in de notenkop, zoals in beginnersboekjes */
.sp-rise .nm { fill: var(--ev-bg); font-size: 15px; font-weight: bold; pointer-events: none; }
.sp-rise .hair { stroke: rgba(252, 252, 252, .45); stroke-width: 2; }
.sp-chord .lead { fill: none; stroke: rgba(252, 252, 252, .3); stroke-width: 1.4; stroke-dasharray: 3 4; transition: stroke .2s; }
.sp-chord .lab, .sp-rise .lab { fill: var(--ev-muted); font-size: 16px; font-weight: bold; transition: fill .2s; }
.sp-svg-note .w { transition: filter .2s; }
.sp-svg-note.is-hot .w { filter: drop-shadow(0 0 8px rgba(252, 252, 252, .85)); }
.sp-svg-note.is-hot .lead { stroke: var(--ev-text); }
.sp-svg-note.is-hot .lab { fill: var(--ev-text); }
/* Stijgende noten verschijnen één voor één (JS zet is-armed, en is-in zodra ze in beeld komen) */
.sp-rise.is-armed .sp-svg-note, .sp-rise.is-armed .sp-beam { opacity: 0; transform: translateY(16px); }
.sp-rise.is-armed .hair { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp-rise.is-in .sp-svg-note, .sp-rise.is-in .sp-beam { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--n) * .22s); }
.sp-rise.is-in .hair { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease .3s; }
.sp-why-list { border-top: 1px solid var(--ev-line); }
.sp-why-item { padding: 20px 0 22px; border-bottom: 1px solid var(--ev-line); }
.sp-why-item h3, .sp-why-item h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 20px; }
/* Hele noot als bolletje (akkoord), gevulde noot bij de stijgende noten */
.sp-why-item h3::before, .sp-why-item h4::before { content: ""; flex-shrink: 0; width: 11px; height: 8px; border: 3px solid var(--ev-text); border-radius: 50%; transform: rotate(-20deg); }
.sp-why-item h4::before { background: var(--ev-text); }
.sp-why-item p { margin: 0 0 0 29px; color: var(--ev-muted); font-size: 16px; }

/* ---------- Wat speel jij? Een open zin in plaats van een lijst ---------- */
.sp-play { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 50px; align-items: center; padding: 46px 48px; background: var(--ev-raised); border: 1px solid var(--ev-line); border-radius: 22px; }
.sp-play-text h2 { font-size: 32px; margin: 0 0 10px; }
.sp-play-text p { margin: 0; color: var(--ev-muted); font-size: 17px; }
.sp-play-line { display: flex; align-items: baseline; gap: 16px; font-size: clamp(30px, 3.8vw, 46px); font-weight: bold; line-height: 1.2; }
.sp-play-line > span:first-child { flex-shrink: 0; }
.sp-play-field { position: relative; flex: 1; min-width: 0; }
.sp-play-field input { width: 100%; box-sizing: border-box; padding: 2px 0 6px; border: 0; border-bottom: 3px solid rgba(252, 252, 252, .45); border-radius: 0; background: transparent; color: var(--ev-text); font: inherit; outline: none; transition: border-color .2s; }
.sp-play-field input::placeholder { color: var(--ev-dim); opacity: 1; }
.sp-play-field input:focus { border-bottom-color: var(--ev-text); }
.sp-play-form .ev-btn { margin-top: 26px; }
/* Bij elke toets stijgt er een noot op */
.sp-fly { position: absolute; bottom: 70%; font-size: 24px; color: var(--ev-text); pointer-events: none; animation: sp-fly 1.1s ease-out forwards; }
@keyframes sp-fly { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -54px) rotate(var(--rot)); } }

@media (max-width: 900px) {
  .sp-levels { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .sp-why { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sp-why-intro h2, .sp-why-intro h3, .sp-play-text h2 { font-size: 28px; }
  .sp-why-kids { margin-top: 70px; }
  .sp-why-kids .sp-why-intro { order: 0; }
  .sp-chord { max-width: 340px; margin-top: 22px; }
  .sp-rise { margin-top: 22px; }
  /* Te klein om te lezen op een gsm: de woorden staan toch in de lijst eronder */
  .sp-rise .lab { display: none; }
  .sp-play { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 22px; border-radius: 18px; }
  .sp-play-line { flex-direction: column; align-items: stretch; gap: 6px; font-size: 30px; }
}