domma-cms 1.8.32 → 1.8.33

package/plugins/crossword/public/crossword.js

@@ -1,7 +1,35 @@
-import{Stopwatch as q,Countdown as O,addStyles as N,celebrate as R,configOf as B,fmtDuration as g,memory as m,mountBoards as H,mountLeaderboard as K,ordinal as M,request as f,uid as W}from"/plugins/_lib/public/games/games.js";const h=window.M,b="/api/plugins/crossword/public",S="games.name",k=r=>`crossword.play.${r}`,$=r=>`crossword.cells.${r}`,F=`
+/**
+ * Crossword - the player, in the browser.
+ *
+ * Mounts on every `[data-crossword]` placeholder the [crossword] shortcode
+ * wrote, and every `[data-crossword-board]` the leaderboard one wrote. The
+ * server holds the answers: this gets the grid's shape and the clues when a
+ * play starts, sends the letters to be checked or judged, and shows the clock
+ * the server keeps. Letters typed so far are remembered per play, so a reload
+ * keeps them (the clock never stopped).
+ *
+ * The screens (start, playing, result) are domma-reactive bindings. The grid
+ * itself is built once per play as plain inputs, because it is all focus and
+ * keystrokes: typing moves along the word, arrows move, clicking a square
+ * twice turns the direction, Tab goes to the next clue.
+ *
+ * `mount(el, {test})` is the same player for an admin testing the crossword
+ * from its Tool: `test.info()` and `test.start()` go through the admin's own
+ * API, the play is a test one (never on a board), and nothing is remembered.
+ */
+
+import {Stopwatch, Countdown, addStyles, celebrate, configOf, fmtDuration, memory, mountBoards, mountLeaderboard, ordinal, request, uid} from '/plugins/_lib/public/games/games.js';
+
+const M = window.M;
+const API = '/api/plugins/crossword/public';
+const NAME_KEY = 'games.name';
+const playKey = (slug) => `crossword.play.${slug}`;
+const cellsKey = (playId) => `crossword.cells.${playId}`;
+
+const TEMPLATE = `
 <p class="cw-live" role="status" aria-live="polite" data-bind-text="live.value"></p>
 
-<section class="gm-card" hidden data-bind-hidden="screen.value !== 'loading'"><p class="gm-muted">Loading the crossword\u2026</p></section>
+<section class="gm-card" hidden data-bind-hidden="screen.value !== 'loading'"><p class="gm-muted">Loading the crossword…</p></section>
 <section class="gm-card" hidden data-bind-hidden="screen.value !== 'error'"><p class="gm-error" data-bind-text="problem.value"></p></section>
 
 <section class="gm-card" hidden data-bind-hidden="screen.value !== 'intro'">
