*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0f0f1a;--bg-secondary:#1a1a2e;--bg-card:#16213e;--bg-input:#1a1a3e;--text-primary:#e0e0e0;--text-secondary:#a0a0b0;--text-muted:#707080;--accent:#4fc3f7;--accent-hover:#29b6f6;--accent-dim:#4fc3f726;--danger:#ef5350;--danger-hover:#f44336;--success:#66bb6a;--border:#2a2a4a;--radius:8px;--shadow:0 2px 12px #0000004d;--cell-default:#f0ede6;--cell-active:#4fc3f7;--cell-highlighted:#b3e5fc;--cell-incorrect:#ef9a9a;--cell-correct:#a5d6a7;--cell-black:#12121f;--cell-border:#c8c3b8;--cell-number:#5a5550;--cell-letter:#1a1a2e;--cell-letter-revealed:#0d47a1;--cell-letter-active:#0a2540}html{font-size:16px}body{background:radial-gradient(ellipse at 20% 50%,#4fc3f708 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,#4fc3f705 0%,transparent 50%),var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:"Source Serif 4",Georgia,Times New Roman,serif;line-height:1.6}#root{min-height:100vh}button{cursor:pointer;font-family:inherit;font-size:inherit;border:none;transition:background .15s,transform .1s,opacity .15s}button:active{transform:scale(.97)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}select{font-family:inherit;font-size:inherit}h1,h2,h3{letter-spacing:-.01em;font-weight:700;line-height:1.2}.app{display:flex;flex-direction:column;min-height:100vh}.app-center{display:flex;flex-direction:column;flex:1;justify-content:center;align-items: center;gap:1rem;padding:2rem}.error-message{border:1px solid var(--danger);border-radius:var(--radius);color:var(--danger);text-align:center;background:#ef535026;max-width:400px;padding:.75rem 1.25rem;font-size:.9rem}.loading-overlay{position:fixed;display:flex;z-index:100;backdrop-filter:blur(4px);background:#0f0f1ad9;flex-direction:column;justify-content:center;align-items: center;gap:1.5rem;inset:0}.loading-spinner{border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite;border-radius:50%;width:48px;height:48px}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{color:var(--text-primary);font-size:1.1rem}.loading-hint{color:var(--text-muted)!important;font-size:.85rem!important}.login-screen{display:flex;flex:1;justify-content:center;align-items: center;min-height:100vh;padding:2rem}.login-card{display:flex;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items: center;gap:2rem;width:100%;max-width:400px;padding:3rem 2.5rem;box-shadow:0 4px 24px #0006,0 0 0 1px #4fc3f70d}.login-brand{text-align:center}.login-title{letter-spacing:-.02em;color:var(--accent);margin-bottom:.5rem;font-family:Playfair Display,serif;font-size:3rem;font-weight:900;line-height:1}.login-subtitle{color:var(--text-muted);font-size:.95rem;font-style:italic}.login-divider{background:linear-gradient(90deg,transparent,var(--border)20%,var(--accent)50%,var(--border)80%,transparent);width:60px;height:1px}.login-actions{display:flex;flex-direction:column;align-items: center;gap:.75rem;min-height:44px}.google-btn-container{display:flex;justify-content:center}.login-loading{color:var(--text-muted);font-size:.85rem}.login-error{color:var(--danger);text-align:center;max-width:280px;font-size:.85rem}.login-footer{color:var(--text-muted);text-align:center;font-size:.8rem}.user-menu{position:fixed;display:flex;background:var(--bg-secondary);border:1px solid var(--border);z-index:50;border-radius:24px;align-items: center;gap:.5rem;padding:.35rem .5rem .35rem .35rem;top:.75rem;right:.75rem;box-shadow:0 2px 8px #0000004d}.user-avatar{object-fit:cover;border:1px solid var(--border);border-radius:50%;width:28px;height:28px}.user-name{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:.8rem}.user-logout{display:flex;color:var(--text-muted);background:0 0;border-radius:50%;justify-content:center;align-items: center;width:28px;height:28px;padding:0;transition:color .15s,background .15s}.user-logout:hover{color:var(--danger);background:#ef53501a}.sign-in-btn{color:var(--accent);cursor:pointer;padding:.4rem .75rem;transition:background .15s,border-color .15s;font-family:DM Mono,monospace;font-size:.8rem;font-weight:500}.sign-in-btn:hover{background:var(--accent-dim);border-color:var(--accent)}@media (max-width:768px){.user-name,.sign-in-btn span{display:none}}.generator{background:linear-gradient(135deg,#4fc3f70a 0%,transparent 50%),var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:12px;width:100%;max-width:440px;padding:2.5rem 3rem;box-shadow:0 4px 24px #0000004d,0 0 0 1px #4fc3f70f}.generator h1{color:var(--accent);letter-spacing:-.04em;margin-bottom:.25rem;font-family:Playfair Display,Georgia,serif;font-size:3rem;font-weight:900}.subtitle{color:var(--text-muted);margin-bottom:2rem;font-size:.9rem}.form-group{text-align:left;margin-bottom:1.25rem}.form-group label{display:block;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-family:DM Mono,monospace;font-size:.75rem;font-weight:500}.form-group select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23707080' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;width:100%;padding:.6rem .75rem;font-size:.95rem}.form-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.radio-group{display:flex;gap:.5rem}.radio-label{display:flex;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text-secondary);flex:1;justify-content:center;align-items: center;gap:.4rem;padding:.5rem;transition:border-color .15s,color .15s;font-size:.85rem}.radio-label:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.radio-label input{display:none}.radio-label:has(input:disabled){opacity:.4;cursor:not-allowed}.hint{color:var(--fg-dim);margin-left:.25rem;font-size:.75rem}.generate-btn{background:linear-gradient(135deg,var(--accent)0%,#29b6f6 100%);color:#0a2540;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius);width:100%;margin-top:1.25rem;padding:.85rem;transition:transform .1s,box-shadow .15s;font-family:DM Mono,monospace;font-size:.9rem;font-weight:600;box-shadow:0 2px 12px #4fc3f740}.generate-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-hover)0%,#0288d1 100%);box-shadow:0 4px 20px #4fc3f759}.puzzle-view{display:flex;flex-direction:column;flex:1;width:100%;max-width:1200px;margin:0 auto;padding:1rem 1.5rem 2rem}.puzzle-header{display:flex;justify-content:space-between;align-items: center;margin-bottom:.75rem;padding-right:clamp(2rem,15vw,10rem)}.home-brand{color:var(--accent);letter-spacing:-.02em;background:0 0;border-radius:4px;flex-shrink:0;padding:.25rem .5rem;transition:color .15s,background .15s;font-family:Playfair Display,Georgia,serif;font-size:1.1rem;font-weight:900}.home-brand:hover{color:var(--accent-hover);background:#4fc3f714}.puzzle-header h2{color:var(--text-primary);letter-spacing:-.02em;font-family:Playfair Display,Georgia,serif;font-size:1.3rem;font-weight:700}.current-clue-bar{background:linear-gradient(135deg,#4fc3f714 0%,transparent 60%),var(--bg-card);border:1px solid #4fc3f733;border-left:3px solid var(--accent);padding:.75rem 1.25rem;color:var(--text-primary);display:flex;border-radius:4px;align-items: center;min-height:2.75rem;margin-bottom:1rem;padding-right:clamp(2rem,15vw,10rem);transition:background .2s;font-size:1rem;font-weight:600;line-height:1.4}.current-clue-bar-bottom{margin-top:.75rem;margin-bottom:0;padding-right:1.25rem}.completion-banner{border:1px solid var(--success);border-radius:var(--radius);text-align:center;color:var(--success);letter-spacing:-.01em;animation:bannerAppear .6s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(135deg,#66bb6a26,#4fc3f726);margin-bottom:1rem;padding:1rem 1.5rem;font-family:Playfair Display,Georgia,serif;font-size:1.25rem;font-weight:700}@keyframes bannerAppear{0%{opacity:0;transform:translateY(-16px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.puzzle-layout{display:flex;flex-wrap:wrap;align-items: flex-start;gap:1.5rem}.puzzle-grid-area{display:flex;flex-direction:column;flex:320px;gap:.75rem;min-width:0;max-width:560px}.grid-container{background:var(--bg-secondary);border-radius:4px;width:100%;padding:3px;box-shadow:0 2px 16px #0006,0 0 0 1px #4fc3f71a}.grid-container svg{display:block;width:100%;height:auto}.grid-container svg rect{transition:fill .12s ease-out}@keyframes revealFlash{0%{opacity:.5}to{opacity:1}}@keyframes checkFlashSuccess{0%{opacity:1;stroke-width:3}50%{opacity:.8;stroke-width:2}to{opacity:0;stroke-width:1}}@keyframes checkFlashError{0%{opacity:1;stroke-width:3}30%{opacity:.6}50%{opacity:1;stroke-width:2.5}to{opacity:0;stroke-width:1}}.cell-flash-success{animation:checkFlashSuccess .6s ease-out forwards}.cell-flash-error{animation:checkFlashError .6s ease-out forwards}.cell-revealed{animation:revealFlash .3s ease-out}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem}.toolbar-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);letter-spacing:.02em;white-space:nowrap;border-radius:6px;padding:.45rem .85rem;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;font-family:DM Mono,monospace;font-size:.75rem;font-weight:500}.toolbar-btn:hover{background:var(--bg-input);color:var(--text-primary);border-color:var(--text-muted);box-shadow:0 2px 8px #0003}.toolbar-btn--danger{color:var(--danger)}.toolbar-btn--danger:hover{border-color:var(--danger);background:#ef53501a}.toolbar-btn--new{color:var(--accent)}.toolbar-btn--new:hover{background:var(--accent-dim);border-color:var(--accent)}.clue-panel{overflow-y:auto;display:flex;flex-direction:column;flex:240px;gap:1.25rem;min-width:0;max-height:calc(100vh - 200px);padding-right:.5rem}.clue-panel::-webkit-scrollbar{width:4px}.clue-panel::-webkit-scrollbar-track{background:0 0}.clue-panel::-webkit-scrollbar-thumb{background:#4fc3f733;border-radius:2px}.clue-panel::-webkit-scrollbar-thumb:hover{background:#4fc3f766}.clue-section h3{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);border-bottom:2px solid var(--accent);margin-bottom:.5rem;padding-bottom:.5rem;font-family:DM Mono,monospace;font-size:.7rem}.clue-item{display:flex;cursor:pointer;border-left:3px solid #0000;border-radius:4px;gap:.5rem;padding:.4rem .6rem;transition:background .15s,color .15s,transform .1s;font-size:.85rem;line-height:1.4}.clue-item:hover{background:#ffffff0a;border-left-color:#4fc3f74d}.clue-item--active{background:var(--accent-dim);color:var(--accent);border-left-color:var(--accent)}.clue-number{color:var(--text-muted);flex-shrink:0;min-width:1.8rem;font-family:DM Mono,Courier New,monospace;font-size:.82rem;font-weight:500}.clue-item--active .clue-number{color:var(--accent)}.clue-text{color:var(--text-secondary);font-style:italic}.clue-item--active .clue-text{color:var(--accent);font-style:normal;font-weight:600}.clue-length{color:var(--text-muted);margin-left:.15em;font-family:DM Mono,Courier New,monospace;font-size:.82rem;font-style:normal;font-weight:400}.clue-item--active .clue-length{color:#4fc3f7b3}.puzzle-header-actions{display:flex;flex-shrink:0;align-items: center;gap:.5rem}.favorite-btn{display:flex;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;border-radius:8px;justify-content:center;align-items: center;width:36px;height:36px;transition:color .15s,border-color .15s,background .15s}.favorite-btn:hover{color:#ffd54f;background:#ffd54f14;border-color:#ffd54f}.favorite-btn.favorited{color:#ffd54f}.share-btn{display:flex;background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:8px;align-items: center;gap:.35rem;padding:.4rem .75rem;transition:color .15s,border-color .15s,background .15s;font-family:DM Mono,monospace;font-size:.75rem;font-weight:500}.share-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.delete-btn{display:flex;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items: center;width:36px;height:36px;transition:color .15s,border-color .15s,background .15s}.delete-btn:hover{color:#ef5350;background:#ef535014;border-color:#ef5350}.delete-confirm{display:flex;align-items: center;gap:.35rem}.delete-confirm-yes{color:#ef5350;cursor:pointer;background:#ef535026;border:1px solid #ef5350;border-radius:6px;padding:.3rem .6rem;transition:background .15s;font-family:DM Mono,monospace;font-size:.7rem;font-weight:600}.delete-confirm-yes:hover{background:#ef53504d}.delete-confirm-no{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:6px;padding:.3rem .6rem;transition:color .15s;font-family:DM Mono,monospace;font-size:.7rem}.delete-confirm-no:hover{color:var(--fg)}.toast{position:fixed;background:var(--bg-card);border:1px solid var(--accent);color:var(--accent);z-index:100;animation:toastSlideIn .3s ease-out;border-radius:8px;padding:.6rem 1.25rem;font-family:DM Mono,monospace;font-size:.8rem;font-weight:500;bottom:1.5rem;right:1.5rem;box-shadow:0 4px 20px #0006}@keyframes toastSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.autosave-indicator{position:fixed;display:flex;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);z-index:50;animation:toastSlideIn .3s ease-out;border-radius:16px;align-items: center;gap:.35rem;padding:.35rem .75rem;font-family:DM Mono,monospace;font-size:.7rem;font-weight:500;bottom:1rem;left:1rem}.autosave-saving{color:var(--text-muted)}.autosave-saved{color:var(--success);border-color:#66bb6a4d}.autosave-error{color:var(--danger);border-color:#ef53504d}@keyframes spin{to{transform:rotate(360deg)}}.autosave-spinner{animation:spin .8s linear infinite}@media (max-width:900px){.clue-panel{max-height:none}}@media (max-width:768px){.puzzle-view{padding:.75rem}.puzzle-layout{flex-direction:column}.puzzle-grid-area{align-items: center;width:100%;max-width:100%}.clue-panel{max-height:none;padding-right:0}.puzzle-header{padding-right:5.5rem}.current-clue-bar{padding-right:1.25rem}.toolbar{justify-content:center}.share-btn-text{display:none}}.puzzle-library{width:100%;max-width:600px;margin-top:2rem}.library-tabs{display:flex;justify-content:center;margin-bottom:1.25rem}.library-tabs-inner{display:flex;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:4px}.library-tab{letter-spacing:.02em;color:var(--text-secondary);background:0 0;border-radius:6px;padding:.5rem 1.5rem;transition:background .15s,color .15s;font-family:DM Mono,monospace;font-size:.8rem;font-weight:500}.library-tab:hover{color:var(--text-primary);background:#4fc3f70d}.library-tab--active{background:var(--accent);color:#0a2540}.library-tab--active:hover{color:#0a2540}.puzzle-list{display:flex;flex-direction:column;gap:.75rem}.puzzle-card{display:flex;background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:8px;align-items: center;gap:1rem;padding:1rem 1.25rem;transition:background .15s,border-color .15s}.puzzle-card:hover{border-color:var(--accent);background:#4fc3f70f}.puzzle-card-star{display:flex;color:var(--text-muted);background:0 0;border-radius:8px;flex-shrink:0;justify-content:center;align-items: center;width:36px;height:36px;padding:0;transition:color .15s}.puzzle-card-star:hover{color:#ffd54f;background:#ffd54f0f}.puzzle-card-star--active{color:#ffd54f}.puzzle-card-actions{display:flex;flex-direction:column;flex-shrink:0;align-items: center;gap:.25rem}.puzzle-card-delete{display:flex;color:var(--text-muted);background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items: center;width:28px;height:28px;padding:0;transition:color .15s,background .15s}.puzzle-card-delete:hover{color:#ef5350;background:#ef535014}.puzzle-card-info{flex:1;min-width:0}.puzzle-card-title{color:var(--text-primary);font-family:DM Mono,monospace;font-size:.85rem;font-weight:500}.puzzle-card-status{color:var(--text-secondary);display:flex;align-items: center;gap:.4rem;margin-top:.2rem;font-size:.8rem}.status-dot{display:inline-block;border-radius:50%;flex-shrink:0;width:6px;height:6px}.status-dot--progress{background:var(--accent)}.status-dot--complete{background:var(--success)}.puzzle-card-meta{text-align:right;color:var(--text-muted);flex-shrink:0;font-family:DM Mono,monospace;font-size:.72rem}.puzzle-card-arrow{color:var(--text-muted);flex-shrink:0;transition:color .15s}.puzzle-card:hover .puzzle-card-arrow{color:var(--accent)}.library-empty{text-align:center;color:var(--text-muted);padding:3rem 1rem}.library-empty-icon{margin-bottom:1rem}.library-empty h3{color:var(--text-secondary);margin-bottom:.4rem;font-family:Playfair Display,Georgia,serif;font-size:1.1rem;font-weight:700}.library-empty p{color:var(--text-muted);font-size:.85rem}.library-skeleton{display:flex;flex-direction:column;gap:.75rem}.skeleton-card{background:var(--bg-card);border:1px solid var(--border);animation:skeletonPulse 1.5s ease-in-out infinite;border-radius:8px;height:68px}@keyframes skeletonPulse{0%,to{opacity:.6}50%{opacity:.3}}@media (max-width:768px){.puzzle-library{padding:0}.library-tab{padding:.6rem 1.75rem}.puzzle-card{gap:.75rem;padding:.85rem 1rem}.puzzle-card-title{font-size:.8rem}.puzzle-card-status{font-size:.75rem}.puzzle-card-meta{font-size:.68rem}}