*{margin:0;padding:0;box-sizing:border-box}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;align-items:center;padding:20px;position:relative}.header-buttons{position:fixed;top:20px;right:20px;display:flex;gap:12px;z-index:1000}.header-btn{background:#ffffffe6;color:#333;padding:10px 20px;border-radius:25px;text-decoration:none;font-size:clamp(.85rem,2vw,1rem);font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #0003;border:2px solid transparent;white-space:nowrap}.header-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d;border-color:#667eea80}.container{width:100%;max-width:1200px;text-align:center}.title{font-size:clamp(2rem,5vw,3.5rem);color:#fff;margin-bottom:30px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.image-container{margin-bottom:40px;display:flex;justify-content:center}.cover-image{max-width:100%;height:auto;max-height:300px;border-radius:15px;box-shadow:0 10px 30px #0000004d;object-fit:contain}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:20px 0}.option-card{background:#fffffff2;border-radius:15px;padding:25px 20px;font-size:clamp(1rem,2.5vw,1.3rem);font-weight:600;color:#333;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;min-height:80px;display:flex;align-items:center;justify-content:center;border:2px solid transparent}.option-card.active{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.option-card.active:hover{transform:translateY(-5px);box-shadow:0 8px 25px #0000004d;border-color:#ffffff80}.option-card.placeholder{background:#ffffff4d;border:2px dashed rgba(255,255,255,.5);cursor:default;opacity:.6}.placeholder-text{color:#ffffffb3;font-size:.9em}@media (max-width: 768px){.app{padding:70px 15px 15px}.header-buttons{top:10px;right:10px;gap:8px}.header-btn{padding:8px 16px;font-size:.85rem}.title{margin-bottom:20px}.image-container{margin-bottom:30px}.cover-image{max-height:200px}.options-grid{grid-template-columns:repeat(2,1fr);gap:15px;padding:15px 0}.option-card{padding:20px 15px;min-height:70px;font-size:1rem}}@media (max-width: 480px){.app{padding-top:65px}.header-buttons{top:8px;right:8px;gap:6px;flex-direction:column}.header-btn{padding:6px 12px;font-size:.8rem}.options-grid{grid-template-columns:1fr;gap:12px}.option-card{padding:18px 15px;min-height:60px}}@media (min-width: 1200px){.options-grid{grid-template-columns:repeat(5,1fr)}}.start-page{min-height:100vh;background:linear-gradient(135deg,#667eea,#b7f368);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative}.loading{font-size:1.5rem;color:#333}.back-button{position:fixed;top:20px;left:20px;background:#ffffffe6;border:none;padding:10px 20px;border-radius:25px;font-size:clamp(.9rem,2vw,1rem);font-weight:600;color:#333;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;z-index:100}.back-button:hover{background:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.score-container{position:fixed;top:20px;right:20px;display:flex;align-items:center;gap:8px;background:#ffffffe6;padding:8px 16px;border-radius:25px;box-shadow:0 4px 15px #0003;z-index:100}.success-tip{position:fixed;top:80px;right:20px;background:linear-gradient(135deg,#4ade80,#22c55e);color:#fff;padding:12px 20px;border-radius:15px;font-size:1.2rem;font-weight:700;box-shadow:0 6px 20px #0000004d;z-index:200;animation:popIn .3s ease-out}@keyframes popIn{0%{transform:scale(.5) translateY(-20px);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1) translateY(0);opacity:1}}.score-image{width:24px;height:24px;object-fit:contain}.score-text{font-size:1.2rem;font-weight:600;color:#333}.word-container{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:30px;flex-wrap:wrap}.word-label{font-size:1rem;color:#666;font-weight:500}.word-text{font-size:clamp(2rem,6vw,3.5rem);font-weight:700;color:#333}.audio-button{background:#ff6b9d;border:none;border-radius:50%;width:50px;height:50px;font-size:1.5rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;display:flex;align-items:center;justify-content:center}.audio-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #0000004d}.audio-button:active{transform:scale(.95)}.image-wrapper{margin:30px 0;display:flex;justify-content:center;align-items:center}.image-wrapper.shaking{animation:shake 1s ease-in-out infinite}@keyframes shake{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.status-image{max-width:300px;max-height:300px;width:auto;height:auto;object-fit:contain;transition:all .3s ease}.hint-text{font-size:clamp(.9rem,2vw,1.1rem);color:#666;margin-bottom:20px;text-align:center}.options-container{display:flex;flex-direction:row;gap:20px;justify-content:center;flex-wrap:nowrap;max-width:900px;width:100%}.option-button{flex:1;min-width:0;max-width:none;padding:20px 25px;border:none;border-radius:15px;font-size:clamp(1rem,2.5vw,1.2rem);font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;color:#333;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;text-align:center}.option-left{background:linear-gradient(135deg,#a8e6cf,#88d8a3)}.option-center{background:linear-gradient(135deg,#ffd3a5,#fd9853)}.option-right{background:linear-gradient(135deg,#a8c8ec,#7ba3d8)}.option-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 20px #0000004d}.option-button:active:not(:disabled){transform:translateY(0)}.option-button:disabled{cursor:not-allowed;opacity:.7}.option-button.correct{background:linear-gradient(135deg,#4ade80,#22c55e);color:#fff;animation:correctPulse .5s ease}.option-button.wrong{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff;animation:wrongShake .5s ease}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media (max-width: 768px){.start-page{padding:80px 15px 15px}.back-button{top:10px;left:10px;padding:8px 16px;font-size:.85rem}.score-container{top:10px;right:10px;padding:6px 12px}.success-tip{top:70px;right:10px;padding:10px 16px;font-size:1rem}.score-image{width:20px;height:20px}.score-text{font-size:1rem}.word-container{margin-bottom:20px;gap:8px}.word-text{font-size:2rem}.audio-button{width:40px;height:40px;font-size:1.2rem}.image-wrapper{margin:20px 0}.status-image{max-width:200px;max-height:200px}.options-container{flex-direction:row;gap:12px;flex-wrap:nowrap}.option-button{min-width:0;max-width:none;padding:18px 15px;font-size:.9rem}}@media (max-width: 480px){.start-page{padding-top:70px}.back-button{top:8px;left:8px;padding:6px 12px;font-size:.8rem}.success-tip{top:60px;right:8px;padding:8px 14px;font-size:.9rem}.word-text{font-size:1.8rem}.status-image{max-width:150px;max-height:150px}.options-container{gap:8px}.option-button{padding:15px 12px;font-size:.85rem}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}