*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family);background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}button{font-family:inherit;cursor:pointer;border:none;outline:0;-webkit-user-select:none;user-select:none}:root{--font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;--bg-gradient:linear-gradient(135deg,#f5f7fa,#e4e8ec);--card-bg:#ffffff;--card-shadow:0 2px 12px rgba(0,0,0,.08);--card-border:none;--card-radius:12px;--accent:#4A90D9;--accent-light:#6ba3e0;--text-primary:#2c3e50;--text-secondary:#7f8c8d;--text-inverse:#fff;--correct:#27ae60;--wrong:#e74c3c;--grid-gap:8px;--cell-font-size:1.5rem}[data-theme=tech]{--font-family:'Courier New','Consolas',monospace;--bg-gradient:linear-gradient(135deg,#0a0a0a,#1a1a2e);--card-bg:rgba(0,245,255,.05);--card-shadow:0 0 15px rgba(0,245,255,.15);--card-border:1px solid rgba(0,245,255,.3);--card-radius:4px;--accent:#00f5ff;--accent-light:#40f7ff;--text-primary:#e0e0e0;--text-secondary:#888;--text-inverse:#0a0a0a;--correct:#00ff88;--wrong:#ff3366}[data-theme=cartoon]{--font-family:'ZCOOL KuaiLe','Comic Sans MS',cursive,sans-serif;--bg-gradient:linear-gradient(135deg,#ffecd2,#fcb69f);--card-bg:rgba(255,255,255,.9);--card-shadow:0 4px 15px rgba(0,0,0,.1);--card-border:3px solid #ff9a9e;--card-radius:20px;--accent:#ff6b6b;--accent-light:#ff8787;--text-primary:#2d3436;--text-secondary:#636e72;--text-inverse:#fff;--correct:#00b894;--wrong:#fd79a8}.screen{display:none;flex-direction:column;align-items:center;padding:20px;min-height:100vh;animation:.3s fadeIn}.screen.active{display:flex}.title{font-size:2rem;font-weight:700;margin:40px 0 30px;color:var(--accent);text-align:center}.menu-modes{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;margin-bottom:24px}.menu-size{margin-bottom:16px;text-align:center}.menu-size label{display:block;margin-bottom:8px;color:var(--text-secondary);font-size:.9rem}.size-buttons{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.menu-theme{margin-bottom:20px;text-align:center}.menu-theme label{display:block;margin-bottom:8px;color:var(--text-secondary);font-size:.9rem}.menu-shape{margin-bottom:16px;text-align:center}.menu-shape label{display:block;margin-bottom:8px;color:var(--text-secondary);font-size:.9rem}.shape-buttons{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.menu-footer{display:flex;gap:16px;margin-top:auto;padding-top:20px}.btn{padding:12px 24px;border-radius:var(--card-radius);font-size:1rem;font-weight:600;transition:.2s;touch-action:manipulation}.btn-mode{background:var(--card-bg);color:var(--text-primary);border:var(--card-border);box-shadow:var(--card-shadow)}.btn-mode:active,.btn-mode:hover{transform:scale(1.02);box-shadow:0 4px 20px rgba(0,0,0,.12)}.btn-size{padding:8px 16px;background:var(--card-bg);color:var(--text-primary);border:var(--card-border);font-size:.85rem;border-radius:8px}.btn-primary,.btn-size.active{background:var(--accent);color:var(--text-inverse)}.btn-primary:hover{background:var(--accent-light)}.btn-secondary{background:var(--card-bg);color:var(--text-primary);border:var(--card-border)}.btn-icon{background:0 0;font-size:1.5rem;padding:8px}.btn-back{background:0 0;font-size:1.2rem;color:var(--text-primary);padding:8px 12px}.btn-toggle{padding:6px 16px;border-radius:20px;background:var(--accent);color:var(--text-inverse);font-size:.85rem}.btn-toggle.off{background:var(--text-secondary)}.btn-sm{padding:4px 12px;font-size:.85rem;background:var(--card-bg);color:var(--text-primary);border:var(--card-border);border-radius:6px}.btn-theme{padding:8px 14px;font-size:.85rem;background:var(--card-bg);color:var(--text-primary);border:var(--card-border);border-radius:8px}.btn-theme.active{background:var(--accent);color:var(--text-inverse)}.btn-shape{padding:8px 14px;font-size:.85rem;background:var(--card-bg);color:var(--text-primary);border:var(--card-border);border-radius:8px}.btn-shape.active{background:var(--accent);color:var(--text-inverse)}.game-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:500px;padding:10px 0;margin-bottom:10px}.timer{font-size:2rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.timer-warning{animation:.5s infinite timerBounce}.progress{font-size:.9rem;color:var(--text-secondary)}.game-phase-indicator{text-align:center;padding:8px;color:var(--accent);font-size:.9rem;font-weight:600;min-height:32px}.grid-container{display:grid;gap:var(--grid-gap);width:100%;max-width:min(90vw,500px);aspect-ratio:1}.grid-container.irregular{aspect-ratio:auto;max-width:min(90vw,500px)}.grid-cell{display:flex;align-items:center;justify-content:center;background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);font-size:var(--cell-font-size);font-weight:700;color:var(--text-primary);cursor:pointer;transition:transform .1s;animation:.4s cellAppear;-webkit-user-select:none;user-select:none}.grid-cell:active{transform:scale(.95)}.grid-cell.correct{animation:.35s forwards cellCorrect}.grid-cell.wrong{animation:.4s cellShake,.4s cellRedFlash}.grid-cell.hint{opacity:.3}.result-card{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:40px 30px;text-align:center;max-width:360px;width:100%;margin-top:60px}.result-card h2{font-size:1.5rem;margin-bottom:16px;color:var(--accent)}.result-time{font-size:3rem;font-weight:700;margin-bottom:8px}.result-mode{color:var(--text-secondary);margin-bottom:8px}.result-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:600;margin-bottom:8px}.result-badge.confusing-bg{background:linear-gradient(135deg,#e74c3c,#f1c40f,#2ecc71,#3498db,#9b59b6);color:#fff}.result-best{color:var(--correct);font-size:.9rem;margin-bottom:24px;min-height:20px}.result-actions{display:flex;flex-direction:column;gap:10px}.screen-header{display:flex;align-items:center;gap:12px;width:100%;max-width:500px;margin-bottom:20px}.screen-header h2{font-size:1.2rem}.stats-content{width:100%;max-width:500px}.stats-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}.stat-card{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:16px;text-align:center}.stat-card .stat-value{font-size:1.5rem;font-weight:700;color:var(--accent)}.stat-card .stat-label{font-size:.8rem;color:var(--text-secondary);margin-top:4px}.stats-calendar,.stats-trend{margin-bottom:24px}.stats-calendar h3,.stats-trend h3{font-size:.95rem;margin-bottom:12px;color:var(--text-secondary)}.calendar-heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-cell{aspect-ratio:1;border-radius:3px;background:rgba(0,0,0,.05);font-size:0}.calendar-cell.l1{background:rgba(39,174,96,.2)}.calendar-cell.l2{background:rgba(39,174,96,.4)}.calendar-cell.l3{background:rgba(39,174,96,.6)}.calendar-cell.l4{background:rgba(39,174,96,.8)}.settings-content{width:100%;max-width:500px}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.06)}.setting-item label{font-weight:500}.theme-selector{display:flex;gap:6px}.font-size-control{display:flex;align-items:center;gap:8px}#font-size-label{font-size:.85rem;color:var(--text-secondary);min-width:50px;text-align:center}.particle{position:fixed;pointer-events:none;border-radius:50%;animation:.6s ease-out forwards particleFly;z-index:100}.confetti{position:fixed;pointer-events:none;width:8px;height:8px;animation:2s ease-in forwards confettiFall;z-index:100}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes cellAppear{from{transform:scale(0) rotate(-10deg)}to{transform:scale(1) rotate(0)}}@keyframes cellCorrect{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.grid-cell.correct{position:relative;background:rgba(39,174,96,.15)!important;pointer-events:none}.grid-cell.correct::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.5);border-radius:inherit}.cell-checkmark{position:absolute;width:50%;height:50%;display:flex;align-items:center;justify-content:center}.cell-checkmark::after{content:'';width:12px;height:20px;border:solid #27ae60;border-width:0 4px 4px 0;transform:rotate(45deg);margin-top:-4px}@keyframes cellShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}@keyframes cellRedFlash{0%,100%{background:var(--card-bg)}50%{background:var(--wrong)}}@keyframes timerBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes particleFly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--px),var(--py)) scale(0);opacity:0}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}[data-theme=tech] .grid-cell{text-shadow:0 0 8px var(--accent);box-shadow:var(--card-shadow),inset 0 0 10px rgba(0,245,255,.05)}[data-theme=tech] .grid-container{position:relative}[data-theme=tech] .grid-container::after{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:2s linear infinite scanLine;pointer-events:none;top:0}@keyframes scanLine{0%{top:0}100%{top:100%}}[data-theme=cartoon] .grid-cell.correct::after{content:'\1F60A';position:absolute;font-size:1.2rem}[data-theme=cartoon] .grid-cell.wrong::after{content:'\1F605';position:absolute;font-size:1.2rem}[data-theme=cartoon] .grid-cell{position:relative}.grid-container.confusing-bg .grid-cell{color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.3)}@media(max-width:400px){:root{--grid-gap:5px;--cell-font-size:1.2rem}.title{font-size:1.6rem}.btn-mode{padding:10px 18px;font-size:.9rem}}.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(0,0,0,.75);color:#fff;padding:8px 20px;border-radius:20px;font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;padding:20px;animation:.2s fadeIn}.modal.active{display:flex}.modal-content{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:0 8px 32px rgba(0,0,0,.2);max-width:420px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.06)}.modal-header h3{font-size:1.1rem;color:var(--text-primary)}.modal-close{font-size:1.5rem;color:var(--text-secondary);padding:4px 8px}.modal-close:hover{color:var(--text-primary)}.modal-body{padding:20px;overflow-y:auto;flex:1;min-height:0}.share-preview{text-align:center;display:flex;justify-content:center;align-items:center}.share-preview img{max-width:100%;max-height:50vh;width:auto;height:auto;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1)}.modal-footer{display:flex;gap:10px;padding:16px 20px;border-top:1px solid rgba(0,0,0,.06);flex-wrap:wrap}.modal-footer .btn{flex:1;min-width:100px}