/* ============================================================
   De optocht — breed speelveld met de stand over het beeld
   ============================================================ */
.spel-body{background:#04061a;overflow-x:hidden}
.spel-vlak{position:relative;overflow:hidden;padding:clamp(6rem,12vh,8rem) 0 clamp(2.5rem,6vh,4rem)}
.spel-gloed{
  position:absolute;inset:-10% 0 40%;pointer-events:none;
  background:
    radial-gradient(50vw 40vh at 22% 18%,rgba(27,58,245,.4),transparent 65%),
    radial-gradient(40vw 32vh at 78% 8%,rgba(255,176,32,.18),transparent 62%);
  filter:blur(6px);
}

/* ---- de titel als lichtreclame ---- */
.spel-neon{position:relative;text-align:center;margin-bottom:clamp(1.2rem,3vh,2.2rem)}
.spel-neonlijn{
  display:block;width:2px;height:clamp(18px,4vh,34px);margin:0 auto;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.35));
}
.spel-neon h1{
  display:inline-block;margin:0;padding:.35rem 1.4rem .5rem;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.2rem,6.5vw,5rem);line-height:1;
  color:#fffbe8;
  border-radius:14px;
  box-shadow:inset 0 0 0 3px rgba(255,224,27,.55),0 0 40px rgba(255,224,27,.18);
  text-shadow:0 0 10px rgba(255,224,27,.9),0 0 34px rgba(255,176,32,.65),0 0 70px rgba(255,140,0,.35);
  animation:neonKnip 7s steps(1,end) infinite;
}
@keyframes neonKnip{
  0%,92%,100%{opacity:1}
  93%{opacity:.35}
  94%{opacity:1}
  96%{opacity:.4}
  97%{opacity:1}
}
.spel-neon p{
  margin:.7rem 0 0;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* ---- het speelveld: zo breed als het scherm ---- */
.spel-scene{
  position:relative;width:min(1600px,96vw);margin-inline:auto;
  border-radius:clamp(14px,2vw,26px);overflow:visible;
  background:#070c34;
  box-shadow:0 40px 110px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.12);
}
.spel-scene::before{                       /* Brabantse rand */
  content:"";position:absolute;top:0;left:0;right:0;height:10px;z-index:5;
  background:repeating-conic-gradient(#d0021b 0 25%, #fff 0 50%) 0 0/20px 20px;
  border-radius:clamp(14px,2vw,26px) clamp(14px,2vw,26px) 0 0;
}
.spel-scene canvas{
  display:block;width:100%;height:auto;
  border-radius:clamp(14px,2vw,26px);
  touch-action:none;cursor:pointer;background:#070c34;
}

.hangsjaal{
  position:absolute;top:-30px;right:clamp(16px,5vw,90px);width:clamp(70px,8vw,104px);height:auto;z-index:6;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.6));transform:rotate(4deg);pointer-events:none;
}
.hangsjaal .doek,.hangsjaal .knik{fill:url(#brabantje);stroke:rgba(6,10,43,.45);stroke-width:2.5;stroke-linejoin:round}
.hangsjaal .doek.achter{opacity:.85}
.hangsjaal .franje{stroke:#f7f7f7;stroke-width:4.5;stroke-linecap:round}
.hangsjaal .franje.achter{opacity:.85}

/* ---- de stand, over het beeld heen ---- */
.spel-hud{
  position:absolute;top:clamp(18px,2.4vw,30px);left:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);
  z-index:4;display:flex;align-items:flex-start;gap:clamp(.5rem,1.4vw,1rem);
  pointer-events:none;
}
.hud-vak{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.5rem .85rem;border-radius:12px;
  background:rgba(4,7,32,.55);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.hud-vak b{font-family:var(--font-display);font-size:1.4rem;line-height:1;color:var(--yellow);letter-spacing:0}
.hud-vak em{font-style:normal}
.hud-kapel{position:relative;flex-direction:row;flex-wrap:wrap;min-width:190px}
.hud-balk{
  flex:1 0 100%;height:6px;margin-top:.45rem;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;
}
.hud-balk i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#ffb020,var(--yellow));
  box-shadow:0 0 12px rgba(255,224,27,.6);transition:width .35s var(--ease);
}
.hud-struikels{gap:.35rem;align-items:center}
.hud-struikels i{display:block;width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 10px rgba(255,45,32,.6)}
.hud-struikels i.op{background:rgba(255,255,255,.16);box-shadow:none}
.hud-geluid{
  margin-left:auto;pointer-events:auto;
  width:42px;height:42px;flex:0 0 auto;border:0;border-radius:12px;cursor:pointer;
  background:rgba(4,7,32,.55);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  color:#fff;font-size:1.05rem;line-height:1;
}
.hud-geluid:hover{background:var(--yellow);color:var(--ink)}

/* ---- start- en eindscherm ---- */
.spel-over{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;
  padding:clamp(1.2rem,4vw,3rem);text-align:center;
  background:radial-gradient(60% 70% at 50% 45%,rgba(6,10,43,.78),rgba(4,7,32,.95));
  backdrop-filter:blur(4px);border-radius:clamp(14px,2vw,26px);
}
.spel-over[hidden]{display:none}
.spel-over .kicker{color:var(--yellow)}
.spel-over h2{
  margin:0;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3.4rem);line-height:1;
  color:#fffbe8;text-shadow:0 0 26px rgba(255,224,27,.35);
}
.spel-over p{margin:0;max-width:56ch;color:rgba(255,255,255,.82);font-size:clamp(.9rem,1.3vw,1.05rem)}
.spel-over b{color:#fff}
.spel-clou{color:rgba(255,255,255,.7) !important}
.spel-clou b{color:var(--yellow)}
.spel-record{font-size:.74rem !important;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5) !important}
.spel-record b{color:var(--yellow)}
.spel-uitslag{font-size:1.1rem !important}
.spel-uitslag b{font-family:var(--font-display);color:var(--yellow);font-size:1.7rem;vertical-align:-2px}

/* ---- legenda ---- */
.spel-uitleg{
  display:flex;flex-wrap:wrap;gap:.6rem clamp(1rem,3vw,2.4rem);justify-content:center;
  margin:clamp(1.2rem,3vh,2rem) 0 0;font-size:.78rem;color:rgba(255,255,255,.6);
}
.spel-uitleg .bol{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.45rem;vertical-align:-1px}
.spel-uitleg .noot{background:var(--yellow)}
.spel-uitleg .hindernis{background:#c4321a}
.spel-uitleg .muziek{background:#1b3af5}
.spel-voetnoot{margin:.6rem 0 0;text-align:center;font-size:.74rem;color:rgba(255,255,255,.38)}

@media (max-width:720px){
  .spel-hud{flex-wrap:wrap;gap:.4rem}
  .hud-kapel{min-width:150px}
  .hud-vak{font-size:.58rem;padding:.4rem .6rem}
  .hud-vak b{font-size:1.1rem}
  .hangsjaal{width:60px;top:-20px}
}

/* de routebalk in de meterteller */
.hud-meters{flex-wrap:wrap;min-width:150px}
.hud-balk.route i{background:linear-gradient(90deg,#7ce0ff,#fff);box-shadow:0 0 12px rgba(124,224,255,.55)}
.spel-uitleg-route{font-size:.82rem !important;color:rgba(255,255,255,.62) !important}
.spel-uitleg-route b{color:var(--yellow)}
.spel-uitleg .finish{background:#f4f1ea}