:root{--bg-color: #080a0f;--text-main: #f1f5f9;--text-muted: #64748b;--text-dim: #334155;--accent-mint: #10b981;--accent-mint-bright: #34d399;--accent-mint-glow: rgba(16, 185, 129, .2);--result-perfect: #34d399;--result-fast: #fbbf24;--result-slow: #f43f5e;--font-heading: "Chakra Petch", "Outfit", sans-serif;--font-timer: "JetBrains Mono", monospace;--font-body: "Outfit", "Chakra Petch", sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100vw;height:100vh;overflow:hidden;background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-body);user-select:none;-webkit-user-select:none;touch-action:manipulation}#root{width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column}.particle-canvas,.ripple-layer,.celebration-rings-layer,.flash-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.flash-overlay{background:#fff;z-index:40;animation:flashAnim .3s ease-out forwards}@keyframes flashAnim{0%{opacity:.75}to{opacity:0}}.celebration-rings-layer{display:flex;justify-content:center;align-items:center}.celebration-ring{position:absolute;width:100px;height:100px;border-radius:50%;border:4px solid var(--accent-mint-bright);animation:shockwaveExpand .75s ease-out forwards;pointer-events:none}.ring-level-2{border-color:#fbbf2499}.ring-level-3{border-color:#38bdf8b3;box-shadow:0 0 20px #38bdf880}.ring-level-4{border-color:#fbbf24d9;box-shadow:0 0 35px #fbbf24b3}.ring-level-5{border-color:#34d399f2;box-shadow:0 0 50px #34d399e6}@keyframes shockwaveExpand{0%{transform:scale(.5);opacity:1}to{transform:scale(8);opacity:0}}.ripple-circle{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border:3px solid var(--accent-mint-bright);border-radius:50%;box-shadow:0 0 15px var(--accent-mint);animation:rippleExpand .5s ease-out forwards;pointer-events:none}@keyframes rippleExpand{0%{transform:scale(1);opacity:.9}to{transform:scale(18);opacity:0}}.bg-grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to right,rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.015) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0}.bg-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,transparent 40%,rgba(4,5,8,.85) 100%);pointer-events:none;z-index:0;transition:background .3s ease}.game-container{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1rem,3vh,2.5rem) clamp(1.2rem,4vw,3rem);cursor:pointer}.stop-impact{animation:screenImpact .25s ease-out}@keyframes screenImpact{0%{transform:scale(1.03)}50%{transform:scale(.98)}to{transform:scale(1)}}.app-header{display:flex;justify-content:space-between;align-items:center;width:100%;z-index:10}.header-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-size:clamp(.85rem,1.6vw,1.15rem);font-weight:600;letter-spacing:.15em;color:var(--text-muted);text-transform:uppercase}.header-dot{width:8px;height:8px;border-radius:50%;background-color:var(--accent-mint);box-shadow:0 0 10px var(--accent-mint-glow)}.header-actions{display:flex;align-items:center;gap:.75rem}.btn-header{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);color:var(--text-muted);font-family:var(--font-heading);font-size:clamp(.75rem,1.2vw,.9rem);font-weight:600;letter-spacing:.1em;padding:.5rem .9rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:all .15s ease;min-height:40px}.btn-header:hover,.btn-header:active{background:#ffffff1a;color:var(--text-main);border-color:#ffffff40}.center-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:clamp(.8rem,2vh,1.8rem);padding:1rem 0;position:relative}.game-title{font-family:var(--font-heading);font-size:clamp(1rem,2.8vw,2.2rem);font-weight:700;letter-spacing:.25em;color:var(--text-muted);text-transform:uppercase}.timer-hero-container{position:relative;display:flex;justify-content:center;align-items:center;margin:.5vh 0}.timer-wrapper{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;line-height:1}.timer-digits{font-family:var(--font-timer);font-size:clamp(4.5rem,16vw,15rem);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--text-main);text-shadow:0 0 40px rgba(0,0,0,.8);transition:transform .15s ease,color .2s ease}.timer-running{color:#fff;animation:timerActivePulse 1.5s infinite ease-in-out}@keyframes timerActivePulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 10px rgba(16,185,129,.2))}50%{transform:scale(1.015);filter:drop-shadow(0 0 25px rgba(52,211,153,.5))}}.timer-stopped{color:#fff;animation:freezeBounce .25s cubic-bezier(.175,.885,.32,1.275)}@keyframes freezeBounce{0%{transform:scale(1.08)}to{transform:scale(1)}}.progress-ring-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(220px,32vw,460px);height:clamp(220px,32vw,460px);aspect-ratio:1 / 1;pointer-events:none;z-index:1;display:flex;justify-content:center;align-items:center}.progress-ring-svg{width:100%;height:100%;overflow:visible}.progress-track{stroke:#ffffff0f}.progress-bar{stroke:var(--accent-mint);filter:drop-shadow(0 0 12px var(--accent-mint-bright));transition:stroke-dashoffset .04s linear}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;z-index:50;pointer-events:none;background:#080a0f99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.countdown-text{font-family:var(--font-timer);font-size:clamp(8rem,25vw,22rem);font-weight:900;color:var(--accent-mint-bright);text-shadow:0 0 60px var(--accent-mint);animation:countdownPop .32s cubic-bezier(.175,.885,.32,1.275) forwards}.countdown-go{color:#fff;text-shadow:0 0 80px var(--accent-mint-bright),0 0 30px #ffffff}@keyframes countdownPop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.result-container{position:relative;z-index:25;display:flex;flex-direction:column;align-items:center;gap:.75rem}.effect-level-1{animation:fadeInShort .25s ease-out forwards}.effect-level-2{animation:softBounce .35s ease-out forwards}.effect-level-3{animation:popLevel3 .4s cubic-bezier(.175,.885,.32,1.275) forwards}.effect-level-4{animation:popLevel4 .5s cubic-bezier(.175,.885,.32,1.275) forwards}.effect-level-5{animation:popLevel5 .75s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes fadeInShort{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes softBounce{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes popLevel3{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes popLevel4{0%{transform:scale(.75);opacity:0}50%{transform:scale(1.2);filter:brightness(1.3)}to{transform:scale(1);opacity:1;filter:brightness(1)}}@keyframes popLevel5{0%{transform:scale(.6);opacity:0}40%{transform:scale(1.35);filter:brightness(1.5)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1;filter:brightness(1)}}.result-main-text{font-family:var(--font-heading);font-size:clamp(2rem,6vw,4.5rem);font-weight:800;letter-spacing:.05em;line-height:1.15;text-align:center}.result-perfect{color:var(--result-perfect);text-shadow:0 0 50px rgba(52,211,153,.8),0 0 20px #ffffff}.result-fast{color:#fbbf24;text-shadow:0 0 40px rgba(251,191,36,.6)}.result-slow{color:#f43f5e;text-shadow:0 0 40px rgba(244,63,94,.6)}.attract-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;justify-content:center;align-items:center;background:#080a0feb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .4s ease-out}.attract-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}.attract-badge{font-family:var(--font-heading);font-size:clamp(.8rem,1.5vw,1.1rem);letter-spacing:.25em;color:var(--accent-mint);border:1px solid var(--accent-mint);padding:.3rem 1rem;border-radius:100px}.attract-title{font-family:var(--font-heading);font-size:clamp(2rem,6vw,4.5rem);font-weight:800;letter-spacing:.15em;color:var(--text-main);text-transform:uppercase}.attract-timer-demo{font-family:var(--font-timer);font-size:clamp(4.5rem,15vw,12rem);font-weight:800;color:var(--accent-mint-bright);text-shadow:0 0 50px var(--accent-mint);animation:attractPulse 1.8s infinite ease-in-out}@keyframes attractPulse{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.04);opacity:1}}.attract-prompt{font-family:var(--font-heading);font-size:clamp(1.1rem,2.5vw,2rem);font-weight:700;letter-spacing:.1em;color:#fbbf24}.attract-tap-hint{font-family:var(--font-heading);font-size:clamp(.9rem,2vw,1.3rem);letter-spacing:.2em;color:var(--text-muted);display:flex;align-items:center;gap:.6rem;margin-top:1rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040508d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;display:flex;justify-content:center;align-items:center;padding:1.5rem;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#0f131d;border:1px solid rgba(255,255,255,.12);border-radius:16px;width:100%;max-width:440px;padding:2rem;box-shadow:0 20px 50px #000c;display:flex;flex-direction:column;gap:1.5rem}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:1rem}.modal-title{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;letter-spacing:.1em;color:var(--text-main);text-transform:uppercase}.btn-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;line-height:1;padding:.3rem;display:flex;align-items:center;justify-content:center;border-radius:4px}.btn-close:hover{color:var(--text-main);background:#ffffff1a}.modal-body{display:flex;flex-direction:column;gap:1.25rem}.setting-group{display:flex;flex-direction:column;gap:.5rem}.setting-label{font-family:var(--font-heading);font-size:.9rem;font-weight:600;color:var(--text-muted);letter-spacing:.05em}.setting-input{background:#07090e;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:var(--text-main);font-family:var(--font-timer);font-size:1.1rem;padding:.75rem 1rem;outline:none;transition:border-color .15s ease}.setting-input:focus{border-color:var(--accent-mint)}.mode-toggle-group{display:flex;gap:.5rem;background:#07090e;padding:.3rem;border-radius:10px;border:1px solid rgba(255,255,255,.12)}.mode-btn{flex:1;background:transparent;border:none;color:var(--text-muted);font-family:var(--font-heading);font-size:.9rem;font-weight:700;padding:.65rem .8rem;border-radius:8px;cursor:pointer;transition:all .2s ease}.mode-btn:hover{color:var(--text-main)}.mode-btn.active{background:var(--accent-mint);color:#04060a;box-shadow:0 2px 12px #34d39959}.timer-blind-title{font-family:var(--font-heading);font-size:clamp(2rem,6.5vw,4.5rem);font-weight:900;letter-spacing:.12em;color:var(--accent-mint-bright);text-shadow:0 0 40px var(--accent-mint);text-align:center;animation:blindPulse 2s infinite ease-in-out;padding:1rem 0}@keyframes blindPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}.setting-group-checkbox{display:flex;align-items:center;gap:.5rem;padding:.4rem 0}.setting-label-checkbox{display:flex;align-items:center;gap:.65rem;font-family:var(--font-heading);font-size:.95rem;font-weight:600;color:var(--text-main);cursor:pointer}.setting-label-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-mint);cursor:pointer}.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding-top:.5rem}.btn-save{background:var(--accent-mint);color:#04060a;border:none;font-family:var(--font-heading);font-size:.95rem;font-weight:700;letter-spacing:.05em;padding:.65rem 1.4rem;border-radius:8px;cursor:pointer;transition:opacity .15s ease}.btn-save:hover{opacity:.9}body.theme-light{--bg-color: #f8fafc;--text-main: #0f172a;--text-muted: #475569;--text-dim: #94a3b8;--accent-mint: #059669;--accent-mint-bright: #10b981;--accent-mint-glow: rgba(5, 150, 105, .18);--result-perfect: #059669;--result-fast: #d97706;--result-slow: #e11d48}body.theme-light .bg-grid-overlay{background-image:linear-gradient(to right,rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.04) 1px,transparent 1px)}body.theme-light .bg-vignette{background:radial-gradient(circle at center,transparent 40%,rgba(203,213,225,.65) 100%)}body.theme-light .btn-header{background:#fff;border-color:#cbd5e1;color:#334155;box-shadow:0 1px 3px #0000000f}body.theme-light .btn-header:hover,body.theme-light .btn-header:active{background:#f1f5f9;color:#0f172a;border-color:#94a3b8}body.theme-light .timer-digits{color:#0f172a;text-shadow:0 0 30px rgba(0,0,0,.06)}body.theme-light .timer-running{color:#020617}body.theme-light .progress-track{stroke:#00000014}body.theme-light .attract-overlay{background:#f8fafcf2}body.theme-light .attract-title{color:#0f172a}body.theme-light .countdown-overlay{background:#f8fafccc}body.theme-light .countdown-text{color:#059669;text-shadow:0 0 40px rgba(16,185,129,.4)}body.theme-light .countdown-go{color:#0f172a;text-shadow:0 0 50px rgba(5,150,105,.6)}body.theme-light .modal-content{background:#fff;border-color:#e2e8f0;box-shadow:0 20px 50px #00000026}body.theme-light .modal-title{color:#0f172a}body.theme-light .setting-input{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}body.theme-light .mode-toggle-group{background:#f1f5f9;border-color:#cbd5e1}body.theme-light .mode-btn{color:#64748b}body.theme-light .mode-btn:hover{color:#0f172a}body.theme-light .mode-btn.active{background:#059669;color:#fff;box-shadow:0 2px 10px #05966940}body.theme-light .btn-close{color:#64748b}body.theme-light .btn-save{background:#059669;color:#fff}body.theme-light .result-fast{color:#d97706;text-shadow:0 0 35px rgba(217,119,6,.35)}body.theme-light .result-slow{color:#e11d48;text-shadow:0 0 35px rgba(225,29,72,.35)}body.theme-light .result-perfect{color:#059669;text-shadow:0 0 40px rgba(5,150,105,.4),0 0 15px rgba(16,185,129,.6)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}