@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,600&family=DM+Sans:wght@400;500;600;700&display=swap");:root{--dt-bg:#d4e9d0;--dt-bg-deep:#b8d9b2;--dt-surface:#fff;--dt-green-dark:#1b5e20;--dt-green-mid:#2e7d32;--dt-green-light:#e8f5e9;--dt-green-border:#a5d6a7;--dt-accent:#832a24;--dt-accent-bg:#fff8e1;--dt-text:#1a1a1a;--dt-text-mid:#444;--dt-text-dim:#666;--dt-gold:#856404;--dt-gold-border:#ffe082;--dt-gold-bg:#fffde7;--dt-shadow:rgba(0,0,0,.08);--dt-shadow-green:rgba(27,94,32,.18);--dt-font-display:"Fraunces",Georgia,serif;--dt-font-body:"DM Sans",sans-serif;--dt-radius:18px;--dt-radius-sm:10px;--dt-radius-xs:6px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}.dt-page{background:var(--dt-bg);background-image:radial-gradient(ellipse at 20% 10%,hsla(0,0%,100%,.5) 0,transparent 50%),radial-gradient(ellipse at 80% 90%,rgba(27,94,32,.12) 0,transparent 50%);justify-content:center;font-family:var(--dt-font-body)}.dt-page,.dt-root{min-height:100vh;display:flex;position:relative}.dt-root{width:100%;max-width:480px;flex-direction:column;overflow:hidden}.dt-grain{position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");pointer-events:none;z-index:0}.dt-scroll{overflow-y:auto;padding:24px 20px 16px;position:relative;scrollbar-width:thin;scrollbar-color:var(--dt-green-border) transparent}.dt-center,.dt-scroll{flex:1;display:flex;flex-direction:column;align-items:center;z-index:1}.dt-center{justify-content:center;gap:16px}.dt-header{text-align:center;margin-bottom:20px;width:100%}.dt-title{font-size:2.5em;font-weight:700;color:var(--dt-green-dark);letter-spacing:-.01em;line-height:1;margin-bottom:4px}.dt-subtitle,.dt-title{font-family:var(--dt-font-display)}.dt-subtitle{font-size:14px;color:var(--dt-text-dim);font-style:italic}.dt-card{width:100%;max-width:480px;background:var(--dt-surface);border-radius:var(--dt-radius);padding:22px 20px;margin-bottom:14px;box-shadow:0 4px 20px var(--dt-shadow);display:flex;flex-direction:column;align-items:center;animation:dtFadeUp .4s ease forwards}.dt-card--puzzle{border:1.5px solid var(--dt-green-border)}.dt-card--answer{animation:dtPop .4s cubic-bezier(.34,1.56,.64,1) forwards}.dt-card--won{background:var(--dt-gold-bg);border:1.5px solid var(--dt-gold-border);box-shadow:0 4px 20px rgba(249,168,37,.15)}.dt-card--lost{background:#fff5f5;border:1.5px solid #ffcdd2}.dt-badge{display:inline-block;background:var(--dt-green-light);color:var(--dt-green-mid);font-size:10px;font-weight:700;letter-spacing:1.8px;padding:4px 14px;border-radius:20px;margin-bottom:14px;font-family:var(--dt-font-body)}.dt-puzzle-text{font-size:clamp(18px,4.5vw,22px);line-height:1.65;text-align:center;font-family:var(--dt-font-display);font-weight:400}.dt-puzzle-text,.dt-puzzle-word{color:var(--dt-text)}.dt-puzzle-highlight{color:var(--dt-accent);font-weight:700;background:var(--dt-accent-bg);border-radius:5px;padding:1px 5px}.dt-answer-label{font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--dt-gold);margin-bottom:10px;font-family:var(--dt-font-body)}.dt-answer-text{font-family:var(--dt-font-display);font-size:clamp(26px,7vw,34px);font-weight:900;color:var(--dt-green-dark);letter-spacing:.04em}.dt-card--lost .dt-answer-label{color:#b71c1c}.dt-card--lost .dt-answer-text{color:#c62828}.dt-hint{width:100%;max-width:480px;background:#fffde7;border-left:4px solid #f9a825;border-radius:var(--dt-radius-sm);padding:10px 16px;font-size:13px;color:var(--dt-text-dim);line-height:1.5;margin-bottom:14px}.dt-banner,.dt-hint strong{color:var(--dt-text);font-weight:700}.dt-banner{width:100%;max-width:480px;padding:12px 16px;border-radius:var(--dt-radius-sm);font-size:15px;text-align:center;margin-bottom:14px;animation:dtFadeUp .25s ease forwards}.dt-banner--success{background:#c8e6c9}.dt-banner--error{background:#ffcdd2}.dt-solved-footer{width:100%;max-width:480px;background:var(--dt-green-light);border-radius:var(--dt-radius-sm);padding:14px 20px;text-align:center;font-size:15px;font-weight:600;color:var(--dt-green-dark)}.dt-bottom{position:relative;z-index:1;background:var(--dt-bg-deep);border-top:1px solid var(--dt-green-border);padding:12px 16px 8px;width:100%}.dt-input-row{gap:10px;width:100%;max-width:480px;margin:0 auto 8px}.dt-input-row,.dt-input-wrap{display:flex;align-items:center}.dt-input-wrap{flex:1;position:relative}.dt-input-display{display:block;width:100%;background:var(--dt-surface);border:2px solid var(--dt-green-mid);border-radius:var(--dt-radius-sm);padding:12px 40px 12px 16px;font-size:20px;font-weight:600;color:var(--dt-text);letter-spacing:1.5px;font-family:var(--dt-font-display);min-height:52px;line-height:1.4}.dt-input-placeholder{color:#aaa;font-weight:400;letter-spacing:0;font-size:16px}.dt-clear-btn{position:absolute;right:10px;background:none;border:none;cursor:pointer;font-size:16px;color:#999;font-weight:700;padding:4px;line-height:1}.dt-clear-btn:hover{color:#555}.dt-submit-btn{background:var(--dt-green-mid);color:#fff;border:none;border-radius:var(--dt-radius-sm);padding:14px 18px;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:var(--dt-font-body);box-shadow:0 3px 10px var(--dt-shadow-green);transition:background .15s,transform .1s;flex-shrink:0}.dt-submit-btn:hover:not(:disabled){background:var(--dt-green-dark);transform:translateY(-1px)}.dt-submit-btn:active:not(:disabled){transform:translateY(0)}.dt-submit-btn--disabled{background:#aaa;box-shadow:none;cursor:not-allowed}.dt-attempts{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}.dt-dots{display:flex;gap:6px}.dt-dot{width:9px;height:9px;border-radius:50%;transition:background .3s}.dt-dot--used{background:var(--dt-green-mid)}.dt-dot--empty{background:var(--dt-green-border)}.dt-attempts-text{font-size:12px;color:var(--dt-text-dim);font-weight:600}.dt-keyboard{width:100%;max-width:480px;margin:0 auto}.dt-key-row{display:flex;justify-content:center;gap:5px;margin-bottom:5px}.dt-key{background:#fff;border:1px solid var(--dt-green-border);border-radius:var(--dt-radius-xs);padding:11px 8px;min-width:30px;font-size:15px;font-weight:600;color:var(--dt-text);cursor:pointer;font-family:var(--dt-font-body);transition:background .1s,transform .08s;box-shadow:0 1px 3px var(--dt-shadow);user-select:none}.dt-key:hover{background:var(--dt-green-light)}.dt-key:active{transform:scale(.93);background:var(--dt-green-border)}.dt-key--wide{padding-left:14px;padding-right:14px}.dt-spinner{width:36px;height:36px;border:3px solid var(--dt-green-border);border-top-color:var(--dt-green-mid);border-radius:50%;animation:dtSpin .8s linear infinite}.dt-loading-text{color:var(--dt-green-mid);font-size:15px}.dt-error-text{color:#c62828;margin-bottom:12px;font-size:15px}.dt-btn-primary{background:var(--dt-green-mid);color:#fff;border:none;border-radius:var(--dt-radius-sm);padding:12px 24px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--dt-font-body);transition:background .15s}.dt-btn-primary:hover{background:var(--dt-green-dark)}@keyframes dtFadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes dtPop{0%{opacity:0;transform:scale(.88)}65%{transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@keyframes dtSpin{to{transform:rotate(1turn)}}@keyframes dtShake{0%,to{transform:translateX(0)}15%{transform:translateX(-10px)}30%{transform:translateX(10px)}45%{transform:translateX(-8px)}60%{transform:translateX(8px)}75%{transform:translateX(-4px)}90%{transform:translateX(4px)}}.dt-shake{animation:dtShake .5s ease}@media (max-width:400px){.dt-key{padding:10px 5px;min-width:26px;font-size:13px}.dt-key--wide{padding-left:10px;padding-right:10px}.dt-puzzle-text{font-size:17px}}.dt-lobby-wrap{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;padding:2.5rem 1.25rem 4rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem;overflow-y:auto;min-height:100vh}.dt-lobby-header{text-align:center;margin-bottom:.5rem}.dt-lobby-eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dt-green-mid);margin-bottom:10px}.dt-lobby-title{font-size:2.5rem;font-weight:700;color:var(--dt-green-dark);line-height:1;margin-bottom:12px;letter-spacing:-.02em}.dt-lobby-tagline,.dt-lobby-title{font-family:var(--dt-font-display)}.dt-lobby-tagline{font-size:16px;color:var(--dt-text-dim);font-style:italic}.dt-play-btn{width:100%;background:var(--dt-green-mid);color:#fff;border:none;border-radius:var(--dt-radius);padding:18px 28px;font-size:18px;font-weight:700;cursor:pointer;font-family:var(--dt-font-body);box-shadow:0 4px 16px var(--dt-shadow-green);transition:background .15s,transform .1s,box-shadow .15s;letter-spacing:.02em}.dt-play-btn:hover{background:var(--dt-green-dark);transform:translateY(-2px);box-shadow:0 6px 20px var(--dt-shadow-green)}.dt-play-btn:active{transform:translateY(0)}.dt-lobby-card{width:100%;background:var(--dt-surface);border:1.5px solid var(--dt-green-border);border-radius:var(--dt-radius);padding:1.5rem 1.25rem;box-shadow:0 3px 14px var(--dt-shadow)}.dt-lobby-card--example{background:var(--dt-gold-bg);border-color:var(--dt-gold-border)}.dt-how-title{font-family:var(--dt-font-display);font-size:1.2rem;font-weight:700;color:var(--dt-green-dark);margin-bottom:1rem}.dt-how-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}.dt-how-steps li{display:flex;gap:14px;align-items:flex-start}.dt-how-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--dt-green-light);border:1.5px solid var(--dt-green-border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--dt-green-mid);margin-top:1px}.dt-how-steps strong{display:block;font-size:14px;color:var(--dt-text);margin-bottom:2px}.dt-how-steps p{font-size:13px;color:var(--dt-text-dim);line-height:1.5;margin:0}.dt-example-label{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dt-gold);margin-bottom:12px;font-family:var(--dt-font-body)}.dt-example-question{font-family:var(--dt-font-display);font-size:16px;color:var(--dt-text);line-height:1.7;margin-bottom:1rem;text-align:center}.dt-example-reveal{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:1rem;border-top:1px solid var(--dt-gold-border)}.dt-example-reveal-label{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dt-gold);font-family:var(--dt-font-body)}.dt-example-reveal-word{font-family:var(--dt-font-display);font-size:2rem;font-weight:900;color:var(--dt-green-dark);letter-spacing:.1em}.dt-back-btn{align-self:flex-start;background:transparent;border:1px solid var(--dt-green-border);border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--dt-green-dark);cursor:pointer;font-family:var(--dt-font-body);transition:all .15s;margin-bottom:4px}.dt-back-btn:hover{color:var(--dt-text);border-color:var(--dt-green-mid)}.dt-share{width:100%;max-width:480px;padding:1rem 1.25rem 1.5rem}.dt-share-label{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--dt-text-dim);text-align:center;margin-bottom:10px}.dt-share-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.dt-share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--dt-font-body);transition:transform .1s,opacity .15s;white-space:nowrap}.dt-share-btn:hover{opacity:.88;transform:translateY(-1px)}.dt-share-btn:active{transform:translateY(0);opacity:1}.dt-share-btn--twitter{background:#000;color:#fff}.dt-share-btn--whatsapp{background:#25d366;color:#fff}.dt-share-btn--copy{background:var(--dt-surface);color:var(--dt-text);border:1.5px solid var(--dt-green-border)}.dt-share-btn--copied{background:var(--dt-green-light);color:var(--dt-green-dark);border-color:var(--dt-green-mid)}.dt-share-preview{width:100%;background:var(--dt-surface);border:1.5px solid var(--dt-green-border);border-radius:10px;padding:14px 16px;margin-bottom:12px;font-family:var(--dt-font-body);font-size:14px;line-height:1.65;color:var(--dt-text);white-space:pre-wrap;word-break:break-word}