:root{font:100%/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#25352b;background:#f6f7f5;font-optical-sizing:auto;--green:#27694c;--line:#dbe2da;--muted:#627166}*{box-sizing:border-box}body{margin:0}button,select,textarea{font:inherit}button{touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}button:active{transform:scale(.97)}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}main{max-width:31rem;margin:0 auto;padding:clamp(1rem,5vh,3rem) 1.25rem 2rem}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}h1{font-size:1.5rem;line-height:1.1;font-weight:650;letter-spacing:-.045em;margin:0}.brand-dot{display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:var(--green);margin-left:.3rem}.header-actions{display:flex;gap:.4rem}.icon-button{width:2.75rem;height:2.75rem;border:0;background:transparent;color:var(--muted);font-size:1.15rem}.mode-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:1.25rem}#tabs{display:flex;padding:.2rem;border-radius:.65rem;background:#e9ede7}#tabs button{border:0;background:transparent;color:var(--muted);border-radius:.5rem;padding:.5rem 1.1rem;min-height:2.75rem;font-size:.85rem;font-weight:550}#tabs button[aria-current=true]{background:#fff;color:#254b36;box-shadow:0 1px 3px #23352914}select{max-width:9rem;min-height:2.75rem;background:transparent;border:1px solid var(--line);border-radius:.5rem;padding:.3rem .6rem;color:var(--muted);font-size:.85rem}.workspace{background:#fff;border:1px solid var(--line);border-radius:1rem;box-shadow:0 3px 18px #253c2910;overflow:hidden}.game-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1.1rem 1.1rem .6rem;font-size:.75rem;color:var(--muted)}.stats{display:flex;gap:1rem;font-variant-numeric:tabular-nums;white-space:nowrap}#moves{font-weight:600;color:#25352b}#timer{min-width:3rem;text-align:right;color:#25352b}.board-stage{position:relative}.play-area{padding:.5rem 1.5rem 1.1rem .5rem}.sheet{position:relative;display:grid;grid-template-columns:1.5rem 1fr;grid-template-rows:1.5rem 1fr;margin:0 auto}.columns,.rows{font-size:.625rem;color:#7b887d}.columns{display:grid;grid-template-columns:repeat(6,1fr)}.rows{display:grid;grid-template-rows:repeat(6,1fr)}.columns span,.rows span{display:grid;place-items:center}#board{position:relative;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;background-color:#fafbf8;background-image:linear-gradient(to right,#d9d9d9 1px,transparent 1px),linear-gradient(to bottom,#d9d9d9 1px,transparent 1px);background-size:calc(100% / 6) calc(100% / 6);border-right:1px solid #e4e9e1;border-bottom:1px solid #e4e9e1;outline:none}.block{position:absolute;padding:0;background:#e4e9e1;border:1px solid #bac8b9;border-radius:.3rem;color:var(--green);font-size:1.3rem;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;display:grid;place-items:center}.block.target{background:#cee1d1;border-color:#8cad92}.block.selected{outline:2px solid var(--green);outline-offset:-2px;z-index:1}.block.selected:after{content:'';position:absolute;right:-1px;bottom:-1px;width:5px;height:5px;background:var(--green);border:1px solid white}.selecting .block.selected{outline-style:dashed}.block.dragging{cursor:grabbing;z-index:2;will-change:transform}.block:active{transform:none}.exit{position:absolute;right:-1.25rem;top:calc(1.5rem + (100% - 1.5rem)*.416667);transform:translateY(-50%);width:1.1rem;height:calc((100% - 1.5rem)/6);fill:none;stroke:#85a88b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.bottom-bar{display:flex;align-items:center;justify-content:space-between;padding:.4rem .7rem;border-top:1px solid #eef1eb;background:#fafbf9}.tools{display:flex;gap:.25rem}.tools button,#new-day{border:0;background:transparent;color:var(--muted);padding:.6rem .65rem;min-height:2.75rem;font-size:.8rem}#message{font-size:.75rem;text-align:center;color:var(--muted);min-height:1.5em;margin:.8rem 0 .2rem}#instructions{font-size:.75rem;color:var(--muted);text-align:center;margin:.4rem 0}kbd{font:inherit;background:#e9ede7;border:1px solid #d9e0d6;border-radius:.25rem;padding:.1rem .25rem}.mobile-instructions{display:none}#start-cover,#result-panel{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;padding:1.25rem;overflow:auto}h2{font-size:1.4rem;font-weight:600;letter-spacing:-.025em;line-height:1.2;margin:.8rem 0 .5rem}#start-note,#result-note{font-size:.8rem;color:var(--muted);max-width:19rem;margin:.35rem 0 1.15rem}.start-symbol{font-size:2rem;color:#91aa91}#start-cover small{font-size:.65rem;color:var(--muted);margin:.8rem 0 0}.primary,.secondary{padding:.65rem 1.2rem;min-height:2.75rem;border-radius:.65rem;font-size:.85rem;font-weight:550}.primary{background:var(--green);color:#fff;border:1px solid var(--green)}.secondary{background:#edf2ea;color:var(--green);border:1px solid #dde5d9}.result-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.success-mark{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:#e6f0e4;color:var(--green);font-size:1.25rem;flex-shrink:0}#result-stats{font-size:1.3rem;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin:.4rem 0}#share-status{font-size:.75rem;color:var(--muted);margin:.6rem 0 0}#share-text{width:100%;min-height:5rem;font-size:.75rem;margin-top:.5rem}#result-panel:has(#share-text:not([hidden])){justify-content:flex-start}.completed .play-area{visibility:hidden}.celebrating .play-area{visibility:visible}.celebrating #result-panel{display:none}.completed .target{opacity:0}#help-panel{font-size:.85rem;color:#465c4b;background:#eaf0e7;border-radius:.8rem;padding:1rem;margin-top:1rem}#help-panel h2{font-size:1rem;margin:0}#help-panel p{margin:.75rem 0 0}#blank{position:fixed;inset:0;background:#fff;z-index:20}.blank-title,#blank small{display:block;padding:.7rem;color:var(--muted);font-size:.75rem}.blank-grid{height:calc(100% - 5rem);background-image:linear-gradient(to right,#e5e8e4 1px,transparent 1px),linear-gradient(to bottom,#e5e8e4 1px,transparent 1px);background-size:80px 24px}.compact main{padding:.75rem}.compact header{margin-bottom:.6rem}.compact h1{font-size:1.15rem}.compact .mode-row{margin-bottom:.6rem}.compact .popup{display:none}.compact .game-meta{padding:.7rem .8rem .3rem}.compact .play-area{padding-top:0}.compact #message{margin:.4rem 0 .1rem}.compact #instructions{font-size:.65rem}
@media(max-width:600px){main{padding:max(1rem,env(safe-area-inset-top)) max(.65rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.65rem,env(safe-area-inset-left))}header{padding:0 .35rem;margin-bottom:1rem}.mode-row{margin:0 .25rem .9rem}.game-meta{padding:1rem .8rem .4rem}.play-area{padding:.25rem 1.5rem 1rem .3rem}}
@media(max-width:900px){body.touch-ui .desktop-instructions,body.touch-ui .popup{display:none}body.touch-ui .mobile-instructions{display:inline}}
@media(prefers-reduced-motion:no-preference){.celebrating .target{transform-origin:right center;animation:auto-exit .5s ease-in forwards}@keyframes auto-exit{0%{opacity:1;transform:translateX(0) scale(1)}70%{opacity:1;transform:translateX(65%) scale(.6,.8)}100%{opacity:0;transform:translateX(110%) scale(.05,.3)}}.success-mark{animation:confirm .18s ease-out}@keyframes confirm{from{opacity:0}to{opacity:1}}}
@media(prefers-contrast:more){:root{--muted:#344c3a;--line:#7b8f7b}.block{border-color:#657c66}.columns,.rows{color:#455b49}}

.mode-row,.game-meta{flex-wrap:wrap}header{gap:.5rem}.header-actions{flex-shrink:0}
#tabs{max-width:100%}#tabs button{padding-inline:clamp(.3rem,2.5vw,1.1rem)}h1{min-width:0;overflow-wrap:anywhere}.header-actions{gap:0}.icon-button{width:clamp(2.75rem,8vw,3rem)}

/* Fixed viewport shell: the board takes only the space left by the controls. */
:root{--board-size:280px}html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{display:flex;justify-content:center;align-items:center}main,.compact main{position:relative;display:flex;flex-direction:column;gap:.45rem;flex:none;width:min(100%,30rem);height:100dvh;max-height:760px;margin:0;padding:max(.65rem,env(safe-area-inset-top)) max(.65rem,env(safe-area-inset-right)) max(.65rem,env(safe-area-inset-bottom)) max(.65rem,env(safe-area-inset-left));overflow:hidden}header,.compact header{flex:none;margin:0;min-height:2.75rem}h1,.compact h1{font-size:1.3rem}.mode-row,.compact .mode-row{flex:none;margin:0;gap:.4rem;min-height:2.75rem;flex-wrap:nowrap}#tabs button{padding:.35rem .9rem;min-height:2.75rem}.workspace{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.game-meta,.compact .game-meta{flex:none;padding:.55rem .8rem;min-height:2rem;flex-wrap:nowrap}.bottom-bar{flex:none;padding:.15rem .5rem;min-height:2.8rem}.board-stage{flex:1;min-height:0}.play-area,.compact .play-area{height:100%;padding:.25rem .8rem .65rem .3rem;display:flex;align-items:center;justify-content:center}.sheet,.compact .sheet{grid-template-columns:1rem var(--board-size);grid-template-rows:1rem var(--board-size);width:calc(var(--board-size) + 1rem);margin:0;flex:none}#board{width:var(--board-size);height:var(--board-size);aspect-ratio:auto;border:0;overflow:hidden}#board:before{content:'';position:absolute;inset:0;border:1px solid #c6c6c6;border-right:0;pointer-events:none;z-index:4}#board:after{content:'';position:absolute;right:0;top:0;width:1px;height:100%;background:linear-gradient(to bottom,#c6c6c6 0%,#c6c6c6 33.333%,transparent 33.333%,transparent 50%,#c6c6c6 50%,#c6c6c6 100%);pointer-events:none;z-index:4}.target.selected:after{display:none}#message,.compact #message{flex:none;margin:0;min-height:1.5em;font-size:.7rem;line-height:1.35}#instructions,.compact #instructions{flex:none;margin:0;font-size:.7rem;line-height:1.4}#start-cover,#result-panel{overflow:hidden;padding:.8rem}#start-cover{background:#fff}#result-panel{z-index:6;justify-content:center}#start-title,#result-title{font-size:1.25rem;margin:.55rem 0 .35rem}#start-note,#result-note{font-size:.75rem;margin:.3rem 0 .8rem}.start-symbol{font-size:1.5rem}.result-actions{gap:.4rem;flex-wrap:nowrap}#share-text{min-height:0;height:4rem;flex-shrink:0;resize:none}#share-status{max-width:100%;font-size:.7rem}#result-panel:has(#share-text:not([hidden])){justify-content:center}#help-panel{position:absolute;inset:0;z-index:30;margin:0;padding:1rem;background:#f6f7f5;border-radius:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;font-size:.82rem;line-height:1.45}.help-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem}#help-panel p{margin:.75rem 0 0}.completed .target{opacity:0}
@media(prefers-reduced-motion:no-preference){.celebrating .target{opacity:1;transform-origin:center;animation:slide-through-opening var(--exit-duration,400ms) linear forwards}@keyframes slide-through-opening{from{transform:translateX(var(--exit-from,0px));opacity:1}to{transform:translateX(calc(100% + 8px));opacity:1}}}
@media(max-height:520px) and (min-width:600px){main,.compact main{width:min(100%,820px);max-height:none;display:grid;grid-template-columns:210px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:.5rem 1rem}.workspace{grid-column:2;grid-row:1 / -1;height:100%}header{grid-column:1;grid-row:1}.mode-row{grid-column:1;grid-row:2;flex-wrap:wrap}#message{grid-column:1;grid-row:3;align-self:end}#instructions{grid-column:1;grid-row:4}#help-panel{padding:1rem 2rem;font-size:.78rem}#help-panel p{margin:.45rem 0 0}}
@media(max-height:570px){main{gap:.25rem}.game-meta,.compact .game-meta{padding:.35rem .65rem}.start-symbol{display:none}#start-note{margin-bottom:.55rem}#result-note{margin-bottom:.5rem}#help-panel{font-size:.76rem;line-height:1.35}#help-panel p{margin:.5rem 0 0}}

/* Neutral worksheet headers and hairline borders, like a spreadsheet. */
.corner,.columns,.rows{background:#f1f1f1;color:#666}.corner{border-top:1px solid #c6c6c6;border-left:1px solid #c6c6c6}.columns span{border-top:1px solid #c6c6c6;border-left:1px solid #d9d9d9}.columns span:last-child{border-right:1px solid #c6c6c6}.rows span{border-left:1px solid #c6c6c6;border-top:1px solid #d9d9d9}.rows span:last-child{border-bottom:1px solid #c6c6c6}

/* Match all four outer edges, leaving only the exit cell open. */
#board:after{width:1px;background:linear-gradient(#c6c6c6,#c6c6c6) right top / 1px 33.333333% no-repeat,linear-gradient(#c6c6c6,#c6c6c6) right bottom / 1px 50% no-repeat}

/* Block wordmark and clearer piece hierarchy. */
:root{--piece-fill:#e7e8e9;--piece-border:#bfc4c6}
.block{background:var(--piece-fill);border-color:var(--piece-border)}
.block.target{background:#99c8a7;border-color:#588967}
h1.block-wordmark,.compact h1.block-wordmark{background:var(--piece-fill);border:1px solid var(--piece-border);border-radius:.3rem;padding:.65rem .85rem;font-size:1.15rem;font-weight:650;letter-spacing:-.035em;white-space:nowrap}
.play-area,.compact .play-area{padding-left:.9rem}
.tools button{display:inline-flex;align-items:center;gap:.4rem}
.tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#hint b{font-weight:650;font-variant-numeric:tabular-nums;color:var(--green);margin-left:-.15rem}
#hint:disabled b{color:inherit}
.block.guide-block{box-shadow:0 0 0 2px var(--green);z-index:3}
.block.guide-block::before{content:attr(data-hint);position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;color:var(--green);pointer-events:none}
.guide-destination{position:absolute;pointer-events:none;z-index:5;background:linear-gradient(var(--green),var(--green)) left top/12px 2px no-repeat,linear-gradient(var(--green),var(--green)) left top/2px 12px no-repeat,linear-gradient(var(--green),var(--green)) right top/12px 2px no-repeat,linear-gradient(var(--green),var(--green)) right top/2px 12px no-repeat,linear-gradient(var(--green),var(--green)) left bottom/12px 2px no-repeat,linear-gradient(var(--green),var(--green)) left bottom/2px 12px no-repeat,linear-gradient(var(--green),var(--green)) right bottom/12px 2px no-repeat,linear-gradient(var(--green),var(--green)) right bottom/2px 12px no-repeat}
@media(prefers-reduced-motion:no-preference){@keyframes guide-arrow{0%,100%{opacity:.55;transform:translate(0,0)}50%{opacity:1;transform:translate(var(--guide-x,0),var(--guide-y,0))}}.block.guide-block::before{animation:guide-arrow .8s ease-in-out 3}}
#confirm-action{width:min(320px,calc(100vw - 2rem));padding:1.3rem;border:1px solid var(--line);border-radius:1rem;color:#25352b;background:#fff;box-shadow:0 12px 40px #17291e24}
#confirm-action::backdrop{background:#24362c45}
#confirm-title{margin:0;font-size:1.15rem}
#confirm-description{font-size:.85rem;color:var(--muted);margin:.7rem 0 1.25rem}
.confirm-actions{display:flex;justify-content:flex-end;gap:.5rem}
@media(prefers-contrast:more){.block{border-color:#657067}.block.target{border-color:#31533a}}

/* Keep the board visible after completion; results are a compact, reopenable summary. */
header{display:grid;grid-template-columns:1fr auto 1fr;position:relative}
h1.block-wordmark{grid-column:2;justify-self:center}.header-actions{grid-column:3;justify-self:end}
.mode-row{justify-content:center}
.play-area,.compact .play-area{padding-right:1.4rem;padding-left:1.4rem}
.exit-lane{position:absolute;left:100%;top:calc(1rem + var(--board-size) / 3);width:1rem;height:calc(var(--board-size) / 6);border-top:1px solid #a4b3a7;border-bottom:1px solid #a4b3a7;background:linear-gradient(to right,#d6e9da,transparent);display:grid;place-items:center;pointer-events:none}
.exit-lane svg{width:14px;height:20px;fill:none;stroke:#4e7959;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.completed .play-area{visibility:visible}.completed .block{cursor:default}.completed .block.selected{outline:none}
.replaying .target{opacity:1}.replaying .block{pointer-events:none}
#result-panel{position:static;inset:auto;flex:none;padding:0 .5rem .35rem;background:transparent;overflow:visible}
#result-summary{width:100%;min-height:2.5rem;border:0;border-radius:.45rem;background:#eaf2eb;color:#326043;font-size:.8rem;cursor:pointer}
#practice-nav{display:flex;flex:none;align-items:center;justify-content:center;border-top:1px solid #eef1eb;padding:0 .4rem;gap:.5rem}
#practice-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#practice-status{border:0;background:none;font-size:.8rem;color:var(--muted);min-width:8rem;min-height:2.75rem;padding:.3rem}
#practice-status:disabled{opacity:1;cursor:default}
#replay-status{font-size:.75rem;text-align:center;color:var(--muted);padding:.35rem;flex:none}
#result-dialog{width:min(350px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);border:1px solid var(--line);border-radius:1rem;padding:1.25rem;background:#fff;color:#25352b;text-align:center}
#result-dialog::backdrop{background:#24362c45}#result-close{position:absolute;right:.3rem;top:.3rem}#result-dialog .success-mark{margin:0 auto}
#result-dialog .result-actions{flex-wrap:wrap}#result-dialog #share-text{height:4rem;max-width:100%}
#message{position:absolute;margin:0;min-height:0}#instructions{padding:.2rem 0;font-size:.75rem}
@media(max-height:520px) and (min-width:600px){header{grid-template-columns:1fr}h1.block-wordmark{grid-column:1}.header-actions{grid-column:1;justify-self:center}#instructions{align-self:end}.mode-row{justify-content:center}#result-dialog{padding:.8rem}#result-dialog .success-mark{display:none}}

/* The worksheet stands on its own, without a surrounding card. */
main,.compact main{max-height:720px;gap:.35rem}
.workspace{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.game-meta,.compact .game-meta{justify-content:center;gap:.6rem;padding:.15rem .4rem;font-size:.7rem;min-height:1.5rem}
#return-daily{border:0;background:none;color:var(--green);font-size:.7rem;text-decoration:underline}
header,.compact header{min-height:2.75rem}
.play-area,.compact .play-area{align-items:flex-start;padding-top:.2rem;padding-bottom:.25rem}
.bottom-bar{background:transparent;border:0;justify-content:center;gap:.4rem;padding:.1rem 0;flex-wrap:wrap}
.bottom-bar .stats{font-size:.75rem;gap:.6rem;align-items:center}
.tools{gap:0}.tools button{padding:.4rem .45rem;font-size:.75rem}
#practice-nav{border:0}#start-cover{background:var(--page-background,#f6f7f5)}
#result-panel{padding:0}#result-summary{background:transparent}
#want-more{align-self:center;flex:none;padding:.45rem 1.1rem}
#practice-dialog,#archive-dialog{width:min(360px,calc(100vw - 1.5rem));max-height:calc(100dvh - 1rem);padding:1.2rem;border:1px solid var(--line);border-radius:.8rem;color:#25352b;background:#f6f7f5}
#practice-dialog::backdrop,#archive-dialog::backdrop{background:#24362c45}.dialog-close{position:absolute;right:.2rem;top:.2rem}
#practice-title,#archive-title{font-size:1.2rem;margin:0 0 1rem}#practice-dialog h3{font-size:.85rem;margin:1.2rem 0 .6rem}
.menu-choice{width:100%;text-align:left;border:1px solid var(--line);border-radius:.5rem;background:#fff;padding:.8rem;color:#25352b}.menu-choice span{display:block;font-size:.75rem;color:var(--muted)}
.difficulty-options{display:flex;gap:.4rem}.difficulty-options button{flex:1;padding:.5rem}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;font-size:.85rem}.calendar-week,#calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem;text-align:center}.calendar-week{font-size:.7rem;color:var(--muted)}#calendar-days button{height:2.45rem;border:0;border-radius:.35rem;background:#e7ece5;color:#314d3a;font-size:.75rem}#calendar-days button[aria-current]{outline:1px solid var(--green)}#calendar-days button:disabled{background:transparent;opacity:.3}
@media(max-height:520px) and (min-width:600px){main,.compact main{display:flex;width:min(100%,440px);max-height:none;gap:0}header,.compact header{display:grid;grid-template-columns:1fr auto 1fr;min-height:2.4rem}h1.block-wordmark{grid-column:2;padding:.4rem .75rem}.header-actions{grid-column:3;grid-row:1;justify-self:end}.workspace{height:auto}.game-meta{font-size:.65rem;min-height:1rem}#instructions{font-size:.6rem}.bottom-bar{min-height:2rem}.tools button{min-height:2rem}.icon-button{height:2.4rem}#practice-dialog,#archive-dialog{padding:.75rem}#calendar-days button{height:1.8rem}#archive-title{margin-bottom:0}}

h1.block-wordmark{transform:translateX(.5rem)}#instructions{align-self:stretch;text-align:center}#generation-status{flex:none;font-size:.75rem;text-align:center;color:var(--muted);margin:0}

/* Center the grid itself; the toolbar follows its bottom edge without a spacer. */
main,.compact main{max-height:none;justify-content:flex-start}
.workspace{flex:none;height:auto!important}
.board-stage{flex:none;height:calc(var(--board-size) + 1rem + .45rem)}
.play-area,.compact .play-area{padding:.2rem 2.4rem .25rem 1.4rem;align-items:flex-start}
h1.block-wordmark{transform:none}
.bottom-bar{margin:0}
#extra-puzzles{display:flex;justify-content:center;gap:.5rem;flex:none}
#extra-puzzles button{min-height:2.5rem;padding:.45rem 1rem}
#practice-dialog p{font-size:.85rem;color:var(--muted)}

/* Quiet header context and a compact result card with direct onward navigation. */
header{min-height:3.1rem;gap:.3rem}.header-context{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;font-size:.65rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}.header-context #level-label{white-space:nowrap}.header-context #tier-progress{font-size:.58rem;white-space:nowrap}
h1.block-wordmark{grid-row:1}.header-actions{grid-row:1}#tier-progress{line-height:1.4}
#result-dialog{width:min(290px,calc(100vw - 2rem));padding:1.2rem 1rem .75rem;border:1px solid #d4dfd4;border-radius:.8rem;box-shadow:0 10px 40px #24362c22}
#result-title{font-size:1.15rem;margin:.35rem 0 1rem}#result-stats{margin:0 0 1rem}.result-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.result-metrics div{display:flex;flex-direction:column;gap:.1rem}.result-metrics strong{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.025em}.result-metrics span{font-size:.65rem;color:var(--muted)}
#result-next{width:100%;min-height:2.6rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem}.text-action{border:0;background:transparent;color:var(--muted);font-size:.72rem;min-height:2.4rem;padding:.4rem}.result-actions{gap:.3rem!important;justify-content:center}
#practice-close,#result-close,#archive-close{border:0;background:transparent;box-shadow:none;font-size:1.15rem;color:var(--muted)}
.difficulty-options{flex-direction:column;gap:.45rem}.difficulty-options button{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:.7rem .8rem}.difficulty-options small{font-size:.65rem;font-weight:400;color:var(--muted)}
@media(max-height:430px){#practice-dialog{padding:.65rem}#practice-title{margin-bottom:.35rem}#practice-dialog p{margin:.3rem 0}#practice-dialog .difficulty-options{gap:.15rem}#practice-dialog .difficulty-options button{min-height:1.8rem;padding:.25rem .5rem}}
@media(max-width:350px){h1.block-wordmark,.compact h1.block-wordmark{font-size:1rem;padding:.6rem .5rem}.header-actions .icon-button{width:2.2rem}.header-context{font-size:.58rem}.tools button span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.tools button{padding:.6rem .5rem}}
@media(max-height:520px){.difficulty-options{gap:.25rem}.difficulty-options button{padding:.4rem .7rem;min-height:2.3rem}#result-dialog{padding:.7rem .9rem}.result-metrics strong{font-size:1.3rem}#result-title{margin:.25rem 0 .6rem}}
@media(max-height:430px) and (min-width:600px){#practice-nav .icon-button,#practice-status{height:2rem;min-height:2rem}#extra-puzzles button{min-height:2rem;padding:.25rem .8rem}#instructions{font-size:.6rem}}

/* Blinded daily calibration uses the same bare grid with compact feedback controls. */
#trial-nav{display:flex;flex:none;align-items:center;justify-content:center;gap:.15rem;min-height:2.5rem;color:var(--muted);font-size:.75rem}
#trial-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#trial-status{min-width:3.2rem;text-align:center;font-variant-numeric:tabular-nums}
#trial-nav .text-action{padding:.3rem;min-height:2.2rem;color:var(--green)}
#trial-rate-dialog{width:min(330px,calc(100vw - 2rem));padding:1.2rem;border:1px solid var(--line);border-radius:.8rem;background:#fff;color:#25352b;text-align:center}
#trial-rate-dialog::backdrop{background:#24362c45}#trial-rate-close{position:absolute;right:.2rem;top:.2rem;border:0;background:transparent;color:var(--muted)}
#trial-rate-title{font-size:1.15rem;margin:.2rem 0 .5rem}#trial-rate-dialog>p,.trial-rating>p{font-size:.78rem;color:var(--muted);margin:.4rem 0 .7rem}
.trial-rating>div{display:flex;gap:.35rem;justify-content:center}.trial-rating button{flex:1;padding:.5rem .35rem;white-space:nowrap;font-size:.72rem}
#result-rating{margin:0 0 .7rem}#trial-skip{margin-top:.6rem}
@media(max-width:350px){#trial-nav{gap:0}#trial-nav .icon-button{width:2rem}#trial-nav .text-action{font-size:.66rem;padding:.2rem}}

/* Guided hints and time-based help stay compact enough for the fixed viewport. */
#hint-dialog,#nudge-dialog,#stuck-dialog{width:min(340px,calc(100vw - 1.5rem));max-height:calc(100dvh - 1rem);padding:1rem;border:1px solid var(--line);border-radius:.8rem;background:#fff;color:#25352b;text-align:center;overflow:hidden}
#hint-dialog::backdrop,#nudge-dialog::backdrop,#stuck-dialog::backdrop{background:#24362c45}
#hint-dialog h2,#nudge-dialog h2,#stuck-dialog h2{font-size:1.1rem;margin:.15rem 0 .65rem}
#nudge-dialog p,#stuck-dialog p{font-size:.8rem;color:var(--muted);margin:.4rem 0 1rem}
#hint-close{position:absolute;right:.2rem;top:.2rem;border:0;background:transparent;color:var(--muted)}
#hint-board{position:relative;width:min(52vw,190px);aspect-ratio:1;margin:.2rem auto .55rem;border:1px solid #c6c6c6;background-color:#fafbf8;background-image:linear-gradient(to right,#d9d9d9 1px,transparent 1px),linear-gradient(to bottom,#d9d9d9 1px,transparent 1px);background-size:calc(100% / 6) calc(100% / 6)}
.hint-mini-block{position:absolute;border:1px solid var(--piece-border);border-radius:.2rem;background:var(--piece-fill);transition:left .28s ease,top .28s ease}
.hint-mini-block.target{background:#99c8a7;border-color:#588967}
.hint-mini-block.active{box-shadow:0 0 0 2px var(--green);z-index:2}
#hint-step{min-height:2.5em;margin:.25rem 0;font-size:.8rem;color:#425649}
.preview-controls{display:flex;align-items:center;justify-content:center;gap:.35rem}.preview-controls .secondary{min-height:2.2rem;padding:.25rem .75rem}.preview-controls span{min-width:3.2rem;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.stuck-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}.stuck-actions button{flex:1;padding:.45rem .55rem;min-height:2.5rem;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.hint-mini-block{transition:none}}
@media(max-height:520px) and (min-width:540px){#hint-dialog[open]{width:min(520px,calc(100vw - 1rem));display:grid;grid-template-columns:180px 1fr;grid-template-rows:auto auto 1fr;gap:.15rem .7rem;text-align:left}#hint-dialog h2{grid-column:2}#hint-board{grid-column:1;grid-row:1 / 4;width:min(170px,calc(100dvh - 4rem));margin:0}#hint-step{grid-column:2;margin:0}.preview-controls{grid-column:2;align-self:end}}

/* Results borrow the compact structure of a worksheet dialog without implying a file save. */
#result-dialog{width:min(400px,calc(100vw - 1rem));max-height:calc(100dvh - .75rem);padding:0;border:1px solid #aeb8af;border-radius:.2rem;background:#fff;box-shadow:0 12px 36px #1e2f252b;text-align:left;overflow:hidden}
#result-dialog::backdrop{background:#24362c45}
.result-titlebar{height:2rem;display:flex;align-items:center;gap:.45rem;padding:0 .25rem 0 .6rem;border-bottom:1px solid #d7ddd7;background:#f0f2f0;color:#35463a;font-size:.72rem;font-weight:600}
.result-titlebar svg{width:1rem;height:1rem;fill:#e2eee5;stroke:var(--green);stroke-width:1.2;flex:none}
#result-close{position:static;margin-left:auto;width:2rem;height:1.8rem;border-radius:0;font-size:1rem;line-height:1}
#result-close:hover{background:#dfe5df}
.result-body{padding:.65rem .8rem .55rem}
.result-heading{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;padding-bottom:.5rem;border-bottom:1px solid #dfe4df}
#result-title{font-size:1.12rem;margin:0}
#result-save-label{font-size:.62rem;color:var(--muted);white-space:nowrap}
#result-stats.result-metrics{display:grid;grid-template-columns:1.55fr 1fr;margin:0;padding:.35rem 0;border-bottom:1px solid #dfe4df;gap:0}
#result-stats.result-metrics div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.4rem;padding:.16rem .35rem;min-width:0}
#result-stats.result-metrics dt{font-size:.62rem;color:var(--muted)}
#result-stats.result-metrics dd{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#26382c;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
#result-share-section{padding-top:.45rem}
#result-share-preview{margin:0 0 .45rem;padding:.38rem .55rem;border:1px solid #d9dfd9;background:#fafbfa;color:#303a33;font:600 .66rem/1.18 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow:hidden}
.share-stamp{font:400 1.15rem/1.02 -apple-system,BlinkMacSystemFont,"Segoe UI Emoji","Apple Color Emoji",sans-serif;letter-spacing:-.08em}
.share-actions{display:flex;gap:.45rem;justify-content:flex-end}.share-actions button{min-height:2.2rem;padding:.38rem 1rem;border-radius:.15rem}
#share-status{min-height:1em;margin:.2rem 0 0;text-align:right;font-size:.65rem;line-height:1.2}
#result-dialog #share-text{display:block;width:100%;height:7.3rem;min-height:0;margin:.35rem 0 0;padding:.4rem;border:1px solid #8fa094;border-radius:0;background:#fff;color:#26382c;resize:none;font:600 .64rem/1.18 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow:auto}
#result-share-section:has(#share-text:not([hidden])) #result-share-preview{display:none}
#result-next{min-height:2.25rem;margin:.45rem 0 0;border-radius:.15rem;padding:.38rem .7rem}
#result-dialog .result-actions{min-height:1.8rem;gap:.15rem!important;border-top:1px solid #e3e7e3;margin-top:.4rem;padding-top:.15rem;flex-wrap:wrap}
#result-dialog .result-actions .text-action{min-height:1.8rem;padding:.2rem .45rem}
#result-rating{padding-top:.45rem;margin-bottom:.25rem}
@media(max-width:350px){.result-body{padding:.55rem .6rem .45rem}#result-share-preview{font-size:.61rem}.share-stamp{font-size:1.05rem}.share-actions button{flex:1}.result-heading{gap:.25rem}#result-save-label{font-size:.57rem}}
@media(max-height:430px) and (min-width:540px){#result-dialog{max-height:calc(100dvh - .4rem)}.result-titlebar{height:1.65rem}.result-body{padding:.4rem .65rem .3rem}.result-heading{padding-bottom:.25rem}#result-title{font-size:1rem}#result-stats.result-metrics{padding:.15rem 0}#result-stats.result-metrics div{padding:.05rem .3rem}#result-share-section{padding-top:.25rem}#result-share-preview{margin-bottom:.25rem;padding:.25rem .45rem;font-size:.59rem;line-height:1.08}.share-stamp{font-size:.9rem;line-height:1}.share-actions button{min-height:1.8rem;padding:.2rem .8rem}#share-status{margin:0}#result-next{min-height:1.8rem;margin-top:.25rem}#result-dialog .result-actions{margin-top:.2rem}}

#trial-submit-status{margin:0;text-align:center;font-size:.7rem;line-height:1.3;color:var(--muted);max-width:100%}#trial-nav{flex-wrap:wrap}

/* Keep the header and controls inside the actual puzzle column. */
header,.compact header{width:var(--board-size);max-width:100%;margin-inline:auto;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem;min-height:3.5rem}
h1.block-wordmark,.compact h1.block-wordmark{grid-column:1;grid-row:1;justify-self:start;padding:.2rem 0;font-size:1.15rem;white-space:nowrap}
.header-actions{grid-column:2;grid-row:1;gap:0;min-width:0}
.header-context{grid-column:1 / -1;grid-row:2;flex-direction:row;justify-content:space-between;width:100%;gap:.2rem;overflow:hidden}
.header-context #level-label,.header-context #tier-progress{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.62rem}
.header-actions .icon-button,#extra-puzzles button{width:1.8rem;height:2rem;min-height:2rem;padding:.25rem;flex:none}
#extra-puzzles{gap:0}#extra-puzzles svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bottom-bar,#solution-action,#solution-controls,#practice-nav,#trial-nav,#trial-submit-status,#replay-status{width:var(--board-size);max-width:100%;margin-inline:auto;box-sizing:border-box}
.bottom-bar{gap:.2rem}.bottom-bar .tools{gap:.1rem;max-width:100%}.bottom-bar .tools button{padding-inline:.4rem}.bottom-bar .stats{gap:.4rem}
#solution-action{text-align:center;line-height:1}#show-solution{font-size:.68rem;min-height:1.65rem;padding:.2rem .4rem;color:var(--muted)}
#solution-controls{position:relative;text-align:center;padding:0;font-size:.7rem}#solution-controls #hint-close{position:static;float:right;font-size:.7rem;padding:.2rem;min-height:1.7rem}#solution-controls #hint-step{font-size:.65rem;min-height:2.6em;margin:.15rem 0;clear:both;line-height:1.25}#solution-controls .preview-controls{gap:.2rem;flex-wrap:wrap}#solution-controls .preview-controls button{font-size:.7rem;min-height:1.8rem;padding:.2rem .4rem}.solution-block{pointer-events:none}.solution-block.active{outline:2px solid var(--green);outline-offset:-2px}
@media(max-height:450px){header,.compact header{min-height:3rem}h1.block-wordmark,.compact h1.block-wordmark{font-size:.95rem}.header-actions .icon-button,#extra-puzzles button{width:1.5rem;height:1.6rem;min-height:1.6rem}.bottom-bar .tools button span{display:none}.bottom-bar .tools button{min-height:1.8rem;padding:.2rem .35rem}.bottom-bar .stats{font-size:.65rem}#solution-controls #hint-step{display:none}}

/* Preserve the original centered wordmark and preview the board before play. */
header,.compact header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);container-type:inline-size}
h1.block-wordmark,.compact h1.block-wordmark{grid-column:2;grid-row:1;justify-self:center;padding:.65rem .85rem;font-size:1.15rem}
.header-actions{grid-column:3;grid-row:1;justify-self:end}
.header-context{grid-column:1 / -1;grid-row:2}
@container(max-width:310px){.header-actions{grid-column:2 / 4;grid-row:2}.header-context{grid-column:1 / 4;grid-row:2;padding-right:5.5rem}h1.block-wordmark{grid-column:1 / 4}}
#start-cover{inset:auto;left:1rem;top:1rem;width:var(--board-size);height:var(--board-size);background:transparent;padding:0;overflow:visible;z-index:6}
#start{box-shadow:0 2px 12px #25352b35}
.block:disabled{opacity:1;cursor:default}

/* Separate share metadata from emoji glyphs, including Apple's tall emoji. */
.share-stamp{display:block;margin:.7rem 0 .55rem}
.header-context{flex-direction:column;align-items:flex-start;justify-content:center;gap:.1rem}
.header-context #level-label{font-size:.75rem}
.header-context #tier-progress{font-size:.68rem}
.sheet:has(#start-cover:not([hidden])) #board{filter:blur(2px)}
@media(max-height:450px){#help-panel{padding:.5rem 1rem;font-size:.7rem;line-height:1.25}#help-panel p{margin:.35rem 0 0}}

button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #247449;outline-offset:3px}
#goto-number{display:block;box-sizing:border-box;width:100%;margin:8px 0 16px;padding:8px;font:inherit;border:1px solid #aeb9b1;border-radius:3px}

#account-dialog{width:min(360px,calc(100vw - 24px));font-size:.85rem}#account-dialog p{margin:8px 0}#account-dialog label{display:block}#account-dialog input{display:block;width:100%;font:inherit;padding:8px;margin:4px 0 10px;border:1px solid #aeb9b1}#account-dialog .primary{margin-top:8px}#account-error{color:#873c2f}.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}#account-identity{overflow-wrap:anywhere}
@media(max-height:450px){#account-dialog{font-size:.75rem;padding:12px}#account-dialog h2{margin:0}#account-dialog p{margin:4px 0}#account-dialog input{padding:4px;margin:2px 0 4px}#account-dialog button{min-height:28px}}

@container(max-width:310px){.accounts-enabled .header-context{padding-right:7.4rem}}
@container(max-width:240px){.accounts-enabled #help{display:none}.accounts-enabled .header-context{padding-right:5.5rem}}

#account-help{position:absolute;right:3rem;top:.9rem;font-size:.75rem}

.account-providers{display:flex;gap:8px;margin:8px 0}.account-providers button{flex:1;font-size:.78rem;padding:8px}.account-auth-links{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:.75rem}#account-password-settings{margin:8px 0;font-size:.8rem}#account-dialog input{min-height:32px}#account-dialog:has(#account-new-password:focus){max-height:calc(100dvh - 12px)}
@media(max-height:450px){#account-dialog .account-providers{margin:4px 0}#account-dialog .account-providers button{padding:4px}#account-dialog .account-auth-links{margin-top:4px}#account-dialog #account-login-options>p{font-size:.7rem}#account-dialog #account-identity{display:none}}

@media(max-height:450px){#account-signin{display:grid;grid-template-columns:1fr 1fr;column-gap:8px}#account-signin label[for=account-email]{grid-column:1;grid-row:1}#account-signin label[for=account-password]{grid-column:2;grid-row:1}#account-email{grid-column:1;grid-row:2}#account-password{grid-column:2;grid-row:2}#account-submit{grid-column:1 / -1;grid-row:3}.account-auth-links{grid-column:1 / -1;grid-row:4}}
@media(max-height:450px){#account-dialog{width:min(440px,calc(100vw - 24px));padding:10px}#account-dialog h2{font-size:1rem;line-height:1.3}#account-dialog .account-actions{margin:6px 0}#account-dialog .primary{margin-top:4px}#account-dialog #account-password-settings{margin:4px 0}#account-dialog #account-password-form{display:grid;grid-template-columns:1fr auto;gap:4px}#account-password-form label{grid-column:1 / -1}#account-dialog #account-new-password{margin:0}#account-password-form button{padding:4px 8px}}
@media(max-height:450px){#account-dialog #account-signedin button{min-height:26px;padding:3px 8px;line-height:18px}#account-dialog .account-actions{margin:4px 0;gap:8px}#account-dialog .account-actions button{padding:0 4px}#account-dialog #account-status{font-size:.7rem;line-height:14px}#account-dialog #account-error{font-size:.7rem;line-height:14px}#account-dialog #account-password-settings{font-size:.7rem;line-height:16px}}

.account-providers button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.account-providers .provider-logo{width:18px;height:18px;flex:0 0 18px}
#account-apple .provider-logo,#account-link-apple .provider-logo{color:#000}