/* Pakjesbingo (hulpmiddel 6). Bovenop basis.css en kaartenmaker.css (formulier, voorbeeldvak, keuzerondjes en
   vinkjes komen daaruit). Hier: de kaart met grote cijfers (3x3 en 2x2), de thema's sinterklaas en kerst, de
   gastheerlijst, de rooflijst, de spelregels, de printopmaak en het tv-scherm.
   Twee standen voor alles wat geprint wordt:
   - .pb-feest (Feestelijk): rand, achtergrond en kop in de kleuren van het thema, versiering als inline SVG uit
     pakjesbingo.js, patronen als CSS-verlopen (geen plaatjes).
   - .pb-zw (Zwart-wit, bespaart inkt): geen achtergrondkleur, alles zwart.
   De vakjes blijven in beide standen wit met zwarte cijfers. */

/* ---------- kleuren per thema ---------- */
.pb-kaart,.pb-lijstvel,.pb-tv{--pb-rand:#B3121F;--pb-kop:#B3121F;--pb-kop-tekst:#fff;--pb-accent:#B3121F;--pb-achter:#FFF3DC;
  --pb-patroon:radial-gradient(circle,#E9B44C 0 .6mm,transparent .7mm),radial-gradient(circle,#B3121F 0 .45mm,transparent .55mm);
  --pb-patroon-maat:7mm 7mm,7mm 7mm;--pb-patroon-plek:0 0,3.5mm 3.5mm;--pb-tv-achter:#5E0B14;--pb-tv-vlak:#7D1420;--pb-tv-licht:#F2C14E}
[data-pb-thema="kerst"]{--pb-rand:#0E5E37;--pb-kop:#0E5E37;--pb-kop-tekst:#fff;--pb-accent:#C0182A;--pb-achter:#EEF6EF;
  --pb-patroon:radial-gradient(circle,#C0182A 0 .55mm,transparent .65mm),radial-gradient(circle,#E0A526 0 .45mm,transparent .55mm);
  --pb-tv-achter:#0B3D24;--pb-tv-vlak:#145233;--pb-tv-licht:#F2C14E}

/* ---------- formulier ---------- */
.pb-duur{display:grid;gap:8px;max-width:560px;padding:16px 18px;border:var(--randdikte) solid var(--rand);border-radius:var(--rond-klein);background:var(--vlak);color:var(--vlak-tekst)}
.pb-duur p{margin:0}
.pb-duur [hidden]{display:none}
.pb-duur-kop{margin:0;font-size:20px}
.pb-duur-groot{font-weight:800;font-size:19px}
.pb-let-op{font-weight:800}
.pb-tegelijk .klein{width:100%;margin:0}
.km-print[hidden]{display:none}
.pb-wat{margin:0;font-weight:700}
.pb-tv-start{padding-top:4px}

/* ---------- kaart (scherm en papier), basis = zwart-wit ---------- */
.pb-kaart{text-align:center;color:#000;background:#fff;font-family:Arial,Helvetica,sans-serif}
.pb-kop{position:relative}
.pb-kop-tekst{font-family:"Bricolage Grotesque",Arial,Helvetica,sans-serif;font-weight:800;line-height:1.15;overflow-wrap:anywhere;color:#000}
.pb-raster{border-collapse:collapse;margin:0 auto;table-layout:fixed;background:#fff}
.pb-raster td{border:.6mm solid #000;font-weight:700;color:#000;text-align:center;vertical-align:middle;padding:0;background:#fff;font-variant-numeric:tabular-nums}
.pb-voet{color:#000;line-height:1.25}
.pb-code{font-weight:700;letter-spacing:.04em}

/* voorbeeld op het scherm */
.pb-voorbeeld .pb-kaart{max-width:360px;width:100%;box-shadow:var(--schaduw-maat) var(--schaduw-maat) 0 var(--accent);border-radius:var(--rond-klein)}
.pb-voorbeeld .pb-kaart.pb-zw{border:var(--randdikte) solid var(--rand);padding:14px 14px 10px}
.pb-voorbeeld .pb-kaart.pb-feest{padding:12px}
.pb-voorbeeld .pb-kop-tekst{font-size:clamp(20px,6vw,26px);padding:4px 0}
.pb-voorbeeld .pb-raster{width:100%;margin:8px 0 6px}
.pb-voorbeeld .pb-3x3 .pb-raster td{height:clamp(64px,20vw,96px);font-size:clamp(28px,9vw,42px)}
.pb-voorbeeld .pb-2x2 .pb-raster td{height:clamp(90px,28vw,140px);font-size:clamp(36px,12vw,56px)}
.pb-voorbeeld .pb-voet{font-size:12px}

/* ---------- Feestelijk ---------- */
.pb-feest,.pb-feest *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pb-kaart.pb-feest{position:relative;overflow:hidden;border:1.4mm solid var(--pb-rand);border-radius:4mm;
  background-color:var(--pb-achter);background-image:var(--pb-patroon);background-size:var(--pb-patroon-maat);background-position:var(--pb-patroon-plek)}
.pb-feest .pb-kop{background:var(--pb-kop);border:.6mm solid var(--pb-rand);border-radius:3mm;padding:1.5mm 16%}
.pb-feest .pb-kop-tekst{color:var(--pb-kop-tekst)}
.pb-feest .pb-deco{position:absolute;top:50%;height:140%;width:auto;max-width:17%;transform:translateY(-50%);overflow:visible}
.pb-feest .pb-deco-l{left:.6%}
.pb-feest .pb-deco-r{right:.6%}
.pb-kaart.pb-feest .pb-voet{display:inline-block;background:#fff;border-radius:2mm;padding:.3mm 2.5mm}
.pb-lijstvel.pb-feest .pb-kop{max-width:170mm;margin-left:auto;margin-right:auto}
/* op de lijstvellen niet boven of onder de kop uit: wat boven het begin van een vel uitsteekt, drukt Chromium onderaan het
   vorige vel af (een gouden puntje van de kerstbal op het kaartvel, gezien 03-11) */
.pb-lijstvel.pb-feest .pb-deco{height:100%}

/* ---------- printvak: alleen bij printen zichtbaar (basis.css: #printvak, html.printmodus) ---------- */
@media print{
  html.printmodus,html.printmodus body{background:#fff!important;margin:0;padding:0}
  .pb-printvak{color:#000;font-family:Arial,Helvetica,sans-serif}
  .pb-printvak .pb-vel{break-after:page;page-break-after:always}
  .pb-printvak .pb-vel:last-child{break-after:auto;page-break-after:auto}

  /* kaarten: 4 per vel, twee bij twee; vaste hoogte per vel zoals de kaartenmaker (Letter 252 mm, A4 270 mm) */
  .pb-kaartvel{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;column-gap:5mm;width:100%;height:252mm;overflow:hidden;break-inside:avoid}
  .pb-a4 .pb-kaartvel{height:270mm}
  .pb-kaartvel .pb-kaart{align-self:center;justify-self:center;width:86mm;break-inside:avoid;page-break-inside:avoid;padding:3mm}
  .pb-kaartvel .pb-kaart.pb-zw{border:.6mm solid #000;border-radius:3mm}
  .pb-kaartvel .pb-kop-tekst{font-size:15pt;min-height:18pt;display:flex;align-items:center;justify-content:center}
  .pb-kaartvel .pb-kop{margin-bottom:2.5mm}
  .pb-kaartvel .pb-3x3 .pb-raster td{width:24mm;height:24mm;font-size:30pt}
  .pb-kaartvel .pb-2x2 .pb-raster td{width:32mm;height:32mm;font-size:40pt}
  .pb-kaartvel .pb-voet{font-size:8pt;margin-top:2.5mm}

  /* gastheerlijst, rooflijst en spelregels: kop, uitleg, dan de lijst; de gastheerlijst loopt door over meer vellen */
  .pb-lijstvel{text-align:left}
  .pb-lijstvel .pb-kop{text-align:center;margin:0 0 3mm}
  .pb-lijstvel .pb-kop-tekst{font-size:20pt}
  .pb-lijstvel.pb-feest .pb-kop-tekst{color:var(--pb-kop-tekst)}
  .pb-uitleg{font-size:11pt;line-height:1.35;margin:0 0 4mm}
  .pb-lijstvel .pb-site{font-size:8pt;text-align:center;margin-top:4mm}
  .pb-gl{list-style:none;margin:0;padding:0;columns:2;column-gap:8mm;column-rule:.3mm solid #000}
  .pb-gl-item{display:grid;grid-template-columns:5.5mm 10mm minmax(0,1fr);align-items:start;column-gap:2mm;padding:1.6mm 0;border-bottom:.3mm solid #000;break-inside:avoid;page-break-inside:avoid}
  .pb-vakje{width:4.6mm;height:4.6mm;border:.4mm solid #000;border-radius:.6mm;background:#fff;margin-top:.4mm}
  .pb-gl-nr{font-size:13pt;font-weight:700;text-align:right;line-height:1.1;font-variant-numeric:tabular-nums}
  .pb-feest .pb-gl-nr{color:var(--pb-accent)}
  .pb-gl-tekst{min-width:0;font-size:10pt;line-height:1.3;overflow-wrap:anywhere}
  .pb-gl-verrassing{display:block;font-style:italic;margin-top:.6mm}
  .pb-rooflijst,.pb-regels{break-before:page;page-break-before:always}
  .pb-rl{margin:2mm 0 0;padding:0 0 0 12mm;font-size:16pt;font-weight:700}
  .pb-rl-regel{height:15mm;border-bottom:.4mm solid #000;padding-left:2mm}
  .pb-feest .pb-rl-regel::marker{color:var(--pb-accent)}
  .pb-rl-laatste{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:3mm;align-items:end;margin-top:10mm;font-size:14pt;font-weight:700}
  .pb-rl-lijn{border-bottom:.6mm solid #000;height:10mm}
  .pb-regellijst{margin:2mm 0 0;padding:0 0 0 9mm;font-size:13pt;line-height:1.4}
  .pb-regellijst li{margin-bottom:3.5mm;padding-left:1mm;break-inside:avoid}
  .pb-feest .pb-regellijst li::marker{color:var(--pb-accent);font-weight:700}

  /* alleen voor browsertoets.mjs: niets mag buiten zijn vak breken */
  .pb-meten .pb-raster td{white-space:nowrap}
}

/* ---------- tv-scherm: een laag over de hele pagina ---------- */
/* Smal (telefoon, staand): alles onder elkaar en de laag schuift. Breed en liggend (tv, laptop, vanaf 1000 x 560): het
   scherm is in vakken verdeeld zonder schuiven: links de beurt, het nummer, het invoerveld en de knoppen; rechts het
   rooster met de nummers op de grond en daaronder de rooflijst en de strepen per persoon. De letters schalen mee met de
   hoogte van het scherm. browsertoets.mjs meet op 1920 x 1080 en 1280 x 720 dat niets onder de rand valt. */
html.pb-tv-open,html.pb-tv-open body{overflow:hidden}
.pb-tv{position:fixed;inset:0;z-index:1000;overflow:auto;background:var(--pb-tv-achter);color:#fff;font-family:Arial,Helvetica,sans-serif;
  padding:16px;display:grid;align-content:start;gap:16px;--focus:#fff;--rand:#fff}
.pb-tv[hidden],.pb-tv [hidden]{display:none!important}
.pb-tv :focus-visible{outline:4px solid #fff;outline-offset:3px}
.pb-tv-balk{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.pb-tv .knop{max-width:100%;white-space:normal}
.pb-tv .knop-tweede{color:#fff;border-color:#fff}
.pb-tv-kop{margin:0;font-size:clamp(28px,4vw,48px);color:#fff}
.pb-tv-opzet{display:grid;gap:20px;max-width:760px;width:100%;margin:0 auto;min-width:0;align-content:start}
.pb-tv-opzet .veld{max-width:420px}
.pb-tv-opzet .veld label{color:#fff;font-size:20px}
.pb-tv-opzet .veld input{font-size:28px;letter-spacing:.12em;text-transform:uppercase}
.pb-tv-opzet .veld input[aria-invalid="true"]{border-color:var(--pb-tv-licht);outline:4px solid var(--pb-tv-licht);outline-offset:2px}
.pb-tv-code-fout{margin:0;font-size:18px;font-weight:800;background:var(--pb-tv-licht);color:#000;border-radius:10px;padding:6px 12px}
.pb-tv-kinderen{border:0;margin:0;padding:0;min-width:0}
.pb-tv-kinderen legend{font-weight:800;font-size:20px;margin-bottom:8px;padding:0}
.pb-tv-kinderlijst{display:flex;flex-wrap:wrap;gap:4px 22px}
.pb-tv-kinderlijst label{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:20px;font-weight:700;cursor:pointer;overflow-wrap:anywhere}
.pb-tv-kinderlijst input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--pb-tv-licht)}
.pb-tv-namen{margin:0;padding-left:1.6em;font-size:20px;font-weight:700;columns:12em}
.pb-tv-klein{margin:0;font-size:15px;opacity:.85}

.pb-tv-spel{display:grid;gap:20px;min-width:0}
.pb-tv-hoofd,.pb-tv-uitpakken,.pb-tv-roofscherm{display:grid;gap:14px;min-width:0;align-content:start}
.pb-tv-beurt{margin:0;font-size:clamp(30px,5.2vw,76px);font-weight:800;line-height:1.1;color:var(--pb-tv-licht);overflow-wrap:anywhere}
.pb-tv-fout{margin:0;font-size:clamp(22px,3vw,40px);font-weight:800;background:#fff;color:#000;border-radius:12px;padding:6px 14px;justify-self:start}
.pb-tv-uitslag{display:flex;flex-wrap:wrap;gap:16px 40px;min-width:0}
.pb-tv-pakje{display:grid;gap:4px;min-width:0;max-width:100%;align-content:start;flex:1 1 14em}
.pb-tv-pakje p{margin:0;overflow-wrap:anywhere}
.pb-tv-pakje-tekst{display:grid;gap:4px;min-width:0}
.pb-tv-nummer{font-size:clamp(84px,14vw,200px);font-weight:800;line-height:.95;font-variant-numeric:tabular-nums}
.pb-tv-strepen{font-size:clamp(20px,2.6vw,36px);font-weight:700}
.pb-tv-rij,.pb-tv-bingo{font-size:clamp(26px,3.6vw,52px);font-weight:800;color:var(--pb-tv-licht)}
.pb-tv-bingo{text-transform:uppercase}
.pb-tv-verrassing{font-size:clamp(20px,2.6vw,34px);background:var(--pb-tv-licht);color:#000;border-radius:12px;padding:6px 14px}
.pb-tv-invoer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.pb-tv-invoer label{font-size:clamp(18px,2vw,26px);font-weight:700}
.pb-tv-invoer input{font:inherit;font-size:clamp(28px,3.5vw,44px);font-weight:800;width:5.5em;max-width:100%;min-height:56px;padding:4px 14px;border:3px solid #fff;border-radius:14px;background:#fff;color:#000}
.pb-tv-nog{margin:0;font-size:clamp(20px,2.4vw,32px);font-weight:700}
.pb-tv-grond{display:grid;gap:10px;min-width:0;align-content:start}
.pb-tv-rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;align-content:start;min-width:0}
.pb-tv-vak{font:inherit;font-size:20px;font-weight:800;min-height:46px;border:2px solid #fff;border-radius:10px;background:var(--pb-tv-vlak);color:#fff;cursor:pointer;font-variant-numeric:tabular-nums;padding:0}
.pb-tv-vak:hover{background:#fff;color:#000}
.pb-tv-bediening{display:grid;gap:8px;min-width:0}
.pb-tv-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.pb-tv-groot{margin:0;font-size:clamp(34px,6vw,92px);font-weight:800;line-height:1.1;color:var(--pb-tv-licht);overflow-wrap:anywhere}
.pb-tv-roof-uitleg{margin:0;font-size:clamp(20px,2.6vw,36px);line-height:1.3;max-width:40em}
.pb-tv-zij{display:grid;gap:18px;align-content:start;min-width:0}
.pb-tv-lijst{background:var(--pb-tv-vlak);border-radius:16px;padding:12px 16px;min-width:0}
.pb-tv-lijst h3{margin:0 0 6px;font-size:clamp(20px,2.2vw,30px);color:#fff}
.pb-tv-lijst ol{margin:0;padding-left:1.8em;font-size:clamp(18px,1.9vw,26px);font-weight:700;overflow-wrap:anywhere}
.pb-tv-lijst li{break-inside:avoid}
.pb-tv-lijst li[aria-current],.pb-tv-laatste[aria-current]{color:var(--pb-tv-licht)}
.pb-tv-laatste{margin:8px 0 0;font-size:clamp(18px,1.9vw,26px);overflow-wrap:anywhere}
.pb-tv-stand{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;align-content:start}
.pb-tv-stand li{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;background:var(--pb-tv-vlak);font-size:18px;font-weight:700;min-width:0}
.pb-tv-stand li.pb-tv-aan-de-beurt{background:var(--pb-tv-licht);color:#000}
.pb-tv-stand-naam{overflow-wrap:anywhere;min-width:0}
.pb-tv-stand-tal{flex:none;font-variant-numeric:tabular-nums}

@media (min-width:1000px) and (min-height:560px){
  .pb-tv{height:100%;padding:2vh 2vw;gap:1.2vh;grid-template-rows:minmax(0,1fr);align-content:stretch}
  /* de knoppen Volledig scherm en Tv sluiten rechtsboven, naast Terug en Volgende: dat spaart een hele regel */
  .pb-tv-balk{position:absolute;top:2vh;right:2vw;z-index:1}
  .pb-tv-balk .knop{min-height:min(44px,5.4vh);font-size:min(15px,2vh)}
  .pb-tv-spel{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    grid-template-areas:"bediening ." "hoofd rooster" "hoofd zij";grid-template-rows:auto auto minmax(0,1fr);gap:1.6vh 2.2vw;min-height:0}
  .pb-tv-bediening{grid-area:bediening;display:flex;flex-wrap:wrap;align-items:center;gap:.6vh 1.6vw}
  .pb-tv-hoofd{grid-area:hoofd;display:flex;flex-direction:column;gap:1.4vh;min-height:0}
  .pb-tv-uitpakken{display:flex;flex-direction:column;gap:1.4vh;flex:1 1 auto;min-height:0}
  .pb-tv-roofscherm{flex:1 1 auto;min-height:0;gap:2vh}
  .pb-tv-uitslag{flex:1 1 auto;min-height:0;overflow:auto;align-content:flex-start;gap:1.4vh 2.4vw}
  .pb-tv-beurt{font-size:min(4.6vw,7vh)}
  .pb-tv-fout{font-size:min(2.6vw,4vh)}
  .pb-tv-nummer{font-size:min(10vw,15vh)}
  /* Rij en Bingo naast elkaar, zodat een tros Bingo's aan het eind niet onder het scherm valt */
  .pb-tv-pakje{flex:1 1 100%}
  .pb-tv-pakje-tekst{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.4vh 1.4vw}
  .pb-tv-pakje-tekst>.pb-tv-strepen,.pb-tv-pakje-tekst>.pb-tv-verrassing{flex:1 0 100%}
  /* twee of drie tegelijk: elk pakje een regel, het nummer links en de tekst ernaast */
  .pb-tv-uitslag:not([data-aantal="1"]){flex-direction:column;flex-wrap:nowrap}
  .pb-tv-uitslag:not([data-aantal="1"]) .pb-tv-pakje{flex:none;display:grid;grid-template-columns:min(9vw,13vh) minmax(0,1fr);column-gap:1.4vw;align-items:start}
  .pb-tv-uitslag:not([data-aantal="1"]) .pb-tv-nummer{font-size:min(6vw,9vh)}
  .pb-tv-strepen{font-size:min(2.1vw,3.4vh)}
  .pb-tv-rij,.pb-tv-bingo{font-size:min(2.4vw,3.8vh)}
  .pb-tv-verrassing{font-size:min(1.8vw,2.9vh);padding:.6vh 1vw}
  .pb-tv-invoer label{font-size:min(1.7vw,2.8vh)}
  .pb-tv-invoer input{font-size:min(3vw,4.6vh);min-height:min(56px,7.4vh);padding:0 12px}
  .pb-tv-nog{font-size:min(1.8vw,3vh)}
  .pb-tv-knoppen .knop{min-height:min(48px,6.4vh);font-size:min(18px,2.5vh)}
  .pb-tv-klein{font-size:min(15px,2.1vh)}
  .pb-tv-groot{font-size:min(5.4vw,9vh)}
  .pb-tv-roof-uitleg{font-size:min(2.2vw,3.6vh)}
  .pb-tv-grond{grid-area:rooster;gap:.8vh}
  .pb-tv-rooster{grid-template-columns:repeat(auto-fill,minmax(min(54px,4vw),1fr));gap:min(6px,.6vh)}
  .pb-tv-vak{min-height:min(46px,4.8vh);font-size:min(20px,2.5vh);border-radius:8px}
  .pb-tv-zij{grid-area:zij;grid-template-rows:auto minmax(0,1fr);gap:1.2vh;min-height:0}
  .pb-tv-lijst,.pb-tv-stand{min-height:0;overflow:auto}
  .pb-tv-lijst{padding:1.2vh 1vw}
  .pb-tv-lijst h3{font-size:min(2vw,3.2vh);margin-bottom:.6vh}
  .pb-tv-lijst ol{columns:3 8em;column-gap:2.4vw;font-size:min(1.5vw,2.5vh);line-height:1.25}
  .pb-tv-laatste{font-size:min(1.5vw,2.5vh);margin-top:.8vh}
  .pb-tv-stand{grid-template-columns:repeat(auto-fill,minmax(min(170px,10.5vw),1fr));gap:min(6px,.6vh)}
  .pb-tv-stand li{font-size:min(17px,2.2vh);padding:min(5px,.5vh) 8px;border-radius:8px}
  .pb-tv-stand-naam{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}