/* Startscherm met verplicht account (js/start). Sticker-stijl, groot, weinig tekst. Alleen zichtbaar met html.gate-on. */
#gate{display:none;position:fixed;left:0;right:0;top:var(--gt-top,0);height:var(--gt-h,100%);z-index:200;
  background:radial-gradient(circle at 20% 15%,#ffe9a8 0 12%,transparent 13%),linear-gradient(#5db6ff,#3a8fd0 55%,#7fd36b 55.1%,#5fb957);
  color:var(--navy,#1d2b53);font-weight:800;touch-action:pan-y;transition:opacity .25s;overflow:hidden}
html.gate-on #gate{display:block}
#gate[hidden]{display:none!important}
#gate.gt-out{opacity:0;pointer-events:none}
#gate *{box-sizing:border-box}
#gate .gt-top{position:absolute;right:0;top:0;z-index:2;padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 10px}
#gate .gt-lang{display:flex;gap:6px}
#gate .gt-chip{font:inherit;font-size:14px;min-height:48px;min-width:48px;padding:6px 10px;border:3px solid var(--navy,#1d2b53);border-radius:14px;background:#fff;color:var(--navy,#1d2b53);box-shadow:0 3px 0 var(--navy,#1d2b53);cursor:pointer}
#gate .gt-chip.on{background:var(--yellow,#ffd23f)}
#gate .gt-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy,#1d2b53)}
#gate .gt-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;font-size:15px}
#gate .gt-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(54px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
#gate .gt-body{flex:1 1 auto;min-height:0;width:100%;max-width:520px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;padding:4px 2px 10px;overscroll-behavior:contain}
#gate .gt-body.mid{justify-content:center}
#gate .gt-body>*{flex:none}
#gate .gt-foot{flex:none;width:100%;max-width:520px;display:flex;gap:10px;padding-top:8px}
#gate .gt-foot .gt-btn{flex:1 1 0}
#gate .gt-foot .gt-btn.ghost{flex:0 1 38%}
#gate .gt-foot.stack{flex-direction:column;gap:14px}
#gate .gt-foot.stack .gt-btn{flex:none;width:100%}
#gate .gt-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
#gate .gt-logo{display:flex;align-items:center;justify-content:center;gap:4px;font-size:26px;text-align:center;color:var(--navy,#1d2b53);text-shadow:0 2px 0 #fff8}
#gate .gt-logo b{color:var(--pink,#ff5d8f)}
#gate .gt-logo.big{font-size:clamp(40px,11vw,64px);background:var(--card,#fffaf0);border:4px solid var(--navy,#1d2b53);border-radius:26px;box-shadow:0 6px 0 var(--navy,#1d2b53);padding:10px 22px;text-shadow:none}
#gate .gt-logo.big .gt-globe{display:inline-block;animation:gtspin 6s linear infinite}
#gate .gt-tag{margin:0;font-size:clamp(17px,4.4vw,22px);line-height:1.3;max-width:26ch;text-shadow:0 2px 0 #fff9}
#gate .gt-sub{font-size:15px;opacity:.85;color:#fff;text-shadow:0 2px 0 #0004}
#gate .gt-btn{font:inherit;font-size:clamp(18px,4.6vw,24px);min-height:60px;padding:10px 16px;border:4px solid var(--navy,#1d2b53);border-radius:20px;box-shadow:0 5px 0 var(--navy,#1d2b53);cursor:pointer;color:var(--navy,#1d2b53);background:#fff;-webkit-user-select:none;user-select:none}
#gate .gt-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--navy,#1d2b53)}
#gate .gt-btn.pink{background:var(--pink,#ff5d8f);color:#fff;text-shadow:0 2px 0 #0003}
#gate .gt-btn.blue{background:var(--blue,#3a86ff);color:#fff;text-shadow:0 2px 0 #0003}
#gate .gt-btn.yellow{background:var(--yellow,#ffd23f)}
#gate .gt-btn.ghost{background:var(--card,#fffaf0)}
#gate .gt-btn.small{min-height:48px;font-size:17px;padding:6px 14px}
#gate .gt-btn:disabled{opacity:.5;cursor:default;box-shadow:0 2px 0 var(--navy,#1d2b53);transform:translateY(2px)}
#gate .gt-btn.pulse{animation:gtpulse 1.6s ease-in-out infinite}
#gate .gt-step,#gate .gt-legal,#gate .gt-warn{background:var(--card,#fffaf0);border:4px solid var(--navy,#1d2b53);border-radius:22px;box-shadow:0 5px 0 var(--navy,#1d2b53);padding:14px 16px}
#gate .gt-step h2,#gate .gt-center h2{margin:0 0 6px;font-size:clamp(22px,5.6vw,28px);line-height:1.15}
#gate .gt-center h2{color:#fff;text-shadow:0 3px 0 var(--navy,#1d2b53)}
#gate .gt-p{margin:0;font-size:18px;line-height:1.35;background:var(--card,#fffaf0);border:4px solid var(--navy,#1d2b53);border-radius:18px;padding:10px 14px}
#gate .gt-big{font-size:72px;line-height:1}
#gate .gt-bounce{font-size:84px;line-height:1;animation:gtbounce 1s ease-in-out infinite}
#gate .gt-points{display:flex;flex-direction:column;gap:10px;margin-top:8px}
#gate .gt-point{display:flex;align-items:center;gap:14px;font-size:clamp(17px,4.6vw,21px);line-height:1.25}
#gate .gt-point .ic{flex:none;width:56px;height:56px;display:grid;place-items:center;font-size:32px;background:var(--yellow,#ffd23f);border:3px solid var(--navy,#1d2b53);border-radius:50%}
#gate .gt-note{background:var(--yellow,#ffd23f);border:3px solid var(--navy,#1d2b53);border-radius:16px;padding:10px 14px;font-size:17px;line-height:1.3;max-width:34ch}
#gate .gt-field{margin-top:8px}
#gate label{display:block;font-size:16px;margin:6px 0 4px}
#gate .gt-input{width:100%;min-height:52px;font:inherit;font-size:20px;border:4px solid var(--navy,#1d2b53);border-radius:16px;padding:8px 14px;background:#fff;color:var(--navy,#1d2b53);-webkit-user-select:text;user-select:text;touch-action:manipulation}
#gate .gt-input:focus{outline:4px solid var(--yellow,#ffd23f);outline-offset:1px}
#gate .gt-pwrow{display:flex;gap:8px;align-items:stretch}
#gate .gt-pwrow .gt-input{flex:1;min-width:0}
#gate .gt-eye{flex:none;width:56px;min-height:52px;font-size:24px;border:4px solid var(--navy,#1d2b53);border-radius:16px;background:#fff;cursor:pointer}
#gate .gt-eye[aria-pressed=true]{background:var(--yellow,#ffd23f)}
#gate .gt-hidden{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#gate .gt-msg{min-height:22px;font-size:16px;line-height:1.3;margin-top:6px}
#gate .gt-msg.ok{color:#17803d}#gate .gt-msg.bad{color:#c0233f}
#gate .gt-hint{font-size:14px;opacity:.8;margin-top:6px;line-height:1.3}
#gate .gt-dots{display:flex;gap:8px;justify-content:center;margin:2px 0}
#gate .gt-dots i{width:14px;height:14px;border-radius:50%;border:3px solid var(--navy,#1d2b53);background:#fff}
#gate .gt-dots i.past{background:var(--blue,#3a86ff)}#gate .gt-dots i.now{background:var(--yellow,#ffd23f);transform:scale(1.25)}
#gate .gt-step .gt-legal{border:0;box-shadow:none;padding:0;background:none;border-radius:0}
#gate .gt-legal p{margin:0 0 8px;font-size:16px;line-height:1.35}
#gate .gt-legal .gt-ph{font-size:14px;background:var(--yellow,#ffd23f);border:3px dashed var(--navy,#1d2b53);border-radius:12px;padding:6px 10px}
#gate .gt-check{display:flex;gap:12px;align-items:flex-start;margin:10px 0 2px;font-size:17px;line-height:1.3;cursor:pointer}
#gate .gt-check input{flex:none;width:32px;height:32px;margin:0;accent-color:#e0245e}
#gate .gt-warn{background:#ffe3e8}
#gate .gt-warn h3{margin:0 0 6px;font-size:clamp(20px,5vw,26px);color:#c0233f}
#gate .gt-warn p{margin:0 0 10px;font-size:17px;line-height:1.35}
#gate .gt-link{display:block;margin:12px auto 0;background:none;border:0;font:inherit;font-size:17px;color:var(--blue,#3a86ff);text-decoration:underline;cursor:pointer;min-height:48px;min-width:48px}
#gate .gt-sheet{position:absolute;inset:0;z-index:5;background:#0008;display:grid;place-items:center;padding:12px;overflow:auto}
#gate .gt-card{width:100%;max-width:420px;max-height:100%;overflow:auto;background:var(--card,#fffaf0);border:4px solid var(--navy,#1d2b53);border-radius:22px;box-shadow:0 6px 0 var(--navy,#1d2b53);padding:14px;display:flex;flex-direction:column;gap:10px}
#gate .gt-printcard{border:4px dashed var(--navy,#1d2b53);border-radius:16px;padding:12px;background:#fff}
#gate .gt-printcard h3{margin:4px 0 8px;font-size:20px}
#gate .gt-lab{font-size:14px;opacity:.8;margin-top:8px}
#gate .gt-val{font-size:26px;word-break:break-all}
#gate .gt-line{height:32px;border-bottom:3px solid var(--navy,#1d2b53)}
#gate .gt-row{display:flex;gap:10px}#gate .gt-row .gt-btn{flex:1}
@keyframes gtspin{to{transform:rotate(360deg)}}
@keyframes gtbounce{50%{transform:translateY(-14px)}}
@keyframes gtpulse{50%{transform:scale(1.04)}}
@media (max-height:520px){
  #gate .gt-wrap{padding-top:calc(8px + env(safe-area-inset-top))}
  #gate .gt-top{padding-top:calc(4px + env(safe-area-inset-top))}
  #gate .gt-body>.gt-logo:not(.big){display:none}
  #gate .gt-logo.big{font-size:34px;padding:6px 16px}
  #gate .gt-big,#gate .gt-bounce{font-size:48px}
  #gate .gt-btn{min-height:52px;font-size:19px;padding:6px 12px}
  #gate .gt-foot.stack{flex-direction:row}
  #gate .gt-point .ic{width:44px;height:44px;font-size:24px}
  #gate .gt-step{padding:10px 14px}
  #gate .gt-body.mid{padding-top:44px}
}
@media (max-height:520px) and (max-width:700px){#gate .gt-top{position:absolute}}
@media (prefers-reduced-motion:reduce){#gate *{animation:none!important;transition:none!important}}
/* Afdrukken van het herinneringskaartje: alleen de kaart */
@media print{
  html.gt-printing,html.gt-printing body{height:auto!important;overflow:visible!important;background:#fff!important}
  html.gt-printing body>*:not(#gate){display:none!important}
  html.gt-printing #gate{position:static!important;height:auto!important;background:#fff!important;display:block!important}
  html.gt-printing #gate .gt-top,html.gt-printing #gate .gt-wrap,html.gt-printing #gate .gt-card>*:not(.gt-printcard){display:none!important}
  html.gt-printing #gate .gt-sheet{position:static!important;background:#fff!important;display:block!important;padding:0}
  html.gt-printing #gate .gt-card{border:0;box-shadow:none;max-width:none;overflow:visible}
}

/* Onboarding-stap 'Mijn personage': balk met 'Klaar' boven de kleedkamer */
#ob-avatar-bar{position:fixed;left:calc(8px + env(safe-area-inset-left));top:calc(64px + env(safe-area-inset-top));z-index:150;display:flex;gap:10px;align-items:center;max-width:calc(100vw - 20px);font-weight:800;color:var(--navy,#1d2b53)}
#ob-avatar-bar span{background:var(--yellow,#ffd23f);border:3px solid var(--navy,#1d2b53);border-radius:14px;padding:8px 12px;font-size:16px;box-shadow:0 3px 0 var(--navy,#1d2b53)}
#ob-avatar-bar button{font:inherit;font-size:20px;min-height:52px;padding:6px 18px;background:#2fc25b;color:#fff;border-color:var(--navy,#1d2b53);text-shadow:0 2px 0 #0003}
#ob-avatar-bar span{display:none}
/* kleedkamer tijdens de eerste keer: alleen de groene Klaar-knop, niet ook nog het vinkje */
body:has(#ob-avatar-bar) #editor .ed-b.ok:not(.bk) { display: none; }