/* babyfoon — huisstijl "slaperig maantje" (zie docs/huisstijl.md)
   Doel: Safari op iOS 12 en nieuwer. Daarom geen flex-gap, inset, aspect-ratio,
   :has(), nesting of color-mix(); env()/calc() altijd na een gewone fallback. */

:root {
  --nacht: #17142B;
  --nacht-licht: #211C3D;
  --wolk: #2B2450;
  --wolk-licht: #3A3168;
  --rand: rgba(255, 243, 226, 0.09);
  --gloed: #FFB26B;
  --gloed-diep: #FF9A45;
  --gloed-inkt: #3A2140;
  --mint: #8FE3C0;
  --koraal: #FF6B6B;
  --melk: #FFF3E2;
  --lila: #A9A2C9;
  --oog: #B9A7F0;
  --schijn: 0 0 28px rgba(255, 178, 107, 0.4);
  --rond: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: #17142B;
  background: var(--nacht);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: #17142B;
  background: var(--nacht);
  color: #FFF3E2;
  color: var(--melk);
  font-family: var(--rond);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

p, h1, h2 { margin: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 24px;
  height: 24px;
  -webkit-flex: none;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Vierpuntig sterretje: alleen decoratie rond de mascotte */
.star {
  position: absolute;
  width: 14px;
  height: 14px;
  fill: var(--melk);
  stroke: none;
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Bediening: algemeen ---------- */

button {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button::-moz-focus-inner { border: 0; }

/* Focus: eerst een gewone :focus-stijl, daarna pas verfijnen voor wie :focus-visible kent */
button:focus, input:focus { outline: 2px solid var(--melk); outline-offset: 3px; }
button:focus:not(:focus-visible) { outline: none; }

button[disabled] { opacity: 0.35; cursor: default; }

.topbar, .dock, .bottom, .alarm, .overlay, .status, .sheet__title, .hero, .wordmark {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Hoofdknop: de "pil" */
.btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 22px;
  border-radius: 26px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  -webkit-transition: -webkit-transform 0.12s ease, opacity 0.12s ease;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.btn .icon { width: 20px; height: 20px; margin-right: 9px; stroke-width: 2.2; }
.btn--block { display: -webkit-flex; display: flex; width: 100%; }
.btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }

.btn--primary {
  background: #FFB26B;
  background: linear-gradient(180deg, var(--gloed), var(--gloed-diep));
  color: var(--gloed-inkt);
  box-shadow: 0 6px 24px rgba(255, 178, 107, 0.32);
}
.btn--ghost {
  background: transparent;
  border: 2px solid var(--lila);
  color: var(--melk);
}
.btn--ghost:active { background: rgba(169, 162, 201, 0.14); }
.btn--quiet {
  min-height: 48px;
  color: var(--lila);
  font-size: 15px;
  font-weight: 700;
}
.btn--quiet:active { color: var(--melk); }

.code {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ---------- Schermen ---------- */

.screen--home {
  display: block;
  min-height: 100vh;
  background: #17142B;
  background: linear-gradient(180deg, var(--nacht) 0%, var(--nacht-licht) 100%);
}

.home {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 26px 18px 26px;
  padding-top: calc(26px + env(safe-area-inset-top));
  padding-bottom: calc(26px + env(safe-area-inset-bottom));
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));
}

.home__head { text-align: center; }

/* Mascotte met gloed en sterretjes */
.hero {
  position: relative;
  width: 168px;
  height: 148px;
  margin: 0 auto;
}
.hero__glow {
  position: absolute;
  top: -26px;
  left: -16px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 178, 107, 0.36) 0%, rgba(255, 178, 107, 0.14) 42%, rgba(255, 178, 107, 0) 70%);
}
.hero__moon {
  position: absolute;
  top: 0;
  left: 10px;
  width: 148px;
  height: 148px;
  -webkit-filter: drop-shadow(0 0 14px rgba(255, 178, 107, 0.45));
  filter: drop-shadow(0 0 14px rgba(255, 178, 107, 0.45));
}
.star--1 { top: 14px; left: -6px; width: 15px; height: 15px; opacity: 0.7; }
.star--2 { top: 4px; right: 2px; width: 12px; height: 12px; opacity: 0.55; }
.star--3 { top: 84px; right: -14px; width: 14px; height: 14px; opacity: 0.65; }
.star--4 { bottom: 4px; left: 2px; width: 10px; height: 10px; opacity: 0.5; }

.wordmark {
  margin-top: 2px;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--melk);
}
.home__lead {
  margin-top: 6px;
  font-size: 16px;
  color: var(--lila);
}

