/* 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)}
/* Słówko 1 na 1 + mooiere kop en tegels (ook voor Słówko dnia) */
.sl{position:relative}
.sl h1,.sg h1{font-size:28px;color:#C85D78;font-weight:800}
.sl-vak{box-shadow:0 2px 6px rgba(58,50,54,.06);transition:transform .15s}
.sl-vak.vol{transform:scale(1.04)}
.nieuw .sl-vak{animation:sg-omslaan .42s ease both}
.nieuw .sl-vak:nth-child(2){animation-delay:.07s}.nieuw .sl-vak:nth-child(3){animation-delay:.14s}.nieuw .sl-vak:nth-child(4){animation-delay:.21s}.nieuw .sl-vak:nth-child(5){animation-delay:.28s}.nieuw .sl-vak:nth-child(6){animation-delay:.35s}
@keyframes sg-omslaan{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@media (prefers-reduced-motion:reduce){.nieuw .sl-vak{animation:none}}
.sl-t{box-shadow:0 1px 2px rgba(58,50,54,.12)}
.sg-cta{display:block;margin:16px 0 0;padding:14px 16px;border-radius:16px;background:linear-gradient(120deg,#FBDDE5,#FFE6D2);text-decoration:none;color:#3A3236;text-align:left}
.sg-cta b{display:block;font-size:16px}.sg-cta span{font-size:14px}
.sg{max-width:460px}
.sg-kop{text-align:center;margin-bottom:12px}
.sg-kop h1{margin:0}
.sg-nieuw{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0}
.sg-nieuw form{margin:0}
.sg-nieuw button{width:100%;height:100%;min-height:72px;border:0;border-radius:18px;padding:12px;font:inherit;font-weight:800;font-size:15px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#E8879F,#F4914A);box-shadow:0 6px 16px rgba(232,135,159,.3)}
.sg-nieuw button small{display:block;font-weight:600;font-size:12.5px;opacity:.95;margin-top:3px}
.sg-nieuw form+form button{background:#fff;color:#3A3236;border:2px solid #F3C9D3;box-shadow:none}
.sg-kopje{display:flex;align-items:center;justify-content:space-between;margin:20px 0 8px;font-size:17px;font-weight:800}
.sg-kopje span{background:#E8879F;color:#2A2226;border-radius:99px;padding:1px 9px;font-size:13px}
.sg-kaart{display:flex;gap:12px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:8px;text-decoration:none;color:#3A3236;box-shadow:0 2px 8px rgba(58,50,54,.05)}
.sg-kaart.aan{border:2px solid #E8879F;background:#FFF9FA}
.sg-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,#F4914A,#E8879F)}
.sg-midden{flex:1;min-width:0}
.sg-naam{font-weight:800;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-sub{font-size:13px;color:var(--ink-soft)}
.sg-punten{display:flex;gap:4px;margin-top:5px}
.sg-punten i{width:12px;height:12px;border-radius:4px;background:#EDE6E9;display:block}
.sg-punten i.g{background:#3E8E55}.sg-punten i.y{background:#F0C04A}.sg-punten i.s{background:#7B7276}.sg-punten i.x{background:#EDE6E9;outline:1px dashed #B9AEB3}
.sg-rechts{flex:none;text-align:right;font-size:13px}
.sg-rechts b{display:block;font-size:15px}
.sg-win{color:#2F7A47}.sg-los{color:#B3261E}
.sg-leeg{background:#FFF6F8;border-radius:16px;padding:16px;text-align:center;font-size:15px}
.sg-tegen{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;margin:6px 0}
.sg-stand{background:#FFF1D6;border-radius:99px;padding:3px 12px;font-size:14px}
.sg-status{text-align:center;padding:10px 14px;border-radius:14px;background:#FFF6F8;font-weight:800;margin:8px 0 12px;font-size:15px}
.sg-status.aan{background:linear-gradient(120deg,#FBDDE5,#FFE6D2)}
.sg-status small{display:block;font-weight:600;color:var(--ink-soft)}
.sg-bord{position:relative}
.sg-rij.zes .sl-vak{font-size:20px}
.sg-rij{display:grid;grid-template-columns:26px repeat(5,1fr) 26px;gap:5px;align-items:center;margin-bottom:5px;max-width:340px;margin-left:auto;margin-right:auto}
.sg-wie{width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;background:#EDE6E9;color:#3A3236}
.sg-wie.ik{background:#E8879F;color:#2A2226}.sg-wie.hij{background:#5B8DEF;color:#fff}
.sg-gemist{text-align:center;font-size:13px;color:var(--ink-soft);border:2px dashed var(--line);border-radius:10px;padding:13px 0}
.sg-knoppen{display:grid;gap:8px;margin:12px 0}
.sg-knoppen .s-knop,.sg-knoppen button{width:100%;box-sizing:border-box;text-align:center;cursor:pointer}
.sg-klein{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 14px;font:inherit;font-size:14px;cursor:pointer;color:#3A3236}
.sg-klein:disabled{opacity:.55;cursor:default}
.sg-onder{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.sg-onder form{margin:0}
.sg-rank{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.sg-rank.ja{background:#FFF6F8;border-radius:10px}
.sg-rank b{overflow-wrap:anywhere}.sg-rank small{display:block;color:var(--ink-soft);font-weight:500}
.sg-tabs{display:flex;gap:6px;justify-content:center;margin:10px 0}
.sg-tabs a{padding:8px 14px;border-radius:99px;font-weight:700;text-decoration:none;color:#3A3236;background:#EDE6E9;font-size:14px}
.sg-tabs a.aan{background:#E8879F;color:#2A2226}
.sg-uitleg{margin-bottom:0}
.sg-delen{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;background:#FFF6F8;border-radius:14px;padding:10px;margin:0 0 12px;font-size:14px}
.sg-delen b{width:100%;text-align:center}
.sg-delen a,.sg-delen button{text-decoration:none;display:inline-block}
/* Verdeling van de pogingen: elke balk een eigen kleur */
.sl-balk:nth-child(1) i{background:#3FA884}
.sl-balk:nth-child(2) i{background:#4FB3A9}
.sl-balk:nth-child(3) i{background:#5B8DEF}
.sl-balk:nth-child(4) i{background:#B78BE0}
.sl-balk:nth-child(5) i{background:#E8879F}
.sl-balk:nth-child(6) i{background:#F4914A}
/* Chat */
.cz-lijst{display:flex;flex-direction:column;gap:6px;max-height:55vh;min-height:180px;overflow-y:auto;padding:10px;background:#FFF6F8;border-radius:16px}
.cz-leeg{margin:auto;text-align:center;font-size:14px;color:var(--ink-soft)}
.cz-b{max-width:82%;padding:8px 12px;border-radius:16px;font-size:15px;overflow-wrap:anywhere;background:#fff;align-self:flex-start;box-shadow:0 1px 3px rgba(58,50,54,.08)}
.cz-b.ik{align-self:flex-end;background:#FBDDE5}
.cz-b small{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.cz-zglos{border:0;background:none;padding:2px 0;font:inherit;font-size:11.5px;color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.cz-form{display:flex;gap:8px;margin:8px 0}
.cz-form input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:16px}
.cz-form button{flex:none;cursor:pointer}
.sg-chat{display:inline-block;padding:9px 14px;border-radius:99px;background:#fff;border:1px solid #F3C9D3;text-decoration:none;color:#3A3236;font-weight:700;font-size:14px}
.sg-chat b{background:#B3261E;color:#fff;border-radius:99px;padding:0 7px;margin-left:4px;font-size:12px}
.sg-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:#FFF1D6;border-radius:18px;padding:10px 14px;margin:8px 0 4px;text-align:center}
.sg-score-kant{min-width:0}.sg-score-kant small{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-score-kant b{display:block;font-size:34px;line-height:1.1}.sg-score-kant span{font-size:13px;color:var(--ink-soft)}
.sg-score-mid{font-size:28px;font-weight:800}.sg-score-mid small{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.sg-score-noot{text-align:center;font-size:13px;color:var(--ink-soft);margin:0 0 8px}
.sg-sprint{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:12px 0}
.sg-sprint small{display:block;font-size:13px;color:var(--ink-soft)}.sg-sprint form{margin:0;flex:none}
.sg-wynik{font-size:20px!important;white-space:nowrap}.sg-wynik-p{display:block;color:var(--ink-soft);white-space:nowrap}
.sg-nieuw button{min-height:60px}
.sg-nieuw-link{display:block;text-align:center;padding:12px;border-radius:18px;background:#fff;border:2px solid #F3C9D3;color:#3A3236;font-weight:800;font-size:15px;text-decoration:none}
.sg-nieuw-link small{display:block;font-weight:600;font-size:12.5px;margin-top:3px}
.sg-tabs-spel{display:grid;grid-template-columns:1fr 1fr}
.sg-tabs-spel a{text-align:center}
.sg-rank-ty{font-size:13px;font-weight:800;color:var(--ink-soft);padding:0 8px}
.sg-rank form{margin:0}
a.sg-klein{text-decoration:none;display:inline-block}
.lv-seintje{margin:14px 0;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:18px;text-align:left}
.lv-seintje p{margin:0 0 8px}.lv-seintje small{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:6px;font-weight:500}
.lv-seintje form{margin:8px 0 0}
.sl-t.sl-ok{flex:none;width:calc(100% - 16px);max-width:none;height:58px;margin:6px 8px 0;border-radius:99px;background:#2E8B4A;color:#fff;font-size:19px;letter-spacing:.01em;text-transform:none;box-shadow:0 8px 20px rgba(46,139,74,.35)}
.sl-t.sl-ok:hover{background:#26763E}
.sl-t.sl-ok:active{transform:scale(.98)}