/* Słówko dnia (/slowko/) */
.sl{max-width:420px;text-align:center}
.sl h1{font-size:26px;margin:0}
.sl-sub{color:var(--ink-soft);margin:4px 0 14px;font-size:15px}
.sl-uitleg{text-align:left;background:#FFF6F8;border-radius:14px;padding:12px 14px;margin:0 0 12px;font-size:15px}
.sl-uitleg summary{font-weight:800;cursor:pointer;text-align:center;padding:4px 0;min-height:28px}
.sl-uitleg ol{padding-left:20px;margin:8px 0}
.sl-uitleg li{margin-bottom:6px}
.sl-uitleg p{margin:8px 0 0}
.sl-legenda{list-style:none;padding:0;margin:8px 0}
.sl-legenda li{display:flex;gap:10px;align-items:center}
.sl-legenda .sl-vak{flex:none;width:38px;font-size:18px}
.sl-beurt{font-weight:800;font-size:15px;margin:0 0 8px}
.sl-bord{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;max-width:300px;margin:0 auto}
.sl-rij{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sl-vak{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:10px;background:#fff;font-size:24px;font-weight:800;text-transform:uppercase;color:#3A3236}
.sl-vak.vol{border-color:#B9AEB3}
.sl-vak.g,.sl-t.g{background:#3E8E55;border-color:#3E8E55;color:#fff}
.sl-vak.y,.sl-t.y{background:#F0C04A;border-color:#F0C04A;color:#3A3236}
.sl-vak.s,.sl-t.s{background:#7B7276;border-color:#7B7276;color:#fff}
.sl-rij.schud{animation:sl-schud .35s}
@keyframes sl-schud{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
@media (prefers-reduced-motion:reduce){.sl-rij.schud{animation:none}}
.sl-melding{min-height:22px;margin:10px 0 4px;font-weight:700;font-size:14px;color:#B3261E}
.sl-hints{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}
.sl-hints button{border:1px solid #E8879F;background:#FFF6F8;border-radius:99px;padding:8px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;color:#3A3236}
.sl-hint{background:#FFF6F8;border-radius:99px;padding:8px 14px;font-size:14px;font-weight:700}
.sl-toetsen{display:grid;gap:6px;margin:6px -8px 16px}
.sl-trij{display:flex;gap:4px;justify-content:center}
.sl-t{flex:1 1 0;min-width:0;max-width:40px;height:50px;border:0;border-radius:8px;background:#EDE6E9;color:#3A3236;font:inherit;font-weight:800;font-size:15px;text-transform:uppercase;cursor:pointer;padding:0;touch-action:manipulation}
.sl-t.breed{flex:1.6 1 0;max-width:60px;font-size:12px;text-transform:none}
.sl-einde{text-align:left;margin-top:8px}
.sl-einde[hidden]{display:none}
.sl-einde h2{font-size:17px;margin:18px 0 8px}
.sl-einde .s-knop{margin-top:8px;width:100%;box-sizing:border-box;cursor:pointer}
.sl-kop{font-weight:800;font-size:18px;margin:0 0 6px}
.sl-woord{font-size:24px;margin:0}
.sl-speel{border:0;background:#FFF6F8;border-radius:99px;width:44px;height:44px;font-size:18px;cursor:pointer;vertical-align:middle}
.sl-pl{margin:4px 0 10px}
.sl-zin{background:#FFF6F8;border-radius:12px;padding:10px 12px;margin:0 0 6px}
.sl-klok{text-align:center;margin:12px 0 0;font-size:14px}
.sl-stat{display:flex;gap:12px}
.sl-stat div{flex:1;background:#FFF6F8;border-radius:12px;padding:10px;text-align:center}
.sl-stat b{display:block;font-size:22px}
.sl-stat small{color:var(--ink-soft)}
.sl-verdeling{margin-top:10px;display:grid;gap:4px;font-size:13px}
.sl-balk{display:flex;align-items:center;gap:6px}
.sl-balk i{display:block;height:18px;min-width:18px;background:#E8879F;border-radius:6px;color:#3A3236;font-style:normal;font-weight:800;text-align:right;padding-right:5px;box-sizing:border-box}
.sl-account{margin:14px 0 0;font-size:14px}
.sl-bron{font-size:12px;color:var(--ink-soft);margin:14px 0 0}
/* Beginscherm en account */
.sr-regel{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-weight:800;margin:12px 0 0;font-size:15px}
.sr-regel small{font-weight:600;color:var(--ink-soft)}
.sr-meter{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 0 0}
.sr-stappen{display:flex;gap:4px;margin-bottom:6px}
.sr-stappen span{flex:1;text-align:center;font-size:12px;font-weight:800;padding:5px 0;border-radius:8px;background:#EDE6E9;color:#6F6369}
.sr-stappen span.gehaald{background:#FBDDE5;color:#3A3236}
.sr-stappen span.nu{background:#E8879F;color:#2A2226}
.sr-balk{height:8px;background:#EDE6E9;border-radius:99px;overflow:hidden}
.sr-balk i{display:block;height:100%;background:#E8879F}
.sr-meter p{margin:6px 0 0;font-size:13.5px}
.sr-kaart{background:#FFF6F8;border-radius:14px;padding:12px 14px;margin:12px 0 0;font-size:14px}
.sr-kaart a{font-weight:800}
.sr-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.sr-badges span{background:#FFF1D6;border-radius:99px;padding:4px 10px;font-size:13px;font-weight:800}
.sr-feest{position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none;overflow:hidden;z-index:60}
.sr-feest i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;animation:sr-val 2.4s ease-in forwards}
@keyframes sr-val{to{transform:translateY(105vh) rotate(420deg);opacity:.7}}
@media (prefers-reduced-motion:reduce){.sr-feest{display:none}}
/* Duel */
.du{max-width:560px}
.du h1{font-size:25px;margin:0 0 4px}
.du-tegen{display:flex;gap:10px;margin:12px 0}
.du-tegen div{flex:1;background:#FFF6F8;border-radius:14px;padding:12px;text-align:center}
.du-tegen b{display:block;font-size:26px}
.du-tegen small{overflow-wrap:anywhere}
.du-knoppen{display:grid;gap:8px;margin:12px 0}
.du-knoppen .s-knop,.du-knoppen button{width:100%;box-sizing:border-box;text-align:center;cursor:pointer}
.du-rij{padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.du-poziom{display:flex;gap:6px;margin:8px 0}
.du-poziom label{flex:1;margin:0}
.du-poziom input{position:absolute;opacity:0}
.du-poziom span{display:block;text-align:center;padding:10px 4px;border:2px solid var(--line);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer}
.du-poziom input:checked+span{border-color:#E8879F;background:#FFF6F8}
.du-poziom input:focus-visible+span{outline:2px solid #3A3236}
/* Live duel */
.lv{max-width:440px;text-align:center}
.lv h1{font-size:25px;margin:0 0 6px}
.lv-punt{width:14px;height:14px;border-radius:50%;background:#F4914A;display:inline-block;animation:lv-klop 1s ease-in-out infinite}
@keyframes lv-klop{50%{transform:scale(1.5);opacity:.6}}
@media (prefers-reduced-motion:reduce){.lv-punt{animation:none}}
.lv-balk{text-align:left;margin:6px 0}
.lv-balk div{display:flex;justify-content:space-between;font-size:14px;font-weight:800;gap:8px}
.lv-balk span{overflow-wrap:anywhere}
.lv-spoor{height:12px;background:#EDE6E9;border-radius:99px;overflow:hidden}
.lv-spoor i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s}
.lv-ik i{background:#E8879F}.lv-hij i{background:#5B8DEF}
.lv-klok{font-size:30px;font-weight:800;margin:8px 0}
.lv-vraag{font-size:27px;font-weight:800;margin:14px 0;min-height:40px;overflow-wrap:anywhere}
.lv-opties{display:grid;gap:8px}
.lv-opties button{min-height:56px;border:2px solid var(--line);border-radius:14px;background:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer;color:#3A3236;padding:8px;touch-action:manipulation}
.lv-opties button.goed{background:#3E8E55;border-color:#3E8E55;color:#fff}
.lv-opties button.fout{background:#B3261E;border-color:#B3261E;color:#fff}
.lv-juist{min-height:22px;font-size:14px;margin:8px 0 0}
.lv-reacties{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
.lv-reacties button,.lv-klein{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 12px;font:inherit;font-size:14px;cursor:pointer;color:#3A3236}
.lv-tabel{text-align:left;margin-top:14px}
.lv-noot{font-size:13.5px;color:var(--ink-soft)}