/* Gekopieerd uit ~/Claude-sync/Handpan/deelnemer/speler door scripts/adem-publiceer.mjs: daar bewerken, niet hier. */
/* Ademspeler (vibbo): vult het scherm van het toestel waarop hij bekeken wordt.
   Het landschap wordt bijgesneden (slice), alle maten schalen mee met --u (1 = een iPhone van 390 x 844).
   Op een breed scherm (laptop, liggende tablet) staat het als staande kaart in het midden. */
.ademspeler{position:fixed;inset:0;background:var(--rand,#bfe0ea);overflow:hidden;overscroll-behavior:none;--u:1;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:"Quicksand",system-ui,sans-serif}
.ademspeler [hidden]{display:none!important}
.as-buhne{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.as-scherm{position:relative;overflow:hidden}
.as-scherm.as-kaart{border-radius:calc(28px * var(--u));box-shadow:0 20px 60px rgba(0,0,0,.25)}
.as-scene{position:absolute;inset:0;width:100%;height:100%}
/* uitleg in beeld (23-09): een laag van 390 x 370 eenheden rond de plek van de zon (design-y 318 = 37,7%) */
.as-dim{position:absolute;inset:0;pointer-events:none}
.as-uitleg{position:absolute;left:50%;top:calc(37.7% - 218px * var(--u));width:calc(390px * var(--u));height:calc(370px * var(--u));
  transform:translateX(-50%);overflow:visible;pointer-events:none}
.as-ring{position:absolute;left:50%;top:37.7%;width:calc(390px * var(--u));height:calc(390px * var(--u));transform:translate(-50%,-50%);overflow:visible}
.as-label{position:absolute;left:0;right:0;top:54.7%;text-align:center;font:700 calc(13px * var(--u))/1.2 "Quicksand",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.as-zin{position:absolute;left:calc(22px * var(--u));right:calc(22px * var(--u));top:58%;text-align:center;opacity:0;transition:opacity .6s;
  font:600 calc(18px * var(--u))/1.35 "Quicksand",sans-serif;padding:calc(10px * var(--u)) calc(14px * var(--u));border-radius:calc(18px * var(--u));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.as-onder{position:absolute;left:calc(16px * var(--u));right:calc(16px * var(--u));bottom:calc(22px * var(--u) + env(safe-area-inset-bottom,0px));
  display:grid;gap:calc(10px * var(--u));justify-items:center}
.as-slaover{border:0;cursor:pointer;border-radius:999px;padding:calc(11px * var(--u)) calc(18px * var(--u));
  font:700 calc(13px * var(--u))/1 "Quicksand",sans-serif;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.as-paneel{width:100%;box-sizing:border-box;border-radius:calc(24px * var(--u));padding:calc(14px * var(--u)) calc(16px * var(--u)) calc(16px * var(--u));
  display:grid;gap:calc(12px * var(--u));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.as-rij{display:flex;align-items:center;gap:calc(14px * var(--u))}
.as-knop{width:calc(54px * var(--u));height:calc(54px * var(--u));border-radius:50%;border:0;display:grid;place-items:center;flex:none;cursor:pointer}
.as-knop svg{width:calc(24px * var(--u));height:calc(24px * var(--u))}
.as-knop:focus-visible,.as-balk:focus-visible,.as-start:focus-visible,.as-slaover:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.as-titel{display:grid;gap:calc(2px * var(--u));min-width:0}
.as-titel b{font:700 calc(15px * var(--u))/1.2 "Quicksand",sans-serif}
.as-titel span{font:600 calc(12px * var(--u))/1.2 "Quicksand",sans-serif;opacity:.75}
.as-tijd{margin-left:auto;font:600 calc(13px * var(--u))/1.2 "Quicksand",sans-serif;font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap}
.as-balk{display:flex;gap:calc(3px * var(--u));height:calc(8px * var(--u));cursor:pointer;padding-block:calc(4px * var(--u));box-sizing:content-box}
.as-balk i{display:block;height:100%;border-radius:calc(4px * var(--u));position:relative;overflow:hidden}
.as-balk i b{position:absolute;left:0;top:0;bottom:0;width:0}
.as-start{position:absolute;left:50%;top:59%;transform:translateX(-50%);border:0;border-radius:calc(26px * var(--u));cursor:pointer;white-space:nowrap;
  width:max-content;   /* eigen breedte: als zwevend blok krijgt hij anders maar de halve breedte, en dan breekt "Verder bij 9:40" af */
  padding:calc(18px * var(--u)) calc(28px * var(--u)) calc(16px * var(--u));display:grid;justify-items:center;gap:calc(6px * var(--u));
  font:600 calc(13px * var(--u))/1.3 "Quicksand",sans-serif;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.as-start b{font:700 calc(20px * var(--u))/1.2 "Quicksand",sans-serif}
.as-startknop{width:calc(76px * var(--u));height:calc(76px * var(--u));border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.as-startknop svg{width:calc(32px * var(--u));height:calc(32px * var(--u))}
/* liggende telefoon: alleen de vraag om te draaien, de sessie loopt door */
.as-draai{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:24px;text-align:center;
  background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.as-draai>div{border-radius:22px;padding:18px 22px;display:grid;gap:6px;max-width:min(80%,420px)}
.as-draai b{font:700 clamp(16px,4.4vh,22px)/1.25 "Quicksand",sans-serif}
.as-draai span{font:600 clamp(12px,3vh,15px)/1.3 "Quicksand",sans-serif;opacity:.8}
.as-liggend .as-draai{display:flex}
.as-liggend .as-ring,.as-liggend .as-label,.as-liggend .as-zin,.as-liggend .as-onder,.as-liggend .as-start{display:none}
/* luisterspeler: stapknoppen naast play, de titel mag afkappen, de regel onder Start mag twee regels */
.as-stap{width:calc(38px * var(--u));height:calc(38px * var(--u));border-radius:50%;border:1.5px solid currentColor;background:transparent;color:inherit;
  font:700 calc(11px * var(--u))/1 "Quicksand",sans-serif;cursor:pointer;flex:none;opacity:.85}
.luisterspeler .as-titel{margin-bottom:calc(-2px * var(--u))}
.luisterspeler .as-titel b{font-size:calc(16px * var(--u))}
.luisterspeler .as-rij{gap:calc(10px * var(--u))}
.luisterspeler .as-start{white-space:normal;max-width:calc(320px * var(--u))}
.luisterspeler .as-regel{font:600 calc(12px * var(--u))/1.35 "Quicksand",sans-serif;opacity:.85}
/* de luisterspeler heeft een hoger paneel (titel op eigen regel): zon, label en startknop iets omhoog */
.luisterspeler .as-ring{top:33.5%}
.luisterspeler .as-label{top:49.5%}
.luisterspeler .as-start{top:53.5%}
@media (prefers-reduced-motion:reduce){.as-zin{transition:none}}