.notice {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 20px;
  background: rgba(255, 107, 107, 0.14);
  border: 1px solid rgba(255, 107, 107, 0.4);
  color: #FFD3CF;
  font-size: 15px;
  font-weight: 700;
}

/* Rolkaarten */
.roles { margin-top: 22px; }
.role {
  border-radius: 26px;
  background: var(--wolk);
  border: 1px solid var(--rand);
}
.role + .role { margin-top: 14px; }

.rolebtn, .role__head {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  text-align: left;
}
.rolebtn {
  min-height: 86px;
  padding: 16px;
  border-radius: 26px;
  -webkit-transition: background-color 0.12s ease;
  transition: background-color 0.12s ease;
}
.rolebtn:active { background: var(--wolk-licht); }
.role__head { padding: 16px 16px 0; }

.rolebtn__icon {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex: none;
  flex: none;
  width: 52px;
  height: 52px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--gloed);
  color: var(--gloed-inkt);
  box-shadow: 0 0 22px rgba(255, 178, 107, 0.35);
}
.rolebtn__icon .icon { width: 26px; height: 26px; stroke-width: 2.2; }
.role--parent .rolebtn__icon {
  background: var(--oog);
  box-shadow: 0 0 22px rgba(185, 167, 240, 0.28);
}
.rolebtn__text { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.rolebtn__title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}
.rolebtn__sub {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--lila);
}
.rolebtn__chev { width: 20px; height: 20px; margin-left: 8px; color: var(--lila); stroke-width: 2.4; }

.role__body { padding: 14px 16px 16px; }
.role__hint { margin-bottom: 12px; font-size: 14.5px; color: var(--lila); }

.paired { margin-bottom: 14px; text-align: center; }
.paired__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--lila);
}
.paired .code {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  color: var(--melk);
}
.role__body .btn--quiet { margin-top: 4px; margin-bottom: -8px; }

.codeform__input {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0 0 12px;
  padding: 0 12px;
  border: 2px solid transparent;
  border-radius: 26px;
  background: var(--wolk-licht);
  color: var(--melk);
  font-family: var(--mono);
  font-size: 16px;            /* nooit kleiner: anders zoomt iOS in */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}
.codeform__input::-webkit-input-placeholder { color: rgba(169, 162, 201, 0.6); letter-spacing: 0.04em; font-weight: 500; }
.codeform__input::placeholder { color: rgba(169, 162, 201, 0.6); letter-spacing: 0.04em; font-weight: 500; }
.codeform__input:focus { outline: none; border-color: var(--gloed); box-shadow: 0 0 18px rgba(255, 178, 107, 0.25); }
.codeform__error {
  margin: -4px 4px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--koraal);
  text-align: center;
}

.assure {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  margin-top: 20px;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--lila);
}
.assure .icon { width: 17px; height: 17px; margin: 1px 9px 0 0; }

/* ---------- Beeldschermen ---------- */

.screen--stage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: #000;
}

.stage__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.stage__video--cover { object-fit: cover; }
.stage__video--contain { object-fit: contain; }
.stage__video.mirrored { -webkit-transform: scaleX(-1); transform: scaleX(-1); }

.stage__message {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0 32px;
  -webkit-transform: translateY(-70%);
  transform: translateY(-70%);
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--melk);
  pointer-events: none;
}

/* Bovenbalk: statuspil links, stopknop rechts */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 12px;
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.status {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  margin-right: 12px;
  padding: 0 18px 0 15px;
  border-radius: 22px;
  background: var(--wolk);
  border: 1px solid var(--rand);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.status__dot {
  -webkit-flex: none;
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--gloed);
}
.status__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 800;
}

