@import"https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Poppins:wght@300;400;600;700&display=swap";body{font-family:Poppins,sans-serif;overflow:hidden}.login-container{height:100vh;background:linear-gradient(135deg,#2d3748,#4fd1c7,#68d391);background-size:300% 300%;animation:gradientShift 12s ease infinite;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}.animation-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.circle{position:absolute;border-radius:50%;opacity:.1;animation:float 6s ease-in-out infinite}.circle-1{width:200px;height:200px;background:linear-gradient(45deg,#4fd1c7,#68d391);top:10%;left:10%;animation-delay:0s;animation-duration:8s}.circle-2{width:150px;height:150px;background:linear-gradient(45deg,#f6d55c,#4fd1c7);top:60%;right:15%;animation-delay:2s;animation-duration:10s}.circle:before,.circle:after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:#fff6;animation:sparkle 4s ease-in-out infinite}.circle:before{top:20%;left:20%;animation-delay:1s}.circle:after{bottom:20%;right:20%;animation-delay:2s}@keyframes sparkle{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.logo{margin-bottom:40px;position:relative;z-index:10}.logo-icon{display:flex;justify-content:center;gap:8px;margin-bottom:15px}.letter,.duels-letter{font-family:Fredoka One,cursive;font-size:3.5rem;font-weight:400;text-shadow:4px 4px 8px rgba(0,0,0,.3);cursor:default;transition:all .3s ease}.letter{animation:subtleFloat 3s ease-in-out infinite;animation-delay:calc(var(--i) * .15s)}.letter:nth-child(1){--i: 0;color:#f6d55c}.letter:nth-child(2){--i: 1;color:#68d391}.letter:nth-child(3){--i: 2;color:#fff}.letter:nth-child(4){--i: 3;color:#f6d55c}.letter:nth-child(5){--i: 4;color:#fff}.duels-letter{animation:subtleFloat 3s ease-in-out infinite;animation-delay:calc(var(--i) * .15s + .75s)}.duels-letter:nth-child(1){--i: 0;color:#68d391}.duels-letter:nth-child(2){--i: 1;color:#f6d55c}.duels-letter:nth-child(3){--i: 2;color:#fff}.duels-letter:nth-child(4){--i: 3;color:#68d391}.duels-letter:nth-child(5){--i: 4;color:#f6d55c}@keyframes subtleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.letter:hover,.duels-letter:hover{transform:scale(1.1)!important;animation-play-state:paused}.login-form{padding:60px 50px;position:relative;z-index:10;animation:formPulse 6s ease-in-out infinite;min-width:420px;max-width:520px;margin:0 auto;border-radius:18px}@keyframes formPulse{0%,to{transform:scale(1);box-shadow:0 20px 40px #2d374833}50%{transform:scale(1.01);box-shadow:0 25px 50px #2d374840}}.input-group{position:relative;margin-bottom:25px;animation:slideInLeft .6s ease-out}.input-group:nth-child(2){animation-delay:.2s}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}.input-group i{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#4fd1c7;font-size:1.2rem;z-index:2;animation:iconFloat 4s ease-in-out infinite}.input-group:nth-child(2) i{color:#68d391;animation-delay:2s}@keyframes iconFloat{0%,to{transform:translateY(-50%) rotate(0)}50%{transform:translateY(-50%) rotate(5deg)}}.input-group input{font-family:Fredoka One,cursive;font-size:1.5rem;padding:28px 20px 28px 60px;border-radius:12px;width:100%;border:3px solid transparent;transition:all .3s ease;position:relative}.input-group input:focus{outline:none;border-color:#4fd1c7;background:#fff;transform:scale(1.03);box-shadow:0 10px 30px #4fd1c74d}.input-group:nth-child(2) input:focus{border-color:#68d391;box-shadow:0 10px 30px #68d3914d}.input-group input::placeholder{color:#6c757d;font-weight:400}.btn-group{display:flex;flex-direction:column;gap:5px;animation:slideInRight .6s ease-out;animation-delay:.4s}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.primary-btn,.primary-btn-disabled,.secondary-btn{width:100%;padding:24px 30px;border:none;border-radius:12px;font-size:1.3rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;font-family:Fredoka One,cursive;font-weight:300}.primary-btn{background:linear-gradient(135deg,#37b3a8,#39724f);color:#fff;box-shadow:0 10px 25px #4fd1c766}.primary-btn-disabled{background:linear-gradient(135deg,#4fd1c7,#40cc76);opacity:.6;color:#fff;box-shadow:0 10px 25px #4fd1c766;cursor:not-allowed}.primary-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 15px 35px #4fd1c780;animation:buttonWiggle .6s ease-in-out infinite}.secondary-btn{background:linear-gradient(135deg,#0fafa2,#20b85a);color:#fff;box-shadow:0 10px 25px #4fd1c766}.secondary-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 15px 35px #f6d55c80;animation:buttonWiggle .6s ease-in-out infinite}@keyframes buttonWiggle{0%,to{transform:translateY(-3px) scale(1.02) rotate(0)}50%{transform:translateY(-3px) scale(1.02) rotate(1deg)}}.primary-btn:before,.secondary-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.primary-btn:hover:before,.secondary-btn:hover:before{left:100%}.divider{text-align:center;color:#2d3748;font-weight:500;position:relative}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:40%;height:2px;background:linear-gradient(90deg,transparent,#4fd1c7,transparent)}.divider:before{left:0}.divider:after{right:0}@media (max-width: 768px){.login-container{padding:20px}.logo-icon{flex-wrap:wrap;gap:5px}.letter,.duels-letter{font-size:2.5rem}.login-form{min-width:90vw;max-width:98vw;padding:30px 10px}.input-group input{font-size:1.1rem;padding:18px 12px 18px 48px}}.login-form:hover{animation:none}.primary-btn i,.secondary-btn i{animation:iconFloat 3s ease-in-out infinite}.invalid-msg{color:red;margin:5px}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.room-container{min-height:100vh;background:linear-gradient(135deg,#2d3748,#4fd1c7,#68d391);background-size:300% 300%;animation:gradientShift 12s ease infinite;padding:20px;font-family:Poppins,sans-serif;position:relative;overflow-x:hidden}.waiting-for-host{text-align:center;font-size:1.2rem;color:#fff;padding:18px 28px;border-radius:14px;margin:10px auto 0;max-width:400px;font-family:Fredoka One,cursive;animation:waitingBounce 3s infinite}@keyframes waitingBounce{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}.room-container:before,.room-container:after{content:"";position:absolute;border-radius:50%;background:#ffffff1a;animation:float 8s ease-in-out infinite;pointer-events:none}.room-container:before{width:300px;height:300px;top:10%;right:-100px;animation-delay:0s}.room-container:after{width:200px;height:200px;bottom:10%;left:-50px;animation-delay:4s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(180deg)}}.room-header{text-align:center;margin-bottom:40px;animation:slideDown .6s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.room-header h1{font-family:Fredoka One,cursive;font-size:3rem;color:#fff;text-shadow:3px 3px 6px rgba(0,0,0,.3);margin-bottom:20px;animation:subtleFloat 3s ease-in-out infinite}@keyframes subtleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.room-code-container{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:25px;box-shadow:0 15px 35px #2d374833;border:2px solid rgba(255,255,255,.3);display:inline-block;animation:formPulse 6s ease-in-out infinite}@keyframes formPulse{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}.room-code-container p{font-size:1.1rem;color:#2d3748;margin-bottom:15px;font-weight:600}.room-code-display{display:flex;align-items:center;gap:15px;justify-content:center}.room-code-display span{font-family:Fredoka One,cursive;font-size:2rem;color:#4fd1c7;background:#4fd1c71a;padding:10px 20px;border-radius:15px;border:2px solid #4fd1c7;letter-spacing:2px;animation:codeGlow 4s ease-in-out infinite}@keyframes codeGlow{0%,to{box-shadow:0 0 10px #4fd1c74d}50%{box-shadow:0 0 20px #4fd1c799}}.copy-btn{background:linear-gradient(135deg,#4fd1c7,#68d391);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem;box-shadow:0 5px 15px #4fd1c766}.copy-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px #4fd1c780}.copy-btn.copied{background:linear-gradient(135deg,#68d391,#f6d55c);animation:copySuccess .5s ease-out}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.players-section{max-width:800px;margin:0 auto 40px;animation:slideUp .8s ease-out;animation-delay:.2s;animation-fill-mode:both}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.players-section h2{font-family:Fredoka One,cursive;font-size:2rem;color:#fff;text-align:center;margin-bottom:30px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.players-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-height:400px;overflow-y:auto;padding:20px;background:#ffffff1a;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.players-list::-webkit-scrollbar{width:8px}.players-list::-webkit-scrollbar-track{background:#ffffff1a;border-radius:10px}.players-list::-webkit-scrollbar-thumb{background:#4fd1c7;border-radius:10px}.player-card{background:#fffffff2;border-radius:18px;padding:20px;display:flex;align-items:center;gap:15px;box-shadow:0 10px 25px #2d374826;border:2px solid rgba(255,255,255,.3);transition:all .3s ease;animation:playerCardSlide .5s ease-out;animation-delay:calc(var(--index) * .1s);animation-fill-mode:both;position:relative;overflow:hidden}.player-card:nth-child(1){--index: 0}.player-card:nth-child(2){--index: 1}.player-card:nth-child(3){--index: 2}.player-card:nth-child(4){--index: 3}.player-card:nth-child(5){--index: 4}.player-card:nth-child(6){--index: 5}@keyframes playerCardSlide{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.player-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 15px 35px #2d374840}.player-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(79,209,199,.1),transparent);transition:left .5s ease}.player-card:hover:before{left:100%}@keyframes avatarPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.player-name{font-size:1.1rem;font-weight:600;color:#2d3748;flex-grow:1;font-family:Fredoka One,cursive;font-weight:300}.host-badge{background:linear-gradient(135deg,#f6d55c);color:#2d3748;padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;box-shadow:0 3px 10px #f6d55c66;animation:hostBadgeShine 2s ease-in-out infinite}@keyframes hostBadgeShine{0%,to{box-shadow:0 3px 10px #f6d55c66}50%{box-shadow:0 5px 20px #f6d55c99}}.empty-state{grid-column:1 / -1;text-align:center;padding:60px 20px;color:#fffc;animation:fadeIn 1s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.empty-icon{font-size:4rem;margin-bottom:20px;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-state p{font-size:1.2rem;font-weight:500}.action-section{text-align:center;max-width:400px;margin:0 auto;animation:slideUp 1s ease-out;animation-delay:.4s;animation-fill-mode:both}.play-button{background:linear-gradient(135deg,#fff,#fff);color:#00b6ad;border:3px solid #00b6ad;padding:10px 20px;border-radius:25px;font-size:2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 30px #4fd1c766;font-family:Fredoka One,cursive;font-weight:50;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.play-button:not(:disabled):hover{transform:translateY(-3px) scale(1.05);box-shadow:0 15px 40px #4fd1c799;animation:buttonWiggle .6s ease-in-out infinite}@keyframes buttonWiggle{0%,to{transform:translateY(-3px) scale(1.05) rotate(0)}50%{transform:translateY(-3px) scale(1.05) rotate(1deg)}}.play-button:disabled{opacity:.2;cursor:not-allowed;transform:none}.play-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.play-button:not(:disabled):hover:before{left:100%}.min-players-warning{margin-top:20px;color:#f6d55c;font-weight:600;font-size:1.1rem;text-shadow:1px 1px 2px rgba(0,0,0,.3);animation:warningPulse 2s ease-in-out infinite}@keyframes warningPulse{0%,to{opacity:.8}50%{opacity:1}}@media (max-width: 768px){.room-container{padding:15px}.room-header h1{font-size:2.5rem}.room-code-display{flex-direction:column;gap:10px}.room-code-display span{font-size:1.5rem}.players-list{grid-template-columns:1fr;padding:15px}.player-card{padding:15px}.players-section h2{font-size:1.5rem}.play-button{padding:15px 30px;font-size:1.1rem}}@media (max-width: 480px){.room-header h1{font-size:2rem}.room-code-container{padding:20px}.player-card{gap:10px}.player-avatar{width:40px;height:40px}.avatar-placeholder{width:24px;height:24px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;overflow-x:hidden}.game-container{min-height:100vh;background:linear-gradient(135deg,#2d3748,#4fd1c7,#68d391);background-size:300% 300%;animation:gradientShift 12s ease infinite;padding:20px;display:flex;flex-direction:column;position:relative;overflow:hidden}.game-container:before,.game-container:after{content:"";position:absolute;border-radius:50%;opacity:.1;animation:float 6s ease-in-out infinite;pointer-events:none}.game-container:before{width:200px;height:200px;background:linear-gradient(45deg,#4fd1c7,#68d391);top:10%;left:10%;animation-delay:0s;animation-duration:8s}.game-container:after{width:150px;height:150px;background:linear-gradient(45deg,#f6d55c,#4fd1c7);top:60%;right:15%;animation-delay:2s;animation-duration:10s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-30px) rotate(120deg)}66%{transform:translateY(20px) rotate(240deg)}}.player-info{position:absolute;top:20px;left:20px;font-family:Fredoka One,cursive;font-size:1.5rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);z-index:20;animation:textGlow 4s ease-in-out infinite}@keyframes textGlow{0%,to{text-shadow:2px 2px 4px rgba(0,0,0,.3)}50%{text-shadow:2px 2px 8px rgba(0,0,0,.5)}}.opponents-section{background:transparent;padding:15px 20px;margin-bottom:20px;position:relative;z-index:10;height:50px}@keyframes containerPulse{0%,to{transform:scale(1);box-shadow:0 15px 35px #2d374833}50%{transform:scale(1.005);box-shadow:0 20px 40px #2d374840}}.opponents-section h3{font-family:Fredoka One,cursive;font-size:1.8rem;color:#2d3748;text-align:center;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.1);animation:titleFloat 3s ease-in-out infinite}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.opponents-container{display:flex;gap:20px;flex-wrap:wrap;flex-direction:column;max-height:100vh}.opponent-board{background:#fffc;border-radius:15px;padding:8px;max-width:180px;box-shadow:0 8px 20px #2d374826;border:2px solid rgba(79,209,199,.3);transition:all .3s ease;animation:boardFloat 4s ease-in-out infinite}.opponent-board.has-won{border:3px solid #4caf50;background-color:#e8f5e9;box-shadow:0 0 10px #4caf50;transition:.3s,border .3s,box-shadow .3s}.opponent-board:nth-child(odd){animation-delay:.5s}@keyframes boardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.opponent-board:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 15px 30px #4fd1c74d;border-color:#4fd1c7}.opponent-username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:600;font-size:1.1rem;color:#2d3748;text-align:center;border-radius:10px;color:#333;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.opponent-row{display:flex;gap:3px;margin-bottom:3px;justify-content:center}.opponent-square{width:25px;height:25px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.8rem;transition:all .3s ease;animation:squareShimmer 2s ease-in-out infinite}@keyframes squareShimmer{0%,to{opacity:1}50%{opacity:.8}}.opponent-square.green{background:#00d600;color:#fff;border:3px solid rgba(0,214,0,.5);box-shadow:0 2px 8px #00d6004d}.opponent-square.yellow{background:#fada69;color:#2d3748;border:3px solid rgba(250,218,105,.5);box-shadow:0 2px 8px #fada694d}.opponent-square.gray{background:#6c757d;color:#fff;border:3px solid rgba(108,117,125,.5);box-shadow:0 2px 8px #6c757d4d}.opponent-square.empty{background:#fff9;border:2px solid rgba(79,209,199,.3);box-shadow:inset 0 2px 4px #0000001a}.empty-state{text-align:center;padding:40px;color:#6c757d;animation:pulseGlow 3s ease-in-out infinite}@keyframes pulseGlow{0%,to{opacity:.7}50%{opacity:1}}.empty-icon{font-size:3rem;margin-bottom:15px;animation:iconBounce 2s ease-in-out infinite}@keyframes iconBounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.game-main{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:30px;padding:40px;box-shadow:0 20px 40px #2d374833;border:3px solid rgba(255,255,255,.3);position:relative;z-index:10;animation:mainGamePulse 8s ease-in-out infinite;max-width:600px;margin:0 auto}@keyframes mainGamePulse{0%,to{transform:scale(1);box-shadow:0 20px 40px #2d374833}50%{transform:scale(1.01);box-shadow:0 25px 50px #2d374840}}.game-status{text-align:center;display:flex;align-items:center;justify-content:center}.win-message{font-family:Fredoka One,cursive;font-size:2rem;background:linear-gradient(135deg,#68d391,#f6d55c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:celebrationBounce 1s ease-in-out infinite;text-shadow:0 0 20px rgba(104,211,145,.5)}@keyframes celebrationBounce{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(2deg)}}.spell-check-error{color:#e53e3e;font-weight:600;font-size:1.1rem;background:#e53e3e1a;padding:10px 20px;border-radius:15px;border:2px solid rgba(229,62,62,.3);animation:errorShake .5s ease-in-out}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.game-over-message{font-weight:600;font-size:1.2rem;color:#2d3748;background:#6c757d1a;padding:15px 25px;border-radius:20px;border:2px solid rgba(108,117,125,.3);animation:gameOverFade 2s ease-in-out infinite}@keyframes gameOverFade{0%,to{opacity:.8}50%{opacity:1}}.game-board{display:flex;flex-direction:column;gap:15px;align-items:center}.play-again-container{position:fixed;right:20px;bottom:20px;z-index:100}.play-again{padding:12px 30px;background:linear-gradient(135deg,#008cff,#f0a);color:#fff;border:none;border-radius:30px;font-size:1.1rem;font-weight:600;font-family:Poppins,sans-serif;cursor:pointer;box-shadow:0 6px 20px #4fd1c766;transition:all .3s ease;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:1px}.play-again:hover{transform:translateY(-3px);box-shadow:0 10px 25px #4fd1c799;animation:buttonPulse 1.5s infinite}.play-again:active{transform:translateY(1px);box-shadow:0 4px 15px #4fd1c766}.play-again:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.3),transparent);transform:translate(-100%);transition:transform .6s ease}.play-again:hover:after{transform:translate(100%)}.play-again.winner{background:linear-gradient(135deg,#f6d55c,#68d391);animation:winnerGlow 2s infinite alternate}.play-again.winner:before{content:"✨";position:absolute;top:-8px;right:-8px;font-size:1rem;animation:sparkle 2s infinite}@keyframes buttonPulse{0%,to{transform:translateY(-3px) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}@keyframes winnerGlow{0%{box-shadow:0 0 15px #f6d55c80}to{box-shadow:0 0 30px #68d391cc}}@keyframes sparkle{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.3);opacity:1}to{transform:scale(1);opacity:.8}}.square_single_row{display:flex;gap:8px;animation:rowSlideIn .5s ease-out}.square_single_row:nth-child(n){animation-delay:calc(.1s * var(--row-index, 0))}@keyframes rowSlideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}.square,.square-green,.square-yellow,.square-gray{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;font-family:Poppins,sans-serif;cursor:pointer}.square{background:#fffc;border:3px solid rgba(79,209,199,.4);color:#2d3748;box-shadow:inset 0 2px 8px #0000001a}.square-green{background:#00d600;color:#fff;border:3px solid rgba(0,214,0,.5);box-shadow:0 8px 20px #00d60066;animation:greenGlow 2s ease-in-out infinite}.square-yellow{background:#fada69;color:#2d3748;border:3px solid rgba(250,218,105,.5);box-shadow:0 8px 20px #fada6966;animation:yellowGlow 2s ease-in-out infinite}.square-gray{background:#6c757d;color:#fff;border:3px solid rgba(108,117,125,.5);box-shadow:0 8px 20px #6c757d66;animation:grayGlow 2s ease-in-out infinite}@keyframes greenGlow{0%,to{box-shadow:0 8px 20px #00d60066}50%{box-shadow:0 12px 30px #00d60099}}@keyframes yellowGlow{0%,to{box-shadow:0 8px 20px #fada6966}50%{box-shadow:0 12px 30px #fada6999}}@keyframes grayGlow{0%,to{box-shadow:0 8px 20px #6c757d66}50%{box-shadow:0 12px 30px #6c757d99}}@media (max-width: 768px){.game-container{padding:15px}.player-info{font-size:1.3rem;top:15px;left:15px}.opponents-section{margin-top:50px}.opponents-container{flex-direction:column;align-items:center}.opponent-board{min-width:280px}.game-main{padding:25px}.square,.square-green,.square-yellow,.square-gray{width:50px;height:50px;font-size:1.3rem}.square_single_row{gap:6px}.win-message{font-size:1.5rem}}@media (max-width: 480px){.opponents-section{padding:10px 15px;margin-top:45px}.opponent-board{min-width:250px;padding:12px}.square,.square-green,.square-yellow,.square-gray{width:45px;height:45px;font-size:1.2rem}.game-main{padding:10px}.player-info{font-size:1.2rem;top:10px;left:10px}}.square-green:before,.square-yellow:before{content:"✨";position:absolute;top:-10px;right:-10px;font-size:.8rem;animation:sparkle 2s ease-in-out infinite;opacity:.7}@keyframes sparkle{0%,to{opacity:.7;transform:scale(1) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}}.board-container{display:flex}
