@font-face{font-family:Proza;src:url(/proza-regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Proza;src:url(/proza-bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Proza;src:url(/proza-bold.woff2)format("woff2");font-weight:800;font-style:normal;font-display:swap}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--paper:#151b19;--ink:#d7cdbc;--muted:#9d9385;--board:#3b4741;--board-line:#8a9287;--cell:#3b4741;--cell-line:#8a9287;--cell-hover:#46534c;--cell-selected:#4a4436;--cell-winning:#234a43;--panel:#202722;--panel-line:#e2d6c233;--button:#2a332d;--button-soft:#3a3a31;--white-piece:#efe9dc;--piece-stroke:#121514;--white-mark:#222;--sage-piece:#6f9b63;--sage-ink:#0b1609;--sage-mark:#0b1609;--focus:#8a9287;--focus-ink:#e4dac9;--warn:#d37a42;--arrow:#e7d2aec7;--legal-dot:#f5ebd69e;--shadow:0 18px 48px #00000057;font-family:Proza,sans-serif}*{box-sizing:border-box}html{background:var(--paper)}body{min-height:100vh;color:var(--ink);background:0 0;place-items:start center;margin:0;padding:clamp(32px,8vh,72px) 14px 32px;display:grid}.app{grid-template-columns:1fr;align-items:start;gap:16px;width:min(720px,100%);display:grid;position:relative}.app-title{text-align:center;margin:0;line-height:0}.app-title img{filter:invert(82%)sepia(12%)saturate(430%)hue-rotate(347deg)brightness(92%)contrast(88%);width:min(100%,240px);height:auto;display:inline-block}.tagline{color:#b8aa97c7;text-align:center;margin:-6px 0 2px;font-size:14px;font-weight:400;line-height:1.2}.play-area{box-shadow:var(--shadow);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:0 0;border:0;place-items:center;gap:0;padding:16px;display:grid}.board-wrap{aspect-ratio:1;place-items:center;width:min(100%,292px);display:grid}.board{aspect-ratio:1;background:var(--board);border:4px solid var(--board-line);width:100%;box-shadow:none;position:relative;overflow:hidden}.board-plane{z-index:2;position:absolute;inset:0}.cell-layer{z-index:2;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:0;display:grid;position:absolute;inset:0}.cell{appearance:none;background:var(--cell);border:0;border-right:1px solid var(--cell-line);border-bottom:1px solid var(--cell-line);cursor:pointer;place-items:center;min-width:0;margin:0;padding:0;display:grid;position:relative}.cell:nth-child(3n){border-right:0}.cell:nth-child(n+7){border-bottom:0}.cell:hover{background:var(--cell-hover)}.cell:focus-visible,.segmented button:focus-visible,.action:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.cell.selected{background:var(--cell-selected);box-shadow:inset 0 0 0 2px #00000047}.cell.winning{background:var(--cell-winning)}.cell.moving{z-index:9}.cell.legal:after{content:"";aspect-ratio:1;background:var(--legal-dot);z-index:4;border-radius:8px;width:12px;position:absolute}.cell-coord{color:var(--muted);pointer-events:none;z-index:1;font-family:Trebuchet MS,sans-serif;font-size:14px;line-height:1;position:absolute}.cell-coord.v{top:5px;left:5px}.cell-coord.h{bottom:4px;right:5px}.piece{aspect-ratio:1;z-index:3;transform-origin:50%;--piece-fill:var(--white-piece);--piece-mark:var(--white-mark);background:0 0;place-items:center;width:92%;display:grid;position:relative}.piece.red{--piece-fill:var(--sage-piece);--piece-mark:var(--sage-mark)}.piece .piece-face,.piece .piece-shadow-shape{transform-origin:50px 50px}.piece.diagonal .piece-face,.piece.diagonal .piece-shadow-shape{transform:rotate(45deg)}.piece.rotate-to-diagonal .piece-face,.piece.rotate-to-diagonal .piece-shadow-shape{animation:.18s ease-out both piece-rotate-to-diagonal}.piece.rotate-to-orthogonal .piece-face,.piece.rotate-to-orthogonal .piece-shadow-shape{animation:.18s ease-out both piece-rotate-to-orthogonal}.piece.place-in{animation:.18s ease-out both piece-place-in}.piece.move-in{z-index:12;animation:.18s ease-out both piece-move-in}@keyframes piece-move-in{0%{transform:translate(var(--move-x), var(--move-y))}to{transform:translate(0)}}@keyframes piece-place-in{0%{opacity:.72;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes piece-rotate-to-diagonal{0%{transform:rotate(0)}to{transform:rotate(45deg)}}@keyframes piece-rotate-to-orthogonal{0%{transform:rotate(45deg)}to{transform:rotate(90deg)}}@media (prefers-reduced-motion:reduce){.piece.rotate-to-diagonal .piece-face,.piece.rotate-to-diagonal .piece-shadow-shape,.piece.rotate-to-orthogonal .piece-face,.piece.rotate-to-orthogonal .piece-shadow-shape,.piece.place-in,.piece.move-in{animation:none}}.piece svg{width:100%;height:100%;display:block;overflow:visible}.panel{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;grid-template-rows:auto;gap:16px;padding:16px;display:grid}.status{text-align:center;background:0 0;border-left:0;grid-template-rows:22px 38px;align-content:start;gap:8px;min-height:72px;padding:0;display:grid}.status strong{font-size:18px;line-height:22px}.status span{color:var(--muted);place-items:start center;min-height:38px;font-size:14px;line-height:1.35;display:grid}.controls{gap:12px;display:grid}.label{color:var(--muted);margin:0;font-size:13px;font-weight:700}.segmented{border:1px solid var(--panel-line);background:var(--panel);grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.segmented button,.action{appearance:none;color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:0;min-height:44px}.segmented button{font-weight:800}.segmented button+button{border-left:1px solid var(--panel-line)}.segmented button.active{background:var(--focus);color:var(--focus-ink)}.actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.action{border:1px solid var(--panel-line);background:var(--button);padding:0 12px;font-weight:800}.action.primary{background:var(--focus);color:var(--focus-ink)}.actions .action:only-child{grid-column:1/-1}.board-actions{background:var(--panel);border:0;border-radius:0;grid-template-columns:1fr 1fr;gap:0;width:min(100%,292px);display:grid;overflow:hidden}.board-actions .action{background:var(--button-soft);border:0;min-height:36px}.board-actions .action.primary{background:var(--focus);color:var(--focus-ink)}.board-actions .action+.action{border-left:1px solid var(--panel-line)}.action:disabled{opacity:.42;cursor:not-allowed}.action.primary:disabled{background:var(--button-soft);color:var(--muted)}.option-stack{gap:10px;display:grid}.variant{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:700;display:flex}.variant input{width:22px;height:22px;accent-color:var(--focus)}.rules{justify-self:center;width:min(100%,520px);padding:4px 16px 16px}.rules-content{gap:18px;display:grid}.rules-copy{column-count:2;color:var(--ink);column-gap:28px;font-size:14px;line-height:1.45}.rules-copy p{break-inside:avoid;margin:0 0 10px}.rules-copy strong{font-weight:800}.site-footer{color:#b8aa979e;text-align:center;margin:12px 0 10px;font-size:12px;line-height:1.4}.rules-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;display:grid}.rule-card{background:0 0;align-items:start;gap:14px;padding:0;display:grid}.rule-card strong{margin-bottom:4px;font-size:14px;line-height:1.25;display:block}.rule-card p{color:var(--ink);margin:0;font-size:13px;line-height:1.35}.rule-board{aspect-ratio:1;border:2px solid var(--board-line);background:var(--board);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);justify-self:center;width:min(100%,150px);display:grid;position:relative}.rule-board span{border:0;border-right:1px solid var(--cell-line);border-bottom:1px solid var(--cell-line);place-items:center;min-width:0;display:grid;position:relative}.rule-board span:nth-child(3n){border-right:0}.rule-board span:nth-child(n+7){border-bottom:0}.rule-board span.rule-target{background:var(--cell-selected);box-shadow:inset 0 0 0 2px #00000047}.rule-board span.rule-win{background:var(--cell-winning)}.rule-piece{aspect-ratio:1;--piece-fill:var(--white-piece);--piece-mark:var(--white-mark);width:80%;display:block}.rule-piece.red{--piece-fill:var(--sage-piece);--piece-mark:var(--sage-mark);--piece-stroke:var(--piece-stroke)}.rule-piece svg{width:100%;height:100%;display:block;overflow:visible}.rule-piece.diagonal .rule-piece-face{transform-origin:50px 50px;transform:rotate(45deg)}.rule-arrow{color:var(--ink);font-size:15px;font-weight:800;line-height:1}.rule-arrow.muted{color:#b8aa976b}.rule-line{background:var(--focus);width:82%;height:5px;position:absolute;top:calc(50% - 2px);left:9%}.rule-line.diagonal{transform-origin:50%;transform:rotate(45deg)}.rule-line.top{top:calc(16.666% - 2px)}.rule-line.bottom{top:calc(83.333% - 2px)}.rule-line.left{width:5px;height:82%;top:9%;left:calc(16.666% - 2px)}.rule-motion{z-index:6;color:var(--arrow);pointer-events:none;font-size:20px;font-weight:800;line-height:1;position:absolute}.rule-motion.vector{width:100%;height:100%;display:block;inset:0}.rule-motion-shape{fill:var(--arrow)}.rule-board-arrow{z-index:7;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.rule-board-arrow path{fill:none;stroke:var(--arrow);stroke-width:2px;stroke-linecap:round}.rule-board-arrow marker path{fill:var(--arrow);stroke:none}.rule-edge-arrow{z-index:7;border-top:2px solid var(--arrow);pointer-events:none;width:33.333%;height:0;position:absolute;top:-10px;left:16.666%}.rule-edge-arrow.long{width:66.666%}.rule-edge-arrow:after{content:"";border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:12px solid var(--arrow);width:0;height:0;position:absolute;top:-6px;right:-1px}.rule-side-curve{z-index:7;pointer-events:none;width:24px;height:118px;position:absolute;top:10%;left:-24px;overflow:visible}.rule-side-curve.tail{width:36px;height:120px;top:9%;left:-36px}.rule-side-curve.same-cell{width:44px;height:44px;top:2px;left:-46px}.rule-side-curve path{fill:none;stroke:var(--arrow);stroke-width:2px;stroke-linecap:butt}.rule-side-curve marker path{fill:var(--arrow);stroke:none}.rule-motion.right{top:calc(50% - 12px);left:48%}.rule-motion.down{top:42%;left:calc(50% - 7px)}.rule-motion.curve{top:2px;right:4px;transform:rotate(18deg)}@media (width<=430px){.app{gap:14px}.rules{padding-inline:0}.rules-copy{column-gap:18px;font-size:13px}.rules-grid{gap:18px 14px}.rule-card{gap:12px}.rule-board{width:min(100%,118px)}}