/* puntje per toestand: mint = live, gloed = bezig, koraal = fout */
[data-state="starting"] .status__dot,
[data-state="waiting"] .status__dot,
[data-state="connecting"] .status__dot {
  background: var(--gloed);
  -webkit-animation: adem 1.6s ease-in-out infinite;
  animation: adem 1.6s ease-in-out infinite;
}
[data-state="live"] .status__dot { background: var(--mint); box-shadow: 0 0 10px rgba(143, 227, 192, 0.6); }
[data-state="stopped"] .status__dot { background: var(--lila); }
[data-state="lost"] .status__dot,
[data-state="offline"] .status__dot,
[data-state="full"] .status__dot,
[data-state="error"] .status__dot { background: var(--koraal); }
[data-state="lost"] .status__dot {
  -webkit-animation: adem 1s ease-in-out infinite;
  animation: adem 1s ease-in-out infinite;
}

@-webkit-keyframes adem { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes adem { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Ronde stopknop in koraal met wit kruis */
.stopbtn {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex: none;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--koraal);
  color: #fff;
  box-shadow: 0 4px 18px rgba(255, 107, 107, 0.35);
  -webkit-transition: -webkit-transform 0.12s ease;
  transition: transform 0.12s ease;
}
.stopbtn .icon { width: 24px; height: 24px; stroke-width: 3; }
.stopbtn:active { -webkit-transform: scale(0.92); transform: scale(0.92); }

/* ---------- Geluidsmeter ----------
   Het herkenningsteken: een symmetrische rij ronde staafjes, in het midden het
   hoogst, buiten mint en in het midden gloed. app.js zet alleen --level (0–1);
   de hoogte van elk staafje rekent de CSS daaruit. Bij stilte: lage bolletjes. */

.meter {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: center;
  justify-content: center;
  height: 84px;
  pointer-events: none;
}
.meter__bar {
  display: block;
  -webkit-flex: none;
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0 3.5px;
  border-radius: 6px;
  background: var(--mint);
  -webkit-transition: height 0.14s ease-out;
  transition: height 0.14s ease-out;
}
.meter__bar--4, .meter__bar--5, .meter__bar--6 { background: var(--gloed); }
.meter__bar--1 { height: calc(12px + var(--level, 0) * 12px); }
.meter__bar--2 { height: calc(12px + var(--level, 0) * 24px); }
.meter__bar--3 { height: calc(12px + var(--level, 0) * 38px); }
.meter__bar--4 { height: calc(12px + var(--level, 0) * 52px); }
.meter__bar--5 { height: calc(12px + var(--level, 0) * 64px); }
.meter__bar--6 { height: calc(12px + var(--level, 0) * 72px); }

/* klein metertje in de statuspil van de babykamer */
.meter--mini {
  -webkit-flex: none;
  flex: none;
  height: 22px;
  margin-left: 12px;
  -webkit-align-items: center;
  align-items: center;
}
.meter--mini .meter__bar { width: 4px; height: 4px; margin: 0 1.5px; border-radius: 2px; }
.meter--mini .meter__bar--2 { height: calc(4px + var(--level, 0) * 6px); }
.meter--mini .meter__bar--4 { height: calc(4px + var(--level, 0) * 12px); }
.meter--mini .meter__bar--6 { height: calc(4px + var(--level, 0) * 18px); }

.no-level .meter { visibility: hidden; }

/* ---------- Onderbalk met kiezels ---------- */

.dock {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  left: calc(10px + env(safe-area-inset-left));
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 2;
  display: -webkit-flex;
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 6px 9px;
  border-radius: 30px;
  background: var(--wolk);
  border: 1px solid var(--rand);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px 10px 10px;
  padding-left: calc(10px + env(safe-area-inset-left));
  padding-right: calc(10px + env(safe-area-inset-right));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.bottom > * { pointer-events: auto; }
.bottom .meter { margin-bottom: 14px; pointer-events: none; }
.dock--inline { position: relative; left: auto; right: auto; bottom: auto; }

.dockbtn {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  border-radius: 18px;
}
.kiezel {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wolk-licht);
  color: var(--melk);
  -webkit-transition: background-color 0.15s ease, box-shadow 0.15s ease, -webkit-transform 0.12s ease;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.kiezel .icon { width: 25px; height: 25px; }
.dockbtn__label {
  display: block;
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--lila);
}
.dockbtn:active .kiezel { -webkit-transform: scale(0.92); transform: scale(0.92); }
.dockbtn[disabled]:active .kiezel { -webkit-transform: none; transform: none; }

/* actieve kiezel: gloed met abrikoosgloed */
.dockbtn[aria-pressed="true"] .kiezel {
  background: var(--gloed);
  color: var(--gloed-inkt);
  box-shadow: 0 0 28px rgba(255, 178, 107, 0.45);
  box-shadow: var(--schijn);
}
.dockbtn[aria-pressed="true"] .dockbtn__label { color: var(--melk); }

/* Geluid: "aan" is de gewone toestand en licht dus niet op; gedempt is koraal */
.dockbtn--sound[aria-pressed="true"] .kiezel {
  background: var(--wolk-licht);
  color: var(--melk);
  box-shadow: none;
}
.dockbtn--sound[aria-pressed="true"] .dockbtn__label { color: var(--lila); }
.dockbtn--sound[aria-pressed="false"] .kiezel {
  background: var(--koraal);
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 107, 107, 0.4);
}
.dockbtn--sound[aria-pressed="false"] .dockbtn__label { color: var(--koraal); }
.dockbtn--sound[aria-pressed="true"] .when-off,
.dockbtn--sound[aria-pressed="false"] .when-on { display: none; }

