:root{--tekst:#EAF0FF;--tekst-zacht:#A7B2D8;--panel:#1B2450;--lila:#232E5C;--lijn:#38427A;
  --teal1:#43CDB8;--teal2:#28A493;--teal3:#1E8375;
  --paars1:#9A7BF0;--paars2:#8B6DF0;--paars3:#6B4FD0;
  --goud:#F6B93B;--goud2:#D99A1B;--roze:#FF7E92;--nacht:#050C2E;
  --glas:rgba(23,26,58,.90);--glasrand:rgba(150,165,235,.35);
  --disp:"Baloo 2",sans-serif;--body:"Nunito",sans-serif;
  --okt:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;
  overflow-x:hidden;overscroll-behavior:none;height:100%}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none}
/* niets selecteerbaar behalve echte invoervelden */
body{-webkit-user-select:none;user-select:none;touch-action:manipulation;
  overscroll-behavior:none;overflow-x:hidden;position:relative;width:100%;
  max-width:100vw}
input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
body{color:var(--tekst);font-family:var(--body);font-weight:600;font-size:16px;line-height:1.5;
  min-height:100vh;
  background:#59445F none no-repeat center top;
  background-size:cover;background-attachment:fixed}
/* zachte waas boven en onder zodat kop en voet leesbaar blijven op het lichte beeld */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(18,16,40,.50) 0%,rgba(18,16,40,.10) 16%,
    rgba(18,16,40,0) 45%,rgba(18,16,40,.08) 78%,rgba(18,16,40,.42) 100%)}

.wrap{max-width:560px;margin:0 auto;position:relative;z-index:1;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom))}
h1{font-family:var(--disp);font-weight:800;font-size:34px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px}
h1::before{content:"";width:17px;height:17px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE9B8,var(--goud) 60%,var(--goud2));
  box-shadow:0 2px 3px rgba(74,59,143,.4)}