@@ -10,12 +38,13 @@ import{Stopwatch as q,Countdown as O,addStyles as N,celebrate as R,configOf as B
   <ul class="gm-facts" data-each="facts.value key=k"><li data-bind-text="k"></li></ul>
   <p class="gm-note" hidden data-bind-hidden="info.value.open" data-bind-text="info.value.reason"></p>
   <form class="gm-start" hidden data-bind-hidden="!info.value.open" data-on-submit="start" novalidate>
-    <div class="gm-field">
+    <p class="gm-note gm-test-note" hidden data-bind-hidden="!testing">A test go: it plays exactly as your players see it, and it is not saved to the leaderboard.</p>
+    <div class="gm-field" hidden data-bind-hidden="testing">
       <label for="%U%-name">Your name</label>
       <input id="%U%-name" class="gm-input" maxlength="24" autocomplete="nickname" data-model="name.value" aria-describedby="%U%-err">
     </div>
     <div class="gm-hp" aria-hidden="true"><label>Website <input tabindex="-1" autocomplete="off" data-model="website.value"></label></div>
-    <button type="submit" class="btn btn-primary" data-bind-disabled="busy.value">Start the clock</button>
+    <button type="submit" class="btn btn-primary" data-bind-disabled="busy.value" data-bind-text="testing ? 'Start the test' : 'Start the clock'">Start the clock</button>
   </form>
   <p class="gm-error" id="%U%-err" hidden data-bind-hidden="!problem.value" data-bind-text="problem.value"></p>
 </section>
@@ -35,7 +64,7 @@ import{Stopwatch as q,Countdown as O,addStyles as N,celebrate as R,configOf as B
     <p class="gm-result-score" hidden data-bind-hidden="!res.value.solved" data-bind-text="res.value.timeText"></p>
     <p class="gm-muted" data-bind-text="res.value.detail"></p>
     <p class="gm-result-place" hidden data-bind-hidden="!res.value.placeText" data-bind-text="res.value.placeText"></p>
-    <div class="gm-actions"><button type="button" class="btn btn-primary" data-on-click="again">Play again</button></div>
+    <div class="gm-actions"><button type="button" class="btn btn-primary" data-on-click="again" data-bind-text="testing ? 'Test again' : 'Play again'">Play again</button></div>
   </div>
   <p class="cw-current" aria-hidden="true" hidden data-bind-hidden="screen.value !== 'play' || !currentClue.value" data-bind-text="currentClue.value"></p>
   <div class="cw-layout">
@@ -54,4 +83,437 @@ import{Stopwatch as q,Countdown as O,addStyles as N,celebrate as R,configOf as B
   </div>
 </section>
 
-<div class="cw-board-slot"></div>`;function Y(r){const t=[`${r.answers} answers`,`${r.width} \xD7 ${r.height} grid`];return r.timeLimit&&t.push(`${g(r.timeLimit*1e3)} to solve it`),r.checks&&t.push(r.checkPenalty?`Checking costs ${r.checkPenalty} seconds`:"You can check your letters"),r.attemptsPerName===1&&t.push("One go each"),r.leaderboard&&t.push("Fastest solve wins"),t.map(l=>({k:l}))}class j{constructor(t,l,e,{onChange:a,onClue:n}){this.el=t,this.lists=l,this.p=e,this.onChange=a,this.onClue=n,this.letters=e.shape.map(i=>[...i].map(()=>"")),this.inputs=[],this.dir="across",this.pos=null,this.entries=[...e.across,...e.down],this.build()}open(t,l){return t>=0&&l>=0&&t<this.p.height&&l<this.p.width&&this.p.shape[t][l]==="."}entryAt(t,l,e){return this.entries.find(a=>a.dir===e&&(e==="across"?a.row===t&&l>=a.col&&l<a.col+a.length:a.col===l&&t>=a.row&&t<a.row+a.length))||null}cellsOf(t){return Array.from({length:t.length},(l,e)=>t.dir==="across"?[t.row,t.col+e]:[t.row+e,t.col])}build(){const{width:t,height:l,shape:e}=this.p,a=new Map(this.entries.map(n=>[`${n.row},${n.col}`,n.number]));this.el.innerHTML="",this.el.style.setProperty("--cw-cols",t);for(let n=0;n<l;n++){const i=document.createElement("div");i.className="cw-row",i.setAttribute("role","row"),this.inputs[n]=[];for(let o=0;o<t;o++){const d=document.createElement("div");if(d.className=e[n][o]==="."?"cw-cell":"cw-cell is-block",d.setAttribute("role","gridcell"),e[n][o]==="."){if(a.has(`${n},${o}`)){const p=document.createElement("span");p.className="cw-num",p.textContent=a.get(`${n},${o}`),d.append(p)}const u=document.createElement("input");u.className="cw-input",u.maxLength=2,u.autocomplete="off",u.setAttribute("autocapitalize","characters"),u.spellcheck=!1,u.setAttribute("aria-label",this.labelFor(n,o)),u.addEventListener("focus",()=>this.focusCell(n,o,{fromFocus:!0})),u.addEventListener("mousedown",p=>{this.pos&&this.pos[0]===n&&this.pos[1]===o&&(p.preventDefault(),this.turn())}),u.addEventListener("keydown",p=>this.key(p,n,o)),u.addEventListener("input",p=>this.typed(p,n,o)),d.append(u),this.inputs[n][o]=u}i.append(d)}this.el.append(i)}for(const n of this.lists){n.innerHTML="";for(const i of this.entries.filter(o=>o.dir===n.dataset.dir)){const o=document.createElement("li");o.dataset.key=`${i.dir}${i.number}`,o.value=i.number;const d=document.createElement("button");d.type="button",d.className="cw-clue";const u=document.createElement("strong");u.textContent=`${i.number} `,d.append(u,document.createTextNode(`${i.clue} (${i.enumeration})`)),d.addEventListener("click",()=>{this.dir=i.dir,this.focusCell(i.row,i.col)}),o.append(d),n.append(o)}}}labelFor(t,l){return`Square in ${["across","down"].map(a=>this.entryAt(t,l,a)).filter(Boolean).map(a=>`${a.number} ${a.dir}`).join(" and ")}`}focusCell(t,l,{fromFocus:e=!1}={}){this.open(t,l)&&(this.entryAt(t,l,this.dir)||(this.dir=this.dir==="across"?"down":"across"),this.pos=[t,l],e||this.inputs[t][l].focus(),this.paint())}turn(){const t=this.dir==="across"?"down":"across";this.pos&&this.entryAt(...this.pos,t)&&(this.dir=t,this.paint())}current(){return this.pos?this.entryAt(...this.pos,this.dir):null}paint(){const t=this.current(),l=new Set(t?this.cellsOf(t).map(([e,a])=>`${e},${a}`):[]);this.inputs.forEach((e,a)=>e.forEach((n,i)=>{if(!n)return;const o=n.parentElement;o.classList.toggle("is-word",l.has(`${a},${i}`)),o.classList.toggle("is-cursor",!!this.pos&&this.pos[0]===a&&this.pos[1]===i)}));for(const e of this.lists)for(const a of e.children){const n=t&&a.dataset.key===`${t.dir}${t.number}`;a.classList.toggle("is-on",!!n),n&&typeof a.scrollIntoView=="function"&&e.scrollHeight>e.clientHeight&&a.scrollIntoView({block:"nearest"})}this.onClue(t?`${t.number} ${t.dir}: ${t.clue} (${t.enumeration})`:"")}set(t,l,e){this.letters[t][l]=e,this.inputs[t][l].value=e,this.inputs[t][l].parentElement.classList.remove("is-wrong"),this.onChange()}step(t,l,e){const[a,n]=this.dir==="across"?[0,e]:[e,0];return this.open(t+a,l+n)?[t+a,l+n]:null}typed(t,l,e){const a=(t.target.value.toUpperCase().match(/[A-Z]/g)||[]).pop()||"";if(this.set(l,e,a),a){const n=this.step(l,e,1);n&&this.focusCell(...n)}}key(t,l,e){const a={ArrowUp:[-1,0,"down"],ArrowDown:[1,0,"down"],ArrowLeft:[0,-1,"across"],ArrowRight:[0,1,"across"]};if(a[t.key]){t.preventDefault();const[n,i,o]=a[t.key];if(this.dir!==o&&this.entryAt(l,e,o)){this.dir=o,this.paint();return}let[d,u]=[l+n,e+i];for(;d>=0&&u>=0&&d<this.p.height&&u<this.p.width&&!this.open(d,u);)d+=n,u+=i;this.open(d,u)&&this.focusCell(d,u)}else if(t.key==="Backspace")if(t.preventDefault(),this.letters[l][e])this.set(l,e,"");else{const n=this.step(l,e,-1);n&&(this.focusCell(...n),this.set(...n,""))}else if(t.key==="Delete")t.preventDefault(),this.set(l,e,"");else if(t.key===" ")t.preventDefault(),this.turn();else if(t.key==="Tab"){const n=this.current(),i=this.entries.indexOf(n),o=this.entries[(i+(t.shiftKey?-1:1)+this.entries.length)%this.entries.length];o&&(t.preventDefault(),this.dir=o.dir,this.focusCell(o.row,o.col))}else if(/^[a-z]$/i.test(t.key)&&!t.ctrlKey&&!t.metaKey&&!t.altKey){t.preventDefault(),this.set(l,e,t.key.toUpperCase());const n=this.step(l,e,1);n&&this.focusCell(...n)}}clearCurrent(){const t=this.current();if(t){for(const[l,e]of this.cellsOf(t))this.set(l,e,"");this.focusCell(t.row,t.col)}}rows(){return this.letters.map((t,l)=>t.map((e,a)=>this.open(l,a)&&e||" ").join(""))}load(t){!Array.isArray(t)||t.length!==this.p.height||t.forEach((l,e)=>[...String(l)].forEach((a,n)=>{this.open(e,n)&&/[A-Z]/.test(a)&&(this.letters[e][n]=a,this.inputs[e][n].value=a)}))}markWrong(t){for(const[l,e]of t)this.inputs[l]?.[e]?.parentElement.classList.add("is-wrong")}reveal(t,{lock:l=!0}={}){t.forEach((e,a)=>[...e].forEach((n,i)=>{const o=this.inputs[a]?.[i];o&&(o.value=n.trim(),l&&(o.readOnly=!0),o.parentElement.classList.remove("is-wrong","is-word","is-cursor"))})),this.pos=null;for(const e of this.lists)for(const a of e.children)a.classList.remove("is-on")}}function z(r){const t=B(r,"data-crossword");if(!t?.slug||!h)return;N(["/plugins/crossword/public/crossword.css?v=1.0.0"]);const l=W("cw");r.innerHTML=F.replaceAll("%U%",l);const e={screen:h.observable("loading"),live:h.observable(""),problem:h.observable(""),busy:h.observable(!1),info:h.observable({title:"",intro:"",open:!1,reason:"",checks:!1}),facts:h.observable([]),name:h.observable(String(m.get(S)||"")),website:h.observable(""),clock:new q,leftText:h.observable(""),leftShown:h.observable(!1),leftLow:h.observable(!1),penaltyText:h.observable(""),currentClue:h.observable(""),message:h.observable(""),messageTone:h.observable(""),checkLabel:h.observable("Check my letters"),res:h.observable({})};let a=m.get(k(t.slug))||null,n=null,i=null,o=0;const d=new O(()=>{e.screen.peek()==="play"&&setTimeout(v,3500)}),u=h.effect(()=>{const s=d.left.value;e.leftText.value=`${g(s)} left`,e.leftLow.value=s>0&&s<=6e4}),p=s=>{e.live.value="",setTimeout(()=>{e.live.value=s},20)},y=(s,c="")=>{e.message.value=s,e.messageTone.value=c?`is-${c}`:"",p(s)},w=()=>{m.remove(k(t.slug)),a=null},U=()=>{a&&i&&m.set($(a.playId),i.rows())};function C(s){o=s.penaltyMs||0,e.penaltyText.value=o?`+${Math.round(o/1e3)}s`:"",e.clock.start((s.elapsedMs||0)+o),e.leftShown.value=s.totalLeftMs!=null,s.totalLeftMs!=null?d.start(s.totalLeftMs):d.stop()}async function x(){const s=await f(`${b}/crossword/${encodeURIComponent(t.slug)}`);e.info.value=s,e.facts.value=Y(s),e.checkLabel.value=s.checkPenalty?`Check my letters (+${s.checkPenalty}s)`:"Check my letters",s.leaderboard&&!n&&(n=K(r.querySelector(".cw-board-slot"),{url:`${b}/crossword/${encodeURIComponent(t.slug)}/leaderboard`,limit:s.leaderboardSize,showScore:!1,title:"Fastest solvers"}))}async function v(){if(!a){e.screen.value="intro";return}try{const s=await f(`${b}/play/${encodeURIComponent(a.playId)}`,{token:a.token});if(s.status!=="playing")return T();i||(i=new j(r.querySelector(".cw-grid"),[...r.querySelectorAll(".cw-list")],s.puzzle,{onChange:()=>{U(),e.message.value=""},onClue:P=>{e.currentClue.value=P}}),i.load(m.get($(a.playId)))),C(s),e.busy.value=!1,e.screen.value="play";const c=s.puzzle.across[0]||s.puzzle.down[0];c&&!i.pos&&setTimeout(()=>{i.dir=c.dir,i.focusCell(c.row,c.col)},50)}catch(s){if(s.code==="gone"||s.status===404){w(),e.screen.value="intro";return}e.problem.value=s.message,e.screen.value="error"}}async function T(){e.clock.stop(),d.stop();try{const s=await f(`${b}/play/${encodeURIComponent(a.playId)}/result`,{token:a.token}),c=s.place?`You came ${M(s.place)} of all time${s.placeToday&&s.placeToday!==s.place?`, ${M(s.placeToday)} today`:""}.`:"";e.res.value={solved:s.solved,title:s.solved?`Solved, ${s.name}!`:`Time's up, ${s.name}.`,timeText:g(s.timeMs),detail:s.solved?s.penaltyMs?`Including ${Math.round(s.penaltyMs/1e3)} seconds of penalties${s.checks?` (${s.checks} check${s.checks===1?"":"s"})`:""}.`:"No penalties. Clean solve!":"The clock ran out before the grid was finished.",placeText:c},e.message.value="",e.currentClue.value="",s.solution&&i?i.reveal(s.solution):s.solution,e.screen.value="result",p(`${e.res.peek().title} ${s.solved?g(s.timeMs):""} ${c}`),setTimeout(()=>r.querySelector(`#${l}-res`)?.focus(),30),n?.refresh(a.playId),s.place===1&&R(),m.remove($(a.playId))}catch(s){if(s.status===404){w(),e.screen.value="intro";return}e.problem.value=s.message,e.screen.value="error"}}async function D(){if(!e.busy.peek()){e.problem.value="",e.busy.value=!0;try{const s=await f(`${b}/crossword/${encodeURIComponent(t.slug)}/start`,{method:"POST",body:{name:e.name.peek(),website:e.website.peek()}});m.set(S,s.name),a={playId:s.playId,token:s.token},m.set(k(t.slug),a),await v()}catch(s){e.problem.value=s.message,e.busy.value=!1,r.querySelector(`#${l}-name`)?.focus()}}}async function L(s){if(!(e.busy.peek()||!i)){e.busy.value=!0;try{const c=await f(`${b}/play/${encodeURIComponent(a.playId)}/${s}`,{method:"POST",token:a.token,body:{cells:i.rows()}});if(C(c.play),s==="check")i.markWrong(c.wrong),y(c.wrong.length?`${c.wrong.length} square${c.wrong.length===1?" is":"s are"} wrong (marked in red).`:c.empty?`Everything so far is right. ${c.empty} to go.`:`Everything is right. Press "I've finished"!`,c.wrong.length?"bad":"good");else{if(c.solved)return T();y(c.message,"bad")}}catch(c){if(c.code==="finished"||c.code==="gone")return v();y(c.message,"bad")}finally{e.busy.value=!1}}}const E={start(){return D(),!1},check(){L("check")},submit(){L("submit")},clearWord(){i?.clearCurrent()},async again(){w(),i=null,r.querySelector(".cw-grid").innerHTML="",r.querySelectorAll(".cw-list").forEach(s=>{s.innerHTML=""}),e.busy.value=!1,await x().catch(()=>{}),e.screen.value="intro"}};h.applyBindings({...e,...E},r,{methods:E}),x().then(v).catch(s=>{e.problem.value=s.status===404?"This crossword is not available.":s.message,e.screen.value="error"});const A=new MutationObserver(()=>{r.isConnected||(e.clock.stop(),d.stop(),u?.(),A.disconnect())});A.observe(document.body,{childList:!0,subtree:!0})}function I(){for(const r of document.querySelectorAll("[data-crossword]"))r.dataset.gmMounted||(r.dataset.gmMounted="1",z(r));H("data-crossword-board",r=>`${b}/crossword/${encodeURIComponent(r)}/leaderboard`,{showScore:!1})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",I):I();
+<div class="cw-board-slot"></div>`;
+
+function facts(info) {
+    const out = [`${info.answers} answers`, `${info.width} × ${info.height} grid`];
+    if (info.timeLimit) out.push(`${fmtDuration(info.timeLimit * 1000)} to solve it`);
+    if (info.checks) out.push(info.checkPenalty ? `Checking costs ${info.checkPenalty} seconds` : 'You can check your letters');
+    if (info.attemptsPerName === 1) out.push('One go each');
+    if (info.leaderboard) out.push('Fastest solve wins');
+    return out.map(k => ({k}));
+}
+
+/** The grid as a player works it: letters, the cursor, the direction. Plain DOM. */
+class Board {
+    constructor(el, clueLists, puzzle, {onChange, onClue}) {
+        this.el = el;
+        this.lists = clueLists;
+        this.p = puzzle;
+        this.onChange = onChange;
+        this.onClue = onClue;
+        this.letters = puzzle.shape.map(row => [...row].map(() => ''));
+        this.inputs = [];
+        this.dir = 'across';
+        this.pos = null;
+        this.entries = [...puzzle.across, ...puzzle.down];
+        this.build();
+    }
+
+    open(r, c) { return r >= 0 && c >= 0 && r < this.p.height && c < this.p.width && this.p.shape[r][c] === '.'; }
+
+    /** The entry through (r, c) in a direction, or null. */
+    entryAt(r, c, dir) {
+        return this.entries.find(e => e.dir === dir && (dir === 'across'
+            ? e.row === r && c >= e.col && c < e.col + e.length
+            : e.col === c && r >= e.row && r < e.row + e.length)) || null;
+    }
+
+    cellsOf(e) {
+        return Array.from({length: e.length}, (_, i) => (e.dir === 'across' ? [e.row, e.col + i] : [e.row + i, e.col]));
+    }
+
+    build() {
+        const {width, height, shape} = this.p;
+        const numbers = new Map(this.entries.map(e => [`${e.row},${e.col}`, e.number]));
+        this.el.innerHTML = '';
+        this.el.style.setProperty('--cw-cols', width);
+        for (let r = 0; r < height; r++) {
+            const rowEl = document.createElement('div');
+            rowEl.className = 'cw-row';
+            rowEl.setAttribute('role', 'row');
+            this.inputs[r] = [];
+            for (let c = 0; c < width; c++) {
+                const cell = document.createElement('div');
+                cell.className = shape[r][c] === '.' ? 'cw-cell' : 'cw-cell is-block';
+                cell.setAttribute('role', 'gridcell');
+                if (shape[r][c] === '.') {
+                    if (numbers.has(`${r},${c}`)) {
+                        const n = document.createElement('span');
+                        n.className = 'cw-num';
+                        n.textContent = numbers.get(`${r},${c}`);
+                        cell.append(n);
+                    }
+                    const input = document.createElement('input');
+                    input.className = 'cw-input';
+                    input.maxLength = 2;
+                    input.autocomplete = 'off';
+                    input.setAttribute('autocapitalize', 'characters');
+                    input.spellcheck = false;
+                    input.setAttribute('aria-label', this.labelFor(r, c));
+                    input.addEventListener('focus', () => this.focusCell(r, c, {fromFocus: true}));
+                    input.addEventListener('mousedown', (e) => {
+                        if (this.pos && this.pos[0] === r && this.pos[1] === c) { e.preventDefault(); this.turn(); }
+                    });
+                    input.addEventListener('keydown', (e) => this.key(e, r, c));
+                    input.addEventListener('input', (e) => this.typed(e, r, c));
+                    cell.append(input);
+                    this.inputs[r][c] = input;
+                }
+                rowEl.append(cell);
+            }
+            this.el.append(rowEl);
+        }
+        for (const list of this.lists) {
+            list.innerHTML = '';
+            for (const e of this.entries.filter(x => x.dir === list.dataset.dir)) {
+                const li = document.createElement('li');
+                li.dataset.key = `${e.dir}${e.number}`;
+                li.value = e.number;
+                const b = document.createElement('button');
+                b.type = 'button';
+                b.className = 'cw-clue';
+                const num = document.createElement('strong');
+                num.textContent = `${e.number} `;
+                b.append(num, document.createTextNode(`${e.clue} (${e.enumeration})`));
+                b.addEventListener('click', () => { this.dir = e.dir; this.focusCell(e.row, e.col); });
+                li.append(b);
+                list.append(li);
+            }
+        }
+    }
+
+    labelFor(r, c) {
+        const parts = ['across', 'down'].map(d => this.entryAt(r, c, d)).filter(Boolean).map(e => `${e.number} ${e.dir}`);
+        return `Square in ${parts.join(' and ')}`;
+    }
+
+    focusCell(r, c, {fromFocus = false} = {}) {
+        if (!this.open(r, c)) return;
+        if (!this.entryAt(r, c, this.dir)) this.dir = this.dir === 'across' ? 'down' : 'across';
+        this.pos = [r, c];
+        if (!fromFocus) this.inputs[r][c].focus();
+        this.paint();
+    }
+
+    turn() {
+        const other = this.dir === 'across' ? 'down' : 'across';
+        if (this.pos && this.entryAt(...this.pos, other)) { this.dir = other; this.paint(); }
+    }
+
+    current() { return this.pos ? this.entryAt(...this.pos, this.dir) : null; }
+
+    paint() {
+        const e = this.current();
+        const inWord = new Set(e ? this.cellsOf(e).map(([r, c]) => `${r},${c}`) : []);
+        this.inputs.forEach((row, r) => row.forEach((input, c) => {
+            if (!input) return;
+            const cell = input.parentElement;
+            cell.classList.toggle('is-word', inWord.has(`${r},${c}`));
+            cell.classList.toggle('is-cursor', Boolean(this.pos) && this.pos[0] === r && this.pos[1] === c);
+        }));
+        for (const list of this.lists) {
+            for (const li of list.children) {
+                const on = e && li.dataset.key === `${e.dir}${e.number}`;
+                li.classList.toggle('is-on', Boolean(on));
+                if (on && typeof li.scrollIntoView === 'function' && list.scrollHeight > list.clientHeight) li.scrollIntoView({block: 'nearest'});
+            }
+        }
+        this.onClue(e ? `${e.number} ${e.dir}: ${e.clue} (${e.enumeration})` : '');
+    }
+
+    set(r, c, ch) {
+        this.letters[r][c] = ch;
+        this.inputs[r][c].value = ch;
+        this.inputs[r][c].parentElement.classList.remove('is-wrong');
+        this.onChange();
+    }
+
+    /** The next open square along the word (or the same one at its end). */
+    step(r, c, by) {
+        const [dr, dc] = this.dir === 'across' ? [0, by] : [by, 0];
+        return this.open(r + dr, c + dc) ? [r + dr, c + dc] : null;
+    }
+
+    typed(e, r, c) {
+        const ch = (e.target.value.toUpperCase().match(/[A-Z]/g) || []).pop() || '';
+        this.set(r, c, ch);
+        if (ch) { const next = this.step(r, c, 1); if (next) this.focusCell(...next); }
+    }
+
+    key(e, r, c) {
+        const moves = {ArrowUp: [-1, 0, 'down'], ArrowDown: [1, 0, 'down'], ArrowLeft: [0, -1, 'across'], ArrowRight: [0, 1, 'across']};
+        if (moves[e.key]) {
+            e.preventDefault();
+            const [dr, dc, dir] = moves[e.key];
+            if (this.dir !== dir && this.entryAt(r, c, dir)) { this.dir = dir; this.paint(); return; }
+            let [rr, cc] = [r + dr, c + dc];
+            while (rr >= 0 && cc >= 0 && rr < this.p.height && cc < this.p.width && !this.open(rr, cc)) { rr += dr; cc += dc; }
+            if (this.open(rr, cc)) this.focusCell(rr, cc);
+        } else if (e.key === 'Backspace') {
+            e.preventDefault();
+            if (this.letters[r][c]) this.set(r, c, '');
+            else { const prev = this.step(r, c, -1); if (prev) { this.focusCell(...prev); this.set(...prev, ''); } }
+        } else if (e.key === 'Delete') {
+            e.preventDefault();
+            this.set(r, c, '');
+        } else if (e.key === ' ') {
+            e.preventDefault();
+            this.turn();
+        } else if (e.key === 'Tab') {
+            const cur = this.current();
+            const i = this.entries.indexOf(cur);
+            const next = this.entries[(i + (e.shiftKey ? -1 : 1) + this.entries.length) % this.entries.length];
+            if (next) { e.preventDefault(); this.dir = next.dir; this.focusCell(next.row, next.col); }
+        } else if (/^[a-z]$/i.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            // Overtype: a letter replaces what is there, without waiting for the input event's quirks.
+            e.preventDefault();
+            this.set(r, c, e.key.toUpperCase());
+            const next = this.step(r, c, 1);
+            if (next) this.focusCell(...next);
+        }
+    }
+
+    clearCurrent() {
+        const e = this.current();
+        if (!e) return;
+        for (const [r, c] of this.cellsOf(e)) this.set(r, c, '');
+        this.focusCell(e.row, e.col);
+    }
+
+    /** Rows of letters, a space for an empty square - what the server reads. */
+    rows() {
+        return this.letters.map((row, r) => row.map((ch, c) => (this.open(r, c) ? (ch || ' ') : ' ')).join(''));
+    }
+
+    load(rows) {
+        if (!Array.isArray(rows) || rows.length !== this.p.height) return;
+        rows.forEach((row, r) => [...String(row)].forEach((ch, c) => {
+            if (this.open(r, c) && /[A-Z]/.test(ch)) { this.letters[r][c] = ch; this.inputs[r][c].value = ch; }
+        }));
+    }
+
+    markWrong(list) {
+        for (const [r, c] of list) this.inputs[r]?.[c]?.parentElement.classList.add('is-wrong');
+    }
+
+    reveal(rows, {lock = true} = {}) {
+        rows.forEach((row, r) => [...row].forEach((ch, c) => {
+            const input = this.inputs[r]?.[c];
+            if (!input) return;
+            input.value = ch.trim();
+            if (lock) input.readOnly = true;
+            input.parentElement.classList.remove('is-wrong', 'is-word', 'is-cursor');
+        }));
+        this.pos = null;
+        for (const list of this.lists) for (const li of list.children) li.classList.remove('is-on');
+    }
+}
+
+/** The server's words: the public request's Error, or the admin's (its reply is on `err.body`). */
+const errText = (err) => err?.body?.error || err?.message || String(err);
+
+/**
+ * @param {HTMLElement} el
+ * @param {{test?: {info: () => Promise<object>, start: () => Promise<{playId: string, token: string, name: string, info: object}>}}} [opts]
+ */
+export function mount(el, {test = null} = {}) {
+    const cfg = test ? {slug: 'test'} : configOf(el, 'data-crossword');
+    if (!cfg?.slug || !M) return;
+    addStyles(['/plugins/crossword/public/crossword.css?v=1.1.0']);
+    const U = uid('cw');
+    el.innerHTML = TEMPLATE.replaceAll('%U%', U);
+
+    const s = {
+        testing: Boolean(test),
+        screen: M.observable('loading'), live: M.observable(''), problem: M.observable(''), busy: M.observable(false),
+        info: M.observable({title: '', intro: '', open: false, reason: '', checks: false}), facts: M.observable([]),
+        name: M.observable(String(memory.get(NAME_KEY) || '')), website: M.observable(''),
+        clock: new Stopwatch(), leftText: M.observable(''), leftShown: M.observable(false), leftLow: M.observable(false),
+        penaltyText: M.observable(''), currentClue: M.observable(''), message: M.observable(''), messageTone: M.observable(''),
+        checkLabel: M.observable('Check my letters'), res: M.observable({})
+    };
+
+    let play = test ? null : memory.get(playKey(cfg.slug)) || null;
+    let board = null;
+    let grid = null;
+    let penaltyMs = 0;
+    const left = new Countdown(() => { if (s.screen.peek() === 'play') setTimeout(load, 3500); });
+    const stopLeft = M.effect(() => {
+        const ms = left.left.value;
+        s.leftText.value = `${fmtDuration(ms)} left`;
+        s.leftLow.value = ms > 0 && ms <= 60000;
+    });
+
+    const say = (t) => { s.live.value = ''; setTimeout(() => { s.live.value = t; }, 20); };
+    const tell = (text, tone = '') => { s.message.value = text; s.messageTone.value = tone ? `is-${tone}` : ''; say(text); };
+    const forget = () => { if (!test) memory.remove(playKey(cfg.slug)); play = null; };
+    const saveCells = () => { if (play && grid && !test) memory.set(cellsKey(play.playId), grid.rows()); };
+
+    function setClock(v) {
+        penaltyMs = v.penaltyMs || 0;
+        s.penaltyText.value = penaltyMs ? `+${Math.round(penaltyMs / 1000)}s` : '';
+        s.clock.start((v.elapsedMs || 0) + penaltyMs);
+        s.leftShown.value = v.totalLeftMs != null;
+        if (v.totalLeftMs != null) left.start(v.totalLeftMs); else left.stop();
+    }
+
+    async function loadInfo() {
+        const info = test ? await test.info() : await request(`${API}/crossword/${encodeURIComponent(cfg.slug)}`);
+        showInfo(info);
+    }
+
+    function showInfo(info) {
+        s.info.value = info;
+        s.facts.value = facts(info);
+        s.checkLabel.value = info.checkPenalty ? `Check my letters (+${info.checkPenalty}s)` : 'Check my letters';
+        if (info.leaderboard && !board && !test) {
+            board = mountLeaderboard(el.querySelector('.cw-board-slot'), {url: `${API}/crossword/${encodeURIComponent(cfg.slug)}/leaderboard`,
+                limit: info.leaderboardSize, showScore: false, title: 'Fastest solvers'});
+        }
+    }
+
+    async function load() {
+        if (!play) { s.screen.value = 'intro'; return; }
+        try {
+            const v = await request(`${API}/play/${encodeURIComponent(play.playId)}`, {token: play.token});
+            if (v.status !== 'playing') return showResult();
+            if (!grid) {
+                grid = new Board(el.querySelector('.cw-grid'), [...el.querySelectorAll('.cw-list')], v.puzzle, {
+                    onChange: () => { saveCells(); s.message.value = ''; },
+                    onClue: (t) => { s.currentClue.value = t; }
+                });
+                if (!test) grid.load(memory.get(cellsKey(play.playId)));
+            }
+            setClock(v);
+            s.busy.value = false;
+            s.screen.value = 'play';
+            const first = v.puzzle.across[0] || v.puzzle.down[0];
+            if (first && !grid.pos) setTimeout(() => { grid.dir = first.dir; grid.focusCell(first.row, first.col); }, 50);
+        } catch (err) {
+            if (err.code === 'gone' || err.status === 404) { forget(); s.screen.value = 'intro'; return; }
+            s.problem.value = err.message;
+            s.screen.value = 'error';
+        }
+    }
+
+    async function showResult() {
+        s.clock.stop();
+        left.stop();
+        try {
+            const r = await request(`${API}/play/${encodeURIComponent(play.playId)}/result`, {token: play.token});
+            const placeText = r.test
+                ? `A test go, so it is not on the leaderboard.${r.wouldPlace ? ` It would have come ${ordinal(r.wouldPlace)} of all time.` : ''}`
+                : r.place ? `You came ${ordinal(r.place)} of all time${r.placeToday && r.placeToday !== r.place ? `, ${ordinal(r.placeToday)} today` : ''}.` : '';
+            s.res.value = {
+                solved: r.solved,
+                title: r.solved ? `Solved, ${r.name}!` : `Time's up, ${r.name}.`,
+                timeText: fmtDuration(r.timeMs),
+                detail: r.solved
+                    ? (r.penaltyMs ? `Including ${Math.round(r.penaltyMs / 1000)} seconds of penalties${r.checks ? ` (${r.checks} check${r.checks === 1 ? '' : 's'})` : ''}.` : 'No penalties. Clean solve!')
+                    : 'The clock ran out before the grid was finished.',
+                placeText
+            };
+            s.message.value = '';
+            s.currentClue.value = '';
+            if (r.solution && grid) grid.reveal(r.solution);
+            else if (r.solution && !grid) { /* a finished play from an earlier visit: no grid to show */ }
+            s.screen.value = 'result';
+            say(`${s.res.peek().title} ${r.solved ? fmtDuration(r.timeMs) : ''} ${placeText}`);
+            setTimeout(() => el.querySelector(`#${U}-res`)?.focus(), 30);
+            board?.refresh(play.playId);
+            if (r.place === 1 && !r.test) celebrate();
+            memory.remove(cellsKey(play.playId));
+        } catch (err) {
+            if (err.status === 404) { forget(); s.screen.value = 'intro'; return; }
+            s.problem.value = err.message;
+            s.screen.value = 'error';
+        }
+    }
+
+    async function begin() {
+        if (s.busy.peek()) return;
+        s.problem.value = '';
+        s.busy.value = true;
+        try {
+            const r = test ? await test.start() : await request(`${API}/crossword/${encodeURIComponent(cfg.slug)}/start`, {
+                method: 'POST', body: {name: s.name.peek(), website: s.website.peek()}
+            });
+            play = {playId: r.playId, token: r.token};
+            if (test) {
+                if (r.info) showInfo(r.info);
+            } else {
+                memory.set(NAME_KEY, r.name);
+                memory.set(playKey(cfg.slug), play);
+            }
+            await load();
+        } catch (err) {
+            s.problem.value = errText(err);
+            s.busy.value = false;
+            if (!test) el.querySelector(`#${U}-name`)?.focus();
+        }
+    }
+
+    async function judge(path) {
+        if (s.busy.peek() || !grid) return;
+        s.busy.value = true;
+        try {
+            const r = await request(`${API}/play/${encodeURIComponent(play.playId)}/${path}`, {method: 'POST', token: play.token, body: {cells: grid.rows()}});
+            setClock(r.play);
+            if (path === 'check') {
+                grid.markWrong(r.wrong);
+                tell(r.wrong.length ? `${r.wrong.length} square${r.wrong.length === 1 ? ' is' : 's are'} wrong (marked in red).`
+                    : r.empty ? `Everything so far is right. ${r.empty} to go.` : 'Everything is right. Press "I\'ve finished"!', r.wrong.length ? 'bad' : 'good');
+            } else if (r.solved) {
+                return showResult();
+            } else {
+                tell(r.message, 'bad');
+            }
+        } catch (err) {
+            if (err.code === 'finished' || err.code === 'gone') return load();
+            tell(err.message, 'bad');
+        } finally {
+            s.busy.value = false;
+        }
+    }
+
+    const methods = {
+        start() { begin(); return false; },
+        check() { judge('check'); },
+        submit() { judge('submit'); },
+        clearWord() { grid?.clearCurrent(); },
+        async again() {
+            forget();
+            grid = null;
+            el.querySelector('.cw-grid').innerHTML = '';
+            el.querySelectorAll('.cw-list').forEach(l => { l.innerHTML = ''; });
+            s.busy.value = false;
+            await loadInfo().catch(() => {});
+            s.screen.value = 'intro';
+        }
+    };
+
+    const bindings = M.applyBindings({...s, ...methods}, el, {methods});
+
+    loadInfo().then(load).catch((err) => {
+        s.problem.value = err.status === 404 ? 'This crossword is not available.' : errText(err);
+        s.screen.value = 'error';
+    });
+
+    const dispose = () => { s.clock.stop(); left.stop(); stopLeft?.(); board?.dispose(); bindings?.dispose?.(); watch.disconnect(); };
+    const watch = new MutationObserver(() => { if (!el.isConnected) dispose(); });
+    watch.observe(document.body, {childList: true, subtree: true});
+    return {dispose};
+}
+
+function mountAll() {
+    for (const el of document.querySelectorAll('[data-crossword]')) {
+        if (el.dataset.gmMounted) continue;
+        el.dataset.gmMounted = '1';
+        mount(el);
+    }
+    mountBoards('data-crossword-board', (slug) => `${API}/crossword/${encodeURIComponent(slug)}/leaderboard`, {showScore: false});
+}
+
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mountAll);
+else mountAll();

