/* ─────────────────────────────────────────────────────────
   Kabaal — Monstera-'hap' op knoppen
   De knop zélf is het blad: een ovale spleet (fenestratie) uit de
   rand, waardoor de achtergrond erdoorheen zichtbaar wordt — alsof
   er een hapje uit de zijkant is. De kant rouleert per knop
   (rechts → boven → links → onder) voor een organische, bladachtige
   variatie. Ook op de hub-tegels.

   Techniek: CSS `mask` met een radial-gradient (Firefox + Chromium,
   geen extra assets). Puur decoratief. Diepte bewust klein zodat de
   spleet binnen de knop-padding blijft en de tekst niet raakt.
   Bijstellen? Pas de ellipse-maten / posities hieronder aan.
   ───────────────────────────────────────────────────────── */

button,
.tegel {
  /* standaard: spleet uit de rechterrand */
  --hap: radial-gradient(ellipse 11px 6px at 100% 55%, transparent 0 82%, #000 100%);
  -webkit-mask: var(--hap);
          mask: var(--hap);
}

/* Kant rouleert per knop binnen dezelfde rij (nth-of-type). */
button:nth-of-type(4n+2) { --hap: radial-gradient(ellipse 14px 6px at 60% 0,     transparent 0 82%, #000 100%); }  /* boven */
button:nth-of-type(4n+3) { --hap: radial-gradient(ellipse 11px 6px at 0 45%,     transparent 0 82%, #000 100%); }  /* links */
button:nth-of-type(4n+4) { --hap: radial-gradient(ellipse 14px 6px at 45% 100%,  transparent 0 82%, #000 100%); }  /* onder */

/* Hub-tegels dragen het blad-motief (punt-hoeken + druppel-icoon), met een subtiele
   fenestratie-scallop uit één rand die per tegel rouleert. Bewust klein: donker-op-donker
   wordt een grote inkeping een vage smoezel i.p.v. een strak gat, en mag de tekst niet raken. */
.tegel                { --hap: radial-gradient(ellipse 22px 10px at 100% 62%, transparent 0 87%, #000 100%); }  /* rechts */
.tegel:nth-of-type(2) { --hap: radial-gradient(ellipse 28px 11px at 60% 0,   transparent 0 87%, #000 100%); }  /* boven */
.tegel:nth-of-type(3) { --hap: radial-gradient(ellipse 28px 11px at 40% 100%, transparent 0 87%, #000 100%); }  /* onder (weg van titel) */
.tegel:nth-of-type(4) { --hap: radial-gradient(ellipse 22px 10px at 100% 40%, transparent 0 87%, #000 100%); }  /* rechts */
.tegel:nth-of-type(5) { --hap: radial-gradient(ellipse 28px 11px at 55% 0,   transparent 0 87%, #000 100%); }  /* boven */
.tegel:nth-of-type(6) { --hap: radial-gradient(ellipse 28px 11px at 45% 100%, transparent 0 87%, #000 100%); }  /* onder */

/* ─────────────────────────────────────────────────────────
   Rand-volgt-de-inkeping (nette omtrek rond de spleet)
   Een `mask` knipt óók de rand weg → bij knoppen met een duidelijke rand
   zie je anders een gaatje in de rand. Oplossing: verplaats de vulling naar
   ::before (dat de inkeping via `mask` draagt) en laat de knop zélf met
   `filter: drop-shadow` de omtrek tekenen — die volgt de gemaskeerde vorm,
   dus óók de inkeping. (De knop niet meer zelf maskeren.)

   Kleuren per knop nodig: --vul (vulling) + --rand (omtrek). Voorlopig alleen
   op de RECORDER (proef) via :has()-scoping; andere pagina's houden de simpele
   mask tot we het uitrollen.
   ───────────────────────────────────────────────────────── */
/* Scope: alleen de speler-tools (recorder, speler-mono, stereo) — daar hebben
   knoppen een duidelijke rand. Game-knoppen (rand-loos/gradient) en hub-tegels
   (subtiele rand) houden de simpele mask hierboven. Eén :has()-lijst dekt de
   drie pagina's via hun unieke play-knop-id's. */
:root:has(#btnOpnemen, #btn-play, #btnPlay) button {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: none;
  -webkit-mask: none;
          mask: none;                 /* knop zelf niet maskeren; de lagen doen dat */
  --vul:  var(--card, var(--bg3, #0f3460));
  --rand: #444;
}
/* Vullaag: de zichtbare knop-kleur met de inkeping. */
:root:has(#btnOpnemen, #btn-play, #btnPlay) button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--vul);
  -webkit-mask: var(--hap);           /* --hap erft van de knop (incl. nth-rotatie) */
          mask: var(--hap);
}
/* Randlaag: exact dezelfde vorm, 1px groter, in de randkleur, eronder → peekt
   1px uit als omtrek — óók rond de inkeping. Geen filter = geen tekst-halo. */
:root:has(#btnOpnemen, #btn-play, #btnPlay) button::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  background: var(--rand);
  -webkit-mask: var(--hap);
          mask: var(--hap);
}

/* Recorder-accenten. */
:root:has(#btnOpnemen) #btnOpnemen                          { --rand: var(--red); }
:root:has(#btnOpnemen) #btnOpnemen:hover:not(:disabled)     { --vul: #3a1a1a; }
:root:has(#btnOpnemen) #btnOpnemen.actief                   { --vul: #3a1010; }
:root:has(#btnOpnemen) #btnAfspelen:not(:disabled)          { --rand: #4a8f4a; }
:root:has(#btnOpnemen) #btnAfspelen:hover:not(:disabled)    { --vul: #1a3a1a; }
:root:has(#btnOpnemen) button.toggle.actief                 { --vul: #143a4a; --rand: var(--teal); }
:root:has(#btnOpnemen) button:hover:not(:disabled)          { --vul: #1a4a7a; }

/* Stereo: één knop-stijl, subtiele rand (#333). */
:root:has(#btnPlay) button                                  { --rand: #333; }
:root:has(#btnPlay) button:hover:not(:disabled)             { --vul: #1a4a7a; }

/* Uitzonderingen op de hap: elementen waar een "hapje" verkeerd leest.
   - Klavier-toetsen (Gebied 2): een pianotoets hoort geen hap te hebben.
   - Kleine tekst-skipknoppen: de hap zou de laatste letter wegknippen. */
.gtoets, .ob-skip {
  -webkit-mask: none;
          mask: none;
}

/* Speler-mono: .btn = teal-rand, .primary = accent-rand. */
:root:has(#btn-play) .btn                                   { --vul: var(--bg3); --rand: var(--teal); }
:root:has(#btn-play) .btn.primary                           { --rand: var(--accent); }
:root:has(#btn-play) .btn:hover:not(:disabled)              { --vul: var(--teal); }
:root:has(#btn-play) .btn.primary:hover:not(:disabled)      { --vul: var(--accent); }

/* ─────────────────────────────────────────────────────────
   Game (Tam-tam Jungle): rand-volgt-inkeping op knoppen MÉT rand.
   Scope via het game-shell-element #stage (alleen op game/index.html).
   De grote knoppen (.grote-knop) hebben border:none → geen rand-gat; die
   houden de simpele mask. Alleen de les-chips (1px, teal/groen) en de
   tap-zone (2px, teal/gold, gradient-vulling) hebben een zichtbaar gat.
   ───────────────────────────────────────────────────────── */

/* Les-chips (pillen): vulling bg2, rand bg3 → teal bij hover, groen bij behaald. */
:root:has(#stage) .les-chip {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: none;
  -webkit-mask: none;
          mask: none;
  --vul: var(--bg2);
  --rand: var(--bg3);
}
:root:has(#stage) .les-chip.behaald    { --rand: var(--groen); }
:root:has(#stage) .les-chip.open:hover { --rand: var(--teal); }
:root:has(#stage) .les-chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--vul);
  -webkit-mask: var(--hap); mask: var(--hap);
}
:root:has(#stage) .les-chip::after {
  content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit;
  background: var(--rand);
  -webkit-mask: var(--hap); mask: var(--hap);
}

/* Tap-zone (grote tik-knop): gradient-vulling gereproduceerd in de vullaag,
   2px rand → randlaag steekt 2px uit. Teal, of gold voor .hard. */
:root:has(#stage) .tapzone {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: none;
  -webkit-mask: none;
          mask: none;
  --rand: var(--teal);
}
:root:has(#stage) .tapzone.hard { --rand: var(--gold); }
:root:has(#stage) .tapzone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, var(--bg3), var(--bg2));
  -webkit-mask: var(--hap); mask: var(--hap);
}
:root:has(#stage) .tapzone::after {
  content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit;
  background: var(--rand);
  -webkit-mask: var(--hap); mask: var(--hap);
}