*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: transparent;--text: #000;--dark-text: rgba(0, 0, 0, .6);--dim: rgba(0, 0, 0, .38);--dimmer: rgba(0, 0, 0, .2);--surface: rgba(255, 255, 255, .4);--surface-hover: rgba(255, 255, 255, .58);--card: rgba(255, 255, 255, .3);--card-border: rgba(255, 255, 255, .75);--radius: 18px;--card-radius: 28px;--font: "Inter", system-ui, sans-serif}html,body{height:100%;font-family:var(--font);background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;min-height:100dvh}.btn-store{display:inline-flex;align-items:center;gap:7px;background:#000000d1;color:#fff;border-radius:50px;font-family:var(--font);font-weight:800;font-size:13px;padding:8px 15px;text-decoration:none;white-space:nowrap;transition:opacity .15s,transform .15s}.btn-store:hover{opacity:.8;transform:translateY(-1px)}.btn-store:active{transform:translateY(0)}.btn-store svg{width:15px;height:15px;fill:#fff;flex-shrink:0;display:none}.fonts-loaded .btn-store svg{display:inline-block}.btn-store-lg{font-size:15px;padding:13px 22px}.btn-store-lg svg{width:18px;height:18px}#page-main{flex:1;display:flex;align-items:stretch;justify-content:center}.page-inner{flex:1;display:flex;flex-direction:column;align-items:center;padding:32px 20px 48px;gap:32px;max-width:1100px;margin:0 auto;width:100%}.hero-mobile-top{display:none;width:100%;text-align:center}.hero-mobile-top .hero-title{font-size:clamp(22px,5vw,32px);margin-bottom:0}.hero{width:100%;max-width:560px;text-align:center}.hero-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);margin-bottom:12px}.hero-title{font-size:clamp(32px,7vw,52px);font-weight:900;letter-spacing:-1.5px;line-height:1.05;margin-bottom:14px}.hero-title em{font-style:normal;position:relative;display:inline-block}.hero-sub{font-size:clamp(15px,2.5vw,17px);font-weight:600;color:var(--dim);line-height:1.55;max-width:400px;margin:0 auto 24px}.hero-cta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.hero-cta .btn-store{font-size:14px;padding:11px 20px}.hero-cta .btn-store svg{width:16px;height:16px}@media(min-width:860px){.page-inner{flex-direction:row;align-items:center;justify-content:center;gap:56px;padding:48px 40px}#game-card{flex:0 0 400px;order:1}.hero{flex:1;max-width:380px;order:2;text-align:left}.hero-cta{justify-content:flex-start}.hero-mobile-top{display:none}.hero-title-desktop{display:block}}@media(max-width:859px){.page-inner{padding:20px 16px 40px;gap:20px;align-items:center}#game-card{width:100%;max-width:100%}.hero{width:100%;max-width:100%;text-align:center}.hero-sub{margin:0 auto 24px}.hero-mobile-top{display:block}.hero-title-desktop{display:none}.game-card-header{padding:14px 16px 0}.game-layout{padding:10px 16px 16px;height:380px}.word-row{font-size:22px}.hint{font-size:16px}.modal-card,.win-content{padding:28px 20px 32px}.btn-store-lg{font-size:14px;padding:12px 18px}}#game-card{width:100%;max-width:560px;background:var(--card);border:1.5px solid var(--card-border);border-radius:var(--card-radius);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 40px #0000001a,0 1px #fff9 inset;overflow:hidden;display:flex;flex-direction:column}.game-card-header{padding:16px 24px 0;display:flex;align-items:center;justify-content:space-between}.puzzle-meta{display:flex;align-items:baseline;gap:8px}.puzzle-num{font-size:14px;font-weight:900}.puzzle-date{font-size:12px;font-weight:800;color:var(--dim)}.game-layout{padding:12px 24px 20px;display:flex;flex-direction:column;height:460px}.words-zone{flex:1;display:flex;flex-direction:column;overflow-y:auto;min-height:0;scrollbar-width:none}.words-zone::-webkit-scrollbar{display:none}.words-above{justify-content:flex-end;padding-bottom:10px;mask-image:linear-gradient(to bottom,transparent 0%,black 60%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 60%)}.words-below{justify-content:flex-start;padding-top:10px;mask-image:linear-gradient(to top,transparent 0%,black 60%);-webkit-mask-image:linear-gradient(to top,transparent 0%,black 60%)}.hint{display:block;font-size:18px;font-weight:900;line-height:1.3;color:var(--text)}.hint.dim{color:var(--dim)}.word-row{font-size:26px;font-weight:900;line-height:1.25;color:var(--dark-text)}.word-row.close{color:var(--dark-text)}.word-row.anim-up{animation:slideUp .22s ease both}.word-row.anim-down{animation:slideDown .22s ease both}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.input-zone{padding:6px 0;flex-shrink:0}.input-wrap{display:flex;gap:8px;align-items:center}#word-input{flex:1;min-width:0;background:var(--surface);border:2px solid transparent;border-radius:var(--radius);padding:14px 18px;font-family:var(--font);font-size:22px;font-weight:900;color:var(--text);outline:none;text-transform:uppercase;letter-spacing:1px;transition:border-color .18s,background .18s;-webkit-appearance:none}#word-input::placeholder{color:#00000047;font-weight:700;letter-spacing:0;font-size:15px;text-transform:none}#word-input:focus{border-color:#00000038;background:var(--surface-hover)}#word-input.shake{animation:shake .28s ease;border-color:#b4000073}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}#submit-btn{background:#000000d1;color:#fff;border:none;border-radius:var(--radius);width:52px;height:52px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .12s}#submit-btn:hover{opacity:.8;transform:scale(1.06)}#submit-btn:active{transform:scale(.96)}.error-msg{font-size:13px;font-weight:800;color:#aa0000bf;min-height:20px;padding-top:5px;text-align:center}.puzzle-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 0 4px;flex-shrink:0}.footer-nav{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:800;color:var(--dim);padding:8px 4px;transition:color .15s,transform .15s;border-radius:10px}.footer-nav:hover{color:var(--text);transform:scale(1.04)}.nav-arrow{font-size:16px}.nav-label{font-size:13px;font-weight:800}.footer-stuck{background:var(--surface);border:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:800;color:var(--dim);padding:7px 14px;border-radius:50px;transition:background .15s,color .15s;display:flex;align-items:center;gap:5px}.footer-stuck:hover{background:var(--surface-hover);color:var(--text)}.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:#0003;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-card{position:relative;background:var(--bg);transition:background-color .7s ease;border-radius:28px;padding:32px 28px 36px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;animation:slideUpModal .28s ease both;box-shadow:0 20px 60px #0000002e}@keyframes slideUpModal{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-eyebrow{font-size:13px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}.modal-title{font-size:24px;font-weight:900;letter-spacing:-.4px;line-height:1.2}.modal-body{font-size:15px;font-weight:600;color:var(--dim);line-height:1.5}.hint-letter-wrap{display:flex;align-items:center;justify-content:center;height:90px}.hint-letter{font-size:64px;font-weight:900;letter-spacing:2px;filter:blur(12px);transition:filter .4s ease;-webkit-user-select:none;user-select:none}.hint-letter.revealed{filter:blur(0)}.btn-reveal{background:#000000d1;color:#fff;border:none;border-radius:50px;font-family:var(--font);font-size:16px;font-weight:800;padding:15px 28px;cursor:pointer;transition:opacity .15s;align-self:stretch}.btn-reveal:hover{opacity:.8}.btn-reveal.done{opacity:.4;cursor:default}.btn-close-modal{position:absolute;top:16px;right:18px;background:#00000014;border:none;border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:background .15s}.btn-close-modal:hover{background:#00000024}.cta-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.win-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:#0000002e;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s ease}.win-screen.visible{opacity:1;pointer-events:all}.win-screen.hidden{display:none}.win-content{position:relative;background:var(--bg);transition:background-color .7s ease;border-radius:28px;padding:32px 28px 36px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .28s ease both}.win-puzzle-num{font-size:13px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}.win-title{font-size:clamp(22px,5vw,28px);font-weight:800;line-height:1.2;letter-spacing:-.4px}.win-word-highlight{font-weight:900}.win-attempts{font-size:15px;font-weight:700;color:var(--dim)}.win-words{font-size:20px;font-weight:900;line-height:1.5;color:var(--dim)}.win-words strong{color:var(--text)}.win-cta{display:flex;flex-direction:column;gap:10px;margin-top:4px}.win-cta-label{font-size:15px;font-weight:700;color:var(--dim)}
