@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root{font-family:'DM Sans',Arial,sans-serif;color:#202622;background:#f7f8f5;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#202622;--muted:#778078;--line:#e4e8e1;--green:#258451;--green-soft:#dcefe2;--yellow:#d69b20;--yellow-soft:#f6edce;--tile:#fff;--key:#e7eae4;--mono:'DM Mono',monospace}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}.shell{max-width:1032px;margin:0 auto;padding:0 36px}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:800;font-size:19px;text-decoration:none;letter-spacing:0}.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--green);color:white;display:grid;place-items:center;font-weight:800;font-size:17px}.top-actions{display:flex;gap:8px}.icon-button,.tool-button{border:1px solid var(--line);background:#fff;color:#626d63;border-radius:7px;display:grid;place-items:center;cursor:pointer}.icon-button{width:34px;height:34px;font-weight:700;font-size:16px}.stats-button{font-size:17px}.icon-button:hover,.tool-button:not(:disabled):hover{border-color:#9aab9d;color:var(--green)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:58px;padding:43px 4px 56px}.game-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px}.eyebrow{font:500 10px var(--mono);letter-spacing:1.2px;color:#879087;margin:0 0 9px}.game-heading h1{font-size:36px;line-height:1.05;margin:0;font-weight:800;letter-spacing:0}.subtitle{font-size:13px;color:var(--muted);margin:9px 0 0}.round-count{display:flex;align-items:center;gap:7px;font:500 9px var(--mono);letter-spacing:.6px;color:#79857a;padding-bottom:4px;white-space:nowrap}.round-dot,.live-indicator{width:7px;height:7px;border-radius:50%;background:#5bb47b}.board-wrap{display:flex;justify-content:center}.board{display:grid;grid-template-rows:repeat(6,50px);gap:7px;width:min(100%,355px)}.board-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 49px;gap:6px;align-items:center}.tile{appearance:none;padding:0;position:relative;min-width:0;aspect-ratio:1;border:1px solid #d9ded7;border-radius:5px;background:var(--tile);display:grid;place-items:center;color:var(--ink);font-size:21px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,transform .12s}.tile.filled{border-color:#adb8ae}.tile.current{border-color:#7b9a82}.tile.mark-yellow{background:var(--yellow-soft);border-color:#e5cc72}.tile.mark-green{background:var(--green-soft);border-color:#77be8e}.tile.locked::after{content:'•';font-size:9px;position:absolute;right:3px;top:0;color:#536c59}.tile:active{transform:scale(.96)}.tile.locked{cursor:default}.row-clue{display:flex;align-items:center;justify-content:center;gap:3px}.count-pill{width:23px;height:23px;border-radius:7px;display:grid;place-items:center;color:white;font:500 12px var(--mono)}.count-pill.yellow{background:var(--yellow)}.count-pill.green{background:var(--green)}.row-clue.empty{visibility:hidden}.row-clue .count-pill{width:22px;height:22px;border-radius:6px;font-size:11px}.board-row.submitted .tile{cursor:default}.board-row.winning .tile{background:#e4f2e7;border-color:#75b589;animation:pop .35s ease both}.board-row.winning .tile:nth-child(2){animation-delay:.04s}.board-row.winning .tile:nth-child(3){animation-delay:.08s}.board-row.winning .tile:nth-child(4){animation-delay:.12s}.board-row.winning .tile:nth-child(5){animation-delay:.16s}@keyframes pop{50%{transform:translateY(-5px)}}.row-tools{width:min(100%,355px);margin:14px auto 17px;display:flex;align-items:center;justify-content:space-between;min-height:28px}.row-hint{font-size:11px;color:#8a938b}.tool-buttons{display:flex;gap:6px}.tool-button{width:29px;height:28px;font-size:19px;line-height:1}.tool-button:disabled{opacity:.4;cursor:default}.keyboard{width:min(100%,390px);margin:0 auto;display:grid;gap:6px}.keyboard-row{display:flex;justify-content:center;gap:5px}.key{height:42px;min-width:29px;flex:1;max-width:39px;border:0;border-radius:5px;background:var(--key);color:#3e4940;font:600 13px var(--mono);cursor:pointer}.key.wide{max-width:57px;flex:1.45;font:600 9px var(--mono)}.key:hover{background:#dce1d9}.key.key-yellow{background:#eedca8;color:#75570e}.key.key-green{background:#a9d8b5;color:#1a5834}.key.key-gray{background:#c4c9c1;color:#fff}.key:active{transform:translateY(1px)}.below-keyboard{width:min(100%,390px);margin:20px auto 0;padding-top:11px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font:400 9px var(--mono);letter-spacing:.35px;color:#929a92}.side-panel{padding-top:71px}.clue-panel,.notes-panel{border-top:1px solid var(--line);padding:19px 0 20px}.panel-title{display:flex;gap:11px;align-items:flex-start}.panel-icon{width:25px;height:25px;border-radius:7px;background:#e3f0e4;display:grid;place-items:center;color:var(--green);font-size:16px;flex:none}.notes-icon{background:#f7f0d9;color:#b1831c}.panel-title h2{margin:1px 0 5px;font-size:13px;line-height:1.3}.panel-title p{font-size:10px;line-height:1.5;color:var(--muted);margin:0}.clue-example{display:flex;align-items:center;gap:7px;margin:18px 0 16px 36px}.mini-tiles{display:flex;gap:4px}.mini-tiles span{width:30px;height:32px;display:grid;place-items:center;background:white;border:1px solid #dce1da;border-radius:4px;font-size:13px;font-weight:700}.count-stack{display:flex;gap:3px}.legend{display:flex;flex-direction:column;gap:10px;padding-left:36px}.legend-item{display:flex;align-items:center;gap:10px}.legend-swatch{width:12px;height:12px;border-radius:3px;flex:none}.swatch-yellow{background:#e1b23e}.swatch-green{background:#4b9b68}.legend-item p{font-size:10px;line-height:1.45;color:#788178;margin:0}.legend-item strong{font-weight:700;color:#333c34}.notes-panel{padding-bottom:17px}.mark-guide{display:flex;align-items:center;gap:9px;margin:12px 0 0 36px;font-size:10px;color:#687269}.guide-tile{width:24px;height:24px;display:grid;place-items:center;border-radius:4px;font-size:11px;font-weight:700;color:#576057}.guide-yellow{background:var(--yellow-soft)}.guide-green{background:var(--green-soft)}.guide-arrow{font-size:12px;color:#a4aca4}.lock-note{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0 36px;border-top:1px solid var(--line);padding-top:12px;color:#828c82;font-size:10px;line-height:1.55}.lock-symbol{font-size:16px;color:#858c81}.side-footer{display:flex;align-items:center;gap:7px;color:#939b93;font:400 8px var(--mono);letter-spacing:.55px}.live-indicator{width:6px;height:6px;background:#91be8c}.toast{position:fixed;left:50%;top:83px;transform:translate(-50%,-8px);background:#26332a;color:white;padding:10px 15px;border-radius:6px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}.toast.visible{opacity:1;transform:translate(-50%,0)}.modal{width:min(440px,calc(100% - 32px));border:1px solid var(--line);border-radius:10px;padding:29px;background:#fff;color:var(--ink);box-shadow:0 20px 70px #1c261c26}.modal::backdrop{background:#19231d66;backdrop-filter:blur(2px)}.modal h2{font-size:23px;margin:0 0 15px;letter-spacing:0}.modal>p:not(.eyebrow){font-size:13px;line-height:1.7;color:#657066}.modal-close{position:absolute;right:13px;top:10px;border:0;background:none;font-size:24px;color:#788178;cursor:pointer}.modal-legend{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:10px;color:#687269}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.stats-grid div{display:flex;flex-direction:column;gap:4px}.stats-grid strong{font:500 27px var(--mono)}.stats-grid span{font-size:11px;color:var(--muted)}.primary-button{width:100%;padding:13px;border:0;border-radius:6px;background:var(--green);color:white;font:500 10px var(--mono);letter-spacing:.7px;cursor:pointer}.primary-button:hover{background:#1e7145}.primary-button span{margin-left:6px}.win-overlay{position:fixed;inset:0;z-index:4;background:#f7f8f5ed;display:grid;place-items:center;padding:20px}.win-overlay[hidden]{display:none}.result-sheet{width:min(345px,100%);text-align:center}.result-icon{width:44px;height:44px;margin:0 auto 17px;border-radius:13px;background:#e1f0e4;color:var(--green);display:grid;place-items:center;font-size:22px}.result-sheet .eyebrow{margin-bottom:9px}.result-sheet h2{font-size:29px;margin:0;letter-spacing:0}.answer-reveal{display:flex;justify-content:center;gap:6px;margin:20px 0 9px}.answer-reveal span{width:39px;height:42px;display:grid;place-items:center;background:var(--green-soft);border:1px solid #a7d0af;border-radius:5px;font-size:17px;font-weight:700}.result-caption{font-size:12px;color:#7d877e;margin:0 0 23px}.result-sheet .primary-button{display:flex;justify-content:center;align-items:center;gap:8px}.shake{animation:shake .28s ease}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:740px){.shell{padding:0 19px}.topbar{height:62px}.game-layout{display:block;padding:28px 0 35px}.game-heading{margin-bottom:20px}.game-heading h1{font-size:32px}.subtitle{max-width:255px;line-height:1.45}.round-count{font-size:8px}.board{grid-template-rows:repeat(6,48px);gap:6px}.board-row{gap:5px;grid-template-columns:repeat(5,minmax(0,1fr)) 48px}.tile{font-size:20px}.row-tools{margin-top:13px;margin-bottom:14px}.keyboard{gap:6px}.keyboard-row{gap:4px}.key{height:42px;min-width:0;font-size:12px}.key.wide{font-size:8px}.below-keyboard{margin-top:17px}.side-panel{padding:34px 3px 0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.clue-panel,.notes-panel{padding-top:15px}.side-footer{grid-column:1/-1;margin-top:3px}.panel-title{gap:8px}.panel-title h2{font-size:12px}.panel-title p{font-size:9px}.clue-example,.legend,.mark-guide,.lock-note{margin-left:0;padding-left:0}.clue-example{gap:5px;margin-top:16px}.mini-tiles{gap:2px}.mini-tiles span{width:23px;height:27px;font-size:11px}.count-pill{width:21px;height:21px;font-size:11px}.legend-item{gap:7px}.legend-item p{font-size:9px}.mark-guide{gap:6px;font-size:9px}.lock-note{font-size:9px}.guide-tile{width:21px;height:21px}}@media(max-width:390px){.shell{padding:0 14px}.game-heading h1{font-size:30px}.round-count{font-size:7px}.side-panel{column-gap:15px}.panel-title h2{font-size:11px}.mini-tiles span{width:20px;height:24px}.clue-example{gap:4px}.count-stack{gap:2px}.row-clue .count-pill{width:20px;height:20px}.board-row{grid-template-columns:repeat(5,minmax(0,1fr)) 44px}}