@font-face{font-family:Source Sans;src:url(fonts/SourceSans3-Variable.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:Source Serif;src:url(fonts/SourceSerif4-Variable.woff2) format('woff2');font-weight:200 900;font-display:swap}
:root{--paper:#f4f0e8;--ink:#22231f;--muted:#6d6b63;--line:#9a968b;--accent:#527568;--accent-soft:#dce7e1;--active:#f0d99b;--wrong:#b65349;--cell:#fffdf8;--block:#383a34;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink);font-family:'Source Sans',system-ui,sans-serif}
button,input{font:inherit}
button{color:inherit}
.app-shell{height:100dvh;min-height:480px;display:flex;flex-direction:column}
.topbar{height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #d2cec4}
.brand{display:flex;align-items:baseline;gap:9px}.brand strong{font-family:'Source Serif',serif;font-size:22px;letter-spacing:-.02em}.brand span{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.header-actions{display:flex;align-items:center;gap:8px}.timer{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.icon-button{border:0;background:transparent;min-width:40px;min-height:40px;border-radius:5px;font-size:20px;cursor:pointer}.icon-button:hover,.icon-button:focus-visible{background:#e7e1d6;outline:2px solid transparent}
.game{flex:1;min-height:0;display:flex;justify-content:center;gap:34px;padding:16px 22px calc(14px + var(--safe-bottom))}
.puzzle-pane{width:min(100%,580px);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;align-items:center;justify-items:center;gap:10px;position:relative}
.status{position:absolute;top:4px;z-index:3;background:var(--ink);color:white;border-radius:3px;padding:6px 10px;font-size:13px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:.18s}
.status.show{opacity:1;transform:none}.status.success{background:var(--accent)}
.grid{--cols:7;--rows:7;width:min(100%,calc((100dvh - 230px) * var(--cols) / var(--rows)),470px);aspect-ratio:var(--cols)/var(--rows);display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);background:var(--block);border:2px solid var(--block);gap:1px;align-self:center;touch-action:manipulation;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.cell,.block{position:relative;min-width:0;min-height:0}.block{background:var(--block)}
.cell{border:0;background:var(--cell);padding:0;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:clamp(16px,4.8vmin,30px);line-height:1;cursor:pointer;border-radius:0}
.cell .number{position:absolute;top:2px;left:3px;font-size:clamp(7px,1.6vmin,10px);font-weight:600;line-height:1;color:#4d4c47}
.cell.in-word{background:var(--accent-soft)}.cell.selected{background:var(--active);box-shadow:inset 0 0 0 2px var(--ink);z-index:1}.cell.wrong{color:var(--wrong)}.cell.revealed::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);position:absolute;right:3px;bottom:3px}
.cell:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:2}
.active-clue{width:100%;min-height:48px;border:0;border-left:3px solid var(--accent);background:#ebe6dc;text-align:left;padding:7px 38px 7px 11px;position:relative;cursor:pointer;border-radius:0}.active-clue:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.clue-label{display:block;font-size:15px;line-height:1.25}.clue-label strong{font-weight:750;margin-right:6px}.clue-chevron{position:absolute;right:13px;top:50%;transform:translateY(-52%);font-size:27px;color:var(--muted)}
.tool-row{display:flex;justify-content:center;gap:4px;width:100%}.tool-row button{border:0;background:transparent;min-height:34px;padding:0 14px;color:var(--muted);cursor:pointer;border-radius:4px}.tool-row button:hover,.tool-row button:focus-visible{background:#e6e0d5;color:var(--ink);outline:0}.tool-row .next-puzzle{background:var(--accent);color:white;font-weight:700;padding:0 22px}.tool-row .next-puzzle:hover,.tool-row .next-puzzle:focus-visible{background:#3f6256;color:white}
.keyboard{display:none;width:100%;grid-template-columns:repeat(10,1fr);gap:5px}.key{border:0;border-bottom:2px solid #aaa59a;background:#fffdfa;border-radius:5px;height:42px;padding:0;font-weight:700;font-size:17px;cursor:pointer}.key:active{transform:translateY(1px);border-bottom-width:1px}.key.wide{grid-column:span 2;font-size:13px;color:var(--muted)}.key.erase{grid-column:span 1;color:var(--muted)}
.clue-panel{width:340px;min-height:0;border-left:1px solid #d2cec4;padding-left:24px;overflow:auto}.clue-panel-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--paper);z-index:1}.clue-panel h2{font-family:'Source Serif',serif;margin:3px 0 16px;font-size:22px}.clue-panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin:0 0 7px}.clue-columns{display:grid;gap:18px}.clue-list{list-style:none;padding:0;margin:0;display:grid;gap:2px}.clue-list button{display:flex;width:100%;gap:8px;text-align:left;border:0;background:transparent;padding:7px;border-radius:4px;cursor:pointer;line-height:1.3}.clue-list button:hover,.clue-list button:focus-visible{background:#e7e1d6;outline:0}.clue-list button.active{background:var(--accent-soft)}.clue-list .num{font-weight:750;min-width:20px;color:var(--accent)}
#closeClues{display:none}
.dialog{width:min(92vw,410px);border:1px solid #c8c1b6;border-radius:8px;background:#faf7f0;padding:0;box-shadow:0 16px 50px rgba(25,25,20,.22)}.dialog::backdrop{background:rgba(35,35,30,.36)}.dialog form{padding:18px}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.dialog h2{font:650 24px 'Source Serif',serif;margin:0}.dialog-action,.toggle-row{width:100%;border:0;border-top:1px solid #ddd6ca;background:transparent;padding:13px 4px;text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.dialog-action span,.toggle-row small{display:block;color:var(--muted);font-size:12px}.toggle-row>span{font-weight:600}.toggle-row input{width:38px;height:22px;accent-color:var(--accent)}.how-dialog p{line-height:1.5}.primary{width:100%;height:42px;border:0;border-radius:4px;background:var(--accent);color:white;font-weight:700;cursor:pointer}.complete-dialog{text-align:center}.complete-dialog form{padding:26px 24px 20px}.complete-dialog h2{margin:8px 0 5px}.complete-dialog p{margin:0 0 20px;color:var(--muted)}.complete-mark{width:42px;height:42px;margin:auto;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:25px;font-weight:800}.quiet-button{width:100%;min-height:40px;margin-top:7px;border:0;background:transparent;color:var(--muted);cursor:pointer}.quiet-button:hover,.quiet-button:focus-visible{color:var(--ink);text-decoration:underline}
.privacy-link{text-decoration:none;color:var(--ink)}
@media(max-width:760px){
  .topbar{height:44px;flex-basis:44px;padding:0 10px}.brand strong{font-size:20px}.brand span{display:none}
  .game{padding:7px 8px calc(6px + var(--safe-bottom));display:block}.puzzle-pane{height:100%;width:100%;grid-template-rows:minmax(0,1fr) 48px 34px auto;gap:6px}
  .grid{width:min(100%,calc((100dvh - 226px) * var(--cols) / var(--rows)),430px);max-height:calc(100dvh - 226px)}
  .keyboard{display:grid}.key{height:clamp(34px,6.7vh,42px)}
  .clue-panel{display:none;position:fixed;inset:44px 0 0;background:var(--paper);z-index:8;width:auto;padding:14px 18px calc(20px + var(--safe-bottom));border:0}.clue-panel.open{display:block}.clue-panel-head{top:-14px;padding-top:8px}.clue-columns{grid-template-columns:1fr 1fr;gap:12px}#closeClues{display:block}
  .tool-row button{min-height:32px;padding:0 12px}.active-clue{min-height:48px}.clue-label{font-size:14px}
}
@media(max-width:380px){.game{padding-left:6px;padding-right:6px}.keyboard{gap:3px}.key{font-size:16px}.clue-columns{grid-template-columns:1fr}.brand strong{font-size:19px}.tool-row button{padding:0 10px}}
@media(max-height:600px) and (max-width:760px){.puzzle-pane{grid-template-rows:minmax(0,1fr) 44px 30px auto;gap:4px}.grid{width:min(100%,calc((100dvh - 202px) * var(--cols) / var(--rows)));max-height:calc(100dvh - 202px)}.key{height:32px}.tool-row button{min-height:28px}.active-clue{min-height:44px;padding-top:5px;padding-bottom:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}