.sp-game{width:min(100%,620px);margin:0 auto;color:#342f47;--sp-purple:#775ad1;--sp-gap:5px}.sp-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:#f4f0ff;border-radius:16px;margin-bottom:12px}.sp-status strong{font-size:1rem}.sp-status span{font-size:.8rem;white-space:nowrap;color:#675d7f}.sp-rules{font-size:.98rem;line-height:1.55;margin:10px 0 16px}.sp-board-wrap{position:relative;width:min(100%,390px);margin:0 auto}.sp-board{display:grid;grid-template-columns:repeat(var(--sp-n),minmax(0,1fr));gap:var(--sp-gap);width:100%;padding:8px;background:#eeebf6;border-radius:16px;box-sizing:border-box}.sp-cell{position:relative;appearance:none;display:grid;place-items:center;width:100%;min-width:0;aspect-ratio:1;min-height:0!important;padding:0;border:2px solid transparent;border-radius:9px;background:#fff;color:#514166;box-shadow:0 2px 0 #ded7ea;font:700 clamp(17px,4.6vw,29px)/1 sans-serif;cursor:pointer;touch-action:manipulation;transition:background .12s,border-color .12s;overflow:hidden}.sp-cell:disabled{cursor:default;opacity:1}.sp-cell:not(:disabled):hover{border-color:#8b72cf;background:#f9f5ff}.sp-cell:focus-visible,.sp-game button:focus-visible{outline:3px solid #402b86;outline-offset:2px;z-index:2}.sp-cell svg{width:100%;height:100%}.sp-cell.sp-lit{background:#ffe699;color:#936116}.sp-cell.sp-off{background:#e2e3f0;color:#9390a9}.sp-cell.sp-painted,.sp-cell.sp-piece{background:#c8b6f6;color:#442675}.sp-cell.sp-blocked{background:repeating-linear-gradient(45deg,#dcdde3 0 5px,#eef0f3 5px 10px);color:#9492a1;box-shadow:none}.sp-cell.sp-selected{border:3px solid #39256a;background:#edd9ff;box-shadow:0 0 0 2px #d6b7fc}.sp-cell.sp-visited{background:#d0eef0;color:#1b5b65}.sp-cell.sp-current{background:#8763d4;color:white;border-color:#4e3688}.sp-cell.sp-possible:not(.sp-current){border-color:#96c9c4}.sp-cell.sp-aligned{background:#d7eee4;color:#266655}.sp-cell.sp-turn{background:#ffeacb;color:#8b5723}.sp-cell.sp-pebble{background:#dfd6f5;color:#684fa2}.sp-cell.sp-hole{background:#f8f5fe;color:#c4b7da}.sp-cell.sp-beam{background:#ffefb6;color:#69471c;box-shadow:inset 0 0 0 2px #eecb70}.sp-cell.sp-goal{background:#fff0b9;color:#8f641d}.sp-cell.sp-fence-top{border-top-color:#8a7298}.sp-cell.sp-fence-left{border-left-color:#8a7298}.sp-cell.sp-fence-right{border-right-color:#8a7298}.sp-cell.sp-fence-bottom{border-bottom-color:#8a7298}.sp-cell.sp-planted{background:#c6e8c8;color:#377443}.sp-board-rect{gap:1px;padding:6px}.sp-board-rect .sp-cell{border-radius:2px}.sp-cell.sp-domino-0{background:#dfd2f5;color:#574479}.sp-cell.sp-domino-1{background:#cbe4f1;color:#345d78}.sp-cell.sp-domino-2{background:#f2d5c1;color:#804e2e}.sp-cell.sp-domino-3{background:#cdebd7;color:#366747}.sp-reference{margin:10px auto 20px;padding:12px;background:#f5f2fa;border-radius:14px;width:max-content;max-width:100%;text-align:center}.sp-reference p{font-size:.8rem;margin:0 0 9px}.sp-mini{display:grid;grid-template-columns:repeat(var(--sp-n),1fr);gap:3px;width:140px;margin:auto}.sp-mini span{aspect-ratio:1;border-radius:3px;background:white;border:1px solid #d8d2e5}.sp-mini .is-filled{background:#9681d1;border-color:#9681d1}.sp-endpoints{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.78rem;font-weight:700;margin:12px 0}.sp-column-clues{display:grid;grid-template-columns:repeat(var(--sp-n),minmax(0,1fr));align-items:end;width:min(calc(100% - 48px),342px);padding:0 8px;margin:0 auto 5px 48px;box-sizing:border-box;text-align:center;font-size:.85rem;line-height:1.35;color:#594772}.sp-with-clues{display:grid;grid-template-columns:43px minmax(0,1fr);gap:5px;width:min(100%,438px)}.sp-row-clues{display:grid;grid-template-rows:repeat(var(--sp-n),minmax(0,1fr));padding:8px 0;gap:var(--sp-gap);font-size:.8rem;line-height:1.05;text-align:right;align-items:center;word-spacing:3px}.sp-row-clues span{display:block}.sp-subtle{font-size:.82rem;color:#706680;line-height:1.5;margin:12px 0;text-align:center}.sp-feedback{min-height:1.5em;font-size:.9rem;line-height:1.5;background:#faf6eb;border-radius:10px;padding:0 10px;margin:12px 0}.sp-feedback:not(:empty){padding:10px}.sp-toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0}.sp-game .sp-toolbar button,.sp-switch-controls button,.sp-complete button{min-height:44px;padding:9px 13px;border:1px solid #d2c7e6;border-radius:11px;background:white;color:#5c437e;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}.sp-game button:disabled:not(.sp-cell){opacity:.5;cursor:default}.sp-switch-controls{margin:14px 0}.sp-switch-controls p{font-size:.82rem;font-weight:700;text-align:center}.sp-switch-controls>div{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0}.sp-switch-controls button{font-size:.76rem;padding:8px 10px}.sp-direction-pad{display:grid;grid-template-columns:repeat(4,52px);justify-content:center;gap:8px;margin:18px auto}.sp-direction-pad button{min-width:44px;min-height:48px;border:1px solid #d1c2e6;border-radius:12px;background:#f0e8fc;font-size:25px;color:#63418f;cursor:pointer}.sp-program{border:1px solid #e0d8ed;border-radius:13px;padding:12px;margin:12px 0}.sp-program p{font-size:.87rem;font-weight:700;margin:0 0 10px}.sp-program p span{font-weight:400;color:#786e89}.sp-command-list{display:flex;flex-wrap:wrap;gap:5px;min-height:34px;align-items:center}.sp-command-list span{background:#ede6f8;padding:5px 8px;border-radius:6px;font-size:.85rem}.sp-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:15px 0}.sp-palette button{width:46px;min-height:46px;border:2px solid #ffffff;border-radius:12px;font-size:22px;box-shadow:0 0 0 1px #c7bdd8;cursor:pointer}.sp-colour-0{background:#d9c6f1!important;color:#604584!important}.sp-colour-1{background:#bde5db!important;color:#285f53!important}.sp-colour-2{background:#f7d096!important;color:#7a521c!important}.sp-colour-3{background:#b9d9f4!important;color:#335c84!important}.sp-colour-4{background:#f4c2d6!important;color:#82435c!important}.sp-colour-5{background:#e6e9a3!important;color:#5f651c!important}.sp-complete{text-align:center;background:#edf5eb;border:1px solid #c9dfc3;border-radius:18px;padding:22px 16px;margin-top:18px}.sp-complete>span{color:#ad7a1e;font-size:30px;letter-spacing:6px}.sp-complete h3{margin:8px 0}.sp-complete p{font-size:.9rem;line-height:1.5}.sp-complete button{background:#7555b5;color:white;border-color:#7555b5}.sp-board-pipe .sp-cell{border-radius:3px;padding:0}.sp-board-laser .sp-cell{font-size:clamp(26px,7vw,40px)}
@media(min-width:480px){.sp-column-clues{margin-left:calc((100% - 438px)/2 + 48px);max-width:390px;width:calc(100% - 48px)}}
@media(max-width:380px){.sp-game{--sp-gap:3px}.sp-status{flex-direction:column;align-items:flex-start;gap:4px;padding:11px}.sp-board{padding:5px;border-radius:12px}.sp-cell{border-radius:6px;font-size:19px}.sp-toolbar{gap:6px}.sp-game .sp-toolbar button{padding:8px 10px;font-size:.8rem}.sp-direction-pad{grid-template-columns:repeat(4,46px);gap:7px}.sp-row-clues{font-size:.7rem;word-spacing:0}.sp-with-clues{grid-template-columns:34px minmax(0,1fr);gap:3px}.sp-column-clues{margin-left:37px;width:calc(100% - 37px);font-size:.75rem;padding:0 5px}.sp-reference{padding:10px}.sp-rules{font-size:.91rem}.sp-palette{gap:7px}.sp-palette button{width:40px;min-height:44px}}
/* Dense boards can be enlarged without expanding the page itself. */
.sp-grid-viewport{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 0 7px;border-radius:12px;-webkit-overflow-scrolling:touch}.sp-grid-content{width:100%;max-width:390px;margin-inline:auto}.sp-grid-content.sp-content-clues{max-width:438px}.sp-grid-content .sp-board-wrap{width:100%;max-width:none}.sp-grid-content .sp-column-clues{width:calc(100% - 48px);max-width:none;margin-left:48px;padding-inline:8px}.sp-grid-viewport.sp-zoomed .sp-grid-content{width:var(--sp-grid-width);max-width:none}.sp-zoomed .sp-board{gap:5px;padding:8px}.sp-zoomed .sp-with-clues{grid-template-columns:43px minmax(0,1fr);gap:5px}.sp-zoomed .sp-column-clues{width:calc(100% - 48px);margin-left:48px;padding-inline:8px;font-size:.85rem}.sp-zoomed .sp-cell{min-height:44px!important}.sp-zoom-control{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0}.sp-zoom-control button{min-height:44px;padding:8px 12px;border:1px solid #d2c7e6;border-radius:10px;background:#f4effc;color:#5c437e;font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer}.sp-zoom-control span{font-size:.77rem;color:#706680;text-align:center}.sp-grid-viewport:focus-visible{outline:3px solid #775ad1;outline-offset:2px}
@media(max-width:380px){.sp-grid-content .sp-column-clues{width:calc(100% - 37px);margin-left:37px;padding-inline:5px}.sp-zoomed .sp-column-clues{width:calc(100% - 48px);margin-left:48px;padding-inline:8px}.sp-zoomed .sp-cell{font-size:24px}}