.aquarium-bg{background:linear-gradient(180deg,#1860a3,#0c335b);position:relative;overflow:hidden}.bubbles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none}.bubble{position:absolute;bottom:-100px;width:40px;height:40px;background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:50%;animation:float 10s infinite ease-in}.bubble:after{content:"";position:absolute;top:15%;left:15%;width:25%;height:25%;background:#fff6;border-radius:50%}.bubble:nth-child(1){left:10%;width:80px;height:80px;animation-duration:8s}.bubble:nth-child(2){left:20%;width:30px;height:30px;animation-duration:5s;animation-delay:1s}.bubble:nth-child(3){left:35%;width:50px;height:50px;animation-duration:7s;animation-delay:2s}.bubble:nth-child(4){left:50%;width:20px;height:20px;animation-duration:11s;animation-delay:0s}.bubble:nth-child(5){left:65%;width:60px;height:60px;animation-duration:6s;animation-delay:1s}.bubble:nth-child(6){left:80%;width:40px;height:40px;animation-duration:9s;animation-delay:3s}.bubble:nth-child(7){left:90%;width:90px;height:90px;animation-duration:12s;animation-delay:2s}.bubble:nth-child(8){left:5%;width:25px;height:25px;animation-duration:6s;animation-delay:4s}.bubble:nth-child(9){left:45%;width:15px;height:15px;animation-duration:8s;animation-delay:2s}@keyframes float{0%{transform:translateY(0) scale(1) translate(0);opacity:0}10%{opacity:1}50%{transform:translateY(-60vh) scale(1.2) translate(20px);opacity:1}90%{opacity:1}to{transform:translateY(-120vh) scale(1.5) translate(-20px);opacity:0}}.z-index-1{z-index:1}.text-shadow-sm{text-shadow:2px 2px 5px rgba(0,0,0,.4)}.text-white-75{color:#ffffffe6!important}.game-container{max-width:1200px;margin:0 auto}.word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:100px;padding:20px;background-color:#ffffff1a;border-radius:12px;border:1px dashed rgba(255,255,255,.4)}.draggable-label{padding:8px 16px;border-radius:4px;font-weight:700;font-size:.95rem;cursor:grab;text-align:center;box-shadow:0 4px 6px #0000004d;user-select:none;transition:transform .2s,box-shadow .2s,opacity .2s;border:1px solid rgba(0,0,0,.1);-webkit-touch-callout:none}.draggable-label:active{cursor:grabbing;transform:scale(1.05)}.draggable-label.dragging{opacity:.4}.drop-board{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%}@media (max-width: 1024px){.drop-board{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.drop-board{grid-template-columns:repeat(2,1fr);gap:15px}}@media (max-width: 480px){.drop-board{grid-template-columns:1fr;gap:15px}.draggable-label{font-size:.85rem;padding:6px 12px}}.drop-card{background:#fff;padding:12px;border-radius:8px;box-shadow:0 4px 12px #00000040;display:flex;flex-direction:column;gap:12px}.dropzone{min-height:55px;border:3px dashed #ced4da;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;transition:all .3s;box-sizing:border-box;position:relative}.placeholder-text{color:#adb5bd;font-weight:600;font-size:.9rem;pointer-events:none}.dropzone.drag-over{background:#e3f2fd;border-color:#75c2f4;transform:scale(1.02)}.dropzone.correct{border:3px solid #28a745;background:transparent;padding:0}.resolved-card{opacity:.85;transform:scale(.96);transition:all .5s ease-in-out}.dropzone .draggable-label{width:100%;height:100%;margin:0;box-shadow:none;border-radius:4px;display:flex;align-items:center;justify-content:center;pointer-events:none}.dropzone.shake-error{border-color:#dc3545;background:#f8d7da;animation:shake .5s}.img-container{flex-grow:1;display:flex;align-items:center;justify-content:center;background-color:#f1f3f5;border-radius:4px;padding:10px}.img-container img{width:100%;height:auto;max-height:200px;object-fit:contain}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(0) rotate(0)}}
