@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Fraunces:opsz,wght@9..144,600&display=swap";*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:#1d1a2e;background:linear-gradient(170deg,#f8f5ff,#ebe0ff);min-height:100svh;font-family:Space Grotesk,Segoe UI,sans-serif;overflow-x:hidden}button,select,input,textarea{font:inherit}:root{--bg-1:#f8f5ff;--bg-2:#ebe0ff;--ink:#1d1a2e;--muted:#6b6280;--card:#fdfcff;--line:#d8c8f0;--accent:#7c3aed;--ok:#6d28d9;--warn:#d64550;--shadow:0 14px 35px #2814501f}.ambient{filter:blur(4px);z-index:0;pointer-events:none;border-radius:999px;position:fixed}.ambient-a{aspect-ratio:1;opacity:.35;background:radial-gradient(circle at 20% 30%,#c9a0ff,#7b2fd4);width:clamp(180px,36vw,360px);top:-120px;right:-80px}.ambient-b{aspect-ratio:1;opacity:.22;background:radial-gradient(circle at 80% 80%,#a78bfa,#5b21b6);width:clamp(150px,28vw,280px);bottom:-80px;left:-70px}.app-shell{z-index:1;max-width:100%;margin:0 auto;padding:clamp(.85rem,2vw,1.6rem) clamp(.75rem,2.8vw,1.2rem) clamp(1.1rem,3vw,2rem);position:relative}.eyebrow{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0;font-size:.75rem}h1{max-width:24ch;margin:.25rem 0 0;font-family:Fraunces,Georgia,serif;font-size:clamp(1.2rem,3.8vw,2.2rem);line-height:1.15}.btn{cursor:pointer;border:1px solid #0000;border-radius:999px;min-height:38px;padding:.4rem .9rem;font-family:inherit;font-size:.95rem;font-weight:600;transition:transform .12s,box-shadow .12s}.btn:hover{transform:translateY(-2px);box-shadow:0 9px 18px #17130724}.btn:disabled{cursor:not-allowed;opacity:.5;box-shadow:none;transform:none}.btn-ghost{border-color:var(--line);background:#fff}.btn-danger{color:#8f1e30;background:#fef2f2;border-color:#ffc7cf}.btn-accent{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:999px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:transform .12s,box-shadow .12s}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59}.btn-sm{height:38px;min-height:38px;padding:.2rem .5rem;font-size:.75rem}.btn-puzzle-select{padding:.4rem 1rem;font-size:.85rem}.top-bar{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.15rem;display:flex}.top-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.6rem;display:flex}.top-actions .btn,.top-actions .filter-input,.top-actions select{box-sizing:border-box;height:38px;min-height:38px}.top-actions .filter-input{border:1px solid var(--line);background:#fff;border-radius:999px;width:260px;height:38px;padding:0 .95rem;font-family:inherit;font-size:.95rem}.top-actions select{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:999px;height:38px;padding:0 .95rem;font-family:inherit;font-size:.95rem;font-weight:600}.pin-toggle{color:var(--muted);cursor:pointer;white-space:nowrap;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;display:flex}.status-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-bottom:1rem;display:grid}.status-bar{box-shadow:var(--shadow);background:#ffffffd9;border:1px solid #d8c8f0;border-radius:12px;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;margin-bottom:1rem;padding:.6rem 1rem;display:flex}.status-item{align-items:baseline;gap:.35rem;display:flex}.vintage-badge{background:#7c3aed14;border-radius:6px;margin-left:auto;padding:.15rem .5rem}.status-card{box-shadow:var(--shadow);background:#ffffffd9;border:1px solid #d8c8f0;border-radius:16px;padding:.78rem}.status-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0;font-size:.76rem}.status-value{margin:0;font-size:1rem;font-weight:700}.status-value.small{font-size:clamp(.95rem,3vw,1rem);font-weight:600}.stat-correct{color:#16a34a;margin-left:1rem}.stat-wrong{color:#dc2626;margin-left:1rem}.help{border-left:4px solid var(--accent);background:#f5f0ff;border-radius:10px;margin-bottom:1rem;padding:.7rem .85rem}.help p{margin:0}.board{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:clamp(.55rem,1.6vw,.8rem);display:grid}.group-card{--line-count:3;color:var(--ink);text-align:left;cursor:pointer;box-shadow:var(--shadow);min-height:calc(2.4rem + var(--line-count) * 1.25em);background:#fff;border:1.5px solid #7c3aed40;border-radius:14px;align-content:start;gap:.42rem;padding:.72rem;transition:transform .14s,border-color .2s,background .2s;animation:.26s rise-in;display:grid;position:relative;overflow:hidden}.group-card:hover{transform:translateY(-3px)}.group-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px #7c3aed66}.group-card.complete{cursor:default;opacity:.85;background:#f3eeff;border-color:#7c3aed}.group-card.error{background:#fff5f5;border-color:#e53e3e;animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.group-size{color:var(--purple);opacity:.7;font-size:.6rem;font-weight:900;line-height:1;position:absolute;top:.5rem;right:.5rem}.hint-btn{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border-radius:50%;justify-content:center;align-items:center;width:auto;min-width:22px;height:22px;padding:0 .3rem;font-size:.7rem;font-weight:700;line-height:1;display:flex;position:absolute;bottom:.4rem;right:1.8rem}.hint-btn:hover{transform:scale(1.1)}.group-title{overflow-wrap:anywhere;-webkit-box-orient:vertical;min-width:0;font-size:.95rem;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.group-theme{color:#5b21b6;font-size:.92rem;font-weight:600}@keyframes rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.color-controls{opacity:0;z-index:2;align-items:center;gap:.2rem;transition:opacity .2s;display:flex;position:absolute;bottom:.4rem;left:.4rem}.group-card:hover .color-controls{opacity:.7}.color-controls:hover{opacity:1}@media (hover:none){.color-controls{opacity:.5}}.color-btn{cursor:pointer;width:22px;height:22px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;transition:transform .15s;display:flex;position:relative;overflow:hidden}.color-btn:hover{transform:scale(1.2)}.color-btn input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}@media (hover:none){.color-btn{width:28px;height:28px}.color-btn svg{width:16px;height:16px}}.color-reset{cursor:pointer;width:16px;height:16px;color:var(--ink);background:#0000001a;border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;line-height:1;transition:transform .15s,background .15s;display:flex}.color-reset:hover{background:#0003;transform:scale(1.2)}@media (hover:none){.color-reset{width:24px;height:24px;font-size:.85rem}}.pin-btn{cursor:pointer;opacity:0;width:22px;height:22px;color:var(--accent);z-index:2;border-radius:4px;justify-content:center;align-items:center;font-size:.75rem;transition:opacity .2s,transform .15s;display:flex;position:absolute;bottom:.4rem;right:.4rem}.group-card:hover .pin-btn,.pin-btn.pinned{opacity:.7}.pin-btn.pinned{opacity:1}.pin-btn:hover{opacity:1;transform:scale(1.2)}@media (hover:none){.pin-btn{opacity:.5;width:28px;height:28px}.pin-btn svg{width:16px;height:16px}.pin-btn.pinned{opacity:1}}.pinned-bar{z-index:10;background:linear-gradient(to bottom, var(--bg-1) 70%, transparent);background-clip:padding-box;flex-wrap:wrap;gap:clamp(.55rem,1.6vw,.8rem);height:0;margin-bottom:-1px;padding:.6rem 0;display:flex;position:sticky;top:0;overflow:visible}.pinned-card{flex:0 0 170px;width:170px;min-width:170px;max-width:170px;transition:opacity .3s,transform .3s,border-color .2s,background .2s;animation:none}.pinned-card.pinned-card-fading{opacity:0;pointer-events:none;transform:translateY(4px)}.group-card.merging-out{opacity:0;pointer-events:none;transition:opacity}.group-card.merge-target{z-index:5;animation:.3s merge-pulse;position:relative}.group-card.merge-pop{animation:.4s cubic-bezier(.34,1.56,.64,1) merge-pop-in}.merge-ghost{z-index:1000;pointer-events:none;border:1.5px solid var(--accent);background:#7c3aed33;border-radius:14px;animation:.3s cubic-bezier(.4,0,.2,1) forwards merge-fly;box-shadow:0 4px 20px #7c3aed4d}@keyframes merge-fly{0%{opacity:1;transform:translate(0)scale(1)}80%{opacity:.7}to{transform:translate(var(--fly-dx), var(--fly-dy)) scale(.5);opacity:0}}@keyframes merge-pulse{0%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 0 0 4px #7c3aed4d}to{transform:scale(1)}}@keyframes merge-pop-in{0%{opacity:.5;transform:scale(.85)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.modal-backdrop{z-index:1000;background:#00000073;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:16px;flex-direction:column;width:min(420px,100%);max-height:80vh;display:flex;box-shadow:0 12px 40px #0003}.modal-close{cursor:pointer;color:var(--muted);background:0 0;border:none;padding:.25rem;font-size:1.5rem;line-height:1;position:absolute;top:.6rem;right:.8rem}.modal-list{margin:0;padding:1rem 1.2rem;list-style:none;overflow-y:auto}.modal-list li{border-bottom:1px solid #f0ece8;padding:.4rem 0;font-size:.92rem}.modal-list li:last-child{border-bottom:none}.puzzle-select-modal{background:#fff;border-radius:20px;flex-direction:column;width:min(520px,95vw);max-height:85vh;padding:1.5rem;display:flex;position:relative;box-shadow:0 16px 50px #28145040}.puzzle-select-title{color:var(--ink);margin:0 0 1rem;font-family:Fraunces,Georgia,serif;font-size:1.4rem}.puzzle-search-input{border:1.5px solid var(--line);box-sizing:border-box;border-radius:999px;outline:none;width:100%;margin-bottom:1rem;padding:.65rem 1rem;font-family:inherit;font-size:.95rem;transition:border-color .15s}.puzzle-search-input:focus{border-color:var(--accent)}.puzzle-select-list{flex:1;min-height:0;overflow-y:auto}.puzzle-select-empty{text-align:center;color:var(--muted);padding:2rem 0}.puzzle-group{margin-bottom:1.2rem}.puzzle-group-date{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--line);margin:0 0 .5rem;padding-bottom:.3rem;font-size:.78rem;font-weight:600}.puzzle-group-items{flex-direction:column;gap:.4rem;display:flex}.puzzle-option{border:1.5px solid var(--line);background:var(--card);cursor:pointer;text-align:left;border-radius:12px;align-items:center;gap:.75rem;width:100%;padding:.7rem 1rem;font-family:inherit;font-size:.9rem;transition:border-color .15s,background .15s,transform .1s;display:flex}.puzzle-option:hover{border-color:var(--accent);background:#f8f4ff;transform:translateY(-1px)}.puzzle-option-active{border-color:var(--accent);background:#ede9fe}.puzzle-option-complete{background:#f0fdf4;border-color:#86efac}.puzzle-option-complete:hover{background:#dcfce7;border-color:#4ade80}.puzzle-option-title{color:var(--ink);flex:1;font-weight:600}.puzzle-option-meta{color:var(--muted);white-space:nowrap;font-size:.8rem}.puzzle-option-completed{color:#16a34a;white-space:nowrap;font-size:.78rem;font-weight:600}.puzzle-option-current{color:var(--accent);white-space:nowrap;font-size:.78rem;font-weight:600}.victory-overlay{z-index:2000;background:#1e143cb3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confetti-container{pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti{opacity:.9;border-radius:2px;width:10px;height:10px;animation:linear infinite confetti-fall;position:absolute;top:-20px}.confetti:nth-child(3n){background:#7c3aed;width:8px;height:12px}.confetti:nth-child(3n+1){background:#a78bfa;width:12px;height:8px}.confetti:nth-child(3n+2){background:#c4b5fd;width:6px;height:14px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-20px)rotate(0)}to{opacity:.6;transform:translateY(100vh)rotate(720deg)}}.victory-card{text-align:center;background:#fff;border-radius:24px;padding:2.5rem 3rem;position:relative;box-shadow:0 20px 60px #3c14784d}.victory-title{color:#5b21b6;margin:0 0 .5rem;font-family:Fraunces,Georgia,serif;font-size:clamp(1.8rem,5vw,3rem)}.victory-sub{color:var(--muted);margin:0 0 1.5rem;font-size:1.1rem}.settings-toggle{padding:0 .7rem;font-size:1.3rem;line-height:1}.settings-panel{border:1px solid var(--line);box-shadow:var(--shadow);background:#fffffff2;border-radius:16px;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:1rem;padding:1rem 1.2rem;display:flex}.settings-title{text-transform:uppercase;letter-spacing:.08em;width:100%;color:var(--muted);margin:0 0 .2rem;font-size:.85rem;font-weight:600}.settings-row{align-items:center;gap:.4rem;display:flex}.settings-row label{color:var(--ink);white-space:nowrap;font-size:.85rem;font-weight:600}.settings-row select,.settings-row .btn{border:1px solid var(--line);cursor:pointer;box-sizing:border-box;background:#fff;border-radius:999px;min-height:36px;padding:.4rem .7rem;font-family:inherit;font-size:.88rem;font-weight:600;line-height:1.2}.settings-row .btn-accent{color:#fff;background:#7c3aed;border-color:#7c3aed}.settings-row .btn-danger{color:#8f1e30;background:#fef2f2;border-color:#ffc7cf}.settings-row-right{margin-left:auto}.account-info{align-items:center;gap:.5rem;display:flex}.account-email{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:.82rem;overflow:hidden}.sync-hint{color:var(--muted);font-size:.75rem}.user-badge{align-items:center;gap:.35rem;height:38px;display:flex}.user-avatar{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.75rem;font-weight:700;display:flex;overflow:hidden}.user-avatar-img{object-fit:cover;width:100%;height:100%}@media (width<=900px){.status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=720px){.top-bar{flex-direction:column;align-items:stretch}.top-actions{justify-content:stretch}.top-actions .btn{flex:1}.controls{flex-direction:column;align-items:stretch;width:100%}.controls select{width:100%}.status-grid{grid-template-columns:1fr 1fr 1fr}.board{grid-template-columns:repeat(auto-fill,minmax(min(100%,145px),1fr))}}@media (width<=420px){.app-shell{padding-inline:.62rem}}