/* ---------- Koppelen ---------- */

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  border-radius: 30px 30px 0 0;
  border-top: 1px solid var(--rand);
  background: #17142B;
  background: linear-gradient(180deg, var(--nacht-licht) 0%, var(--nacht) 100%);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.sheet__close {
  position: absolute;
  top: 10px;
  right: 10px;
  right: calc(10px + env(safe-area-inset-right));
  z-index: 2;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wolk-licht);
  color: var(--melk);
}
.sheet__close .icon { width: 22px; height: 22px; stroke-width: 2.6; }
.sheet__close:active { -webkit-transform: scale(0.92); transform: scale(0.92); }

.sheet__inner { position: relative; max-width: 330px; margin: 0 auto; }
.sheet__title {
  padding: 8px 52px 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}
.star--5 { top: 6px; left: 12px; width: 12px; height: 12px; opacity: 0.6; }
.star--6 { top: 58px; right: 6px; width: 11px; height: 11px; opacity: 0.55; }

/* het maantje gluurt over de rand van de QR-kaart */
.peek {
  position: relative;
  width: 252px;
  margin: 0 auto;
  padding-top: 74px;
}
.peek__moon {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  -webkit-filter: drop-shadow(0 0 12px rgba(255, 178, 107, 0.45));
  filter: drop-shadow(0 0 12px rgba(255, 178, 107, 0.45));
}
.qrcard {
  position: relative;
  z-index: 1;
  padding: 12px 12px 12px;
  border-radius: 26px;
  background: var(--melk);
  box-shadow: 0 0 28px rgba(255, 178, 107, 0.22);
}
.peek__hand {
  position: absolute;
  top: -7px;
  width: 22px;
  height: 14px;
  border-radius: 11px 11px 8px 8px;
  background: #FFB869;
}
.peek__hand--l { left: 50%; margin-left: -62px; }
.peek__hand--r { left: 50%; margin-left: 30px; }

.qr {
  width: 228px;
  height: 228px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: var(--melk);
}
.qr svg, .qr img, .qr canvas { display: block; width: 100%; height: 100%; }
/* de witte ondergrond van de QR-code wordt melk, net als de kaart */
.qr svg rect { fill: #FFF3E2; }

.code--big {
  margin-top: 2px;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--gloed-inkt);
  -webkit-user-select: text;
  user-select: text;
}

