/* Mattie: helm-HUD voor kids (eigen ontwerp, geïnspireerd op een superhelden-helm) */
:root {
  --achter-1: #0B2A66;
  --achter-2: #04102B;
  --achter-3: #010616;
  --hud: #3FE0FF;
  --hud-zacht: rgba(63, 224, 255, .35);
  --hud-heel-zacht: rgba(63, 224, 255, .12);
  --luister: #5CFF9D;
  --denk: #B98CFF;
  --accent: var(--hud);
  --oog: #062047;
  --tekst: #DDF8FF;
  --rood: #FF7A8A;
  --kern: min(52vmin, 440px);
  --niveau: 0;
  --veilig-boven: env(safe-area-inset-top, 0px);
  --veilig-onder: env(safe-area-inset-bottom, 0px);
}
[data-staat="luisteren"] { --accent: var(--luister); }
[data-staat="denken"] { --accent: var(--denk); }
/* gespreksmodus: wachten = microfoon open = rustig groen; slaap = zacht blauw en ademend */
[data-modus="gesprek"][data-staat="wachten"] { --accent: #4FD98C; }
[data-staat="slaap"] { --accent: #3D7BD9; }
[data-staat="slaap"] .helm-licht { animation: slaapadem 5s ease-in-out infinite; }
[data-staat="slaap"] .hud-boog, [data-staat="slaap"] .stem-balk, [data-staat="slaap"] .mic-balken { opacity: .55; transition: opacity .8s; }
[data-modus="gesprek"][data-staat="wachten"] .helm-licht { animation: slaapadem 3s ease-in-out infinite; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  /* midden zo zwart mogelijk: dan spiegelt het gezicht van het kind in het glas */
  background: radial-gradient(ellipse 62% 58% at 50% 46%, #000 0%, #000 55%, var(--achter-2) 82%, var(--achter-1) 100%);
  background-color: var(--achter-3);
  color: var(--tekst);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
main { position: relative; height: 100%; display: grid; place-items: center; }
[hidden] { display: none !important; }

/* ---------- helm ---------- */
.helm { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s; }
.helm-licht {
  position: absolute; top: 18%; width: 26vmin; height: 64%; border-radius: 50%;
  background: radial-gradient(ellipse at center, #BFF6FF 0%, var(--accent) 30%, rgba(43, 184, 255, .25) 55%, transparent 72%);
  filter: blur(4px); opacity: .72; transition: opacity .4s;
}
.helm-licht.links { left: -13vmin; }
.helm-licht.rechts { right: -13vmin; }
.helm-rand { position: absolute; inset: 0; box-shadow: inset 0 0 14vmin 4vmin rgba(1, 6, 22, .95); }

.hud-boog { position: absolute; top: calc(10px + var(--veilig-boven)); left: 50%; transform: translateX(-50%); width: min(86vw, 820px); overflow: visible; }
.hud-boog .lijn { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--accent)); transition: stroke .4s; }
.hud-boog .lijn.dun { stroke-width: 2; opacity: .5; }
.hud-boog .streepjes line { stroke: var(--accent); stroke-width: 3; opacity: .8; }
.hud-boog .blokje { fill: none; stroke: var(--accent); stroke-width: 3; }
.hud-naam { fill: var(--accent); font-size: 15px; letter-spacing: 3px; text-anchor: middle; opacity: .8; font-weight: 700; }

.mic-balken {
  position: absolute; top: calc(16vh + var(--veilig-boven)); left: 7vw; height: 13vmin; width: 11vmin;
  display: flex; align-items: flex-end; gap: 6%; padding: 6px;
  border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); opacity: .9;
}
.mic-balken i { flex: 1; height: 8%; background: var(--accent); border-radius: 2px; box-shadow: 0 0 8px var(--accent); transition: height .08s; }

.hud-boog .streepjes line.aan { stroke: var(--hud); opacity: 1; filter: drop-shadow(0 0 4px var(--hud)); }
.hud-boog .streepjes line.aan.laag { stroke: #FFC94D; }
.hud-boog .streepjes line:not(.aan) { opacity: .2; }

/* stem-balk onderin: de mond van Mattie */
.stem-balk {
  position: absolute; bottom: calc(4vh + var(--veilig-onder)); left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 12px; padding: 10px 18px; z-index: 3;
  border: 3px solid var(--accent); border-radius: 14px; background: rgba(3, 18, 48, .55);
  box-shadow: 0 0 16px var(--hud-zacht); transition: border-color .4s;
}
[data-paneel="spelen"] .stem-balk { display: flex; }
.stem-balk .flits { width: 22px; height: 22px; fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
.segmenten { display: flex; align-items: center; gap: 5px; height: min(7vh, 54px); }
.segmenten i { width: min(1.8vw, 14px); height: 24%; border-radius: 3px; background: var(--accent); opacity: .35; box-shadow: 0 0 6px var(--accent); transition: height .07s, opacity .07s; }

/* ---------- kern (alleen bij opstarten en klaar zichtbaar) ---------- */
.kern {
  position: relative; width: var(--kern); height: var(--kern); padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; z-index: 2; margin-top: -4vh;
}
/* tijdens spelen: leeg, donker midden dat als grote onzichtbare praatknop werkt */
[data-paneel="spelen"] .kern { width: min(70vw, 70vh); height: min(70vw, 70vh); }
[data-paneel="spelen"] .kern svg { opacity: 0; }
.kern svg { width: 100%; height: 100%; overflow: visible; }
.ring { fill: none; stroke: var(--accent); transition: stroke .4s; transform-origin: 120px 120px; }
.ring-buiten { stroke-width: 4; stroke-dasharray: 60 14; filter: drop-shadow(0 0 6px var(--accent)); animation: draai 30s linear infinite; }
.ring-tik { stroke-width: 6; stroke-dasharray: 2 7; opacity: .6; animation: draai 50s linear infinite reverse; }
.ring-bogen { transform-origin: 120px 120px; animation: draai 12s linear infinite; }
.ring-bogen path { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 5px var(--accent)); transition: stroke .4s; }
.kern-bol {
  fill: url(#kern-gloed); transform-origin: 120px 120px;
  transform: scale(calc(1 + var(--niveau) * .14));
  filter: drop-shadow(0 0 calc(18px + var(--niveau) * 30px) var(--accent));
  transition: transform .08s, opacity .4s;
}
.gezicht, .power { opacity: 0; transition: opacity .3s; }
.oog { fill: var(--oog); transform-box: fill-box; transform-origin: center; animation: knipper 5s infinite; transition: transform .2s; }
.mond { fill: none; stroke: var(--oog); stroke-width: 7; stroke-linecap: round; transform-box: fill-box; transform-origin: center top; }
.power path { fill: none; stroke: var(--oog); stroke-width: 9; stroke-linecap: round; }

[data-paneel="start"] .power { opacity: 1; }
[data-paneel="start"] .kern { animation: hup 1.8s ease-in-out infinite; }
[data-paneel="start"] .helm, [data-paneel="klaar"] .helm { opacity: .45; }
[data-paneel="koppel"] .kern, [data-paneel="koppel"] .gehoord, [data-paneel="laden"] .kern { display: none; }

[data-staat="luisteren"] .oog { transform: scaleY(1.15); animation: none; }
[data-staat="denken"] .ring-bogen { animation-duration: 1.4s; }
[data-staat="denken"] .oog { transform: translateY(-5px); animation: none; }
[data-staat="praten"] .mond { transform: scaleY(calc(1 + var(--niveau) * 2.4)); }
[data-staat="denken"] .kern, [data-staat="praten"] .kern { cursor: default; }

.klaar-beeld { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--kern) * .32); opacity: 0; pointer-events: none; }
[data-paneel="klaar"] .klaar-beeld { opacity: 1; }
[data-paneel="klaar"] .kern-bol { opacity: .35; }

/* opstarten van de helm */
.opstarten .kern svg { animation: wegvliegen .9s ease-in both; opacity: 1; }
.opstarten .hud-boog, .opstarten .mic-balken, .opstarten .stem-balk, .opstarten .zij-knop, .opstarten .helm-licht { animation: knipperin .9s steps(6) both; }

/* ---------- tekst onder de kern (voor papa) ---------- */
.gehoord {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(14vh + var(--veilig-onder)); z-index: 3;
  margin: 0; max-width: min(56vw, 600px); text-align: center; font-size: clamp(13px, 1.9vh, 17px);
  color: var(--tekst); opacity: .75; padding: 6px 16px; border: 1px solid var(--hud-zacht); border-radius: 10px;
  background: rgba(3, 18, 48, .55);
}
.gehoord:empty { visibility: hidden; }

/* ---------- zijknoppen ---------- */
.zij-knop {
  position: absolute; bottom: calc(13vh + var(--veilig-onder)); width: min(17vmin, 136px); height: min(17vmin, 136px);
  border-radius: 50%; border: 4px solid var(--accent); background: rgba(3, 18, 48, .7); display: none;
  place-items: center; box-shadow: 0 0 18px var(--hud-zacht), inset 0 0 18px var(--hud-zacht); z-index: 3; padding: 0;
}
.zij-knop::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px dashed var(--hud-zacht); animation: draai 20s linear infinite; }
.zij-knop svg { width: 46%; fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.zij-knop:active { transform: scale(.94); }
.zij-knop.links { left: 6vw; }
.zij-knop.rechts { right: 6vw; }
[data-paneel="spelen"] .zij-knop { display: grid; }
[data-staat="denken"] .zij-knop, [data-staat="praten"] .zij-knop, [data-staat="luisteren"] .zij-knop.rechts { opacity: .35; pointer-events: none; }
/* praatknop: altijd de duidelijkste knop op het scherm */
.zij-knop.links { width: min(21vmin, 170px); height: min(21vmin, 170px); }
[data-staat="wachten"]:not([data-modus="gesprek"]) .zij-knop.links,
[data-staat="slaap"] .zij-knop.links { animation: lokken 2.4s ease-in-out infinite; }
[data-modus="uit"] .zij-knop.links { display: none !important; }
[data-staat="luisteren"] .zij-knop.links { background: rgba(92, 255, 157, .18); }

/* ---------- koppelen (papa) ---------- */
.paneel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; padding: 16px; z-index: 4; }
.ouder-tekst { margin: 0; text-align: center; }
h1.ouder-tekst { font-size: 26px; color: var(--hud); }
.klein { font-size: 15px; max-width: 420px; opacity: .85; }
.melding { color: var(--rood); min-height: 1.4em; }
.code-veld { font-size: 40px; letter-spacing: 12px; min-height: 58px; min-width: 260px; text-align: center; border: 2px solid var(--hud); border-radius: 14px; color: var(--hud); background: rgba(3, 18, 48, .7); }
.toetsen { display: grid; grid-template-columns: repeat(3, 80px); gap: 12px; }
.toetsen button { height: 80px; border-radius: 18px; border: 2px solid var(--hud-zacht); background: rgba(3, 18, 48, .7); color: var(--hud); font-size: 30px; font-weight: 700; }
.toetsen button:active { background: var(--hud-heel-zacht); }

.ouder-link { position: absolute; top: calc(14px + var(--veilig-boven)); right: 14px; width: 30px; height: 30px; opacity: .3; z-index: 5; }
.ouder-link svg { width: 100%; fill: var(--hud); }

/* ---------- teamstrook ---------- */
.team-strook {
  position: absolute; top: calc(16vh + var(--veilig-boven)); right: 6vw; display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-right: 3px solid var(--hud); border-bottom: 3px solid var(--hud); background: rgba(3, 18, 48, .45);
}
.team-strook span {
  width: min(7vmin, 52px); height: min(7vmin, 52px); border-radius: 50%; display: grid; place-items: center;
  font-size: min(3.6vmin, 26px); border: 2px solid var(--hud-zacht); background: rgba(3, 18, 48, .7); opacity: .4;
  transition: opacity .4s, border-color .4s, box-shadow .4s;
}
.team-strook i { width: min(2.4vmin, 18px); height: 3px; background: var(--hud-zacht); }
.team-strook span.klaar { opacity: .85; border-color: var(--luister); }
.team-strook span.bezig { opacity: 1; border-color: var(--hud); box-shadow: 0 0 16px var(--hud); animation: puls-klein 1.2s ease-in-out infinite; }
@keyframes puls-klein { 50% { transform: scale(1.12); } }
@media (orientation: portrait) { .team-strook { top: calc(11vh + var(--veilig-boven)); } }

/* ---------- spellen ---------- */
.bibliotheek { background: rgba(1, 6, 22, .82); }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(40vw, 260px), 1fr)); gap: 3vmin; width: min(92vw, 1100px); max-height: 78vh; overflow-y: auto; padding: 2vmin; }
.tegels button { aspect-ratio: 4 / 3; border-radius: 22px; border: 4px solid var(--hud); padding: 0; overflow: hidden; background: #000; box-shadow: 0 0 22px var(--hud-zacht); }
.tegels button:active { transform: scale(.96); }
.tegels img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zij-knop.thuis { display: grid; top: calc(16px + var(--veilig-boven)); left: 16px; bottom: auto; width: min(13vmin, 96px); height: min(13vmin, 96px); }
.zij-knop.thuis svg { fill: none; stroke: var(--hud); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.speelveld { position: absolute; inset: 0; z-index: 10; background: #000; }
.speelveld iframe { width: 100%; height: 100%; border: 0; display: block; }
.speelveld .zij-knop.thuis { opacity: .75; }

@keyframes lokken { 50% { box-shadow: 0 0 34px var(--accent), inset 0 0 22px var(--hud-zacht); } }
@keyframes slaapadem { 50% { opacity: .3; } }
@keyframes draai { to { transform: rotate(360deg); } }
@keyframes knipper { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes hup { 50% { transform: translateY(-10px); } }
@keyframes wegvliegen { to { transform: scale(2.4); opacity: 0; } }
@keyframes knipperin { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .2; } 100% { opacity: 1; } }

@media (orientation: portrait) {
  :root { --kern: min(64vmin, 470px); }
  .mic-balken { top: calc(11vh + var(--veilig-boven)); }
  .gehoord { bottom: calc(30vh + var(--veilig-onder)); max-width: 80vw; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }