:root{--bg-color: #111827;--card-bg: #1f2937;--text-main: #ffffff;--text-muted: #9ca3af;--red: #ef4444;--red-glow: rgba(239, 68, 68, .5);--green: #22c55e;--green-glow: rgba(34, 197, 94, .5);--blue: #2563eb;--blue-hover: #1d4ed8;--blue-light: #60a5fa;--font-sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: ui-monospace, "PingFang SC", "Microsoft YaHei", monospace}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;touch-action:none}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);overflow:hidden}#app{width:100vw;height:100vh;position:relative}.screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;padding:24px;transition:opacity .3s ease;opacity:1;z-index:1}.screen.hidden{display:none!important;opacity:0}.screen.overlay{background-color:#111827f2;z-index:10;align-items:center;justify-content:center}#screen-menu{align-items:center;justify-content:center}h1{font-size:2.5rem;margin-bottom:1rem;text-align:center}h2{font-size:1.5rem;margin-bottom:.5rem}h3{font-size:1.25rem;margin-bottom:1rem}.card{background-color:var(--card-bg);padding:1.5rem;border-radius:.75rem;width:100%;max-width:400px;margin-bottom:2rem;box-shadow:0 10px 15px -3px #00000080}.card p{color:var(--text-muted);margin-bottom:.5rem;line-height:1.5}.card p:last-child{margin-bottom:0}.btn{font-weight:700;padding:1rem 3rem;border-radius:9999px;border:none;font-size:1.25rem;margin-bottom:1rem;cursor:pointer;transition:transform .1s,background-color .2s;color:#fff;box-shadow:0 10px 15px -3px #00000080}.btn:active{transform:scale(.95)}.btn-primary{background-color:var(--blue)}.btn-primary:hover{background-color:var(--blue-hover)}.btn-secondary{background-color:#374151}.btn-secondary:hover{background-color:#4b5563}.game-header{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:1.25rem}.game-center{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.time-bar-container{position:absolute;top:0;left:0;width:100%;height:8px;background-color:var(--card-bg)}#time-bar{height:100%;background-color:#fff;width:100%;transform-origin:left}.big-circle{width:192px;height:192px;border-radius:50%;transform:scale(0);transition:transform .1s ease-out;box-shadow:0 25px 50px -12px #00000080}.big-circle.visible{transform:scale(1)}.big-circle.red{background-color:var(--red)}.big-circle.green{background-color:var(--green)}.game-controls{height:192px;display:flex;justify-content:space-around;align-items:center;padding-bottom:2rem}.circle-btn{width:96px;height:96px;border-radius:50%;border:none;cursor:pointer;transition:transform .1s,filter .1s}.circle-btn.red{background-color:var(--red);box-shadow:0 0 20px var(--red-glow)}.circle-btn.green{background-color:var(--green);box-shadow:0 0 20px var(--green-glow)}.circle-btn:disabled{opacity:.5;cursor:not-allowed}.countdown{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8rem;font-weight:700;color:#fff;text-shadow:0 0 40px rgba(255,255,255,.5);display:none;z-index:10}.game-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.game-header h2{margin:0;flex:1}.game-header>div{font-family:var(--font-mono);font-size:1.25rem}.games-list{display:flex;flex-wrap:wrap;gap:1rem;width:100%;justify-content:center}.game-card{background-color:var(--card-bg);border-radius:.75rem;padding:1.5rem;width:280px;transition:transform .2s,background-color .2s;box-shadow:0 4px 6px -1px #0000004d}.game-card:hover{background-color:#374151;transform:translateY(-2px)}.game-card:active{transform:translateY(0)}.game-card-header{margin-bottom:1rem}.game-card-title{font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.game-card-desc{color:var(--text-muted);font-size:1rem;margin:0;line-height:1.4}.game-card-actions{display:flex;flex-direction:column;gap:.5rem}.game-card-play-btn,.game-card-history-btn{padding:.875rem 1rem;border-radius:.5rem;border:none;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .2s,transform .1s}.game-card-play-btn{background-color:var(--blue);color:#fff}.game-card-play-btn:hover{background-color:var(--blue-hover)}.game-card-history-btn{background-color:#ffffff1a;color:#fff}.game-card-history-btn:hover{background-color:#fff3}.game-card-play-btn:active,.game-card-history-btn:active{transform:scale(.97)}.gameover-title{color:var(--red);font-size:3rem;margin-bottom:.5rem;font-weight:700}#gameover-reason{font-size:1.25rem;color:var(--text-muted);margin-bottom:2rem}.text-center{text-align:center}.label{color:var(--text-muted);margin-bottom:.25rem;font-size:.875rem}.score-value{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.time-value{font-size:1.5rem;font-family:var(--font-mono);color:var(--blue-light)}#screen-history{background-color:var(--bg-color)}.history-header{display:flex;align-items:center;margin-bottom:1.5rem}.icon-btn{background-color:var(--card-bg);border:none;color:#fff;padding:.75rem;border-radius:50%;margin-right:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,background-color .2s}.icon-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none}.icon-btn:hover{background-color:#374151}.icon-btn:active{transform:scale(.95)}.history-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.history-list{overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;padding-right:.5rem;width:100%}.history-item{background-color:var(--card-bg);border-radius:.5rem;display:flex;flex-direction:column;border:1px solid transparent;transition:background-color .2s,border-color .2s;overflow:hidden;flex-shrink:0}.history-item-header{padding:1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.history-item-header:hover{background-color:#374151}.history-item.expanded{border-color:var(--blue)}.history-item .score{font-weight:700;font-size:1.125rem}.history-item .date{font-size:.875rem;color:var(--text-muted)}.history-item .time{font-family:var(--font-mono);color:var(--blue-light);text-align:right}.history-item .rounds{font-size:.75rem;color:var(--text-muted);text-align:right}.history-item-detail{padding:1rem;display:none;border-top:1px solid #374151;margin-top:.5rem;flex-direction:column}.history-item.expanded .history-item-detail{display:flex}.detail-stats{display:flex;justify-content:space-between;margin-bottom:1.5rem}.stat-value{font-size:1.5rem;font-weight:700}.stat-value.blue{color:var(--blue-light);font-family:var(--font-mono)}.chart-container{flex:1;position:relative;min-height:200px;width:100%}canvas{position:absolute;top:0;left:0;width:100%;height:100%}.empty-history{color:var(--text-muted);text-align:center;padding:2rem 0}.history-item-right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:.5rem}.delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;border-radius:.25rem;transition:color .2s,background-color .2s;display:flex;align-items:center;justify-content:center}.delete-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}.delete-btn:hover{color:var(--red);background-color:#ef44441a}.sort-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.sort-label{color:var(--text-muted);font-size:.875rem;margin-right:.25rem}.sort-btn{background-color:var(--card-bg);border:1px solid #374151;color:var(--text-muted);padding:.375rem .75rem;border-radius:.375rem;font-size:.875rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.25rem}.sort-btn:hover{background-color:#374151;color:var(--text-main)}.sort-btn.active{background-color:var(--blue);border-color:var(--blue);color:#fff}.sort-arrow{font-size:.625rem;transition:transform .2s}.sort-btn.asc .sort-arrow{transform:rotate(180deg)}@keyframes click-feedback{0%{transform:scale(.85);filter:brightness(1.5)}to{transform:scale(1);filter:brightness(1)}}.circle-btn.clicked{animation:click-feedback .15s ease-out}.load-more-btn{background-color:var(--blue);color:#fff;border:none;padding:1rem;border-radius:.5rem;font-size:1rem;font-weight:700;margin:1rem auto;cursor:pointer;transition:background-color .2s,transform .1s;display:flex;align-items:center;justify-content:center;width:200px;max-width:100%;box-shadow:0 4px 6px -1px #0000004d}.load-more-btn:hover{background-color:var(--blue-hover)}.load-more-btn:active{transform:scale(.95)}.load-more-btn:disabled{opacity:.5;cursor:not-allowed}.lang-dropdown{position:fixed;top:16px;right:16px;z-index:100}.lang-toggle{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem;border-radius:.5rem;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.lang-toggle svg{width:24px;height:24px}.lang-toggle:hover{background:#fff3}.lang-menu{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--card-bg);border:1px solid #374151;border-radius:.5rem;overflow:hidden;display:none;min-width:120px;box-shadow:0 10px 25px #0006}.lang-menu.show{display:block}.lang-option{width:100%;padding:.75rem 1rem;background:none;border:none;color:var(--text-main);text-align:left;cursor:pointer;font-size:.875rem;transition:background-color .2s}.lang-option:hover{background-color:#374151}.lang-option.active{color:var(--blue-light);font-weight:700}