@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap";:root{--bg:#0e0e0f;--bg2:#161618;--bg3:#1e1e21;--border:#2a2a2e;--text:#e8e6e1;--text2:#8c8a85;--accent:#2386cd;--accent2:#8fbc6b;--danger:#e05a5a;--radius:6px;--shadow:0 4px 24px #00000080}[data-theme=light]{--bg:#f5f0e8;--bg2:#ede8df;--bg3:#e4ddd2;--border:#ccc5b8;--text:#1a1a18;--text2:#6b6660;--shadow:0 4px 24px #0000001f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:DM Sans,sans-serif;transition:background .25s,color .25s}.app{flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1}.navbar{background:var(--bg2);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;height:60px;padding:0 2rem;display:flex;position:sticky;top:0}.navbar-left{align-items:center;gap:.25rem;display:flex}.navbar-brand{color:var(--text);align-items:center;gap:.5rem;text-decoration:none;display:flex}.brand-icon{font-size:1.5rem;line-height:1}.brand-text{color:var(--accent);font-family:Playfair Display,serif;font-size:1.2rem;font-weight:700}.navbar-right{align-items:center;gap:1rem;display:flex}.nav-link{color:var(--text2);border-radius:var(--radius);margin-left:.5rem;padding:.3rem .5rem;font-size:.9rem;text-decoration:none;transition:color .2s}.nav-link:hover{color:var(--text)}.theme-btn{border:1px solid var(--border);color:var(--text2);border-radius:var(--radius);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:34px;height:34px;font-size:1rem;transition:border-color .2s,color .2s;display:flex}.theme-btn:hover{border-color:var(--accent);color:var(--accent)}.elo-badge{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);align-items:baseline;gap:.3rem;padding:.25rem .75rem;display:flex}.elo-label{color:var(--text2);letter-spacing:.1em;font-family:DM Mono,monospace;font-size:.7rem}.elo-value{color:var(--accent);font-family:DM Mono,monospace;font-size:1rem;font-weight:500}.user-area{align-items:center;gap:.75rem;display:flex}.user-menu{position:relative}.user-name{color:var(--text);cursor:pointer;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg3);white-space:nowrap;padding:.3rem .5rem;font-size:.85rem}.user-name:hover{border-color:var(--accent)}.dropdown{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);min-width:100%;box-shadow:var(--shadow);z-index:100;flex-direction:column;padding:.5rem;display:flex;position:absolute;top:calc(100% + 4px);right:0}.dropdown-backdrop{z-index:99;position:fixed;inset:0}.dropdown-signout{border:1px solid var(--border);color:var(--danger);border-radius:var(--radius);cursor:pointer;white-space:nowrap;background:0 0;padding:.4rem .75rem;font-family:DM Sans,sans-serif;font-size:.8rem;transition:background .2s}.dropdown-signout:hover{background:#e05a5a1a}.signin-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;align-items:center;gap:.5rem;padding:.4rem 1rem;font-family:DM Sans,sans-serif;font-size:.85rem;transition:border-color .2s,background .2s;display:flex}.signin-btn:hover{border-color:var(--accent);background:var(--bg2)}.btn-primary{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;padding:.7rem 1.5rem;font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:500;transition:opacity .2s,transform .1s}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;background:0 0;padding:.7rem 1.5rem;font-family:DM Sans,sans-serif;font-size:.95rem;transition:border-color .2s}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.home{max-width:900px;margin:0 auto;padding:4rem 2rem}.home-hero{text-align:center;padding:3rem 0 4rem}.hero-glyph{opacity:.8;margin-bottom:1.5rem;font-size:4rem;line-height:1}.hero-title{margin-bottom:1rem;font-family:Playfair Display,serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15}.hero-title em{color:var(--accent);font-style:italic}.hero-subtitle{color:var(--text2);max-width:480px;margin:0 auto 2.5rem;font-size:1.1rem;line-height:1.6}.hero-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.home-features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:2rem;display:grid}.feature-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:border-color .2s}.feature-card:hover{border-color:var(--accent)}.feature-icon{margin-bottom:.75rem;font-size:1.5rem;display:block}.feature-card h3{margin-bottom:.5rem;font-family:Playfair Display,serif;font-size:1rem}.feature-card p{color:var(--text2);font-size:.875rem;line-height:1.5}.puzzle-page{justify-content:center;align-items:center;min-height:calc(100vh - 60px);padding:2rem;display:flex}.puzzle-layout{justify-content:center;align-items:flex-start;display:flex;position:relative}.board-wrapper{flex-shrink:0;width:480px}.puzzle-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:1.25rem;width:280px;padding:1.5rem;display:flex;position:absolute;top:0;left:calc(100% + 2rem)}.puzzle-meta{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.puzzle-rating-badge{background:var(--bg3);border:1px solid var(--border);color:var(--accent);border-radius:20px;padding:.2rem .6rem;font-family:DM Mono,monospace;font-size:.75rem}.puzzle-theme{color:var(--text2);background:var(--bg3);border:1px solid var(--border);text-transform:capitalize;border-radius:20px;padding:.2rem .6rem;font-size:.75rem}.puzzle-prompt{flex-direction:column;gap:.75rem;display:flex}.prompt-side{color:var(--text2);font-size:.9rem}.prompt-side strong{color:var(--text)}.prompt-question{font-family:Playfair Display,serif;font-size:1.15rem;line-height:1.4}.prompt-hint{color:var(--text2);font-size:.85rem}.judge-buttons{flex-direction:column;gap:.75rem;margin-top:.25rem;display:flex}.judge-btn{border-radius:var(--radius);cursor:pointer;text-align:center;border:1px solid #0000;width:100%;padding:.85rem 1rem;font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:500;transition:all .15s}.judge-yes{color:var(--accent2);background:#8fbc6b1f;border-color:#8fbc6b66}.judge-yes:hover{border-color:var(--accent2);background:#8fbc6b38}.judge-no{color:var(--danger);background:#e05a5a1a;border-color:#e05a5a4d}.judge-no:hover{border-color:var(--danger);background:#e05a5a2e}.result-phase{text-align:center;flex-direction:column;align-items:center;gap:.75rem;padding:1rem 0;display:flex}.result-icon{font-size:2rem;line-height:1}.result-phase.correct .result-icon{color:var(--accent2)}.result-phase.wrong .result-icon{color:var(--danger)}.result-label{font-family:Playfair Display,serif;font-size:1.3rem}.result-phase.correct .result-label{color:var(--accent2)}.result-phase.wrong .result-label{color:var(--danger)}.result-message{color:var(--text2);font-size:.875rem;line-height:1.5}.elo-change{border-radius:20px;padding:.3rem .9rem;font-family:DM Mono,monospace;font-size:1.1rem;font-weight:500}.elo-change.gain{color:var(--accent2);background:#8fbc6b26}.elo-change.loss{color:var(--danger);background:#e05a5a1a}.guest-note{color:var(--text2);font-size:.8rem}.next-btn{width:100%;margin-top:.5rem}.loading-state{min-height:400px;color:var(--text2);flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex}.loading-spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{z-index:200;background:#000000b3;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{background:var(--bg2);border:1px solid var(--border);width:100%;max-width:440px;box-shadow:var(--shadow);border-radius:8px;padding:2rem}.modal-icon{margin-bottom:1rem;font-size:2.5rem}.modal-title{color:var(--accent);margin-bottom:.75rem;font-family:Playfair Display,serif;font-size:1.5rem}.modal-body{color:var(--text2);margin-bottom:.75rem;font-size:.95rem;line-height:1.6}.username-input-wrap{flex-direction:column;gap:.5rem;margin-top:1rem;display:flex}.username-input{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);width:100%;padding:.75rem 1rem;font-family:DM Mono,monospace;font-size:1rem;transition:border-color .2s}.username-input:focus{border-color:var(--accent);outline:none}.username-input::placeholder{color:var(--text2)}.username-error{color:var(--danger);font-size:.8rem}.about-page{max-width:760px;margin:0 auto;padding:4rem 2rem}.about-hero{text-align:center;margin-bottom:4rem}.about-sections{flex-direction:column;gap:2.5rem;display:flex}.about-section h2{color:var(--accent);margin-bottom:.75rem;font-family:Playfair Display,serif;font-size:1.2rem}.about-section p{color:var(--text2);margin-bottom:.75rem;font-size:.95rem;line-height:1.7}.about-section p:last-child{margin-bottom:0}.about-section em{color:var(--accent);font-style:italic}.about-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.about-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.about-card-icon{margin-bottom:.5rem;font-size:1.3rem;display:block}.about-card h3{margin-bottom:.5rem;font-family:Playfair Display,serif;font-size:.95rem}.about-card p{color:var(--text2);font-size:.85rem;line-height:1.5}.about-open-source a{color:var(--accent);text-decoration:none}.about-open-source a:hover{text-decoration:underline}.github-link{color:var(--text);background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:.5rem;margin-top:.5rem;padding:.5rem 1rem;font-size:.9rem;text-decoration:none;transition:border-color .2s;display:inline-flex}.github-link:hover{border-color:var(--accent);color:var(--accent)}.profile-page{flex-direction:column;gap:2.5rem;max-width:760px;margin:0 auto;padding:3rem 2rem;display:flex}.profile-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;display:flex}.profile-avatar-name{align-items:center;gap:1rem;display:flex}.profile-avatar{border:2px solid var(--border);border-radius:50%;width:64px;height:64px}.profile-name{color:var(--text);font-family:Playfair Display,serif;font-size:1.5rem}.profile-email{color:var(--text2);margin-top:.25rem;font-size:.85rem}.profile-elo-big{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;padding:1rem 1.5rem;display:flex}.elo-number{color:var(--accent);font-family:DM Mono,monospace;font-size:2rem;font-weight:500}.profile-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;display:grid}.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:.4rem;padding:1.25rem;display:flex}.stat-value{color:var(--accent);font-family:DM Mono,monospace;font-size:1.5rem;font-weight:500}.stat-label{color:var(--text2);text-align:center;font-size:.8rem}.profile-section h2{color:var(--accent);margin-bottom:1rem;font-family:Playfair Display,serif;font-size:1.1rem}.profile-empty{color:var(--text2);font-size:.9rem}.attempts-list{flex-direction:column;gap:.5rem;display:flex}.attempt-row{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:1rem;padding:.75rem 1rem;font-size:.85rem;display:flex}.attempt-row.correct{border-left:3px solid var(--accent2)}.attempt-row.wrong{border-left:3px solid var(--danger)}.attempt-icon{font-size:1rem}.attempt-row.correct .attempt-icon{color:var(--accent2)}.attempt-row.wrong .attempt-icon{color:var(--danger)}.attempt-elo,.attempt-judgment{color:var(--text2)}.attempt-date{color:var(--text2);margin-left:auto}.profile-actions{border-top:1px solid var(--border);flex-direction:column;gap:.75rem;padding-top:1rem;display:flex}.btn-signout{border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;text-align:left;background:0 0;padding:.7rem 1.5rem;font-family:DM Sans,sans-serif;font-size:.95rem;transition:border-color .2s}.btn-signout:hover{border-color:var(--accent)}.btn-delete{border:1px solid var(--border);color:var(--danger);border-radius:var(--radius);cursor:pointer;text-align:left;background:0 0;padding:.7rem 1.5rem;font-family:DM Sans,sans-serif;font-size:.95rem;transition:all .2s}.btn-delete:hover{border-color:var(--danger);background:#e05a5a14}.btn-delete.confirm{border-color:var(--danger);background:#e05a5a1f}.btn-delete:disabled{opacity:.5;cursor:not-allowed}@media (width<=900px){.puzzle-page{justify-content:center;align-items:center;padding:1rem}.puzzle-layout{flex-direction:column;align-items:center;width:100%;position:static}.board-wrapper{width:100%;max-width:500px}.puzzle-panel{width:100%;max-width:500px;margin-top:1rem;padding:1rem;position:static!important}.puzzle-meta,.prompt-side{display:none}.puzzle-prompt{grid-template-columns:1fr 1.5fr;align-items:center;gap:.75rem;display:grid}.prompt-question{grid-column:1;font-family:DM Sans,sans-serif;font-size:.8rem;line-height:1.3}.judge-buttons{flex-direction:column;grid-column:2;gap:.5rem;margin-top:0;display:flex}.judge-btn{padding:.65rem .5rem;font-size:.8rem}.result-phase,.move-phase{grid-column:1/3}}.delete-section{flex-direction:column;gap:.75rem;display:flex}.delete-warning{color:var(--text2);font-size:.85rem;line-height:1.5}.delete-warning strong{color:var(--text)}.attempt-puzzle-rating{color:var(--text2)}.attempt-link{color:var(--accent);margin-left:auto;font-size:.9rem}.attempt-row:hover{border-color:var(--accent)}.review-page{justify-content:center;align-items:center;min-height:calc(100vh - 60px);padding:2rem;display:flex}.review-layout{justify-content:center;align-items:flex-start;display:flex;position:relative}.review-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:1.25rem;width:280px;padding:1.5rem;display:flex;position:absolute;top:0;left:calc(100% + 2rem)}.review-moves-title{color:var(--accent);margin-bottom:.5rem;font-family:Playfair Display,serif;font-size:1rem}.moves-list{flex-direction:column;gap:.4rem;display:flex}.move-item{border-radius:var(--radius);align-items:center;gap:.5rem;padding:.4rem .6rem;font-size:.85rem;display:flex}.move-setup{background:#9696ff1a;border-left:2px solid #9696ff80}.move-solution{background:#00c86414;border-left:2px solid #00c86466}.move-response{background:#9696ff0d;border-left:2px solid #9696ff4d}.move-number{color:var(--text2);font-family:DM Mono,monospace;font-size:.75rem}.move-san{color:var(--text);font-family:DM Mono,monospace;font-weight:500}.move-type-label{color:var(--text2);margin-left:auto;font-size:.7rem}.review-actions{flex-direction:column;gap:.5rem;display:flex}.correct-badge{color:var(--accent2);border-color:var(--accent2);background:#8fbc6b26}.wrong-badge{color:var(--danger);border-color:var(--danger);background:#e05a5a1a}@media (width<=900px){.review-page{align-items:flex-start;padding:1rem}.review-layout{flex-direction:column;align-items:center;width:100%}.review-panel{width:100%;max-width:500px;margin-top:1rem;position:static}}.review-nav{justify-content:center;align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.review-nav-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;width:36px;height:36px;font-size:.9rem;transition:border-color .2s}.review-nav-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.review-nav-btn:disabled{opacity:.3;cursor:not-allowed}.review-nav-label{color:var(--text2);text-align:center;min-width:60px;font-family:DM Mono,monospace;font-size:.8rem}.moves-table{flex-direction:column;gap:.2rem;display:flex}.moves-row{grid-template-columns:24px 1fr 1fr;align-items:center;gap:.25rem;display:grid}.moves-row-number{color:var(--text2);text-align:right;font-family:DM Mono,monospace;font-size:.75rem}.move-cell{color:var(--text);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:4px;padding:.3rem .5rem;font-family:DM Mono,monospace;font-size:.85rem;transition:all .15s}.move-cell:hover:not(:disabled){background:var(--bg3);border-color:var(--border)}.move-cell.active{background:var(--accent);color:#fff;border-color:var(--accent)}.move-cell:disabled{cursor:default;opacity:0}.move-cell.you{color:var(--accent2)}.move-cell.you.active{background:var(--accent);color:#fff}.move-cell.setup{color:var(--text2)}.puzzle-cards{flex-direction:column;gap:.5rem;display:flex}.puzzle-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;flex-direction:row;align-items:center;gap:1rem;padding:.75rem;transition:border-color .2s;display:flex}.puzzle-card:hover{border-color:var(--accent)}.puzzle-card.correct{border-left:3px solid var(--accent2)}.puzzle-card.wrong{border-left:3px solid var(--danger)}.puzzle-card-board{flex-shrink:0;width:100px;height:100px}.puzzle-card-info{flex-direction:column;flex:1;gap:.2rem;font-size:.8rem;display:flex}.puzzle-card-rating{color:var(--accent);font-family:DM Mono,monospace;font-weight:500}.puzzle-card-elo,.puzzle-card-date{color:var(--text2)}.puzzle-card-badges{flex-direction:column;align-items:center;gap:.4rem;display:flex}.puzzle-badge{border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:700;display:flex}.badge-correct{color:var(--accent2);border:1px solid var(--accent2);background:#8fbc6b33}.badge-wrong{color:var(--danger);border:1px solid var(--danger);background:#e05a5a1a}.pagination{justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem;display:flex}.page-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;width:36px;height:36px;font-size:.9rem;transition:border-color .2s}.page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.page-btn:disabled{opacity:.3;cursor:not-allowed}.page-label{color:var(--text2);text-align:center;min-width:60px;font-family:DM Mono,monospace;font-size:.85rem}@media (width<=600px){.navbar{padding:0 1rem}.brand-text,.elo-badge{display:none}.nav-link{margin-left:.25rem;font-size:.8rem}.user-name{padding:.2rem .4rem;font-size:.75rem}.signin-btn{padding:.3rem .6rem;font-size:.75rem}.theme-btn{width:28px;height:28px;font-size:.85rem}}