/* SerSeif – سر السيف · SeifAcademy huisstijl (alleen donker) */
/* Ruimte vasthouden tot het spel met JS is opgebouwd (anders schuift de footer: CLS 0,13–0,18 op mobiel, 29-10-2026). */
.ss-root[data-ss="game"]{min-height:min(820px,88vh)}
.ss-root{
	--ss-obs:#080808;--ss-dark:#252525;--ss-dark2:#161616;--ss-gold:#D4A52E;--ss-gold2:#FFD76A;--ss-bronze:#80551B;--ss-ivory:#F7F1E2;
	--ss-muted:rgba(247,241,226,.66);--ss-line:rgba(212,165,46,.22);--ss-r:18px;
	--ss-ar:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;--ss-lat:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	position:relative;box-sizing:border-box;max-width:1120px;margin:0 auto;padding:clamp(14px,3vw,28px);
	color:var(--ss-ivory);font-family:var(--ss-ar);font-size:16px;line-height:1.6;
	background:radial-gradient(120% 80% at 50% -10%,rgba(212,165,46,.16),transparent 60%),linear-gradient(180deg,#0d0d0d,var(--ss-obs));
	border:1px solid var(--ss-line);border-radius:28px;overflow:hidden;isolation:isolate;
	-webkit-tap-highlight-color:transparent;
}
.ss-root *,.ss-root *::before,.ss-root *::after{box-sizing:border-box}
.ss-root [lang="nl"],.ss-root [lang="en"],.ss-root .ss-lat{font-family:var(--ss-lat)}
/* Thema-regel [lang=nl|en]{text-align:left} niet laten doorwerken: uitlijning bepaalt het onderdeel zelf. */
.ss-root [lang="nl"],.ss-root [lang="en"]{text-align:inherit}
/* Basis voor knoppen: neutraliseert de reset van het thema (rand, roze kleur, padding, nowrap).
   Lage specificiteit (0,1,0) zodat de onderdelen hieronder winnen. */
.ss-root :where(button,[type="button"]){font:inherit;color:inherit;cursor:pointer;background:none;border:0;border-radius:0;padding:0;margin:0;white-space:normal;text-transform:none;line-height:inherit;letter-spacing:normal;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.ss-root :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ss-gold2);outline-offset:3px;box-shadow:none}
.ss-root :is(a,button,input,select,textarea,summary):focus:not(:focus-visible){outline:none;box-shadow:none}
.ss-root a{text-decoration:none}
.ss-root img{max-width:100%;height:auto}
.ss-root h2,.ss-root h3{color:var(--ss-ivory);font-family:var(--ss-ar);line-height:1.35;margin:0 0 .5em}
.ss-root [hidden]{display:none!important}
.ss-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ss-muted{color:var(--ss-muted)}

/* Achtergrondlichtjes */
.ss-root::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
	background-image:radial-gradient(2px 2px at 12% 18%,var(--ss-gold2) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 12%,var(--ss-gold) 50%,transparent 51%),radial-gradient(2px 2px at 88% 64%,var(--ss-gold2) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 24% 82%,var(--ss-gold) 50%,transparent 51%),radial-gradient(1px 1px at 52% 40%,var(--ss-ivory) 50%,transparent 51%);
	animation:ss-twinkle 6s ease-in-out infinite alternate}
@keyframes ss-twinkle{from{opacity:.25}to{opacity:.7}}

/* Merk */
.ss-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800}
.ss-brand__mark{width:34px;height:34px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--ss-gold2),var(--ss-gold) 55%,var(--ss-bronze));box-shadow:0 0 18px rgba(212,165,46,.45);position:relative}
.ss-brand__mark::after{content:"";position:absolute;inset:7px 15px;background:var(--ss-obs);border-radius:2px;transform:rotate(35deg);box-shadow:0 -9px 0 -1px var(--ss-obs)}
.ss-brand__ar{font-size:1.25rem;background:linear-gradient(90deg,var(--ss-gold2),var(--ss-gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-brand__lat{font-family:var(--ss-lat);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-muted);font-weight:600}

/* Knoppen */
.ss-root .ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:999px;border:1px solid var(--ss-gold);background:transparent;color:var(--ss-ivory);font-weight:700;font-size:1rem;line-height:1.3;text-align:center;text-decoration:none;white-space:normal;transition:transform .15s,box-shadow .2s,background .2s}
.ss-root .ss-btn:is(:hover,:focus,:visited){background-color:transparent;color:var(--ss-ivory);text-decoration:none}
.ss-root .ss-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,165,46,.25)}
.ss-root .ss-btn--gold,.ss-root .ss-btn--gold:is(:hover,:focus,:visited){background:linear-gradient(180deg,var(--ss-gold2),var(--ss-gold));color:var(--ss-obs);border-color:transparent}
.ss-root .ss-btn--ghost{border-color:var(--ss-line)}
.ss-root .ss-btn--big{min-height:56px;font-size:1.15rem;padding:12px 34px}
.ss-root .ss-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.ss-root .ss-icon-btn,.ss-root .ss-icon-btn:is(:hover,:focus){width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--ss-line);background:rgba(37,37,37,.6);color:var(--ss-ivory);padding:0;transition:background .2s,border-color .2s}
.ss-root .ss-icon-btn:hover{border-color:var(--ss-gold)}
.ss-root .ss-icon-btn[aria-pressed="true"],.ss-root .ss-icon-btn[aria-pressed="true"]:is(:hover,:focus){border-color:var(--ss-gold);background:rgba(212,165,46,.14)}
.ss-root .ss-icon-btn:focus-visible,.ss-root .ss-btn:focus-visible{border-radius:999px}
.ss-icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ss-icon-btn[aria-pressed="false"] svg{opacity:.55}