package/plugins/free-tier.lock.json

@@ -1,6 +1,6 @@
 {
   "note": "Written by `make sync-free-tier` in dcms-marketplace. Do not edit these plugins here - edit them there and sync.",
-  "source": "dcms-marketplace@af8baa8",
+  "source": "dcms-marketplace@aac25e9",
   "plugins": {
     "blog": {
       "version": "1.10.1",
@@ -125,6 +125,27 @@
         "tests/pure.test.js": "8ba0c8f76b4c9efcc422f39ff29509612544d81f760025a4b9a5594af14e7bcf"
       }
     },
+    "crossword": {
+      "version": "1.1.0",
+      "files": {
+        "CLAUDE.md": "598736eec2dfa833f7bb84ca9376071d1143d98a5c01106d0ff453749af18e43",
+        "admin/css/index.css": "d8d32268504d5aefa9c5fbf48a0c67b978cdd01d3be0bc747205a001972e05db",
+        "admin/templates/crossword.html": "336b4a3b7efff1ab8004c0516d55f11ae2efdc98cb3b18133ea00ca07311e2aa",
+        "admin/views/crossword.js": "42f3aabd09483eddf34d25dae243a853c562a13348eafe4fc1977361c1b03f4e",
+        "collections/crossword-plays.json": "20577250f00ebe0f6503cc2aae83dba93d88381b76b0b1dbc76c7b856d4295ff",
+        "collections/crossword-puzzles.json": "1b70950c96e50ede4d6a0c8e59ca7767b3c684c1a7c68588dc6462e69dad596e",
+        "config.js": "7a15db33506a432f5c43a095366c2e82a3bd20ceded585fb4fb78b93ad6dff29",
+        "docs/guide.md": "1189300bbe20f032e9040fe027e84a6137ab560e2fe9b88219aba66ea336ec4d",
+        "inject/body.html": "9dad7927d5afbd5e53f1edaa4a420403cd2325ce908624f9643a087388c090ab",
+        "lib/crossword.js": "f8149db65fb3a7f82b2fbae6a9f8d3ceeeec95730e426cf6fc36ea058527df34",
+        "lib/store.js": "284b3b8abe9fdaa64a660d5ab0120856b893d166b28e8bda6cf0ef038baa74bc",
+        "plugin.js": "5c1885955d122200c7ff9629d7fb9fcb54c232edb4cec4658574ca90d73730e5",
+        "plugin.json": "c5f9e3d934423161af6ef5fbf52c0c3394e737245a4de21da72da6d75a790f44",
+        "public/crossword.css": "656f369ea6587b000ff56b8ab80010f4f76af10966537c180950074ec5169f61",
+        "public/crossword.js": "8418a2c52a3d351a95e271d3c9f564b7336243ccde75106a9998995575802173",
+        "public/lib/layout.js": "0026afd8b42277838c55e1c031fa07cfea1c640c47aaf385e461cc998c4619c0"
+      }
+    },
     "feedback": {
       "version": "1.2.0",
       "files": {
@@ -164,6 +185,27 @@
         "plugin.json": "e5ac7f3496d9a535fa4899d1de87a514535084d13acecd6a5897744b6174807a"
       }
     },
+    "quiz": {
+      "version": "1.1.0",
+      "files": {
+        "CLAUDE.md": "9d037c11b0de115bf17a6c53387116be037c0d4dcd1b6bf3dafa373539143e16",
+        "admin/css/index.css": "6598225cfb8b58c486eb390ac41c7f359c78f48e0c97bc8b354d3832f618afa8",
+        "admin/templates/quiz.html": "f0b65c406b0b6325a815906ca8da7d884d5d24f2504e05631e46c34a5ca0edb9",
+        "admin/views/quiz.js": "c58ba86ec989df8f29e8acff2266fb3463e301c5516bf9281193de539b7c1f44",
+        "collections/quiz-plays.json": "331d665a90b6dddf069245a2faf8dd454a36d387702343a7e36d1fe6dd5015f8",
+        "collections/quiz-quizzes.json": "ce9bacf6c05fb5c22f9a5c5105f624c7a9c6d78c2bd343072d9cb7587e920b1d",
+        "config.js": "24db3727a804678ef12290ae258c7cf52afbc7a425bb452d87b7b2467ff7c559",
+        "docs/guide.md": "a7f8f449b94ecc726dc82fc7a0ae7c335431fa757f9493859bdf16e633689c3f",
+        "inject/body.html": "07727ead4a04fdeb2759a19e8cc358ba2692b807fb741a6daafaf02463fe8233",
+        "lib/engine.js": "a554c7abfa357288bbd73f47c9bcbf8eab7d8222ff63b1fd119a3ca5f9fb79f4",
+        "lib/quiz.js": "d697bbd1af41575a9ecee49781695f2dfb4a585bf0230cc39ac5d174dc9c2762",
+        "lib/store.js": "a740d879185e20c036ac17ab5cbca74d1f71097f4af3bc121fcddc826d8686c6",
+        "plugin.js": "0ec6f96fc4922c7ef41b36bd757c02926ee99d50e78fe85f7f30b9fbd9605b25",
+        "plugin.json": "788960b6a31c7c1c2d525fb7cae9ab9b7c9310def5d778c275f22302ecaadf78",
+        "public/quiz.css": "e8869fb30e22763357464e9aa7a353306b6631b8a7418ba4e483331e66aada67",
+        "public/quiz.js": "dedc96469e440c979b20d7d95655fbb25062b00b27be569b2a55ec5a8ec0cbb5"
+      }
+    },
     "security": {
       "version": "1.2.1",
       "files": {

package/plugins/quiz/CLAUDE.md

@@ -0,0 +1,43 @@
+# quiz - AI Assistant Guide
+
+## Purpose
+
+Timed quizzes on the public site with name-only players and leaderboards. 1.1.0 (2026-10-21), `tier: free`,
+disabled on arrival. Sibling of `crossword`; both sit in the sidebar's Tools > Games folder (`"group": "Games"`)
+and share `plugins/_lib/games` (server) + `_lib/public/games` (browser) + `_lib/admin/games` (admin kit).
+
+## Files
+
+- `lib/quiz.js` - PURE rules: `cleanQuiz` (the only gate on what the admin saves), `isOpen`, `planPlay` (question
+  order, option order, `draw`, fixed at start), `publicQuestion` (never `correct`), `mark`, `foldAnswer`.
+- `lib/engine.js` - PURE clock: `catchUp`, `serve`, `answer`, `end`, `view`. Each mutates the play and says if it
+  changed; the route saves through `plays.change()` (locked read-modify-write).
+- `lib/store.js` - `quiz-quizzes` collection + `plays = new PlayStore('quiz-plays', {order: 'score'})`.
+- `plugin.js` - routes (header comment lists them), shortcodes, the `top-scores` notification source.
+- `public/quiz.js` - the player (domma-reactive bindings), injected on every page by `inject/body.html`. Exports
+  `mount(el, {test})`, which the admin's Test screen uses.
+- `admin/views/quiz.js` - list, editor, test and plays screens, all domma-reactive through the admin kit
+  (`mountScreen`, `wireRows`, `sortableRows`, `testScreen`, `playsScreen` in `_lib/admin/games/kit.js`). Templates
+  are strings in the JS (a templateUrl goes through `_.render`, which eats data-each `{{ }}`); the questions are an
+  `observableArray` of question models with their answers nested as `{{#each options key=id}}`.
+- Tests: `tests/plugins/games-pure.test.js`, `tests/plugins/games-api.test.js` in the CMS repo.
+
+## Contracts
+
+- **The server keeps time and marks.** A question's clock starts at `serve()` - the GET of `/public/play/:id` -
+  and only then can it be answered (`answer()` refuses an unserved one with `code: 'not-current'`). So the player
+  must GET the next question after each answer, not use the one in the answer response. `GRACE_MS` (3s) covers
+  latency; late answers are marked wrong, never refused.
+- **The play token** (`X-Play-Token`) is returned once by start and compared with `timingSafeEqual`.
+  `PlayStore.adminView` strips it and the state from everything the admin sees.
+- **Leaderboards** rank finished, unhidden plays, best per `nameKey`, score then time (`_lib/games/ranking.js`).
+- **Shortcode prefix trap:** the engine's plugin-shortcode regex is a PREFIX match, so `[quiz` also matches
+  `[quiz-leaderboard`. `quiz-leaderboard` is registered with `{priority: 5}` so it runs first. Keep it that way.
+- **Domma bindings:** a `data-on-submit` handler must return `false` synchronously - an async one returns a
+  Promise and the form submits natively (page reload).
+- Collections' API verbs are all off: nothing here is readable through `/api/v1`.
+- **Test plays** (1.1.0): `GET/POST /quizzes/:id/test` (manage) give the start screen and a play marked `test: true`,
+  for the SAVED quiz whatever its status. It is played through the ordinary `/public/play` routes. `PlayStore` leaves
+  tests out of `forGame` (so boards, places, goes-per-name and the admin list), `todayBadge` skips them,
+  `afterFinish` never notifies for one, and the next test of the game clears them (`clearTests`). `/result` answers
+  `test: true` and `wouldPlace` instead of a place. Tests: `games-api.test.js` "test plays".

package/plugins/quiz/admin/css/index.css

@@ -1 +1,13 @@
-.qza-questions{display:flex;flex-direction:column;gap:.75rem}.qza-question{border:1px solid var(--gma-line);border-left:4px solid var(--dm-primary);border-radius:var(--dm-radius-md, 8px);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--dm-background, transparent)}.qza-question .form-select{width:auto}.qza-answers{display:flex;flex-direction:column;gap:.4rem}.qza-answer{display:flex;align-items:center;gap:.5rem;padding:.25rem .4rem;border-radius:6px}.qza-answer.is-right{background:color-mix(in srgb,var(--dm-success) 12%,transparent)}.qza-answer .form-input{flex:1;min-width:0}.qza-mark{display:inline-flex;align-items:center;cursor:pointer;padding:.2rem}.qza-mark input{width:1.1rem;height:1.1rem;accent-color:var(--dm-success)}.qza-fixed{flex:1;font-weight:500}.qza-more summary{cursor:pointer;color:var(--dm-text-muted);font-size:var(--dm-text-sm);margin-bottom:.5rem}
+/* Quiz admin - the question editor. Shared pieces are in /plugins/_lib/admin/games/games.css. */
+.qza-questions { display: flex; flex-direction: column; gap: .75rem; }
+.qza-question { border: 1px solid var(--gma-line); border-left: 4px solid var(--dm-primary); border-radius: var(--dm-radius-md, 8px);
+    padding: .85rem 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--dm-background, transparent); }
+.qza-question .form-select { width: auto; }
+.qza-answers { display: flex; flex-direction: column; gap: .4rem; }
+.qza-answer { display: flex; align-items: center; gap: .5rem; padding: .25rem .4rem; border-radius: 6px; }
+.qza-answer.is-right { background: color-mix(in srgb, var(--dm-success) 12%, transparent); }
+.qza-answer .form-input { flex: 1; min-width: 0; }
+.qza-mark { display: inline-flex; align-items: center; cursor: pointer; padding: .2rem; }
+.qza-mark input { width: 1.1rem; height: 1.1rem; accent-color: var(--dm-success); }
+.qza-fixed { flex: 1; font-weight: 500; }
+.qza-more summary { cursor: pointer; color: var(--dm-text-muted); font-size: var(--dm-text-sm); margin-bottom: .5rem; }