/* Holenderski Sprint (/gra/): één telefoonvormig speelveld in de huisstijl.
   Kleuren afgeleid van de site (cursus/stijl.css: roze #E8879F, oranje #F4914A), met fellere accenten.
   Alles staat onder #gra, zodat de stijl van de website er niet doorheen loopt (en andersom). */
#gra{
  --roze:#E8879F; --roze-d:#C85D78; --roze-dd:#9E3F5C; --roze-l:#FDEDF1; --roze-fel:#EF5E86;
  --oranje:#F4914A; --oranje-d:#D96B2B; --oranje-l:#FDE7D6; --oranje-fel:#FF8A3D;
  --framboos:#B83B6B; --goud:#FFB938; --goud-d:#D98E0B; --rood:#E5484D; --lila:#B78BE0;
  --inkt:#3A2A2E; --zacht:#7A5C63; --papier:#FFFBF9; --kaart:rgba(255,255,255,.92); --lijn:#F0D9DF;
  --verloop:linear-gradient(135deg,var(--roze-fel) 0%,var(--oranje) 100%);
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
  display:grid; place-items:center; padding:10px 16px; box-sizing:border-box;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(239,94,134,.30), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(244,145,74,.32), transparent 70%),
    linear-gradient(160deg,#FDEDF1 0%,#F9D3DD 50%,#FBD9C4 100%);
  color:var(--inkt); font-family:var(--font); -webkit-tap-highlight-color:transparent;
}
#gra *, #gra *::before, #gra *::after{box-sizing:border-box}
#gra [hidden]{display:none!important}
#gra section{margin:0}
#gra h2, #gra h3{letter-spacing:-.01em}
.g-stage{position:relative; width:100%; max-width:440px;
  height:min(880px, calc(100dvh - 70px)); min-height:520px;
  border-radius:28px; overflow:hidden; background:#cfeaf7;
  box-shadow:0 30px 70px rgba(158,63,92,.35), 0 0 0 1px rgba(255,255,255,.7), 0 0 0 7px rgba(255,255,255,.35);
  touch-action:none; user-select:none; -webkit-user-select:none}
html.app #gra{padding:4px 10px 0; background:none}
html.app .g-stage{height:calc(100dvh - var(--a-boven) - var(--a-kop-h) - var(--a-dock-ruimte) - 10px); min-height:440px}
#cv{position:absolute; inset:0; width:100%; height:100%; display:block}
#gra button{font-family:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
#gra button:focus-visible, #gra input:focus-visible, #gra a:focus-visible, #gra label:focus-within{outline:3px solid var(--oranje-d); outline-offset:2px}

/* HUD */
#gra .hud{position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; padding:14px 14px 0}
#gra .topbar{display:flex; align-items:center; gap:8px}
#gra .hearts{display:flex; gap:3px; padding:6px 8px; border-radius:999px; background:var(--kaart); box-shadow:0 2px 8px rgba(58,42,46,.12)}
#gra .hearts svg{width:20px; height:20px; transition:transform .2s}
#gra .hearts svg.lost{opacity:.25; transform:scale(.85)}
#gra .vehicle{display:flex; align-items:center; gap:5px; padding:5px 10px 5px 6px; border-radius:999px; background:var(--kaart); box-shadow:0 2px 8px rgba(58,42,46,.12); font-weight:800; font-size:12px}
#gra .vehicle i{width:22px; height:22px; border-radius:50%; background:var(--verloop); display:grid; place-items:center}
#gra .vehicle svg{width:14px; height:14px}
#gra .score{margin-left:auto; font-weight:800; font-size:30px; line-height:1; font-variant-numeric:tabular-nums; color:#fff;
  text-shadow:0 2px 0 var(--oranje-d), 0 4px 12px rgba(58,42,46,.25)}
#gra .combo{font-weight:800; font-size:17px; padding:4px 10px 3px; border-radius:999px; background:var(--verloop); color:#fff; box-shadow:0 3px 0 var(--roze-dd)}
#gra .combo.pop{animation:g-pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes g-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
#gra .qcard{margin-top:12px; align-self:center; min-width:64%; max-width:100%; text-align:center; padding:10px 40px 13px; border-radius:22px;
  background:var(--kaart); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(58,42,46,.16); position:relative; overflow:hidden}
