:root{--blue:#2f7bff;--red:#ff4b5c;--yellow:#ffd23f;--green:#3ddc84;--ink:#1d2340;--card:#fffaf0;
  --font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;overflow:hidden;background:#174f2b;font-family:var(--font);color:var(--ink);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none;position:fixed}
button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#cv3{position:fixed;inset:0;width:100%;height:100%;display:none;z-index:8;touch-action:none;cursor:pointer}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;top:0;margin:0 auto;max-width:560px;padding:calc(var(--safe-area-inset-top,env(safe-area-inset-top)) + 8px) 10px 4px;
  display:flex;flex-direction:column;gap:6px;z-index:5;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,1.35,.4,1),opacity .3s ease-out}
#hud.hidden{transform:translateY(-130%);opacity:0}
#hud .row{display:flex;align-items:center;gap:8px}
.ib{pointer-events:auto;width:44px;height:44px;flex:none;border-radius:14px;border:0;background:#fff;box-shadow:0 4px 0 rgba(0,0,0,.2);
  display:grid;place-items:center;transition:transform .12s ease-out}
.ib:active{transform:translateY(2px) scale(.93)}
.ib svg{width:22px;height:22px}
#lvlName{flex:1;min-width:0;color:#fff;font-weight:900;font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lvlName small{display:block;font-size:11px;font-weight:700;opacity:.85;letter-spacing:.03em}
.pill{background:#fff;border-radius:999px;padding:5px 12px;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.2);display:flex;align-items:center;gap:6px;font-size:15px;white-space:nowrap}
.pill .lab{font-size:10px;opacity:.6;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
#movesV{font-size:21px;min-width:14px;text-align:center;color:var(--blue);display:inline-block}
#movesV.low{color:var(--red)}
.bump{animation:bump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.scoreRow{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.97);border-radius:18px;padding:6px 10px 6px 12px;box-shadow:0 4px 0 rgba(0,0,0,.2)}
#scoreV{font-weight:900;font-size:22px;min-width:56px;color:var(--ink);display:inline-block}
.barWrap{flex:1;height:16px;background:#ebe7f3;border-radius:99px;position:relative}
#barFill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:linear-gradient(90deg,#3ddc84,#b8e34a,#ffd23f);
  transition:width .55s cubic-bezier(.2,1.25,.4,1)}
#barFill.neg{background:#ffb3b9}
.tick{position:absolute;top:-5px;width:22px;height:22px;margin-left:-11px;display:grid;place-items:center;font-size:15px;color:#c9c3d8;filter:grayscale(1);opacity:.5;
  text-shadow:0 1px 0 #fff;transition:color .3s,transform .3s}
.tick.got{color:#ffb800;transform:scale(1.25);filter:none;opacity:1}
#targetV{position:absolute;right:4px;top:15px;font-size:10px;font-weight:800;opacity:.55}

#combo{position:fixed;left:12px;top:120px;transform:scale(0);transform-origin:left center;z-index:6;pointer-events:none;
  font-weight:900;color:#fff;font-size:20px;background:linear-gradient(135deg,#ff9f1c,#ff4b5c);padding:3px 11px;border-radius:99px;
  box-shadow:0 4px 0 rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.2,1.6,.4,1);white-space:nowrap}
#combo.on{transform:scale(1)}
#combo.big{animation:comboPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes comboPop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-4deg)}100%{transform:scale(1)}}

#toast{position:fixed;left:50%;bottom:calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom)) + 92px);transform:translate(-50%,30px);opacity:0;z-index:6;pointer-events:none;
  background:rgba(29,35,64,.92);color:#fff;font-weight:800;font-size:14px;padding:10px 16px;border-radius:16px;max-width:88vw;text-align:center;
  transition:transform .4s cubic-bezier(.2,1.4,.4,1),opacity .3s}
#toast.on{transform:translate(-50%,0);opacity:1}

#banner{position:fixed;left:50%;top:auto;bottom:110px;transform:translate(-50%,0) scale(.3);transform-origin:center bottom;opacity:0;z-index:7;pointer-events:none;text-align:center;
  font-weight:900;font-size:26px;color:#fff;padding:12px 22px;border-radius:20px;box-shadow:0 6px 0 rgba(0,0,0,.2);white-space:nowrap;
  transition:transform .4s cubic-bezier(.2,1.6,.4,1),opacity .25s}
