*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:#f5f7fa;color:#2c3e50}#root,.app{min-height:100vh}.start-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);position:relative}.trophy-button{position:absolute;top:20px;right:20px;width:60px;height:60px;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);font-size:30px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #0003}.trophy-button:hover{background:#ffffff4d;transform:translateY(-3px) scale(1.1);box-shadow:0 6px 20px #0000004d}.trophy-button:active{transform:translateY(-1px) scale(1.05)}.start-content{max-width:700px;width:100%;background:#fff;border-radius:20px;padding:50px;box-shadow:0 20px 60px #0000004d}.logo{text-align:center;margin-bottom:20px}.logo-icon{font-size:64px;display:block;margin-bottom:15px}.logo h1{font-size:42px;color:#2c3e50;margin:0;font-weight:700}.subtitle{text-align:center;font-size:18px;color:#666;margin-bottom:30px;line-height:1.6}.language-selector{margin:30px 0}.language-selector h2{font-size:24px;color:#2c3e50;margin-bottom:20px;text-align:center}.language-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}.language-column h3{font-size:18px;color:#2c3e50;margin-bottom:15px;text-align:center}.language-options{display:flex;flex-direction:column;gap:10px}.language-option{display:flex;align-items:center;gap:12px;padding:15px 20px;background:#ffffffe6;border:3px solid transparent;border-radius:12px;cursor:pointer;transition:all .3s;font-size:16px;font-weight:600;color:#2c3e50}.language-option .lang-flag{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px #0003}.language-option .lang-flag svg{display:block}.language-option .lang-label{flex:1;text-align:left}.language-option:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.language-option.selected{border-color:#667eea;background:#fff;box-shadow:0 4px 15px #667eea4d}.language-option.disabled{opacity:.4;cursor:not-allowed}.arrow-separator{font-size:36px;color:#667eea;font-weight:700}.difficulty-selector{margin:30px 0}.difficulty-selector h2{font-size:24px;color:#2c3e50;margin-bottom:10px;text-align:center}.difficulty-hint{color:#666;font-size:14px;text-align:center;margin-bottom:15px}.difficulty-options{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.difficulty-option{padding:15px 30px;background:#fff;border:3px solid #ddd;border-radius:12px;cursor:pointer;transition:all .3s;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:120px;justify-content:center}.difficulty-option:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.difficulty-option .checkmark{font-size:18px;font-weight:700}.duration-selector{margin-bottom:30px}.duration-selector h2{font-size:24px;color:#2c3e50;margin-bottom:20px;text-align:center}.duration-options{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.duration-option{padding:20px;border:2px solid #e0e0e0;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s;text-align:center}.duration-option:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}.duration-option.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}.duration-label{font-size:20px;font-weight:600;margin-bottom:5px}.duration-description{font-size:14px;opacity:.8}.start-button{width:100%;padding:20px;font-size:24px;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #667eea66;margin-bottom:40px}.start-button:hover{transform:translateY(-3px);box-shadow:0 6px 25px #667eea80}.start-button:active{transform:translateY(0)}.instructions{background:#f8f9fa;border-radius:12px;padding:25px;border-left:4px solid #667eea}.instructions h3{font-size:20px;color:#2c3e50;margin-top:0;margin-bottom:15px}.instructions ul{margin:0;padding-left:20px}.instructions li{font-size:16px;color:#555;line-height:1.8;margin-bottom:8px}@media (max-width: 768px){.start-content{padding:30px 20px}.logo h1{font-size:32px}.logo-icon{font-size:48px}.subtitle{font-size:16px}.language-grid{grid-template-columns:1fr;gap:15px}.arrow-separator{transform:rotate(90deg);font-size:28px}.language-option{padding:12px 15px;font-size:14px}.language-option .lang-flag svg{width:28px;height:21px}.difficulty-options{flex-direction:column}.difficulty-option{width:100%}.duration-options{grid-template-columns:1fr}.start-button{font-size:20px;padding:18px}.instructions{padding:20px}.instructions li{font-size:14px}}.game-container{max-width:800px;margin:0 auto;padding:20px}.game-loading{text-align:center;font-size:24px;padding:50px}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:15px;color:#fff;box-shadow:0 4px 15px #0003;position:relative}.exit-button{position:absolute;top:10px;right:10px;background:#fff3;border:2px solid rgba(255,255,255,.5);color:#fff;width:36px;height:36px;border-radius:50%;font-size:20px;font-weight:700;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.exit-button:hover{background:#ffffff4d;border-color:#fffc;transform:scale(1.1)}.exit-button:active{transform:scale(.95)}.timer,.score{display:flex;flex-direction:column;align-items:center;margin-right:30px}.timer-label,.score-label{font-size:14px;opacity:.9;margin-bottom:5px}.timer-value,.score-value{font-size:32px;font-weight:700}.timer-warning{color:#ff6b6b;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.game-content{display:flex;flex-direction:column;gap:30px}.phrase-card{position:relative;background:#fff;border-radius:15px;padding:40px;box-shadow:0 8px 30px #0000001f;text-align:center;border:2px solid #f0f0f0;transition:transform .2s}.phrase-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000026}.phrase-label{font-size:14px;color:#666;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}.phrase-text{font-size:28px;font-weight:600;color:#2c3e50;line-height:1.4;margin-bottom:15px}.difficulty-badge{display:inline-block;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.difficulty-easy{background-color:#d4edda;color:#155724}.difficulty-medium{background-color:#fff3cd;color:#856404}.difficulty-hard{background-color:#f8d7da;color:#721c24}.error-message{background-color:#f8d7da;color:#721c24;border:2px solid #f5c6cb;border-radius:10px;padding:15px 20px;text-align:center;font-weight:600;font-size:16px;animation:shake .5s}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.answer-reveal{background:linear-gradient(135deg,#d4edda,#c3e6cb);border:2px solid #28a745;border-radius:10px;padding:20px;text-align:center;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.answer-label{font-size:14px;color:#155724;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.answer-text{font-size:22px;color:#155724;font-weight:700;line-height:1.4}.input-section{display:flex;gap:15px;align-items:stretch}.translation-input{flex:1;padding:18px 24px;font-size:18px;border:2px solid #e0e0e0;border-radius:10px;outline:none;transition:all .3s;font-family:inherit}.translation-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.translation-input.input-error{border-color:#dc3545;background-color:#fff5f5}.translation-input.input-error:focus{border-color:#dc3545;box-shadow:0 0 0 3px #dc35451a}.submit-button{padding:18px 40px;font-size:18px;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #667eea66}.submit-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.submit-button:active{transform:translateY(0)}.skip-button{padding:18px 40px;font-size:18px;font-weight:600;background:linear-gradient(135deg,#6c757d,#495057);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #6c757d66}.skip-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c757d80;background:linear-gradient(135deg,#5a6268,#343a40)}.skip-button:active{transform:translateY(0)}.button-row{display:flex;justify-content:center;margin-top:15px}.show-answer-button{padding:12px 30px;font-size:16px;font-weight:600;background:linear-gradient(135deg,#17a2b8,#138496);color:#fff;border:none;border-radius:25px;cursor:pointer;transition:all .3s;box-shadow:0 3px 10px #17a2b84d;display:flex;align-items:center;gap:8px}.show-answer-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #17a2b866;background:linear-gradient(135deg,#138496,#117a8b)}.show-answer-button:active{transform:translateY(0)}.progress-info{text-align:center;color:#666;font-size:16px}.progress-info p{margin:8px 0}.hint{font-size:14px;color:#999;font-style:italic}@media (max-width: 768px){.game-container{padding:15px}.game-header{padding:45px 15px 15px}.exit-button{width:32px;height:32px;font-size:18px}.timer-value,.score-value{font-size:24px}.phrase-text{font-size:22px}.input-section{flex-direction:column}.translation-input,.submit-button,.skip-button{width:100%}.error-message{font-size:14px;padding:12px 15px}.answer-reveal{padding:15px}.answer-text{font-size:18px}.show-answer-button{font-size:14px;padding:10px 25px}}.results-container{max-width:900px;margin:0 auto;padding:20px}.results-header{text-align:center;margin-bottom:40px}.results-header h1{font-size:48px;color:#2c3e50;margin-bottom:10px}.performance-message{font-size:24px;color:#667eea;font-weight:600}.results-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:50px}.summary-card{background:#fff;border-radius:15px;padding:30px 20px;text-align:center;box-shadow:0 4px 15px #0000001a;border:2px solid #f0f0f0;transition:transform .2s}.summary-card:hover{transform:translateY(-5px)}.summary-card.correct{border-color:#28a745;background:linear-gradient(135deg,#d4edda,#c3e6cb)}.summary-card.incorrect{border-color:#dc3545;background:linear-gradient(135deg,#f8d7da,#f5c6cb)}.summary-card.accuracy{border-color:#667eea;background:linear-gradient(135deg,#e3e7ff,#d4d9f7)}.summary-value{font-size:42px;font-weight:700;color:#2c3e50;margin-bottom:10px}.summary-label{font-size:14px;color:#666;text-transform:uppercase;letter-spacing:1px}.results-details{margin-bottom:40px}.results-details h2{font-size:28px;color:#2c3e50;margin-bottom:25px;text-align:center}.results-list{display:flex;flex-direction:column;gap:15px}.result-item{display:flex;align-items:flex-start;gap:20px;background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px #00000014;border-left:4px solid #ddd;transition:all .2s}.result-item:hover{box-shadow:0 4px 15px #0000001f;transform:translate(5px)}.result-item.correct{border-left-color:#28a745;background:linear-gradient(to right,#f0fff4,#fff)}.result-item.incorrect{border-left-color:#dc3545;background:linear-gradient(to right,#fff5f5,#fff)}.result-number{flex-shrink:0;width:35px;height:35px;display:flex;align-items:center;justify-content:center;background:#667eea;color:#fff;border-radius:50%;font-weight:700;font-size:14px}.result-content{flex:1;display:flex;flex-direction:column;gap:8px}.result-phrase,.result-correct-answer,.result-user-answer{font-size:16px;line-height:1.5}.result-phrase strong,.result-correct-answer strong,.result-user-answer strong{color:#666;font-weight:600;margin-right:8px}.result-user-answer{color:#dc3545;font-style:italic}.result-status{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;border-radius:50%}.result-item.correct .result-status{color:#28a745;background:#d4edda}.result-item.incorrect .result-status{color:#dc3545;background:#f8d7da}.results-actions{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.play-again-button,.view-rankings-button{padding:18px 60px;font-size:20px;font-weight:600;color:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s}.play-again-button{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea66}.play-again-button:hover{transform:translateY(-3px);box-shadow:0 6px 25px #667eea80}.play-again-button:active{transform:translateY(0)}.view-rankings-button{background:linear-gradient(135deg,#ffc107,#ff9800);box-shadow:0 4px 15px #ffc10766}.view-rankings-button:hover{transform:translateY(-3px);box-shadow:0 6px 25px #ffc10780}.view-rankings-button:active{transform:translateY(0)}@media (max-width: 768px){.results-container{padding:15px}.results-header h1{font-size:36px}.performance-message{font-size:20px}.results-summary{grid-template-columns:repeat(2,1fr)}.summary-value{font-size:32px}.result-item{flex-direction:column;gap:15px}.result-number{align-self:flex-start}.result-status{align-self:flex-end}.results-actions{flex-direction:column}.play-again-button,.view-rankings-button{width:100%;padding:16px 40px;font-size:18px}}.rankings-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .3s}.rankings-modal{background:#fff;border-radius:20px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.rankings-header{display:flex;justify-content:space-between;align-items:center;padding:30px;border-bottom:2px solid #f0f0f0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:20px 20px 0 0}.rankings-header h1{margin:0;font-size:32px}.close-button{background:#fff3;border:none;color:#fff;font-size:28px;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.close-button:hover{background:#ffffff4d;transform:rotate(90deg)}.no-rankings{text-align:center;padding:60px 30px}.no-rankings-icon{font-size:80px;margin-bottom:20px}.no-rankings h2{font-size:28px;color:#2c3e50;margin-bottom:10px}.no-rankings p{font-size:18px;color:#666}.duration-tabs{display:flex;gap:10px;padding:20px;background:#f8f9fa;flex-wrap:wrap}.duration-tab{flex:1;min-width:150px;padding:15px 20px;border:2px solid #e0e0e0;background:#fff;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;color:#2c3e50}.duration-tab:hover:not(.disabled){border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}.duration-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.duration-tab.disabled{opacity:.5;cursor:not-allowed}.record-count{font-size:12px;opacity:.8;margin-left:5px}.select-duration-message{text-align:center;padding:60px 30px;font-size:18px;color:#666}.rankings-list{padding:30px}.rankings-list h2{font-size:24px;color:#2c3e50;margin-bottom:20px;text-align:center}.rankings-table{background:#fff;border-radius:10px;overflow:hidden}.rankings-table-header{display:grid;grid-template-columns:80px 100px 120px 120px 1fr;gap:15px;padding:15px 20px;background:#f8f9fa;font-weight:600;color:#666;font-size:14px;text-transform:uppercase;letter-spacing:.5px}.rankings-row{display:grid;grid-template-columns:80px 100px 120px 120px 1fr;gap:15px;padding:20px;border-bottom:1px solid #f0f0f0;align-items:center;transition:all .2s}.rankings-row:hover{background:#f8f9fa}.rankings-row.top-three{background:linear-gradient(to right,#fff9e6,#fff)}.rankings-row.top-three:hover{background:linear-gradient(to right,#fff5d6,#f8f9fa)}.medal{font-size:24px}.rank-col{text-align:center}.score-col{text-align:center;font-size:20px;color:#667eea}.accuracy-col{text-align:center}.accuracy-badge{display:inline-block;padding:4px 12px;background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724;border-radius:15px;font-weight:600;font-size:14px}.phrases-col{text-align:center;color:#666}.date-col{color:#999;font-size:14px}.rankings-footer{padding:20px 30px;border-top:2px solid #f0f0f0;text-align:center}.clear-rankings-button{padding:12px 30px;background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;border:none;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 3px 10px #dc35454d}.clear-rankings-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #dc354566}@media (max-width: 768px){.rankings-modal{max-height:95vh}.rankings-header{padding:20px}.rankings-header h1{font-size:24px}.duration-tabs{flex-direction:column}.duration-tab{min-width:auto}.rankings-table-header,.rankings-row{grid-template-columns:60px 80px 90px 90px 1fr;gap:10px;padding:15px;font-size:12px}.medal{font-size:20px}.score-col{font-size:16px}.date-col{font-size:12px}.rankings-list{padding:20px}}