#gra .qcard.gold{box-shadow:0 0 0 3px var(--goud), 0 8px 24px rgba(255,185,56,.45)}
#gra .qlabel{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--roze-d)}
#gra .qcard.gold .qlabel{color:var(--goud-d)}
#gra .qword{font-weight:800; font-size:clamp(24px,7.5vw,34px); line-height:1.1; margin-top:2px; overflow-wrap:anywhere; color:var(--inkt)}
#gra .qbar{position:absolute; left:0; bottom:0; height:5px; width:100%; background:var(--verloop); transform-origin:left; transform:scaleX(0)}
#gra .qcard.gold .qbar{background:var(--goud)}
#gra .speak{pointer-events:auto; position:absolute; right:8px; top:50%; margin-top:-16px; width:32px; height:32px; border-radius:50%;
  background:var(--oranje-l); color:var(--oranje-d); display:grid; place-items:center}
#gra .speak svg{width:16px; height:16px}
#gra .record{align-self:center; margin-top:8px; font-size:12px; font-weight:800; padding:4px 11px; border-radius:999px; background:rgba(58,42,46,.55); color:#fff}
#gra .record.beat{background:var(--goud); color:#4a2f00; animation:g-pop .4s cubic-bezier(.3,1.6,.5,1)}
#gra .powers{display:flex; gap:6px; justify-content:center; margin-top:6px; min-height:24px}
#gra .pw{font-size:11px; font-weight:800; letter-spacing:.04em; padding:4px 9px; border-radius:999px; color:#fff}
#gra .toast{position:absolute; left:50%; top:39%; transform:translate(-50%,-50%) scale(.9); opacity:0; transition:opacity .2s, transform .25s;
  padding:10px 16px; border-radius:16px; font-weight:800; font-size:15px; text-align:center; max-width:86%; box-shadow:0 6px 18px rgba(58,42,46,.2); pointer-events:none}
#gra .toast.show{opacity:1; transform:translate(-50%,-50%) scale(1)}
#gra .toast.bad{background:var(--rood); color:#fff}
#gra .toast.good{background:var(--verloop); color:#fff}
#gra .toast.gold{background:var(--goud); color:#4a2f00}
#gra .chips{margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 0 calc(14px + env(safe-area-inset-bottom,0px))}
#gra .chip{pointer-events:auto; min-width:0; min-height:62px; padding:9px 6px 8px; border-radius:18px; background:var(--kaart);
  box-shadow:0 4px 0 rgba(58,42,46,.15), 0 6px 14px rgba(58,42,46,.12); font-weight:800; font-size:15px; line-height:1.15; color:var(--inkt);
  display:flex; align-items:center; justify-content:center; text-align:center; overflow-wrap:anywhere; transition:transform .12s, box-shadow .15s, background .15s; position:relative}
#gra .chip::before{content:""; position:absolute; left:50%; top:0; width:36%; height:5px; border-radius:0 0 6px 6px; transform:translateX(-50%); background:var(--c)}
#gra .chip.on{background:var(--c); color:#fff; box-shadow:0 4px 0 color-mix(in srgb,var(--c) 60%,#000), 0 8px 18px rgba(58,42,46,.18); transform:translateY(-3px)}
#gra .chip.on::before{background:#fff; opacity:.6}

/* Modus Zdania: zin boven kleiner, drie antwoorden onder elkaar (A, B, C staan ook op de bordjes) */
#gra .qword.zin{font-size:clamp(17px,5vw,22px); line-height:1.25}
#gra .chips.zin{grid-template-columns:1fr; gap:6px}
#gra .chips.zin .chip{min-height:44px; padding:7px 12px 7px 44px; justify-content:flex-start; text-align:left; font-size:14px; line-height:1.2}
#gra .chips.zin .chip::before{display:none}
#gra .chip b.lt{position:absolute; left:8px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
  background:var(--c); color:#fff; font-size:13px}