#banner small{display:block;font-size:13px;font-weight:800;opacity:.9;white-space:normal;max-width:78vw;margin:2px auto 0;line-height:1.25}
#banner.on{transform:translate(-50%,0) scale(1);opacity:1}

/* ---------- Power-up balk ---------- */
#pbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:9px;
  padding:6px 8px calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom)) + 10px);transition:transform .5s cubic-bezier(.2,1.35,.4,1),opacity .3s}
#pbar.hidden{transform:translateY(130%);opacity:0}
.pw{position:relative;width:56px;height:56px;border-radius:18px;border:0;display:grid;place-items:center;
  box-shadow:0 5px 0 rgba(0,0,0,.25);transition:transform .15s ease-out,filter .2s,opacity .2s}
.pw svg{width:30px;height:30px}
.pw:active{transform:translateY(3px) scale(.92)}
.pw .cnt{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:#fff;color:var(--ink);font-style:normal;
  font-weight:900;font-size:13px;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.2);padding:0 5px}
.pw{opacity:.55;filter:saturate(.5);transform:scale(.9)}                      /* in rust: vaag */
.pw.off{filter:grayscale(1);opacity:.25}                                      /* op */
.pw.act{opacity:1;filter:none;transform:translateY(-8px) scale(1.12);z-index:1;   /* ingezet: licht op */
  animation:aan .8s ease-in-out infinite alternate}
.pw.act::before{content:attr(data-aan);position:absolute;top:-25px;left:50%;transform:translateX(-50%);background:#fff;color:var(--pc);
  font-weight:900;font-size:11px;letter-spacing:.04em;padding:2px 8px;border-radius:99px;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.2)}
@keyframes aan{from{box-shadow:0 5px 0 rgba(0,0,0,.25),0 0 0 3px #fff,0 0 0 6px var(--pc),0 0 10px 4px var(--pc)}
  to{box-shadow:0 5px 0 rgba(0,0,0,.25),0 0 0 3px #fff,0 0 0 6px var(--pc),0 0 28px 12px var(--pc)}}
.pw.pop{animation:pwpop .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes pwpop{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.9) rotate(4deg)}100%{transform:scale(1)}}
.pw.nope{animation:nope .35s}
@keyframes nope{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.c-thru{background:#7b61ff}.c-tiki{background:#ff9f1c}.c-wall{background:#e4572e}.c-extra{background:#17b8a6}.c-scout{background:#f2b700}

/* ---------- Schermen ---------- */
.scr{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--safe-area-inset-top,env(safe-area-inset-top)) + 16px) 16px calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom)) + 16px);
  opacity:0;pointer-events:none;transform:scale(1.06);transition:opacity .35s ease-out,transform .45s cubic-bezier(.2,1.2,.4,1)}
