:root{--zc-background:#f4f1e9;--zc-surface:#fcfaf4;--zc-ink:#293b32;--zc-muted:#68776b;--zc-accent:#375c47;--zc-accent-ink:#fafcf4;--zc-border:#d8ded2;--zc-soft:#e7ebe0;--zc-radius:12px;--zc-font:Georgia,serif;--zc-wood:#009e73;--zc-fire:#d55e00;--zc-earth:#e69f00;--zc-metal:#8e8e8e;--zc-water:#0072b2}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px}button,input{font:inherit}button{border:1px solid var(--zc-border);border-radius:calc(var(--zc-radius)*.65);background:var(--zc-surface);color:var(--zc-ink);padding:10px 13px;cursor:pointer;white-space:nowrap;min-height:39px}button:hover{background:var(--zc-soft)}button:disabled{opacity:.45;cursor:wait}button[hidden]{display:none}.primary{background:var(--zc-accent);color:var(--zc-accent-ink);border-color:var(--zc-accent)}.primary:hover{filter:brightness(1.07);background:var(--zc-accent)}:focus-visible{outline:2px solid var(--zc-accent);outline-offset:2px}
.game{max-width:520px;margin:auto;padding:14px 20px 20px;display:flex;flex-direction:column;align-items:stretch;gap:10px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--zc-muted)}.heading-line{display:flex;align-items:center;justify-content:space-between}.game h1{font:400 clamp(17px,3.8vw,24px)/1.6 var(--zc-font);margin:3px 0}.run-light{width:7px;height:7px;background:var(--zc-accent);border-radius:50%}
.score-row{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--zc-border);padding:4px 0 12px;gap:12px}.score-row>div{display:flex;flex-direction:column;gap:4px}.score-row>div+div{border-left:1px solid var(--zc-border);padding-left:18px}.score-row span{color:var(--zc-muted);font-size:10px}.score-row strong{font:500 24px/1.2 var(--zc-font,Georgia,serif);font-variant-numeric:tabular-nums}
.next-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--zc-muted)}#next{display:flex;align-items:center;gap:6px;color:var(--zc-ink)}
.board-wrap{display:flex;justify-content:center;position:relative}.board{--zc-gap:5px;width:min(100%,420px,calc(100dvh - 300px));min-width:238px;aspect-ratio:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--zc-gap);padding:var(--zc-gap);background:var(--zc-soft);border-radius:var(--zc-radius);touch-action:none}.board.full-cycle{box-shadow:0 0 0 2px var(--zc-accent)}
.cell{min-height:0;padding:9%;border-radius:calc(var(--zc-radius)*.5);background:var(--zc-surface);border:1px solid transparent;display:grid;place-items:center;transition:transform .18s ease,opacity .18s ease}.cell:hover{background:var(--zc-surface);border-color:var(--zc-border)}.cell.selected{border-color:var(--zc-accent);box-shadow:inset 0 0 0 2px var(--zc-accent);transform:scale(.94)}.cell.clear{opacity:.15;transform:scale(.7)}.cell.nudge{animation:nudge .3s ease}
.piece,.mini{width:100%;height:100%;fill:var(--zc-c);stroke:var(--zc-ink);stroke-width:1.6;stroke-opacity:.55}.mini{width:16px;height:16px;flex:none}.piece .mark,.mini .mark{fill:none;stroke:var(--zc-surface);stroke-width:2.4;stroke-opacity:.9}.el-wood{--zc-c:var(--zc-wood)}.el-fire{--zc-c:var(--zc-fire)}.el-earth{--zc-c:var(--zc-earth)}.el-metal{--zc-c:var(--zc-metal)}.el-water{--zc-c:var(--zc-water)}
.board-message{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:color-mix(in srgb,var(--zc-background) 88%,transparent);border-radius:var(--zc-radius);text-align:center;padding:16px}.board-message[hidden]{display:none}.board-message h2{font:400 24px var(--zc-font);margin:0 0 6px}.board-message p{margin:0;color:var(--zc-muted);line-height:1.7}.board-message button{margin-top:12px}
.status-row{display:flex;justify-content:space-between;gap:6px;align-items:center;font-size:10px;color:var(--zc-muted)}#status{color:var(--zc-ink)}.cycle-line{font-size:11px;margin:0;min-height:1.6em;color:var(--zc-ink)}
.note{background:var(--zc-surface);border:1px solid var(--zc-border);border-radius:var(--zc-radius);padding:10px 14px;font-size:12px;line-height:1.7}.note[hidden]{display:none}.note p{margin:0 0 6px;font-family:var(--zc-font)}.note div{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--zc-muted);font-size:10px}.note label{display:flex;gap:5px;align-items:center}.note input{accent-color:var(--zc-accent)}
.main-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:7px}.main-controls button{font-size:12px;padding:8px}.text-button{background:none;border:none;color:var(--zc-muted);font-size:11px;padding:0;min-height:25px}
.technical{font-size:11px;color:var(--zc-muted);line-height:1.8}.technical summary{cursor:pointer}.technical p{margin:6px 0}.technical b{color:var(--zc-ink);font-weight:600}.cycle-list{display:flex;flex-wrap:wrap;gap:4px 14px}.cycle-list span{display:flex;align-items:center;gap:5px}
dialog{background:var(--zc-surface);color:var(--zc-ink);border:1px solid var(--zc-border);border-radius:var(--zc-radius);max-width:min(90vw,370px);padding:24px}dialog::backdrop{background:#0006}dialog h2{font:24px var(--zc-font)}dialog p{line-height:1.8;color:var(--zc-muted)}dialog>div{display:flex;gap:8px;justify-content:flex-end}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}[data-motion="reduced"] *,[data-motion="reduced"] *::before{animation:none!important;transition:none!important}
@media(max-width:420px){.game{padding:10px 12px;gap:8px}.board{--zc-gap:4px}.game h1{font-size:19px}.score-row strong{font-size:22px}.main-controls button{min-height:38px;font-size:11px}}@media(max-height:600px){.game-heading,.technical{display:none}.board{width:min(100%,calc(100dvh - 215px))}}


/* Five distinct materials, arranged around one circular relationship. */
:root{--zc-wu-black:#22232b;--zc-wu-paper:#fffae9;--zc-wood:#47b395;--zc-fire:#ee8065;--zc-earth:#f1c449;--zc-metal:#b4a0e4;--zc-water:#65b8dd}
.game{max-width:1170px;padding:24px 28px;display:grid;grid-template-columns:190px minmax(0,1fr) 188px;gap:18px 28px;align-items:start}.game-heading{grid-column:1/-1;grid-row:1;border-bottom:2px solid var(--zc-ink);padding-bottom:19px}.game h1{font:850 clamp(35px,5.3vw,61px)/1 system-ui,sans-serif;letter-spacing:-.065em;margin:12px 0 0}.game h1 br{display:none}.game h1 em{font-size:.45em;font-weight:500;font-style:normal;letter-spacing:-.025em;white-space:nowrap}.eyebrow{font:700 8px ui-monospace,monospace;letter-spacing:.14em}.run-light{width:39px;height:39px;border-radius:0;background:conic-gradient(var(--zc-wood) 0 20%,var(--zc-fire) 20% 40%,var(--zc-earth) 40% 60%,var(--zc-metal) 60% 80%,var(--zc-water) 80%);border:2px solid var(--zc-wu-black);box-shadow:4px 4px 0 var(--zc-wu-black);transform:rotate(12deg);flex:none;margin-left:15px}.cycle-study{grid-column:1;grid-row:2;position:relative;height:220px;margin-top:13px;isolation:isolate}.cycle-orbit{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--zc-border);stroke-width:1.3;pointer-events:none}.cycle-orbit circle{stroke-dasharray:3 6}.cycle-study:after{content:'5';position:absolute;top:55px;left:0;right:0;text-align:center;font:900 72px/1 system-ui,sans-serif;letter-spacing:-.1em;color:var(--zc-ink);opacity:.14;z-index:-1}.cycle-map{margin:0;padding:0;list-style:none;position:absolute;inset:0}.cycle-map li{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-50%);width:63px;font:700 9px ui-monospace,monospace;color:var(--zc-ink)}.cycle-map li:nth-child(1){left:50%;top:9%}.cycle-map li:nth-child(2){left:98%;top:41%}.cycle-map li:nth-child(3){left:81%;top:93%}.cycle-map li:nth-child(4){left:19%;top:93%}.cycle-map li:nth-child(5){left:2%;top:41%}.cycle-map .mini{width:33px;height:33px;padding:3px;background:var(--zc-wu-paper);border:2px solid var(--zc-wu-black);border-radius:50%;box-shadow:2px 2px 0 var(--zc-wu-black)}.cycle-map i{display:none}.cycle-map .next-element .mini{outline:3px solid var(--zc-accent);outline-offset:4px}.cycle-map .next-element span{text-decoration:underline;text-underline-offset:4px}.next-row{grid-column:1;grid-row:3;flex-direction:column;align-items:flex-start;gap:11px;font-size:9px;padding-top:19px}.next-row>span:first-child{font:700 8px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em}.next-row #next{font-size:11px;line-height:1.5}.board-wrap{grid-column:2;grid-row:2/6;min-width:0}.board{width:100%;max-width:460px;min-width:0;--zc-gap:5px;background:var(--zc-wu-paper);padding:9px;border:3px solid var(--zc-wu-black);border-radius:3px;box-shadow:7px 7px 0 var(--zc-wu-black)}.cell{padding:10%;border:1.5px solid #22232b44;border-radius:3px;background:#fffdf5;box-shadow:0 2px 0 #22232b25}.cell:hover{background:#fff6cb;border-color:var(--zc-wu-black)}.cell.selected{border:2px solid var(--zc-wu-black);background:#f7e9a3;box-shadow:inset 0 0 0 1px var(--zc-wu-black);transform:scale(.92)}.piece,.mini{stroke:var(--zc-wu-black);stroke-opacity:1;stroke-width:1.5}.piece .mark,.mini .mark{stroke:var(--zc-wu-black);stroke-width:2;stroke-opacity:.55}.cell.clear{background:#f8dd71;opacity:.15;transform:scale(.7)}.score-row{grid-column:3;grid-row:2;display:grid;grid-template-columns:1fr;padding:0;border:2px solid var(--zc-wu-black);background:var(--zc-wu-paper);color:var(--zc-wu-black);box-shadow:4px 4px 0 var(--zc-wu-black);gap:0}.score-row>div{padding:10px 14px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}.score-row>div+div{border:0;border-top:1px solid var(--zc-wu-black);padding-left:14px}.score-row span{font:700 8px ui-monospace,monospace;text-transform:uppercase;color:#55545a}.score-row strong{font:800 29px/1.2 system-ui,sans-serif;letter-spacing:-.04em}.main-controls{grid-column:3;grid-row:3;grid-template-columns:1fr;gap:8px}.main-controls button{min-height:44px;border-radius:3px;font-size:11px}.status-row{grid-column:3;grid-row:4;display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:9px;line-height:1.7}.cycle-line{grid-column:1;grid-row:4;min-height:0;font-size:10px;line-height:1.7}.cycle-line:empty{display:none}.note{grid-column:1/-1;grid-row:6}.technical{grid-column:1/-1;grid-row:7;border-top:1px solid var(--zc-border);padding-top:8px}.technical summary{min-height:44px;cursor:pointer;padding-top:9px;font-size:10px}.text-button{min-height:44px}.board-message{background:color-mix(in srgb,var(--zc-background) 96%,transparent);border:3px solid var(--zc-ink);border-radius:3px}.board-message h2{font:800 27px system-ui,sans-serif;letter-spacing:-.04em}.board-message button{min-height:44px}.board.full-cycle{box-shadow:7px 7px 0 var(--zc-wu-black),0 0 0 4px var(--zc-earth)}
@media(max-width:850px){.game{max-width:620px;grid-template-columns:1fr;gap:11px;padding:15px 14px}.game-heading{grid-column:1;grid-row:1;padding-bottom:12px;display:block}.game h1{font-size:37px;margin-top:8px}.game h1 em{display:block;font-size:15px;margin-top:7px}.eyebrow{font-size:7px}.run-light{width:31px;height:31px}.score-row{grid-column:1;grid-row:2;grid-template-columns:repeat(3,1fr);box-shadow:3px 3px 0 var(--zc-wu-black)}.score-row>div{padding:7px 8px;gap:4px;flex-direction:column;align-items:flex-start}.score-row>div+div{border-top:0;border-left:1px solid var(--zc-wu-black);padding-left:12px}.score-row span{font-size:7px}.score-row strong{font-size:24px}.cycle-study{grid-column:1;grid-row:3;height:auto;margin:0}.cycle-orbit,.cycle-study:after{display:none}.cycle-map{position:static;display:flex;justify-content:space-between;gap:6px;padding:2px 0}.cycle-map li{position:static;transform:none;flex:1;gap:5px;width:auto;font-size:7px}.cycle-map .mini{width:25px;height:25px;padding:2px;border-width:1px;box-shadow:1px 1px 0 var(--zc-wu-black)}.cycle-map .next-element .mini{outline-width:2px;outline-offset:2px}.next-row{grid-column:1;grid-row:4;flex-direction:row;justify-content:space-between;padding:0;gap:6px;font-size:8px;align-items:center}.next-row #next{font-size:9px}.next-row>span:first-child{font-size:7px}.board-wrap{grid-column:1;grid-row:5}.board{max-width:350px;--zc-gap:4px;padding:6px;border-width:2px;box-shadow:4px 4px 0 var(--zc-wu-black)}.cell{border-radius:2px;padding:9%}.main-controls{grid-column:1;grid-row:6;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:6px}.main-controls button{font-size:10px;padding:8px 5px;min-height:44px}.status-row{grid-column:1;grid-row:7;flex-direction:row;justify-content:space-between;font-size:8px}.cycle-line{grid-column:1;grid-row:8;font-size:9px}.note{grid-column:1;grid-row:9}.technical{grid-column:1;grid-row:10;display:block}.technical summary{font-size:9px}.board-message h2{font-size:25px}}
@media(max-width:420px){.game{gap:9px;padding:13px 12px}.game h1{font-size:31px}.game-heading{padding-bottom:10px}.score-row>div{padding-top:5px;padding-bottom:5px}.score-row strong{font-size:22px}.board{max-width:332px;--zc-gap:3px;padding:5px}.cycle-map li{gap:4px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* The five-phase board scales before the page; help and notes scroll in place. */
html,body{height:100%;overflow:hidden}
.game{height:100dvh;max-height:100dvh;grid-template-rows:auto minmax(0,1fr) auto auto auto auto minmax(44px,60px);gap:6px 18px;overflow:hidden;padding-bottom:7px}
.game-heading{padding-bottom:8px}
.game h1{font-size:clamp(31px,4vw,50px);margin:4px 0 0}
.cycle-study{height:min(190px,26dvh);margin-top:5px}
.board-wrap{min-height:0;align-self:stretch}
.board{width:min(100%,calc(100dvh - 210px),460px)}
.score-row>div{padding:6px 10px}
.main-controls{gap:4px}
.main-controls button{min-height:38px}
.note{max-height:65px;overflow:auto;overscroll-behavior:contain}
.technical{max-height:60px;overflow:auto;overscroll-behavior:contain}
.technical:focus-visible,.note:focus-visible{outline:2px solid var(--zc-accent);outline-offset:-2px}
@media(max-width:850px){.game{grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto auto auto minmax(42px,55px);gap:4px;padding:6px 10px}.game-heading{padding-bottom:3px}.game h1{font-size:clamp(25px,7vw,32px);margin-top:2px}.game h1 em{font-size:12px;margin-top:1px}.score-row>div{padding:3px 5px}.score-row strong{font-size:18px}.cycle-study{height:auto}.cycle-map li{gap:2px}.cycle-map .mini{width:21px;height:21px}.next-row{min-height:20px}.board-wrap{min-height:0}.board{width:min(100%,calc(100dvh - 385px),350px)}.main-controls button{min-height:36px}.note{max-height:48px}.technical{max-height:55px;padding-top:0}.technical summary{min-height:38px;padding-top:5px}}