:root{--bg:#111010;--surface:#1c1b1a;--surface2:#252423;--cream:#f0ebe0;--cream-dim:#9a9186;--cream-faint:#3a3630;--green:#2d6a4f;--green-bright:#52c28a;--green-bg:#2d6a4f2e;--amber:#b8860b;--amber-bright:#e8b830;--amber-bg:#b8860b26;--red:#8b3030;--red-bright:#e05252;--red-bg:#8b30302e;--gold:#e8b830;--border:#f0ebe01a;--border-mid:#f0ebe033}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--cream);flex-direction:column;max-width:430px;min-height:100svh;margin:0 auto;padding:0 14px;font-family:DM Sans,sans-serif;display:flex;position:relative;overflow-x:hidden}body:before{content:"";opacity:.3;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");position:fixed;inset:0}.app-shell{z-index:1;flex-direction:column;flex:1;min-height:100svh;display:flex;position:relative}.screen-stack{flex-direction:column;flex:1;min-height:0;display:flex}.header{border-bottom:1px solid var(--border);z-index:1;justify-content:space-between;align-items:center;padding:18px 0 16px;display:flex;position:relative}.logo{letter-spacing:-.3px;align-items:center;gap:10px;font-family:Playfair Display,serif;font-size:21px;font-weight:700;display:flex}.logo-mark{flex-shrink:0;width:22px;height:22px;display:block}.logo-text{display:block}.logo span{color:var(--gold);font-style:italic;font-weight:400}.header-right{align-items:center;gap:8px;display:flex}.timer-display{color:var(--cream-dim);letter-spacing:.5px;font-family:Inconsolata,monospace;font-size:14px}.hints-pill{color:var(--gold);border:1px solid #e8b83066;border-radius:20px;align-items:center;gap:4px;padding:5px 10px;font-size:13px;font-weight:600;display:flex}.screen{z-index:1;padding-bottom:20px;display:none;position:relative}.screen.active{display:block}#screen-puzzle.active{min-height:0;padding-bottom:calc(28px + env(safe-area-inset-bottom));flex-direction:column;flex:1;display:flex}.puzzle-meta{text-align:center;border-bottom:1px solid var(--border);margin-bottom:18px;padding:16px 0 18px}.puzzle-num-label{text-transform:uppercase;letter-spacing:3px;color:var(--cream-dim);margin-bottom:3px;font-size:11px}.puzzle-title-large{font-family:Playfair Display,serif;font-size:30px;font-weight:700}.puzzle-date-small{color:var(--cream-dim);margin-top:2px;font-family:Playfair Display,serif;font-size:12px;font-style:italic}.cards-list{flex-direction:column;gap:8px;display:flex}.puzzle-card{background:var(--surface);border:1px solid var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;border-radius:14px;align-items:center;gap:12px;padding:14px 15px;transition:border-color .2s,background .15s,transform .1s;animation:.35s forwards fade-up;display:flex}.puzzle-card:first-child{animation-delay:50ms}.puzzle-card:nth-child(2){animation-delay:.1s}.puzzle-card:nth-child(3){animation-delay:.15s}.puzzle-card:nth-child(4){animation-delay:.2s}.puzzle-card:nth-child(5){animation-delay:.25s}.puzzle-card:active{background:var(--surface2);transform:scale(.98)}.puzzle-card.solved{background:#2d6a4f1f;border-color:#52c28a73}.puzzle-card.solved-hinted{background:#b8860b1f;border-color:#e8b83073}.card-hint-badge{color:var(--amber-bright);flex-shrink:0;font-family:Inconsolata,monospace;font-size:12px;font-weight:700}.puzzle-card.revealed{opacity:.7;background:#8b303014;border-color:#e052524d}.puzzle-card.done{cursor:default}.puzzle-card.done:active{transform:none}@keyframes card-pop{0%{transform:scale(1)}40%{transform:scale(1.025)}to{transform:scale(1)}}.puzzle-card.just-solved{animation:.4s card-pop}.card-num{color:var(--cream-dim);min-width:18px;font-family:Inconsolata,monospace;font-size:13px}.card-body{flex:1;min-width:0}.card-chain{letter-spacing:.8px;white-space:nowrap;text-overflow:ellipsis;font-family:Inconsolata,monospace;font-size:14px;font-weight:700;overflow:hidden}.card-chain .blanks{color:var(--cream-dim);font-weight:500}.card-chain .connector-outer{color:var(--cream)}.card-chain .connector-answer{color:inherit}.card-chain .answer-hint{color:var(--amber-bright)}.card-chain .answer-solved{color:var(--green-bright)}.card-chain .answer-revealed{color:var(--red-bright)}.card-chain .sep{color:var(--cream-faint);margin:0 5px}.card-icon{flex-shrink:0;font-size:16px}.puzzle-nav{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:12px 0;display:flex}.puzzle-home-btn{background:var(--surface);border:1px solid var(--border-mid);color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:38px;transition:background .15s,border-color .15s,transform .1s;display:flex}.puzzle-home-btn:active{background:var(--surface2);transform:scale(.98)}.puzzle-home-icon{width:18px;height:18px;display:block}.puzzle-nav-list{flex:1;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;display:grid}.puzzle-nav-chip{border:1px solid var(--border);background:var(--surface);min-width:0;height:38px;color:var(--cream-dim);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:11px;justify-content:center;align-items:center;font-family:Inconsolata,monospace;font-size:14px;font-weight:700;transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s;display:flex}.puzzle-nav-chip:active{transform:scale(.98)}.puzzle-nav-chip.is-unsolved{border-color:var(--border-mid);color:var(--cream-dim);background:#f0ebe008}.puzzle-nav-chip.is-solved{color:var(--green-bright);background:#2d6a4f29;border-color:#52c28a73}.puzzle-nav-chip.is-hinted{color:var(--amber-bright);background:#b8860b24;border-color:#e8b83073}.puzzle-nav-chip.is-revealed{color:var(--red-bright);background:#8b303029;border-color:#e0525257}.puzzle-nav-chip.is-active{color:var(--cream);border-color:#f0ebe08c;box-shadow:0 0 0 2px #f0ebe033}.chain-display{flex-direction:column;align-items:center;gap:5px;padding:22px 0 16px;display:flex}.chain-stack{flex-direction:column;align-items:center;gap:10px;display:flex}.chain-inline-line{justify-content:center;width:100%;display:flex}.chain-anchor{letter-spacing:2px;color:var(--cream-dim);font-family:Inconsolata,monospace;font-size:17px;font-weight:700}.chain-preview-line{white-space:pre-wrap}.inline-answer-text{color:var(--cream-faint);transition:color .15s,transform .15s}.inline-answer-text.is-active,.inline-answer-text.is-empty{color:var(--cream-faint)}.inline-answer-text.is-hint{color:var(--amber-bright)}.inline-answer-text.is-user{color:var(--cream)}.inline-answer-text.is-correct{color:var(--green-bright)}.inline-answer-text.is-wrong{color:var(--red-bright)}.inline-answer-text.is-bounced{animation:.18s slot-bounce}.slots-row{gap:6px;margin:2px 0;display:flex}.slot{border:2px solid var(--border-mid);border-radius:10px;justify-content:center;align-items:center;width:44px;height:52px;font-family:Inconsolata,monospace;font-size:22px;font-weight:700;transition:border-color .15s,background .15s,color .15s;display:flex}.slot.is-active{background:#f0ebe008;border-color:#f0ebe073}.slot.is-hint{border-color:var(--amber);color:var(--amber-bright);background:var(--amber-bg)}.slot.is-user{border-color:var(--border-mid);color:var(--cream)}.slot.is-correct{border-color:var(--green);color:var(--green-bright);background:var(--green-bg)}.slot.is-wrong{border-color:var(--red);color:var(--red-bright);background:var(--red-bg)}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}35%{transform:translate(7px)}55%{transform:translate(-5px)}75%{transform:translate(5px)}}.slots-row.shaking{animation:.42s shake}@keyframes slot-bounce{0%{transform:translateY(0)}45%{transform:translateY(-5px)}to{transform:translateY(0)}}@media (max-width:430px){.chain-anchor{letter-spacing:1.4px;font-size:15px}}.controls-row{gap:7px;padding:8px 0 10px;display:flex}.ctrl-btn{border:1px solid var(--border-mid);color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:center;background:0 0;border-radius:11px;padding:10px 8px;font-family:DM Sans,sans-serif;font-size:13px;font-weight:600;transition:background .15s,border-color .15s}.ctrl-btn:active{background:var(--surface2)}.ctrl-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.btn-hint{color:var(--amber-bright);border-color:#e8b83066;flex:1}.btn-hint:active{background:var(--amber-bg)}.btn-reveal{color:var(--red-bright);border-color:#e052524d;flex:1;font-size:13px}.btn-reveal:active{background:var(--red-bg)}.btn-reveal.confirm-mode{border-color:var(--red-bright);background:var(--red-bg)}.puzzle-status-note{text-align:center;letter-spacing:.4px;color:var(--cream-dim);padding:0 0 12px;font-family:Inconsolata,monospace;font-size:12px}.keyboard{-webkit-user-select:none;user-select:none;flex-direction:column;gap:6px;padding:2px 0 0;display:flex}#screen-puzzle .keyboard{margin-top:auto}.kb-row{justify-content:center;gap:5px;display:flex}.kb-key{min-width:30px;max-width:40px;height:52px;color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#2e2c2a;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;font-family:DM Sans,sans-serif;font-size:14px;font-weight:600;transition:background .1s,transform 80ms;display:flex;box-shadow:0 2px #0006}.kb-key:active{box-shadow:none;background:#3d3a37;transform:translateY(1px)}.kb-key.key-wide{min-width:50px;max-width:58px;font-size:12px}.kb-key:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}.results-wrap{padding:24px 0}.results-headline{text-align:center;margin-bottom:5px;font-family:Playfair Display,serif;font-size:32px;font-weight:700;line-height:1.1}.results-sub{text-align:center;color:var(--cream-dim);margin-bottom:22px;font-size:13px}.results-streak{color:var(--gold);letter-spacing:.3px;margin-top:8px;font-family:Inconsolata,monospace;font-size:13px;font-weight:700}.share-card{background:var(--surface);border:1px solid var(--border-mid);border-radius:16px;margin-bottom:14px;padding:18px 16px}.share-card-title{color:var(--gold);letter-spacing:.5px;margin-bottom:14px;font-family:Inconsolata,monospace;font-size:14px;font-weight:700}.share-row{align-items:center;gap:10px;margin-bottom:8px;display:flex}.share-row-num{color:var(--cream-dim);min-width:20px;font-family:Inconsolata,monospace;font-size:12px}.share-row-emojis{letter-spacing:1px;font-size:18px;line-height:1}.share-divider{background:var(--border);height:1px;margin:12px 0}.share-stats-line{color:var(--cream-dim);font-family:Inconsolata,monospace;font-size:13px;line-height:1.7}.share-streak{color:var(--cream)}.share-url{color:var(--gold)}.copy-btn{background:var(--gold);color:#111010;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:13px;width:100%;padding:16px;font-family:DM Sans,sans-serif;font-size:16px;font-weight:700;transition:opacity .15s,background .2s}.copy-btn:active{opacity:.8}.copy-btn.copied{background:var(--green-bright)}.toast{background:var(--cream);color:#111010;pointer-events:none;z-index:999;white-space:nowrap;border-radius:22px;padding:9px 20px;font-size:13px;font-weight:600;transition:transform .28s cubic-bezier(.34,1.56,.64,1);position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(80px);box-shadow:0 4px 20px #00000080}.toast.show{transform:translate(-50%)translateY(0)}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.htp-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;padding:20px;animation:.25s htp-fade-in;display:flex;position:fixed;inset:0}@keyframes htp-fade-in{0%{opacity:0}to{opacity:1}}.htp-modal{background:var(--surface);border:1px solid var(--border-mid);border-radius:20px;width:100%;max-width:360px;padding:28px 24px 24px;animation:.3s htp-slide-up;position:relative}@keyframes htp-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.htp-close{color:var(--cream-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:18px;transition:color .15s;position:absolute;top:14px;right:14px}.htp-close:hover{color:var(--cream)}.htp-title{text-align:center;margin-bottom:12px;font-family:Playfair Display,serif;font-size:24px;font-weight:700}.htp-text{color:var(--cream-dim);text-align:center;margin-bottom:16px;font-size:14px;line-height:1.5}.htp-text strong{color:var(--cream)}.htp-sub{margin-bottom:20px;font-size:13px}.htp-example{background:var(--bg);border:1px solid var(--border);border-radius:14px;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;padding:18px 14px;display:flex}.htp-chain-label{color:var(--cream-dim);letter-spacing:1.5px;align-items:center;gap:8px;font-family:Inconsolata,monospace;font-size:15px;font-weight:700;display:flex}.htp-dots{color:var(--cream-faint);letter-spacing:4px;font-size:10px}.htp-slots{gap:5px;margin:4px 0;display:flex}.htp-slot{border:2px solid var(--border-mid);border-radius:9px;justify-content:center;align-items:center;width:40px;height:48px;font-family:Inconsolata,monospace;font-size:20px;font-weight:700;transition:all .2s;display:flex}.htp-slot-active{background:#f0ebe008;border-color:#f0ebe073}.htp-slot-filled{border-color:var(--border-mid);color:var(--cream);animation:.2s htp-pop}.htp-slot-correct{border-color:var(--green);color:var(--green-bright);background:var(--green-bg);animation:.25s htp-pop}@keyframes htp-pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.htp-result{color:var(--cream);align-items:center;gap:10px;margin-top:8px;font-family:Inconsolata,monospace;font-size:14px;font-weight:700;animation:.4s htp-fade-in;display:flex}.htp-result em{color:var(--gold);font-style:normal}.htp-sep{color:var(--cream-faint);font-size:12px}.htp-play-btn{background:var(--gold);color:#111010;cursor:pointer;border:none;border-radius:12px;width:100%;padding:14px;font-family:DM Sans,sans-serif;font-size:15px;font-weight:700;transition:opacity .15s}.htp-play-btn:active{opacity:.8}