.scr.on{opacity:1;pointer-events:auto;transform:none}
.scr:not(.on),.scr:not(.on) *{pointer-events:none!important}
.dim{background:rgba(15,30,45,.55)}
.card{background:var(--card);border-radius:28px;padding:22px 20px;width:100%;max-width:380px;box-shadow:0 10px 0 rgba(0,0,0,.18),0 20px 40px rgba(0,0,0,.25);text-align:center}
.scr.on .card{animation:cardIn .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes cardIn{from{transform:translateY(40px) scale(.9)}to{transform:none}}
h1{font-size:44px;line-height:1;font-weight:900;color:#fff;text-shadow:0 5px 0 #0d5b2b,0 10px 20px rgba(0,0,0,.3);letter-spacing:-.02em}
h2{font-size:28px;font-weight:900;margin-bottom:8px}
p{font-size:16px;line-height:1.35;font-weight:700}
.btn{display:block;width:100%;border:0;border-radius:20px;padding:15px 18px;font-size:21px;font-weight:900;background:var(--yellow);color:var(--ink);
  box-shadow:0 6px 0 #c99a00;margin-top:12px;transition:transform .12s ease-out,box-shadow .12s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c99a00}
.btn.b2{background:#fff;box-shadow:0 6px 0 #c7c2d6;font-size:18px}
.btn.b2:active{box-shadow:0 2px 0 #c7c2d6}
.btn.blue{background:var(--blue);color:#fff;box-shadow:0 6px 0 #1b4fb0}
.btnrow{display:flex;gap:10px}.btnrow .btn{flex:1}

/* start (statisch) */
#scrStart{background:radial-gradient(120% 80% at 50% 30%,#2f9c4f 0%,#16683a 60%,#0d4a28 100%);transition:opacity .35s ease-out}
#scrStart.on{transform:none}
.tcard{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center}
.tri{width:180px;height:96px;margin-bottom:4px}
.tt{display:flex;flex-direction:column;align-items:center;line-height:.86;font-size:84px;font-weight:900;letter-spacing:-.03em;transform:rotate(-4deg);margin:4px 0 14px}
.tt span{color:#ffd23f;text-shadow:0 6px 0 #1d2340,0 0 0 #1d2340;-webkit-text-stroke:3px #1d2340;paint-order:stroke fill}
.tt span+span{color:#fff;margin-left:34px}
.tcard .sub{color:#fff;font-weight:900;font-size:15px;background:rgba(0,0,0,.25);padding:5px 14px;border-radius:99px;margin-bottom:16px}
.bestbox{background:#fff;border-radius:22px;padding:10px 18px 8px;box-shadow:0 6px 0 rgba(0,0,0,.2);margin-bottom:8px;min-width:200px}
.bestbox .lab{display:block;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.bestbox b{display:block;font-size:38px;font-weight:900;line-height:1.05;color:#ff9f1c;text-shadow:0 2px 0 #c46f00}
.bestbox small{display:block;font-size:12px;font-weight:800;opacity:.6}
.menu{width:100%}
.bigplay{font-size:26px;padding:18px;border-radius:24px;margin-top:6px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.tile{position:relative;border:0;background:#fff;border-radius:20px;padding:10px 4px 9px;box-shadow:0 5px 0 rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .12s ease-out}
.tile:active{transform:translateY(3px)}
.tile canvas,.tile .tic{width:44px;height:44px}
.tile .tic{border-radius:14px;display:grid;place-items:center;font-style:normal}.tile .tic svg{width:26px;height:26px}
.tile b{font-size:15px;font-weight:900}
.tile small{font-size:11px;font-weight:800;opacity:.55}
.tile.new::after{content:'nieuw!';position:absolute;top:-8px;right:-4px;background:#ff4b5c;color:#fff;font-size:10px;font-weight:900;padding:2px 7px;border-radius:99px;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.corner{position:absolute;top:calc(var(--safe-area-inset-top,env(safe-area-inset-top)) + 14px)}
.corner.cl{left:14px}.corner.cr{right:14px}
.minirow{display:flex;justify-content:center;gap:12px;margin-top:14px}

/* tutorial */
.tut-ill{width:100%;height:170px;border-radius:20px;background:#3fae4f;margin-bottom:14px;overflow:hidden}
.tut-ill svg{width:100%;height:100%}
.dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.dots i{width:9px;height:9px;border-radius:5px;background:#d6d0e2;transition:width .3s,background .3s}
.dots i.on{width:24px;background:var(--blue)}
.formula{display:inline-block;margin-top:8px;background:#fff;border-radius:12px;padding:6px 10px;font-weight:900;font-size:14px;box-shadow:inset 0 0 0 2px #ece6f5}

/* characters */
.ccard{max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 2px 6px;margin:6px -4px 0}
.cc{position:relative;border:0;background:#fff;border-radius:18px;padding:8px 8px 10px;box-shadow:0 4px 0 #ddd6ea,inset 0 0 0 2px #efe9f6;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.cc canvas{width:72px;height:72px}
.cc b{font-size:16px;font-weight:900}
.cc span{font-size:12px;font-weight:800;color:#7b61ff;line-height:1.2}
.cc em{font-style:normal;font-size:11px;font-weight:800;opacity:.6;line-height:1.2}
.cc s{text-decoration:none;font-size:12px;font-weight:900;color:#17a34a;margin-top:2px}
.cc u,.teamb u{text-decoration:none;position:absolute;top:6px;right:6px;background:#ff4b5c;color:#fff;font-size:10px;font-weight:900;padding:2px 7px;border-radius:99px}
.cc.sel{box-shadow:0 4px 0 #1b4fb0,inset 0 0 0 3px #2f7bff;background:#eef4ff}
.cc.lock{background:#f3f1f7}
.cc.nope{animation:nope .35s}
.pg{display:block;width:90%;height:7px;border-radius:9px;background:#e4dfee;overflow:hidden;margin:3px 0}
.pg i{display:block;height:100%;background:linear-gradient(90deg,#3ddc84,#ffd23f)}
.teamb{position:relative;display:flex;align-items:center;justify-content:center;gap:6px}
.teamb canvas{width:34px;height:34px;margin:-8px 0}
.unlw{display:none;flex-direction:column;gap:8px;margin-top:10px}
.unl{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#fff6d6,#ffe9f3);border-radius:16px;padding:8px 10px;text-align:left;box-shadow:inset 0 0 0 2px #ffd23f}
.unl canvas{width:56px;height:56px;flex:none}
.unl .minis{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}.unl canvas.mini{width:36px;height:36px}
#endCard{max-height:calc(100vh - 32px);overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
.unl div{flex:1}.unl small{display:block;font-size:11px;font-weight:900;color:#ff4b5c;text-transform:uppercase}
.unl b{display:block;font-size:17px}.unl span{display:block;font-size:12px;font-weight:800;color:#7b61ff}
.unl .btn{width:auto;margin:0;padding:8px 14px;font-size:15px}
/* juichanimaties */
.celgrid{display:flex;flex-direction:column;gap:9px;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 2px 6px;margin:6px -4px 0}
.celc{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:9px 10px;box-shadow:0 4px 0 #ddd6ea,inset 0 0 0 2px #efe9f6;text-align:left;cursor:pointer}
.celc.sel{box-shadow:0 4px 0 #1b4fb0,inset 0 0 0 3px #2f7bff;background:#eef4ff}
.celc.lock{background:#f3f1f7}.celc.nope{animation:nope .35s}
.celico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;flex:none;font-style:normal}
.celico svg{width:30px;height:30px}
.unl .celico{background:#7b61ff}
.celc .ct{flex:1;min-width:0}.celc b{display:block;font-size:16px;font-weight:900}
.celc span{display:block;font-size:12px;font-weight:800;opacity:.7;line-height:1.25}
.celc em{display:block;font-style:normal;font-size:11px;font-weight:800;opacity:.65}
.celc s{text-decoration:none;font-size:12px;font-weight:900;color:#17a34a}
.celc u{text-decoration:none;position:absolute;top:-6px;left:10px;background:#ff4b5c;color:#fff;font-size:10px;font-weight:900;padding:2px 7px;border-radius:99px}
.celc .pv{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:#ffd23f;font-size:16px;font-weight:900;box-shadow:0 3px 0 #c99a00;display:grid;place-items:center;padding-left:3px}
.celc .pv:active{transform:translateY(2px)}
.btn.sm{width:auto;margin:0;padding:8px 12px;font-size:15px}
.unl .btn{flex:none}
/* game over */
.bigscore{font-size:58px;font-weight:900;line-height:1;margin:2px 0 4px;color:var(--ink)}
#endCard.rec .bigscore{color:#ff9f1c;text-shadow:0 3px 0 #c46f00}
#endCard.rec h2{color:#ff9f1c}
.bestline{font-weight:900;font-size:14px;opacity:.65;margin-bottom:12px}
.brk{background:#fff;border-radius:16px;padding:8px 12px;font-weight:800;font-size:15px;text-align:left;box-shadow:inset 0 0 0 2px #efe9f6}
.brk div{display:flex;justify-content:space-between;padding:3px 0}

/* power-up overzicht */
.plist{display:flex;flex-direction:column;gap:9px;text-align:left;margin:6px 0 4px}
.prow{display:flex;gap:12px;align-items:center;background:#fff;border-radius:16px;padding:8px;box-shadow:inset 0 0 0 2px #efe9f6}
.prow .ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none}
.prow .ico svg{width:28px;height:28px}
.prow b{font-size:16px}.prow span{display:block;font-size:13px;font-weight:700;opacity:.75;line-height:1.25}
.prow .n{margin-left:auto;font-weight:900;font-size:18px;padding-right:6px}

/* ---------- foutmeldingen uit de controle ---------- */
#foutmeldingen{position:fixed;left:8px;right:8px;top:calc(var(--safe-area-inset-top,env(safe-area-inset-top)) + 8px);z-index:99;background:#fff7d6;color:#1d2340;border:3px solid #ff9f1c;border-radius:16px;padding:12px 14px;font-size:14px;font-weight:700;max-height:60vh;overflow:auto;box-shadow:0 8px 30px rgba(0,0,0,.35)}
#foutmeldingen b{font-size:16px}#foutmeldingen ul{margin:8px 0 8px 18px}#foutmeldingen li{margin:4px 0}
#foutmeldingen small{display:block;opacity:.7}#foutmeldingen button{margin-top:8px;border:0;border-radius:10px;background:#1d2340;color:#fff;font-weight:900;padding:8px 14px}

/* ---------- taalknop en groepkoppen ---------- */
.corner.cr2{right:66px}
.ib.taal{font-weight:900;font-size:15px;color:#1d2340}
.groepkop{grid-column:1/-1;text-align:left;font-size:15px;font-weight:900;margin:8px 4px 0;opacity:.75;text-transform:uppercase;letter-spacing:.06em}

/* ---------- uitleg: power-ups ---------- */
.tutpw{height:100%;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px 12px;text-align:left}
.tutpw div{display:flex;align-items:center;gap:9px;color:#fff;font-size:13px;line-height:1.1}
.tutpw i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.tutpw i svg{width:17px;height:17px}
.tutpw b{font-weight:900;min-width:78px}
.tutpw span{opacity:.92;font-weight:700}
.unlwacht{font-size:13px;font-weight:800;color:#5b6290;text-align:center;padding:8px 12px;background:rgba(47,123,255,.08);border-radius:12px;line-height:1.3}
#banner small em{font-style:normal;opacity:.8;font-size:.92em}

/* ---------- Ultra-balk (onder de power-ups) ---------- */
.ultra{--uc:#2f7bff;position:relative;flex-basis:100%;max-width:316px;height:34px;border:0;border-radius:17px;overflow:hidden;
  background:rgba(20,26,56,.78);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 4px 0 rgba(0,0,0,.25);color:#fff;font:900 13px/34px var(--font,inherit);
  letter-spacing:.04em;text-align:center;padding:0;transition:transform .2s,filter .2s}
.ultra .uf{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--uc),#fff 260%);opacity:.85;transition:width .5s cubic-bezier(.2,1,.3,1)}
.ultra .ut{position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap}
.ultra.vol{background:var(--uc);animation:ultraGloed .7s ease-in-out infinite alternate;font-size:15px}
.ultra.vol .uf{width:100%!important;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);background-size:220% 100%;animation:ultraGlans 1.1s linear infinite;opacity:1}
.ultra.op{opacity:.55;filter:grayscale(.7);font-size:12px}
.ultra.pop{animation:ultraPop .5s cubic-bezier(.2,1.6,.4,1),ultraGloed .7s .5s ease-in-out infinite alternate}
.ultra.nope{animation:nope .35s}
@keyframes ultraGloed{from{box-shadow:inset 0 0 0 2px #fff,0 0 8px 2px var(--uc),0 4px 0 rgba(0,0,0,.25);transform:scale(1)}
  to{box-shadow:inset 0 0 0 2px #fff,0 0 26px 10px var(--uc),0 4px 0 rgba(0,0,0,.25);transform:scale(1.04)}}
@keyframes ultraGlans{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes ultraPop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.tutultra{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.tutultra .ultra{width:100%;display:block}
.tutul{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;width:100%;text-align:left}
.tutul div{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.15}
.tutul i{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(0,0,0,.08)}
.tutul b{font-weight:900}
.tutul span{opacity:.6;font-size:11px;display:none}
#pbar{flex-wrap:wrap;row-gap:8px}

/* ---------- Openingsscherm studio ---------- */
#studio{position:fixed;inset:0;z-index:100;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;transition:opacity .45s;overflow:hidden}
#studio.uit{opacity:0;pointer-events:none}
#studio .slogo{position:relative;width:min(60vw,300px);margin-top:9%}
#studio .snaam{display:block;width:100%;opacity:0}
/* de vos zit op de letters TAIL, net als in het logo */
#studio .svos{position:absolute;left:80.06%;bottom:100%;width:19.94%}
#studio .svos img{display:block;width:100%;opacity:0;transform-origin:50% 100%}
#studio .sren{position:absolute;left:-30%;bottom:-1%;width:140%;overflow:visible;transition:opacity .18s}
#studio .sren .poot,#studio .sren .onder,#studio .sren .staart,#studio .sren .lijf{transform-box:view-box}
#studio .sren.weg{opacity:0}
#studio .svos img.zit{animation:sZit .5s cubic-bezier(.3,1.6,.5,1) forwards,sStaart .45s .55s ease-in-out 2}
#studio .sa{margin:0 0 -1vh;font:700 11px var(--font);letter-spacing:.32em;color:#888;opacity:0}
#studio.speel .sa{animation:sPres .6s .1s ease-out forwards}
#studio .spres{margin:0;font:700 11px var(--font);letter-spacing:.32em;text-transform:uppercase;color:#888;opacity:0}
#studio.speel .snaam{animation:sNaam .7s .1s cubic-bezier(.2,.9,.3,1) forwards}
#studio.speel .spres{animation:sPres .6s 2.1s ease-out forwards}
.sstof{position:absolute;width:7px;height:7px;border-radius:50%;background:#cfcfcf;pointer-events:none;animation:sStof .55s ease-out forwards}
@keyframes sNaam{from{opacity:0;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes sZit{0%{opacity:0;transform:translateY(-18%) scale(.8,1.15)}50%{opacity:1;transform:translateY(0) scale(1.12,.86)}75%{transform:scale(.96,1.05)}100%{opacity:1;transform:none}}
@keyframes sStaart{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes sStof{from{opacity:.9;transform:translate(0,0) scale(.5)}to{opacity:0;transform:translate(-16px,-10px) scale(1.8)}}
@keyframes sPres{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Account en ranglijst ---------- */
[hidden]{display:none!important}
.acc{background:radial-gradient(120% 80% at 50% 30%,#2f9c4f 0%,#16683a 60%,#0d4a28 100%)}
.accp{font-size:14px;opacity:.75;margin-bottom:12px;overflow-wrap:anywhere}
.acckl{font-size:12px;opacity:.6;margin-top:14px}
.veld{display:block;width:100%;border:0;border-radius:16px;padding:14px 16px;font:800 17px var(--font);color:var(--ink);background:#fff;box-shadow:inset 0 0 0 2px #e4dfee;outline:0;
  -webkit-user-select:text;user-select:text;touch-action:auto;text-align:center}
.veld:focus{box-shadow:inset 0 0 0 3px var(--blue)}
.veld.code{font-size:26px;letter-spacing:.2em}
.accfout{margin-top:10px;font-size:14px;font-weight:800;color:#c81e32;line-height:1.25}
.btn:disabled{opacity:.5}
.btn.rood{background:var(--red);color:#fff;box-shadow:0 6px 0 #b52433}
.btn.klein{font-size:14px;padding:12px 8px;border-radius:16px;box-shadow:0 4px 0 #c7c2d6,inset 0 0 0 2px #efe9f6;white-space:nowrap}
.btn.klein:active{box-shadow:0 1px 0 #c7c2d6,inset 0 0 0 2px #efe9f6}
.btn.gevaar{color:#c81e32}
.privacylink{display:inline-block;margin-top:12px;font-size:13px;font-weight:800;color:var(--ink);opacity:.55;text-decoration:none}
.naamkaart{min-height:62px;display:grid;place-items:center;border-radius:18px;padding:12px;background:#fff;box-shadow:inset 0 0 0 2px #e4dfee;font-size:23px;font-weight:900;color:var(--blue);overflow-wrap:anywhere}
#accBevestig{margin-top:12px}
.corner.cl2{left:66px}
.corner.cl3{left:118px}
.tiles.vier{grid-template-columns:repeat(4,1fr);gap:8px}
.tiles.vier .tile b{font-size:13px}
.tiles.vier .tile small{font-size:10px}
.gastnoot{color:#c81e32;opacity:1!important;margin-top:2px}
.endgast{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;font-weight:800;line-height:1.25;text-align:left;background:rgba(47,123,255,.08);border-radius:14px;padding:9px 10px 9px 12px}
.endgast span{flex:1;min-width:0}
.endgast .btn{flex:none;box-shadow:0 3px 0 #1b4fb0}
.endtegels{display:flex;gap:8px;margin-top:14px}
.etegel{flex:1;min-width:0;border:0;background:#fff;border-radius:16px;padding:9px 2px 8px;box-shadow:0 4px 0 #ddd6ea,inset 0 0 0 2px #efe9f6;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .12s ease-out,box-shadow .12s ease-out}
.etegel:active{transform:translateY(3px);box-shadow:0 1px 0 #ddd6ea,inset 0 0 0 2px #efe9f6}
.etegel i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-style:normal;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.etegel svg{width:22px;height:22px}
.etegel b{font-size:12px;font-weight:900;white-space:nowrap}
.gastknop{position:absolute;top:calc(var(--safe-area-inset-top,env(safe-area-inset-top)) + 14px);right:14px;height:44px;display:flex;align-items:center;gap:6px;border:0;border-radius:22px;padding:0 12px 0 18px;background:#fff;color:var(--ink);font-size:14px;font-weight:900;box-shadow:0 4px 0 rgba(0,0,0,.2);transition:transform .12s ease-out,box-shadow .12s ease-out}
.gastknop:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.gastknop svg{width:16px;height:16px;color:var(--blue)}
.rlijst{flex:1;min-height:120px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 2px 6px;margin:6px -4px 0}
.rrij{display:flex;align-items:center;gap:10px;flex:none;background:#fff;border-radius:14px;padding:9px 12px;box-shadow:inset 0 0 0 2px #efe9f6}
.rrij.ik{background:#eef4ff;box-shadow:inset 0 0 0 3px var(--blue)}
.rplek{min-width:30px;text-align:left;font-size:15px;font-weight:900;color:#ff9f1c}
.rnaam{flex:1;min-width:0;text-align:left;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rscore{font-size:16px;font-weight:900}
.rmelding{font-size:14px;opacity:.7;padding:16px 4px}