@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes countdownPulse{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}@keyframes feedbackPop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}:root{--primary-bg:#3b82f6;--primary-hover:#2563eb;--secondary-bg:#1f2937;--accent:#ff8f33;--light:#ffffff;--dark:#1a1a1a;--success:#059669;--success-light:#22c55e;--error:#dc2626;--error-light:#ef4444;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827}.countdown-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;align-items:center;justify-content:center;backdrop-filter:blur(10px);border-radius:20px;padding:2rem;z-index:1000;min-width:200px;min-height:200px}.countdown-number{font-size:8rem;font-weight:700;color:var(--primary-bg);text-align:center;animation:countdownPulse 1s ease-in-out}.replay-button{position:absolute;top:4.5rem;right:1.5rem;width:48px;height:48px;background:var(--error);border:0;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 2px 8px rgba(255,0,110,.3);z-index:100}.replay-button:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(255,0,110,.4)}.replay-button:active{transform:scale(.95)}.replay-button svg{width:24px;height:24px;fill:#fff}.replay-button.active{display:flex}.replay-button::after,.replay-button::before{position:absolute;opacity:0;pointer-events:none;transition:opacity .3s}.replay-button::before{content:"Stop & Return to Instructions";top:100%;right:0;margin-top:8px;padding:8px 12px;background-color:#1a202c;color:#fff;font-size:.875rem;white-space:nowrap;border-radius:6px}.replay-button::after{content:"";top:calc(100% + 2px);right:16px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #1a202c}.replay-button:hover::after,.replay-button:hover::before{opacity:1}.game-header{text-align:center;margin-bottom:2.5rem}.game-title{font-size:2.5rem;font-weight:700;color:var(--dark);margin-bottom:.5rem}.game-subtitle{font-size:1rem;color:var(--gray-500)}.game-stats{display:flex;justify-content:space-around;margin-bottom:2.5rem;gap:1rem}.stat-box{background:var(--light);padding:1rem;border-radius:12px;text-align:center;flex:1;transition:transform .2s ease;border:1px solid var(--gray-200);box-shadow:0 1px 3px rgba(0,0,0,.1)}.start-button:hover,.stat-box:hover{transform:translateY(-2px)}.stat-label{font-size:.875rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}.stat-value{font-size:1.5rem;font-weight:700;color:var(--dark);margin-top:.25rem}.game-display{background:var(--gray-50);border-radius:12px;padding:3rem 2rem;margin-bottom:2rem;min-height:350px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid var(--gray-200)}.start-screen{text-align:center;padding:1rem 0}.start-button{background:var(--primary-bg);color:var(--light);font-size:1.375rem;font-weight:600;padding:1.25rem 4rem;border:0;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(59,130,246,.2);margin:2.5rem 0 2rem}.start-button:hover{background:var(--primary-hover);box-shadow:0 8px 25px rgba(37,99,235,.3)}.start-button:active{transform:translateY(0)}.arrow-grid{display:none;flex-direction:column;gap:1rem;font-size:3rem;font-weight:700;user-select:none}.arrow-row{display:flex;gap:1.5rem;justify-content:center;align-items:center}.arrow-symbol{width:60px;text-align:center;transition:transform .1s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell;color:#333}.feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:700;padding:2rem 3rem;border-radius:12px;animation:feedbackPop .3s ease-out;display:none;z-index:10;box-shadow:0 4px 20px rgba(0,0,0,.3)}.feedback.correct{background-color:var(--success);color:#fff}.feedback.incorrect{background-color:var(--error);color:#fff}.feedback.no-action{background-color:var(--primary-bg);color:#fff}.content-wrapper{display:flex;gap:2rem;align-items:flex-start;margin-bottom:2rem}.example-container{background-color:#fff;padding:2rem;border-radius:8px;text-align:center;border:2px solid #e2e8f0;flex:1;min-width:0}.example-label{font-size:.875rem;color:#718096;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.example-grid{display:flex;flex-direction:column;gap:.75rem;font-size:2rem;font-weight:700;margin-bottom:1.5rem}.example-row{display:flex;gap:1rem;justify-content:center;align-items:center}.example-arrow,.example-arrow.middle{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell}.example-arrow{width:40px;text-align:center;color:#718096}.example-arrow.middle{font-weight:900;color:#333}.example-instruction{font-size:.9375rem;color:#4a5568;font-weight:600;padding:.5rem 0}.instructions{background-color:#edf2f7;padding:2rem;border-radius:8px;flex:1;min-width:0}.instructions h3{color:#4a5568;margin-bottom:1rem}.instructions ul{list-style:disc;padding-left:1.25rem;text-align:left}.instructions li{margin-bottom:.35rem;padding-left:0;position:relative;color:#718096;text-align:left}.instructions li:last-child{margin-bottom:0}.key-hints{display:flex;justify-content:center;gap:2.5rem;margin-top:2rem;padding:1.5rem 0 1rem;border-top:1px solid #e2e8f0}.key-hint{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;color:#718096;padding:.5rem 0}.key-badge{background-color:#e2e8f0;padding:.375rem .875rem;border-radius:4px;font-family:monospace;font-weight:600;color:#4a5568}.game-over{text-align:center;display:none}.game-over h2,.review-section h2{font-size:2rem;color:#4a5568;margin-bottom:1.5rem}.final-stats{background-color:#f7fafc;padding:2rem;border-radius:8px;margin-bottom:2rem}.final-stat{margin-bottom:.75rem;font-size:1.125rem;color:#718096}.final-stat strong{color:#4a5568}.review-section{display:none;text-align:center;max-width:800px;margin:0 auto}.review-section h2{margin-bottom:2rem}.review-navigation{display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:2rem}.nav-button{background:var(--gray-200);color:var(--gray-700);border:0;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.nav-button:hover:not(:disabled){background:var(--gray-300);transform:translateY(-1px)}.nav-button:disabled{opacity:.5;cursor:not-allowed}.review-counter{font-size:1.125rem;color:var(--gray-600);font-weight:600}.review-content{background:var(--gray-50);border-radius:12px;padding:2rem;margin-bottom:2rem;border:1px solid var(--gray-200)}.review-grid{display:flex;flex-direction:column;gap:1rem;font-size:2.5rem;font-weight:700;margin-bottom:2rem}.review-row{display:flex;gap:1.5rem;justify-content:center;align-items:center}.review-row .arrow-symbol{width:50px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell;color:#333}.review-row.middle-row .arrow-symbol:nth-child(3){background:rgba(59,130,246,.1);border-radius:8px;padding:.25rem}.review-info{display:flex;flex-direction:column;gap:1.5rem}.review-status{font-size:1.5rem;font-weight:700;padding:1rem;border-radius:8px}.review-status.correct{background:var(--success);color:#fff}.review-status.incorrect{background:var(--error);color:#fff}.review-details{display:flex;flex-direction:column;gap:.75rem;text-align:left;max-width:400px;margin:0 auto}.review-details p{margin:0;font-size:1rem;color:var(--gray-600)}.review-details span{font-weight:600;color:var(--gray-800)}.game-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.start-button.secondary{background:var(--gray-600)}.start-button.secondary:hover{background:var(--gray-700)}@media (max-width:640px){.game-container{padding:4rem 1.5rem 1.5rem}.replay-button{top:1rem;right:1rem;width:40px;height:40px}.replay-button svg{width:20px;height:20px}.game-title{font-size:1.5rem}.arrow-grid{font-size:2rem}.arrow-symbol{width:40px}.game-stats,.key-hints{flex-direction:column}.key-hints{gap:1rem;margin-top:1.5rem;padding:1rem 0}.content-wrapper{flex-direction:column;gap:1.5rem}.example-container,.instructions{margin-bottom:0}.game-buttons{flex-direction:column}.review-navigation{flex-wrap:wrap;gap:1rem}.review-grid{font-size:1.75rem}.review-row .arrow-symbol{width:35px}}