*{margin:0;padding:0;box-sizing:border-box}body{font-family:Comic Sans MS,Chalkboard SE,Arial Rounded MT Bold,cursive,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);height:100vh;display:flex;justify-content:center;align-items:center;padding:10px;overflow:hidden}#app{width:100%;max-width:800px;height:100%;margin:auto;display:flex;align-items:center;justify-content:center}main{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:10px}.game-wrapper{display:flex;flex-direction:row;gap:15px;width:100%;max-width:1000px;height:95vh;max-height:800px}.sidebar{background:#fffffff2;border-radius:20px;padding:15px;box-shadow:0 10px 30px #0003;min-width:120px;max-width:150px;display:flex;flex-direction:column;overflow-y:auto}.sidebar-title{color:#667eea;font-size:clamp(1rem,3vw,1.3rem);margin-bottom:15px;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.level-list{display:flex;flex-direction:column;gap:10px;flex:1}.level-item{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:15px;padding:12px 8px;font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:700;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #667eea4d;display:flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;position:relative}.level-item:hover:not(.locked){transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px #667eea80}.level-item:active:not(.locked){transform:translateY(-1px) scale(1.02)}.level-item.active{background:linear-gradient(135deg,#fd79a8,#e84393);box-shadow:0 6px 20px #e8439380}.level-item.completed{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);color:#2d3436}.level-item.locked{background:linear-gradient(135deg,#b2bec3,#636e72);opacity:.4;cursor:not-allowed;box-shadow:0 2px 8px #0000001a}.level-item.locked:hover{transform:none}.level-number{font-size:clamp(1rem,2.5vw,1.2rem)}.level-star{font-size:clamp(.9rem,2vw,1.1rem);animation:starTwinkle 2s ease-in-out infinite}@keyframes starTwinkle{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(180deg)}}.game-container{background:#fff;border-radius:30px;padding:clamp(10px,1.5vh,20px) clamp(15px,3vw,25px);box-shadow:0 20px 60px #0000004d;text-align:center;flex:1;display:flex;flex-direction:column;overflow-y:auto}h1{color:#667eea;font-size:clamp(1.3rem,4vw,2rem);margin-bottom:clamp(5px,1vh,10px);text-shadow:2px 2px 4px rgba(0,0,0,.1)}.progress{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:clamp(6px,1vh,10px) clamp(12px,3vw,20px);border-radius:50px;font-size:clamp(.8rem,2.5vw,1.1rem);font-weight:700;margin:clamp(5px,1vh,10px) auto;display:inline-block;box-shadow:0 5px 15px #667eea66}.win-screen{padding:clamp(10px,2vh,20px) 0;animation:slideIn .8s ease-out}.trophy{font-size:clamp(4rem,12vw,7rem);margin-bottom:clamp(8px,1.5vh,15px);animation:spinAndScale 2s ease-in-out infinite}@keyframes spinAndScale{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.1) rotate(-10deg)}75%{transform:scale(1.1) rotate(10deg)}}.win-screen h2{color:#667eea;font-size:clamp(1.8rem,6vw,3rem);margin-bottom:clamp(8px,1.5vh,15px);text-shadow:2px 2px 4px rgba(0,0,0,.1)}.win-screen p{font-size:clamp(1rem,3.5vw,1.5rem);color:#2d3436;margin-bottom:clamp(12px,2vh,20px)}.celebration-big{font-size:clamp(2rem,8vw,3.5rem);margin:clamp(10px,2vh,20px) 0;animation:celebrate 1.5s ease-in-out infinite}.emoji-container{margin:clamp(5px,1.5vh,15px) 0}.emoji{font-size:clamp(3rem,8vw,5rem);line-height:1;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.answer-container{margin:clamp(10px,1.5vh,15px) 0}.answer-boxes{display:flex;justify-content:center;gap:clamp(6px,1.5vw,10px);flex-wrap:wrap;margin:clamp(5px,1vh,10px) 0;min-height:clamp(50px,8vh,70px)}.answer-box{width:clamp(50px,10vw,70px);height:clamp(50px,10vw,70px);background:#fff;border:3px dashed #cbd5e0;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;color:#2d3436;transition:all .3s ease;box-shadow:inset 0 2px 8px #0000001a;-webkit-user-select:none;user-select:none}.answer-box.filled{border-style:solid;border-color:transparent;background:transparent;box-shadow:none}.answer-box.correct{background:transparent;border-color:transparent}.letter-in-box{width:100%;height:100%;background:linear-gradient(135deg,#ffeaa7,#fdcb6e);border:3px solid #2d3436;border-radius:15px;display:flex;align-items:center;justify-content:center;cursor:grab;transition:all .2s ease;box-shadow:0 5px 15px #0003;touch-action:none}.letter-in-box:active{cursor:grabbing;transform:scale(.95)}.answer-box.correct .letter-in-box{background:linear-gradient(135deg,#55efc4,#00b894);border-color:#00b894;animation:correctPulse .6s ease-in-out}.available-letters-section{margin:clamp(10px,1.5vh,15px) 0 clamp(5px,1vh,10px) 0;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:15px;padding:clamp(10px,1.5vh,15px);border:2px solid rgba(102,126,234,.3)}.section-label{font-size:clamp(.85rem,2.5vw,1.1rem);color:#667eea;font-weight:700;margin-bottom:clamp(8px,1vh,12px);text-align:center}.available-letters{display:flex;justify-content:center;gap:clamp(6px,1.5vw,10px);flex-wrap:wrap;min-height:clamp(55px,9vh,75px);padding:clamp(8px,1.5vh,12px);border-radius:12px;background:#ffffff80;border:2px dashed rgba(102,126,234,.3)}.letter-box{width:clamp(50px,10vw,70px);height:clamp(50px,10vw,70px);background:linear-gradient(135deg,#ffeaa7,#fdcb6e);border:3px solid #2d3436;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;color:#2d3436;cursor:grab;transition:all .3s ease;box-shadow:0 5px 15px #0003;-webkit-user-select:none;user-select:none;touch-action:none}.letter-box:active{cursor:grabbing;transform:scale(.95)}.letter-box:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 10px 25px #0000004d}.letter-box.dragging,.letter-in-box.dragging{opacity:0}.ghost-letter{position:fixed;width:70px;height:70px;background:linear-gradient(135deg,#ffeaa7,#fdcb6e);border:3px solid #2d3436;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:#2d3436;pointer-events:none;z-index:9999;opacity:.9;box-shadow:0 10px 30px #0006;transition:none;font-family:Comic Sans MS,Chalkboard SE,Arial Rounded MT Bold,cursive,sans-serif}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.success-message{margin:clamp(8px,1vh,12px) 0;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.celebration{font-size:clamp(1.5rem,5vw,2.5rem);margin-bottom:6px;animation:celebrate 1s ease-in-out infinite}@keyframes celebrate{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.2) rotate(-10deg)}75%{transform:scale(1.2) rotate(10deg)}}.success-message p{font-size:clamp(.9rem,3vw,1.2rem);color:#00b894;font-weight:700}.next-button{background:linear-gradient(135deg,#fd79a8,#e84393);color:#fff;border:none;border-radius:50px;padding:clamp(8px,1.2vh,12px) clamp(20px,4vw,35px);font-size:clamp(.85rem,2.5vw,1.1rem);font-weight:700;cursor:pointer;box-shadow:0 5px 15px #e8439366;transition:all .3s ease;font-family:inherit;margin-top:clamp(6px,1vh,10px)}.next-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #e8439380}.next-button:active{transform:translateY(-1px)}@media (max-width: 768px){.game-wrapper{flex-direction:column;max-height:95vh;gap:10px}.sidebar{min-width:100%;max-width:100%;flex-direction:row;padding:10px;max-height:100px}.sidebar-title{display:none}.level-list{flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center}.level-item{min-width:55px;padding:10px 8px}h1{font-size:2rem}.progress{font-size:1.2rem;padding:12px 25px}.trophy{font-size:8rem}.win-screen h2{font-size:2.5rem}.win-screen p{font-size:1.5rem}.celebration-big{font-size:3.5rem}.emoji{font-size:7rem}.letter-box,.answer-box{width:80px;height:80px;font-size:2.5rem}.section-label{font-size:1.2rem}.success-message p{font-size:1.5rem}.celebration{font-size:3rem}.next-button{padding:15px 40px;font-size:1.2rem}}@media (max-width: 480px){.game-wrapper{gap:8px}.sidebar{padding:8px;max-height:80px}.level-list{gap:6px}.level-item{min-width:45px;padding:8px 6px;font-size:.9rem}.game-container{padding:15px}h1{font-size:1.5rem}.progress{font-size:1rem;padding:10px 20px}.trophy{font-size:6rem}.win-screen h2{font-size:2rem}.win-screen p{font-size:1.2rem}.celebration-big{font-size:2.5rem}.emoji{font-size:5rem}.letter-box,.answer-box{width:60px;height:60px;font-size:2rem}.answer-boxes,.available-letters{gap:10px}.available-letters-section{padding:15px}.section-label{font-size:1rem}}