/* Wordwise extra's (28-10): dictee, woorden leren, dagen op rij, eindbaas */
.wx-box,.wx-streak,.wx-boss-ban,.wx-board,.wx-arena{--wx-navy:#123a63;--wx-ink:#0f2238;--wx-coral:#ff8a65;--wx-wm:#d9562f;--wx-sea:#eaf1f7;--wx-pale:#e3eef8;--wx-line:#dbe6f0;--wx-soft:#56687d;--wx-ok:#1a8f63;--wx-okbg:#ddf6ec;--wx-bad:#c2413a;--wx-badbg:#fde7e4}
.wx-box{display:flex;flex-direction:column;gap:14px;color:var(--wx-ink)}
.wx-intro{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.wx-intro>b{font-size:20px;color:var(--wx-navy)}
.wx-intro p{margin:0;max-width:62ch}
.wx-muted{color:var(--wx-soft)}.wx-sm{font-size:13px}.wx-bad{color:var(--wx-bad)}
.wx-row{display:flex;gap:8px;flex-wrap:wrap}
.wx-btn{font:inherit;font-weight:600;font-size:15px;border:0;border-radius:999px;padding:10px 18px;background:var(--wx-pale);color:var(--wx-navy);cursor:pointer}
.wx-btn:hover{background:#d3e4f3}
.wx-btn.pri{background:var(--wx-navy);color:#fff}.wx-btn.pri:hover{background:var(--wx-ink)}
.wx-btn:focus-visible,.wx-opt:focus-visible,.wx-dir:focus-visible,.wx-spk:focus-visible{outline:3px solid var(--wx-coral);outline-offset:2px}
.wx-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--wx-soft);font-weight:600}
.wx-tag{background:var(--wx-wm);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;margin-right:4px}
.wx-bar{height:8px;border-radius:9px;background:var(--wx-pale);overflow:hidden}
.wx-bar i{display:block;height:100%;background:var(--wx-navy);border-radius:9px;transition:width .3s}
.wx-say{display:flex;align-items:center;gap:14px}
.wx-spk{width:84px;height:84px;border-radius:50%;border:0;background:var(--wx-navy);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wx-spk svg{width:40px;height:40px}
.wx-spk:active{transform:scale(.96)}
.wx-form{display:flex;gap:8px;flex-wrap:wrap}
.wx-in{font:inherit;font-size:22px;font-weight:600;flex:1;min-width:200px;max-width:460px;padding:12px 16px;border-radius:14px;border:2px solid var(--wx-line);background:#fff;color:var(--wx-ink)}
.wx-in:focus{outline:0;border-color:var(--wx-navy);box-shadow:0 0 0 3px rgba(18,58,99,.16)}
.wx-fb{border-radius:14px;padding:12px 16px;font-weight:500}
.wx-fb.ok{background:var(--wx-okbg);color:var(--wx-ok)}
.wx-fb.bad{background:var(--wx-badbg);color:var(--wx-bad)}
.wx-diff{font-weight:700;letter-spacing:.02em}
.wx-diff u{text-decoration:none;background:#ffd8c9;color:#5a1f08;border-radius:3px;padding:0 1px}
.wx-box>.wx-btn,.wx-card>.wx-btn.pri{align-self:flex-start}
.wx-dirs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;width:100%}
.wx-dir{font:inherit;text-align:left;border:2px solid transparent;background:var(--wx-sea);border-radius:16px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:4px;color:var(--wx-ink)}
.wx-dir b{color:var(--wx-navy);font-size:17px}.wx-dir small{color:var(--wx-soft);font-size:13px}
.wx-dir:hover{border-color:var(--wx-sky,#bfe0f5)}.wx-dir.on{border-color:var(--wx-navy)}
.wx-card{position:relative;display:flex;flex-direction:column;gap:12px}
.wx-card>small{color:var(--wx-soft);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.wx-kia{position:absolute;right:0;top:-6px}
.wx-word{font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:-.02em;color:var(--wx-navy);padding-right:120px;overflow-wrap:anywhere}
.wx-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wx-opt{font:inherit;font-size:17px;font-weight:600;text-align:left;border:0;border-radius:999px;background:var(--wx-sea);padding:14px 20px;cursor:pointer;color:var(--wx-ink)}
.wx-opt:hover:not(:disabled){background:#d3e4f3}
.wx-opt.ok{background:var(--wx-okbg);color:var(--wx-ok);box-shadow:inset 0 0 0 2px var(--wx-ok)}
.wx-opt.no{background:var(--wx-badbg);color:var(--wx-bad);box-shadow:inset 0 0 0 2px var(--wx-bad)}
@media (max-width:560px){.wx-opts{grid-template-columns:1fr}.wx-word{padding-right:0;margin-top:34px}}

/* dagen op rij */
.wx-flame{width:26px;height:30px;flex:none}
.wx-shield{width:18px;height:20px;flex:none;vertical-align:-4px}
.wx-chip{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#d9562f;background:#fff1e9;border-radius:999px;padding:4px 10px;font-size:14px;white-space:nowrap}
.wx-chip .wx-flame{width:15px;height:18px}.wx-chip .wx-shield{width:14px;height:16px}
.wx-streak{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:#fff;border-radius:18px;padding:16px 20px;margin-top:14px}
.wx-sn{display:flex;align-items:center;gap:10px}
.wx-sn .wx-flame{width:38px;height:44px}
.wx-sn b{display:block;font-size:34px;line-height:1;font-weight:800;color:var(--wx-wm);letter-spacing:-.03em}
.wx-sn small{color:var(--wx-soft);font-size:13px;font-weight:600}
.wx-sw p{margin:6px 0 0;font-size:14px;color:var(--wx-soft)}
.wx-week{display:flex;gap:6px}
.wx-d{display:flex;flex-direction:column;align-items:center;gap:2px}
.wx-d small{font-size:11px;color:var(--wx-soft);font-weight:600}
.wx-d i{width:32px;height:32px;border-radius:10px;background:var(--wx-sea);display:flex;align-items:center;justify-content:center;font-style:normal;color:#fff;font-weight:700;font-size:15px}
.wx-d.ok i{background:var(--wx-navy)}
.wx-d.sh i{background:#fff1e9}
.wx-d.now i{box-shadow:inset 0 0 0 2px var(--wx-coral);background:#fff}
.wx-d.miss i{background:repeating-linear-gradient(135deg,#f2f6fa 0 6px,#e5ecf3 6px 12px)}
.wx-sg{display:flex;align-items:center;gap:10px;max-width:280px;background:var(--wx-sea);border-radius:14px;padding:10px 14px}
.wx-sg.on{background:#fff1e9}
.wx-sg .wx-shield{width:28px;height:32px}
.wx-sg:not(.on) .wx-shield{filter:grayscale(1);opacity:.45}
.wx-sg p{margin:0;font-size:13px;color:var(--wx-soft)}.wx-sg.on p{color:#7a4a35}.wx-sg b{color:var(--wx-wm)}
@media (max-width:760px){.wx-streak{grid-template-columns:1fr}.wx-sg{max-width:none}}

/* eindbaas: banner voor leerlingen */
.wx-boss-ban{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--wx-ink);color:#fff;border-radius:18px;padding:16px 20px;margin-top:14px;text-decoration:none}
.wx-boss-ban span:first-child{display:flex;flex-direction:column;gap:2px}
.wx-boss-ban b{font-size:19px}.wx-boss-ban small{color:#cfe3f3;font-size:13px}
.wx-boss-go{background:var(--wx-coral);color:#2a1006;font-weight:700;border-radius:999px;padding:10px 18px;white-space:nowrap}
.wx-hp{height:14px;border-radius:999px;background:#24405f;overflow:hidden}
.wx-hp i{display:block;height:100%;background:linear-gradient(90deg,#ff8a65,#d9562f);border-radius:999px;transition:width .5s}
.wx-hp.big{height:28px}

/* eindbaas: digibord */
.wx-board{background:#0f2238;color:#fff;border-radius:24px;padding:24px 28px;display:flex;flex-direction:column;gap:22px;min-height:70vh}
.wx-board:fullscreen{border-radius:0;min-height:100vh;padding:40px 56px}
.wx-bd-h{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.wx-bd-h b{display:block;font-size:28px;letter-spacing:-.02em}.wx-bd-h small{color:#9fb6cc}
.wx-board .wx-btn{background:#17324f;color:#fff}.wx-board .wx-btn:hover{background:#21436a}
.wx-bd-m{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:center;flex:1}
.wx-bd-boss{display:flex;flex-direction:column;align-items:center;gap:12px}
.wx-bd-boss .wx-hp{width:min(560px,90%)}
.wx-bd-hpl{display:flex;justify-content:space-between;width:min(560px,90%);font-weight:700}
.wx-bd-st{display:flex;flex-direction:column;gap:12px}
.wx-bd-st div{background:#17324f;border-radius:18px;padding:14px 20px}
.wx-bd-st small{color:#9fb6cc;font-weight:600;font-size:14px}
.wx-bd-st b{display:block;font-size:40px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wx-win{text-align:center;display:flex;flex-direction:column;gap:6px}
.wx-win b{font-size:clamp(36px,6vh,60px);letter-spacing:-.03em;color:#ff8a65}.wx-win span{font-size:20px;color:#cfe3f3}
.wx-win.lose b{color:#fff}
.wx-bd-tip{margin:0;color:#9fb6cc;font-size:15px}
@keyframes wxBob{50%{transform:translateY(-10px)}}
@keyframes wxHit{0%,100%{transform:none}20%{transform:translateX(-14px) rotate(-4deg);filter:brightness(1.8)}50%{transform:translateX(12px) rotate(3deg)}75%{transform:translateX(-6px)}}
@media (max-width:760px){.wx-bd-m{grid-template-columns:1fr}}
#wxParty{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
#wxParty i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:wxFall linear forwards}
@keyframes wxFall{to{transform:translateY(110vh) rotate(720deg)}}

/* docent: eindbaas klaarzetten */
.wx-setup{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.wx-setup label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}

/* eindbaas v2 (29-10): donker, eng monster, hartjes, tijd per vraag */
.wx-level{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 10px;padding:9px 14px;width:min(680px,100%);box-sizing:border-box;border:1px solid color-mix(in srgb,var(--wx-level-color) 45%,#dbe6f0);border-left:6px solid var(--wx-level-color);border-radius:12px;background:#fff;color:#0f2238;font-size:14px}.wx-level span{font-variant-numeric:tabular-nums;color:#56687d}.wx-level[data-shape="stone"]{border-radius:6px 16px 6px 16px}.wx-level[data-shape="fox"]{border-radius:20px 6px 20px 6px}.wx-level[data-shape="owl"]{border-radius:50px 12px 50px 12px}.wx-level[data-shape="dragon"]{border-radius:4px 20px 4px 20px}.wx-level[data-shape="crown"]{border-radius:16px 16px 4px 4px;box-shadow:inset 0 3px var(--wx-level-color)}.wx-board[data-shape="fox"] .wx-monw{filter:hue-rotate(18deg) saturate(1.2)}.wx-board[data-shape="owl"] .wx-monw{filter:hue-rotate(78deg)}.wx-board[data-shape="dragon"] .wx-monw{filter:hue-rotate(145deg) saturate(1.2)}.wx-board[data-shape="crown"] .wx-monw{filter:hue-rotate(300deg) saturate(1.15)}.wx-board[data-shape="stone"] .wx-monw,.wx-ahead[data-shape="stone"] .wx-monw{filter:grayscale(.55)}.wx-ahead[data-shape="fox"] .wx-monw{filter:hue-rotate(18deg) saturate(1.2)}.wx-ahead[data-shape="owl"] .wx-monw{filter:hue-rotate(78deg)}.wx-ahead[data-shape="dragon"] .wx-monw{filter:hue-rotate(145deg) saturate(1.2)}.wx-ahead[data-shape="crown"] .wx-monw{filter:hue-rotate(300deg) saturate(1.15)}wx-board .wx-level{margin:10px auto 14px}.wx-board{min-height:560px;box-sizing:border-box}
.wx-monw{position:relative;flex:none;transform-origin:center;will-change:transform}
.wx-mon{display:block;width:100%;height:100%;overflow:visible}
.wx-mon .m-all{transform-origin:100px 110px;animation:wxBreath 3.2s ease-in-out infinite}
.wx-mon .m-jaw{animation:wxJaw 3.2s ease-in-out infinite}
.wx-mon .m-glow{transform-box:fill-box;transform-origin:center;animation:wxGlow 2.4s ease-in-out infinite}
.wx-monw.rage .m-all{animation:wxRage .5s linear infinite}
.wx-monw.rage .m-glow{animation-duration:.6s}
.wx-mon .m-aura{transform-box:fill-box;transform-origin:center;animation:wxGlow 3.2s ease-in-out infinite}
.wx-monw.rage .m-aura{animation-duration:.8s}
.wx-monw.dead .m-aura{display:none}
.wx-mon .m-drool{transform-box:fill-box;transform-origin:top;animation:wxDrool 4s ease-in infinite}
@keyframes wxDrool{0%,40%{transform:scaleY(.2)}90%{transform:scaleY(1.3);opacity:.6}100%{opacity:0}}
.wx-monw.rage .wx-mon{filter:drop-shadow(0 0 18px rgba(217,86,47,.55))}
.wx-monw.bite{z-index:20;animation:wxSprintBeet 1.25s cubic-bezier(.18,.78,.16,1) both}
.wx-monw.bite .m-all{animation:wxLunge 1.25s ease-out both}
.wx-monw.bite .m-jaw{animation:wxChompJaw 1.25s ease-in-out both}
.wx-monw.bite .m-arm-l{transform-box:fill-box;transform-origin:90% 12%;animation:wxSprintLeft 1.25s ease-in-out both}
.wx-monw.bite .m-arm-r{transform-box:fill-box;transform-origin:10% 12%;animation:wxSprintRight 1.25s ease-in-out both}
.wx-monw.hit .wx-mon{animation:wxHit .45s}
.wx-monw.dead .m-all{animation:none;transform:rotate(14deg) translateY(24px);opacity:.3}
.wx-monw.dead .m-eyes{opacity:.1}
@keyframes wxBreath{50%{transform:translateY(-4px) scale(1.02)}}
@keyframes wxJaw{50%{transform:translateY(5px)}}
@keyframes wxGlow{50%{opacity:.55;transform:scale(.85)}}
@keyframes wxRage{25%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}}
@keyframes wxSprintBeet{0%,100%{transform:scale(1) translateY(0)}18%{transform:scale(.88,.9) translateY(3px)}34%{transform:scale(1.05) translateY(0)}72%{transform:scale(3.5) translateY(15px)}88%{transform:scale(4.35) translateY(19px)}}
@keyframes wxLunge{0%,24%{transform:translateY(0)}42%{transform:translateY(9px) scale(1.06)}100%{transform:translateY(1px) scale(1.12)}}
@keyframes wxSprintLeft{0%,28%,100%{transform:rotate(0)}48%{transform:rotate(-42deg)}76%{transform:rotate(-92deg)}}
@keyframes wxSprintRight{0%,32%,100%{transform:rotate(0)}52%{transform:rotate(42deg)}80%{transform:rotate(92deg)}}
@keyframes wxChompJaw{0%,18%{transform:translateY(0)}42%{transform:translateY(15px)}60%{transform:translateY(-18px)}100%{transform:translateY(0)}}

.wx-arena{display:flex;flex-direction:column;gap:12px;background:radial-gradient(120% 90% at 50% 0%,#17314f 0%,#0a1626 55%,#050b14 100%);color:#fff;border-radius:20px;padding:16px;position:relative;overflow:hidden}
.wx-arena.rage{box-shadow:inset 0 0 60px rgba(217,86,47,.35)}
.wx-arena.hurt{animation:wxShake .45s}
.wx-arena.hurt::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side,transparent 40%,rgba(194,65,58,.7));animation:wxRed .8s ease-out forwards}
@keyframes wxShake{20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-3px)}60%{transform:translate(-5px,2px)}80%{transform:translate(3px,0)}}
@keyframes wxRed{from{opacity:1}to{opacity:0}}
.wx-ahead{display:flex;gap:14px;align-items:center}
.wx-ahead .wx-monw{width:104px;height:104px}
.wx-ainfo{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.wx-arow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wx-arow b{font-size:17px}
.wx-arow small{color:#9fb6cc;font-size:13px}
.wx-bell{margin-left:auto;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;color:#cfe3f3}
.wx-rage{background:#d9562f;color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:3px 10px;animation:wxGlow 1s ease-in-out infinite}
.wx-out{color:#ff8a65!important;font-weight:700;margin-left:auto}
.wx-hearts{display:flex;gap:6px;margin-left:auto}
.wx-hearts i{width:20px;height:18px;background:#24405f;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14 1 7a5.5 5.5 0 0 1 11-1 5.5 5.5 0 0 1 11 1c0 7-11 14-11 14z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14 1 7a5.5 5.5 0 0 1 11-1 5.5 5.5 0 0 1 11 1c0 7-11 14-11 14z'/%3E%3C/svg%3E") center/contain no-repeat}
.wx-hearts i.on{background:#ff8a65}
.wx-acard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.wx-acard>small{color:#9fb6cc;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.wx-aword{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.wx-timer{height:6px;border-radius:9px;background:#1b3350;overflow:hidden}
.wx-timer i{display:block;height:100%;background:#bfe0f5;border-radius:9px}
.wx-timer i.low{background:#ff8a65}
.wx-arena .wx-opt{background:#17324f;color:#fff;font-size:16px;padding:12px 18px}
.wx-arena .wx-opt:hover:not(:disabled){background:#21436a}
.wx-arena .wx-opt.ok{background:#0f4a37;color:#bff3dc;box-shadow:inset 0 0 0 2px #2fbf86}
.wx-arena .wx-opt.no{background:#4a1416;color:#ffd2cc;box-shadow:inset 0 0 0 2px #ff6b5e}
.wx-arena .wx-fb.bad{background:#4a1416;color:#ffd2cc}
.wx-arena .wx-fb.ok{background:#0f4a37;color:#bff3dc}
.wx-aend{text-align:center;padding:18px 8px 8px;display:flex;flex-direction:column;gap:6px;align-items:center}
.wx-aend b{font-size:32px;letter-spacing:-.02em;color:#ff8a65}
.wx-aend p{margin:0;color:#cfe3f3;max-width:52ch}
.wx-aend.eaten b{font-size:44px;color:#ff6b5e}
.wx-chomp{position:fixed;inset:0;z-index:300;pointer-events:none;animation:wxDim .35s forwards}
@keyframes wxDim{from{background:rgba(5,11,20,0)}to{background:rgba(40,6,10,.9)}}
.wx-chomp i{position:absolute;left:-5%;right:-5%;height:52%;background:#08131f}
.wx-chomp i::after{content:"";position:absolute;left:0;right:0;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M4 60h52L30 2z' fill='%23e8edf2'/%3E%3C/svg%3E") 0 0/60px 60px repeat-x}
.wx-chomp .t{top:0;transform:translateY(-102%);animation:wxTop .7s cubic-bezier(.6,0,.9,.4) .1s forwards}
.wx-chomp .t::after{bottom:-60px;transform:scaleY(-1)}
.wx-chomp .b{bottom:0;transform:translateY(102%);animation:wxBot .7s cubic-bezier(.6,0,.9,.4) .1s forwards}
.wx-chomp .b::after{top:-60px}
.wx-chomp.done{transition:opacity .8s;opacity:0}
@keyframes wxTop{to{transform:translateY(0)}}
@keyframes wxBot{to{transform:translateY(0)}}

.wx-bd-boss .wx-monw{width:min(36vw,320px);height:min(36vw,320px)}
.wx-bd-say{min-height:26px;font-weight:700;font-size:20px;color:#ff8a65;text-align:center}
.wx-board{background:radial-gradient(120% 90% at 50% 0%,#17314f 0%,#0a1626 55%,#050b14 100%);position:relative;overflow:hidden}
.wx-board.rage{box-shadow:inset 0 0 90px rgba(217,86,47,.35)}
.wx-board.hurt{animation:wxShake .45s}
.wx-bd-st .eat b{color:#ff8a65}
@media (max-width:560px){.wx-ahead .wx-monw{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){.wx-monw.bite,.wx-mon *,.wx-arena,.wx-board,.wx-rage,.wx-chomp i{animation:none!important}}

/* Robotnaam */
.wx-rnbtn{font:inherit;font-size:12px;font-weight:600;border:0;background:#fff;color:#123a63;border-radius:999px;padding:3px 10px;margin-left:4px;cursor:pointer;box-shadow:0 0 0 1px rgba(18,58,99,.2)}
.wx-rnbtn:hover,.wx-rnbtn:focus-visible{box-shadow:0 0 0 2px #d9562f}
.wx-rn{background:#fff;border-radius:16px;padding:14px 16px;margin:10px 0;display:grid;gap:10px}
.wx-rn-l{display:flex;flex-wrap:wrap;gap:6px}
.wx-rn-l button,.wx-rn-x{font:inherit;font-size:14px;font-weight:600;border:0;border-radius:999px;padding:6px 12px;background:#e8f0f8;color:#123a63;cursor:pointer}
.wx-rn-l button:hover,.wx-rn-l button:focus-visible{background:#d9562f;color:#fff}
.wx-rn-l button.on{background:#123a63;color:#fff}
.wx-rn-x{justify-self:start;background:transparent;text-decoration:underline;padding:2px 0}
.wx-rnbtn.sm{font-size:11px;padding:1px 8px;opacity:.8}
.wx-rnt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.wx-rnt .wx-rnbtn{margin-left:0}

/* Wie is er nu online? (docentportaal, 29-10) */
.ww-on{display:inline-block;width:10px;height:10px;border-radius:50%;background:#1f8a4c;box-shadow:0 0 0 3px rgba(31,138,76,.18);margin-right:8px;vertical-align:middle;flex:none}
.ww-on.off{background:#b8c4d0;box-shadow:none}
.ww-now{color:#17663a;font-weight:600}
@media (prefers-reduced-motion:no-preference){.ww-on:not(.off){animation:wwOn 2.4s ease-in-out infinite}}
@keyframes wwOn{50%{box-shadow:0 0 0 6px rgba(31,138,76,.06)}}
@keyframes wx-level-in{from{opacity:.65;transform:translateY(5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.wx-board .wx-level{animation:wx-level-in .32s ease-out both}
@media(prefers-reduced-motion:reduce){.wx-board .wx-level{animation:none}}

/* Decoratieve aanvallen mogen antwoordknoppen nooit afdekken. */
.wx-monw,.wx-mon{pointer-events:none}
.wx-board-error{padding:12px 16px;background:#fde7e4;color:#832b28;border-radius:12px}
/* Oefenbaas (leerling): rustig oefenen. Alleen transform/opacity animeren. */
.wx-ok{color:var(--wx-ok)}
.wx-ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--wx-line);color:var(--wx-navy)}.wx-ghost:hover{background:var(--wx-pale)}.wx-btn:disabled{opacity:.5;cursor:default}
.wx-btn:focus-visible,.wx-ob-opt:focus-visible,.wx-ob-tile:focus-visible,.wx-ob-say:focus-visible{outline:3px solid var(--wx-wm);outline-offset:2px}
.wx-ob{gap:16px}.wx-ob-intro{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center}.wx-ob-intro>div>b{display:block;font-size:24px;color:var(--wx-navy);margin-bottom:4px}.wx-ob-intro p{margin:6px 0}
.wx-ob-mon{width:180px;height:180px;display:grid;place-items:center;flex:none}.wx-ob-mon .wx-monw{width:170px;height:170px}.wx-ob-mon.hit .wx-monw{animation:wx-ob-hit .4s}.wx-ob-mon.dead .wx-monw{opacity:.85}
@keyframes wx-ob-hit{40%{transform:scale(.93) rotate(-4deg)}}
.wx-ob-prog{font-size:15px;color:var(--wx-soft)}.wx-ob-pb,.wx-ob-hp{height:12px;background:var(--wx-line);border-radius:99px;overflow:hidden}.wx-ob-pb{max-width:420px;margin:0 0 16px}.wx-ob-pb i,.wx-ob-hp i{display:block;height:100%;width:100%;transform-origin:left;background:var(--wx-wm);border-radius:99px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.wx-ob-top{display:flex;align-items:center;gap:16px}.wx-ob-n{font-weight:700;color:var(--wx-navy);white-space:nowrap}.wx-ob-hp{flex:1}
.wx-ob-stage{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center}.wx-ob-card{background:var(--wx-sea);border-radius:20px;padding:20px 24px;display:grid;gap:6px;justify-items:start}.wx-ob-card small{color:var(--wx-soft);font-size:14px}
.wx-ob-q{font-size:36px;font-weight:800;line-height:1.15;color:var(--wx-navy);overflow-wrap:anywhere}.wx-ob-stars{display:inline-flex;gap:2px;font-size:22px;line-height:1}.wx-ob-s{color:#52657b}.wx-ob-s.on{color:#8a5a00}
.wx-ob-say{border:0;background:var(--wx-pale);color:var(--wx-navy);border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;min-height:44px}
.wx-ob-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wx-ob-opt{min-height:56px;border:3px solid var(--wx-line);background:#fff;color:var(--wx-ink);border-radius:16px;padding:12px 16px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;text-align:center;overflow-wrap:anywhere}.wx-ob-opt:hover:not(:disabled){border-color:var(--wx-coral)}
.wx-ob-opt.ok{background:var(--wx-okbg);border-color:var(--wx-ok)}.wx-ob-opt.no{background:var(--wx-badbg);border-color:var(--wx-bad)}.wx-ob-opt:disabled{cursor:default;color:var(--wx-ink);opacity:1}
.wx-ob-msg{min-height:28px;font-size:17px}.wx-ob-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.wx-ob-act .wx-btn{min-height:48px;padding:12px 22px;display:inline-flex;align-items:center;text-decoration:none}.wx-ob-go{background:#b8431d;color:#fff}.wx-ob-go:hover{background:#9f3818}
.wx-ob-end{display:grid;justify-items:center;text-align:center;gap:6px}.wx-ob-end>b{font-size:26px;color:var(--wx-navy)}.wx-ob-end p{max-width:520px;margin:0 0 8px}
.wx-ob-tile{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;background:var(--wx-sea,#eaf1f7);border-radius:20px;padding:12px 20px;margin:0 0 16px;text-decoration:none;color:#0f2238;border:2px solid transparent;transition:border-color .15s}.wx-ob-tile:hover{border-color:#d9562f}
.wx-ob-tm{width:96px;height:96px;display:grid;place-items:center}.wx-ob-tm .wx-monw{width:88px;height:88px}.wx-ob-tt{display:grid;gap:2px}.wx-ob-tt b{font-size:20px;color:#123a63}.wx-ob-tt small{font-size:14px;color:#56687d}.wx-ob-tt em{font-style:normal;font-weight:700;font-size:14px;color:#11694a}
@media(max-width:720px){.wx-ob-intro,.wx-ob-stage{grid-template-columns:1fr;justify-items:center;text-align:center}.wx-ob-card{justify-items:center;width:100%}.wx-ob-opts{grid-template-columns:1fr}.wx-ob-q{font-size:30px}}
@media(prefers-reduced-motion:reduce){.wx-ob-pb i,.wx-ob-hp i{transition:none}.wx-ob-mon.hit .wx-monw{animation:none}}
.wx-rnbtn{min-height:36px}
@media(max-width:480px){.wx-rnbtn,.wx-ob-say,.wx-ob-act .wx-btn{min-height:44px}}
/* Oefenbaas in het donkere thema */
html.cs-d .wx-ob-opt{background:#10283f;color:#eaf1f7;border-color:#31536e}html.cs-d .wx-ob-opt:hover:not(:disabled){border-color:#ff9a78}html.cs-d .wx-ob-opt:disabled{color:#eaf1f7}
html.cs-d .wx-ob-opt.ok{background:#173f35;border-color:#5fd49a}html.cs-d .wx-ob-opt.no{background:#4a2530;border-color:#ff8a80}
html.cs-d .wx-ob-card{background:#183651}html.cs-d .wx-ob-q,html.cs-d .wx-ob-n,html.cs-d .wx-ob-intro>div>b,html.cs-d .wx-ob-end>b{color:#eaf1f7}html.cs-d .wx-ob-card small,html.cs-d .wx-ob-prog{color:#a9bed2}
html.cs-d .wx-ob-s{color:#8fa6bd}html.cs-d .wx-ob-s.on{color:#f0b44d}html.cs-d .wx-ob-say{background:#21425f;color:#eaf1f7}html.cs-d .wx-ob .wx-ghost{color:#eaf1f7;box-shadow:inset 0 0 0 2px #31536e}html.cs-d .wx-ob .wx-ghost:hover{background:#21425f}
html.cs-d .wx-ob-pb,html.cs-d .wx-ob-hp{background:#31536e}html.cs-d .wx-ob .wx-ok{color:#5fd49a}html.cs-d .wx-ob .wx-bad{color:#ff8a80}
html.cs-d .wx-ob-tile{background:#183651;color:#eaf1f7}html.cs-d .wx-ob-tt b{color:#eaf1f7}html.cs-d .wx-ob-tt small{color:#a9bed2}html.cs-d .wx-ob-tt em{color:#5fd49a}
/* Docent: naar een hoger level springen (verdwijnt op het digibord in volledig scherm) */
.wx-bd-lvctl{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:10px 0 0;font-size:14px}
.wx-bd-lvctl span{font-weight:700}.wx-lvb{min-width:44px;min-height:44px;border-radius:50%;border:2px solid var(--wx-line);background:#fff;color:var(--wx-navy);font:inherit;font-weight:800;cursor:pointer}
.wx-lvb:hover:not(:disabled){border-color:var(--wx-wm)}.wx-lvb.on{background:var(--wx-navy);color:#fff;border-color:var(--wx-navy)}.wx-lvb:disabled{opacity:1;cursor:default}.wx-lvb:disabled:not(.on){color:#52657b;background:var(--wx-sea)}
.wx-lvb:focus-visible{outline:3px solid var(--wx-wm);outline-offset:2px}
.wx-board:fullscreen .wx-bd-lvctl{display:none}
html.cs-d .wx-lvb{background:#10283f;color:#eaf1f7;border-color:#31536e}html.cs-d .wx-lvb.on{background:#8ec1ee;color:#0b1d30;border-color:#8ec1ee}html.cs-d .wx-lvb:disabled:not(.on){color:#a9bed2;background:#183651}