Land first. Then climb or slide.

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Land first. Then climb or slide.</title><style>
:root{color-scheme:light;--accent:#37614b;--wash:#e4f1e7;--ink:#202d3b;--paper:#fffdf9}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#eeeae2;font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:980px;margin:auto;padding:28px 24px 40px}header{border-top:6px solid var(--accent);padding:20px 0 24px}.kicker{color:var(--accent);font-weight:750;letter-spacing:.06em;margin:0 0 8px}h1{font:700 clamp(30px,5vw,46px)/1.15 Georgia,serif;margin:0 0 14px;max-width:780px}h2{font-size:23px;line-height:1.3;margin:0 0 14px}h3{font-size:19px;margin:12px 0 8px}p{margin:0 0 16px}button,input,textarea,select{font:inherit}button{background:white;border:1px solid #87949b;color:var(--ink);border-radius:8px;padding:11px 16px;min-height:48px;cursor:pointer;font-weight:650}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:white;border-color:var(--accent)}:focus-visible{outline:3px solid #b45a1e;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;min-width:0;max-width:100%;border:1px solid #80909b;border-radius:7px;padding:11px;background:white;color:var(--ink)}input[type=checkbox],input[type=radio]{width:21px;height:21px;accent-color:var(--accent)}textarea{resize:vertical}.panel{background:var(--paper);border:1px solid #ccd2d1;border-radius:12px;padding:24px;margin-bottom:20px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.two>.panel{margin:0}.two{margin-bottom:20px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.result{padding:18px;background:var(--wash);border-left:5px solid var(--accent);margin-top:18px;white-space:pre-line;overflow-wrap:anywhere}.note{color:#465565;font-size:16px}.strip{padding:18px;background:var(--wash);border-radius:8px;margin-bottom:18px}table{border-collapse:collapse;width:100%;font-size:16px;table-layout:fixed}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #cbd0d1;overflow-wrap:anywhere;vertical-align:top}th{background:var(--wash)}ol,ul{padding-left:24px}li+li{margin-top:8px}pre{font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}code{font-size:16px}.grid{display:grid;gap:5px;max-width:440px}.grid button{padding:5px;min-width:0}.grid input{padding:5px!important;text-align:center;font-weight:750}blockquote{font:500 26px/1.5 Georgia,serif;margin:16px 0}footer{font-size:16px;color:#465565;margin-top:22px}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}mark{background:#e0efad;color:var(--ink)}@media(max-width:560px){main{padding:18px 12px 28px}.panel{padding:20px 16px}.two{grid-template-columns:minmax(0,1fr)}h1{font-size:32px}.actions button{flex:1 1 135px}th,td{padding:8px 5px}.grid button{min-height:40px}blockquote{font-size:24px}}
</style></head><body><main><header><p class="kicker">BOARD LOGIC · SIX-ROLL FIXTURE</p><h1>Land first. Then climb or slide.</h1><p>Fixture mode, not a random die. Exact25 wins; six has no bonus turn. Climb/slide applies only to the square landed on.</p></header><section class="panel"><h2>Original numbered board</h2><div class="grid" style="grid-template-columns:repeat(5,minmax(0,1fr))"><div class="strip" id="square21" style="margin:0;min-height:64px;padding:6px;text-align:center">21</div><div class="strip" id="square22" style="margin:0;min-height:64px;padding:6px;text-align:center">22</div><div class="strip" id="square23" style="margin:0;min-height:64px;padding:6px;text-align:center">23</div><div class="strip" id="square24" style="margin:0;min-height:64px;padding:6px;text-align:center">24</div><div class="strip" id="square25" style="margin:0;min-height:64px;padding:6px;text-align:center">25</div><div class="strip" id="square20" style="margin:0;min-height:64px;padding:6px;text-align:center">20</div><div class="strip" id="square19" style="margin:0;min-height:64px;padding:6px;text-align:center">19</div><div class="strip" id="square18" style="margin:0;min-height:64px;padding:6px;text-align:center">18</div><div class="strip" id="square17" style="margin:0;min-height:64px;padding:6px;text-align:center">17</div><div class="strip" id="square16" style="margin:0;min-height:64px;padding:6px;text-align:center">16</div><div class="strip" id="square11" style="margin:0;min-height:64px;padding:6px;text-align:center">11</div><div class="strip" id="square12" style="margin:0;min-height:64px;padding:6px;text-align:center">12</div><div class="strip" id="square13" style="margin:0;min-height:64px;padding:6px;text-align:center">13</div><div class="strip" id="square14" style="margin:0;min-height:64px;padding:6px;text-align:center">14</div><div class="strip" id="square15" style="margin:0;min-height:64px;padding:6px;text-align:center">15</div><div class="strip" id="square10" style="margin:0;min-height:64px;padding:6px;text-align:center">10</div><div class="strip" id="square9" style="margin:0;min-height:64px;padding:6px;text-align:center">9</div><div class="strip" id="square8" style="margin:0;min-height:64px;padding:6px;text-align:center">8</div><div class="strip" id="square7" style="margin:0;min-height:64px;padding:6px;text-align:center">7</div><div class="strip" id="square6" style="margin:0;min-height:64px;padding:6px;text-align:center">6</div><div class="strip" id="square1" style="margin:0;min-height:64px;padding:6px;text-align:center">1</div><div class="strip" id="square2" style="margin:0;min-height:64px;padding:6px;text-align:center">2</div><div class="strip" id="square3" style="margin:0;min-height:64px;padding:6px;text-align:center">3</div><div class="strip" id="square4" style="margin:0;min-height:64px;padding:6px;text-align:center">4</div><div class="strip" id="square5" style="margin:0;min-height:64px;padding:6px;text-align:center">5</div></div><div id="positions" class="result" role="status" aria-live="polite"></div><div class="actions"><button type="button" id="roll">Roll next fixture face</button><button type="button" id="reset">Reset main tape</button><button type="button" id="stageWin">Stage A23 / face2</button><button type="button" id="stageOver">Stage A23 / face3</button></div><div id="state" class="result" role="status" aria-live="polite"></div><div id="feedback" class="result" role="status" aria-live="polite"></div></section><section class="panel"><h2>Connections and committed turns</h2><p>Climbs3→11,8→17 · Slides14→6,22→12. Endpoints are not new starts.</p><div id="history" class="result" role="status" aria-live="polite">No rolls yet.</div></section><footer>Resolve the actual landing square once. This 25-square variant needs an exact finish and gives no bonus for six.</footer><noscript>JavaScript is required for the local controls. The accompanying article contains worked examples.</noscript></main><script>
(()=>{'use strict';const $=id=>document.getElementById(id);
let pos=[0,0],turn=0,tape=[3,1,3,6,2,4],cursor=0,won=false,mode='Main fixture';const jumps={3:11,8:17,14:6,22:12},history=[];function render(){$('positions').textContent='A '+pos[0]+' / B '+pos[1]+' / '+(pos.includes(0)?'Position0 is off board.':'Both tokens on board.');for(let s=1;s<=25;s++)$('square'+s).textContent=s+' '+(pos[0]===s?' A':'')+(pos[1]===s?' B':'')+(jumps[s]?' →'+jumps[s]:'');$('state').textContent=mode+' / '+(won?'Won · Player '+(turn===0?'A':'B'):'Next actor: '+(turn===0?'A':'B'))+' / Tape '+cursor+'/'+tape.length;$('history').textContent=history.length?history.join(' / '):'No rolls yet.';}function reset(stage){pos=stage?[23,0]:[0,0];turn=0;tape=stage?[stage]:[3,1,3,6,2,4];cursor=0;won=false;history.length=0;mode=stage?'STAGED A23 / face'+stage:'Main fixture';$('feedback').textContent='Roll uses one validated fixture face.';render();}$('roll').addEventListener('click',()=>{if(won)return;if(cursor>=tape.length){$('feedback').textContent='No fixture roll available. State unchanged.';return;}const face=tape[cursor];if(!Number.isInteger(face)||face<1||face>6){$('feedback').textContent='Invalid fixture face; source correction required. State unchanged.';return;}const who=turn,old=pos[who],landing=old+face,over=landing>25,connection=over?null:jumps[landing],final=over?old:connection||landing;cursor++;pos[who]=final;won=final===25;const result=won?'Player '+(who===0?'A':'B')+' wins':over?'Overshoot; stays '+old:'Landing resolved';history.push((who===0?'A':'B')+' '+old+' +'+face+' → tentative '+landing+' → '+(connection?'connection '+landing+'→'+connection:'no connection')+' → final '+final+'; '+result);if(!won)turn=1-turn;$('feedback').textContent=result;render();});$('reset').addEventListener('click',()=>reset(0));$('stageWin').addEventListener('click',()=>reset(2));$('stageOver').addEventListener('click',()=>reset(3));reset(0);
})();
</script></body></html>