/* HYRED Showrunner — stijl van Robbe (HYRED), ingebouwd 22/10. Alle klassen krijgen het voorvoegsel sr- (de site heeft zelf .btn, .logo, .banner, .slogan);
   kaarten, knoppen en toetsen in het donkere thema van de site. */
.sr-spel{--white:#fff; --black:#000; --off:#1c1c1c; --card:#141414; --red:#FE0000; --knop:#d00000; --knop-h:#b80000; --ink:#f4f4f4; --line:#2a2a2a;
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:clamp(20px,4vw,40px) max(16px,env(safe-area-inset-left,0px)) clamp(28px,5vw,56px)}
.sr-spel [hidden]{display:none!important}
.sr-slogan{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin:0; color:var(--ink)}
/* 1.45.1: svh i.p.v. dvh — dvh verandert als de adresbalk van de gsm in- en uitschuift bij scrollen, en dan groeide/kromp het spel (Xavier 22/10). vh = terugval. */
.sr-stage{
  position:relative; width:min(100%, calc((100vh - 300px) * 16 / 9)); width:min(100%, calc((100svh - 300px) * 16 / 9)); min-width:min(100%,320px);
  aspect-ratio:16/9; max-width:100%; background:var(--black); border-radius:16px; overflow:hidden;
  container-type:inline-size; box-shadow:0 18px 40px -24px rgba(0,0,0,.55);
}
.sr-spel canvas{display:block; width:100%; height:100%; image-rendering:auto}
.sr-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); padding:3cqw}
.sr-card{
  background:var(--white); color:var(--black); border-radius:clamp(10px,2cqw,18px);
  width:min(86cqw, 560px); padding:clamp(14px,3.6cqw,30px); display:flex; flex-direction:column; gap:clamp(8px,1.8cqw,16px);
  box-sizing:border-box; max-height:100%; overflow:auto;
}
.sr-card .sr-mark{display:flex; align-items:center; gap:clamp(8px,1.6cqw,14px)}
.sr-card .sr-mark svg{width:clamp(30px,7cqw,60px); height:auto; flex:none}
.sr-card h1,.sr-card h2{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1; text-wrap:balance}
.sr-card h1{font-size:clamp(26px,6.4cqw,54px)}
.sr-card h2{font-size:clamp(22px,5cqw,42px)}
.sr-card p{margin:0; font-size:clamp(11px,1.7cqw,15px); line-height:1.5; max-width:62ch}
.sr-card .sr-eyebrow{font-size:clamp(10px,1.3cqw,12px); font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.sr-fx{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.sr-fx li{font-size:clamp(10px,1.3cqw,12px); font-weight:600; border:1.5px solid var(--black); border-radius:999px; padding:2px 10px}
.sr-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:8px; margin:0}
.sr-stats div{background:var(--off); border-radius:10px; padding:8px 10px}
.sr-stats dt{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.sr-stats dd{margin:2px 0 0; font-size:clamp(16px,2.6cqw,22px); font-weight:800; font-variant-numeric:tabular-nums}
.sr-btn{
  align-self:flex-start; font:inherit; font-weight:800; font-size:clamp(13px,1.9cqw,17px);
  background:var(--red); color:var(--white); border:0; border-radius:999px; padding:.7em 1.6em; cursor:pointer;
  display:inline-flex; align-items:center; gap:.6em;
}
.sr-btn:hover{background:var(--black)}
.sr-btn:focus-visible,.sr-pad button:focus-visible,.sr-tool:focus-visible{outline:3px solid var(--black); outline-offset:3px}
/* 1.43.4: het canvas krijgt bij de start de focus (toetsen); geen blauwe focusrand van de browser rond het spel. */
.sr-stage canvas:focus,.sr-stage canvas:focus-visible{outline:none}
.sr-stop{background:transparent; pointer-events:none}
.sr-stop .sr-banner{background:var(--red); color:var(--white); font-weight:800; font-size:clamp(28px,9cqw,84px); letter-spacing:-.02em; padding:.1em .45em; border-radius:12px; text-transform:uppercase; animation:slam .35s cubic-bezier(.2,1.6,.4,1)}
.sr-stop small{display:block; font-size:clamp(11px,1.6cqw,15px); font-weight:600; text-transform:none; letter-spacing:0; text-align:center}
@keyframes slam{from{transform:scale(1.6); opacity:0}to{transform:scale(1); opacity:1}}
.sr-bar{width:min(100%, calc((100vh - 300px) * 16 / 9)); width:min(100%, calc((100svh - 300px) * 16 / 9)); min-width:min(100%,320px); display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.sr-keys{background:var(--white); border-radius:12px; padding:8px 14px; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; min-width:0}
.sr-spel kbd{font:inherit; font-weight:600; background:var(--off); border-radius:6px; padding:1px 7px}
.sr-tool{font:inherit; font-size:12px; font-weight:600; background:var(--black); color:var(--white); border:0; border-radius:999px; padding:8px 16px; cursor:pointer}
.sr-pad{display:none; width:100%; justify-content:space-between; gap:10px; user-select:none; -webkit-user-select:none; touch-action:none}
.sr-pad div{display:flex; gap:10px}
.sr-pad button{width:64px; height:64px; border-radius:50%; border:0; background:var(--black); color:var(--white); font:inherit; font-weight:800; font-size:13px; touch-action:none}
.sr-pad button.sr-go{background:var(--red)}
@media (pointer:coarse){ .sr-pad{display:flex} .sr-keys{display:none} }
@container (max-width:520px){ .sr-card .sr-hide-sm{display:none} }
@media (prefers-reduced-motion:reduce){ .sr-stop .sr-banner{animation:none} }
.sr-top{width:min(100%, calc((100vh - 300px) * 16 / 9)); width:min(100%, calc((100svh - 300px) * 16 / 9)); min-width:min(100%,320px); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
/* donker thema */
.sr-stage{background:#000; border:1px solid var(--line)}
.sr-card{background:var(--card); color:var(--ink); border:1px solid var(--line)}
.sr-card .sr-mark svg{width:clamp(96px,22cqw,180px)}
.sr-fx li{border-color:var(--ink)}
.sr-spel .sr-btn{background:var(--knop); color:#fff}
.sr-spel .sr-btn:hover{background:var(--knop-h)}
.sr-btn:focus-visible,.sr-pad button:focus-visible,.sr-tool:focus-visible{outline:3px solid #fff}
.sr-keys{background:var(--card); border:1px solid var(--line); color:var(--ink)}
.sr-spel kbd{background:var(--off); color:var(--ink)}
.sr-spel .sr-tool{background:transparent; color:var(--ink); border:1px solid #707070}
.sr-spel .sr-tool:hover{border-color:var(--ink)}
.sr-pad button{background:var(--card); color:#fff; border:1px solid #707070}
.sr-pad button.sr-go{background:var(--knop); border-color:var(--knop)}
/* 1.45.0: scorebord — naamveld op de eindkaart, top 10 ernaast (breed) of eronder (smal), compacte top 5 op de titelkaart. */
.sr-card.sr-eind{width:min(94cqw,820px)}
@container (min-width:620px){
  .sr-card.sr-eind:has(#srBord:not([hidden])){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); column-gap:clamp(14px,2.6cqw,28px); align-content:start}
  .sr-card.sr-eind > *{grid-column:1}
  .sr-card.sr-eind > #srBord{grid-column:2; grid-row:1 / span 6}
  .sr-card.sr-eind > .sr-btn{justify-self:start}
}
.sr-naam{display:flex; flex-direction:column; gap:6px; margin:0}
.sr-naam label{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.sr-rij{display:flex; gap:8px; flex-wrap:wrap}
.sr-naam input{flex:1 1 140px; min-width:0; font:inherit; font-size:clamp(13px,1.8cqw,16px); color:var(--ink); background:#000; border:1px solid #707070; border-radius:999px; padding:.55em 1em}
.sr-naam input:focus-visible{outline:3px solid #fff; outline-offset:2px}
.sr-naam .sr-btn{align-self:auto}
.sr-btn[disabled]{opacity:.6; cursor:default}
.sr-melding{font-size:12px!important; min-height:1.2em; color:#ffb3b3}
.sr-melding.sr-ok{color:var(--ink)}
.sr-bord{display:flex; flex-direction:column; gap:6px; min-width:0}
.sr-bord ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; font-size:clamp(11px,1.5cqw,14px); font-variant-numeric:tabular-nums}
.sr-bord li{display:grid; grid-template-columns:2.2em minmax(0,1fr) auto; gap:8px; align-items:baseline; padding:3px 8px; border-radius:6px; background:var(--off)}
.sr-bord li span:nth-child(2){overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sr-bord li span:last-child{font-weight:800}
.sr-bord li.sr-ik{background:var(--knop); color:#fff}
.sr-bord .sr-leeg{background:transparent; display:block; padding:0; opacity:.8}
.sr-jij{font-size:12px!important; font-weight:600}
.sr-top5 ol{font-size:clamp(10px,1.3cqw,13px)}
.sr-top5 li{padding:2px 8px}
@container (max-width:520px){ .sr-top5{display:none!important} .sr-card.sr-eind .sr-mark{display:none} }
/* eindkaart met bord: compacter, zodat "Nog een keer" zonder scrollen zichtbaar blijft */
@container (min-width:521px){
  .sr-card.sr-eind:has(#srBord:not([hidden])){gap:clamp(6px,1.2cqw,12px)}
  .sr-card.sr-eind:has(#srBord:not([hidden])) h2{font-size:clamp(18px,3.4cqw,32px)}
  .sr-card.sr-eind:has(#srBord:not([hidden])) .sr-mark svg{width:clamp(80px,15cqw,130px)}
  .sr-card.sr-eind:has(#srBord:not([hidden])) .sr-stats{grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:6px}
  .sr-card.sr-eind:has(#srBord:not([hidden])) .sr-stats div{padding:6px 8px}
  .sr-card.sr-eind:has(#srBord:not([hidden])) .sr-stats dt{font-size:9px; letter-spacing:.04em}
  .sr-card.sr-eind:has(#srBord:not([hidden])) .sr-stats dd{font-size:clamp(14px,2.2cqw,19px)}
}
/* smal (gsm): slogan weg, cijfers op één rij — de kaart scrollt voor het bord */
@container (max-width:520px){
  .sr-card.sr-eind h2{display:none}
  .sr-card.sr-eind .sr-stats{grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px}
  .sr-card.sr-eind .sr-stats div{padding:4px 5px}
  .sr-card.sr-eind .sr-stats dt{font-size:7px; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis}
  .sr-card.sr-eind .sr-stats dd{font-size:13px}
  .sr-card.sr-eind{gap:6px; padding:10px 12px}
  .sr-naam input,.sr-naam .sr-btn{font-size:13px; padding:.45em .9em}
}
/* titelkaart met top 5: naast de uitleg (breed); op een gsm verborgen (zie hoger) */
@container (min-width:620px){
  #title .sr-card:has(#srTop5:not([hidden])){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); column-gap:clamp(14px,2.6cqw,28px); width:min(94cqw,820px); align-content:start}
  #title .sr-card:has(#srTop5:not([hidden])) > *{grid-column:1}
  #title .sr-card:has(#srTop5:not([hidden])) > #srTop5{grid-column:2; grid-row:1 / span 5; align-self:center}
  #title .sr-card:has(#srTop5:not([hidden])) > .sr-btn{justify-self:start}
}
/* 1.45.0 — gsm/tablet (Xavier 22/10: "hoe werkt de bediening op mobiel?")
   Staand: de stage is al zo breed als het scherm; de kaarten tonen enkel het nodige (titel + start), plus de hint om te draaien.
   Liggend: de stage zo groot als de schermhoogte toelaat, de knoppen zweven links/rechts onderaan over het beeld zodra de show loopt. */
.sr-draai{display:none; margin:0; font-size:12px; color:var(--ink); opacity:.85; text-align:center; width:100%}
@media (pointer:coarse) and (orientation:portrait){ .sr-draai{display:block} }
@container (max-width:520px){
  #title .sr-card .sr-mark, #title .sr-card [data-i="intro"]{display:none}
  .sr-card h1{font-size:clamp(22px,8cqw,34px)}
}
@media (pointer:coarse) and (orientation:landscape){
  .sr-stage,.sr-bar,.sr-top{width:min(100%, calc((100vh - 92px) * 16 / 9)); width:min(100%, calc((100svh - 92px) * 16 / 9))}   /* 92 = vaste siteheader (72) + marge */
}

/* 1.46.0 — speelmodus (Xavier 22/10: "kunnen we het op mobiel niet full screen krijgen? nu maar helft van het scherm in gebruik")
   html.sr-vol (game.js enterVol): siteheader, voet, cookiebalk en testbalk weg, pagina vergrendeld, .sr-spel vult het scherm (100svw×100svh — svh, niet dvh:
   dvh deed het spel groeien en krimpen, zie 1.45.1) en de stage staat er 16:9 in, zwart eromheen. Safe-area (notch, Dynamic Island, home-indicator) via env();
   de pagina draagt viewport-fit=cover. Desktop gebruikt dezelfde stijl via de knop "Volledig scherm" (Fullscreen API), zonder touchknoppen. */
.sr-acties{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.sr-spel .sr-btn.sr-tweede{background:transparent; border:1px solid #707070; color:var(--ink)}
.sr-spel .sr-btn.sr-tweede:hover{border-color:var(--ink); background:transparent}
.sr-sluit{position:absolute; z-index:5; width:44px; height:44px; border-radius:50%; border:1px solid #707070; background:rgba(0,0,0,.55); color:#fff; font:inherit; font-size:20px; line-height:1; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; touch-action:manipulation}
html:not(.sr-vol) .sr-sluit{display:none}
/* niet-speelmodus op een notch-toestel (landschap): met viewport-fit=cover mag de kop niet onder de notch */
body{padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px)}
html.sr-vol,html.sr-vol body{overflow:hidden; overscroll-behavior:none; background:#000; height:100%}
html.sr-vol body{position:fixed; inset:0; width:100%; padding:0; margin:0; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
html.sr-vol .test-balk,html.sr-vol .skip,html.sr-vol .kop,html.sr-vol .voet,html.sr-vol .toestemming,html.sr-vol .plakbalk,html.sr-vol .eldred-knop,html.sr-vol .eldred-venster,html.sr-vol .sr-slogan,html.sr-vol .sr-keys{display:none!important}
html.sr-vol main{display:block; margin:0; padding:0}
html.sr-vol .sr-spel{
  position:fixed; left:0; top:0; z-index:900; margin:0; gap:0; background:#000; box-sizing:border-box; overflow:hidden;
  width:100vw; width:100svw; height:100vh; height:100svh;
  padding:env(safe-area-inset-top,0px) max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px);
  justify-content:center;
}
html.sr-vol .sr-stage{width:100%; min-width:0; max-width:100%; border:0; border-radius:0; box-shadow:none; touch-action:none; flex:none}
html.sr-vol .sr-stage canvas{touch-action:none}
html.sr-vol .sr-card{touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; -webkit-user-select:text; user-select:text}
html.sr-vol .sr-naam input{-webkit-user-select:text; user-select:text; font-size:16px}   /* 16 px: iOS zoomt anders in op het veld */
html.sr-vol .sr-bar{width:100%; min-width:0}
html.sr-vol .sr-tool{position:absolute; z-index:5; background:rgba(0,0,0,.55); font-size:11px; padding:7px 10px; touch-action:manipulation}
/* staand (en elk scherm dat smaller is dan 16:9 breed): beeld bovenaan schermbreed, een smalle strook met ✕ erboven, de knoppen groot eronder */
@media (orientation:portrait){
  html.sr-vol .sr-spel{justify-content:flex-start; padding-top:calc(env(safe-area-inset-top,0px) + 52px)}
  html.sr-vol .sr-sluit{top:calc(env(safe-area-inset-top,0px) + 4px); right:max(8px,env(safe-area-inset-right,0px))}
  html.sr-vol .sr-tool{top:calc(env(safe-area-inset-top,0px) + 10px); left:max(12px,env(safe-area-inset-left,0px))}
  html.sr-vol .sr-draai{margin-top:10px}
  html.sr-vol .sr-bar{flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; flex-wrap:nowrap; padding:10px 6px 14px}
  @media (pointer:coarse){
    html.sr-vol .sr-pad{width:100%; justify-content:space-between; gap:8px}
    html.sr-vol .sr-pad div{gap:8px}
    html.sr-vol .sr-pad button{width:min(21vw,104px); height:min(21vw,104px); font-size:15px}
  }
}
/* liggend: de stage zo hoog als het scherm, de knoppen zweven halfdoorzichtig over de zijbalken (of de onderhoeken van het beeld als er geen zijbalk is) */
@media (orientation:landscape){
  html.sr-vol .sr-spel{justify-content:center; padding-top:env(safe-area-inset-top,0px)}
  html.sr-vol .sr-stage{width:min(100%, calc((100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 16 / 9)); width:min(100%, calc((100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 16 / 9))}
  html.sr-vol .sr-bar{display:contents}
  html.sr-vol .sr-draai{display:none}
  html.sr-vol .sr-sluit{top:max(8px,env(safe-area-inset-top,0px)); right:max(8px,env(safe-area-inset-right,0px))}
  html.sr-vol .sr-tool{top:calc(max(8px,env(safe-area-inset-top,0px)) + 54px); right:max(8px,env(safe-area-inset-right,0px))}
  @media (pointer:coarse){
    html.sr-vol .sr-pad{position:absolute; left:0; top:0; right:0; bottom:0; width:auto; display:block; pointer-events:none; z-index:4}
    html.sr-vol .sr-pad div{position:absolute; bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 8px)); display:flex; gap:14px}
    html.sr-vol .sr-pad div:first-child{left:max(14px,calc(env(safe-area-inset-left,0px) + 8px))}
    html.sr-vol .sr-pad div:last-child{right:max(14px,calc(env(safe-area-inset-right,0px) + 8px))}
    html.sr-vol .sr-pad button{pointer-events:auto; width:68px; height:68px; opacity:.6; background:rgba(20,20,20,.7); font-size:14px}
    html.sr-vol .sr-pad button.sr-go{background:rgba(208,0,0,.75)}
    /* een kaart (titel, pauze, eindkaart) heeft zijn eigen knoppen: de touchknoppen zouden er bovenop liggen */
    html.sr-vol .sr-spel:has(#title:not([hidden])) .sr-pad,html.sr-vol .sr-spel:has(#pause:not([hidden])) .sr-pad,html.sr-vol .sr-spel:has(#wrap:not([hidden])) .sr-pad{display:none}
  }
}
/* desktop in volledig scherm: geen touchknoppen, het beeld zo groot als past */
@media (pointer:fine){ html.sr-vol .sr-pad{display:none} html.sr-vol .sr-draai{display:none} }