#gra .chip.on b.lt{background:#fff; color:var(--c)}
#gra .g-keuze{padding:10px}
#gra .g-keuze .tabs{margin-bottom:8px}
#gra .g-keuze .tabs button[aria-pressed="true"]{background:var(--verloop); color:#fff}
#gra .g-poziomy{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
#gra .g-poziomy button{font-weight:800; font-size:clamp(11px,3vw,13px); letter-spacing:-.01em; padding:8px 2px; border-radius:12px; background:var(--roze-l); color:var(--inkt); line-height:1.15; min-width:0; white-space:nowrap}
#gra .g-poziomy button small{display:block; font-size:11px; font-weight:700; color:var(--zacht); margin-top:2px}
#gra .g-poziomy button[aria-pressed="true"]{background:var(--oranje); color:#fff}
#gra .g-poziomy button[aria-pressed="true"] small{color:#fff; opacity:.9}
#gra .g-keuze .hint{margin:8px 2px 0}

#gra .count{position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:110px; color:#fff;
  text-shadow:0 6px 0 var(--oranje-d), 0 10px 30px rgba(58,42,46,.3); pointer-events:none}
#gra .count span{animation:g-count .7s ease-out both}
@keyframes g-count{0%{transform:scale(1.8); opacity:0}30%{opacity:1}100%{transform:scale(.9); opacity:.9}}
#gra .flash{position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle,transparent 45%,rgba(229,72,77,.5)); opacity:0; transition:opacity .35s}
#gra .flash.on{opacity:1; transition:none}

/* Schermen */
#gra .screen{position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:16px 16px 24px;
  display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg,rgba(255,251,249,0) 0%,rgba(255,246,243,.6) 26%,rgba(255,248,245,.97) 52%)}
#gra .toprow{display:flex; align-items:center; gap:8px}
#gra .brand{font-weight:800; font-size:13px; color:#fff; background:var(--verloop); padding:6px 12px; border-radius:999px; box-shadow:0 3px 0 var(--roze-dd)}
#gra .toprow .sp{flex:1}
#gra .iconbtn{width:38px; height:38px; border-radius:12px; background:var(--kaart); box-shadow:0 2px 8px rgba(58,42,46,.12); display:grid; place-items:center; color:var(--oranje-d)}
#gra .iconbtn svg{width:18px; height:18px}
#gra .iconbtn.off{opacity:.45}
#gra .logo{text-align:center}
#gra .logo small{display:block; font-weight:800; font-size:21px; color:var(--roze-dd); text-shadow:0 0 12px #fff, 0 0 4px #fff}
#gra .logo b{display:block; font-weight:800; font-size:62px; line-height:.92; letter-spacing:-.01em; transform:rotate(-3deg);
  color:#fff; text-shadow:0 4px 0 var(--roze-fel), 0 8px 0 var(--oranje), 0 12px 0 var(--oranje-d), 0 18px 28px rgba(58,42,46,.3)}
#gra .tag{text-align:center; font-weight:800; font-size:15px; margin:10px 0 0; color:var(--inkt)}
#gra .gheld{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; background:var(--kaart); border-radius:22px; padding:12px; box-shadow:0 6px 20px rgba(58,42,46,.1)}
#gra .gheld canvas{position:static; width:84px; height:84px; border-radius:18px; background:linear-gradient(#cfeaf7,#FDE7D6)}
#gra .gheld h3{margin:0; font-weight:800; font-size:18px; overflow-wrap:anywhere}
#gra .gheld p{margin:2px 0 8px; font-size:13px; color:var(--zacht)}
#gra .small-btn{font-weight:800; font-size:13px; padding:8px 12px; border-radius:12px; background:var(--oranje-l); color:var(--oranje-d)}
#gra .stats{display:grid; grid-template-columns:1fr 1fr; gap:8px}
#gra .stat{background:var(--kaart); border-radius:18px; padding:10px 12px; box-shadow:0 4px 14px rgba(58,42,46,.08)}
#gra .stat span{display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--zacht)}
#gra .stat strong{font-weight:800; font-size:26px; font-variant-numeric:tabular-nums;
  background:var(--verloop); -webkit-background-clip:text; background-clip:text; color:transparent}
#gra .play{font-weight:800; font-size:30px; letter-spacing:.04em; padding:15px; border-radius:22px; background:var(--verloop); color:#fff;
  box-shadow:0 6px 0 var(--roze-dd), 0 14px 30px rgba(239,94,134,.45); transition:transform .1s, box-shadow .1s}
