.puzzle{padding:1.1rem;scroll-margin-top:6rem}.puzzle-head{display:flex;justify-content:space-between;gap:.5rem 1rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.8rem}.puzzle-head h2{font-size:1.2rem;letter-spacing:-.01em;font-weight:700}.puzzle-head span{font-size:.82rem;color:var(--faint)}.status{min-height:3rem;margin-top:.8rem;font-size:.95rem;color:var(--muted)}.status b{color:var(--olive);font-weight:600}.status.mate{color:var(--text)}.status.mate:before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:2px;background:var(--olive);margin-right:.45rem;vertical-align:.05em}.status.hint{color:var(--text)}.status .moves-so-far{display:block;margin-bottom:.3rem;font-weight:600;color:var(--olive)}.status .move-link{font:inherit;font-weight:600;color:var(--olive);background:none;border:0;padding:0 .15em;margin:0 -.15em;border-radius:3px;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.2em}.status .move-link:hover{text-decoration-color:currentColor}.status .move-link:focus-visible{outline:2px solid var(--olive);outline-offset:1px}.status .move-link.move-before{font-weight:400;color:var(--muted)}.status .move-link.current{background:var(--olive);color:var(--on-olive);text-decoration:none}.puzzle-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)}.puzzle .icon-button{display:grid;place-items:center;width:2.2rem;height:2.2rem;padding:0;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--muted);cursor:pointer}.puzzle .icon-button:hover,.puzzle .icon-button[aria-expanded=true]{color:var(--olive);border-color:var(--olive)}.puzzle .icon-button[hidden]{display:none}.hint-button{margin-right:auto}.hint-button:hover{color:var(--olive);border-color:var(--olive)}.full-game .tip-link a{display:inline-flex;align-items:center;gap:.55rem;padding:.3rem .85rem .3rem .3rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);background:color-mix(in srgb,var(--amber) 8%,var(--card));color:var(--text);font-size:.82rem;font-weight:600;text-decoration:none;line-height:1.25;transition:border-color .15s,background-color .15s}.full-game .tip-link a:hover,.full-game .tip-link a:focus-visible{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,var(--card))}.full-game img{width:28px;height:28px;border-radius:50%;flex:none}.full-game .full-game-arrow{color:var(--amber);transition:transform .15s}.full-game a:hover .full-game-arrow,.full-game a:focus-visible .full-game-arrow{transform:translate(3px)}.full-game .tip{left:auto;right:0}.full-game .tip:after{left:auto;right:1.2rem;transform:translate(50%,-50%) rotate(45deg)}.replay{display:flex;gap:.25rem;margin-right:auto}.replay[hidden]{display:none}.export{position:relative;flex:none}.export-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:20;width:max-content;max-width:min(20rem,80vw);display:grid;gap:.15rem;padding:.4rem;border-radius:12px;background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--shadow)}.export-menu[hidden]{display:none}.export-menu button{font:inherit;font-size:.88rem;text-align:left;padding:.45rem .7rem;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer}.export-menu button:hover,.export-menu button:focus-visible{background:var(--card-2)}.export-note{font-size:.8rem;color:var(--muted);padding:.3rem .7rem .1rem;max-width:18rem}.export-text{font-family:var(--mono);font-size:.72rem;width:min(18rem,75vw);margin:.2rem .4rem .3rem;padding:.4rem;border:1px solid var(--line);border-radius:8px;background:var(--card-2);color:var(--text);resize:vertical}.favorite-button[aria-pressed=true]{color:var(--amber);border-color:var(--amber)}.favorite-button[aria-pressed=true] svg{fill:currentColor}.share{width:min(40rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow:auto;padding:1.1rem 1.2rem 1.2rem;border:1px solid var(--line-strong);border-radius:18px;background:var(--card);color:var(--text);box-shadow:var(--shadow)}.share::backdrop{background:#080e208c}.share-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.share-head h2{font-size:1.2rem}.share-close{font:inherit;font-size:1.4rem;line-height:1;padding:.2rem .5rem;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.share-close:hover{background:var(--card-2);color:var(--text)}.share-picture{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}.share-formats,.share-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}.share-formats button[aria-pressed=true]{border-color:var(--olive);color:var(--olive)}.share-text{display:block;width:100%;margin-top:.8rem;padding:.55rem .7rem;font:inherit;font-size:.9rem;color:var(--text);background:var(--card-2);border:1px solid var(--line);border-radius:10px;resize:vertical}.share-links{margin-top:.9rem;font-size:.88rem;color:var(--faint)}.share-links a{color:var(--olive)}.share-link{display:flex;align-items:center;gap:.9rem;margin-top:.8rem}.share-qr{flex:none;width:6.5rem;margin:0}.share-qr svg{display:block;width:100%;height:auto;border-radius:6px}.share-address{font-family:var(--mono);font-size:.72rem;color:var(--amber);overflow-wrap:anywhere}.share-address span{display:block;margin-bottom:.25rem;font-family:var(--sans);font-size:.82rem;color:var(--muted)}.share-qr-window{width:min(24rem,calc(100vw - 2rem));text-align:center}.share-qr-large{width:min(16rem,100%);margin:.2rem auto 0}.share-qr-window .share-address{margin-top:.8rem}.share-status{margin-top:.4rem;font-size:.85rem;color:var(--muted);min-height:1.3rem}.page-head-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap}.page-head-row .overline{margin-bottom:0}.page-head-row+*{margin-top:.6rem}.worksheet-tip{margin-left:auto}.worksheet-button{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);text-transform:none;letter-spacing:normal}.worksheet-tip .tip{left:auto;right:0;bottom:auto;top:calc(100% + .55rem);max-width:min(20rem,80vw)}.worksheet-tip .tip:after{left:auto;right:1.2rem;top:0;transform:translate(50%,-50%) rotate(225deg)}.worksheet-button svg{width:18px;height:18px}@media (max-width: 600px){.worksheet-button{font-size:.82rem;padding:.35rem .7rem;gap:.3rem}.worksheet-button svg{width:15px;height:15px}}@media (min-width: 601px){.worksheet-window{width:min(28rem,calc(100vw - 32px))}}.worksheet-tip .tip{z-index:5}body.focus-mode .worksheet-tip{display:none}.tip .worksheet-name{font-size:inherit;color:var(--amber)}
