/* Tienvrienden: eigen thema. Maten in scènepixels (scène 1600 × 900, zie gedeeld/spelbasis-v1.css). */
:root { --mlp-vak: var(--mlp-rekenen); --sb-hoofd: #0c8a6e; --sb-knop: #1f5d4f; --sb-titel: #ffd84a; --sb-titelrand: #1f5d4f; --sb-rand: #2d6a4f;
  --sb-lucht: linear-gradient(#bfe8ff 0%, #e6f6ff 48%, #b7e19a 49%, #8fcf6f 100%); }

.sb-stage .tv-opdracht { margin: 0; padding: 10px 34px; border-radius: 26px; background: rgba(255,255,255,.93); font-size: 44px; font-weight: 700; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.12); }

/* vrienden (getalfiguren). Met Higgsfield-tekening: plaatje + getal op de buik. Zonder: eigen tekening. */
.sb-stage .tv-vriend { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 180px; padding: 0; border: 0; background: none; font-family: var(--mlp-letter); }
.tv-vriend.klein { width: 140px; }
.tv-lijf { position: relative; display: block; width: 100%; }
.tv-lijf svg, .tv-lijf img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 8px rgba(0,0,0,.18)); }
.tv-vriend .tv-getal { position: absolute; left: 50%; top: var(--buik, 73%); transform: translate(-50%, -50%); font-size: 64px; font-weight: 700; color: #112c39; line-height: 1; }
.tv-vriend.klein .tv-getal { font-size: 50px; }
.tv-stippen { display: grid; grid-template-columns: repeat(5, 20px); gap: 6px; justify-content: center; min-height: 20px; margin-top: 6px; }
.tv-stippen i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0,0,0,.25); }
button.tv-vriend { cursor: pointer; border-radius: 30px; touch-action: none; }
button.tv-vriend[data-uitslag="fout"] { opacity: .45; }
button.tv-vriend[data-uitslag="fout"]::after { content: '✕'; position: absolute; top: 4px; right: 4px; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 4px solid var(--mlp-fout); color: var(--mlp-fout); font-weight: 700; display: grid; place-items: center; font-size: 28px; }

/* tienveld: 2 rijen van 5 */
.tv-tienveld { display: grid; grid-template-columns: repeat(5, var(--v, 62px)); gap: 10px; padding: 16px; background: #fff; border: 6px solid #36505a; border-radius: 24px; box-shadow: 0 8px 0 rgba(0,0,0,.15); }
.tv-tienveld.groot { --v: 84px; }
.tv-vak { width: var(--v, 62px); height: var(--v, 62px); border-radius: 50%; border: 4px dashed #b7c7cc; display: grid; place-items: center; font-weight: 700; font-size: 34px; color: #fff; transition: background .25s, transform .25s, border-color .25s; }
.tv-vak.vol { background: var(--k); border: 4px solid rgba(0,0,0,.18); }
.tv-vak.nieuw { transform: scale(1.06); }
.tv-vak.hint { border: 5px solid var(--mlp-warm); background: var(--mlp-warm-zacht); color: #9a6200; animation: tv-puls 1s ease-in-out 2; }
@keyframes tv-puls { 50% { transform: scale(1.12); } }

/* level 1 */
.tv-telrij { display: flex; align-items: center; justify-content: center; gap: 40px; }
.tv-plek { width: 180px; min-height: 200px; display: grid; place-items: center; border-radius: 34px; }
.tv-plek.leeg { border: 6px dashed #fff; background: rgba(255,255,255,.45); }
.tv-vraagteken { font-size: 96px; font-weight: 700; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.samen .tv-vriend { animation: tv-hup .5s ease 1 .5s; }
@keyframes tv-hup { 50% { transform: translateY(-24px); } }
.tv-keuzes { display: flex; gap: 34px; justify-content: center; }
.sb-stage .tv-getalknop { width: 170px; height: 150px; border-radius: 30px; border: 5px solid #fff; background: #fff; font: 700 84px/1 var(--mlp-letter); color: var(--mlp-tekst); cursor: pointer; box-shadow: 0 10px 0 rgba(0,0,0,.2); touch-action: manipulation; }
.tv-getalknop:active { transform: translateY(6px); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.tv-getalknop[data-uitslag="goed"] { border-color: var(--mlp-goed); background: var(--mlp-goed-zacht); }
.tv-getalknop[data-uitslag="fout"] { border-color: var(--mlp-fout); opacity: .6; }
.tv-getalknop:focus-visible { outline: 6px solid var(--mlp-warm); outline-offset: 4px; }

/* level 2 en 3: bankje */
.tv-bank { position: relative; display: flex; gap: 70px; align-items: flex-end; justify-content: center; padding: 0 70px 34px; }
.tv-bankje { position: absolute; left: 0; right: 0; bottom: 6px; height: 40px; border-radius: 16px; background: #b07a4a; box-shadow: 0 14px 0 #8a5a33; z-index: -1; }
.tv-zitplek { display: grid; place-items: end center; min-width: 180px; min-height: 200px; }
.tv-kandidaten { display: flex; gap: 50px; justify-content: center; padding: 14px 30px; border-radius: 34px; background: rgba(255,255,255,.4); }
.tv-hulpplek { display: flex; align-items: center; gap: 20px; }
.tv-hulpplek[hidden] { display: none; }
.tv-tien { font-size: 64px; font-weight: 700; color: #fff; -webkit-text-stroke: 3px #1f5d4f; paint-order: stroke fill; }
.tv-midden { display: flex; align-items: center; gap: 50px; }

/* getalkaarten (level 3) */
.sb-stage .tv-kaart { width: 150px; height: 180px; border-radius: 30px; border: 7px solid var(--k); background: #fff; display: grid; place-items: center; font: 700 96px/1 var(--mlp-letter); color: #112c39; box-shadow: 0 10px 0 color-mix(in srgb, var(--k) 45%, #fff); padding: 0; }
button.tv-kaart { cursor: pointer; }
button.tv-kaart[data-uitslag="fout"] { opacity: .45; border-style: dashed; }

/* level 4: sommen */
.tv-som { display: flex; align-items: center; gap: 26px; padding: 10px 50px; border-radius: 34px; background: rgba(255,255,255,.95); font-size: 130px; font-weight: 700; box-shadow: 0 8px 0 rgba(0,0,0,.12); }
.tv-leeg { display: inline-grid; place-items: center; min-width: 170px; height: 170px; border: 8px dashed var(--mlp-hoofd); border-radius: 30px; color: var(--mlp-hoofd); }
.tv-leeg.gevuld { border: 8px solid var(--k); color: #112c39; }
.tv-cijfers { display: grid; grid-template-columns: repeat(6, 132px); gap: 18px; justify-content: center; }
.sb-stage .tv-cijfer { width: 132px; height: 112px; font-size: 60px; }