#gra .play:active{transform:translateY(4px); box-shadow:0 2px 0 var(--roze-dd)}
#gra .play.maly{font-size:18px; padding:12px; width:100%; margin-top:6px}
#gra .ghost{font-weight:800; font-size:15px; padding:13px; border-radius:18px; background:var(--kaart); box-shadow:0 4px 14px rgba(58,42,46,.08); color:var(--roze-dd)}
#gra .gk{background:var(--kaart); border-radius:22px; padding:14px; box-shadow:0 4px 16px rgba(58,42,46,.08)}
#gra .gk h2{margin:0 0 10px; font-weight:800; font-size:19px; display:flex; align-items:center; gap:8px}
#gra .gk h2 em{font-style:normal; font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--zacht); margin-left:auto}
#gra .ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
#gra .rung{text-align:center; padding:9px 4px 8px; border-radius:14px; background:var(--roze-l); box-shadow:0 0 0 1px var(--lijn)}
#gra .rung i{display:grid; place-items:center; width:34px; height:34px; margin:0 auto 4px; border-radius:50%; background:#fff; color:var(--zacht)}
#gra .rung i svg{width:20px; height:20px}
#gra .rung b{display:block; font-size:12px; font-weight:800}
#gra .rung small{display:block; font-size:11px; color:var(--zacht); font-variant-numeric:tabular-nums}
#gra .rung.got{background:var(--oranje-l); box-shadow:0 0 0 2px var(--oranje)}
#gra .rung.got i{background:var(--verloop); color:#fff}
#gra .field{display:flex; gap:8px}
#gra input:not([type=checkbox]):not([type=range]):not([type=file]){flex:1; min-width:0; width:100%; font:700 16px var(--font); color:var(--inkt);
  background:var(--roze-l); border:1.5px solid var(--lijn); border-radius:12px; padding:11px 12px}
#gra input:focus{outline:none; border-color:var(--roze); box-shadow:0 0 0 4px rgba(232,135,159,.2)}
#gra .field button{font-weight:800; padding:0 14px; border-radius:12px; background:var(--verloop); color:#fff}
#gra .dolacz{display:flex; flex-direction:column; gap:6px}
#gra .dolacz label{font-size:12px; font-weight:800; color:var(--zacht); margin-top:4px}
#gra .dolacz .how{margin-bottom:4px}
#gra .hint{font-size:12px; color:var(--zacht); margin:6px 2px 0; min-height:1em}
#gra .hint.err{color:var(--rood); font-weight:700}
#gra .mission{display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; padding:8px 0; border-top:1px solid var(--lijn)}
#gra .mission:first-of-type{border-top:0; padding-top:0}
#gra .mission p{margin:0; font-weight:700; font-size:14px}
#gra .mission small{font-weight:800; font-size:12px; color:var(--zacht); font-variant-numeric:tabular-nums}
#gra .mission .bar{grid-column:1/-1; height:7px; border-radius:7px; background:var(--roze-l); overflow:hidden}
#gra .mission .bar i{display:block; height:100%; background:var(--verloop); border-radius:7px}
#gra .mission.done p{color:var(--oranje-d)}
#gra .mission.done .bar i{background:var(--oranje)}
#gra .tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:var(--roze-l); margin-bottom:8px}
#gra .tabs button{font-weight:800; font-size:13px; padding:8px; border-radius:9px; color:var(--zacht)}
#gra .tabs button[aria-selected="true"]{background:var(--verloop); color:#fff}
#gra .lb{list-style:none; margin:0; padding:0}
#gra .lb li{display:grid; grid-template-columns:30px 1fr auto; gap:8px; align-items:center; padding:7px 6px; border-radius:10px; font-variant-numeric:tabular-nums}
#gra .lb li+li{margin-top:2px}
#gra .lb .rk{font-weight:800; font-size:17px; color:var(--zacht); text-align:center}
#gra .lb li:nth-child(1) .rk{color:var(--goud-d)} #gra .lb li:nth-child(2) .rk{color:#8f97a8} #gra .lb li:nth-child(3) .rk{color:var(--oranje-d)}
#gra .lb .nm{font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#gra .lb .sc{font-weight:800; font-size:17px}
#gra .lb li.me{background:var(--oranje-l); box-shadow:0 0 0 1.5px var(--oranje)}
#gra .lbnote{font-size:13px; color:var(--zacht); margin:4px 2px 0}
#gra .live{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--oranje-d); margin-left:auto}
#gra .live i{width:7px; height:7px; border-radius:50%; background:var(--oranje); animation:g-blink 1.6s infinite}
#gra .live.offline{color:var(--zacht)} #gra .live.offline i{background:var(--zacht); animation:none}
@keyframes g-blink{50%{opacity:.25}}
#gra .how{font-size:13px; color:var(--zacht); line-height:1.5; margin:0}
#gra .how b{color:var(--inkt)}

