.password-typing-container{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh}.game-header{text-align:center;margin-bottom:3rem}.game-header h1{font-size:2.5rem;margin-bottom:.5rem;color:#2c3e50}.game-header p{font-size:1.1rem;color:#7f8c8d}@media(max-width:768px){.password-typing-container{padding:1rem}.game-header h1{font-size:2rem}}.selection-screen{animation:fadeIn .5s ease}.game-settings{max-width:800px;margin:0 auto;padding:2rem;background:#fff;border-radius:16px;box-shadow:0 8px 30px #0000001a}.game-settings h2{text-align:center;font-size:2rem;margin-bottom:2rem;color:#2c3e50}.setting-section{margin-bottom:2.5rem}.setting-section h3{font-size:1.3rem;margin-bottom:1rem;color:#555;padding-left:.5rem;border-left:4px solid #667eea}.difficulty-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.difficulty-option{padding:1.2rem;border:3px solid #e0e0e0;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s ease;text-align:center}.difficulty-option:hover{border-color:#667eea;transform:translateY(-3px);box-shadow:0 4px 15px #667eea4d}.difficulty-option.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-3px);box-shadow:0 6px 20px #667eea80}.option-name{font-size:1.3rem;font-weight:700;margin-bottom:.3rem}.option-desc{font-size:.85rem;opacity:.9}.mode-options{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}.mode-option{padding:1.5rem 2rem;border:3px solid #e0e0e0;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s ease;text-align:center;min-width:120px}.mode-option:hover{border-color:#667eea;transform:translateY(-3px);box-shadow:0 4px 15px #667eea4d}.mode-option.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-3px);box-shadow:0 6px 20px #667eea80}.option-number{font-size:1.8rem;font-weight:700;margin-bottom:.3rem}.start-button{display:block;width:100%;max-width:400px;margin:2rem auto 0;padding:1.5rem 3rem;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea66}.start-button:hover{transform:translateY(-5px);box-shadow:0 8px 25px #667eea99}.start-button:active{transform:translateY(-2px)}@media(max-width:768px){.game-settings{padding:1rem}.difficulty-options{grid-template-columns:repeat(2,1fr)}.mode-options{flex-direction:column;align-items:center}.mode-option{width:100%;max-width:250px}}.image-container{position:relative;width:100%;max-width:600px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px #00000026}.puzzle-image{width:100%;height:auto;display:block}.mosaic-info{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:1rem}.mosaic-bar{width:100%;height:8px;background:#ffffff4d;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.mosaic-bar-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);transition:width .3s ease}.mosaic-text{text-align:center;font-size:.9rem;font-weight:700}.password-area{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 15px #0000001a}.password-display{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.char{display:inline-block;width:2.5rem;height:3rem;line-height:3rem;text-align:center;font-family:Courier New,monospace;font-size:1.5rem;font-weight:700;background:#ecf0f1;border:2px solid #bdc3c7;border-radius:8px;transition:all .2s ease}.char.correct{background:#d4edda;border-color:#28a745;color:#155724;animation:correctPulse .3s ease}.char.incorrect{background:#f8d7da;border-color:#dc3545;color:#721c24;animation:shake .3s ease}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.password-input{width:100%;padding:1rem;font-size:1.2rem;font-family:Courier New,monospace;border:3px solid #667eea;border-radius:8px;outline:none;transition:all .3s ease}.password-input:focus{border-color:#764ba2;box-shadow:0 0 0 3px #667eea33}.password-input:disabled{background:#f5f5f5;cursor:not-allowed}.password-stats{text-align:center;margin-top:1rem;font-size:1rem;color:#666;font-weight:700}@media(max-width:768px){.char{width:2rem;height:2.5rem;line-height:2.5rem;font-size:1.2rem}}.choices-area{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 15px #0000001a}.choices-area h3{text-align:center;margin-bottom:1.5rem;font-size:1.5rem;color:#2c3e50}.choices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}.choice-btn{padding:1.5rem;font-size:1.2rem;font-weight:700;border:3px solid #ddd;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s ease}.choice-btn:hover:not(:disabled){border-color:#667eea;background:#f0f4ff;transform:translateY(-2px)}.choice-btn:disabled{cursor:not-allowed;opacity:.6}.choice-btn.correct{border-color:#28a745;background:#d4edda;color:#155724;animation:correctChoice .5s ease}.choice-btn.incorrect{border-color:#dc3545;background:#f8d7da;color:#721c24;animation:incorrectChoice .5s ease}.choice-btn.show-answer{border-color:#28a745;background:#d4edda;color:#155724}@keyframes correctChoice{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes incorrectChoice{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.feedback{text-align:center;padding:1rem;border-radius:8px;font-size:1.2rem;font-weight:700;margin-top:1rem}.feedback.correct{background:#d4edda;color:#155724;border:2px solid #28a745}.feedback.incorrect{background:#f8d7da;color:#721c24;border:2px solid #dc3545}@media(max-width:768px){.choices-grid{grid-template-columns:1fr}}.game-play{animation:fadeIn .5s ease}.progress-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;margin-bottom:2rem;font-size:1.2rem;font-weight:700}.question-progress{font-size:1.3rem}.game-timer{font-size:1.5rem;font-family:Courier New,monospace}.game-area{display:flex;flex-direction:column;gap:2rem}@media(max-width:768px){.progress-header{flex-direction:column;gap:.5rem}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-finished{text-align:center;padding:3rem;animation:fadeIn .5s ease}.game-finished h2{font-size:3rem;margin-bottom:2rem;color:#2c3e50}.congratulation-message{margin-bottom:2rem;padding:2rem;background:linear-gradient(135deg,#fff3cd,#ffeaa7);border-radius:12px;border:3px solid #ffc107}.congratulation-message p{font-size:1.4rem;color:#2c3e50;margin:.5rem 0;line-height:1.6}.congratulation-message strong{color:#e74c3c;font-size:1.5rem}.congratulation-message .thank-you{font-size:1rem;color:#7f8c8d;margin-top:.5rem}.final-stats{display:flex;justify-content:center;gap:3rem;margin-bottom:3rem;flex-wrap:wrap}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.stat-label{font-size:1rem;color:#7f8c8d;font-weight:700}.stat-value{font-size:2rem;font-weight:700;color:#2c3e50}.stat-value.highlight{color:#667eea;font-size:2.5rem}.restart-button{padding:1rem 3rem;font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea66}.restart-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea99}.game-failed{text-align:center;padding:3rem;background:#fff;border-radius:16px;box-shadow:0 8px 30px #0000001a;animation:fadeIn .5s ease}.game-failed h2{font-size:2.5rem;margin-bottom:2rem;color:#e74c3c}.failed-info{margin-bottom:3rem}.failed-message{font-size:1.5rem;color:#2c3e50;margin-bottom:2rem;padding:1.5rem;background:#fff3cd;border-left:4px solid #ffc107;border-radius:8px;font-weight:700}.sarcasm-message{margin-bottom:2rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-radius:8px;border:2px solid #4caf50}.sarcasm-message p{font-size:1.2rem;color:#2c3e50;margin:0}.sarcasm-message .thank-you{font-size:1rem;color:#7f8c8d;margin-top:.5rem}@media(max-width:768px){.final-stats{flex-direction:column;gap:1.5rem}}
