@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;450;500;550;600;650;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{--paper:#f5f3ec;--ink:#242c29;--muted:#707669;--line:#d9dacf;--accent:#d8e785;--panel:#eaece1;--error:#8c432f;--mono:'DM Mono',monospace;--sans:'DM Sans',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;color-scheme:light;font-family:var(--sans);color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #77883b;outline-offset:3px}[hidden]{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* A game-sized shell: the board takes the available space, not the page. */
.page{width:min(780px,100%);height:min(var(--app-height,100dvh),800px);margin:auto;padding:18px 30px 12px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.masthead{display:flex;align-items:center;gap:22px;flex:0 0 52px;border-bottom:1px solid var(--ink);padding-bottom:12px}.brand{font:46px/.9 var(--serif);letter-spacing:-1.7px;text-decoration:none;white-space:nowrap;flex-shrink:0}.brand span{color:#879547}.game-heading{flex:1;min-width:0}.game-heading h1{font:22px/1.05 var(--serif);font-weight:400;margin:0 0 5px}.game-heading #edition{font:9px var(--mono);letter-spacing:.09em;color:var(--muted)}.masthead nav{display:flex;align-items:center;gap:13px;flex-shrink:0}.text-button{background:none;border:0;padding:8px 0;font-size:12px;min-height:36px}.text-button:hover{text-decoration:underline;text-underline-offset:4px}.help-button{width:32px;height:32px;border:1px solid #aeb4a3;background:transparent;border-radius:50%;font:17px var(--serif);padding:0}.about-button{font-style:italic}
main{display:flex;flex:1;min-height:0;flex-direction:column;gap:16px}.alphabet-panel{flex:0 0 auto;border:1px solid #d5d9c8;background:var(--panel);border-radius:4px;padding:12px 15px}.score-strip{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:11px}.score-row{display:flex;align-items:center;gap:11px}.score{font:47px/.9 var(--serif);letter-spacing:-2px;font-variant-numeric:tabular-nums}.score-description{font-size:12px;line-height:1.3}.score-description span{display:block;color:var(--muted);font-size:10px;margin-top:3px}.editor-mark{display:flex;flex-direction:column;gap:4px}.editor-mark>span{font:8px var(--mono);letter-spacing:.06em;color:var(--muted)}.editor-mark strong{font:16px var(--mono);font-weight:400}.editor-mark small{font:10px var(--sans);color:var(--muted)}.completion-line{display:flex;flex-direction:column;gap:9px;align-items:flex-end;font:10px var(--mono);color:var(--muted)}.completion-dots{display:flex;gap:5px}.completion-dots i{width:5px;height:5px;border-radius:50%;background:#c8cebb}.completion-dots i.filled{background:var(--ink)}
.alphabet{display:grid;grid-template-columns:repeat(26,minmax(0,1fr));gap:4px}.letter-key{min-width:0;height:27px;display:flex;align-items:center;justify-content:center;border:1px solid #cdd2c1;border-radius:2px;background:transparent;color:#929987;font:11px var(--mono);padding:0;transition:background .12s,color .12s}.letter-key.used{background:var(--ink);border-color:var(--ink);color:var(--paper)}.letter-key.pending{background:var(--accent);border-color:#b8c76f;color:#42561e}.letter-key.used:hover,.letter-key.used:focus-visible,.letter-key.pinned{background:#61713c;color:var(--paper)}

.puzzle{display:flex;flex-direction:column;flex:1;min-height:0;gap:10px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:16px;flex:0 0 auto}.section-top h2{margin:0;font:9px var(--mono);letter-spacing:.12em}.section-top>span{font-size:10px;color:var(--muted)}.clue-list{display:grid;grid-template-rows:repeat(5,minmax(44px,1fr));flex:1;min-height:0;overflow-y:auto;border-top:1px solid var(--line);overscroll-behavior:contain;scrollbar-width:thin}.clue{position:relative;border-bottom:1px solid var(--line);min-height:0}.clue.selected{background:#e9eecf;box-shadow:inset 3px 0 0 #788a43}.clue.highlighted{background:#e0e9b6}.clue-top{display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;height:100%;width:100%;padding:9px 14px;text-align:left;border:0;background:transparent}.clue-number{font:10px var(--mono);color:#8b9381}.selected .clue-number{color:#53632f}.clue-prompt{font-size:16px;line-height:1.25;font-weight:450}.clue-arrow{font-size:19px;color:#889477}.selected .clue-arrow{color:#556832}.locked .clue-top{grid-template-columns:25px minmax(0,1fr) fit-content(42%)}.locked-answer{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}.answer-word{font:19px/1.2 var(--mono);letter-spacing:.025em;overflow-wrap:anywhere;text-align:right}.answer-word mark{background:#d5e583;color:var(--ink)}.locked-tag{font-size:0;flex-shrink:0}.locked-tag:before{content:'✓';font:12px var(--sans);color:#687c47}.locked .clue-prompt{color:#727969;font-size:13px}
.composer{flex:0 0 auto;padding:11px 13px 8px;border:1px solid #b9c1a5;background:#fbfaf5;border-radius:4px}.composer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.composer-heading label{font:9px var(--mono);letter-spacing:.09em;color:var(--muted)}.cost-panel{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:10px;color:var(--muted)}.cost-panel strong{font:11px var(--mono);color:var(--ink);white-space:nowrap}.cost-panel.free strong{color:#536d24}.answer-form{display:flex;gap:12px;align-items:stretch}.answer-input{width:100%;min-width:0;flex:1;height:44px;padding:7px 0 6px;border:0;border-bottom:1px solid #c8cebc;border-radius:0;background:transparent;color:var(--ink);font:22px var(--mono);letter-spacing:.06em;text-transform:uppercase}.answer-input::placeholder{font:16px var(--serif);letter-spacing:0;text-transform:none;color:#909785}.answer-input:focus{outline:none;border-bottom:2px solid #6a7a42}.submit-answer,.primary-button{background:var(--ink);color:var(--paper);border:0;border-radius:3px;padding:10px 17px;font-size:12px;min-height:44px;white-space:nowrap}.submit-answer:hover,.primary-button:hover{background:#45503d}.draft-cost{font-size:10px;color:var(--muted);line-height:1.35;min-height:14px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.draft-cost.free{color:#536d24}.feedback{flex:0 0 28px;min-height:0;overflow-y:auto;color:var(--error);font-size:11px;line-height:1.3;padding:0 2px}.feedback.success{color:#536d35}.finished-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:0 0 auto;padding:14px;background:var(--panel);border-radius:4px;font:19px var(--serif)}

/* Supporting detail lives in dialogs, leaving the playing surface clear. */
dialog{width:calc(100% - 28px);max-width:480px;border:1px solid var(--line);padding:35px;background:var(--paper);color:var(--ink);border-radius:6px;max-height:90dvh;overflow:auto;box-shadow:0 18px 100px #242c291f}dialog::backdrop{background:#242c2966;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:9px;top:7px;width:40px;height:40px;border:0;background:none;font-size:24px;color:var(--muted)}.eyebrow{font:9px var(--mono);letter-spacing:.12em;color:var(--muted)}dialog h2{font:42px/1.03 var(--serif);font-weight:400;letter-spacing:-.8px;margin:19px 0}dialog p,dialog li{font-size:13px;line-height:1.6}dialog ol{padding-left:19px}dialog li{padding-left:4px;margin-bottom:7px}.subtle{color:var(--muted);font-size:11px!important}.help-example{background:var(--panel);padding:16px;display:flex;gap:14px;flex-wrap:wrap;font:16px var(--mono);margin:20px 0}.help-example strong{width:100%;font:11px var(--sans);color:#687449}.dialog-done{margin-top:10px}.practice-list{display:grid;gap:7px;margin:20px 0}.practice-option{padding:14px;text-align:left;display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line);background:transparent;border-radius:3px;font-size:13px;min-height:44px}.practice-option span{font:11px var(--mono);color:var(--muted)}.practice-option:hover{background:var(--panel)}.result h2{margin-top:20px}.result .result-alphabet{font:15px/1.5 var(--mono);letter-spacing:.08em;margin:20px 0;overflow-wrap:anywhere}.result-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}.secondary-button{border:1px solid #bbc5ac;background:none;padding:11px 14px;border-radius:3px;font-size:12px;min-height:44px}.result details{margin-top:22px;border-top:1px solid var(--line);padding-top:15px;font-size:12px}.result summary{cursor:pointer}.editor-answers{line-height:1.8;margin-top:11px;font-size:12px}.share-preview{width:100%;min-height:115px;font:12px/1.6 var(--mono);padding:12px;background:var(--paper);border:1px solid var(--line);color:var(--ink);margin-top:13px;resize:vertical}

@media(min-width:850px) and (min-height:820px){.page{margin-top:min(32px,calc((100dvh - 800px)/2))}}
@media(max-width:650px){html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0}.page{padding:max(8px,env(safe-area-inset-top)) 14px max(7px,env(safe-area-inset-bottom));height:var(--app-height,100dvh);gap:10px;max-height:none}.masthead{flex-basis:43px;padding-bottom:7px;gap:13px}.brand{font-size:37px}.game-heading{line-height:1}.game-heading h1{display:none}.game-heading #edition{font-size:8px;letter-spacing:.04em}.masthead nav{gap:9px}.text-button{font-size:11px;min-height:34px}.help-button{height:29px;width:29px;font-size:16px}.about-button{display:none}main{gap:10px}.alphabet-panel{padding:9px 11px}.score-strip{margin-bottom:8px;gap:10px}.score{font-size:37px;letter-spacing:-1px}.score-row{gap:7px}.score-description{font-size:10px}.score-description span{font-size:9px;margin-top:2px}.editor-mark>span{font-size:7px}.editor-mark strong{font-size:12px}.editor-mark small{font-size:9px}.completion-line{font-size:9px;gap:6px}.completion-dots{gap:4px}.alphabet{grid-template-columns:repeat(13,minmax(0,1fr));gap:3px}.letter-key{height:22px;font-size:10px}.puzzle{gap:8px}.section-top{min-height:14px}.section-top h2{font-size:8px}.section-top>span{font-size:9px}.clue-top{grid-template-columns:19px minmax(0,1fr) auto;gap:9px;padding:7px 10px}.clue-prompt{font-size:14px;line-height:1.2}.clue-number{font-size:9px}.clue-arrow{font-size:16px}.locked .clue-top{grid-template-columns:19px minmax(0,1fr) fit-content(41%)}.locked .clue-prompt{font-size:12px}.answer-word{font-size:15px}.locked-answer{gap:5px}.composer{padding:8px 10px 6px}.composer-heading{margin-bottom:4px}.answer-form{gap:9px}.answer-input{font-size:19px;height:44px}.submit-answer{padding:9px 12px;font-size:11px;min-height:44px}.draft-cost{font-size:9px;margin-top:4px;min-height:12px}.cost-panel{font-size:9px;gap:6px}.cost-panel strong{font-size:10px}.feedback{font-size:11px;flex-basis:28px}.finished-bar{font-size:17px;padding:11px}.finished-bar .primary-button{padding:10px 12px;font-size:11px}dialog{padding:29px 24px}dialog h2{font-size:36px}}
@media(max-width:360px){.page{padding-left:10px;padding-right:10px}.masthead{gap:10px}.brand{font-size:34px}.game-heading h1{font-size:16px}.masthead nav{gap:7px}.help-button{height:27px;width:27px}.alphabet-panel{padding:8px 9px}.score-description span{display:none}.score{font-size:33px}.score-strip{margin-bottom:7px}.editor-mark>span{font-size:7px;letter-spacing:0}.clue-prompt{font-size:13px}.locked .clue-prompt{font-size:11px}.answer-word{font-size:13px}.answer-form{gap:7px}.submit-answer{padding:9px 10px}.cost-panel>span{display:none}}

/* When a phone keyboard takes half the screen, keep clues and submit in reach. */
.short-screen .page,.keyboard-open .page{padding-top:4px;padding-bottom:4px;gap:6px}
.short-screen .masthead,.keyboard-open .masthead{display:flex;gap:10px;flex-basis:31px;min-height:31px;padding-bottom:3px}
.short-screen .brand,.keyboard-open .brand{font-size:28px}
.short-screen .game-heading h1,.keyboard-open .game-heading h1{display:none}
.short-screen .masthead nav,.keyboard-open .masthead nav{gap:10px}
.short-screen .text-button,.keyboard-open .text-button{min-height:28px;padding:4px 0}
.short-screen .help-button,.keyboard-open .help-button{height:26px;width:26px}
.short-screen main,.keyboard-open main{gap:6px}
.short-screen .alphabet-panel,.keyboard-open .alphabet-panel{padding:5px 10px}
.short-screen .score-strip,.keyboard-open .score-strip{margin:0}
.short-screen .score,.keyboard-open .score{font-size:29px}
.short-screen .score-description span,.keyboard-open .score-description span,.short-screen .alphabet,.keyboard-open .alphabet,.short-screen .completion-dots,.keyboard-open .completion-dots{display:none}
.used-letter-summary{display:none}
.short-screen .used-letter-summary,.keyboard-open .used-letter-summary{display:block;flex:1;min-width:0;font:11px/1.4 var(--mono);letter-spacing:.08em;overflow-wrap:anywhere;text-align:center}
.short-screen .editor-mark,.keyboard-open .editor-mark{display:none}
.short-screen .puzzle,.keyboard-open .puzzle{gap:5px}
.short-screen .section-top,.keyboard-open .section-top{display:none}
.short-screen .clue-list,.keyboard-open .clue-list{grid-template-rows:repeat(5,minmax(35px,1fr))}
.short-screen .clue-top,.keyboard-open .clue-top{min-height:35px;padding-top:4px;padding-bottom:4px}
.short-screen .composer,.keyboard-open .composer{padding-top:5px;padding-bottom:5px}
.short-screen .draft-cost,.keyboard-open .draft-cost{display:none}
.short-screen .feedback,.keyboard-open .feedback{flex-basis:26px;font-size:10px}
.short-screen .finished-bar,.keyboard-open .finished-bar{padding:5px 10px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.result-salute{display:flex;align-items:center;gap:11px;margin-bottom:20px}.result-salute .eyebrow{color:#5c7135;font-size:10px;letter-spacing:.12em}.result-seal{display:flex;align-items:center;justify-content:center;width:35px;height:35px;flex-shrink:0;border-radius:50%;background:var(--accent);color:#405823;font-size:19px}.result .result-praise{color:#536936;margin-top:5px}.result .result-next{color:var(--muted);font-size:11px;margin-top:16px}
.result .share-status{font-size:11px;line-height:1.4;color:var(--muted);margin:10px 0 0}.result-actions .primary-button{flex:1}.result>.secondary-button{min-height:36px;padding:8px 12px}.result .result-next{margin-bottom:8px}
@media(max-width:650px){.clue-list{flex:0 1 280px}.result-salute{margin-bottom:14px}.result h2{margin:14px 0}.result p{margin-top:9px;margin-bottom:9px}.result .result-alphabet{margin:14px 0}.result-actions{margin-top:16px}.result details{margin-top:16px;padding-top:12px}}
.game-footer{display:flex;flex:0 0 24px;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:10px;line-height:1.4;white-space:nowrap}.game-footer button{border:0;background:none;padding:4px 0;color:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:3px}.game-footer button:hover{color:var(--ink)}
@media(max-width:650px) and (min-height:651px){html:not(.short-screen):not(.keyboard-open) .page{gap:16px;padding-top:max(14px,env(safe-area-inset-top))}html:not(.short-screen):not(.keyboard-open) main{gap:17px}html:not(.short-screen):not(.keyboard-open) .alphabet-panel{padding-top:12px;padding-bottom:12px}html:not(.short-screen):not(.keyboard-open) .puzzle{gap:12px}html:not(.short-screen):not(.keyboard-open) .composer{margin-top:3px;padding-top:11px;padding-bottom:9px}html:not(.short-screen):not(.keyboard-open) .feedback{flex-basis:20px}html:not(.short-screen):not(.keyboard-open) .game-footer{margin-top:2px}}
@media(max-width:650px) and (max-height:650px){.feedback:empty{display:none}.feedback:not(:empty)+.game-footer{display:none}}
.short-screen .game-footer,.keyboard-open .game-footer{display:none}

.feedback-dialog h2{margin:14px 0 12px}.feedback-dialog #feedback-intro{margin:0 0 20px;color:var(--muted);font-size:12px;line-height:1.5}.contact-form{display:grid;gap:15px}.contact-form label{display:grid;gap:7px;font-size:12px}.contact-label>span{color:var(--muted)}.contact-form input,.contact-form textarea{width:100%;min-width:0;border:1px solid #bdc5af;border-radius:3px;background:#fbfaf5;color:var(--ink);padding:10px 12px;font:16px/1.4 var(--sans)}.contact-form input{min-height:44px}.contact-form textarea{min-height:108px;max-height:240px;resize:vertical}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#8a917f}.contact-form .primary-button{margin-top:2px}.contact-status{font-size:12px;line-height:1.45;margin:12px 0 0;color:#536d35}.contact-status:empty{display:none}.contact-status.error{color:var(--error)}.contact-success{margin-top:20px}.contact-success p{margin:14px 0}.contact-success .primary-button{width:100%}
@media(max-width:650px){.feedback-dialog{padding:27px 23px}.feedback-dialog h2{font-size:34px}.contact-form{gap:13px}.contact-form textarea{min-height:104px}.feedback-dialog #feedback-intro{margin-bottom:17px}}