h1 span{color:#FFE9B8}
h2{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--tekst);margin:0 0 6px}
.muted{font-size:13.5px;color:var(--tekst-zacht)}
#totstand{color:#fff;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.5)}
button{font-family:var(--body);font-weight:800;cursor:pointer;border:0;border-radius:16px;color:inherit}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn{display:block;width:100%;padding:14px;color:#fff;font-family:var(--disp);font-weight:800;
  font-size:16px;letter-spacing:.03em;margin-top:14px;border-radius:18px;
  background:linear-gradient(180deg,var(--teal1),var(--teal2));
  box-shadow:0 8px 16px rgba(74,59,143,.25);
  transition:transform .07s,box-shadow .07s;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn.ghost{background:var(--panel);color:var(--tekst);box-shadow:none;
  border:2px solid var(--lijn);text-shadow:none}
.btn.alt{background:linear-gradient(180deg,var(--paars1),var(--paars2));
  box-shadow:0 8px 16px rgba(74,59,143,.3)}
.btn:disabled{opacity:.45;transform:none}
.card{background:var(--glas);border-radius:26px;padding:16px 18px 18px;margin-top:12px;
  box-shadow:0 10px 26px rgba(58,46,110,.35);position:relative}
.card:first-child{margin-top:0}
/* lipje bovenop de kaart */
/* paginakop: boven het paneel, zoals de koppen op het thuisscherm */
.paginakop{display:flex;align-items:center;justify-content:space-between;
  margin:4px 2px 10px;min-height:34px}
.paginakop.hidden{display:none}
.paginakop h1{position:relative;flex:1;min-width:0;margin:0;
  font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.02em;
  color:#fff;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;padding-right:46px}
/* spelregel: compact bovenin de kaart */
.spelregel{font-family:var(--disp);font-weight:800;font-size:13.5px;line-height:1.3;
  color:var(--tekst-zacht);text-align:center;margin:0 0 8px}
.spelregel:empty{display:none}
.spelregel b{color:#fff}
#f-tussen .paginakop h1{font-size:16px;white-space:normal;line-height:1.35;padding-right:0}
#f-tussen .paginakop{margin:2px 2px 8px;min-height:0}
#f-uitleg .paginakop h1{font-size:21px}
/* nog gebruikt in enkele losse kaarten */
/* de kaart-svg in snoepkleuren */
.okaart{width:min(72vw,300px);height:auto;display:block;margin:2px auto;
  filter:drop-shadow(0 8px 18px rgba(58,46,110,.25))}
.rand{fill:none;stroke:var(--lijn);stroke-width:3}
.ring{fill:none;stroke:var(--teal1);stroke-width:7;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .95s linear}
.ring.krap{stroke:var(--roze)}
/* bouwer */
.pool{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0;min-height:58px;justify-content:center}
.tile-btn{min-width:56px;height:56px;padding:0 10px;background:#fff;color:var(--tekst);
  font-family:var(--disp);font-weight:800;font-size:22px;border-radius:16px;
  border:2px solid var(--lijn);box-shadow:none;transition:transform .07s}
.tile-btn:active{transform:translateY(2px);box-shadow:none}
.tile-btn.tussen{background:#E2F8F3;border-color:#BCE8DF;box-shadow:none}
.tile-btn.selected{background:linear-gradient(180deg,var(--paars1),var(--paars2));color:#fff;
  border-color:var(--paars3);box-shadow:none}
.ops{display:flex;gap:9px;margin:6px 0;justify-content:center}
.op-btn{width:56px;height:56px;flex:none;background:var(--lila);color:var(--paars2);
  font-family:var(--disp);font-weight:800;font-size:26px;border-radius:50%;
  box-shadow:none;transition:transform .07s}
.op-btn:active{transform:translateY(2px);box-shadow:none}
.op-btn.selected{background:linear-gradient(180deg,var(--goud),#E5A62A);color:#fff;
  box-shadow:none}
.op-btn:disabled{opacity:.25;text-decoration:line-through;transform:none}
.stappen{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--tekst-zacht);
  min-height:22px;margin-top:8px;background:var(--lila);border-radius:14px;padding:8px 14px;
  /* een lang bouwpad in Cijferfabriek duwde hier zonder plafond het hele
     scherm omhoog — dat is precies waarom er tijdens sommige potjes leek te
     kunnen scrollen. De lijst scrolt nu op zichzelf, de rest van het scherm
     staat vast. */
  max-height:104px;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.stappen:empty{display:none}
.stappen div{padding:2px 0}
.hintlijst{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--goud2);margin-top:6px}
.fout{color:var(--roze);font-weight:800;font-size:14px;min-height:20px;margin-top:6px}
.bijna{color:var(--goud2);font-weight:800;font-size:14px;min-height:20px;margin-top:4px}
.status{font-size:13.5px;margin-top:8px;color:var(--tekst-zacht);text-align:center}
.status b{color:var(--teal2)}
.btn-stack{display:flex;gap:9px;margin-top:12px}
.btn-stack .btn{margin-top:0;flex:1;padding:12px;font-size:13px}
/* meldingen en sterren */
.message{padding:14px 10px 4px;margin-top:0;text-align:center;font-family:var(--disp);
  font-weight:800;font-size:24px;letter-spacing:.08em;text-transform:uppercase;background:none}
.message.success{color:var(--tekst)}
.message.error{color:var(--roze)}
.message.neutraal{color:var(--goud2)}
.result-media{font-size:38px;letter-spacing:8px;text-align:center;color:var(--goud);
  margin:2px 0 4px;text-shadow:0 2px 0 rgba(217,154,27,.4)}
.hidden{display:none !important}
/* levelkaart */
.hst{background:var(--panel);border-radius:26px;padding:30px 16px 16px;margin-top:34px;
  box-shadow:0 10px 26px rgba(58,46,110,.35);position:relative}
.hst-kop .sym{position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  background:var(--lila);color:var(--paars2);padding:7px 18px;border-radius:16px;
  font-family:var(--disp);font-weight:800;font-size:16px;box-shadow:0 3px 8px rgba(58,46,110,.18)}
@media(max-width:420px){.lvls{grid-template-columns:repeat(3,1fr)}}
.lvl{aspect-ratio:1;border-radius:18px;background:#F1EFFF;color:var(--tekst);border:2px solid var(--lijn);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:20px;gap:0;transition:transform .07s;
  box-shadow:none}
.lvl:active{transform:translateY(2px);box-shadow:none}
.lvl .st{font-size:10px;letter-spacing:1px;color:var(--goud);font-family:var(--body)}
.lvl.klaar{background:linear-gradient(180deg,var(--teal1),var(--teal2));color:#fff;
  border-color:var(--teal3);box-shadow:none}
.lvl.klaar .st{color:#FFF3D0}
.lvl.nu{background:linear-gradient(180deg,var(--paars1),var(--paars2));color:#fff;
  border-color:var(--paars3);box-shadow:none}
.lvl.nu .st{color:#FFE9B8}
@media (prefers-reduced-motion:no-preference){
  .lvl.nu{animation:pols 1.8s ease-in-out infinite}
  @keyframes pols{0%,100%{box-shadow:none}
    50%{box-shadow:0 0 18px rgba(255,233,184,.9)}}
  .card:not(.hidden),.hst{animation:pin .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes pin{from{opacity:0;transform:translateY(10px)}}
  .message{animation:mpop .32s cubic-bezier(.2,.9,.3,1.25)}
  @keyframes mpop{from{transform:scale(.9);opacity:0}}}
/* speelkop */
.speelkop{display:flex;justify-content:space-between;align-items:center;margin:6px 0 0}
.speelkop .terug{background:rgba(255,255,255,.9);border:0;color:var(--tekst);
  padding:9px 14px;font-size:13px;border-radius:14px;box-shadow:46,110,.25)}
.speelkop .lvlnaam{font-family:var(--disp);font-weight:800;font-size:17px;color:#fff;
  text-shadow:0 2px 0 rgba(74,59,143,.35)}
#f-kaart>.muted{color:#fff;opacity:.92;text-shadow:0 1px 0 rgba(74,59,143,.3)}
/* strooiregen */
.strooisel{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.strooisel i{position:absolute;top:-18px;width:12px;height:12px;border-radius:50%;opacity:.95}
.strooisel i:nth-child(odd){border-radius:3px}
@media (prefers-reduced-motion:no-preference){
  .strooisel i{animation:val linear forwards}
  @keyframes val{to{transform:translateY(108vh) rotate(560deg)}}}

/* doelvak in plaats van het bord */
.goal{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 4px}
.goal-label{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.28em;
  color:var(--tekst-zacht);text-transform:uppercase}
.goal-value{min-width:120px;padding:10px 30px;border-radius:26px;text-align:center;
  background:linear-gradient(180deg,var(--paars1),var(--paars2));color:#fff;
  font-family:var(--disp);font-weight:800;font-size:54px;line-height:1.1;
  box-shadow:0 12px 22px rgba(58,46,110,.3)}
/* tijdbalk */
.tijdbalk{height:14px;border-radius:8px;background:var(--lila);overflow:hidden;margin-top:12px;
  box-shadow:inset 0 2px 4px rgba(58,46,110,.15)}
.tijdbalk.krap i{background:linear-gradient(180deg,#FF9CAB,var(--roze))}
/* spel-animaties */
@media (prefers-reduced-motion:no-preference){
  .tile-btn.plop{animation:plop .3s cubic-bezier(.2,.9,.3,1.4)}
  @keyframes plop{from{transform:scale(.4);opacity:0}}
  .tile-btn.vers{animation:plop .34s cubic-bezier(.2,.9,.3,1.4) backwards}
  .goal-value{animation:plop .4s cubic-bezier(.2,.9,.3,1.35)}
  .pool.schud{animation:schud .3s}
  @keyframes schud{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}
    75%{transform:translateX(7px)}}
  .ster{display:inline-block;animation:sterval .45s cubic-bezier(.2,.9,.3,1.5) backwards}
  @keyframes sterval{from{transform:scale(0) rotate(-160deg);opacity:0}}}
.zweef{position:absolute;left:50%;transform:translateX(-50%);top:-6px;pointer-events:none;
  font-family:var(--disp);font-weight:800;font-size:22px;color:var(--teal2);z-index:5;
  text-shadow:0 2px 0 #fff}
@media (prefers-reduced-motion:no-preference){
  .zweef{animation:zweef .8s ease-out forwards}
  @keyframes zweef{to{transform:translateX(-50%) translateY(-36px);opacity:0}}}
.poolwrap{position:relative}

/* munten */
.chip-coins{display:flex;align-items:center;gap:4px;background:var(--glas);border:1px solid var(--glasrand);
  border-radius:14px;padding:6px 12px;font-family:var(--disp);font-weight:800;
  color:var(--goud2);box-shadow:46,110,.25)}
.chip-coins svg,.chip-lives svg{flex:none}
@media (prefers-reduced-motion:no-preference){
  .chip-coins.plus{animation:muntplop .4s cubic-bezier(.2,.9,.3,1.4)}
  @keyframes muntplop{50%{transform:scale(1.25)}}}
/* battle */
.battlekaart{background:linear-gradient(135deg,#6C5CE0,#8A5CE8);border-radius:26px;
  padding:18px;margin-top:34px;color:#fff;box-shadow:0 10px 26px rgba(58,46,110,.4);
  position:relative}
.arena{background:rgba(255,255,255,.95);border-radius:18px;padding:12px 6px;text-align:center;
  color:var(--tekst);box-shadow:46,110,.3);transition:transform .07s}
.arena:active{transform:translateY(2px)}
.arena .av{font-size:34px;line-height:1.1}
.arena .name{font-family:var(--disp);font-weight:800;font-size:12.5px;margin-top:2px}
.arena .bl{font-family:var(--disp);font-weight:800;font-size:11px;color:var(--goud2)}
.bot-panel .av{font-size:34px}
.bot-panel .name{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst)}
.bot-panel .st{font-size:12px;color:var(--tekst-zacht);min-height:16px}
.bot-panel.bevroren{outline:3px solid #9BDCF5}
.bot-panel.bevroren .st{color:#3A9BC4}
.powerups{display:flex;justify-content:center;gap:9px;margin-top:10px}
.powerup{flex:0 1 220px;background:var(--lila);border-radius:14px;padding:10px 6px;
  font-family:var(--disp);font-weight:800;font-size:13px;color:var(--tekst);
  box-shadow:none}
.powerup:active{transform:translateY(2px)}
.powerup:disabled{opacity:.4;transform:none}
.botroute{background:var(--lila);border-radius:14px;padding:10px 14px;margin-top:10px;
  font-family:var(--disp);font-weight:700;font-size:14px;color:var(--tekst)}

/* profiel */
.profile-name{font-family:var(--disp);font-weight:800;font-size:22px;text-align:center;color:var(--tekst)}
.rank{font-family:var(--disp);font-weight:800;font-size:14px;text-align:center;color:var(--paars2)}
.level-bar{height:14px;border-radius:8px;background:var(--lila);overflow:hidden;margin:10px 0 4px;
  box-shadow:inset 0 2px 4px rgba(58,46,110,.15)}
.level-bar i{display:block;height:100%;border-radius:8px;width:0%;
  background:linear-gradient(90deg,var(--goud),#E5A62A);transition:width .5s ease}
.level-text{font-size:12px;color:var(--tekst-zacht);text-align:center}
.stat{text-align:center}
.stat b{display:block;font-family:var(--disp);font-weight:800;font-size:20px;color:var(--tekst)}
.stat span{font-size:11px;color:var(--tekst-zacht)}
/* zoeken */
.radar{width:110px;height:110px;margin:10px auto;border-radius:50%;
  border:4px dashed var(--paars1);display:flex;align-items:center;justify-content:center;
  font-size:46px;background:var(--lila)}
@media (prefers-reduced-motion:no-preference){
  .radar{animation:draai 2.4s linear infinite}
  .radar span{animation:tegendraai 2.4s linear infinite;display:inline-block}
  @keyframes draai{to{transform:rotate(360deg)}}
  @keyframes tegendraai{to{transform:rotate(-360deg)}}}
.search-text{text-align:center;font-family:var(--disp);font-weight:800;color:var(--tekst-zacht);
  min-height:22px}
.vs{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 4px}
.vs .vs-side{text-align:center;flex:1}
.vs .vs-side .avatar{font-size:44px}
.vs .vs-side .name{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst)}
.vs .vs-side .sub{font-size:12px;color:var(--tekst-zacht)}
.vs .vs-mid{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--roze)}
@media (prefers-reduced-motion:no-preference){
  .vs .vs-mid{animation:mpop .4s cubic-bezier(.2,.9,.3,1.4)}}

/* geschenk */
.giftrij{display:flex;gap:10px;margin-top:6px}
.gift-btn{flex:1;font-size:42px;background:var(--lila);border-radius:18px;padding:16px 6px 12px;
  box-shadow:none;text-align:center;transition:transform .07s}
.gift-btn:active{transform:translateY(2px)}
.gift-btn:disabled{opacity:.45;transform:none}
.gift-btn .bedrag{display:block;font-family:var(--disp);font-weight:800;font-size:16px;
  color:var(--goud2);min-height:20px}
/* missies */
.missions{margin-top:14px}
.mission{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--lila);border-radius:12px;padding:9px 12px;margin-top:7px;font-size:13px}
.mission .bel{font-family:var(--disp);font-weight:800;color:var(--goud2);white-space:nowrap}
.mission.af{opacity:.55}
.mission.af .tekst{text-decoration:line-through}
/* rangenpad */

.pad span{font-size:17px;opacity:.3;transition:transform .2s}
.pad span.gehaald{opacity:.85}
.pad span.nu{opacity:1;transform:scale(1.35)}
/* emotes en eindsprint */
.bot-panel{position:relative}
.emote{position:absolute;right:8px;top:-14px;background:#fff;border-radius:12px;
  padding:4px 9px;font-size:17px;box-shadow:0 3px 8px rgba(58,46,110,.28)}
@media (prefers-reduced-motion:no-preference){
  .emote{animation:plop .3s cubic-bezier(.2,.9,.3,1.4)}
  .bot-panel.spurt{animation:spurttril .5s ease-in-out infinite}
  @keyframes spurttril{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}}
.bot-panel.spurt .bot-bar i{background:linear-gradient(90deg,#FF9CAB,var(--roze))}

/* kleedkamer */
.kleedknop{display:block;margin:6px auto 0;background:var(--lila);border-radius:14px;
  padding:8px 16px;font-family:var(--disp);font-weight:800;font-size:13px;color:var(--paars2);
  box-shadow:none}
.filter-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.filter-tab{background:var(--lila);border-radius:12px;padding:7px 13px;font-family:var(--disp);
  font-weight:800;font-size:13px;color:var(--tekst)}
.filter-tab.active{background:linear-gradient(180deg,var(--paars1),var(--paars2));color:#fff}
.item{background:#F7F5FF;border:2px solid var(--lijn);border-radius:16px;padding:6px 4px 4px;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .07s}
.item:active{transform:translateY(2px)}
.item.on{border-color:var(--goud);background:#FFF8E8;box-shadow:0 0 0 2px var(--goud)}
.item .prijs{font-family:var(--disp);font-weight:800;font-size:11px;color:var(--goud2);
  min-height:15px}
.item .prijs.slot{color:var(--tekst-zacht)}
.kleedmelding{text-align:center;font-family:var(--disp);font-weight:800;font-size:13px;
  color:var(--roze);min-height:20px;margin-top:8px}

/* levens */
.chip-lives{display:flex;align-items:center;gap:4px;background:var(--glas);border:1px solid var(--glasrand);
  border-radius:14px;padding:6px 11px;font-family:var(--disp);font-weight:800;
  color:#E84463;box-shadow:46,110,.25)}
.regen-text{text-align:center;font-size:12px;color:var(--tekst-zacht);min-height:17px}
.leegplaat{font-size:56px;text-align:center;margin:6px 0}
/* nep-advertentie */
.adplaat{background:linear-gradient(135deg,#FFE9B8,#FFD1DC);border-radius:18px;
  padding:26px 14px;text-align:center;margin:8px 0;position:relative;overflow:hidden}
.adplaat .avatar{font-size:56px}
.adplaat .t{font-family:var(--disp);font-weight:800;font-size:22px;color:#7A4A2E}
.adplaat .s{font-size:13px;color:#9A6A48}
.adplaat::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent)}
@media (prefers-reduced-motion:no-preference){
  .adplaat::after{animation:glim 1.8s ease-in-out infinite}
  @keyframes glim{to{left:120%}}}
.adlabel{position:absolute;top:8px;left:10px;background:rgba(0,0,0,.35);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:10px;letter-spacing:.12em;
  padding:3px 8px;border-radius:8px}
.adbalk{height:8px;border-radius:5px;background:var(--lila);overflow:hidden;margin-top:10px}
.adbalk i{display:block;height:100%;width:0%;background:var(--goud);transition:width 1s linear}

/* --- geïllustreerde lucht --- */
.zon{display:none;position:fixed;left:50%;top:16vh;width:150px;height:150px;margin-left:-75px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 42% 38%,#FFF3D6,#FFD98F 55%,#FFC06B);
  box-shadow:0 0 70px 34px rgba(255,214,140,.55)}
.wolk{display:none}
@media (prefers-reduced-motion:no-preference){
  .wolk{animation:drijf linear infinite}
  @keyframes drijf{from{transform:translateX(-16vw)}to{transform:translateX(116vw)}}}
.bokeh{display:none;position:fixed;bottom:-20px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,0) 70%)}
@media (prefers-reduced-motion:no-preference){
  .bokeh{animation:stijg linear infinite}
  @keyframes stijg{to{transform:translateY(-110vh);opacity:0}}}
/* --- glans en diepte --- */
.btn,.tile-btn,.op-btn,.gift-btn,.powerup,.arena,.lvl{position:relative;overflow:hidden}
.btn::before,.tile-btn::before,.gift-btn::before,.powerup::before{content:"";position:absolute;
  inset:2px 2px 55% 2px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0))}
.btn.ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
.op-btn::before{content:"";position:absolute;inset:3px 3px 50% 3px;border-radius:50% 50% 40% 40%;
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0))}
.tile-btn{background:linear-gradient(180deg,#2A356A,#222C58);color:var(--tekst)}
.tile-btn.tussen{background:linear-gradient(180deg,#1E5B52,#164A43)}
.goal-value{position:relative;overflow:hidden}
.goal-value::before{content:"";position:absolute;inset:4px 8px 55% 8px;border-radius:20px;
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0))}
.card{box-shadow:0 16px 40px rgba(6,12,32,.55);
  backdrop-filter:blur(8px);border:1px solid var(--glasrand)}
/* --- logo --- */

/* --- zonnestraal achter beloningen --- */

@media (prefers-reduced-motion:no-preference){
  
  @keyframes draai2{to{transform:rotate(360deg)}}}
.result-media,.message{position:relative;z-index:1}

/* ranglijst en vrienden */
.duoknoppen{display:flex;gap:9px;margin-top:10px}
.duoknoppen .btn{margin-top:0;flex:1;padding:11px;font-size:13px}
.rank-row.me{background:linear-gradient(180deg,#FFF3D6,#FFE9B8);outline:2px solid var(--goud)}
.rank-row .rank-pos{font-family:var(--disp);font-weight:800;width:30px;text-align:center;font-size:15px}
.rank-row .rank-name{flex:1;font-weight:800;font-size:14px}
.rank-row .rank-pts{font-family:var(--disp);font-weight:800;color:var(--paars2)}
.codevak{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:.3em;
  text-align:center;background:var(--lila);border-radius:16px;padding:12px;color:var(--paars2);
  margin:6px 0}
.vriendrij{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;
  margin-top:7px;background:var(--lila)}
.vriendrij .vnm{flex:1;font-weight:800;font-size:14px}
.vriendrij .btn{margin:0;width:auto;padding:8px 12px;font-size:12px}
.coderij{display:flex;gap:8px;margin-top:8px}
.coderij input{flex:1;background:#0E1738;border:2px solid var(--lijn);border-radius:12px;
  padding:10px 12px;font-family:var(--disp);font-weight:800;font-size:16px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tekst);text-align:center}
.coderij .btn{margin:0;width:auto;padding:10px 16px;font-size:13px}
.edit-btn{background:none;border:none;font-size:14px;padding:2px 6px;cursor:pointer}
.duelstatus{font-size:12px;color:var(--tekst-zacht)}

.rangtabs{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.zoekres .vriendrij{background:#232E5C}
.verzoek{background:linear-gradient(180deg,#FFF3D6,#FFE9B8)}

/* spelkiezer en parenspel */
.spelkiezer{display:flex;gap:6px;justify-content:center;margin:10px 0 0;flex-wrap:wrap}
.parenrooster{display:grid;gap:8px;margin:10px 0}
.hex-tile{aspect-ratio:1;background:linear-gradient(180deg,#2A356A,#222C58);
  border:2px solid var(--lijn);border-radius:14px;box-shadow:none;
  padding:14%;transition:transform .07s;position:relative;overflow:hidden}
.hex-tile:active{transform:translateY(2px);box-shadow:none}
.hex-tile.selected{border-color:var(--goud);background:#3A3A2A;
  box-shadow:0 0 0 2px var(--goud)}
.hex-tile.cleared{opacity:.18;pointer-events:none}
.schud{animation:schud .3s}

/* rondespellen */
.scorevak{display:flex;align-items:center;gap:10px;margin:6px 0}
.scorevak .label{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst)}
.scorebalk{flex:1;height:12px;border-radius:7px;background:var(--lila);overflow:hidden}
.scorebalk i{display:block;height:100%;border-radius:7px;width:0%;
  background:linear-gradient(90deg,var(--teal1),var(--teal2));transition:width .25s}
.vraagvak{background:var(--lila);border-radius:18px;padding:16px 12px;text-align:center;
  min-height:86px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  font-family:var(--disp);font-weight:800;font-size:26px;color:var(--tekst);margin:8px 0}
.vraagvak .stroop{font-size:40px;letter-spacing:.04em}
.vraagvak .figrij svg{width:44px;height:44px;margin:2px}
.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:10px}
.answer-grid.vier{grid-template-columns:repeat(4,1fr)}
.answer-btn{background:linear-gradient(180deg,#2A356A,#222C58);border:2px solid var(--lijn);
  border-radius:16px;box-shadow:none;padding:12px 6px;min-height:58px;
  font-family:var(--disp);font-weight:800;font-size:22px;color:var(--tekst);
  display:flex;align-items:center;justify-content:center;transition:transform .07s}
.answer-btn:active{transform:translateY(2px);box-shadow:none}
.answer-btn.cleared{opacity:.2;pointer-events:none}
.answer-btn svg{width:40px;height:40px}
.answer-btn .swatch{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
.grepenrooster{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:10px}
.grepenrooster .tile-btn{width:100%;min-width:0}

/* inzet en oefenbibliotheek */
.bet-row{display:flex;gap:6px;justify-content:center;align-items:center;margin:10px 0 0}
.bet-row .label{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--tekst-zacht)}
.bet-note{text-align:center;font-family:var(--disp);font-weight:800;font-size:13px;
  color:var(--roze);min-height:18px}

/* toernooikamer */
.spelersrooster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.player-chip{background:var(--lila);border-radius:14px;padding:8px 4px;text-align:center}
.player-chip .name{font-weight:800;font-size:11.5px;color:var(--tekst);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.player-chip.empty{opacity:.4;border:2px dashed var(--lijn);background:none;
  display:flex;align-items:center;justify-content:center;min-height:66px;
  font-family:var(--disp);font-weight:800;color:var(--tekst-zacht)}
.aftel{font-family:var(--disp);font-weight:800;font-size:64px;text-align:center;
  color:var(--paars2)}
.tussenrij{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;
  margin-top:6px;background:var(--lila)}
.tussenrij.me{background:linear-gradient(180deg,#FFF3D6,#FFE9B8);outline:2px solid var(--goud)}
.tussenrij .rank-pos{font-family:var(--disp);font-weight:800;width:28px;text-align:center}
.tussenrij .name{flex:1;font-weight:800;font-size:13.5px}
.tussenrij .rt{font-size:12px;color:var(--tekst-zacht)}
.tussenrij .tp{font-family:var(--disp);font-weight:800;color:var(--paars2)}

/* party-spellen */
.partyknop{width:100%;min-height:150px;border-radius:22px;font-family:var(--disp);
  font-weight:800;font-size:30px;color:#fff;border:0;transition:transform .05s;
  box-shadow:0,0,.2)}
.partyknop:active{transform:translateY(3px)}
.partyknop.rood{background:linear-gradient(180deg,#FF8A9C,#E84463)}
.partyknop.groen{background:linear-gradient(180deg,#4ADBB2,#1E9E7E)}
.stopbaan{position:relative;height:44px;border-radius:12px;background:var(--lila);
  overflow:hidden;margin:6px 0;width:260px;max-width:100%}
.stopzone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#FFE9B8,#F6B93B);
  border-radius:8px}
.stopnaald{position:absolute;top:-2px;bottom:-2px;width:5px;background:var(--paars2);
  border-radius:3px}
.simon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:240px;
  margin:0 auto}
.simon-pad{aspect-ratio:1;border-radius:18px;border:0;opacity:.45;
  transition:opacity .12s,transform .05s;box-shadow:0,0,.2)}
.simon-pad.on{opacity:1;transform:scale(1.05)}
.simon-pad:active{transform:translateY(2px)}

.balance{display:flex;justify-content:center;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:800;font-size:40px;color:var(--goud);
  margin:6px 0 2px;text-shadow:0 2px 10px rgba(0,0,0,.35)}

/* ------- vaste tabbalk (echte-app-navigatie) ------- */
/* ------- schermovergang ------- */
@keyframes schuifin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.scherm-in{animation:schuifin .22s cubic-bezier(.2,.8,.3,1)}
/* ------- onderblad (vervangt browser-popups) ------- */
.sluier{position:fixed;inset:0;background:rgba(6,8,24,.6);z-index:60;
  display:flex;align-items:flex-end;justify-content:center;animation:schuifin .15s ease}
.blad{background:var(--panel);border-radius:22px 22px 0 0;width:100%;max-width:560px;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--glasrand);box-shadow:0 -12px 40px rgba(0,0,0,.45)}
.blad h3{font-family:var(--disp);font-weight:800;font-size:17px;text-align:center;margin-bottom:6px}
.blad .bladtekst{font-size:13px;text-align:center;color:#B9C1E8;margin-bottom:10px}
.blad input{width:100%;padding:13px;border-radius:14px;border:2px solid var(--lijn);
  background:rgba(255,255,255,.06);color:var(--tekst);font-family:var(--disp);
  font-weight:800;font-size:17px;text-align:center;outline:none}
.blad input:focus{border-color:var(--goud)}
.bladknoppen{display:flex;gap:9px;margin-top:14px}
.bladknoppen .btn{margin-top:0;flex:1}
/* ------- toast ------- */
.toast{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:70;background:rgba(19,23,52,.97);
  border:1px solid var(--glasrand);border-radius:14px;padding:10px 18px;
  font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst);
  box-shadow:0 10px 30px rgba(0,0,0,.45);animation:schuifin .18s ease;
  pointer-events:none;white-space:nowrap}

/* logo */

/* preloader */
#preloader{position:fixed;inset:0;z-index:9999;background:#161F4A;transition:opacity .35s}
#preloader.cleared{opacity:0;pointer-events:none}

#preloader::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,18,44,.15) 0%,rgba(16,18,44,0) 30%,
    rgba(16,18,44,.10) 62%,rgba(16,18,44,.82) 100%)}
.pl-onder{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;z-index:1;padding-bottom:5vh}
.loader-bar{width:min(240px,64vw);height:12px;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.22);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.loader-bar i{display:block;height:100%;width:0;border-radius:8px;
  background:linear-gradient(90deg,#F6B93B,#FFE9B8,#F6B93B);background-size:200% 100%;
  animation:pl-vul 3s ease-out forwards,pl-glans 1.2s linear infinite;
  transition:width .25s ease-out}
@keyframes pl-vul{0%{width:4%}60%{width:62%}100%{width:90%}}
@keyframes pl-glans{0%{background-position:0 0}100%{background-position:200% 0}}

#parenvak.hex-board{display:block;position:relative}
#parenvak.hex-board .hex-tile{position:absolute;width:58px;height:58px;padding:0;
  display:flex;align-items:center;justify-content:center}

.simon-grid{width:100%!important;max-width:240px;margin:6px auto}
.simon-pad{min-height:72px}
#parenvak.hex-board .hex-tile{border:0;box-shadow:none;padding:0;line-height:1;
  background:linear-gradient(180deg,#FFFFFF,#CFC8B4);
  clip-path:polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%);
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 4px 6px rgba(10,14,40,.35));
  transform:translate(-50%,-50%);
  transition:opacity .32s,transform .32s}
#parenvak.hex-board .hex-tile:active{transform:translate(-50%,-50%) scale(.94)}
.hex-inner{width:92%;height:92%;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%);
  background:linear-gradient(180deg,#1B2245,#141A37);
  transition:background .25s}
#parenvak.hex-board .hex-tile .hex-icon{width:56%;height:56%}
.hex-tile.found .hex-inner{background:linear-gradient(180deg,#FFE9B8,#F6B93B)}
#parenvak.hex-board .hex-tile.cleared{opacity:0;transform:translate(-50%,-50%) scale(.45);
  pointer-events:none}
.strooiem{font-size:inherit;display:block}
.hex-icon{width:1.3em;height:1.3em;object-fit:contain;display:block;pointer-events:none}

@keyframes vidpop{from{opacity:0;transform:scale(.6)}}
body.ingame header{display:none}
body.ingame #kopbalk{display:none!important}
#uitlegvlak{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;background:rgba(8,10,28,.72);animation:schuifin .18s ease}
.intro-card{background:var(--panel);border:1px solid var(--glasrand);border-radius:20px;
  padding:22px 24px;max-width:320px;text-align:center;box-shadow:0 16px 44px rgba(0,0,0,.5)}
.intro-card b{font-family:var(--disp);font-weight:800;font-size:20px;display:block;margin-bottom:6px}
.intro-card p{font-size:14px;color:#C6CDEB}

.profile-head{display:flex;gap:14px;align-items:flex-start;margin:4px 0 10px}
.profile-avatar{position:relative;width:86px;height:86px;flex:none;border-radius:22px;
  background:linear-gradient(180deg,#8B5CF6,#6D28D9);display:flex;align-items:flex-end;
  justify-content:center;overflow:visible;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.profile-avatar img{width:74px;height:74px;border-radius:18px;object-fit:cover}
.level-badge{position:absolute;right:-7px;bottom:-7px;width:30px;height:30px;border-radius:10px;
  background:linear-gradient(180deg,#FFD34D,#F0862B);color:#fff;font-family:var(--disp);
  font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.9)}
.profile-info{flex:1;min-width:0}
.progress{height:10px;border-radius:7px;background:rgba(255,255,255,.14);overflow:hidden}
.progress i{display:block;height:100%;border-radius:7px;
  background:linear-gradient(90deg,#8B5CF6,#B18CFF)}

.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:8px}
.game-card{background:var(--glas);border:1.5px solid var(--glasrand);border-radius:14px;
  padding:9px 3px;text-align:center}
.game-card .game-icon{font-size:26px;line-height:1.15}
.game-card .game-name{font-size:9.5px;color:var(--tekst-zacht);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.game-card.locked{opacity:.42;filter:grayscale(.9)}

/* indelingsritme: kaarten zonder lip compacter, vaste tussenafstand */
.card.flat{padding-top:18px}
.card.stacked{margin-top:16px}
.rank{text-align:left;font-size:15px;margin-bottom:8px}
.level-text{text-align:left;font-size:12.5px;margin-top:6px}
.bet-row{justify-content:center;margin-top:12px}
.missions .mission{margin:8px 0}

body{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}
body.ingame nav{display:none}

/* ================== WARM-CRÈME THEMA (gekozen stijl) ================== */
:root{
  --tekst:#F2F0FF;--tekst-zacht:#B7B0DC;
  --panel:#141A37;--lila:#1B2245;--lijn:#252F60;
  --paars1:#A47BFF;--paars2:#8B5CF6;--paars3:#5B2FE0;
  --teal1:#35D6A0;--teal3:#12896A;
  --goud:#F5B93C;--goud2:#C98A10;--roze:#FF5C9E;
  --glas:#141A37;--glasrand:#252F60;
  --vlak:#141A37;--vlak2:#1B2245;--vlak3:#202852;
  --rand:#252F60;--rand2:#0E132B}
body{background:#050C2E none!important;
  background-size:420px 420px!important;color:var(--tekst)}
.card{background:#141A37;border:2.5px solid #252F60;border-bottom-width:5px;
  border-bottom-color:#0E132B;box-shadow:0 10px 24px rgba(120,100,50,.13)!important}
.btn{background:linear-gradient(180deg,#8B5CF6,#6D33E8);box-shadow:none;color:#fff}
.btn:active{box-shadow:none}
.btn.alt{background:linear-gradient(180deg,#3C4795,#2B3378);box-shadow:none}
.btn.ghost{background:#141A37;color:var(--tekst);border:2px solid #252F60;box-shadow:none}
.btn.ghost:active{box-shadow:none}
.chip-lives,.chip-coins{background:#141A37;border:2px solid #252F60;box-shadow:none;color:var(--tekst)}
.tile-btn,.answer-btn{background:#141A37;color:var(--tekst);
  border:2px solid #252F60;box-shadow:none}
.op-btn{background:#EAF2EC;color:#3E6D59;box-shadow:none}
.op-btn.selected{background:var(--goud);color:#4A3300;box-shadow:none}
.goal .goal-value{background:linear-gradient(180deg,#1B2245,#141A37);box-shadow:none;color:#fff}
#parenvak.hex-board .hex-tile{background:linear-gradient(180deg,#141A37,#FFFFFF);filter:drop-shadow(0 4px 0 rgba(125,115,88,.24))}
.hex-inner{background:linear-gradient(180deg,#FFFFFF,#141A37)}
.hex-tile.found .hex-inner{background:linear-gradient(180deg,#FFD34D,#F0A81D)}
#uitlegvlak{background:rgba(80,70,40,.45)}
.intro-card,.sheet-card{background:#141A37;border-color:#252F60}
#preloader{background:#050C2E none}
.loader-bar{background:#252F60}
.filter-tab{background:#141A37;border:2px solid #252F60;color:var(--tekst)}
.filter-tab.active{background:#8B5CF6;border-color:#4A1FB0;color:#fff}
.game-card{border-color:rgba(0,0,0,.18)}
.progress{background:#EDE5CC}
.mission{background:#1B2245}
.balance{color:var(--goud2);text-shadow:none}
.message.success{color:#6D33E8}
.message.error{color:#E86A5E}
.btn::before,.btn.ghost::before{display:none}
/* thuis: duo-knoppen en tegels */
.btn-row .btn{margin-top:0}
.btn-row .btn.lg{flex:1.6;font-size:20px;padding:17px}
.btn-row .btn.alt{flex:1;font-size:15px}
.tile-row.twee{grid-template-columns:repeat(2,1fr)}
.tile-row.drie{grid-template-columns:repeat(3,1fr)}
.tile-row+.tile-row{margin-top:8px}
.tile-row{display:flex;gap:10px;margin-top:12px}
.tile{flex:1;position:relative;background:#141A37;border:2px solid #252F60;
  border-radius:16px;box-shadow:none;padding:13px 8px;text-align:center;
  color:var(--tekst);font-family:var(--disp);font-weight:800;font-size:14px}
.tile:active{transform:translateY(3px);box-shadow:none}
.tile small{display:block;font-size:10.5px;color:var(--tekst-zacht);font-weight:700;margin-top:2px}
.tile .badge{position:absolute;top:-7px;right:-6px;min-width:20px;height:20px;border-radius:10px;
  background:#E86A5E;color:#fff;font-size:12px;display:flex;align-items:center;
  justify-content:center;padding:0 5px;box-shadow:0,0,.2)}

.vs-title{font-family:var(--disp);font-weight:800;font-size:23px;text-align:center;color:var(--tekst)}
.vs-sub{text-align:center;font-size:12.5px;color:var(--tekst-zacht);margin:2px 0 12px}
.vs .vs-card{background:#141A37;border:2px solid #252F60;border-radius:16px;
  box-shadow:none;padding:12px 8px}
.vs .vs-mid{font-family:var(--disp);font-weight:800;font-size:26px;font-style:italic;
  color:var(--goud);text-shadow:0 2px 0 rgba(198,127,0,.35)}
.reward{margin:12px auto 0;max-width:280px;text-align:center;border-radius:16px;
  padding:13px 14px;font-family:var(--disp);font-weight:800;font-size:17px}
.reward b{font-size:24px}
.reward.success{background:linear-gradient(180deg,#FFE3A0,#FFC94F);color:#5A3D00;
  border:2px solid #E8B23A;box-shadow:none}
.reward.error{background:#1B2245;color:var(--tekst-zacht);border:2px solid #252F60;
  box-shadow:none;font-size:14px}
.stat-chips{display:flex;gap:8px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.stat-chip{background:#141A37;border:2px solid #252F60;box-shadow:none;
  border-radius:13px;padding:6px 11px;font-family:var(--disp);font-weight:800;font-size:12.5px}
.countdown{min-height:44px;text-align:center;font-family:var(--disp);font-weight:800;
  font-size:36px;color:var(--goud);margin-top:8px;text-shadow:0 2px 0 rgba(198,127,0,.3)}
.countdown.pop{animation:telpop .5s cubic-bezier(.2,.9,.3,1.5)}
@keyframes telpop{from{transform:scale(.4);opacity:0}}
.podium-card.me{outline:2.5px solid #8B5CF6}

#coltabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
#coltabs .filter-tab{font-size:12px;padding:6px 10px}

.game-grid{grid-template-columns:repeat(3,1fr)!important}
.game-card{padding:9px 4px 8px;border-width:2.5px;border-style:solid;
  border-radius:15px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:center;
  transition:transform .07s, box-shadow .07s}
.game-card .game-name{color:#fff;font-weight:800;font-size:9.8px;line-height:1.15;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-card .game-icon{font-size:26px;line-height:1.1;margin-top:4px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.game-card .game-stars{color:#FFE08A;font-size:10px;letter-spacing:1px;margin-top:3px}
.game-card .game-time{font-size:9px;font-weight:800;opacity:1;margin-top:4px;
  background:rgba(0,0,0,.28);border-radius:8px;padding:2px 9px}
.game-card.locked{opacity:.55;filter:grayscale(.75)}
.game-card:active{transform:translateY(2px)}

/* ==================== 6. ONDERSTE NAVIGATIE ==================== */

/* ==================== 7. PROFIEL ==================== */
.profile-avatar{border:0;background:none;padding:0;position:relative;cursor:pointer}
.profile-avatar img{width:74px;height:74px;border-radius:50%;display:block;
  box-shadow:0 0 0 3px #141A37}
.profile-avatar:active img{transform:translateY(2px)}
.profile-trio{display:flex;gap:8px;margin-top:14px}
.trio-tile{flex:1;background:#141A37;border:2px solid #252F60;border-radius:14px;
  box-shadow:none;padding:9px 4px;text-align:center}
.trio-tile b{display:block;font-family:var(--disp);font-weight:800;font-size:17px}
.trio-tile span{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--tekst-zacht)}
.section-title{font-family:var(--disp);font-weight:800;font-size:11.5px;
  letter-spacing:.8px;text-transform:uppercase;color:var(--tekst-zacht);margin-bottom:8px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stats-grid>div{background:#141A37;border:2px solid #252F60;border-radius:14px;
  box-shadow:none;padding:10px 6px;text-align:center}
.stats-grid b{display:block;font-family:var(--disp);font-weight:800;font-size:18px}
.stats-grid span{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--tekst-zacht)}
.avatar-picker{position:fixed;inset:0;z-index:70;background:rgba(80,70,40,.45);
  display:flex;align-items:flex-end}
.avatar-picker.hidden{display:none}
.avatar-picker .sheet-card{background:#141A37;border-radius:26px 26px 0 0;width:100%;
  max-width:520px;margin:0 auto;padding:20px 18px calc(18px + env(safe-area-inset-bottom));
  border-top:2.5px solid #252F60}
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;justify-items:center}
.avatar-option{border:0;background:none;padding:0;border-radius:50%;cursor:pointer}
.avatar-option img{width:62px;height:62px;border-radius:50%;display:block;
  box-shadow:0 0 0 2.5px #252F60}
.avatar-option.selected img{box-shadow:0 0 0 3px #8B5CF6}
.avatar-option:active img{transform:translateY(2px)}
.avatar-img{width:46px;height:46px;border-radius:50%}

/* profiel v2: enkel avatar-design, level naast balk, serie-badges, stats 4-op-rij */
.profile-avatar{width:78px;height:78px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px #141A37}
.profile-avatar img{width:100%;height:100%;border-radius:0;box-shadow:none;display:block}
.profile-name{justify-content:flex-start;text-align:left}
.profile-info{text-align:left}
.level-row{display:flex;align-items:center;gap:9px;margin-top:10px}
.level-row .level-badge{position:static;transform:none}
.level-row .progress{flex:1;position:relative;height:20px}
.progress-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:11px;color:var(--tekst)}
.div-serie{display:flex;align-items:center;gap:10px}
.div-serie .progress{flex:1;height:16px}
.divbadge{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px}
.divbadge em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--tekst-zacht);white-space:nowrap}
.stats-grid{grid-template-columns:repeat(4,1fr)!important;gap:6px}
.stats-grid>div{padding:9px 3px}
.stats-grid b{font-size:15px}
.stats-grid span{font-size:8.5px}

/* missies v2: balken en claim */
.mission .tekst{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.mission .tekst em{font-style:normal;font-size:10px;color:var(--tekst-zacht);font-weight:800}
.mission-bar{display:block;height:7px;border-radius:4px;background:#252F60;overflow:hidden;max-width:190px}
.mission-bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#8B5CF6,#6D33E8)}
.mission.af .mission-bar i{background:linear-gradient(90deg,#C9BC97,#B5A87F)}
.btn.claim{font-size:12px;padding:8px 11px;margin:0;white-space:nowrap}
#missietabs{justify-content:center;margin-bottom:2px}

/* thuiskaart met divisieschild */
.division-card{display:flex;align-items:center;gap:13px}
.division-card .divbadge em{display:none}
.division-info{flex:1;min-width:0}

/* ==================== 8. KNOPPEN = NAV-TAB-OPBOUW ==================== */
/* zelfde constructie als .nav-tab.active: gradient + 2.5px rand + 6px border-bottom + witte ring */
.btn,.btn.lg{
  background:linear-gradient(180deg,#8B5CF6,#6D33E8);
  border:2.5px solid #4A1FB0;border-bottom-width:6px;border-bottom-color:#164F40;
  border-radius:17px;
  box-shadow:0 0 0 3px #141A37,0 10px 20px rgba(27,90,72,.30);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform .07s, border-bottom-width .07s, box-shadow .07s;
}
.btn:active,.btn.lg:active{transform:translateY(3px);border-bottom-width:3px;
  box-shadow:0 0 0 3px #141A37,0 4px 10px rgba(27,90,72,.22);}
.btn.alt{
  background:linear-gradient(180deg,#3C4795,#2B3378);
  border:2.5px solid #567E68;border-bottom-width:6px;border-bottom-color:#40614F;
  box-shadow:0 0 0 3px #141A37,0 10px 20px rgba(79,115,97,.26);
}
.btn.alt:active{transform:translateY(3px);border-bottom-width:3px;
  box-shadow:0 0 0 3px #141A37,0 4px 10px rgba(79,115,97,.2);}
.btn.ghost{
  background:linear-gradient(180deg,#141A37,#1B2245);
  border:2.5px solid #0E132B;border-bottom-width:5px;border-bottom-color:#C9BC97;
  color:var(--tekst);text-shadow:none;
  box-shadow:0 0 0 3px #141A37,0 8px 16px rgba(120,105,70,.14);
}
.btn.ghost:active{transform:translateY(2px);border-bottom-width:3px;}
.btn:disabled{opacity:.5;transform:none;border-bottom-width:4px;}

/* shop + geblokkeerde tegel */
.tile:disabled,.tile.locked{opacity:.5;filter:grayscale(.85);pointer-events:none}
.shop-rij{display:flex;gap:8px;margin-top:10px}
.shop-pak{flex:1;background:#141A37;border:2px solid #252F60;border-radius:14px;
  box-shadow:none;padding:10px 4px;text-align:center;color:var(--tekst)}
.shop-pak b{display:block;font-family:var(--disp);font-weight:800;font-size:17px}
.shop-pak span{font-size:11px;color:var(--tekst-zacht);font-weight:800}
.shop-pak em{display:block;font-style:normal;font-size:8.5px;letter-spacing:.5px;
  text-transform:uppercase;color:#B08A3E;margin-top:2px}
.shop-pak:disabled{opacity:.65}

/* MJ-iconen op knoppen, tegels en chips */
.btn,.btn.lg,.btn.alt{display:flex;align-items:center;justify-content:center;gap:9px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tile-ico{width:44px;height:44px;object-fit:contain;margin-bottom:1px;pointer-events:none}
.tile-row.twee .tile-ico{width:60px;height:60px}

/* speelknoppen: groot, icoon boven label — de twee hoofdacties */
.btn-row .btn{flex-direction:column;gap:7px;padding:18px 10px 15px;
  font-size:16px;border-radius:20px}
.btn-row .btn .btn-ico{height:56px;width:56px;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}

/* battle-knop: icoon links, 1v1 boven Battle */
.btn-row #speel{flex-direction:row;gap:11px}

/* battle als dé knop: groter icoon, grotere tekst */
.btn-row #speel .btn-ico{height:70px;width:70px}

/* ==================== 9. ONDERSTE NAVIGATIE (definitief, één bron) ==================== */
nav.nav-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;width:100%;
  display:flex;align-items:flex-end;
  padding:0 0 calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#F6F0DE,#EFE6CC);
  border:0;border-radius:24px 24px 0 0;
  box-shadow:0 -10px 28px rgba(110,90,45,.18)}
nav.nav-bar.hidden{display:none}
body.ingame nav.nav-bar{display:none}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  position:relative;height:58px;box-sizing:border-box;margin:6px 3px;padding:6px 2px;
  border:0;border-radius:0;background:none;
  color:#A99F82;font-size:10.5px;font-family:var(--disp);font-weight:800;box-shadow:none;
  transition:transform .08s}
.nav-tab:active{transform:scale(.95)}
.nav-label{font-size:9.5px;letter-spacing:.7px;text-transform:uppercase}
.nav-icon{display:block;width:25px;height:25px}
.nav-icon img{width:100%;height:100%;object-fit:contain;
  filter:grayscale(.65) opacity(.6);transition:filter .15s}
.nav-tab.active{background:linear-gradient(180deg,#8B5CF6,#6D33E8);
  border:2.5px solid #4A1FB0;border-bottom-width:6px;border-bottom-color:#164F40;
  border-radius:17px;margin:6px 3px;padding:5px 2px 3px;
  box-shadow:0 0 0 3px #141A37,0 6px 14px rgba(27,90,72,.30);
  transition:background .15s}
.nav-tab.active .nav-icon{width:30px;height:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.nav-tab.active .nav-icon img{filter:none}
.nav-tab.active .nav-label{color:#fff;font-size:10px;text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* speliconen (MJ) op kaarten en radar */
.game-img{object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
.game-card .game-icon{min-height:52px;display:flex;align-items:center;justify-content:center}

/* nieuw logo: preloader groot, home boven divisie */
.loader-logo{display:block;width:min(72vw,320px);height:auto;margin:0 auto 22px;
  filter:drop-shadow(0 8px 20px rgba(110,80,140,.30))}

/* preloader: geen donkere sluier meer op het crème */
#preloader::after{background:none}

/* tik-feedback: gegarandeerde kleur-flits op alle spelbediening */
.tapped{filter:brightness(.82) saturate(1.15)!important;transition:filter .05s}
.answer-btn,.tile-btn,.op-btn,.simon-pad,.hex-tile,.filter-tab,.gift-btn,.avatar-option{
  transition:filter .12s, transform .07s, box-shadow .07s}
.answer-btn:active{filter:brightness(.86)}
.tile-btn:active,.op-btn:active{filter:brightness(.86)}
.simon-pad:active{filter:brightness(.8)}

/* geselecteerd getal in de bouwer: onmiskenbaar goud */
.tile-btn.selected{background:linear-gradient(180deg,#FFD34D,#F0A81D);color:#4A3300;
  box-shadow:0 0 0 2.5px #141A37,0 7px 12px rgba(198,127,0,.30);
  transform:translateY(-2px)}
.tile-btn.tussen.selected{background:linear-gradient(180deg,#FFD34D,#F0A81D);color:#4A3300}

/* ================== THEMA:  SPOOKFOTO (spel: flash) ================== */
/* schermdecor: ligt achter de kaart, alleen tijdens een spel met een thema */
#speeldecor{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transition:opacity .5s ease}
#speeldecor::after{content:"";position:absolute;inset:0}
body[data-thema] #speeldecor{opacity:1}
body[data-thema] #speeldecor::after{
  background:linear-gradient(180deg,rgba(243,237,220,.72),rgba(243,237,220,.88))}

/* het fotovak: de spookkamer waarin de spoken verschijnen */
.vraagvak.thema-spook{background:none;padding:0;min-height:0;display:block;margin:10px 0 0}
.spookfoto{position:relative;width:100%;max-width:320px;margin:0 auto;aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(168deg,#EFE7D2,#DED4B8);
  border:4px solid #141A37;box-shadow:0 10px 22px rgba(90,70,40,.28)}
.spookfoto::before{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 30px rgba(90,70,40,.10)}
.spookje{position:absolute;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center}
.spookje img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  filter:drop-shadow(0 3px 5px rgba(40,25,70,.45));
  animation:spookOp .40s ease-out backwards, spookZweef 3.2s ease-in-out infinite}
@keyframes spookOp{from{opacity:0}to{opacity:1}}
@keyframes spookZweef{0%,100%{transform:translateY(-5%)}50%{transform:translateY(5%)}}
@media (prefers-reduced-motion:reduce){
  .spookje img{animation:spookOp .01s backwards}}

/* lege kamer + camflits zodra de spoken weg zijn */
.spookfoto.leeg .spookflits{position:absolute;inset:0;background:#141A37;
  animation:spookFlits .5s ease-out forwards}
@keyframes spookFlits{0%{opacity:.85}100%{opacity:0}}
.spookvraag{margin:9px 0 0;text-align:center;font-family:var(--disp);font-weight:800;
  font-size:17px;color:var(--tekst)}

/* de vier keuzespoken onder de foto */
.answer-btn .spookkeuze{width:46px;height:46px;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 3px rgba(40,25,70,.30))}

/* kleine/lage schermen: alles moet zonder scrollen bereikbaar blijven */
@media (max-height:600px),(max-width:340px){
  .spookvraag{margin-top:6px;font-size:15px}
  .answer-btn .spookkeuze{width:38px;height:38px}}

/* ================== ZOEK/OEFEN-FLOW: uitleg vooraf, aftellen, oefenklok ================== */
/* uitlegfase op het zoekscherm */
.zoek-uitleg{text-align:center;margin:4px 0 8px}
.zoek-uitleg b{font-family:var(--disp);font-weight:800;font-size:21px;display:block;color:var(--tekst)}
.zoek-uitleg p{margin:4px auto 0;max-width:280px;font-size:14.5px;color:var(--tekst-zacht);font-weight:700}
.search-text{min-height:18px}

/* het vs-vak stapelt titel, spelerskaarten en aftelling onder elkaar */
#vsvak.vs{display:block;margin:6px 0 2px}
.vs-rij{display:flex;align-items:center;justify-content:center;gap:14px}
.vs-rij .vs-side{flex:1;text-align:center}
#vsvak .countdown{min-height:52px;font-size:42px;margin-top:12px}

/* startknop op het uitlegvlak (oefenen) */
#uitlegstart{margin-top:12px;width:100%}

/* oefenen: geen tegenstander, alleen de klok */
.oefenklok{background:var(--lila);border-radius:18px;padding:12px 14px;margin:-6px 0 12px;
  text-align:center;font-family:var(--disp);font-weight:800;font-size:16px;color:var(--tekst)}
.oefenklok b{font-size:20px;color:var(--teal3)}

/* ================== SPELDEMO: mini-voorbeeldrondje in de uitleg ================== */
.uitlegdemo{margin:10px 0 2px;pointer-events:none;user-select:none;overflow:hidden;
  border:2px solid #252F60;border-radius:16px;padding:8px 8px 10px;background:#141A37}
.uitlegdemo .demo-kop{font-size:11px;font-weight:800;color:var(--tekst-zacht);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px}
.uitlegdemo .vraagvak{min-height:52px;font-size:16px;padding:9px 8px;margin:4px 0;border-radius:13px}
.uitlegdemo .vraagvak .stroop{font-size:26px}
.uitlegdemo .vraagvak .figrij svg{width:28px;height:28px}
.uitlegdemo .vraagvak svg{width:60px;height:60px}
.uitlegdemo .answer-grid.vier{grid-template-columns:repeat(2,1fr)}
.uitlegdemo .answer-grid{gap:6px;margin-top:7px}
.uitlegdemo .answer-btn{min-height:38px;font-size:14px;padding:6px 3px;border-radius:11px;
  box-shadow:none}
.uitlegdemo .answer-btn svg{width:24px;height:24px}
.uitlegdemo .answer-btn .spookkeuze{width:28px;height:28px}
.uitlegdemo .answer-btn .swatch{width:26px;height:26px}
.uitlegdemo .spookfoto{max-width:190px;border-width:3px}
.uitlegdemo .vraagvak.thema-spook{margin-top:4px}
.uitlegdemo .spookvraag{font-size:13px;margin-top:5px}
.uitlegdemo .demo-onthoud{grid-column:1/-1;text-align:center;margin:4px 0;font-size:13px}
.uitlegdemo .answer-btn.demo-goed{background:linear-gradient(180deg,#7ED9A7,#3FBF7F);
  border-color:#2FA97C;box-shadow:none;color:#fff}
.demo-schaal{position:relative;padding-bottom:50px}
.demo-hand{position:absolute;z-index:5;width:46px;height:auto;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.28));transition:left .9s ease,top .9s ease;
  transform-origin:20% 3%}
.demo-hand.tik{animation:demotik .35s ease}
@keyframes demotik{50%{transform:translateY(5px) scale(.93)}}
@media (prefers-reduced-motion:reduce){.demo-hand{transition:none}}

/* uitlegtekst: oude donker-thema-kleur was onleesbaar op crème */
.intro-card p{color:var(--tekst-zacht)}

/* uitlegpagina (oefenen vanuit de collectie) */
.uitleg-tekst{text-align:center;font-size:15px;font-weight:700;color:var(--tekst);margin:0 0 4px}
#f-uitleg .uitlegdemo{margin-top:8px}

/* ============ THEMA:  DRUKFOUTJE (spel: stroop) ============ */
/* het woord hangt op een vel papier aan de waslijn */
.vraagvak.thema-druk{background:none;padding:0;min-height:0;display:block;margin:8px 0 0}
.drukvel{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:700/346;
  background:linear-gradient(174deg,#141A37,#1B2245);border-radius:12px;
  border:2px solid #252F60;box-shadow:none}
.drukvel .stroop{position:absolute;left:21.9%;top:38.4%;width:55.2%;height:41.9%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(24px,11cqw,38px);letter-spacing:.04em}
.drukvel{container-type:inline-size}
.vraagvak.thema-druk .muted{text-align:center;margin:6px 0 0}
/* de inktpotjes als antwoorden */
.answer-btn .potje{width:46px;height:46px;border-radius:14px;display:block;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 2px 4px rgba(60,50,20,.18);
  filter:drop-shadow(0 2px 3px rgba(60,40,90,.25))}
.uitlegdemo .answer-btn .potje{width:28px;height:28px;border-radius:9px}
.uitlegdemo .drukvel .stroop{font-size:clamp(14px,11cqw,26px)}

/* ============ THEMA:  KIKKERSPRONG (spel: sequence) ============ */
/* de vijver als podium: blaadjes groot in een zigzag-springpad */
.vraagvak.thema-kikker{background:none;padding:0;min-height:0;display:block;margin:8px 0 0}
.vijver{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:2/1;
  border-radius:14px;overflow:hidden;container-type:inline-size;
  background:linear-gradient(178deg,#CDE9DA,#A9D4C1);
  border:4px solid #141A37;box-shadow:0 10px 22px rgba(60,80,60,.25)}
.vijver::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(255,253,245,.26)}
.vijver .blad{position:absolute;box-sizing:border-box;width:21cqw;height:10.6cqw;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 42% 36%,#8FD3A4,#4FA06B);border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding-bottom:16%;
  box-shadow:0 3px 3px rgba(30,60,45,.24)}
.vijver .blad b{font-family:var(--disp);font-weight:800;color:#1E3826;line-height:1;
  font-size:clamp(13px,6.6cqw,22px);letter-spacing:.02em;
  text-shadow:0 1px 1px rgba(255,255,255,.35)}
.vijver .vraagblad{width:23cqw;height:11.6cqw}
.vijver .vraagblad b{font-size:clamp(16px,7.4cqw,26px)}
.vijver .sprongkik{position:absolute;left:2.5%;top:7%;width:13%;
  filter:drop-shadow(0 2px 3px rgba(30,60,45,.35))}
.vraagvak.thema-kikker .muted{text-align:center;margin:7px 0 0}
/* de stenen als antwoorden */
.answer-btn .steen{width:70px;aspect-ratio:256/186;
  background:linear-gradient(170deg,#EFE9DA,#CFC6AE);border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding-top:15%;
  font-family:var(--disp);font-weight:800;font-size:17px;color:#443E50;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.uitlegdemo .vijver{max-width:230px}
.uitlegdemo .answer-btn .steen{width:48px;font-size:12.5px}

/* ================== COLLECTIE: rustige kaarten, naam eronder ================== */
.game-grid{grid-template-columns:repeat(2,1fr)!important;gap:14px 12px}
.game-cel{display:flex;flex-direction:column;min-width:0}
.game-cel .game-card{position:relative;aspect-ratio:4/3;padding:9px 8px;
  border-width:2px;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}

.game-cel .game-stars{margin:0;text-align:center;
  font-size:12px;letter-spacing:2px;color:#FFE08A;
  text-shadow:0 1px 2px rgba(0,0,0,.3)}
.game-cel .game-time{margin:0;font-size:9.5px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.26);border-radius:9px;padding:2px 10px}
.game-titel{margin:7px 2px 0;text-align:center;font-family:var(--disp);font-weight:800;
  font-size:13px;color:var(--tekst);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-cel .locked+.game-titel{opacity:.5}

/* Fans tellen: honingraatveld */
.hexveld{display:flex;flex-direction:column;align-items:center}
.hexrij{display:flex;gap:3px}
.hexrij+.hexrij{margin-top:-9px}
.hexcel{display:inline-flex;align-items:center;justify-content:center;
  background:#1B2245;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.hexcel img{width:68%;height:68%;object-fit:contain}
/* zes antwoorden (Muizenmaatje): drie kolommen */
.answer-grid.zes{grid-template-columns:repeat(3,1fr)}

/* Schatkaart: bommenrooster om doorheen te slepen */
.padrooster{display:grid;grid-template-columns:repeat(var(--padn,4),1fr);gap:6px;
  max-width:320px;margin:10px auto 0;touch-action:none}
.padcel{aspect-ratio:1;border-radius:12px;background:#1B2245;border:2px solid #252F60;
  display:flex;align-items:center;justify-content:center;font-size:21px;
  user-select:none;-webkit-user-select:none}
.padcel.spoor{background:#BFE4D4;border-color:#7CC3A8}
.padcel.start{background:#F6E8C8;border-color:#E0C98F}
.padcel.schat{background:#F9E9A9;border-color:#E0C98F}

/* IJskoud tellen: ijsblokjes-bord — fout tikken bevriest je */
.jachtbord{position:relative;width:100%;max-width:340px;margin:8px auto 0}
.jachtbord .jachtknop{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;
  clip-path:polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%);
  background:linear-gradient(158deg,#EAF7FF 0%,#B4DCF4 52%,#8FC4E4 100%);
  font-family:var(--disp);font-weight:800;font-size:19px;color:#14507E;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 4px 5px rgba(52,104,156,.30));
  transition:opacity .3s,transform .3s}
.jachtbord .jachtknop:active{transform:translate(-50%,-50%) scale(.93)}
.jachtbord .jachtknop.weg{opacity:.10;transform:translate(-50%,-50%) scale(.62);pointer-events:none}
.ijslaag{position:absolute;inset:-10px;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(228,246,255,.30),rgba(176,218,246,.78));
  backdrop-filter:blur(1.2px);
  animation:ijsprik .45s ease-out}
@keyframes ijsprik{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}

/* Robotstromen: leidingenrooster */
.stroomrooster{display:grid;grid-template-columns:repeat(var(--sn,5),1fr);gap:6px;
  max-width:320px;margin:10px auto 0;touch-action:none}
.stroomcel{position:relative;aspect-ratio:1;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none}
/* losse, nette blokken in volle kleur; uiteinden groter en met gloed */
.blok{position:absolute;inset:4px;border-radius:8px;z-index:1;background:var(--k);
  background-image:linear-gradient(180deg,rgba(255,255,255,.20),rgba(0,0,0,.12));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
  transition:inset .1s}
.blok.eind{inset:1px;border-radius:10px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(0,0,0,.14));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.24),0 0 16px -2px var(--k)}

/* korte schermen: roosters compacter zodat alles boven de vouw blijft */
@media (max-height:640px){
  .stroomrooster{max-width:224px;gap:4px}
  .padrooster{max-width:224px;gap:4px}
  .jachtbord{max-width:186px}
}
.vraagvak.krap{min-height:0;padding:9px 10px}

/* eindscherm: jij en de tegenstander naast elkaar, winnaar uitgelicht */
.klaarvs{display:flex;align-items:stretch;justify-content:center;gap:10px;margin:12px 0 6px}
.klaarvs .vs-card{flex:1;max-width:132px;background:#141A37;border:2px solid #252F60;
  border-radius:16px;padding:12px 8px 10px;text-align:center}
.klaarvs .vs-card .avatar-img{width:46px;height:46px;border-radius:50%}
.klaarvs .vs-card .name{font-family:var(--disp);font-weight:800;font-size:13px;
  color:var(--tekst);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klaarvs .vs-card.winnaar{border-color:var(--goud);
  box-shadow:0 0 0 2px rgba(214,164,25,.25),0 4px 10px rgba(60,50,20,.12)}
.klaarvs-mid{align-self:center;font-family:var(--disp);font-weight:800;
  font-size:24px;color:var(--roze)}
.podium-card>img.avatar-img{width:40px;height:40px;border-radius:50%;margin:0 auto 4px;display:block}
.rank-row>img.avatar-img{width:26px;height:26px;border-radius:50%;margin-right:7px;flex:0 0 auto}

/* stap-voor-stap-uitleg */
.stappenlijst{margin:7px auto 2px;padding:0;max-width:302px;text-align:left;
  list-style:none;counter-reset:stap;display:flex;flex-direction:column;gap:7px}
.stappenlijst li{counter-increment:stap;position:relative;padding-left:31px;
  font-size:14px;font-weight:700;color:var(--tekst);line-height:1.35}
.stappenlijst li::before{content:counter(stap);position:absolute;left:0;top:-1px;
  width:22px;height:22px;border-radius:50%;background:var(--roze);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center}
.stappenlijst li.strafstap{color:#8A6B15}
.stappenlijst li.strafstap::before{content:"!";background:#E8A821}
@media (max-height:640px){
  #zoekdemo{transform:scale(.8);transform-origin:top center;margin-bottom:-44px}
  .stappenlijst{gap:5px}
  .stappenlijst li{font-size:13px}
}

/* categorie-tint tijdens het spelen: zelfde kleur als de collectietegel */
body[data-cat]:not([data-thema]) #speeldecor{opacity:1}

/* thema-achtergrond in tegelstijl: de kleur-blend doet het werk, geen crème-sluier */
body[data-thema].tegelblend #speeldecor::after{background:none}

/* spelmonogram — plaatshouder tot de nieuwe iconenset er is */
.spel-mono{display:inline-flex;align-items:center;justify-content:center;
  border-radius:18px;background:rgba(255,255,255,.20);
  border:2px solid rgba(255,255,255,.42);color:#fff;
  font-family:var(--disp);font-weight:800;letter-spacing:.02em}
/* woordmerk en navigatie zonder plaatjes */
.home-logo,.loader-logo{font-family:var(--disp);font-weight:800;letter-spacing:.14em;
  color:#fff;text-align:center}
.loader-logo{font-size:26px;opacity:.9}
.nav-icon{display:inline-block;width:22px;height:22px;border-radius:7px;
  background:currentColor;opacity:.5}
.nav-tab.active .nav-icon{opacity:1}
.nav-icon[data-n="1"]{border-radius:50%}
.nav-icon[data-n="2"]{clip-path:polygon(50% 0,100% 100%,0 100%)}
.nav-icon[data-n="3"]{clip-path:polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%)}

/* Schatkaart: getekende markeringen i.p.v. emoji */
.padmerk{display:block;width:56%;height:56%;border-radius:50%}
.padmerk.start{background:#4A78E0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.padmerk.schat{background:#E8A821;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.padmerk.bom{background:#E84463;border-radius:50%;
  box-shadow:0 0 0 3px rgba(232,68,99,.28)}
/* Kluiskraker: figuren in de sommen */
.codesym{width:26px;height:26px;object-fit:contain;vertical-align:-6px}

/* ---------- toernooien ---------- */
.toer-tegel{position:relative}
.toer-kaarten{display:flex;flex-direction:column;gap:9px;margin:12px 0 4px}
.toer-kaart{display:block;width:100%;text-align:left;background:#141A37;
  border:2px solid #252F60;border-bottom-width:3px;border-radius:15px;padding:11px 13px}
.toer-kaart.dicht{opacity:.55}
.tk-kop{display:flex;align-items:center;gap:8px}
.tk-naam{font-family:var(--disp);font-weight:800;font-size:15.5px;color:var(--tekst);flex:1}
.tk-vorm{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#B7B0DC;background:#1B2245;border-radius:6px;padding:2px 7px}
.tk-meta{font-size:11.5px;font-weight:700;color:var(--tekst-zacht);margin-top:3px}
.tk-status{font-family:var(--disp);font-weight:800;font-size:12.5px;color:var(--roze);margin-top:5px}
.tk-status.af{color:#2FA97C}
.toer-komt{font-size:12px;font-weight:700;color:var(--tekst-zacht);padding:4px 2px}
.toer-badges{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:8px 0 2px}
.tb{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#B7B0DC;
  background:#1B2245;border-radius:7px;padding:3px 8px}
.tb.hard{background:#F6E3C4;color:#8A6B15}
.toer-klok{text-align:center;font-family:var(--disp);font-weight:800;font-size:12.5px;
  letter-spacing:.05em;color:var(--tekst-zacht);margin:8px 0 2px}
.toer-lijst{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
.toer-spel{display:flex;align-items:center;gap:9px;background:#141A37;
  border:2px solid #252F60;border-radius:13px;padding:9px 11px}
.toer-nr{width:22px;height:22px;border-radius:50%;background:var(--roze);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.toer-naam{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toer-cat{font-size:11px;font-weight:700;color:var(--tekst-zacht)}
.toer-uitslag{text-align:center;margin:12px 0 4px;font-family:var(--disp);font-size:16px}
.toer-uitslag .muted{font-family:var(--body);font-size:12.5px;margin-top:2px}
.toer-bord{display:flex;flex-direction:column;gap:4px;margin:12px 0 6px}
.toer-bordkop{margin:0 0 2px;font-size:11.5px;text-align:center}
.toer-rij{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:11px;
  background:#141A37;border:1.5px solid #1B2245}
.toer-rij.me{border-color:var(--goud);background:#FFF8E4}
.toer-rij .rank-pos{width:20px;text-align:center;font-family:var(--disp);font-weight:800;
  font-size:12px;color:var(--tekst-zacht);flex:0 0 auto}
.toer-rij .rank-name{flex:1;font-size:13px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.toer-rij .rank-pts{font-family:var(--disp);font-weight:800;font-size:13px;
  font-variant-numeric:tabular-nums}
.toer-ko{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 10px;
  border-radius:11px;background:#141A37;border:1.5px solid #1B2245}
.toer-ko.nu{border-color:var(--roze);background:#FFF3F6}
.toer-ko.door{border-color:#7CC3A8;background:#EFF9F4}
.toer-ko.af{opacity:.55}
.toer-ko.straks{opacity:.6}
.ko-naam{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--tekst)}
.ko-tegen{grid-column:1/2;font-size:11.5px;font-weight:700;color:var(--tekst-zacht)}
.ko-uit{grid-row:1/3;align-self:center;font-family:var(--disp);font-weight:800;font-size:12px;
  color:var(--tekst-zacht);text-align:right}
.bot-tag{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:6px;
  background:#1B2245;color:#B7B0DC;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  vertical-align:1px}
.toer-noot{text-align:center;font-size:12px;margin:6px 0 10px}

/* ==================== NACHTTHEMA — diep indigo met levendige accenten ==================== */
/* de sfeer van het app-pictogram: een diepere, blauwere nacht met dezelfde
   paarse bloei als achter de bliksem */
body{background:
    radial-gradient(ellipse 84% 48% at 50% -6%, #3E1E85 0%, rgba(45,21,105,.5) 32%, transparent 66%),
    radial-gradient(ellipse 90% 55% at 106% 100%, #4A1C6B 0%, transparent 52%),
    radial-gradient(ellipse 78% 48% at -8% 90%, #17235C 0%, transparent 54%),
    #050C2E !important;
  background-attachment:fixed!important;color:var(--tekst)}
/* de sluier bovenaan lichter, anders dooft hij juist de bloei die de sfeer maakt */
body::before{background:linear-gradient(180deg,rgba(4,8,32,.24) 0%,rgba(4,8,32,0) 26%,
  rgba(4,8,32,0) 68%,rgba(4,8,32,.62) 100%)}
#preloader{background:#050C2E none}
.loader-bar{background:#1B2245}

/* vlakken */
.card,.intro-card,.sheet-card,.avatar-picker .sheet-card{
  background:var(--vlak);border:1.5px solid var(--rand);border-bottom-width:1.5px;
  border-bottom-color:var(--rand);
  box-shadow:0 18px 44px rgba(0,0,0,.45)!important}
.tile-btn,.answer-btn,.chip-lives,.chip-coins,.tile,.stat-chip,.trio-tile,.stats-grid>div,
.shop-pak,.podium-card,.vs .vs-card,.klaarvs .vs-card,.filter-tab,.toer-kaart,.toer-spel,
.toer-rij,.toer-ko,.spookfoto,.drukvel,.uitlegdemo .answer-btn{
  background:var(--vlak2);color:var(--tekst);
  border:1.5px solid var(--rand);box-shadow:none}
.tile-btn:active,.answer-btn:active,.tile:active,.btn.ghost:active{box-shadow:none}
.mission,.code-chip,.progress,.podium-base,.mission-bar,.reward.error,.op-btn,
.podium-avatar,.tk-vorm,.tb,.bot-tag{background:var(--vlak3);color:var(--tekst)}
.progress{background:#131A38}
.hexcel,.padcel,.stroomcel{background:var(--vlak3);border-color:var(--rand)}
.padcel.start{background:#1E2E66;border-color:#3C57A8}
.padcel.schat{background:#3A2E12;border-color:#8A6B15}
.toer-rij.me{background:#2C2418;border-color:var(--goud)}
.toer-ko.nu{background:#2C1B33;border-color:var(--roze)}
.toer-ko.door{background:#132E28;border-color:#2FA97C}
.tb.hard{background:#3A2E12;color:var(--goud)}
.toer-rij .rank-pos,.tk-meta,.toer-cat,.ko-tegen,.ko-uit,.muted,.toer-noot{color:var(--tekst-zacht)}

/* knoppen */
.btn{background:linear-gradient(180deg,#8B5CF6,#6D33E8);box-shadow:none;color:#fff}
.btn:active{box-shadow:none}
.btn.alt{background:linear-gradient(180deg,#3C4795,#2B3378);box-shadow:none}
.btn.ghost{background:var(--vlak2);color:var(--tekst);
  border:1.5px solid var(--rand);box-shadow:none}
.filter-tab{color:var(--tekst-zacht)}
.filter-tab.active{background:linear-gradient(180deg,#8B5CF6,#6D33E8);border-color:#4A1FB0;color:#fff}
.op-btn{color:#C9BEFF;box-shadow:none}
.op-btn.selected{background:var(--goud);color:#2A1B00;box-shadow:none}
.goal .goal-value{background:linear-gradient(180deg,#8B5CF6,#6D33E8);box-shadow:none;color:#fff}
.tile-btn.selected{background:linear-gradient(180deg,#FFD34D,#F0A81D);color:#2A1B00}
.tile-btn.tussen.selected{background:linear-gradient(180deg,#FFD34D,#F0A81D);color:#2A1B00}

/* tweelingenbord en spelvlakken */
#parenvak.hex-board .hex-tile{background:linear-gradient(180deg,#202852,#1B2245);
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.hex-inner{background:linear-gradient(180deg,#202852,#1F1A40)}
.hex-tile.found .hex-inner{background:linear-gradient(180deg,#FFD34D,#F0A81D)}
.hexcel img,.codesym{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.spookfoto{background:linear-gradient(168deg,#241E4C,#141A37)}
.drukvel{background:linear-gradient(174deg,#241E4C,#141A37)}
.vijver{background:linear-gradient(178deg,#123A4E,#0D2A3B)}
.answer-btn .steen{background:linear-gradient(170deg,#202852,#1B2245)}
#uitlegvlak{background:rgba(6,5,18,.72)}
.reward.success{background:linear-gradient(180deg,#3A2E12,#2A2113);border-color:var(--goud)}
.message.error,.tile .badge,.padmerk.bom{color:#FF6B81}
.tile .badge,.padmerk.bom{background:#FF3B60;color:#fff}
.message.success{color:#35D6A0}
.balance{color:var(--goud)}
.nav-tab.active{background:linear-gradient(180deg,#8B5CF6,#6D33E8);color:#fff}
.stappenlijst li{color:var(--tekst)}
.stappenlijst li.strafstap{color:var(--goud)}
.game-card .game-stars,.game-cel .game-stars{color:#FFD98A}
.spel-mono{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.30)}

/* ==================== NACHTTHEMA — indeling naar de referentie ==================== */
/* kopbalk: speler links, valuta rechts */
#kopbalk{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kb-user{display:flex;align-items:center;gap:9px;background:none;padding:0}
.kb-av img{border-radius:50%;border:2px solid rgba(255,255,255,.22);display:block}
.kb-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.kb-txt b{font-family:var(--disp);font-weight:800;font-size:15px;color:#fff;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-txt i{font-style:normal;font-size:12px;font-weight:800;color:var(--goud);
  display:flex;align-items:center;gap:3px}
.kb-chips{display:flex;gap:6px;align-items:center;flex:none}

/* hero-kaart */
.hero{position:relative;display:block;width:100%;text-align:left;overflow:hidden;
  border-radius:22px;padding:20px 18px 18px;margin-bottom:6px;
  background:linear-gradient(135deg,#5B2FE0 0%,#3D2BC4 46%,#1F49C9 100%);
  box-shadow:0 14px 34px rgba(70,40,200,.34)}
.hero-glow{position:absolute;right:-34px;top:-40px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.30),transparent 65%);pointer-events:none}
.hero-txt{position:relative;display:flex;flex-direction:column;gap:5px;max-width:74%}
.hero-kop{font-family:var(--disp);font-weight:800;font-size:27px;color:#fff;line-height:1.1}
.hero-sub{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.86)}
.hero-cta{align-self:flex-start;margin-top:9px;background:var(--goud);color:#2A1B00;
  font-family:var(--disp);font-weight:800;font-size:15px;padding:10px 20px;border-radius:14px;
  box-shadow:none}
.hero:active .hero-cta{box-shadow:none}

/* sectiekoppen */
.sectie{display:flex;align-items:baseline;justify-content:space-between;margin:16px 2px 8px}
.sectie h2{font-size:16.5px;margin:0}
.sectie-link,.sectie-klok{background:none;font-size:12.5px;font-weight:800;
  color:var(--tekst-zacht);padding:0}
.sectie-klok{font-family:var(--disp);letter-spacing:.04em}

/* divisiekaart: badge naar rechts */
.division-card{display:flex;align-items:center;gap:14px}
.division-card .division-info{flex:1;min-width:0}
.dc-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tekst-zacht)}

/* drie statistiekkaarten */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.statkaart{position:relative;background:var(--vlak2);border:1.5px solid var(--rand);
  border-radius:16px;padding:11px 10px 12px;display:flex;flex-direction:column;gap:2px;
  min-width:0;min-height:74px}
.sk-label{font-size:10.5px;font-weight:800;color:var(--tekst-zacht);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statkaart b{font-family:var(--disp);font-weight:800;font-size:22px;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.1}
/* het icoontje staat rechtsonder met marge, los van de cijfers */
.sk-vis{position:absolute;right:8px;bottom:8px;width:30px;height:30px;
  display:block;opacity:.9;pointer-events:none}
.sk-vis svg{display:block}

/* missiekaart op thuis */
.missie-kaart{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--vlak2);border:1.5px solid var(--rand);border-radius:16px;padding:12px 13px}
.mk-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.mk-t{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-bar{display:block;height:7px;border-radius:5px;background:#131A38;overflow:hidden}
.mk-bar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#8B5CF6,#A47BFF)}
.mk-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.mk-vgd{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--tekst-zacht)}
.mk-bel{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:var(--goud)}

/* duel-kop op het speelscherm */
.duelkop{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.dk-zijde{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.dk-zijde.tegen{justify-content:flex-end}
.dk-av img{border-radius:50%;border:2px solid rgba(255,255,255,.22);display:block}
.dk-info{min-width:0}
.dk-zijde.tegen .dk-info{text-align:right}
.dk-naam{font-family:var(--disp);font-weight:800;font-size:13.5px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-st{font-size:11.5px;font-weight:700;color:var(--tekst-zacht);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-mid{flex:none;width:56px;height:56px;border-radius:50%;
  background:var(--vlak2);border:2px solid var(--rand);
  display:flex;align-items:center;justify-content:center}
.dk-vs{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--tekst-zacht);
  letter-spacing:.04em}
.dk-mid .oefenklok{margin:0;padding:0;background:none;border:0}
.dk-mid .oefenklok b{font-family:var(--disp);font-weight:800;font-size:16px;color:#fff;
  font-variant-numeric:tabular-nums}
.dk-balken{display:flex;gap:8px;margin-bottom:12px}
.dk-bar{flex:1;height:8px;border-radius:6px;background:#131A38;overflow:hidden}
.dk-bar i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,#4D7BFF,#7CA6FF);transition:width .25s}
.dk-bar.tegen{transform:scaleX(-1)}
.dk-bar.tegen i{background:linear-gradient(90deg,#FF3B60,#FF7E92)}
.dk-zijde.tegen.bevroren{opacity:.6}
.dk-zijde.tegen.spurt .dk-naam{color:var(--goud)}

/* weekstrip bij de toernooien */
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:12px 0 2px}
.ws-dag{background:var(--vlak2);border:1.5px solid var(--rand);border-radius:12px;
  padding:7px 2px 6px;text-align:center}
.ws-dag.nu{background:linear-gradient(180deg,#8B5CF6,#6D33E8);border-color:#4A1FB0}
.ws-l{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tekst-zacht)}
.ws-dag.nu .ws-l{color:rgba(255,255,255,.85)}
.ws-d{display:block;font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst)}
.ws-dag.nu .ws-d{color:#fff}
.ws-p{display:flex;gap:2px;justify-content:center;margin-top:3px;height:4px}
.ws-p i{width:4px;height:4px;border-radius:50%;background:var(--goud)}
@media (max-height:640px){
  .duelkop{margin:0 0 6px}
  .dk-mid{width:44px;height:44px}
  .dk-mid .oefenklok b,.dk-vs{font-size:13px}
  .dk-av img{width:26px!important;height:26px!important}
  .dk-naam{font-size:12.5px}
  .dk-st{font-size:10.5px}
  .dk-balken{margin-bottom:8px;height:7px}
  .hero{padding:16px 15px 15px}
  .hero-kop{font-size:23px}
  .stat3{gap:6px}
  .statkaart b{font-size:19px}
}

/* ---------- metabalk, tijdpil en combo op het speelscherm ---------- */
.metabalk{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.meta-cat{font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;border:1.5px solid var(--rand);border-radius:10px;padding:5px 10px}
.meta-vraag{font-size:12.5px;font-weight:700;color:var(--tekst-zacht)}
.tijdpil{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 12px;
  width:fit-content;padding:8px 20px;border-radius:999px;
  background:var(--vlak2);border:2px solid #3A7BFF66;
  box-shadow:0 0 18px rgba(58,123,255,.22)}
.tijdpil b{font-family:var(--disp);font-weight:800;font-size:19px;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tp-ico{width:15px;height:15px;border-radius:50%;border:2px solid #5C93FF;position:relative;flex:none}
.tp-ico::after{content:"";position:absolute;left:50%;top:50%;width:1.5px;height:5px;
  background:#5C93FF;transform-origin:top;transform:translate(-50%,0) rotate(38deg)}
.combovak{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px}
.combo-t{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.1em;
  color:var(--goud)}
.combo-t b{font-size:15px}
.combo-stip{display:flex;gap:5px}
.combo-stip i{width:7px;height:7px;border-radius:50%;background:var(--rand)}
.combo-stip i.aan{background:var(--goud);box-shadow:0 0 8px rgba(245,185,60,.7)}
.answer-btn.goed{background:linear-gradient(180deg,#2FD08A,#1EA26A)!important;
  border-color:#35D6A0!important;color:#04231A!important;
  box-shadow:0 0 22px rgba(53,214,160,.45)!important}
@media (max-height:640px){
  .metabalk{display:none}
  .tijdpil{display:none}
  .combovak{margin-top:7px}
  .combo-t{font-size:11.5px}
}

/* ---------- navigatiebalk: alleen het uiterlijk, dezelfde knoppen ---------- */
.nav-bar{background:rgba(13,11,32,.94);border-top:1px solid var(--rand);
  backdrop-filter:blur(14px);box-shadow:0 -8px 26px rgba(0,0,0,.4)}
.nav-tab{background:none;padding:9px 4px calc(8px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
.nav-tab .nav-icon{background:var(--tekst-zacht);opacity:.75;transition:all .18s}
.nav-tab .nav-label{font-family:var(--disp);font-weight:800;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tekst-zacht)}
.nav-tab.active{background:none}
.nav-tab.active .nav-icon{background:#A47BFF;opacity:1;
  filter:drop-shadow(0 0 9px rgba(164,123,255,.75))}
.nav-tab.active .nav-label{color:#C9BEFF}
/* geen streepje boven het icoon: de kleur en de gloed zijn genoeg */
/* korte schermen: tijd vouwt terug in de VS-bol, metabalk compacter */
@media (max-height:640px){
  .metabalk{margin-bottom:6px}
  .meta-cat{font-size:10px;padding:4px 8px}
  .meta-vraag{font-size:11px}
  .tijdpil{display:none}
  .combovak{margin-top:7px;gap:4px}
  .combo-stip i{width:6px;height:6px}
}

/* ==================== HERSTEL NA DE ONTWERPCONTROLE ==================== */
/* 1. tegelrij liep van het scherm af bij vijf tegels */
.tile-row{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tile-row .tile{width:auto;min-width:0}

/* 2. terugknop was witte tekst op een witte achtergrond */
.speelkop .terug,#uitleg-terug.terug{background:var(--vlak2);color:var(--tekst);
  border:1.5px solid var(--rand);box-shadow:none;
  padding:10px 15px;min-height:40px;font-size:13.5px}
.speelkop .terug:active,#uitleg-terug.terug:active{box-shadow:none}

/* 3. stenen bij Reeksen hadden donkere tekst op een donkere steen */
.steen,.answer-btn .steen{color:var(--tekst)!important;min-width:0;max-width:100%;
  box-sizing:border-box}
.steen b{color:#fff}
/* de blaadjes zijn licht: daar hoort juist donkere tekst */
.blad b{color:#0B2415}

/* 4. antwoordknoppen mochten niet buiten de kaart steken */
.answer-grid .answer-btn{min-width:0;overflow:hidden}

/* 5. tikdoelen groot genoeg, ook voor oudere spelers */
.filter-tab{min-height:38px;padding:8px 14px}
.edit-btn{min-height:32px;padding:6px 12px}
.sectie-link{min-height:32px;display:inline-flex;align-items:center;padding:0 2px}

/* ---------- tweede ronde na de controle ---------- */
/* demo-vak op de uitlegpagina was nog crème */
.uitlegdemo{background:var(--vlak2)!important;border:1.5px solid var(--rand)!important}
.uitlegdemo .demo-kop{color:var(--tekst-zacht)}
/* paars als tekstkleur haalde 4,5:1 net niet — lichtere tint */
.rank,.rank-pts,.codevak,#regel b,.card-title b,.stat-chip b{color:#B79BFF}
/* koppen en tegels mogen afbreken in plaats van uitsteken */
#regel.card-title{white-space:normal;line-height:1.25}
.tile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* gloed binnen de hero houden */
.hero-glow{right:-10px;top:-30px;width:150px;height:150px}
/* secundaire knoppen groot genoeg */
.sectie-link,.edit-btn{min-height:36px}

/* ---------- derde ronde na de controle ---------- */
/* specifiekere regels wonnen van mijn kleurcorrectie */
.rank-row .rank-pts,.toer-rij .rank-pts{color:#B79BFF}
.vijver .blad b{color:#08200F}
/* vriendenscherm: codeveld en knoppen bleven niet binnen de kaart */
.coderij{flex-wrap:wrap}
.coderij input{min-width:0;flex:1 1 120px}
.coderij .btn{flex:0 0 auto;padding:10px 14px;min-width:0}
/* statistiekkaarten: kortere labels op smalle schermen */
@media (max-width:360px){
  .sk-label{font-size:9.5px;letter-spacing:-.01em}
}
/* gloed volledig binnen de hero */
.hero-glow{right:8px;top:-24px}

/* ==================== VIERDE RONDE: RUIMTE, KNOPPEN, FEEDBACK ==================== */
/* 1. geen harde rand meer onder knoppen en vlakken — zachte diepte in plaats daarvan */
.btn,.btn.alt,.btn.ghost,.tile,.tile-btn,.answer-btn,.chip-lives,.chip-coins,.stat-chip,
.trio-tile,.stats-grid>div,.shop-pak,.podium-card,.vs .vs-card,.klaarvs .vs-card,
.filter-tab,.toer-kaart,.toer-spel,.toer-rij,.toer-ko,.op-btn,.card-title,.goal .goal-value,
.speelkop .terug,#uitleg-terug.terug,.hero-cta,.statkaart,.missie-kaart,.ws-dag,.card{
  box-shadow:none!important;border-bottom-width:1.5px!important}
.card{border:1px solid var(--rand)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.38)!important}
.btn{box-shadow:0 6px 20px rgba(109,51,232,.38)!important}
.btn:active,.tile:active,.answer-btn:active,.tile-btn:active,.filter-tab:active,
.speelkop .terug:active{transform:translateY(1px);box-shadow:none!important}
.hero{box-shadow:0 14px 34px rgba(70,40,200,.30)!important}
.hero-cta{box-shadow:0 4px 16px rgba(245,185,60,.35)!important}
.answer-btn,.tile-btn{border:1.5px solid var(--rand);transition:background .12s,border-color .12s}
@media (hover:hover) and (pointer:fine){
  .answer-btn:hover,.tile-btn:hover{border-color:#4A3F86}
}

/* 2. antwoordfeedback: groen goed, rood fout, juiste altijd groen */
.answer-btn.goed{background:linear-gradient(180deg,#2FD08A,#1EA26A)!important;
  border-color:#4CE8A8!important;color:#05261B!important;
  box-shadow:0 0 24px rgba(53,214,160,.45)!important}
.answer-btn.mis{background:linear-gradient(180deg,#FF4E6B,#D62742)!important;
  border-color:#FF7E92!important;color:#2A0009!important;
  box-shadow:0 0 24px rgba(255,78,107,.42)!important}
/* geblokkeerd na een antwoord: geen aanraking meer, en geen achtergebleven
   zweef- of indruktoestand — die bleef op telefoons plakken tot de volgende tik */
.answer-btn.vast{pointer-events:none}
.answer-btn.vast:hover,.answer-btn.vast:active{
  border-color:var(--lijn);transform:none}

/* 3. voortgangsbalken: allebei van links vullen, met percentage ernaast */
.dk-bar.tegen{transform:none}
.dk-balken{gap:10px;height:9px;margin-bottom:14px}
.dk-bar{height:9px;border-radius:6px}

/* 4. het getekende handje */
.demo-hand{position:absolute;pointer-events:none;z-index:5;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.demo-hand svg{display:block}

/* 5. tussenruimtes op één schaal: 8 / 12 / 18 */
.wrap{padding:calc(16px + env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom))}
#schermen>div>.card{margin-bottom:12px}
#schermen>div>.card:last-of-type{margin-bottom:0}
.card{padding:16px}
.card.flat{padding:14px 16px}
.sectie{margin:18px 2px 8px}
.stat3{gap:8px;margin-top:0}
.tile-row{gap:8px;margin-top:0}
.division-card{margin-bottom:0}
.hero{margin-bottom:0}
.missie-kaart{margin-bottom:0}
.duelkop{margin:0 0 10px}
.metabalk{margin:0 0 8px}
.tijdpil{margin:0 auto 14px}
.vraagvak{margin:0 0 12px}
.answer-grid{gap:10px}
.combovak{margin-top:14px}
.toer-kaarten{gap:8px;margin:12px 0 0}
.toer-lijst{gap:6px;margin:10px 0 0}
.toer-bord{gap:5px;margin:12px 0 0}
.weekstrip{margin:12px 0 0}
.stappenlijst{gap:8px;margin:10px auto 0}

/* ---------- seizoenscompetitie ---------- */
.segrij{display:flex;gap:6px;background:var(--vlak2);border:1.5px solid var(--rand);
  border-radius:14px;padding:4px;margin:12px 0 0}
.seg{flex:1;background:none;color:var(--tekst-zacht);border-radius:11px;
  font-family:var(--disp);font-weight:800;font-size:13px;padding:9px 6px;min-height:38px}
.seg.aan{background:linear-gradient(180deg,#8B5CF6,#6D33E8);color:#fff}
.seizoenkaart{display:flex;align-items:center;gap:12px;margin-top:12px;
  background:linear-gradient(140deg,#241C4E,#141A37);
  border:1.5px solid var(--rand);border-radius:18px;padding:14px 16px}
.sz-links{flex:1;min-width:0}
.sz-kop b{font-family:var(--disp);font-weight:800;font-size:18px;color:#fff}
.sz-rest{font-size:12px;font-weight:700;color:var(--tekst-zacht);margin-top:1px}
.sz-pos-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tekst-zacht);margin-top:10px}
.sz-pos{font-family:var(--disp);font-weight:800;font-size:32px;color:#fff;line-height:1.05}
.sz-punten{display:flex;align-items:center;gap:5px;font-family:var(--disp);font-weight:800;
  font-size:15px;color:var(--goud);margin-top:2px}
.sz-badge{flex:none}
.zonebalk{display:flex;justify-content:space-between;gap:8px;margin:12px 2px 8px}
.zone{font-size:11px;font-weight:800;letter-spacing:.03em}
.zone.op{color:#35D6A0}
.zone.neer{color:#FF7E92}
.rang-rij{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:13px;
  background:var(--vlak2);border:1.5px solid var(--rand);margin-bottom:5px}
.rang-rij.me{background:linear-gradient(180deg,#3A2A7A,#2C2060);border-color:#8B5CF6}
.rang-rij.inpromo{border-left:3px solid #35D6A0}
.rang-rij.indegra{border-left:3px solid #FF7E92}
.rr-plek{width:26px;text-align:center;font-family:var(--disp);font-weight:800;font-size:14px;
  color:var(--tekst-zacht);flex:none;font-variant-numeric:tabular-nums}
.rang-rij.me .rr-plek{color:#fff}
.rr-naam{flex:1;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rr-pnt{display:flex;align-items:center;gap:4px;font-family:var(--disp);font-weight:800;
  font-size:14px;color:var(--goud);font-variant-numeric:tabular-nums}
.rang-gat{text-align:center;color:var(--tekst-zacht);letter-spacing:.3em;
  font-size:12px;padding:2px 0 6px}
.rang-streep{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 0 8px;display:flex;align-items:center;gap:8px}
.rang-streep::before,.rang-streep::after{content:"";flex:1;height:1.5px;border-radius:2px}
.rang-streep.op{color:#35D6A0}
.rang-streep.op::before,.rang-streep.op::after{background:#35D6A055}
.rang-streep.neer{color:#FF7E92}
.rang-streep.neer::before,.rang-streep.neer::after{background:#FF7E9255}

/* ---------- seizoensafsluiting en geschiedenis ---------- */
.vorigseizoen{margin-top:12px;padding:14px 15px;border-radius:16px;
  background:linear-gradient(140deg,#202852,#1D1840);border:1.5px solid var(--rand)}
.vorigseizoen.promotie{border-color:#35D6A0;background:linear-gradient(140deg,#16352C,#122A24)}
.vorigseizoen.degradatie{border-color:#FF7E92;background:linear-gradient(140deg,#3A1B25,#2A141C)}
.vs-t{font-family:var(--disp);font-weight:800;font-size:15px;color:#fff}
.vs-s{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  font-size:12.5px;font-weight:700;color:var(--tekst-zacht);margin-top:3px}
.vs-ok{margin-top:11px;width:100%;min-height:40px;border-radius:12px;
  background:linear-gradient(180deg,#8B5CF6,#6D33E8);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:13.5px}
.sh-rij{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;
  background:var(--vlak2);border:1.5px solid var(--rand);margin-bottom:5px}
.sh-badge{flex:none;display:flex}
.sh-t{flex:1;font-family:var(--disp);font-weight:800;font-size:13.5px;color:var(--tekst);
  display:flex;flex-direction:column;line-height:1.2}
.sh-t small{font-family:var(--body);font-weight:700;font-size:11px;color:var(--tekst-zacht)}
.sh-p{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--goud);
  font-variant-numeric:tabular-nums}
.sh-u{width:20px;text-align:center;font-size:13px;font-weight:800}
.sh-u.promotie{color:#35D6A0}
.sh-u.degradatie{color:#FF7E92}
.sh-u.blijft{color:var(--tekst-zacht)}

/* ---------- vriendenrijen en spelerkaart ---------- */
.vriendrij{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;border-radius:13px;background:var(--vlak2);
  border:1.5px solid var(--rand);margin-bottom:5px}
.vriendrij.klik:active{transform:translateY(1px)}
.vnm{flex:1;font-size:14px;font-weight:700;color:var(--tekst);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdiv{display:flex;align-items:center;gap:6px;flex:none}
.vdiv b{font-family:var(--disp);font-weight:800;font-size:11.5px;color:var(--tekst-zacht)}
.rang-rij.klik{width:100%;text-align:left}
.sp-naam{font-family:var(--disp);font-weight:800;font-size:20px;color:#fff}
.sp-div{display:flex;align-items:center;gap:7px}
.sp-div span{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--tekst-zacht)}
.spelerkaart .btn{width:100%}
.spelerkaart .btn.ghost{margin-top:9px}
.btn.mini{padding:7px 12px;font-size:12px;min-height:34px;flex:none}
/* profiel van een andere speler */
.sp-comp{display:flex;align-items:center;gap:14px}
.sp-compinfo b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;color:#fff}
.sp-compinfo span{display:block;font-size:12.5px;font-weight:700;color:var(--tekst-zacht);margin-top:2px}
#f-speler .profile-avatar{pointer-events:none}
#f-speler .profile-name{display:flex;align-items:center;gap:8px;
  font-family:var(--disp);font-weight:800;font-size:19px;color:#fff}
#f-speler>.btn{width:100%}
/* beeld naast Snel duel */
.hero{overflow:hidden}
.hero-beeld{position:absolute;right:0;bottom:0;width:47%;max-width:178px;
  height:auto;pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(20,8,60,.45));z-index:1}
.hero-txt{position:relative;z-index:2;max-width:55%}
.hero-glow{right:2%;top:-18%;width:62%;height:auto;aspect-ratio:1}
@media (max-height:640px){
  .hero-beeld{width:45%;max-width:150px;right:0}
  .hero-txt{max-width:54%}
}

/* ---------- kopbalk groter en losser van de hero ---------- */
#kopbalk{margin-bottom:16px}
.kb-user{gap:11px}
.kb-av img{width:46px!important;height:46px!important;border-width:2.5px}
.kb-txt{gap:1px}
.kb-txt b{font-size:19px;max-width:150px}
.kb-txt i{font-size:13px;gap:4px}
.kb-chips{gap:7px}
@media (max-height:640px){
  #kopbalk{margin-bottom:12px}
  .kb-av img{width:40px!important;height:40px!important}
  .kb-txt b{font-size:17px;max-width:120px}
}
/* brein kleiner en verder van de rand */
.hero-beeld{right:12px;bottom:10px;width:40%;max-width:150px}
@media (max-height:640px){
  .hero-beeld{width:38%;max-width:124px;right:10px;bottom:8px}
}
@media (max-width:360px){
  .kb-av img{width:38px!important;height:38px!important}
  .kb-txt b{font-size:16px;max-width:88px}
  .kb-txt i{font-size:12px}
  .kb-user{gap:8px}
  .kb-chips{gap:5px}
  .chip-lives,.chip-coins{padding:5px 8px;font-size:12px}
}
/* lege cel is een rustige plek; gevulde cel toont alleen de leiding */
.stroomcel{background:#131F42;border:1.5px solid #232C55}
.stroomcel.aan{background:#131F42;border-color:#232C55}
/* Stroomdraden: live stand en aanwijzing bij lege vakjes */
.stroomstatus{display:flex;justify-content:center;gap:8px;margin-bottom:3px}
.ss{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.02em;
  color:var(--tekst-zacht);background:var(--vlak3);border:1.5px solid var(--rand);
  border-radius:9px;padding:4px 9px}
.ss.af{color:#35D6A0;border-color:#35D6A055;background:#15332A}
.stroomtip{display:block;font-size:12px;font-weight:700;color:var(--tekst-zacht)}
.stroomcel.leegtip{animation:leegpuls .7s ease-in-out 3;
  border-color:#FF7E92!important;background:#3A1B25!important}
@keyframes leegpuls{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- Sluitstuk ---------- */
.blokveld{display:flex;flex-direction:column;align-items:center;gap:14px;touch-action:none}
.blokbord{display:grid;grid-template-columns:repeat(var(--bn,5),1fr);gap:6px;
  width:100%;--bh:300px;
  max-width:min(300px, calc(var(--bh) * var(--bn) / var(--bm,5)))}
.blokcel{position:relative;aspect-ratio:1;border-radius:9px;
  background:#131F42;border:1.5px solid #232C55;transition:border-color .1s}
/* gelegde stukken: volle kleur, want dat is jouw werk */
.blokcel.gelegd .blok2{position:absolute;inset:3px;border-radius:8px;background:var(--k);
  background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(0,0,0,.12));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.20)}
/* vaste stukken horen bij het bord: verzonken steen met een fijne arcering */
.blokcel.vast{background:#0E1430;border-color:#1B2347}
.blokcel.vast .blok2{position:absolute;inset:3px;border-radius:8px;
  background:#252E52;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.055) 0 3px,transparent 3px 7px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.06)}
/* lege vakjes ogen als verzonken putjes */
.blokcel{box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.blokcel.gelegd,.blokcel.vast{box-shadow:none}
/* voorbeeld tijdens het slepen: een schaduw van het stuk dat er zo komt */
.blokcel.tip{border-color:var(--k)}
.blokcel.tip::after{content:"";position:absolute;inset:3px;border-radius:8px;
  background:var(--k);opacity:.34;
  box-shadow:0 0 0 1.5px var(--k) inset;
  animation:tipin .14s ease-out}
@keyframes tipin{from{opacity:0;transform:scale(.86)}to{opacity:.34;transform:none}}
.blokcel.mistip{border-color:#FF5470;background:rgba(255,84,112,.16)}
/* net gelegd: klikt met een korte veer op zijn plek */
.blokcel.gelegd .blok2{animation:magneet .22s cubic-bezier(.3,1.6,.5,1)}
@keyframes magneet{0%{transform:scale(1.14);opacity:.7}100%{transform:none;opacity:1}}
.blokbak{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:10px;border-radius:14px;background:rgba(255,255,255,.04);
  border:1.5px solid var(--rand);min-height:56px;align-items:center;width:100%}
.vormstuk{display:grid;grid-template-columns:repeat(var(--kol,2),14px);gap:2px;
  padding:6px;border-radius:10px;border:1.5px solid transparent;
  touch-action:none;cursor:grab}
.vormstuk.sleept{opacity:.35}
.vormcel{width:14px;height:14px;border-radius:4px}
.vormcel.aan{background:var(--k);
  background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.12))}
@media (max-height:740px){ .blokbord{--bh:228px} }
@media (max-height:640px){
  .blokbord{--bh:170px;gap:4px}
  .blokveld{gap:9px}
  .blokbak{padding:7px;min-height:44px;gap:8px}
  .vormcel{width:10px;height:10px;border-radius:3px}
  .vormstuk{grid-template-columns:repeat(var(--kol,2),10px);padding:4px}
}

/* ==================== BEWEGING: RITME EN TERUGKOPPELING ==================== */
@keyframes inval{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes schermin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes klop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes misbeef{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes goedgloed{0%{box-shadow:0 0 0 0 rgba(53,214,160,.55)}
  100%{box-shadow:0 0 0 16px rgba(53,214,160,0)}}
.inval{animation:inval .19s cubic-bezier(.2,.7,.3,1)}
/* geen "both": een vastgehouden transform breekt position:fixed van geneste vensters */
.schermin{animation:schermin .22s cubic-bezier(.2,.7,.3,1)}
.klop{animation:klop .3s cubic-bezier(.3,1.4,.5,1)}
.answer-btn.goed{animation:pop .26s cubic-bezier(.3,1.5,.5,1),goedgloed .5s ease-out}
.answer-btn.mis{animation:misbeef .32s ease-in-out}
/* balken lopen vloeiend mee */
.dk-bar i,.mk-bar i,#scorebalk,#botbalk{transition:width .32s cubic-bezier(.2,.7,.3,1)}
/* tegels reageren op je vinger */
.answer-btn,.tile-btn,.tile,.toer-kaart,.rang-rij,.vriendrij,.cat-kaart,.hex-tile{
  transition:transform .09s ease}
.answer-btn:active,.tile-btn:active,.tile:active{transform:scale(.975)}
/* Tweelingen: fout rood, het goede paar groen */
#parenvak .hex-tile.mis .hex-inner{background:linear-gradient(180deg,#FF4E6B,#C42440)!important;
  animation:misbeef .32s ease-in-out}
#parenvak .hex-tile.wasgoed .hex-inner{background:linear-gradient(180deg,#2FD08A,#1B9A6A)!important;
  animation:klop .45s cubic-bezier(.3,1.4,.5,1)}
/* wie minder beweging wil, krijgt minder beweging */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
/* terugkoppeling in de bordspellen */
.tile-btn.mis{background:linear-gradient(180deg,#FF4E6B,#C42440)!important;
  border-color:#FF7E92!important;color:#2A0009!important;animation:misbeef .32s ease-in-out}
.jachtknop.mis{background:linear-gradient(158deg,#FF8AA0,#D63652)!important;
  animation:misbeef .32s ease-in-out}
.jachtknop.wasgoed{background:linear-gradient(158deg,#8CF0C4,#2FA97C)!important;
  animation:klop .45s cubic-bezier(.3,1.4,.5,1)}

/* ---------- speldetail met niveaus ---------- */
.sd-kop{display:flex;align-items:center;gap:14px;margin-top:12px}
.sd-mono .spel-mono{border-radius:16px}
.sd-cat{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase}
.sd-sterren{font-size:17px;color:#FFD98A;letter-spacing:2px;margin-top:2px}
.sd-uitleg{margin:12px 0 0}
.sd-uitleg .stappenlijst{margin-left:0}
.sd-tiers{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.sd-tier{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:12px 13px;border-radius:14px;background:var(--vlak2);
  border:1.5px solid var(--rand);min-height:52px}
.sd-tier.open{border-color:#3B3470}
.sd-t-nr{width:26px;height:26px;border-radius:9px;flex:none;
  background:linear-gradient(180deg,#8B5CF6,#6D33E8);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.sd-t-naam{flex:1;font-family:var(--disp);font-weight:800;font-size:14.5px;color:var(--tekst)}
.sd-t-tijd{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--goud);
  font-variant-numeric:tabular-nums}
.sd-t-actie{display:flex;align-items:center;font-size:12px;font-weight:800;
  color:var(--tekst-zacht);min-width:44px;justify-content:flex-end}
.sd-tier.open .sd-t-actie{color:#C9BEFF}
.sd-slot{margin-top:12px;text-align:center;font-size:12.5px}
/* vergrendelde kaarten in de collectie */
.game-card.locked{filter:grayscale(.75) brightness(.55)}
.game-card.locked::after{content:"";position:absolute;left:50%;top:50%;
  width:26px;height:26px;transform:translate(-50%,-50%);
  background:currentColor;color:rgba(255,255,255,.85);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='10.5' width='14' height='10' rx='2.5' fill='black'/><path d='M8.2 10.5V8a3.8 3.8 0 0 1 7.6 0v2.5' fill='none' stroke='black' stroke-width='2'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='10.5' width='14' height='10' rx='2.5' fill='black'/><path d='M8.2 10.5V8a3.8 3.8 0 0 1 7.6 0v2.5' fill='none' stroke='black' stroke-width='2'/></svg>") center/contain no-repeat}
/* premiumkaart in de winkel */
.premiumkaart{background:linear-gradient(140deg,#2E2360,#1D1840);
  border:1.5px solid #4A3F86;border-radius:18px;padding:15px 16px;margin-bottom:12px}
.pk-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pk-kop b{font-family:var(--disp);font-weight:800;font-size:17px;color:#fff}
.pk-lijst{list-style:none;padding:0;margin:10px 0 13px;display:flex;
  flex-direction:column;gap:6px}
.pk-lijst li{position:relative;padding-left:20px;font-size:13px;font-weight:700;
  color:var(--tekst)}
.pk-lijst li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:7px;
  border-left:2.5px solid #35D6A0;border-bottom:2.5px solid #35D6A0;
  transform:rotate(-45deg)}
.premiumkaart .btn{width:100%}
/* abonnementskeuze */
.pk-keuze{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.pk-optie{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:14px 8px 11px;border-radius:14px;background:var(--vlak2);
  border:1.5px solid var(--rand);min-height:92px;justify-content:center}
.pk-optie.beste{border-color:var(--goud);background:linear-gradient(180deg,#33280F,#241C0C)}
.pk-optie.uit{opacity:.45}
.pk-vlag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--goud);color:#2A1B00;font-family:var(--disp);font-weight:800;
  font-size:9.5px;letter-spacing:.05em;padding:3px 8px;border-radius:7px;white-space:nowrap}
.pk-duur{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tekst-zacht)}
.pk-bedrag{font-family:var(--disp);font-weight:800;font-size:22px;color:#fff;line-height:1.15}
.pk-per{font-size:11px;font-weight:700;color:var(--tekst-zacht)}
.pk-status{margin:12px 0 0;text-align:center;font-size:12.5px;font-weight:700;color:#35D6A0}

/* ---------- modals: losse kaarten, één voor één ---------- */
.modalsluier{opacity:0;transition:opacity .2s}
.modalsluier.open{opacity:1}
.mkaart{position:relative;overflow:hidden;text-align:center;max-width:320px;width:100%;
  background:linear-gradient(180deg,#221C4A,#131A38);
  border:1.5px solid var(--rand);border-radius:24px;padding:22px 20px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.94);opacity:0;
  transition:transform .26s cubic-bezier(.2,1.2,.4,1),opacity .2s}
.modalsluier.open .mkaart{transform:none;opacity:1}
.mk-gloed{position:absolute;left:50%;top:-58px;width:260px;height:260px;
  transform:translateX(-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,var(--mk),transparent 62%);opacity:.34}
.mk-kop{position:relative;font-family:var(--disp);font-weight:800;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mk)}
.mk-hero{position:relative;display:flex;justify-content:center;margin:14px 0 4px;
  animation:heroin .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes heroin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.mk-rond{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.06);
  border:2px solid var(--mk);box-shadow:0 0 34px -6px var(--mk)}
.mk-rond img{border-radius:50%}
.mk-kaart{width:116px;aspect-ratio:4/3;border-radius:18px;border:2px solid;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 32px rgba(0,0,0,.45)}
.mk-badge{filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.mk-titel{position:relative;font-family:var(--disp);font-weight:800;font-size:23px;
  color:#fff;margin-top:12px;line-height:1.15}
.mk-sub{position:relative;font-size:13px;font-weight:700;color:var(--tekst-zacht);
  margin-top:6px;line-height:1.4}
.mk-beloning{position:relative;display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  padding:8px 15px;border-radius:12px;background:rgba(255,255,255,.07);
  border:1.5px solid var(--rand);
  font-family:var(--disp);font-weight:800;font-size:15px;color:var(--goud)}
.mk-knoppen{position:relative;display:flex;gap:9px;margin-top:18px}
.mk-knoppen .btn{flex:1}

/* ---------- alle overlays in het midden van het scherm ---------- */
.sluier,.avatar-picker{align-items:center!important;justify-content:center;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
.blad{border-radius:22px!important;max-width:380px;
  border:1.5px solid var(--rand)!important;
  padding:20px 18px 18px!important;
  box-shadow:0 24px 60px rgba(0,0,0,.55)!important}
.avatar-picker .sheet-card{border-radius:24px!important;max-width:400px;
  padding:20px 18px 18px!important;
  border:1.5px solid var(--rand);box-shadow:0 24px 60px rgba(0,0,0,.55);
  max-height:calc(100vh - 60px);overflow-y:auto}
.mkaart{margin:0 auto}
/* binnenkomst past bij een gecentreerde kaart */
@keyframes schuifin{from{opacity:0}to{opacity:1}}

/* ---------- schetsdemo voor de bordspellen ---------- */
.sk-vak{display:flex;flex-direction:column;align-items:center;gap:9px;padding:4px 0 2px}
.sk-raster{position:relative;display:grid;grid-template-columns:repeat(var(--sn,4),1fr);
  gap:4px;width:132px}
.sk-cel{aspect-ratio:1;border-radius:5px;background:#131F42;border:1px solid #232C55;
  transition:background .25s}
.sk-stuk{position:absolute;left:0;top:0;width:64px;height:30px;border-radius:6px;
  background:var(--k);opacity:0;transition:transform .55s cubic-bezier(.3,1.1,.4,1),opacity .3s}
.sk-rij{display:flex;gap:6px;align-items:center}
.sk-ijs{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-family:var(--disp);font-weight:800;font-size:13px;color:#0E3A5C;
  background:linear-gradient(158deg,#EAF7FF,#8FC4E4);transition:opacity .3s,transform .3s}
.sk-ijs.weg{opacity:.15;transform:scale(.7)}
.sk-hex{width:28px;height:28px;background:#202852;transition:background .3s,transform .3s;
  clip-path:polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%)}
.sk-hex.aan{background:#F5B93C;transform:scale(1.12)}
.sk-getal,.sk-steen{min-width:32px;padding:6px 7px;border-radius:8px;background:var(--vlak2);
  border:1.5px solid var(--rand);font-family:var(--disp);font-weight:800;font-size:13px;
  color:var(--tekst-zacht);text-align:center;transition:all .25s}
.sk-getal.aan,.sk-steen.aan{background:linear-gradient(180deg,#8B5CF6,#6D33E8);
  border-color:#4A1FB0;color:#fff;transform:translateY(-3px)}
.sk-som{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--goud)}
.sk-knop{width:56px;height:56px;border-radius:50%;background:var(--vlak2);
  border:2px solid var(--rand);transition:all .25s}
.sk-knop.aan{background:var(--k);border-color:var(--k);transform:scale(1.14);
  box-shadow:0 0 24px -4px var(--k)}
.sk-cel.sk-eind{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}

/* ---------- Alibi ---------- */
.alibiveld{display:flex;flex-direction:column;align-items:center;gap:11px}
.ab-bord{display:grid;grid-template-columns:46px repeat(var(--an,4),1fr);gap:4px;
  width:100%;--abh:212px;
  max-width:min(320px, calc(46px + var(--abh) * var(--an,4) / var(--an,4) + var(--abh)))}
.ab-bord{max-width:min(320px, calc(var(--abh) + 46px))}.ab-kop{font-size:9.5px;font-weight:800;letter-spacing:.02em;color:var(--tekst-zacht);
  text-align:center;align-self:end;padding-bottom:3px;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis}
.ab-tijd{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;
  font-family:var(--disp);font-weight:800;font-size:12px;color:var(--tekst-zacht);
  font-variant-numeric:tabular-nums}
.ab-cel{position:relative;aspect-ratio:1;border-radius:10px;background:#131F42;
  border:1.5px solid #232C55;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s}
.ab-cel.moord{border-color:#FF5470;background:#2A121C;
  box-shadow:inset 0 0 0 1px rgba(255,84,112,.35)}
.ab-cel.dicht{opacity:.42}
.ab-pion{width:82%;height:82%;border-radius:9px;background:var(--k);
  background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.12));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:12px;color:#10131F;
  animation:pop .24s cubic-bezier(.3,1.5,.5,1)}
.ab-bak{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;width:100%}
.ab-naam{padding:8px 13px;border-radius:12px;background:var(--vlak2);
  border:1.5px solid var(--rand);font-family:var(--disp);font-weight:800;
  font-size:13px;color:var(--tekst);min-height:38px}
.ab-naam.aan{background:var(--k);border-color:var(--k);color:#10131F;
  box-shadow:0 0 16px -3px var(--k)}
.ab-tips{display:flex;flex-direction:column;gap:5px;width:100%;
  max-height:168px;overflow-y:auto;padding-right:2px;
  -webkit-overflow-scrolling:touch}
.ab-tips::-webkit-scrollbar{width:4px}
.ab-tips::-webkit-scrollbar-thumb{background:var(--rand);border-radius:3px}
.ab-tip{position:relative;padding:8px 11px 8px 30px;border-radius:11px;
  background:var(--vlak2);border:1.5px solid var(--rand);
  font-size:12.5px;line-height:1.35;color:var(--tekst)}
.ab-tip::before{content:"";position:absolute;left:11px;top:11px;width:9px;height:9px;
  border-radius:50%;background:var(--rand)}
.ab-tip b{color:#fff}
.ab-tip i{font-style:normal;color:var(--goud)}
.ab-tip.goed{border-color:#2FA97C;background:#122A22}
.ab-tip.goed::before{background:#35D6A0}
.ab-tip.mis{border-color:#B4405A;background:#2A141C}
.ab-tip.mis::before{background:#FF5470}
.sk-pion{position:absolute;left:2px;top:2px;width:28px;height:28px;border-radius:6px;
  background:var(--k);opacity:0;
  transition:transform .55s cubic-bezier(.3,1.1,.4,1),opacity .3s}
@media (max-height:740px){ .ab-bord{--abh:186px} .ab-tips{max-height:132px} }
@media (max-height:640px){
  .ab-bord{--abh:150px;grid-template-columns:40px repeat(var(--an,4),1fr);gap:3px}
  .ab-tijd{font-size:10.5px;padding-right:4px}
  .ab-kop{font-size:8.5px}
  .ab-tips{max-height:104px}
  .ab-tip{font-size:11px;padding:6px 9px 6px 25px;line-height:1.3}
  .ab-naam{padding:6px 10px;font-size:12px;min-height:34px}
  .alibiveld{gap:8px}
}

/* ---------- navigatiebalk: restanten van de oude stijl weg ---------- */
.nav-tab.active{background:none!important;border:0!important;border-radius:0!important;
  margin:0!important;padding:9px 4px calc(8px + env(safe-area-inset-bottom))!important;
  box-shadow:none!important}
.nav-icon{display:flex!important;align-items:center;justify-content:center;
  width:26px!important;height:26px!important;border-radius:0!important;
  background:none!important;color:var(--tekst-zacht);opacity:.85;
  transition:color .15s,transform .15s}
.nav-icon svg{display:block}
.nav-tab.active .nav-icon{width:26px!important;height:26px!important;
  background:none!important;color:#A47BFF;opacity:1;transform:translateY(-1px);
  filter:drop-shadow(0 0 8px rgba(164,123,255,.55))!important}
.nav-tab:active .nav-icon{transform:scale(.9)}
/* klikbare blokken naar het klassement */
.rangklik>.section-title,.division-card.klik .dc-label{
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.klik-pijl{flex:none;font-size:18px;line-height:1;color:var(--tekst-zacht);font-weight:400}
#pdivsub{white-space:normal;line-height:1.4;max-width:100%}
.div-serie{flex-wrap:nowrap;min-width:0}
.div-serie .progress{min-width:0;flex:1}
.division-card.klik,.rangklik{cursor:pointer;transition:border-color .12s,transform .09s}
.division-card.klik:active,.rangklik:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .division-card.klik:hover,.rangklik:hover{border-color:#3B3470}
}

/* ---------- navigatiebalk: het crème verloop overschrijven op gelijke sterkte ---------- */
nav.nav-bar{background:rgba(11,10,31,.96)!important;background-image:none!important;
  border-top:1px solid var(--rand)!important;border-radius:0!important;
  box-shadow:0 -10px 28px rgba(0,0,0,.45)!important;
  backdrop-filter:blur(14px)}
/* nog niet verbonden uiteinden ademen zachtjes */
@keyframes adem{0%,100%{box-shadow:inset 0 -2px 0 rgba(0,0,0,.24),0 0 16px -2px var(--k)}
  50%{box-shadow:inset 0 -2px 0 rgba(0,0,0,.24),0 0 22px 2px var(--k)}}
.blok.eind.open{animation:adem 1.6s ease-in-out infinite}

/* ---------- antwoordknoppen: lange antwoorden mogen niet overlopen ---------- */
/* vier antwoorden op één rij past alleen bij korte tekst; anders 2x2 */
.answer-grid.vier{grid-template-columns:repeat(2,1fr)}
@media (min-width:380px){
  .answer-grid.vier.kort{grid-template-columns:repeat(4,1fr)}
}
.answer-btn{padding:12px 8px;line-height:1.1;text-align:center;
  overflow-wrap:anywhere;hyphens:none}
/* schaal het lettertype mee met de lengte van het antwoord */
.answer-btn.lang{font-size:17px}
.answer-btn.xlang{font-size:14px}

/* ---------- laatste restanten van de 3D-randen ---------- */
.game-card,.game-card.locked,.profile-avatar,.gift-btn,.powerup,
.game-cel,.rangtabs button,.bet-row button,.trio-tile,.podium-avatar{
  box-shadow:none!important;border-bottom-width:1.5px!important}
.powerup{background:var(--vlak2);border:1.5px solid var(--rand);color:var(--tekst)}
.powerup:disabled{opacity:.42}
.powerup:active{transform:translateY(1px)}
.gift-btn{background:var(--vlak2);border:1.5px solid var(--rand)}
.gift-btn:active{transform:scale(.97)}
.profile-avatar{border:2px solid var(--rand)}
.game-card{border:1.5px solid var(--rand)}
.game-card:active{transform:scale(.97)}

/* ---------- instellingen ---------- */
.kop-tand{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;background:none;border:0;padding:0}
.kop-tand::before{content:"";position:absolute;inset:10px;background:currentColor;
  color:#fff;opacity:.92;
  -webkit-mask:var(--tand) center/contain no-repeat;
  mask:var(--tand) center/contain no-repeat}
.kop-tand{--tand:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.4 13a7.9 7.9 0 000-2l2-1.6a.5.5 0 00.1-.6l-1.9-3.3a.5.5 0 00-.6-.2l-2.4 1a7.6 7.6 0 00-1.7-1L14.5 2.4a.5.5 0 00-.5-.4h-3.8a.5.5 0 00-.5.4L9.3 5.3a7.6 7.6 0 00-1.7 1l-2.4-1a.5.5 0 00-.6.2L2.7 8.8a.5.5 0 00.1.6L4.9 11a8 8 0 000 2l-2.1 1.6a.5.5 0 00-.1.6l1.9 3.3a.5.5 0 00.6.2l2.4-1c.5.4 1.1.8 1.7 1l.4 2.9a.5.5 0 00.5.4h3.8a.5.5 0 00.5-.4l.4-2.9c.6-.2 1.2-.6 1.7-1l2.4 1a.5.5 0 00.6-.2l1.9-3.3a.5.5 0 00-.1-.6zM12 15.5A3.5 3.5 0 1115.5 12 3.5 3.5 0 0112 15.5z'/></svg>")}
.card-title{position:relative}
.inst-lijst{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.inst-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;padding:12px 13px;border-radius:14px;
  background:var(--vlak2);border:1.5px solid var(--rand);min-height:54px}
.inst-rij:active{transform:scale(.99)}
.inst-t{display:flex;flex-direction:column;gap:2px;font-family:var(--disp);
  font-weight:800;font-size:14.5px;color:var(--tekst);min-width:0}
.inst-t small{font-family:var(--body);font-weight:700;font-size:11.5px;
  color:var(--tekst-zacht);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inst-pijl{flex:none;font-size:19px;color:var(--tekst-zacht)}
.schakel{flex:none;width:46px;height:27px;border-radius:14px;background:#241F42;
  border:1.5px solid var(--rand);position:relative;transition:background .16s,border-color .16s}
.schakel::after{content:"";position:absolute;left:3px;top:2.5px;width:19px;height:19px;
  border-radius:50%;background:var(--tekst-zacht);transition:transform .16s,background .16s}
.schakel.aan{background:linear-gradient(180deg,#8B5CF6,#6D33E8);border-color:#4A1FB0}
.schakel.aan::after{transform:translateX(19px);background:#fff}
.inst-noot{margin:8px 0 0;font-size:12px;text-align:center}
/* vergelijking */
.vg-rij{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center;
  padding:9px 11px;border-radius:12px;background:var(--vlak2);
  border:1.5px solid var(--rand);margin-bottom:5px}
.vg-naam{font-family:var(--disp);font-weight:800;font-size:13.5px;color:var(--tekst)}
.vg-tijd{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--goud);
  font-variant-numeric:tabular-nums;text-align:right}
.vg-balk{grid-column:1/-1;height:6px;border-radius:4px;background:#131A38;overflow:hidden}
.vg-balk i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#8B5CF6,#A47BFF);transition:width .3s}
.vg-p{grid-column:1/-1;font-size:11.5px;font-weight:700;color:var(--tekst-zacht)}
.vg-bron{margin:8px 0 0;font-size:11.5px;text-align:center}
/* tekstblad */
/* lange juridische teksten: het venster scrolt zelf, de knop blijft vast */
.tekstblad{max-width:420px;text-align:left;
  display:flex;flex-direction:column;overflow:hidden;
  /* dvh voor telefoons waar de adresbalk meeschuift; vh als terugval */
  max-height:82vh;max-height:82dvh}
.tekstblad h3{flex:none}
.tekstinhoud{font-size:13.5px;line-height:1.6;color:var(--tekst);margin-top:8px;
  flex:1 1 auto;min-height:0;
  /* tweede slot op de deur: ook zonder werkende flex-berekening krijgt dit
     vak een plafond, dus scrollt het altijd. 130px = kop, knop en marges. */
  max-height:calc(82vh - 130px);max-height:calc(82dvh - 130px);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  /* de app zet touch-action:manipulation op html en body; in sommige
     webviews blokkeert dat het slepen hierbinnen. Expliciet toestaan. */
  touch-action:pan-y;
  padding-right:6px}
/* zichtbaar dun balkje, zodat je ziet dat er meer tekst is */
.tekstinhoud::-webkit-scrollbar{width:5px}
.tekstinhoud::-webkit-scrollbar-track{background:transparent}
.tekstinhoud::-webkit-scrollbar-thumb{background:var(--lijn);border-radius:3px}
.tekstinhoud{scrollbar-width:thin;scrollbar-color:var(--lijn) transparent}
.tekstinhoud p{margin:0 0 10px}
.tekstinhoud b{color:#fff}
.tekstinhoud .klein{font-size:12px;color:var(--tekst-zacht)}
.tekstinhoud h4{font-family:var(--disp);font-weight:800;font-size:14px;color:#fff;
  margin:16px 0 6px}
.tekstinhoud h4:first-child{margin-top:0}
.tekstinhoud ul{margin:0 0 10px;padding-left:20px}
.tekstinhoud li{margin-bottom:4px}
.tekstinhoud a{color:var(--paars1);text-decoration:underline;text-underline-offset:2px}
.tab-prijzen{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:12.5px}
.tab-prijzen th,.tab-prijzen td{padding:7px 8px;text-align:left;
  border-bottom:1px solid var(--rand)}
.tab-prijzen th{color:var(--tekst-zacht);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.04em}
.bladknoppen{flex:none}
/* rustige modus: zelfde effect als de systeeminstelling */
html.rustig *,html.rustig *::before,html.rustig *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important}
/* vormen bij kleurenblindmodus */
.potje{position:relative;display:inline-flex;align-items:center;justify-content:center}
.potjevorm,.blokvorm{font-size:60%;font-weight:800;color:rgba(255,255,255,.94);
  text-shadow:0 1px 2px rgba(0,0,0,.55);line-height:1}
.blok{display:flex;align-items:center;justify-content:center}
.blokvorm{font-size:15px}

/* ---------- categoriekaarten en -iconen ---------- */
/* iconen vullen hetzelfde vierkant en staan altijd gecentreerd */
.cat-ico{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.ck-beeld{display:flex;align-items:center;justify-content:center;flex:none}
.filter-tab{display:inline-flex;align-items:center;gap:7px}
.filter-tab .cat-ico{width:20px;height:20px;flex:none}

.catvak.hidden{display:none}
.cat-kaart{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
  padding:16px 8px 12px;min-height:150px;border-radius:20px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--k) 16%,transparent),var(--vlak) 64%);
  border:1.5px solid color-mix(in srgb,var(--k) 30%,transparent);
  transition:transform .1s,border-color .12s}
.cat-kaart:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .cat-kaart:hover{border-color:color-mix(in srgb,var(--k) 55%,transparent)}
}
.ck-beeld{width:72px;height:72px}
.ck-naam{font-family:var(--disp);font-weight:800;font-size:14.5px;color:#fff;margin-top:6px}
.ck-tel{font-size:11px;font-weight:700;color:var(--tekst-zacht)}
@media (max-width:359px){
  .ck-beeld{width:64px;height:64px}
}
/* samengevoegde tijden-en-vergelijkingsrij */
.sd-tier{display:grid;grid-template-columns:26px 1fr auto auto;gap:4px 11px;
  align-items:center;min-height:52px}
.sd-t-balk{grid-column:1/-1;height:5px;border-radius:3px;background:#131A38;overflow:hidden;
  margin-top:2px}
.sd-t-balk i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#8B5CF6,#A47BFF);transition:width .3s}
.sd-t-p{grid-column:1/-1;font-size:11px;font-weight:700;color:var(--tekst-zacht)}
.sd-bron{margin:9px 0 0;text-align:center;font-size:11.5px}

/* ---------- categorieën als schuifstrip ---------- */
.catvak{display:flex;gap:10px;margin:10px -18px 12px;padding:2px 18px 8px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.catvak::-webkit-scrollbar{display:none}
.catvak .cat-kaart{flex:0 0 126px;scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:14px 10px 12px;border-radius:20px;min-height:150px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--k) 14%,transparent),var(--vlak) 66%);
  border:1.5px solid color-mix(in srgb,var(--k) 26%,transparent);
  transition:transform .12s,border-color .14s,box-shadow .14s}
.catvak .cat-kaart.aan{border-color:var(--k);
  box-shadow:0 0 0 1px var(--k) inset,0 8px 22px -8px var(--k)}
.catvak .cat-kaart:active{transform:scale(.97)}
.catvak .ck-beeld{width:66px;height:66px;display:flex;align-items:center;justify-content:center}
.catvak .ck-naam{font-family:var(--disp);font-weight:800;font-size:14px;color:#fff;margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.catvak .ck-tel{font-size:10.5px;font-weight:700;color:var(--tekst-zacht);white-space:nowrap}
/* mozaïek voor Alle */
.ck-mozaiek{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  width:66px;height:66px;align-content:center;justify-items:center}

/* bordspellen hebben hun hoogte nodig: chroom compacter */
body.bordspel .tijdpil{display:none}
body.bordspel #powerups{margin-top:6px}
body.bordspel .powerup{min-height:38px;padding:6px 8px;font-size:12px}
body.bordspel .metabalk{margin-bottom:6px}
body.bordspel .spelregel{font-size:12.5px;margin-bottom:6px}
body.bordspel #f-speel .card{padding:12px 14px 14px}
body.bordspel .duelkop{margin-bottom:8px}

/* tijdens het spelen is er geen navigatiebalk: die ruimte hoort bij het spel */
body.ingame .wrap{padding-top:calc(10px + env(safe-area-inset-top));
  padding-bottom:calc(14px + env(safe-area-inset-bottom))}
body.ingame #f-speel .card{margin-top:8px}
/* laatste hoogtewinst bij de bordspellen */
body.bordspel .ab-tips{max-height:124px}
body.bordspel .ab-bord{--abh:190px}
body.bordspel #vraagvak.krap{margin-bottom:4px}
body.bordspel #bfout{min-height:0}
@media (max-height:740px){
  body.bordspel .ab-tips{max-height:96px}
  body.bordspel .ab-bord{--abh:164px}
}
/* Alle: geen kaart, geen iconen — alleen tekst, verticaal gecentreerd */
.cat-alle{flex:0 0 96px;scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:150px;padding:0 8px;border:0;background:none;
  transition:transform .12s,opacity .14s}
.cat-alle .ca-naam{font-family:var(--disp);font-weight:800;font-size:17px;
  color:var(--tekst-zacht);transition:color .14s}
.cat-alle .ca-tel{font-size:10.5px;font-weight:700;color:var(--tekst-zacht);
  opacity:.7;white-space:nowrap}
.cat-alle.aan .ca-naam{color:#fff}
.cat-alle.aan::after{content:"";width:22px;height:3px;border-radius:2px;
  background:var(--paars);margin-top:2px}
.cat-alle:active{transform:scale(.96)}
/* categoriekeuze voor een battle */
.catkeuze{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:4px}
.ck-knop{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 8px;border-radius:12px;background:var(--vlak2);
  border:1.5px solid var(--rand);min-height:42px;
  font-family:var(--disp);font-weight:800;font-size:12.5px;color:var(--tekst-zacht)}
.ck-knop img{width:22px;height:22px;flex:none}
.ck-knop.aan{border-color:var(--k,var(--paars));color:#fff;
  background:color-mix(in srgb,var(--k,#8B5CF6) 16%,var(--vlak2))}
.ck-knop:first-child{grid-column:1/-1}
.ck-knop:active{transform:scale(.98)}
.catkeuze-noot{margin:8px 0 0;text-align:center;font-size:11.5px;line-height:1.4}
.catkeuze-noot:empty{display:none}
/* kamerinstellingen van de gastheer */
.segrij{display:flex;gap:6px;flex-wrap:wrap}
.seg{padding:9px 15px;border-radius:11px;background:var(--vlak2);
  border:1.5px solid var(--rand);font-family:var(--disp);font-weight:800;
  font-size:13.5px;color:var(--tekst-zacht);min-height:40px}
.seg.aan{background:linear-gradient(180deg,#8B5CF6,#6D33E8);border-color:#4A1FB0;color:#fff}
.seg.uit{opacity:.35}
.ko-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:4px}
.ko-cat{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:12px;
  background:var(--vlak2);border:1.5px solid var(--rand);min-height:44px;
  font-family:var(--disp);font-weight:800;font-size:12.5px;color:var(--tekst-zacht)}
.ko-cat img{width:22px;height:22px;flex:none}
.ko-cat span:not(.ko-vink){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:left}
.ko-cat.aan{border-color:var(--k);color:#fff;
  background:color-mix(in srgb,var(--k) 15%,var(--vlak2))}
.ko-vink{flex:none;width:16px;text-align:center;color:var(--k);font-weight:800}
.ko-noot{margin:8px 0 0;text-align:center;font-size:11.5px}
/* knop naar het tv-scherm */
.tvknop{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 13px;margin-top:10px;border-radius:14px;background:var(--vlak2);
  border:1.5px solid var(--rand);min-height:56px}
.tvknop:active{transform:scale(.99)}
.tv-ico{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(53,214,160,.14);
  position:relative}
.tv-ico::before{content:"";position:absolute;inset:8px 7px 11px;border:2px solid #35D6A0;
  border-radius:3px}
.tv-ico::after{content:"";position:absolute;left:50%;bottom:7px;width:12px;height:2px;
  transform:translateX(-50%);background:#35D6A0;border-radius:1px}
.tv-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.tv-txt b{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst)}
.tv-txt small{font-size:11.5px;font-weight:700;color:var(--tekst-zacht);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* castknop */
.tv-ico.cast::before{content:"";position:absolute;inset:9px 7px 12px;
  border:2px solid #35D6A0;border-radius:3px;border-left-color:transparent;
  border-bottom-color:transparent}
.tv-ico.cast::after{content:"";position:absolute;left:8px;bottom:9px;
  width:8px;height:8px;border-left:2px solid #35D6A0;border-bottom:2px solid #35D6A0;
  border-radius:0 0 0 2px}
.tvknop.aan{border-color:#35D6A0;background:rgba(53,214,160,.12)}
.tvknop.hidden{display:none}

/* ---------- spelkaarten: donkere tegel met gekleurde rand, als in de referentie ---------- */
.game-card{border:1.5px solid color-mix(in srgb,var(--k,#8B5CF6) 30%,transparent)!important;
  border-radius:18px!important;padding:12px 6px 9px!important;
  transition:border-color .14s,transform .1s,box-shadow .14s}
.game-card:active{transform:scale(.97)}
.game-card:not(.locked):hover{border-color:color-mix(in srgb,var(--k) 58%,transparent)!important;
  box-shadow:0 6px 20px -8px var(--k)!important}
.game-card .spel-mono{box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
.game-card .game-stars{color:#FFD98A;font-size:11px;letter-spacing:1px;margin-top:6px}
.game-card .game-time{font-size:10px;font-weight:800;color:var(--tekst-zacht);margin-top:1px}
.game-titel{font-family:var(--disp);font-weight:800;font-size:11px;color:var(--tekst);
  text-align:center;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-card.locked{opacity:1;filter:none;
  border-color:var(--rand)!important;background:var(--vlak)!important}
.game-card.locked .spel-mono{filter:grayscale(1) brightness(.5)}
.game-card.locked .game-stars,.game-card.locked .game-time{opacity:.35}
/* aangeleverde spelicoontjes: wit silhouet, door de app gekleurd */
.spel-beeld{display:block;background:linear-gradient(160deg,
  color-mix(in srgb,var(--k) 92%,#FFFFFF),var(--k) 62%,
  color-mix(in srgb,var(--k) 72%,#000000));
  filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--k) 45%,transparent))}
.game-card.locked .spel-beeld{background:var(--tekst-zacht);filter:none;opacity:.4}

/* de categoriestrip staat nu boven het paneel */
#f-collectie .catvak{margin:0 -16px 12px;padding:2px 16px 8px}
.kop-tel{flex:none;font-family:var(--disp);font-weight:800;font-size:13px;
  color:var(--tekst-zacht);white-space:nowrap}
.paginakop h1{padding-right:12px}
#vriendmelding small{display:block;margin-top:4px;font-size:11.5px;opacity:.8;font-weight:700}

/* ---------- wachten tot de rest klaar is ---------- */
.wachtvak{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 18px;background:var(--vlak2);border:1.5px solid var(--rand);
  border-radius:20px}
.wacht-tijd{font-family:var(--disp);font-weight:800;font-size:44px;color:var(--goud);
  line-height:1;font-variant-numeric:tabular-nums}
.wacht-lbl{font-size:12px;font-weight:700;color:var(--tekst-zacht);
  letter-spacing:.08em;text-transform:uppercase}
.wacht-stip{display:flex;gap:7px;margin-top:12px}
.wacht-stip span{width:11px;height:11px;border-radius:50%;background:var(--rand);
  transition:background .3s}
.wacht-stip span.aan{background:var(--groen,#35D6A0);
  box-shadow:0 0 10px -2px var(--groen,#35D6A0)}

/* ---------- uitslag van één ronde ---------- */
.ru-kop{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:14px 12px;background:linear-gradient(160deg,#2A2360,#141A37 70%);
  border:1.5px solid var(--rand);border-radius:18px;margin-bottom:10px}
.ru-spel{font-family:var(--disp);font-weight:800;font-size:19px;color:#fff}
.ru-cijfers{display:flex;gap:26px;align-items:baseline}
.ru-cijfers b{font-family:var(--disp);font-weight:800;font-size:24px;color:var(--goud);
  font-variant-numeric:tabular-nums}
.ru-cijfers small{font-size:11px;font-weight:700;color:var(--tekst-zacht);
  letter-spacing:.06em;text-transform:uppercase;margin-left:-20px;align-self:flex-end}
.ru-lijst{display:flex;flex-direction:column;gap:6px}
.ru-rij{display:grid;grid-template-columns:26px 30px 1fr auto;gap:4px 10px;
  align-items:center;padding:9px 11px;border-radius:14px;
  background:var(--vlak2);border:1.5px solid var(--rand)}
.ru-rij.ik{border-color:var(--paars);background:rgba(139,92,246,.12)}
.ru-plek{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--goud);
  text-align:center}
.ru-rij:first-child .ru-plek{color:#FFD86B}
.ru-naam{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--tekst);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ru-tijd{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--goud);
  font-variant-numeric:tabular-nums}
.ru-balk{grid-column:1/-1;height:5px;border-radius:3px;background:#131A38;overflow:hidden}
.ru-balk i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#8B5CF6,#A47BFF);transition:width .5s}
.ru-rij:first-child .ru-balk i{background:linear-gradient(90deg,#F5B93C,#FFD86B)}
/* getalvelden in de kamerinstellingen */
.ko-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 2px;border-bottom:1px solid var(--rand)}
.ko-rij:last-of-type{border-bottom:0}
.ko-rij label{font-family:var(--disp);font-weight:800;font-size:14.5px;color:var(--tekst)}
.ko-stap{display:flex;align-items:center;gap:8px}
.ko-stap button{width:38px;height:38px;border-radius:11px;background:var(--vlak2);
  border:1.5px solid var(--rand);color:var(--tekst);font-size:20px;font-weight:800;
  display:flex;align-items:center;justify-content:center;line-height:1}
.ko-stap button:active{transform:scale(.94)}
.ko-stap input{width:62px;height:40px;text-align:center;border-radius:11px;
  background:var(--vlak2);border:1.5px solid var(--rand);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:17px;
  -moz-appearance:textfield}
.ko-stap input::-webkit-outer-spin-button,
.ko-stap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ko-stap input:focus{border-color:var(--paars);outline:none}
.prem-merk{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:7px;
  background:var(--goud);color:#2A1B00;font-family:var(--disp);font-weight:800;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.prem-merk.hidden{display:none}
/* oefenspelers in het klassement duidelijk merken */
.rr-oefen{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:6px;
  background:var(--vlak2);border:1px solid var(--rand);
  font-family:var(--body);font-weight:700;font-size:9.5px;letter-spacing:.03em;
  color:var(--tekst-zacht);vertical-align:middle;text-transform:none}
.rang-rij:has(.rr-oefen) .rr-naam{color:var(--tekst-zacht)}
.rang-rij:has(.rr-oefen) .avatar-img{filter:grayscale(.7);opacity:.75}
#rangnoot{line-height:1.45}
/* wachtlijst voor het volgende seizoen */
.wachtkaart{background:linear-gradient(160deg,rgba(245,185,60,.12),var(--vlak) 70%);
  border:1.5px solid rgba(245,185,60,.35);border-radius:20px;padding:16px 16px 14px;
  margin-bottom:12px}
.wachtkaart.hidden{display:none}
.wk-kop{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--goud);
  margin-bottom:6px}
.wk-txt{margin:0 0 6px;font-size:13px;line-height:1.5;color:var(--tekst)}
.wk-txt.zacht{color:var(--tekst-zacht);font-size:12px;margin-bottom:0}

/* ---------- levensvenster bij het hartje ---------- */
.chip-lives,.chip-coins{position:relative;cursor:pointer;
  transition:transform .1s,filter .12s}
/* het raakvlak groter dan de chip zelf: 30px is te klein voor een vinger */
.chip-lives::after,.chip-coins::after{content:"";position:absolute;
  left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.chip-lives:active,.chip-coins:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .chip-lives:hover,.chip-coins:hover{filter:brightness(1.15)}
}
.hartvak{position:fixed;inset:0;z-index:70;display:flex;align-items:center;
  justify-content:center;padding:24px;
  background:rgba(6,5,18,.72);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s}
.hartvak.open{opacity:1}
.hartvak.hidden{display:none}
.hv-kaart{width:100%;max-width:320px;background:var(--vlak);
  border:1.5px solid var(--rand);border-radius:24px;padding:22px 20px 18px;
  text-align:center;box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
  transform:translateY(10px) scale(.97);transition:transform .18s}
.hartvak.open .hv-kaart{transform:none}
.hv-harten{display:flex;justify-content:center;gap:4px;margin-bottom:12px}
.hv-klok{font-family:var(--disp);font-weight:800;font-size:19px;color:#fff;
  min-height:24px}
.hv-sub{margin:6px 0 16px;font-size:13px;color:var(--tekst-zacht);line-height:1.45}
.hv-kaart .btn{width:100%}
.hv-kaart .btn+.btn{margin-top:8px}
.hv-kaart .btn.hidden{display:none}
.zoek-cat{margin:10px auto 0;max-width:280px;text-align:center;font-size:12px;
  line-height:1.5}
.zoek-cat.hidden{display:none}
.zoek-cat b{color:var(--tekst)}
.cast-waarom{margin:8px 2px 0;font-size:11.5px;line-height:1.45;text-align:center}
.cast-waarom.hidden{display:none}
/* aankoopstatus en herstelknop */
.pk-status{margin:10px 0 0;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--teal1)}
.pk-status.mis{color:#FF7A8F}
.pk-status.hidden{display:none}
.pk-herstel{display:block;width:100%;margin-top:10px;padding:10px;
  background:none;border:0;font-size:12px;font-weight:700;
  color:var(--tekst-zacht);text-decoration:underline;text-underline-offset:3px}
.pk-herstel.hidden{display:none}

/* ================== WELKOM: vragenlijst bij de eerste keer ================== */
.wk-balk{height:5px;border-radius:3px;background:var(--lila);overflow:hidden;
  margin:0 0 18px}
.wk-balk i{display:block;height:100%;width:25%;border-radius:3px;
  background:linear-gradient(90deg,var(--paars1),var(--goud));
  transition:width .28s cubic-bezier(.2,.8,.3,1)}
.wk-sub{margin:2px 0 14px}
.wk-keuzes{display:grid;gap:9px}
.wk-keuzes.twee{grid-template-columns:1fr 1fr}
.wk-keuze{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:14px 15px;border-radius:14px;background:var(--vlak2,#232E5C);
  border:1.5px solid var(--rand,#38427A);color:var(--tekst);
  font-family:var(--body);font-weight:700;font-size:14.5px;
  transition:border-color .14s,background .14s,transform .1s}
.wk-keuze:active{transform:scale(.98)}
.wk-keuze .bol{flex:none;width:19px;height:19px;border-radius:50%;
  border:2px solid var(--lijn);position:relative}
.wk-keuze.aan{border-color:var(--goud);background:rgba(246,185,59,.10)}
.wk-keuze.aan .bol{border-color:var(--goud)}
.wk-keuze.aan .bol::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--goud)}
.wk-naamveld{width:100%;padding:14px;border-radius:14px;border:2px solid var(--lijn);
  background:rgba(255,255,255,.06);color:var(--tekst);font-family:var(--disp);
  font-weight:800;font-size:19px;text-align:center;outline:none}
.wk-naamveld:focus{border-color:var(--goud)}
.wk-tel{margin-top:8px;text-align:center;font-size:12.5px;color:var(--tekst-zacht)}
.wk-fout{min-height:18px;margin:10px 2px 0;font-size:13px;font-weight:700;
  color:var(--roze);text-align:center}
.wk-knoppen{display:flex;gap:9px;margin-top:6px}
.wk-knoppen .btn{margin-top:0;flex:1}
.wk-noot{text-align:center;font-size:12px;margin-top:14px;line-height:1.5}
.wk-stop{text-align:center;padding:6px 4px}
.wk-stop b{display:block;font-family:var(--disp);font-weight:800;font-size:19px;
  color:#fff;margin-bottom:8px}

/* ================== RONDLEIDING ==================
   Eén laag over de app heen. Het gat wordt niet uitgeknipt maar gemaakt met een
   enorme schaduw óm het kader heen: dat werkt in elke webview en heeft geen
   svg-masker nodig dat op oudere Android hapert.                             */
.rl-laag{position:fixed;inset:0;z-index:80;animation:schuifin .18s ease}
.rl-gat{position:absolute;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(5,8,30,.78),0 0 0 2px var(--goud) inset;
  transition:top .3s cubic-bezier(.2,.8,.3,1),left .3s cubic-bezier(.2,.8,.3,1),
    width .3s cubic-bezier(.2,.8,.3,1),height .3s cubic-bezier(.2,.8,.3,1)}
.rl-gat::after{content:"";position:absolute;inset:-4px;border-radius:20px;
  border:2px solid var(--goud);opacity:.55;animation:rl-klop 1.6s ease-in-out infinite}
@keyframes rl-klop{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.045);opacity:.15}}
html.rustig .rl-gat::after{animation:none}
.rl-kaart{position:absolute;left:50%;transform:translateX(-50%);
  width:min(340px,calc(100vw - 32px));
  background:linear-gradient(180deg,#221C4A,#131A38);
  border:1.5px solid var(--rand);border-radius:20px;padding:17px 18px 15px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  transition:top .3s cubic-bezier(.2,.8,.3,1)}
.rl-stap{font-family:var(--disp);font-weight:800;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--goud)}
.rl-kop{font-family:var(--disp);font-weight:800;font-size:19px;color:#fff;margin-top:5px}
.rl-tekst{font-size:13.5px;line-height:1.55;color:var(--tekst-zacht);
  font-weight:700;margin-top:6px}
.rl-rij{display:flex;align-items:center;gap:9px;margin-top:15px}
.rl-rij .btn{margin-top:0;flex:1;padding:12px}
.rl-over{flex:none;background:none;border:0;color:var(--tekst-zacht);
  font-size:13px;font-weight:800;padding:12px 4px;text-decoration:underline;
  text-underline-offset:3px}
.rl-stippen{display:flex;gap:5px;justify-content:center;margin-top:12px}
.rl-stippen i{width:6px;height:6px;border-radius:50%;background:var(--lijn)}
.rl-stippen i.aan{background:var(--goud);width:16px;border-radius:3px}
/* tijdens de vragenlijst is er nog geen naam, geen leven en geen munt om te tonen */
body.welkomstap #kopbalk,body.welkomstap .nav-bar{display:none!important}

/* status onder een naamveld: vrij, bezet of nog aan het kijken */
.naamstatus{min-height:18px;margin-top:9px;text-align:center;
  font-size:12.5px;font-weight:800}
.naamstatus.bezig{color:var(--tekst-zacht)}
.naamstatus.goed{color:#35D6A0}
.naamstatus.fout{color:var(--roze)}
.naamtips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:9px}
.naamtip{padding:8px 13px;border-radius:11px;background:var(--vlak2,#232E5C);
  border:1.5px solid var(--rand,#38427A);color:var(--tekst);
  font-family:var(--disp);font-weight:800;font-size:13.5px}
.naamtip:active{transform:scale(.97)}

/* echte badge-plaatjes (zie img/badges/) i.p.v. de getekende svg-versie */
.div-badge{vertical-align:middle;display:inline-block}

/* ================== CARROUSEL OP THUIS: snel duel / toernooien / vrienden ==
   Vervangt de losse heldknop. Elk potje is nu een eigen kaart met een paar
   bullets erbij, zodat je in één oogopslag ziet wat je krijgt — niet alleen
   dat er iets is. Scroll-snap i.p.v. een JS-bibliotheek: dat werkt met een
   vinger net zo goed als met een muis, en er hoeft niets geladen te worden. */
.carrousel{margin-bottom:6px}
.car-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
  /* de app zet touch-action:manipulation op html en body; in de Android-
     webview blokkeert dat soms slepen binnen een genest scrollvak */
  touch-action:pan-x}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;
  display:block;width:100%;text-align:left;overflow:hidden;
  border-radius:22px;padding:20px 18px 18px;
  box-shadow:0 14px 34px rgba(70,40,200,.28)}
.car-1{background:linear-gradient(135deg,#5B2FE0 0%,#3D2BC4 46%,#1F49C9 100%)}
.car-2{background:linear-gradient(135deg,#C67F00 0%,#B0590A 55%,#8A2E14 100%);
  box-shadow:0 14px 34px rgba(198,127,0,.28)}
.car-3{background:linear-gradient(135deg,#1F9E86 0%,#17836F 55%,#123A63 100%);
  box-shadow:0 14px 34px rgba(31,158,134,.28)}
.car-glow{position:absolute;right:-34px;top:-40px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);pointer-events:none}
/* verticaal gecentreerd i.p.v. in de hoek geplakt — dat oogde scheef zodra
   de tekst ernaast korter of langer was dan het plaatje hoog is */
.car-beeld{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:140px;height:140px;object-fit:contain;object-position:center;
  opacity:.96;pointer-events:none;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.car-txt{position:relative;display:flex;flex-direction:column;gap:5px;max-width:76%}
.car-kop{font-family:var(--disp);font-weight:800;font-size:24px;color:#fff;line-height:1.1;
  display:flex;align-items:center;gap:8px}
.car-sub{font-size:13px;font-weight:700;color:rgba(255,255,255,.86);min-height:16px}
.car-bullets{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.car-bullets li{font-size:12px;font-weight:700;color:rgba(255,255,255,.92);
  padding-left:15px;position:relative;line-height:1.35}
.car-bullets li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;
  border-radius:50%;background:rgba(255,255,255,.75)}
.car-cta{align-self:flex-start;margin-top:11px;background:var(--goud);color:#2A1B00;
  font-family:var(--disp);font-weight:800;font-size:14px;padding:9px 18px;border-radius:14px}
.car-badge{position:static;display:inline-flex;min-width:19px;height:19px;padding:0 5px;
  border-radius:10px;align-items:center;justify-content:center;font-size:11px}

.car-dots{display:flex;justify-content:center;gap:6px;margin-top:9px}
.car-dots i{width:6px;height:6px;border-radius:50%;background:var(--rand);
  transition:width .2s,background .2s}
.car-dots i.aan{width:16px;border-radius:3px;background:var(--goud)}


/* ================== TIJDENS EEN POTJE: NOOIT SCROLLEN ==================
   Elders in de app mag de pagina best scrollen (Instellingen, Collectie); dat
   stond nergens tegen, dus html/body blokkeerden alleen horizontaal. Tijdens
   een potje hoort geen enkele beweging van de pagina zelf voor te komen — een
   duel dat onder je vingers wegschuift is precies het soort bug dat oneerlijk
   aanvoelt in een tijdgebonden wedstrijd. Losse onderdelen die legitiem lang
   kunnen worden (zoals .stappen hierboven) krijgen hun eigen kleine scrolbak;
   de rest van het scherm staat vast. */
html.ingame,body.ingame{overflow:hidden!important;height:100%;
  height:100dvh;overscroll-behavior:none}
body.ingame{position:fixed;inset:0;width:100%}