.sheet__hint { margin-top: 12px; font-size: 14.5px; color: var(--lila); }
.sheet__actions { max-width: 300px; margin: 14px auto 0; }
.sheet__actions .btn + .btn { margin-top: 10px; }

/* ---------- Foutpaneel ---------- */

.panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;                 /* onder de balken: Stop blijft bereikbaar */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 84px 20px 120px;
  background: #17142B;
  background: linear-gradient(180deg, var(--nacht) 0%, var(--nacht-licht) 100%);
}
.panel__card {
  width: 100%;
  max-width: 360px;
  padding: 22px 20px 20px;
  border-radius: 26px;
  background: var(--wolk);
  border: 1px solid var(--rand);
  text-align: center;
}
.panel__icon { width: 36px; height: 36px; color: var(--koraal); stroke-width: 2.2; }
.panel__text { margin: 10px 0 18px; font-size: 16px; font-weight: 700; color: var(--melk); }

/* ---------- Schermvullende lagen ---------- */

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  cursor: pointer;
}
.overlay--dim { z-index: 10; background: #000; }
.overlay--dark { z-index: 5; background: #000; }

/* nachtlampje: warm, zacht verloop van licht abrikoos */
.overlay--light {
  z-index: 11;
  cursor: default;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  background: #FFD9AE;
  background: radial-gradient(circle at 50% 40%, #FFF3E2 0%, #FFE0BA 38%, #FFC78F 72%, #FFB26B 100%);
}

.overlay__faint {
  padding: 0 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #262140;            /* nauwelijks lichtgevend */
}
.overlay__faint--dark { margin-top: 26px; color: #3A3168; }

/* "Lampje uit": doorschijnende pil */
.lightoff {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  min-height: 52px;
  margin-bottom: 30px;
  margin-bottom: calc(30px + env(safe-area-inset-bottom));
  padding: 0 24px 0 18px;
  border-radius: 26px;
  background: rgba(58, 33, 64, 0.13);
  border: 1px solid rgba(58, 33, 64, 0.16);
  color: var(--gloed-inkt);
  font-size: 16px;
  font-weight: 700;
}
.lightoff .icon { width: 21px; height: 21px; margin-right: 9px; stroke-width: 2.2; }
.lightoff:active { background: rgba(58, 33, 64, 0.22); }
.lightoff:focus { outline-color: var(--gloed-inkt); }

/* donker scherm bij de ouder: alleen luisteren, zo min mogelijk licht */
.dark { width: 100%; max-width: 320px; padding: 0 24px; text-align: center; }
.dark__status {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 22px;
  font-size: 16px;
  font-weight: 800;
  color: #6F6890;
}
.dark__status .status__dot { box-shadow: none; opacity: 0.8; }
.meter--dark { opacity: 0.55; }

/* ---------- Alarm ---------- */

.alarm {
  position: absolute;
  top: 70px;                  /* onder de bovenbalk: Stop blijft bereikbaar */
  top: calc(70px + env(safe-area-inset-top));
  left: 12px;
  left: calc(12px + env(safe-area-inset-left));
  right: 12px;
  right: calc(12px + env(safe-area-inset-right));
  z-index: 20;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 10px 10px 16px;
  border-radius: 26px;
  background: var(--koraal);
  color: #fff;
  box-shadow: 0 0 28px rgba(255, 107, 107, 0.5);
  -webkit-animation: alarm 1.1s ease-in-out infinite;
  animation: alarm 1.1s ease-in-out infinite;
}
@-webkit-keyframes alarm {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 107, 107, 0.35); }
  50% { box-shadow: 0 0 40px rgba(255, 107, 107, 0.8); }
}
@keyframes alarm {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 107, 107, 0.35); }
  50% { box-shadow: 0 0 40px rgba(255, 107, 107, 0.8); }
}
.alarm__icon { width: 26px; height: 26px; margin-right: 10px; stroke-width: 2.3; }
.alarm__text {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.25;
}
.alarm__btn {
  -webkit-flex: none;
  flex: none;
  min-height: 48px;
  margin-left: 10px;
  padding: 0 18px;
  border-radius: 24px;
  background: #fff;
  color: #C73A3A;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.alarm__btn:active { background: #FFE1DE; }
.alarm__btn:focus { outline-color: #fff; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 150px;
  bottom: calc(150px + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: 86%;
  padding: 12px 20px;
  border-radius: 24px;
  background: var(--wolk-licht);
  border: 1px solid var(--rand);
  color: var(--melk);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transform: translate(-50%, 10px);
  transform: translate(-50%, 10px);
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease, visibility 0s linear 0.2s;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

/* ---------- Smal scherm (iPhone SE 1e generatie, 320px) ---------- */

@media (max-width: 350px) {
  .home { padding-left: 14px; padding-right: 14px; }
  .home { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
  .hero { -webkit-transform: scale(0.86); transform: scale(0.86); margin-top: -10px; margin-bottom: -8px; }
  .wordmark { font-size: 40px; }
  .home__lead { font-size: 14px; }
  .rolebtn { padding: 14px 12px; }
  .role__head { padding: 14px 12px 0; }
  .role__body { padding: 12px 12px 14px; }
  .rolebtn__icon { margin-right: 12px; }
  .rolebtn__title { font-size: 19px; }
  .rolebtn__sub { font-size: 13.5px; }
  .codeform__input { letter-spacing: 0.02em; padding: 0 6px; }
  .dock { left: 6px; right: 6px; padding-left: 2px; padding-right: 2px; }
  .dock { left: calc(6px + env(safe-area-inset-left)); right: calc(6px + env(safe-area-inset-right)); }
  .dock--inline { left: auto; right: auto; }
  .bottom { padding-left: 6px; padding-right: 6px; }
  .bottom { padding-left: calc(6px + env(safe-area-inset-left)); padding-right: calc(6px + env(safe-area-inset-right)); }
  .kiezel { width: 48px; height: 48px; }
  .dockbtn__label { font-size: 11.5px; }
  .status { padding: 0 14px 0 12px; }
  .status__text { font-size: 15px; }
  .alarm__text { font-size: 14.5px; }
  .alarm__btn { padding: 0 14px; }
}

/* ---------- Laag staand scherm ---------- */

@media (max-height: 620px) and (orientation: portrait) {
  .hero { -webkit-transform: scale(0.8); transform: scale(0.8); margin-top: -18px; margin-bottom: -14px; }
  .home { padding-top: 14px; }
  .home { padding-top: calc(14px + env(safe-area-inset-top)); }
  .roles { margin-top: 16px; }
  .meter--main { height: 64px; }
  .meter--main .meter__bar--1 { height: calc(12px + var(--level, 0) * 8px); }
  .meter--main .meter__bar--2 { height: calc(12px + var(--level, 0) * 17px); }
  .meter--main .meter__bar--3 { height: calc(12px + var(--level, 0) * 27px); }
  .meter--main .meter__bar--4 { height: calc(12px + var(--level, 0) * 37px); }
  .meter--main .meter__bar--5 { height: calc(12px + var(--level, 0) * 46px); }
  .meter--main .meter__bar--6 { height: calc(12px + var(--level, 0) * 52px); }
  .sheet { padding-top: 10px; padding-bottom: 14px; }
  .sheet { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .sheet__title { font-size: 24px; padding-top: 6px; }
  .sheet__hint { display: none; }
  .peek { width: 220px; padding-top: 64px; }
  .peek__moon { width: 88px; height: 88px; margin-left: -44px; }
  .peek__hand--l { margin-left: -56px; }
  .peek__hand--r { margin-left: 26px; }
  .qr { width: 196px; height: 196px; }
  .code--big { font-size: 14px; letter-spacing: 0.03em; }
  .sheet__actions { margin-top: 12px; }
  .sheet__actions .btn + .btn { margin-top: 8px; }
  .panel { padding: 76px 16px 108px; }
}

/* ---------- Liggend op een telefoon ---------- */

@media (orientation: landscape) and (max-height: 500px) {
  .home { max-width: 720px; padding-top: 12px; }
  .home { padding-top: calc(12px + env(safe-area-inset-top)); }
  .home__head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .hero { width: 84px; height: 74px; margin: 0 14px 0 0; }
  .hero__glow { top: -13px; left: -8px; width: 100px; height: 100px; }
  .hero__moon { left: 5px; width: 74px; height: 74px; }
  .star--1 { top: 4px; left: -6px; width: 10px; height: 10px; }
  .star--2 { top: 0; right: -2px; width: 9px; height: 9px; }
  .star--3 { top: 44px; right: -10px; width: 10px; height: 10px; }
  .star--4 { bottom: 0; left: 0; width: 8px; height: 8px; }
  .wordmark { margin-top: 0; font-size: 38px; }
  .home__lead { width: 100%; margin-top: 2px; font-size: 15px; }
  .roles {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-top: 14px;
  }
  .role { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
  .role + .role { margin-top: 0; margin-left: 14px; }
  .assure { margin-top: 14px; }

  .topbar { padding-top: 8px; }
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); }

  /* onderbalk compact: kiezels zonder bijschrift */
  .dock { bottom: 8px; max-width: 400px; padding: 7px 6px; }
  .dock { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .dock--inline { bottom: auto; }
  .bottom { padding-top: 20px; padding-bottom: 8px; }
  .bottom { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .kiezel { width: 48px; height: 48px; }
  .dockbtn__label { display: none; }
  .bottom .meter { margin-bottom: 8px; }
  .meter--main { height: 44px; }
  .meter--main .meter__bar { width: 10px; height: 10px; margin: 0 3px; border-radius: 5px; }
  .meter--main .meter__bar--1 { height: calc(10px + var(--level, 0) * 6px); }
  .meter--main .meter__bar--2 { height: calc(10px + var(--level, 0) * 12px); }
  .meter--main .meter__bar--3 { height: calc(10px + var(--level, 0) * 18px); }
  .meter--main .meter__bar--4 { height: calc(10px + var(--level, 0) * 24px); }
  .meter--main .meter__bar--5 { height: calc(10px + var(--level, 0) * 30px); }
  .meter--main .meter__bar--6 { height: calc(10px + var(--level, 0) * 34px); }

  /* koppelen: QR-kaart links, knoppen rechts */
  .sheet { top: 0; border-radius: 0; border-top: 0; padding-top: 8px; padding-bottom: 10px; }
  .sheet { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .sheet__inner { max-width: 560px; }
  .sheet__title { padding-top: 4px; font-size: 22px; }
  .star--5 { left: 60px; }
  .star--6 { top: 20px; right: 70px; }
  .sheet__cols {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .peek { -webkit-flex: none; flex: none; width: 196px; margin: 0; padding-top: 56px; }
  .peek__moon { top: -4px; width: 76px; height: 76px; margin-left: -38px; }
  .peek__hand { top: -6px; width: 18px; height: 12px; }
  .peek__hand--l { margin-left: -48px; }
  .peek__hand--r { margin-left: 23px; }
  .qrcard { padding: 10px; border-radius: 22px; }
  .qr { width: 172px; height: 172px; border-radius: 12px; }
  .code--big { font-size: 12.5px; letter-spacing: 0.02em; }
  .sheet__side { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; max-width: 300px; margin-left: 24px; padding-top: 30px; }
  .sheet__hint { margin-top: 0; }

  .panel { padding: 64px 20px 84px; }
  .panel__card { padding: 16px 18px; }
  .panel__icon { width: 28px; height: 28px; }
  .panel__text { margin: 6px 0 12px; font-size: 15px; }

  .stage__message { font-size: 18px; }
  .toast { bottom: 90px; }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .lightoff { margin-bottom: 16px; }
  .lightoff { margin-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* laag liggend scherm (iPhone SE liggend, 320px hoog) */
@media (orientation: landscape) and (max-height: 340px) {
  .peek { width: 166px; padding-top: 47px; }
  .peek__moon { width: 64px; height: 64px; margin-left: -32px; }
  .peek__hand--l { margin-left: -42px; }
  .peek__hand--r { margin-left: 20px; }
  .qr { width: 146px; height: 146px; }
  .code--big { font-size: 11px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}