/* Kwistig: /bingo, de uitlegpagina van de bingo. Bouwt voort op maken.css, paginas.css en opmaat.css (kopband, om-kaart,
   om-briefje, om-sectiekop, om-knop, om-faq, voet); hier alleen wat nieuw is (prefix bi-). Accent: --bingo (tokens.css). */

/* ------------------------------------------------------------------ kop: roze gloed in plaats van oranje */
.bi-kop::after { background: radial-gradient(ellipse at 50% 100%, var(--bingo), transparent 70%); }
.bi-kop .kopband-beeld::after { background: radial-gradient(ellipse at 85% 40%, rgba(var(--bingo-rgb), .28), transparent 55%),
  linear-gradient(to bottom, rgba(19, 13, 9, .72), rgba(19, 13, 9, .45) 40%, var(--kroegzwart) 100%); }
.bi-kop .terug { border-bottom-color: var(--bingo); }
.bi-kop-inhoud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: center; }
.bi-soort { display: inline-block; padding: 4px 14px; border-radius: 999px; font-weight: 800; font-size: 15px; color: #130D09; background: var(--bingo); }
.bi-kop h1 { margin-top: 14px; }
.bi-kop .kopband-inhoud .bi-kop-tekst > p:not(.bi-soort) { max-width: 640px; margin-top: 20px; font-size: 22px; line-height: 1.5; color: rgba(255, 241, 220, .9); }
.om-knop.bi-knop { color: #130D09; background: var(--bingo); box-shadow: 0 0 0 2px var(--bingo-d); }
.bi .om-knop.bi-knop:hover { filter: brightness(1.08); }

/* bingoballen: wit vlak met letter en getal, gekleurde rand. --d = doorsnede; tekst schaalt mee */
.bi-bal { --kl: var(--bingo); --d: 120px; position: relative; display: inline-grid; place-items: center; align-content: center; width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 7%, transparent 8%), radial-gradient(circle, #FFF8EE 0 46%, var(--kl) 47% 100%);
  box-shadow: inset calc(var(--d) * -.06) calc(var(--d) * -.08) calc(var(--d) * .16) rgba(0, 0, 0, .35), 0 calc(var(--d) * .1) calc(var(--d) * .25) rgba(0, 0, 0, .5);
  color: #130D09; font: 800 calc(var(--d) * .3)/1 var(--kop); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bi-bal > b { display: block; font-size: .45em; line-height: 1; opacity: .7; }
.bi-ballen { position: relative; height: 380px; }
.bi-ballen .bi-bal { position: absolute; --d: 150px; animation: bi-dobber 5s ease-in-out infinite alternate; }
.bi-ballen .bi-bal-1 { --kl: var(--b-blauw); left: 4%; top: 6%; rotate: -12deg; }
.bi-ballen .bi-bal-2 { --kl: var(--bingo); --d: 190px; left: 42%; top: 0; rotate: 6deg; animation-delay: -1.5s; }
.bi-ballen .bi-bal-3 { --kl: var(--a-oranje); left: 54%; top: 54%; rotate: 14deg; animation-delay: -3s; }
.bi-ballen .bi-bal-4 { --kl: var(--messing); --d: 120px; left: 14%; top: 56%; rotate: -4deg; animation-delay: -2.2s; }
.bi-ballen .bi-bal-5 { --kl: var(--bingo-2); --d: 100px; left: 80%; top: 30%; rotate: -8deg; animation-delay: -.8s; }
@keyframes bi-dobber { to { translate: 0 -12px; } }

/* ------------------------------------------------------------------ zo werkt het: tv en telefoon */
.bi-scene-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 30px; }
.bi-scene { position: relative; padding-bottom: 56px; }
.bi-tv { container-type: inline-size; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 6px solid #2b2118; outline: 1px solid var(--messing); padding: 3% 3.4%; width: 80%;
  display: grid; grid-template-rows: auto 1fr; gap: 12px; background: radial-gradient(ellipse at 20% 30%, rgba(var(--bingo-rgb), .28), transparent 55%), linear-gradient(160deg, #24170f, #120c08); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.bi-tv-boven { display: flex; justify-content: space-between; gap: 2cqi; font-weight: 800; font-size: 2.3cqi; color: rgba(255, 241, 220, .85); }
.bi-tv-boven em { font-style: normal; color: var(--bingo); }
.bi-tv-midden { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4cqi; align-items: center; }
.bi-trommel { display: grid; justify-items: center; gap: 1.6cqi; }
.bi-bal-groot { --d: 24cqi; --kl: var(--bingo); }
.bi-tv-label { font-weight: 800; font-size: 2.2cqi; color: rgba(255, 241, 220, .8); }
.bi-bord { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: .6cqi; }
.bi-bord i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: 800 1.9cqi/1 var(--kop); font-style: normal; color: rgba(255, 241, 220, .35); background: rgba(255, 255, 255, .05); }
.bi-bord i.aan { color: #130D09; background: var(--messing); }
.bi-bord i:nth-child(30) { background: var(--bingo); color: #130D09; box-shadow: 0 0 0 .4cqi rgba(var(--bingo-rgb), .4); }

.bi-tel { position: absolute; right: 0; bottom: 0; width: min(42%, 230px); container-type: inline-size; padding: 16px 13px 18px; border-radius: 26px; border: 5px solid #2b2118;
  outline: 1px solid var(--messing); background: linear-gradient(170deg, #22160f, #100a07); box-shadow: 0 24px 50px rgba(0, 0, 0, .6); display: grid; align-content: start; gap: 9px; }
.bi-tel-kop { display: grid; gap: 1cqi; padding: 4cqi 5cqi; border-radius: 6cqi; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 241, 220, .15); }
.bi-tel-kop span { font-weight: 700; font-size: 6cqi; color: rgba(255, 241, 220, .85); }
.bi-tel-kop b { font: 800 8.5cqi/1 var(--kop); }
.bi-tel-letters, .bi-tel-kaart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6cqi; }
.bi-tel-letters span { text-align: center; font: 800 8cqi/1 var(--kop); color: var(--bingo); }
.bi-vak { display: grid; place-items: center; aspect-ratio: 1; border-radius: 3cqi; font: 800 7.4cqi/1 var(--kop); color: var(--inkt); background: var(--schuim); }
.bi-vak.weg { color: #130D09; background: var(--bingo); box-shadow: inset 0 0 0 1.4cqi rgba(255, 255, 255, .25); }
.bi-vrij { font-size: 5cqi; background: var(--messing); }
.bi-nu { outline: 1.4cqi solid var(--bingo); outline-offset: -1.4cqi; }
.bi-tel-knop { margin-top: 2cqi; padding: 4.5cqi; border-radius: 6cqi; text-align: center; font: 800 11cqi/1 var(--kop); letter-spacing: .02em; color: #130D09; background: var(--bingo); }

.bi-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.bi-stappen li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.bi-stappen .stapnr { font-size: 72px; line-height: .8; color: var(--bingo); }
.bi-stappen h3 { font-size: 24px; }
.bi-stappen p { margin-top: 4px; color: rgba(255, 241, 220, .85); }
.bi a:not([class]) { color: var(--bingo); }
.bi .om-briefje a:not([class]) { color: var(--bingo-d); font-weight: 700; }

/* ------------------------------------------------------------------ drie soorten */
.bi-soortkaart { display: grid; gap: 12px; align-content: start; }
.bi-soortkaart > p { color: rgba(255, 241, 220, .85); }
.bi-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 280px; margin-bottom: 6px; }
.bi-mvak { display: grid; place-items: center; min-height: 64px; padding: 6px; border-radius: 10px; text-align: center; font: 800 22px/1.05 var(--kop); color: var(--inkt); background: var(--schuim); overflow-wrap: anywhere; }
.bi-mvak b { font-size: 15px; }
.bi-mvak.weg { color: #130D09; background: var(--bingo); }
.bi-mini-muziek .bi-mvak { font: 700 13px/1.15 var(--tekstletter); }
.bi-mini-kinder .bi-mvak { gap: 2px; font: 700 13px/1.1 var(--tekstletter); }
.bi-mini-kinder .bi-mvak span { font-size: 24px; line-height: 1; }
.bi-punten { list-style: none; margin: 4px 0 0; padding: 0; border-top: 2px dashed rgba(255, 241, 220, .2); }
.bi-punten li { position: relative; padding: 9px 0 9px 24px; border-bottom: 2px dashed rgba(255, 241, 220, .12); font-size: 16px; font-weight: 600; }
.bi-punten li::before { content: '●'; position: absolute; left: 2px; top: 9px; color: var(--bingo); }

/* ------------------------------------------------------------------ winrondes */
.bi-patronen { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: wr; }
.bi-patroon { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 18px; background: #1b130d; border: 2px solid #3a2f25; }
.bi-patroon:nth-child(2n) { border-radius: 12px 28px 12px 28px; }
.bi-patroon h3 { font-size: 24px; }
.bi-patroon h3::before { counter-increment: wr; content: counter(wr) '. '; color: var(--bingo); }
.bi-patroon p { font-size: 16px; color: rgba(255, 241, 220, .85); }
.bi-patroon .bi-prijs { font-weight: 700; color: var(--messing); }
.bi-raster { display: grid; grid-template-columns: repeat(5, 22px); gap: 4px; margin-bottom: 8px; }
.bi-raster i { width: 22px; height: 22px; border-radius: 5px; background: rgba(255, 241, 220, .14); }
.bi-raster i.aan { background: var(--bingo); }

.bi-label { color: var(--bingo); }
.bi-wie { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.bi-wie .om-briefje p { margin-top: 12px; font-size: 16px; color: #3a3329; }

/* ------------------------------------------------------------------ starten */
.bi-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; padding: 36px 40px; border-radius: 28px 12px 28px 12px;
  background: radial-gradient(ellipse at 100% 0%, rgba(var(--bingo-rgb), .35), transparent 60%), #1b130d; border: 2px solid rgba(var(--bingo-rgb), .55); }
.bi-band h2 { font-size: clamp(34px, 5vw, 52px); line-height: 1.02; }
.bi-band p { margin-top: 10px; max-width: 620px; color: rgba(255, 241, 220, .88); }
.bi-band-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.bi .om-teken { color: var(--bingo); }

/* ------------------------------------------------------------------ kleiner */
@media (max-width: 1180px) {
  .bi-patronen, .bi-wie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-scene-raster { grid-template-columns: 1fr; }
  .bi-scene { max-width: 760px; }
}
@media (max-width: 960px) {
  .bi-kop-inhoud { grid-template-columns: 1fr; }
  .bi-ballen { height: 200px; max-width: 480px; }
  .bi-ballen .bi-bal { --d: 90px; }
  .bi-ballen .bi-bal-2 { --d: 120px; } .bi-ballen .bi-bal-4 { --d: 80px; } .bi-ballen .bi-bal-5 { --d: 70px; }
}
@media (max-width: 700px) {
  .bi-kop .kopband-inhoud .bi-kop-tekst > p:not(.bi-soort) { font-size: 18px; }
  .bi-ballen { height: 150px; }
  .bi-ballen .bi-bal { --d: 70px; }
  .bi-ballen .bi-bal-2 { --d: 96px; left: 36%; } .bi-ballen .bi-bal-4 { --d: 62px; top: 48%; } .bi-ballen .bi-bal-5 { display: none; } .bi-ballen .bi-bal-3 { left: 70%; top: 40%; }
  .bi-scene { padding-right: 0; padding-bottom: 0; }
  .bi-tel { position: relative; width: min(62%, 220px); margin: -40px 0 0 auto; }
  .bi-tv { width: 100%; }
  .bi-patronen, .bi-wie { grid-template-columns: 1fr; }
  .bi-stappen li { grid-template-columns: 48px minmax(0, 1fr); }
  .bi-stappen .stapnr { font-size: 56px; }
  .bi-band { padding: 26px 20px; }
  .bi-band-knoppen a { flex: 1 1 auto; }
  .bi-mini { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .bi-ballen .bi-bal { animation: none; } }

/* kinderbingo: vaste plaatjes (Noto Emoji) zoals op de kaarten, even groot als een emoji */
.bi-mini-kinder .bi-mvak img.emo { display: block; width: 1em; height: 1em; }