.reaction-test-container{font-family:Inter,Roboto,sans-serif;margin:0 auto;max-width:600px;padding:20px}.reaction-test-container .test-area{background:#1f2937;border-radius:16px;min-height:420px;padding:32px}.reaction-test-container .test-area .start-screen{text-align:center}.reaction-test-container .test-area .start-screen h2{color:#f9fafb;font-size:24px;font-weight:700;margin-bottom:16px}.reaction-test-container .test-area .start-screen p{color:#9ca3af;font-size:16px;line-height:1.5;margin-bottom:32px}.reaction-test-container .test-area .start-screen .attempts-info{background:#374151;border-radius:8px;color:#d1d5db;display:block;font-size:14px;margin-bottom:32px;margin-left:auto;margin-right:auto;padding:12px;width:-moz-fit-content;width:fit-content}.reaction-test-container .test-area .start-screen .start-btn{background:#16a34a;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:18px;font-weight:600;padding:16px 32px;transition:all .2s ease}.reaction-test-container .test-area .start-screen .start-btn:hover{background:#15803d;transform:translateY(-1px)}.reaction-test-container .test-area .start-screen .start-btn:active{transform:translateY(0)}.reaction-test-container .test-area .click-area{text-align:center}.reaction-test-container .test-area .click-area .reaction-zone{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-bottom:24px;min-height:300px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle{align-items:center;background:#374151;border:4px solid #6b7280;border-radius:50%;display:flex;height:200px;justify-content:center;transition:all .3s ease;width:200px}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle .reaction-status{color:#d1d5db;font-size:18px;font-weight:600}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle.reaction-preparing{background:#dc2626;border-color:#b91c1c}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle.reaction-preparing .reaction-status{color:#fff}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle.reaction-ready{animation:reactionPulse .5s ease-in-out infinite alternate;background:#16a34a;border-color:#15803d}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle.reaction-ready .reaction-status{color:#fff;font-size:20px}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle.reaction-false_start{background:#fbbf24;border-color:#f59e0b}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle.reaction-false_start .reaction-status{color:#78350f}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle.reaction-finished{background:#3b82f6;border-color:#2563eb}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle.reaction-finished .reaction-status{color:#fff}.reaction-test-container .test-area .click-area .attempt-counter{color:#9ca3af;font-size:16px;font-weight:500}.reaction-test-container.theme-blue .test-area{background:#1e3a8a}.reaction-test-container.theme-blue .test-area .start-btn{background:#3b82f6}.reaction-test-container.theme-blue .test-area .start-btn:hover{background:#2563eb}.reaction-test-container.theme-red .test-area{background:#7f1d1d}.reaction-test-container.theme-red .test-area .start-btn{background:#dc2626}.reaction-test-container.theme-red .test-area .start-btn:hover{background:#b91c1c}.reaction-test-container.theme-green .test-area{background:#14532d}.reaction-test-container.theme-purple .test-area{background:#581c87}.reaction-test-container.theme-purple .test-area .start-btn{background:#9333ea}.reaction-test-container.theme-purple .test-area .start-btn:hover{background:#7c3aed}.reaction-test-container .results-screen{text-align:center}.reaction-test-container .results-screen h2{color:#f9fafb;font-size:28px;font-weight:700;margin-bottom:32px}.reaction-test-container .results-screen .result-stats{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:40px}.reaction-test-container .results-screen .result-stats .stat-item{background:#374151;border-radius:12px;padding:20px}.reaction-test-container .results-screen .result-stats .stat-item.main-stat{background:#16a34a;grid-column:1/-1}.reaction-test-container .results-screen .result-stats .stat-item.main-stat .stat-label{color:#dcfce7}.reaction-test-container .results-screen .result-stats .stat-item.main-stat .stat-value{color:#fff;font-size:32px}.reaction-test-container .results-screen .result-stats .stat-item .stat-label{color:#9ca3af;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.reaction-test-container .results-screen .result-stats .stat-item .stat-value{color:#4ade80;font-size:24px;font-weight:700}.reaction-test-container .results-screen .attempts-details{margin-bottom:40px}.reaction-test-container .results-screen .attempts-details h3{color:#f9fafb;font-size:20px;font-weight:600;margin-bottom:24px}.reaction-test-container .results-screen .attempts-details .attempts-list{display:flex;flex-direction:column;gap:12px}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail{align-items:center;background:#374151;border-radius:8px;display:flex;justify-content:space-between;padding:16px}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail.valid{border-left:4px solid #16a34a}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail.invalid{border-left:4px solid #dc2626}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail .attempt-number{color:#d1d5db;font-size:16px;font-weight:600}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail .attempt-time{font-size:16px;font-weight:600}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail .attempt-time.valid-time{color:#4ade80}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail .attempt-time.false-start{color:#fbbf24}.reaction-test-container .results-screen .restart-btn{background:#374151;border:2px solid #4b5563;border-radius:12px;color:#f9fafb;cursor:pointer;font-size:16px;font-weight:600;padding:14px 28px;transition:all .2s ease}.reaction-test-container .results-screen .restart-btn:hover{background:#4b5563;border-color:#6b7280;transform:translateY(-1px)}.reaction-test-container .results-screen .restart-btn:active{transform:translateY(0)}@media (max-width:768px){.reaction-test-container{padding:12px}.reaction-test-container .test-area{min-height:360px;padding:20px}.reaction-test-container .test-area .start-screen h2{font-size:20px}.reaction-test-container .test-area .start-screen p{font-size:14px}.reaction-test-container .test-area .start-screen .start-btn{font-size:16px;padding:14px 24px}.reaction-test-container .test-area .click-area .reaction-zone{min-height:250px}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle{height:160px;width:160px}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle .reaction-status{font-size:16px}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle .reaction-status.reaction-ready{font-size:18px}.reaction-test-container .test-area .click-area .attempt-counter{font-size:14px}.reaction-test-container .results-screen h2{font-size:22px}.reaction-test-container .results-screen .result-stats{gap:16px;grid-template-columns:1fr}.reaction-test-container .results-screen .result-stats .stat-item{padding:16px}.reaction-test-container .results-screen .result-stats .stat-item.main-stat .stat-value{font-size:28px}.reaction-test-container .results-screen .result-stats .stat-item .stat-value{font-size:20px}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail{padding:12px}.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail .attempt-number,.reaction-test-container .results-screen .attempts-details .attempts-list .attempt-detail .attempt-time{font-size:14px}}@media (max-width:480px){.reaction-test-container .test-area .click-area .reaction-zone{min-height:200px}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle{height:120px;width:120px}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle .reaction-status{font-size:14px}.reaction-test-container .test-area .click-area .reaction-zone .reaction-circle .reaction-status.reaction-ready{font-size:16px}.reaction-test-container .results-screen .result-stats .stat-item.main-stat .stat-value{font-size:24px}}@keyframes reactionPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7);transform:scale(1)}to{box-shadow:0 0 0 20px rgba(34,197,94,0);transform:scale(1.05)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-8px,0)}70%{transform:translate3d(0,-4px,0)}90%{transform:translate3d(0,-2px,0)}}.reaction-test-container .reaction-circle.reaction-ready{animation:reactionPulse .5s ease-in-out infinite alternate}.reaction-test-container .attempt-counter{animation:fadeIn .3s ease}.reaction-test-container .result-stats .stat-item{animation:fadeIn .5s ease}.reaction-test-container .result-stats .stat-item:first-child{animation-delay:.1s}.reaction-test-container .result-stats .stat-item:nth-child(2){animation-delay:.2s}.reaction-test-container .result-stats .stat-item:nth-child(3){animation-delay:.3s}.reaction-test-container .result-stats .stat-item:nth-child(4){animation-delay:.4s}.reaction-test-container .attempts-list .attempt-detail{animation:slideIn .4s ease}.reaction-test-container .attempts-list .attempt-detail:first-child{animation-delay:.1s}.reaction-test-container .attempts-list .attempt-detail:nth-child(2){animation-delay:.2s}.reaction-test-container .attempts-list .attempt-detail:nth-child(3){animation-delay:.3s}.reaction-test-container .attempts-list .attempt-detail.valid{animation:bounce .6s ease}