/* Poppetje maken */
#gra .editor{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; gap:12px; padding:16px; overflow-y:auto; background:var(--roze-l)}
#gra .editor h2{margin:0; font-weight:800; font-size:24px}
#gra .editor .lead{margin:0; font-size:14px; color:var(--zacht)}
#gra .crop{position:relative; flex-shrink:0; width:min(240px,70vw); height:min(240px,70vw); max-width:100%; margin:0 auto; border-radius:50%; overflow:hidden;
  background:linear-gradient(#cfeaf7,#FDE7D6); box-shadow:0 0 0 5px #fff, 0 0 0 8px var(--oranje), 0 12px 30px rgba(58,42,46,.2); touch-action:none; cursor:grab}
#gra .crop canvas{position:absolute; inset:0; width:100%; height:100%}
#gra .crop .ph{position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-size:13px; font-weight:700; color:var(--zacht); padding:30px}
#gra .zoom{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:800; color:var(--zacht)}
#gra .zoom input{flex:1; accent-color:var(--oranje)}
#gra .pick{display:grid; grid-template-columns:1fr 1fr; gap:8px}
#gra .pick label{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 8px; border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(58,42,46,.08);
  font-weight:800; font-size:14px; cursor:pointer; color:var(--roze-dd)}
#gra .pick label svg{width:18px; height:18px}
#gra .pick input{position:absolute; width:1px; height:1px; opacity:0}
#gra .presets{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
#gra .presets button{width:54px; height:54px; border-radius:50%; padding:0; overflow:hidden; box-shadow:0 0 0 2px #fff, 0 3px 10px rgba(58,42,46,.15)}
#gra .presets button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--oranje), 0 3px 10px rgba(58,42,46,.15)}
#gra .presets canvas{width:100%; height:100%; display:block; position:static}
#gra .privacy{font-size:12px; color:var(--zacht); text-align:center; margin:0}
#gra .privacy a{color:var(--roze-d)}

/* Pauze tussen etappes */
#gra .brk{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px;
  background:rgba(58,42,46,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
#gra .brk-card{width:100%; max-width:360px; background:var(--papier); border-radius:28px; padding:18px 18px 16px; text-align:center;
  box-shadow:0 20px 50px rgba(58,42,46,.35); animation:g-rise .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes g-rise{0%{transform:translateY(40px) scale(.9); opacity:0}100%{transform:none; opacity:1}}
#gra .brk-card .lvl{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--verloop); padding:5px 12px; border-radius:999px}
#gra .brk-card canvas{display:block; margin:6px auto 0; width:170px; height:170px; position:static; animation:g-bob 1.6s ease-in-out infinite}
@keyframes g-bob{50%{transform:translateY(-6px)}}
#gra .brk-card h2{margin:4px 0 0; font-weight:800; font-size:27px; line-height:1.1}
#gra .say{margin:12px 0 0; padding:12px 14px; border-radius:18px; background:var(--roze-l); text-align:left}
#gra .say .pl{margin:0; font-weight:800; font-size:16px; line-height:1.35}
#gra .say .nl{margin:6px 0 0; font-size:14px; color:var(--roze-dd); line-height:1.35}
#gra .say .nl b{font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--oranje); padding:2px 6px; border-radius:6px; margin-right:6px; vertical-align:1px}
#gra .perks{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:10px}
#gra .perks span{font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--lijn)}
#gra .brk-card .play{width:100%; margin-top:14px; font-size:24px; padding:13px}

/* Einde */
#gra .over-head{text-align:center; margin-top:10px}
#gra .over-head small{font-weight:800; font-size:21px; color:var(--roze-dd); text-shadow:0 0 12px #fff, 0 0 4px #fff}
#gra .big{font-weight:800; font-size:70px; line-height:1; font-variant-numeric:tabular-nums; color:#fff;
  text-shadow:0 4px 0 var(--roze-fel), 0 8px 0 var(--oranje-d), 0 14px 24px rgba(58,42,46,.3)}
