:root{--card-bg: #edf2f7;--card-border: #cbd5e0;--card-text: #2d3748;--card-hover-bg: #e2e8f0;--anim-duration: .3s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;background-color:#ecf0f1}input,button,textarea,select{font:inherit;outline:none}.hidden{display:none!important}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background-color:#1a202c;background-image:radial-gradient(#2d3748 1px,transparent 1px);background-size:20px 20px;padding:20px}.login-form{width:100%;max-width:400px;background:#fff;padding:48px;border-radius:16px;box-shadow:0 25px 50px -12px #00000040;display:flex;flex-direction:column;gap:24px}.login-title{text-align:center;font-size:2rem;font-weight:800;color:#1a202c;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:12px}.login-title:before{content:"";display:inline-block;width:32px;height:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233182ce'%3E%3Cpath d='M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5H2v4c0 1.1.9 2 2 2h3.8v-1.5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5V22h4c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}.login-description{text-align:center;color:#718096;font-size:1rem;margin-top:-16px;margin-bottom:16px}.input-group{display:flex;flex-direction:column;gap:8px}.input-label{font-size:.95rem;font-weight:600;color:#2d3748}.login-input{width:100%;padding:14px 16px;background-color:#edf2f7;border:2px solid transparent;border-radius:10px;font-size:1rem;color:#1a202c;transition:all .2s ease-in-out}.login-input:focus{background-color:#fff;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce26}.login-input::placeholder{color:#a0aec0}.login-button{margin-top:12px;padding:16px;border:none;border-radius:10px;font-weight:700;font-size:1.1rem;color:#fff;cursor:pointer;background-color:#3182ce;transition:background-color .2s}.login-button:hover{background-color:#2c5282}.login-button:active{transform:translateY(1px)}.input-error{color:#e53e3e;font-size:.85rem;margin-top:4px;min-height:20px;font-weight:500}.login-input.invalid{border-color:#e53e3e;background-color:#fff5f5}.login-input.invalid:focus{box-shadow:0 0 0 3px #e53e3e26}.login-button:disabled{background-color:#cbd5e0;cursor:not-allowed;transform:none;box-shadow:none;filter:none}.start-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:#1a202c;background-image:radial-gradient(#2d3748 1px,transparent 1px);background-size:20px 20px;padding:20px;text-align:center;color:#fff}.start-content{max-width:600px;background:#1a202ccc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:48px;border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 25px -5px #0006,0 10px 10px -5px #0003;display:flex;flex-direction:column;align-items:center;gap:24px;animation:fadeIn .8s ease-out}.start-title{font-size:4rem;font-weight:800;margin:0;line-height:1.1;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 10px rgba(118,75,162,.3)}.start-description{font-size:1.25rem;line-height:1.6;color:#a0aec0;margin:0}.start-buttons-wrapper{display:flex;gap:15px;align-items:center;justify-content:center;width:100%}.start-button,.logout-button{padding:12px 30px;border-radius:30px;cursor:pointer;width:200px;font-size:1.25rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;box-shadow:0 4px 15px #764ba266;transition:transform .2s,box-shadow .2s,filter .2s}.start-button:hover{transform:translateY(-2px)}.logout-button{background:red;border:2px solid rgba(255,255,255,.3);color:#fff}.logout-button:hover{transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.greeting{font-size:1.5rem;font-weight:600;color:#a0aec0;margin:0;text-transform:capitalize;animation:slideDown .6s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.main-page{min-height:100vh;background-color:#1a202c;background-image:radial-gradient(#2d3748 1px,transparent 1px);background-size:20px 20px;color:#fff;padding:15px 0;display:flex;justify-content:center}.game-container{width:100%;max-width:1200px;padding:0 10px;display:flex;flex-direction:column;gap:24px}.game-controls-bar{display:flex;justify-content:space-between;align-items:center;background:#ffffff0d;padding:16px;border-radius:12px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.level-selectors{display:flex;gap:16px}.puzzle-area{display:flex;flex-direction:column;gap:2px;background:#0003;padding:10px;border-radius:12px;min-height:400px}.puzzle-row{position:relative;display:flex;width:100%;height:45px;background-color:#ffffff0d;border-radius:6px;border:1px dashed rgba(255,255,255,.2);align-items:center;padding:0;margin:0;transition:all var(--anim-duration)}.puzzle-row.active-row{background-color:#ffffff1a;border:1px solid #4fd1c5;box-shadow:0 0 10px #4fd1c533;z-index:5}.source-area{min-height:60px;display:flex;flex-wrap:wrap;gap:4px;padding:16px;background:#ffffff0d;border-radius:12px;justify-content:center;align-items:center}.source-area .word-piece{margin:5px!important;height:45px;position:relative;flex-shrink:0}.word-piece{position:relative;display:inline-flex;height:45px;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important;overflow:visible!important;z-index:10;color:transparent!important;font-size:0;cursor:grab;-webkit-user-select:none;user-select:none;animation:popIn var(--anim-duration) ease-out;transition:width .1s,transform .1s}.word-piece canvas{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.word-piece:before,.word-piece:after{content:none!important;display:none!important}.word-piece:active{cursor:grabbing}.word-piece.dragging{opacity:.8;z-index:1000;transform:scale(1.05);pointer-events:none}.word-piece.dragging canvas{filter:drop-shadow(0 5px 10px rgba(0,0,0,.5))}.word-piece:hover{transform:translateY(-2px)}.puzzle-row .word-piece:hover{transform:none;background-color:transparent!important;border-color:transparent!important}.puzzle-row.drag-over{background-color:#ffffff26}.word-piece.success canvas{filter:drop-shadow(0 0 2px #48bb78) drop-shadow(0 0 1px #48bb78)}.word-piece.error canvas{filter:drop-shadow(0 0 2px #f56565) drop-shadow(0 0 1px #f56565)}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.puzzle-area.completed .word-piece{opacity:0!important;transition:opacity 1.5s ease-in-out;pointer-events:none}.puzzle-area.completed .puzzle-row{border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important}.artwork-info{margin:1rem 0;padding:1rem;background:#000000b3;border:1px solid rgba(255,255,255,.3);border-radius:12px;color:#fff;text-align:center;font-size:1.1rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .5s ease-out;width:100%;box-sizing:border-box;position:relative;z-index:10}.artwork-title{font-weight:700;font-size:1.3rem;display:block;margin-bottom:.5rem;color:#4fd1c5}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.game-buttons{display:flex;justify-content:center;gap:16px;margin-top:10px}.game-btn{padding:12px 32px;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;min-width:140px}.game-btn:disabled{background-color:#cbd5e0;color:#718096;cursor:not-allowed;opacity:.7;transform:none!important;box-shadow:none;border-color:transparent}.game-btn-primary{background-color:#3182ce;color:#fff}.game-btn-primary:hover{background-color:#2c5282}.game-btn-secondary{background-color:#4a5568;color:#fff}.game-btn-secondary:hover{background-color:#2d3748}.hint-buttons{display:flex;gap:8px}.hint-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;width:40px;height:40px;padding:8px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.hint-btn:hover{background:#ffffff1a;border-color:#ffffff80;transform:translateY(-2px)}.hint-btn.active{animation:pulse-audio 1.5s infinite;background-color:#4fd1c533;border-color:#4fd1c5;color:#4fd1c5}.hint-btn svg{width:100%;height:100%;pointer-events:none}.hint-translation{text-align:center;font-size:1.1rem;color:#edf2f7;min-height:28px;padding:8px;font-style:italic;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:opacity .3s ease}.hint-translation.hidden{opacity:0;pointer-events:none;visibility:hidden}@keyframes pulse-audio{0%{transform:scale(1);box-shadow:0 0 #4fd1c5b3}70%{transform:scale(1.05);box-shadow:0 0 0 6px #4fd1c500}to{transform:scale(1);box-shadow:0 0 #4fd1c500}}.sentence-hints-row{display:flex;justify-content:center;align-items:center;gap:12px;min-height:40px;margin-bottom:10px;width:100%}.play-audio-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:#ffffff1a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}.play-audio-btn:hover{background:#4fd1c533;border-color:#4fd1c5;color:#4fd1c5;transform:scale(1.1)}.play-audio-btn.active{animation:pulse-audio 1.5s infinite;border-color:#4fd1c5;color:#4fd1c5}.play-audio-btn svg{width:18px;height:18px;pointer-events:none}.level-selectors{display:flex;gap:12px;align-items:center}.game-select{background-color:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:8px;font-family:inherit;font-size:.95rem;cursor:pointer;outline:none;transition:all .2s}.game-select:hover{background-color:#ffffff26;border-color:#fff6}.game-select:focus{border-color:#4fd1c5;box-shadow:0 0 0 2px #4fd1c533}.game-select option{background-color:#2d3748;color:#fff}.selector-label{font-size:.9rem;color:#a0aec0;font-weight:600;margin-right:4px}.selector-group{display:flex;align-items:center;gap:8px}.completed-option{color:#48bb78;font-weight:600;background-color:#48bb781a}.statistics-page{padding:2rem;color:#fff;display:flex;justify-content:center}.stats-container{background:#1e293be6;padding:2rem;border-radius:12px;width:100%;max-width:800px;box-shadow:0 4px 20px #00000080}.stats-title{text-align:center;color:#4fd1c5;margin-bottom:1.5rem;font-size:2rem}.stats-artwork{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;text-align:center}.stats-artwork-img{width:150px;height:auto;border-radius:4px;border:2px solid rgba(255,255,255,.2);margin-bottom:.5rem}.stats-artwork-title{font-weight:700;font-size:1.1rem}.stats-artwork-author{color:#a0aec0;font-size:.9rem}.stats-list-block{margin-bottom:2rem;background:#0003;border-radius:8px;padding:1rem}.stats-list-header{font-size:1.4rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.8rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:1px}.stats-unknown .stats-list-header{color:#fc8181}.stats-known .stats-list-header{color:#68d391}.stats-count{background:#ffffff1a;padding:2px 8px;border-radius:12px;font-size:.9rem;color:#fff}.stats-list{list-style:none;padding:0;margin:0}.stats-item{display:flex;align-items:center;gap:12px;margin-bottom:.8rem;padding:10px 15px;background:#ffffff0d;border-radius:6px;transition:background .2s,transform .2s;border-left:4px solid transparent}.stats-audio-btn{background:none;border:none;color:#cbd5e0;cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .2s}.stats-item:hover{background:#ffffff1a;transform:translate(4px)}.stats-unknown .stats-item{border-left-color:#fc8181}.stats-known .stats-item{border-left-color:#68d391}.stats-audio-btn{background:#ffffff1a;border:none;border-radius:50%;color:#cbd5e0;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.stats-audio-btn:hover{background:#4fd1c5;color:#fff;transform:scale(1.1)}.stats-audio-btn svg{width:16px;height:16px;fill:currentColor}.stats-text{font-size:1.05rem;color:#e2e8f0;line-height:1.4}.stats-buttons{display:flex;justify-content:center;margin-top:2rem}