:root{--bg:#d7dec9;--tile:#fbf8f2;--ink:#1a1a1a;--hairline:#1a1a1a26;--accent:#3d5622;--accent-hover:#2d4018;--font-serif:"Iowan Old Style", "Palatino Linotype", Palatino, Cambria, Georgia, serif;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable}body{font-family:var(--font-sans);background:var(--bg);padding:12px 16px}.app{flex-direction:column;gap:8px;width:100%;max-width:360px;margin:0 auto;display:flex}.masthead{grid-template-columns:1fr auto 1fr;align-items:center;column-gap:.5rem;display:grid}.masthead .wordmark{justify-self:start}.masthead .score-display{justify-self:center}.masthead .instructions-button{justify-self:end}.wordmark{font-family:var(--font-serif);letter-spacing:.02em;color:var(--ink);font-size:1.25rem;font-weight:500}.wordmark-tm{vertical-align:super;letter-spacing:0;margin-left:.05em;font-size:.45em;font-weight:400}.instructions-button{color:#1f2937;width:20px;height:20px;font-family:var(--font-sans);cursor:pointer;background:0 0;border:2px solid #1f2937;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;line-height:1;transition:color .15s,border-color .15s;display:flex}.instructions-button:hover{color:#000;border-color:#000}@keyframes instructions-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes instructions-panel-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.instructions-overlay{z-index:50;background:#00000080;justify-content:center;align-items:center;animation:.15s ease-out instructions-overlay-in;display:flex;position:fixed;inset:0}.instructions-modal{width:100%;max-width:24rem;font-family:var(--font-sans);background:#fff;border-radius:.75rem;margin:0 1rem;padding:1.5rem;animation:.15s ease-out instructions-panel-in;position:relative;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.instructions-close{color:#9ca3af;cursor:pointer;background:0 0;border:0;padding:0;font-size:1.25rem;line-height:1;transition:color .15s;position:absolute;top:.75rem;right:.75rem}.instructions-close:hover{color:#374151}.instructions-title{color:#111827;margin-bottom:.75rem;font-size:1.125rem;font-weight:600}.instructions-title strong{font-weight:600}.instructions-tm{font-weight:400}.instructions-body{color:#374151;font-size:.875rem;line-height:1.625}.instructions-body p+p,.instructions-body ul,.instructions-body ol{margin-top:.5rem}.instructions-body ul,.instructions-body ol{padding-left:1.25rem}.instructions-body ul{list-style:outside}.instructions-body ol{list-style:decimal}.instructions-footer{color:#9ca3af;margin-top:1rem;font-size:.75rem}.tagline{font-family:var(--font-serif);color:#666;margin-top:2px;font-size:.9rem;font-style:italic}.loading{font-family:var(--font-serif);color:#666;text-align:center;font-size:1rem;font-style:italic}.play-again{font-family:var(--font-serif);color:#fff;background:var(--accent);cursor:pointer;border:0;border-radius:8px;align-self:center;margin-top:8px;padding:10px 24px;font-size:1rem;font-weight:500;transition:background .15s}.play-again:hover{background:var(--accent-hover)}.auto-notice{text-align:center;font-family:var(--font-serif);color:var(--accent);padding:4px 8px;font-size:.95rem;font-style:italic}.auto-notice.end{margin-top:4px}.score-display{font-family:var(--font-serif);text-align:center;color:var(--ink);letter-spacing:.03em;transform-origin:50%;font-size:2rem;font-weight:500;transition:transform .5s}.app.ended .grid,.app.ended .grid-meta-strip,.app.ended .assembly-area,.app.ended .controls{opacity:0;pointer-events:none;transition:opacity .35s}.app.ended.ui-gone .score-display{transform:scale(1.5)}.grid{grid-template-columns:repeat(3,64px);place-content:end center;gap:8px;height:280px;display:grid;overflow:hidden}button.fragment{height:64px;font-family:var(--font-serif);letter-spacing:.05em;color:var(--ink);border:1px solid var(--hairline);background:var(--tile);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:6px;font-size:1.2rem;font-weight:500;transition:background .1s,color .1s,border-color .1s}@media (hover:hover){button.fragment:hover{background:#efece6}}button.fragment:focus{outline:none}button.fragment.selected{background:var(--ink);color:var(--tile);border-color:var(--ink)}.fragment.empty{height:64px}.grid-meta-strip{justify-content:center;align-items:center;gap:12px;margin-top:8px;display:flex}.words-left-indicator{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;min-height:8px;display:flex}.hint-button{cursor:pointer;color:var(--ink);opacity:.55;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;padding:2px;transition:opacity .15s;display:flex}@media (hover:hover){.hint-button:hover{opacity:1}}.hint-modal-backdrop{z-index:100;background:#0006;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.hint-modal{background:var(--tile);width:100%;max-width:320px;font-family:var(--font-serif);color:var(--ink);border-radius:8px;padding:32px 24px 24px;font-size:1rem;position:relative}.hint-modal-close{cursor:pointer;color:var(--ink);opacity:.6;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex;position:absolute;top:6px;right:6px}@media (hover:hover){.hint-modal-close:hover{opacity:1}}.hint-content{text-align:center}.words-left-dot{background:var(--ink);opacity:.25;border-radius:50%;width:6px;height:6px}.assembly-area{flex-direction:column;gap:4px;width:max-content;min-width:208px;max-width:100%;min-height:56px;margin:0 auto;padding:8px 0;display:flex}.word-display{font-family:var(--font-serif);letter-spacing:.05em;color:var(--ink);text-align:center;min-height:1.8rem;font-size:1.6rem;font-weight:500}button.word-display{cursor:pointer;width:100%;font-family:var(--font-serif);letter-spacing:.05em;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;font-size:1.6rem;font-weight:500;transition:color .15s;display:block}button.word-display.valid{color:var(--accent)}@media (hover:hover){button.word-display.valid:hover{color:var(--accent-hover)}}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-5px)}40%,60%{transform:translate(5px)}}.assembly-area.shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}.word-score-preview{font-family:var(--font-serif);text-align:center;color:var(--ink);font-size:.95rem}.found-words-row{scrollbar-width:thin;scrollbar-color:#1a1a1a4d transparent;max-width:100%;font-family:var(--font-serif);letter-spacing:.03em;color:var(--ink);flex-wrap:nowrap;align-self:center;gap:6px 22px;padding:0 12px;font-size:.95rem;list-style:none;display:flex;overflow:auto hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%)}.found-words-row::-webkit-scrollbar{height:6px}.found-words-row::-webkit-scrollbar-track{background:0 0}.found-words-row::-webkit-scrollbar-thumb{background:#1a1a1a4d;border-radius:3px}.found-words-row li{position:relative}.found-words-row li:not(:first-child):before{content:"·";color:var(--ink);font-weight:700;position:absolute;top:50%;left:-11px;transform:translate(-50%,-50%)}.found-words-row li.row-start:before{content:none}.found-words-row.column{flex-direction:column;align-items:center;gap:4px;max-width:none;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}.found-words-row.column li:before{content:none}.found-words-heading{font-family:var(--font-serif);text-align:center;color:var(--ink);margin:32px 0 6px;font-size:1rem}.controls{flex-direction:column;gap:8px;margin-bottom:8px;display:flex}.controls-secondary{justify-content:center;gap:8px;display:flex}.controls-secondary button{flex:0 0 calc(25% - 2px)}.controls button{font-family:var(--font-sans);border:2px solid var(--ink);background:var(--ink);color:var(--tile);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:8px;justify-content:center;align-items:center;min-height:44px;padding:10px 8px;font-size:.95rem;font-weight:600;transition:opacity .15s,background .15s;display:flex}.controls button:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}@media (hover:hover){.controls button:not(:disabled):hover{background:#333}}