#gra .badge{display:inline-block; margin-top:10px; font-weight:800; font-size:13px; letter-spacing:.06em; padding:5px 12px; border-radius:999px; background:var(--kaart); box-shadow:0 3px 10px rgba(58,42,46,.12)}
#gra .badge.rec{background:var(--goud); color:#4a2f00; animation:g-pop .5s cubic-bezier(.3,1.6,.5,1)}
#gra .trio{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
#gra .trio .stat strong{font-size:22px}
#gra .review{list-style:none; margin:0; padding:0; display:grid; gap:6px}
#gra .review li{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; background:var(--roze-l); font-size:14px}
#gra .review li b{font-weight:800}
#gra .review li span{color:var(--zacht); text-align:right}
#gra .cta{display:block; text-decoration:none; color:#fff; background:var(--verloop); border-radius:22px; padding:14px 16px; box-shadow:0 5px 0 var(--roze-dd)}
#gra .cta strong{display:block; font-weight:800; font-size:19px}
#gra .cta span{font-size:13px; font-weight:700}
#gra .btnrow{display:grid; grid-template-columns:1fr 2fr; gap:8px}
@media (prefers-reduced-motion:reduce){#gra *{animation:none!important; transition:none!important}}
@media (max-height:640px){#gra .logo b{font-size:48px} #gra .big{font-size:56px}}

/* 4.1b/8: rustige kaart na een potje */
.g-link{display:inline-block;margin-top:6px;font-weight:800;color:#C85D78;text-decoration:none}
.g-delen{display:grid;gap:8px;margin:12px 0}
.g-delen-knop{width:100%}
.g-delen-avatar{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.g-delen-uitleg{font-size:14px;text-align:center;margin:0}
.g-uitdaging{margin:0 0 10px;padding:10px 14px;border-radius:14px;background:#FFF0E6;color:#3A2A2E;font-weight:800;text-align:center}
.g-lesknop{display:inline-block; margin-top:6px; text-decoration:none}
/* iPhone (app op het beginscherm): op de spelpagina past alles precies op één scherm, en dan rekent iOS de vaste
   dock vanaf de onderkant van het kleine scherm i.p.v. het hele scherm – hij stond daardoor hoger dan elders.
   Met de grote schermhoogte (lvh) is de pagina net zo hoog als de andere pagina's en staat de dock op dezelfde plek. */
html.app body.gra-body{min-height:100lvh}
/* De pagina zelf schuift in de app niet meer: precies één scherm hoog, alleen de schermen ín het speelveld scrollen.
   Anders kon je de hele pagina een stukje verschuiven terwijl de dock vast bleef staan, met lege ruimte ertussen
   (melding Naty 25-10-2026, alleen bij Holenderski Sprint). */
html.app:has(body.gra-body){height:100lvh; overflow:hidden; overscroll-behavior:none}
html.app body.gra-body{height:100lvh; overflow:hidden; overscroll-behavior:none}
html.app .g-stage{height:calc(100svh - var(--a-boven) - var(--a-kop-h) - var(--a-dock-ruimte) - 10px)}
/* Verbeterplan 3, 1.A: blok onder 'Jeszcze raz' naar de eerstvolgende les */
#gra .gk.g-blok{display:block; margin:10px 0 0; padding:14px 16px; border-radius:16px; text-decoration:none; font-weight:800; line-height:1.4;
  color:#fff; background:linear-gradient(135deg,#E8879F,#F4914A); box-shadow:0 8px 20px rgba(200,93,120,.25)}
#gra .gk.g-blok[hidden]{display:none}
/* App: het speelveld loopt door tot de onderkant van het scherm en de dock zweeft eroverheen, net als op de andere
   pagina's. Daarvoor zat er een lege strook tussen speelveld en dock (melding Naty 25-10-2026). Knoppen, schermen
   en de editor houden onderaan ruimte vrij voor de dock. */
html.app .g-stage{height:calc(100svh - var(--a-boven) - var(--a-kop-h) - 4px); min-height:440px; border-radius:28px 28px 0 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.7)}
html.app #gra .chips{padding-bottom:calc(var(--a-dock-ruimte) + 4px)}
html.app #gra .screen, html.app #gra .editor{padding-bottom:calc(var(--a-dock-ruimte) + 16px)}