:root{--color-bg: #0f0f10;--color-surface: #1c1c2a;--color-header: #161625;--color-border: rgba(255, 255, 255, .08);--color-text: #f0f0f5;--color-text-secondary: #9d9db5;--color-text-muted: #5a5a78;--color-correct: #4caf6a;--color-correct-light: #66cc80;--color-present: #c9a227;--color-absent: #3a3a4a;--color-empty: #24243a;--color-cell-border: #44445a;--color-cursor-border: #f0f0f5;--color-submit: #4caf6a;--color-submit-hover: #66cc80;--color-submit-disabled: #3a3a4a;--color-theme-bg: #1a1a40;--color-theme-accent: #e94560;--color-active-border: rgba(240, 240, 245, .2);--color-cursor-ring: rgba(128, 128, 255, .3);--color-invalid: #e94560;--color-hint: #ffd666;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--header-height: 52px;--cell-gap: 5px;--cell-size: clamp(44px, 10vw, 60px);--radius: 8px;--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);color-scheme:dark}@media (prefers-color-scheme: light){:root{--color-bg: #f5f5f7;--color-surface: #ffffff;--color-header: #ffffff;--color-border: rgba(0, 0, 0, .08);--color-text: #1a1a2e;--color-text-secondary: #5a5a78;--color-text-muted: #9d9db5;--color-correct: #4caf6a;--color-correct-light: #3d9e5a;--color-present: #c9a227;--color-absent: #c4c4cc;--color-empty: #eeeef2;--color-cell-border: #d0d0da;--color-cursor-border: #1a1a2e;--color-submit: #4caf6a;--color-submit-hover: #3d9e5a;--color-submit-disabled: #c4c4cc;--color-theme-bg: #eef0ff;--color-theme-accent: #d63851;--color-active-border: rgba(26, 26, 46, .2);--color-cursor-ring: rgba(90, 90, 220, .22);--color-invalid: #d63851;--color-hint: #c9a227;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);color-scheme:light}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;-webkit-tap-highlight-color:transparent}body{min-height:100%;background:var(--color-bg);color:var(--color-text);font-family:var(--font-main);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}body.modal-open{overflow:hidden}#app{display:flex;flex-direction:column;min-height:100dvh}#header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 16px;background:var(--color-header);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:10;box-shadow:var(--shadow-sm)}#header h1{font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text)}.header-left,.header-right{width:40px;display:flex;align-items:center}.header-right{justify-content:flex-end}.icon-btn{background:none;border:1px solid var(--color-border);color:var(--color-text);font-size:1rem;cursor:pointer;padding:6px;border-radius:10px;transition:background .15s,border-color .15s;display:flex;align-items:center;justify-content:center;width:34px;height:34px;font-weight:700}.icon-btn:hover,.icon-btn:focus-visible{background:var(--color-empty);border-color:var(--color-cell-border);outline:none}#game-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 16px 40px;gap:10px;max-width:500px;margin:0 auto;width:100%}.day-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);align-self:flex-end;font-weight:500}.theme-banner{display:flex;flex-direction:column;align-items:center;background:var(--color-theme-bg);border:1px solid rgba(233,69,96,.2);border-radius:14px;padding:14px 28px;width:100%;margin-bottom:2px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.theme-banner:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);transform:translate(-100%);pointer-events:none}.intro .theme-banner:after{animation:sheen 1.4s .55s var(--ease-out)}.theme-banner.celebrate:after{animation:sheen 1.2s var(--ease-out)}@keyframes sheen{0%{transform:translate(-100%)}to{transform:translate(100%)}}.theme-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.18em;color:var(--color-text-muted);margin-bottom:2px;font-weight:600}.theme-word{font-size:clamp(1.5rem,6vw,2.1rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--color-theme-accent);text-shadow:0 0 24px rgba(233,69,96,.3)}.theme-letter{display:inline-block}.intro .theme-letter{animation:letter-drop .55s var(--ease-spring) backwards;animation-delay:calc(.1s + var(--i) * 55ms)}.theme-banner.celebrate .theme-letter{animation:letter-wave .6s ease;animation-delay:calc(var(--i) * .06s)}@keyframes letter-drop{0%{opacity:0;transform:translateY(-14px) scale(.7)}}@keyframes letter-wave{0%,to{transform:translateY(0)}40%{transform:translateY(-8px)}}.instruction{font-size:.78rem;color:var(--color-text-secondary);text-align:center;margin-bottom:2px}.words-section{display:flex;flex-direction:column;gap:10px;width:100%}.word-row-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;transition:border-color .3s,box-shadow .3s;box-shadow:var(--shadow-sm);position:relative}.word-row-wrapper.active{border-color:var(--color-active-border)}.word-row-wrapper.solved{border-color:var(--color-correct);box-shadow:0 0 0 1px var(--color-correct),var(--shadow-sm)}.word-row-wrapper.just-solved{animation:row-glow 1.2s ease-out}@keyframes row-glow{0%{box-shadow:0 0 0 1px var(--color-correct),0 0 #4caf6a8c,var(--shadow-sm)}to{box-shadow:0 0 0 1px var(--color-correct),0 0 0 18px #4caf6a00,var(--shadow-sm)}}.word-row-wrapper.invalid{border-color:#e9456080}.word-row-wrapper.invalid .cell.filled.status-empty{color:var(--color-invalid);border-color:#e9456099}.word-warning{display:none;position:absolute;top:-9px;right:12px;padding:2px 8px;border-radius:999px;background:var(--color-invalid);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;box-shadow:var(--shadow-sm);pointer-events:none}.word-row-wrapper.invalid .word-warning{display:block;animation:badge-in .35s var(--ease-spring)}@keyframes badge-in{0%{opacity:0;transform:translateY(4px) scale(.8)}}.cell-grid{display:flex;gap:var(--cell-gap);justify-content:center}.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,4vw,1.4rem);font-weight:700;text-transform:uppercase;border:2px solid var(--color-cell-border);border-radius:var(--radius);background:var(--color-empty);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background-color .18s,border-color .18s,color .18s,transform .1s,box-shadow .18s;position:relative;letter-spacing:0}.cell.flipping{transition:none}@media (max-width: 380px){:root{--cell-size: 42px;--cell-gap: 4px}}@media (max-width: 340px){:root{--cell-size: 36px;--cell-gap: 3px}}.cell:active:not(.locked){transform:scale(.93)}.is-busy .cell,.word-row-wrapper.solved .cell{cursor:default}@media (hover: hover){.word-row-wrapper:not(.solved) .cell:not(.locked):not(.cursor):hover{border-color:var(--color-text-secondary)}}.cell.filled.status-empty{border-color:var(--color-text-secondary)}.cell.cursor{border-color:var(--color-cursor-border);box-shadow:0 0 0 3px var(--color-cursor-ring);animation:cursor-pulse 1.8s ease-in-out infinite}@keyframes cursor-pulse{0%,to{box-shadow:0 0 0 2px var(--color-cursor-ring)}50%{box-shadow:0 0 0 5px var(--color-cursor-ring)}}.cell.cursor:not(.filled):after{content:"";position:absolute;left:50%;bottom:22%;width:36%;height:2px;border-radius:1px;background:var(--color-cursor-border);transform:translate(-50%);animation:caret-blink 1.1s step-end infinite}@keyframes caret-blink{50%{opacity:0}}.cell.hinted:before{content:"✦";position:absolute;top:3px;right:4px;font-size:.5rem;line-height:1;color:#ffffffd9}.cell.status-correct,.legend-cell.status-correct{background:var(--color-correct);border-color:var(--color-correct);color:#fff}.cell.status-present,.legend-cell.status-present{background:var(--color-present);border-color:var(--color-present);color:#fff}.cell.status-absent,.legend-cell.status-absent{background:var(--color-absent);border-color:var(--color-absent)}@media (prefers-color-scheme: dark){.cell.status-absent,.legend-cell.status-absent{color:#fff9}}@media (prefers-color-scheme: light){.cell.status-absent,.legend-cell.status-absent{color:#00000080}}.cell.locked{cursor:default}.relation-text{font-size:.8rem;color:var(--color-text-secondary);text-align:center;font-style:italic;max-width:340px;line-height:1.5;border-top:1px solid var(--color-border);padding-top:8px;width:100%}.relation-text.reveal{animation:relation-in .6s var(--ease-out) backwards}@keyframes relation-in{0%{opacity:0;transform:translateY(-6px);max-height:0;padding-top:0}to{opacity:1;transform:translateY(0);max-height:8em;padding-top:8px}}.submit-row{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px;width:100%}.action-row{display:flex;gap:8px;width:100%;max-width:300px}.submit-btn{flex:1;padding:12px;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--color-submit);border:none;border-radius:10px;cursor:pointer;transition:background .2s,transform .1s,opacity .2s,box-shadow .2s;box-shadow:var(--shadow-sm);touch-action:manipulation}.submit-btn:hover:not(.is-disabled){background:var(--color-submit-hover);box-shadow:var(--shadow-md)}.submit-btn:active:not(.is-disabled){transform:scale(.97)}.submit-btn.is-disabled{background:var(--color-submit-disabled);opacity:.5;cursor:not-allowed;box-shadow:none}.hint-btn{display:inline-flex;align-items:center;gap:6px;padding:0 14px;font:inherit;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-cell-border);border-radius:10px;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,transform .1s,opacity .2s;touch-action:manipulation}.hint-btn:hover:not(:disabled){border-color:var(--color-present);background:var(--color-empty)}.hint-btn:active:not(:disabled){transform:scale(.96)}.hint-btn:disabled{opacity:.45;cursor:default}.hint-icon{display:inline-block;font-size:.95rem;line-height:1}.hint-cost{padding:1px 5px;border-radius:999px;background:#c9a2272e;color:var(--color-present);font-size:.62rem;letter-spacing:0}.attempt-label{display:inline-block;min-height:1.1em;font-size:.72rem;color:var(--color-text-muted);font-weight:500}.guessed-letters{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;width:100%;max-width:280px;margin-bottom:4px}.guessed-letter{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;text-transform:uppercase;border-radius:6px;color:#fff}@keyframes guessed-letter-enter{0%{opacity:0;transform:translateY(8px) scale(.6)}}.guessed-letter.guessed-letter-enter{animation:guessed-letter-enter .4s var(--ease-spring) backwards;animation-delay:calc(var(--i, 0) * 45ms)}.guessed-letter.status-present{background:var(--color-present)}.guessed-letter.status-absent{background:var(--color-absent)}@media (prefers-color-scheme: dark){.guessed-letter.status-absent{color:#fff9}}@media (prefers-color-scheme: light){.guessed-letter.status-absent{color:#00000080}}.completion-banner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 20px;background:var(--color-surface);border:2px solid var(--color-correct);border-radius:14px;width:100%;text-align:center;margin-top:8px;box-shadow:0 0 0 1px var(--color-correct),var(--shadow-md)}.completion-banner.celebrate{animation:banner-in .6s var(--ease-spring) backwards}@keyframes banner-in{0%{opacity:0;transform:translateY(16px) scale(.94)}}.completion-emoji{display:inline-block;font-size:2.5rem}.completion-banner.celebrate .completion-emoji{animation:emoji-pop .9s var(--ease-spring) .15s backwards}@keyframes emoji-pop{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(10deg)}to{transform:scale(1) rotate(0)}}.completion-banner h2{font-size:1.2rem;font-weight:700}.completion-banner p{color:var(--color-text-secondary);font-size:.85rem}.streak-line{font-size:.95rem!important;color:#ff9f43!important;font-weight:600}.next-label{font-size:.75rem!important;color:var(--color-text-muted)!important;margin-top:4px;font-variant-numeric:tabular-nums}.hidden-input{position:fixed;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;font-size:16px;caret-color:transparent;pointer-events:none;z-index:-1}.toast{position:fixed;top:calc(var(--header-height) + 12px);left:50%;transform:translate(-50%) translateY(-8px);background:var(--color-surface);color:var(--color-text);padding:10px 20px;border-radius:24px;border:1px solid var(--color-border);font-size:.82rem;font-weight:600;z-index:200;pointer-events:none;opacity:0;transition:opacity .25s,transform .35s var(--ease-spring);white-space:nowrap;box-shadow:var(--shadow-md)}.toast.toast-error{border-color:#e9456080}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}#modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:50;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:backdrop-in .2s ease}#modal-backdrop.closing{animation:backdrop-out .18s ease forwards}@keyframes backdrop-in{0%{opacity:0}}@keyframes backdrop-out{to{opacity:0}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}@media (min-width: 480px){.modal{align-items:center}}.modal-content{pointer-events:all;background:var(--color-surface);border:1px solid var(--color-border);border-radius:18px 18px 0 0;padding:24px 20px 32px;width:100%;max-width:440px;max-height:90dvh;overflow-y:auto;position:relative;box-shadow:var(--shadow-md);animation:sheet-up .34s var(--ease-out)}.modal.closing .modal-content{animation:sheet-down .18s ease-in forwards}@keyframes sheet-up{0%{transform:translateY(100%)}}@keyframes sheet-down{to{transform:translateY(100%)}}@media (min-width: 480px){.modal-content{border-radius:18px;padding:28px 28px 32px;animation-name:modal-in}.modal.closing .modal-content{animation-name:modal-out}}@keyframes modal-in{0%{opacity:0;transform:translateY(12px) scale(.96)}}@keyframes modal-out{to{opacity:0;transform:translateY(8px) scale(.97)}}.modal-content h2{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;text-align:center}.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--color-text-secondary);font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s}.modal-close:hover{background:var(--color-empty)}.rules-body p{margin-bottom:12px;font-size:.85rem;color:var(--color-text-secondary);line-height:1.6}.rules-body ul{padding-left:20px;margin-bottom:12px}.rules-body li{font-size:.85rem;color:var(--color-text-secondary);margin-bottom:6px;line-height:1.5}.rules-body strong{color:var(--color-text)}.rules-body kbd{display:inline-block;padding:2px 6px;background:var(--color-empty);border:1px solid var(--color-border);border-radius:5px;font-family:var(--font-mono);font-size:.78rem;color:var(--color-text)}.rules-legend{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}.legend-row{display:flex;align-items:center;gap:12px}.legend-cell{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;border-radius:var(--radius);border:2px solid transparent;flex-shrink:0}.legend-row span{font-size:.82rem;color:var(--color-text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.stat-box{display:flex;flex-direction:column;align-items:center;background:var(--color-bg);border-radius:10px;padding:12px 8px;border:1px solid var(--color-border);animation:stat-in .45s var(--ease-spring) backwards}.stat-box:nth-child(2){animation-delay:.04s}.stat-box:nth-child(3){animation-delay:.08s}.stat-box:nth-child(4){animation-delay:.12s}.stat-box:nth-child(5){animation-delay:.16s}.stat-box:nth-child(6){animation-delay:.2s}@keyframes stat-in{0%{opacity:0;transform:translateY(8px) scale(.9)}}.stat-value{font-size:1.5rem;font-weight:700;line-height:1;margin-bottom:4px}.stat-key{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);text-align:center;font-weight:500}.stats-note{font-size:.8rem;color:var(--color-text-secondary);text-align:center;padding:10px;background:var(--color-bg);border-radius:10px;border:1px solid var(--color-border)}.stats-note strong{color:var(--color-text)}.reset-btn{display:block;width:100%;margin-top:16px;padding:10px;font-size:.85rem;font-weight:600;color:#fff;background:#c0392b;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.reset-btn:hover{background:#a93226}.confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;pointer-events:none}#footer{text-align:center;padding:12px 16px}#footer p{font-size:.65rem;color:var(--color-text-muted);letter-spacing:.04em}.hidden{display:none!important}:focus-visible{outline:2px solid var(--color-theme-accent);outline-offset:2px}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}}@keyframes cell-in{0%{opacity:0;transform:scale(.6)}}.intro .day-label,.intro .theme-banner{animation:rise-in .5s var(--ease-out) backwards}.intro .instruction{animation:rise-in .5s var(--ease-out) .12s backwards}.intro .word-row-wrapper{animation:rise-in .5s var(--ease-out) backwards;animation-delay:calc(.16s + var(--row) * .08s)}.intro .cell{animation:cell-in .45s var(--ease-spring) backwards;animation-delay:calc(.26s + var(--row) * .08s + var(--i) * 35ms)}.intro .cell.cursor{animation:cell-in .45s var(--ease-spring) backwards,cursor-pulse 1.8s ease-in-out infinite;animation-delay:calc(.26s + var(--row) * .08s + var(--i) * 35ms),0s}.intro .submit-row,.intro .completion-banner{animation:rise-in .5s var(--ease-out) .45s backwards}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