/* Kop */
.ss-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(12px,2vw,20px);flex-wrap:wrap}
.ss-top{position:relative}
.ss-tools{display:flex;gap:8px}
.ss-settings{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:50;width:min(340px,100%);background:linear-gradient(180deg,#1d1d1d,#111);border:1px solid var(--ss-gold);border-radius:18px;padding:16px;box-shadow:0 18px 50px rgba(0,0,0,.6);animation:ss-bub .2s ease-out}
.ss-settings h3{font-size:1rem;margin:0 0 10px}
.ss-vol{padding:8px 0;border-bottom:1px solid var(--ss-line)}
.ss-vol:last-of-type{border-bottom:0}
.ss-vol__name{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:700;cursor:pointer}
.ss-vol__name input{width:22px;height:22px;accent-color:var(--ss-gold);margin:0}
.ss-vol__icon svg{width:18px;height:18px;fill:none;stroke:var(--ss-gold2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ss-vol__ctl{display:flex;align-items:center;gap:10px}
.ss-vol__ctl input[type=range]{flex:1;min-width:0;height:44px;accent-color:var(--ss-gold);cursor:pointer;background:transparent}
.ss-vol__val{min-width:46px;text-align:end;font-family:var(--ss-lat);font-weight:800;color:var(--ss-gold2)}
.ss-settings__close{width:100%;margin-top:10px}

/* Laden / poort */
.ss-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 10px;color:var(--ss-muted)}
.ss-spinner{width:42px;height:42px;border-radius:50%;border:3px solid var(--ss-line);border-top-color:var(--ss-gold);animation:ss-spin 1s linear infinite}
@keyframes ss-spin{to{transform:rotate(360deg)}}
.ss-gate{text-align:center;padding:clamp(14px,4vw,40px) 6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ss-gate__img{width:min(240px,60vw);filter:drop-shadow(0 0 22px rgba(212,165,46,.35));animation:ss-float 5s ease-in-out infinite}
.ss-gate__title{font-size:clamp(1.4rem,4vw,2rem)}
.ss-gate p{max-width:520px;margin:0;color:var(--ss-muted)}
.ss-gate__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px!important}
.ss-empty{text-align:center;color:var(--ss-muted);padding:30px}
@keyframes ss-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Opstartscherm */
.ss-setup{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
@media (min-width:860px){.ss-setup{grid-template-columns:300px minmax(0,1fr)}}
.ss-hero{position:relative;display:flex;flex-direction:column;align-items:center}
.ss-hero__img{width:min(260px,58vw);filter:drop-shadow(0 0 2px var(--ss-gold)) drop-shadow(0 12px 30px rgba(212,165,46,.35));animation:ss-float 5s ease-in-out infinite}
.ss-hero__ring{position:absolute;inset:auto 0 6% 0;margin:auto;width:78%;aspect-ratio:3/1;border-radius:50%;border:2px solid rgba(212,165,46,.45);box-shadow:0 0 30px rgba(212,165,46,.3);transform:perspective(300px) rotateX(70deg);z-index:-1;animation:ss-ring 4s ease-in-out infinite}
@keyframes ss-ring{50%{box-shadow:0 0 50px rgba(255,215,106,.5)}}
.ss-panel{background:linear-gradient(180deg,rgba(37,37,37,.75),rgba(22,22,22,.85));border:1px solid var(--ss-line);border-radius:var(--ss-r);padding:clamp(16px,3vw,26px)}
.ss-panel h2{font-size:clamp(1.3rem,3.2vw,1.8rem)}
.ss-lead{color:var(--ss-muted);margin:0 0 16px}
.ss-field{border:0;margin:0 0 18px;padding:0}
.ss-field legend{font-weight:800;margin-bottom:8px;padding:0}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px}
.ss-chip{position:relative}
.ss-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ss-chip>span{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:48px;padding:6px 16px;border-radius:14px;border:1px solid var(--ss-line);background:rgba(8,8,8,.6);font-weight:800;font-family:var(--ss-lat);transition:all .15s}
.ss-chip small{display:block;font-weight:600;font-size:.875rem;color:var(--ss-muted);font-family:var(--ss-ar)}
.ss-chip>span{flex-direction:column;line-height:1.2;text-align:center}
.ss-chip input:checked+span{background:linear-gradient(180deg,var(--ss-gold2),var(--ss-gold));color:var(--ss-obs);border-color:transparent;box-shadow:0 6px 20px rgba(212,165,46,.3)}
.ss-chip input:checked+span small{color:rgba(8,8,8,.7)}
.ss-chip input:focus-visible+span{outline:3px solid var(--ss-gold2);outline-offset:2px}
.ss-chip input:disabled+span{opacity:.5;border-style:dashed;cursor:not-allowed}
.ss-chip input:disabled+span>bdi{text-decoration:line-through}
.ss-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.ss-mode{position:relative}
.ss-mode input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ss-mode__box{display:block;height:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--ss-line);background:rgba(8,8,8,.55);transition:all .15s}
.ss-mode__box strong{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.ss-mode__box em{font-style:normal;display:block;color:var(--ss-muted);font-size:.88rem;margin-top:4px}
.ss-mode input:checked+.ss-mode__box{border-color:var(--ss-gold);background:rgba(212,165,46,.1);box-shadow:inset 0 0 0 1px var(--ss-gold)}
.ss-mode input:focus-visible+.ss-mode__box{outline:3px solid var(--ss-gold2);outline-offset:2px}
.ss-note{font-size:.88rem;color:var(--ss-muted);min-height:1.4em;margin:6px 0 0}
.ss-start{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.ss-howto{margin-top:16px;border-top:1px solid var(--ss-line);padding-top:12px}
.ss-howto summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}
.ss-howto ul{margin:6px 0 0;padding-inline-start:20px;color:var(--ss-muted)}
.ss-howto li{margin:4px 0}
.ss-legend{display:inline-flex;gap:6px;vertical-align:middle}
.ss-legend i{display:inline-block;width:20px;height:20px;border-radius:5px;vertical-align:middle}

/* Spel */
.ss-game{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.ss-game{grid-template-columns:minmax(0,1fr) 330px;align-items:start}}
.ss-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.ss-side{display:flex;flex-direction:column;gap:14px}
.ss-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ss-stat{background:rgba(37,37,37,.7);border:1px solid var(--ss-line);border-radius:14px;padding:8px 10px;text-align:center;min-height:64px;display:flex;flex-direction:column;justify-content:center}
.ss-stat b{font-family:var(--ss-lat);font-size:1.35rem;line-height:1.1;color:var(--ss-gold2)}
.ss-stat>span{font-size:.875rem;color:var(--ss-muted);line-height:1.3}
.ss-stat--mode b{font-family:var(--ss-ar);font-size:1rem}
.ss-timer{position:relative;display:grid;place-items:center;width:62px;height:62px;margin:0 auto}
.ss-timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ss-timer circle{fill:none;stroke-width:5}
.ss-timer .bg{stroke:rgba(247,241,226,.12)}
.ss-timer .fg{stroke:var(--ss-gold);stroke-linecap:round;transition:stroke-dashoffset .25s linear,stroke .3s}
.ss-timer b{font-family:var(--ss-lat);font-size:1.2rem}
.ss-timer.is-low .fg{stroke:#e0603a}
.ss-timer.is-low{animation:ss-pulse .8s ease-in-out infinite}
.ss-timer.is-off b{font-size:1.4rem;color:var(--ss-muted)}
@keyframes ss-pulse{50%{transform:scale(1.08)}}

/* Coach */
.ss-coach{display:flex;align-items:center;gap:12px;min-height:96px}
.ss-coach__badge{flex:none;width:88px;height:88px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--ss-gold2),var(--ss-bronze),var(--ss-gold),var(--ss-gold2));box-shadow:0 0 22px rgba(212,165,46,.35);position:relative}
.ss-coach__badge img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2b2b2b,#111);display:block}
.ss-coach__badge.is-pop{animation:ss-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes ss-pop{0%{transform:scale(.86)}100%{transform:scale(1)}}
.ss-bubble{position:relative;flex:1;min-width:0;background:var(--ss-ivory);color:var(--ss-obs);border-radius:16px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:opacity .2s,transform .2s}
.ss-bubble::before{content:"";position:absolute;inset-inline-start:-8px;top:50%;margin-top:-8px;border:8px solid transparent;border-inline-end-color:var(--ss-ivory);border-inline-start:0}
.ss-bubble__nl{display:block;font-family:var(--ss-lat);font-weight:800;font-size:1.05rem;direction:ltr;text-align:start}
[dir="rtl"] .ss-bubble__nl{text-align:end}
.ss-bubble__ar{display:block;font-size:.9rem;color:#4a3a14}
.ss-bubble.is-in{animation:ss-bub .3s ease-out}
@keyframes ss-bub{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Bord: venster van 4 zichtbare pogingen; oudere rijen schuiven naar boven weg */
.ss-board{--gap:6px;padding:4px 0;width:100%;overflow:hidden;position:relative}
.ss-board__in{display:flex;flex-direction:column;gap:var(--gap);align-items:center;width:100%;transition:transform .5s cubic-bezier(.25,.8,.3,1)}
.ss-row.is-off{opacity:0;pointer-events:none}
.ss-row{transition:opacity .35s ease}
.ss-row{display:grid;grid-template-columns:repeat(var(--len),minmax(0,1fr));gap:var(--gap);direction:ltr;width:min(100%,calc(var(--len) * 66px))}
.ss-tile{width:100%;aspect-ratio:1;height:auto;display:grid;place-items:center;border-radius:12px;border:2px solid rgba(247,241,226,.14);background:rgba(37,37,37,.55);font-family:var(--ss-lat);font-weight:800;font-size:clamp(1rem,calc(min(100vw,640px) / var(--len) * .36),1.9rem);text-transform:uppercase;color:var(--ss-ivory);position:relative;transform-style:preserve-3d;user-select:none}
@media (max-width:600px){.ss-tile{border-radius:9px}}
.ss-tile.is-typed{border-color:var(--ss-gold);animation:ss-type .12s ease-out}
.ss-tile.is-given{border-color:var(--ss-gold);border-style:dashed;color:var(--ss-gold2)}
.ss-tile.is-hint{color:rgba(247,241,226,.6);border-style:dashed}
.ss-tile.is-active{box-shadow:inset 0 0 0 1px rgba(212,165,46,.35)}
.ss-tile.is-cursor{border-color:rgba(255,215,106,.7)}
.ss-tile.is-cursor::after{content:"";position:absolute;bottom:14%;left:30%;right:30%;height:3px;border-radius:2px;background:var(--ss-gold2);animation:ss-blink 1s steps(2,start) infinite}
@keyframes ss-blink{to{visibility:hidden}}
@keyframes ss-type{from{transform:scale(1.12)}to{transform:scale(1)}}
.ss-tile.s2{background:linear-gradient(180deg,var(--ss-gold2),var(--ss-gold));color:var(--ss-obs);border-color:transparent;box-shadow:0 0 16px rgba(212,165,46,.4)}
.ss-tile.s1{background:rgba(37,37,37,.9);border-color:transparent;color:var(--ss-ivory)}
.ss-tile.s1::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b07a2c,var(--ss-bronze));z-index:-1}
.ss-tile.s0{background:#1a1a1a;border-color:transparent;color:rgba(247,241,226,.58)}
.ss-tile.is-timeout{background:repeating-linear-gradient(45deg,#1a1a1a 0 6px,#222 6px 12px);border-color:transparent}
.ss-tile.is-flip{animation:ss-flip .5s ease both}
@keyframes ss-flip{0%{transform:rotateX(0)}49%{transform:rotateX(90deg)}51%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
.ss-row.is-shake{animation:ss-shake .4s}
@keyframes ss-shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.ss-row.is-win .ss-tile{animation:ss-hop .5s ease both}
@keyframes ss-hop{40%{transform:translateY(-12px)}}

/* Toetsenbord */
.ss-kb{display:flex;flex-direction:column;gap:6px;direction:ltr;user-select:none;max-width:560px;margin:0 auto;width:100%}
.ss-kb__row{display:flex;gap:5px;justify-content:center}
.ss-root .ss-key,.ss-root .ss-key:is(:hover,:focus){flex:1 1 0;min-width:0;max-width:52px;min-height:50px;padding:0;border-radius:10px;border:0;background:#2c2c2c;color:var(--ss-ivory);font-family:var(--ss-lat);font-weight:700;font-size:1.05rem;line-height:1;text-align:center;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 0 #111;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .06s}
@media (hover:hover){.ss-root .ss-key:hover{background:#383838}}
.ss-root .ss-key:active{transform:translateY(2px);box-shadow:none}
.ss-root .ss-key--wide{max-width:84px;flex:1.6 1 0;font-size:.875rem}
.ss-root .ss-key--enter,.ss-root .ss-key--enter:is(:hover,:focus){background:linear-gradient(180deg,var(--ss-gold2),var(--ss-gold));color:var(--ss-obs)}
.ss-root .ss-key svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ss-root .ss-key.s2,.ss-root .ss-key.s2:is(:hover,:focus){background:var(--ss-gold);color:var(--ss-obs)}
.ss-root .ss-key.s1,.ss-root .ss-key.s1:is(:hover,:focus){background:var(--ss-bronze);color:var(--ss-ivory)}
.ss-root .ss-key.s0,.ss-root .ss-key.s0:is(:hover,:focus){background:#151515;color:rgba(247,241,226,.6)}
.ss-root .ss-key[disabled]{opacity:.5;cursor:default}

/* Fasepaneel (trekken / volgende) */
.ss-phase{border-radius:var(--ss-r);border:1px solid var(--ss-gold);background:linear-gradient(180deg,rgba(212,165,46,.12),rgba(8,8,8,.6));padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;animation:ss-bub .3s ease-out}
.ss-phase[hidden]{display:none}
.ss-reveal{display:flex;flex-direction:column;gap:2px;align-items:center}
.ss-reveal__word{font-family:var(--ss-lat);font-weight:800;font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:.06em;color:var(--ss-gold2);direction:ltr}
.ss-reveal__ar{font-size:1.1rem}
.ss-reveal__ex{font-size:.9rem;color:var(--ss-muted)}
.ss-reveal__ex [lang="nl"]{display:block;direction:ltr}
.ss-phase__draw{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;font-weight:700}
.ss-phase__draw>.ss-ball{position:relative;--b:46px;animation:ss-drop .6s cubic-bezier(.3,1.4,.5,1) both}
.ss-points{font-family:var(--ss-lat);font-weight:800;color:var(--ss-gold2);font-size:1.4rem;animation:ss-up 1s ease-out}
@keyframes ss-up{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}

/* Ballenbak */
.ss-box{background:rgba(22,22,22,.85);border:1px solid var(--ss-line);border-radius:var(--ss-r);padding:14px}
.ss-box h3{font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px}
.ss-box h3 small{font-weight:600;color:var(--ss-muted);font-size:.875rem}
.ss-pit{position:relative;width:100%;max-width:280px;aspect-ratio:1;margin:0 auto}
.ss-pit__glass{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.14),rgba(255,255,255,.02) 45%,rgba(0,0,0,.4) 75%);border:3px solid rgba(212,165,46,.6);box-shadow:inset 0 -10px 30px rgba(0,0,0,.6),0 0 30px rgba(212,165,46,.18);overflow:hidden}
.ss-pit__base{position:absolute;bottom:-1%;left:30%;right:30%;height:12%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--ss-gold),var(--ss-bronze));box-shadow:0 6px 16px rgba(0,0,0,.6)}
.ss-ball{position:absolute;width:var(--b,30px);height:var(--b,30px);border-radius:50%;display:grid;place-items:center;font-family:var(--ss-lat);font-weight:800;font-size:calc(var(--b,30px)*.42);color:var(--ss-obs);background:radial-gradient(circle at 35% 30%,#fff,var(--ss-ivory) 40%,#c9c0a8);box-shadow:inset -3px -4px 6px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.4);animation:ss-bob var(--d,3s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.ss-ball--gold{background:radial-gradient(circle at 35% 30%,#fff3c4,var(--ss-gold2) 35%,var(--ss-gold) 70%,var(--ss-bronze))}
.ss-ball--red{background:radial-gradient(circle at 35% 30%,#ff9d8a,#d9442b 45%,#7a1d10);color:#fff}
@keyframes ss-bob{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--x,6px),var(--y,-8px)) rotate(var(--r,20deg))}}
.ss-pit.is-spin .ss-ball{animation:ss-churn .5s linear infinite}
@keyframes ss-churn{0%{transform:translate(0,0)}25%{transform:translate(10px,-14px)}50%{transform:translate(-8px,-6px)}75%{transform:translate(6px,10px)}100%{transform:translate(0,0)}}
.ss-drawn{display:flex;justify-content:center;align-items:center;gap:10px;min-height:76px}
.ss-drawn .ss-ball{position:relative;--b:64px;animation:ss-drop .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes ss-drop{from{transform:translateY(-80px) scale(.4) rotate(-180deg);opacity:0}to{transform:none;opacity:1}}

/* Kaart */
.ss-card{display:grid;grid-template-columns:repeat(var(--size,5),1fr);gap:5px;direction:ltr;max-width:300px;margin:0 auto}
.ss-cell{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font-family:var(--ss-lat);font-weight:800;font-size:1rem;background:#1d1d1d;border:1px solid rgba(247,241,226,.1);position:relative;color:var(--ss-ivory)}
.ss-cell.is-on{background:radial-gradient(circle at 35% 30%,var(--ss-gold2),var(--ss-gold) 60%,#b07a2c);color:var(--ss-obs);border-color:transparent}
.ss-cell.is-new{animation:ss-stamp .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes ss-stamp{0%{transform:scale(1.7);opacity:0}100%{transform:none;opacity:1}}
.ss-cell.is-line{box-shadow:0 0 0 2px var(--ss-gold2),0 0 18px rgba(255,215,106,.7);animation:ss-glow 1.2s ease-in-out 3}
@keyframes ss-glow{50%{box-shadow:0 0 0 2px #fff,0 0 28px rgba(255,215,106,1)}}
.ss-banner{position:absolute;inset:0;display:grid;place-items:center;z-index:30;pointer-events:none}
.ss-banner span{font-size:clamp(2rem,8vw,4rem);font-weight:900;background:linear-gradient(90deg,var(--ss-gold2),#fff,var(--ss-gold));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 20px rgba(212,165,46,.7));animation:ss-banner 1.8s ease both}
@keyframes ss-banner{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.1);opacity:1}75%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* Confetti */
.ss-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:25}
.ss-confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:ss-fall var(--t,2.4s) linear forwards}
@keyframes ss-fall{to{transform:translate(var(--dx,0),110vh) rotate(var(--rot,540deg))}}

/* Resultaat */
.ss-result{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:860px){.ss-result{grid-template-columns:280px minmax(0,1fr)}}
.ss-score{font-family:var(--ss-lat);font-weight:900;font-size:clamp(2.6rem,9vw,4.2rem);line-height:1;color:var(--ss-gold2);text-shadow:0 0 30px rgba(212,165,46,.5)}
.ss-words{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.ss-words li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:rgba(8,8,8,.5);border:1px solid var(--ss-line);border-radius:12px;padding:8px 12px}
.ss-words .w{font-family:var(--ss-lat);font-weight:800;direction:ltr}
.ss-words .ok{color:var(--ss-gold2)}
.ss-words .no{color:rgba(247,241,226,.62)}
.ss-words .p{font-family:var(--ss-lat);font-weight:800}
.ss-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* Melding */
/* Altijd in beeld: vast bovenaan onder de kop van de site (JS zet top). */
.ss-toast{position:fixed;left:50%;top:76px;z-index:9990;transform:translate(-50%,-12px);width:max-content;max-width:min(560px,calc(100vw - 32px));background:var(--ss-ivory);color:var(--ss-obs);border-radius:12px;padding:10px 16px;font-weight:700;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s .2s}
.ss-toast.is-show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.ss-toast.is-err{background:#f2d3c8}

/* Scorebord */
.ss-tabs{display:inline-flex;background:rgba(37,37,37,.8);border:1px solid var(--ss-line);border-radius:999px;padding:4px;gap:4px;margin-bottom:14px}
.ss-root .ss-tab,.ss-root .ss-tab:is(:hover,:focus){min-height:44px;border:0;background:transparent;border-radius:999px;padding:6px 18px;font-weight:800;color:var(--ss-muted)}
.ss-root .ss-tab:hover{color:var(--ss-ivory)}
.ss-root .ss-tab[aria-selected="true"],.ss-root .ss-tab[aria-selected="true"]:is(:hover,:focus){background:linear-gradient(180deg,var(--ss-gold2),var(--ss-gold));color:var(--ss-obs)}
.ss-root .ss-tab:focus-visible{border-radius:999px}
.ss-lb{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ss-lb li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;background:rgba(22,22,22,.85);border:1px solid var(--ss-line);border-radius:14px;padding:10px 14px;animation:ss-bub .3s ease-out both}
.ss-lb li.is-me{border-color:var(--ss-gold);background:rgba(212,165,46,.1)}
.ss-rank{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--ss-lat);font-weight:900;background:#1d1d1d;border:1px solid var(--ss-line)}
.ss-lb li:nth-child(1) .ss-rank.r1,.ss-rank.r1{background:radial-gradient(circle at 35% 30%,var(--ss-gold2),var(--ss-gold));color:var(--ss-obs);border:0}
.ss-rank.r2{background:radial-gradient(circle at 35% 30%,#f1f1f1,#9a9a9a);color:var(--ss-obs);border:0}
.ss-rank.r3{background:radial-gradient(circle at 35% 30%,#e3a86a,var(--ss-bronze));color:var(--ss-obs);border:0}
.ss-lb__name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-lb__meta{display:block;font-size:.875rem;color:var(--ss-muted);font-weight:600}
.ss-lb__pts{font-family:var(--ss-lat);font-weight:900;color:var(--ss-gold2);font-size:1.2rem;text-align:end}
.ss-lb__pts small{display:block;font-family:var(--ss-ar);font-size:.875rem;color:var(--ss-muted);font-weight:600}
.ss-pager{display:flex;justify-content:center;gap:8px;margin-top:14px;align-items:center}
.ss-mine{margin-top:12px;color:var(--ss-muted);text-align:center}

/* Profiel */
.ss-pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:10px 0 18px}
.ss-pcard{background:rgba(22,22,22,.85);border:1px solid var(--ss-line);border-radius:14px;padding:12px;text-align:center}
.ss-pcard b{display:block;font-family:var(--ss-lat);font-size:1.5rem;color:var(--ss-gold2);text-align:center}
.ss-pcard span{font-size:.875rem;color:var(--ss-muted)}
.ss-root .ss-table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0;background:none}
.ss-root .ss-table :is(th,td),.ss-root .ss-table tbody tr:is(:nth-child(odd),:hover)>:is(td,th){padding:8px 8px;border:0;border-bottom:1px solid var(--ss-line);text-align:right;vertical-align:middle;background:none;line-height:1.4}
.ss-root .ss-table th{color:var(--ss-muted);font-weight:700;white-space:nowrap}
.ss-root .ss-table td.n{font-family:var(--ss-lat)}
.ss-root .ss-table td.d{white-space:nowrap}
.ss-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ss-switch{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.ss-switch input{width:22px;height:22px;accent-color:var(--ss-gold);flex:none}

/* Zij-kolom meeschuiven op brede schermen (bak en kaart blijven in beeld bij trekken) */
@media (min-width:960px){.ss-side{position:sticky;top:96px}}
/* Lage schermen (liggende tablet, kleine laptop): compacter zodat bord + toetsenbord passen */
@media (max-height:880px){
	.ss-coach{min-height:70px}
	.ss-coach__badge{width:64px;height:64px}
	.ss-bubble{padding:8px 12px}
	.ss-main{gap:10px}
	.ss-board{padding:4px 0}
	.ss-row{width:min(100%,calc(var(--len) * 60px))}
}
/* Opstartscherm en resultaat: mascotte kleiner op smalle schermen, zodat keuzes direct zichtbaar zijn */
@media (max-width:859px){
	.ss-setup .ss-hero__img,.ss-result .ss-hero__img{width:clamp(110px,30vw,150px)}
	.ss-setup .ss-hero__ring,.ss-result .ss-hero__ring{width:60%}
	.ss-setup,.ss-result{gap:10px}
}
/* Mobiel */
@media (max-width:600px){
	.ss-root{border-radius:20px;padding:12px 8px}
	.ss-coach{min-height:60px;gap:10px}
	.ss-coach__badge{width:56px;height:56px;padding:2px}
	.ss-bubble{padding:7px 12px;border-radius:14px}
	.ss-bubble__nl{font-size:.98rem}
	.ss-bubble__ar{font-size:.875rem;line-height:1.4}
	.ss-main{gap:10px}
	.ss-hud{gap:6px}
	.ss-stat{min-height:52px;padding:4px 6px}
	.ss-stat b{font-size:1.2rem}
	.ss-timer{width:50px;height:50px}
	.ss-board{--gap:5px;padding:2px 0}
	.ss-row{width:min(100%,calc(var(--len) * 54px))}
	.ss-kb{gap:6px;margin-inline:-4px;width:calc(100% + 8px)}
	.ss-kb__row{gap:3px}
	.ss-root .ss-key,.ss-root .ss-key:is(:hover,:focus){min-height:50px;font-size:1.05rem;border-radius:8px}
	.ss-root .ss-key--wide{flex:1.35 1 0}
	.ss-lb li{grid-template-columns:40px minmax(0,1fr) auto;padding:8px 10px}
	.ss-root::before{animation:none}
	.ss-phase{padding:12px 10px}
}
/* Zwevende knoppen van de site (WhatsApp) niet over het toetsenbord van het spel */
body.ss-has-game .sa-wa-float{display:none!important}

/* Kleine extra's */
.ss-more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:800}
.ss-root a.ss-more,.ss-root a.ss-more:visited{color:var(--ss-gold2)}
.ss-root a.ss-more:hover{color:var(--ss-ivory)}
.ss-lb li.ss-lb__msg{display:block;text-align:center;color:var(--ss-muted)}
.ss-pager>span{font-family:var(--ss-lat);min-width:56px;text-align:center}

/* Uitleg- en FAQ-blokken ([serseif_rules], [serseif_faq]) */
.ss-doc{--ss-gold:#D4A52E;--ss-gold2:#FFD76A;--ss-bronze:#80551B;--ss-ivory:#F7F1E2;--ss-obs:#080808;--ss-line:rgba(212,165,46,.22);--ss-muted:rgba(247,241,226,.72);--ss-lat:'Inter',system-ui,sans-serif;
	color:var(--ss-ivory);font-family:'Cairo',system-ui,sans-serif;line-height:1.75;font-size:1.02rem;max-width:860px;margin:0 auto}
.ss-doc section{margin:0 0 28px;padding:20px clamp(14px,3vw,24px);background:linear-gradient(180deg,rgba(37,37,37,.6),rgba(18,18,18,.8));border:1px solid var(--ss-line);border-radius:18px;scroll-margin-top:96px}
.ss-doc h2{font-size:clamp(1.25rem,3vw,1.6rem);margin:0 0 .6em;color:var(--ss-gold2);line-height:1.35}
.ss-doc h3{font-size:1.1rem;margin:1.1em 0 .5em;color:var(--ss-ivory)}
.ss-doc p{margin:0 0 .8em}
.ss-doc ul{margin:0 0 .8em;padding-inline-start:1.3em}
.ss-doc li{margin:.3em 0}
.ss-doc strong{color:var(--ss-gold2)}
.ss-doc .ss-muted{color:var(--ss-muted);font-size:.95rem}
.ss-doc bdi{font-family:var(--ss-lat)}
.ss-doc .ss-toc{margin:0 0 24px;padding:16px 20px;border:1px solid var(--ss-gold);border-radius:18px;background:rgba(212,165,46,.07)}
.ss-doc .ss-toc ol{margin:.5em 0 0;padding-inline-start:1.4em;columns:2 220px;column-gap:24px}
.ss-doc .ss-toc a{display:inline-block;min-height:32px;padding:4px 0;color:var(--ss-ivory);text-decoration:none}
.ss-doc .ss-toc a:hover{color:var(--ss-gold2)}
.ss-doc .ss-table{width:100%;border-collapse:collapse;margin:0 0 .8em;background:none}
.ss-doc .ss-table :is(th,td),.ss-doc .ss-table tbody tr:is(:nth-child(odd),:hover)>:is(td,th){padding:10px;border:0;border-bottom:1px solid var(--ss-line);text-align:right;background:none;vertical-align:middle}
.ss-doc .ss-table thead th{color:var(--ss-muted);font-weight:700}
.ss-doc .ss-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ss-doc .ss-formula{direction:ltr;text-align:center;font-family:var(--ss-lat);font-weight:700;background:rgba(8,8,8,.6);border:1px dashed var(--ss-gold);border-radius:12px;padding:12px;overflow-x:auto}
.ss-doc .ss-formula bdi{unicode-bidi:plaintext}
.ss-minirow{display:inline-flex;gap:5px;direction:ltr;vertical-align:middle}
.ss-mini{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:9px;font-family:var(--ss-lat);font-weight:800;text-transform:uppercase;font-size:1.1rem;position:relative;isolation:isolate;color:var(--ss-ivory)}
.ss-mini--s2{background:linear-gradient(180deg,#FFD76A,#D4A52E);color:#080808}
.ss-mini--s1{background:#252525}
.ss-mini--s1::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b07a2c,#80551B);z-index:-1}
.ss-mini--s0{background:#1a1a1a;color:rgba(247,241,226,.62)}
.ss-legendlist{list-style:none;padding:0!important}
.ss-legendlist li{display:flex;align-items:center;gap:12px}
.ss-doc .ss-gate__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.ss-doc .ss-btn,.ss-doc .ss-btn:visited{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border-radius:999px;border:1px solid var(--ss-gold);color:var(--ss-ivory);font-weight:700;text-decoration:none}
.ss-doc .ss-btn:hover{color:var(--ss-gold2);border-color:var(--ss-gold2)}
.ss-faq__item{border:1px solid var(--ss-line);border-radius:16px;background:rgba(22,22,22,.85);margin:0 0 10px;overflow:hidden}
.ss-faq__item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 18px;font-weight:800}
.ss-faq__item summary::-webkit-details-marker{display:none}
.ss-faq__item summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ss-gold);color:var(--ss-gold2);font-family:var(--ss-lat);transition:transform .2s}
.ss-faq__item[open] summary::after{transform:rotate(45deg)}
.ss-faq__item summary:focus-visible{outline:3px solid var(--ss-gold2);outline-offset:-3px;border-radius:16px}
.ss-faq__item p{margin:0;padding:0 18px 16px;color:var(--ss-muted)}

/* Minder beweging */
@media (prefers-reduced-motion:reduce){
	.ss-root *,.ss-root *::before,.ss-root::before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
	.ss-ball{animation:none!important}
}
/* Ankers op de overzichtspagina: niet onder de vaste kop laten vallen */
.sa-anchor{display:block;position:relative;top:-96px;height:0;visibility:hidden}
/* Lingo-trap op het startscherm: 2 → 3 → … letters */
.ss-ladder{list-style:none;margin:4px 0 18px;padding:0;display:flex;align-items:flex-end;gap:6px;direction:ltr;justify-content:center}
.ss-ladder li{display:grid;place-items:center;width:clamp(30px,8vw,42px);height:calc(30px + var(--i) * 9px);border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,rgba(255,215,106,.22),rgba(212,165,46,.08));border:1px solid var(--ss-line);font-family:var(--ss-lat);font-weight:800;color:var(--ss-gold2);animation:ss-bub .4s ease-out both;animation-delay:calc(var(--i) * 70ms)}
.ss-ladder li:first-child{background:linear-gradient(180deg,var(--ss-gold2),var(--ss-gold));color:var(--ss-obs);border-color:transparent}

/* Schermtoetsenbord alleen op aanraakschermen; desktop (muis/trackpad) gebruikt het eigen toetsenbord. */
.ss-kbnote{display:none}
@media (hover:hover) and (pointer:fine){
	.ss-kbwrap .ss-kb{display:none}
	.ss-kbnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin:4px auto 0;color:#cfc6b2;font-size:.95rem}
	.ss-kbnote kbd{font-family:Inter,system-ui,sans-serif;font-size:.8rem;padding:3px 8px;border:1px solid rgba(212,165,46,.55);border-bottom-width:2px;border-radius:6px;background:#1c1c1c;color:#FFD76A}
}
/* Tabellen in het profiel passen op een telefoon zonder dat kolommen wegvallen (zijwaarts scrollen blijft als vangnet). */
@media (max-width:480px){.ss-root .ss-table{font-size:.82rem}.ss-root .ss-table :is(th,td),.ss-root .ss-table tbody tr:is(:nth-child(odd),:hover)>:is(td,th){padding:7px 4px}.ss-root .ss-table th{white-space:normal;line-height:1.25}}