*{margin:0;padding:0;box-sizing:border-box}html{height:100%;min-height:100vh;min-height:-webkit-fill-available}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#8b0000,#dc143c,#c71585,indigo,#191970);background-size:400% 400%;background-attachment:fixed;animation:gradientShift 15s ease infinite;min-height:100vh;min-height:-webkit-fill-available;height:100%;display:flex;align-items:center;justify-content:center;color:#fff}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#app{width:100%;max-width:1400px;padding:20px}.screen{display:none;text-align:center}.screen.active{display:block}.hidden{display:none!important}h1{font-size:3rem;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.3);animation:titleFloat 3s ease-in-out infinite;background:linear-gradient(45deg,#fff,#ffe066,#fff);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titleFloat 3s ease-in-out infinite,shimmer 2s linear infinite}.game-description{font-size:1.5rem;margin-bottom:2rem;color:#c8c8becc;text-shadow:1px 1px 2px rgba(0,0,0,.3);max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}h2{font-size:2rem;margin-bottom:1.5rem}button{background:linear-gradient(135deg,#ff6b9d,#fec163);border:3px solid rgba(255,255,255,.6);color:#fff;padding:12px 24px;font-size:1.1rem;border-radius:12px;cursor:pointer;transition:all .3s;margin:8px;box-shadow:0 4px 15px #0000004d;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3);position:relative;overflow:clip}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}button:hover:before{left:100%}button:hover{background:linear-gradient(135deg,#fec163,#ff6b9d);transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px #0006}button:active{transform:translateY(-1px) scale(1.02)}input{padding:12px;font-size:1.1rem;border:2px solid rgba(255,255,255,.4);border-radius:8px;background:#ffffff1a;color:#fff;margin:8px}input::placeholder{color:#fff9}.code-display{background:linear-gradient(135deg,#0000004d,#0003);padding:20px;border-radius:16px;margin:20px auto;width:100%;max-width:600px;display:flex;flex-direction:column;gap:12px;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 20px #0000004d;animation:pulse 2s ease-in-out infinite}.code-display input{word-break:break-all;white-space:normal;overflow-wrap:break-word}.code-display>div{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 4px 20px #0000004d}50%{transform:scale(1.02);box-shadow:0 6px 25px #ffc10766}}#game-code{font-size:1.2rem;font-weight:700;letter-spacing:1px;word-break:break-all;font-family:monospace}#countdown-number{font-size:8rem;font-weight:700;background:linear-gradient(45deg,#ff6b9d,#fec163,#68d8d6,#c779d0);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:countdownPulse 1s infinite,rainbowShift 3s linear infinite;text-shadow:0 0 30px rgba(255,255,255,.5)}@keyframes countdownPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes rainbowShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#target-word-display{text-align:center;margin-bottom:20px;padding:20px;background:linear-gradient(135deg,#0000004d,#0003);border-radius:16px;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 20px #0000004d;max-width:500px;margin-left:auto;margin-right:auto;position:relative;overflow:hidden}#target-word-display.word-change-lightning{animation:displayShake .8s ease-out,flashBackground .8s ease-out}#target-word-display.word-change-lightning:before{content:"";position:absolute;top:-100%;left:15%;width:12px;height:120%;background:linear-gradient(180deg,transparent 0%,#FFF 15%,#FFD700 40%,#FF4500 50%,#FFD700 60%,#FFF 85%,transparent 100%);box-shadow:0 0 50px gold,0 0 100px #ff4500,0 0 150px #fff;animation:lightning .8s ease-out;z-index:10;filter:blur(2px)}#target-word-display.word-change-lightning:after{content:"";position:absolute;top:-100%;right:25%;width:8px;height:120%;background:linear-gradient(180deg,transparent 0%,#FFF 15%,#FFD700 40%,#FF4500 50%,#FFD700 60%,#FFF 85%,transparent 100%);box-shadow:0 0 40px gold,0 0 80px #ff4500,0 0 120px #fff;animation:lightning .8s ease-out .15s;z-index:10;filter:blur(1.5px)}@keyframes lightning{0%{top:-100%;opacity:0}15%{opacity:1;filter:brightness(2)}35%{top:40%;opacity:.6}50%{opacity:1.5;filter:brightness(3)}70%{top:80%;opacity:.8}85%{opacity:1}to{top:220%;opacity:0}}@keyframes displayShake{0%,to{transform:translate(0)}10%{transform:translate(-8px,2px) rotate(-1deg)}20%{transform:translate(8px,-2px) rotate(1deg)}30%{transform:translate(-6px,3px) rotate(-.5deg)}40%{transform:translate(6px,-3px) rotate(.5deg)}50%{transform:translate(-4px,2px)}60%{transform:translate(4px,-2px)}70%{transform:translate(-2px,1px)}80%{transform:translate(2px,-1px)}90%{transform:translate(-1px)}}@keyframes flashBackground{0%,to{background:linear-gradient(135deg,#0000004d,#0003);box-shadow:0 4px 20px #0000004d}15%,50%{background:linear-gradient(135deg,#ffd70066,#ff45004d);box-shadow:0 0 80px #ffd700e6,0 0 120px #ffffffb3}25%,65%{background:linear-gradient(135deg,#0000004d,#0003)}}.word-label{font-size:1.2rem;font-weight:700;margin-bottom:15px;color:#ffffffe6;text-transform:uppercase;letter-spacing:2px}#target-word-letters{display:flex;gap:10px;justify-content:center}.target-letter{width:50px;height:50px;border:3px solid rgba(255,255,255,.4);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;background:#ffffff1a;color:#ffffff80;transition:all .5s;box-shadow:inset 0 2px 5px #0003}.target-letter.revealed{background:linear-gradient(135deg,#4bc0c8,#68d8d6);color:#fff;border-color:#4bc0c8;box-shadow:0 0 25px #4bc0c8b3;animation:revealPop .5s ease-out}@keyframes revealPop{0%{transform:scale(.5) rotate(-10deg);opacity:0}50%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}.main-game-area{display:flex;justify-content:center;align-items:center;gap:20px;margin:20px 0}#player-board{background:linear-gradient(135deg,#0006,#0003);padding:30px;border-radius:20px;min-width:400px;box-shadow:0 8px 32px #0006;border:2px solid rgba(255,255,255,.2);transition:all .3s}.player-score{font-size:1.5rem;font-weight:700;color:#ffffffe6;text-align:center;margin-bottom:20px;padding:12px;background:#ffffff1a;border-radius:12px;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 12px #0003}#player-board:hover{box-shadow:0 12px 40px #00000080;transform:translateY(-2px)}#attempts-container{margin-bottom:20px;min-height:300px;display:flex;flex-direction:column;gap:10px}.attempt-row,#current-input{display:flex;gap:8px;justify-content:center}.letter-box{width:60px;height:60px;border:3px solid rgba(255,255,255,.5);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;background:#ffffff26;box-shadow:0 4px 8px #0003;transition:all .3s}.letter-box:not(:empty){animation:popIn .2s ease-out}@keyframes popIn{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}.letter-box.correct{background:linear-gradient(135deg,#4caf50,#45a049);border-color:#4caf50;animation:flip .5s,glow 1s ease-in-out infinite;box-shadow:0 0 20px #4caf5099}.letter-box.present{background:linear-gradient(135deg,#ffc107,#ff9800);border-color:#ffc107;animation:flip .5s,glow 1s ease-in-out infinite;box-shadow:0 0 20px #ffc10799}.letter-box.absent{background:linear-gradient(135deg,#607d8b,#455a64);border-color:#607d8b;animation:flip .5s}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}@keyframes glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}.other-player-card{background:linear-gradient(135deg,#0000004d,#00000026);padding:15px;border-radius:16px;min-width:200px;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 15px #0000004d;transition:all .3s}.other-player-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0006;border-color:#fff6}.other-player-card h3{font-size:1rem;margin-bottom:10px}.other-player-attempts{display:flex;flex-direction:column;gap:5px}.mini-attempt{display:flex;gap:3px;justify-content:center}.mini-letter{width:25px;height:25px;border:2px solid rgba(255,255,255,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;background:#ffffff1a}.player-name-label{font-size:1rem;font-weight:600;color:#ffffffd9;margin-bottom:12px;padding:8px 12px;background:#0003;border-radius:8px;display:inline-block}#player-board.hit-effect{animation:hitShake .5s;box-shadow:0 0 30px #ff0000b3}@keyframes hitShake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}50%{transform:translate(10px)}75%{transform:translate(-5px)}}#round-result{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#000000f2,#000000d9);padding:40px;border-radius:20px;z-index:1000;border:3px solid rgba(255,255,255,.3);box-shadow:0 10px 50px #000000b3;min-width:300px;max-width:500px;text-align:center;animation:resultPopIn .5s ease-out}@keyframes resultPopIn{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}70%{transform:translate(-50%,-50%) scale(1.05)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}#result-text{font-size:2rem;margin-bottom:20px;background:linear-gradient(45deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#scoreboard{padding:20px}.score-item{background:linear-gradient(135deg,#0000004d,#00000026);padding:15px;margin:10px auto;border-radius:12px;max-width:400px;font-size:1.3rem;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 15px #0000004d;transition:all .3s}.score-item:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0006}#modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#modal{background:linear-gradient(135deg,#667eea,#764ba2);padding:110px 40px 40px;border-radius:20px;max-width:400px;text-align:center;box-shadow:0 10px 40px #00000080;border:3px solid rgba(255,255,255,.3);animation:modalSlideIn .3s ease-out;position:relative}@keyframes modalSlideIn{0%{transform:translateY(-50px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}#modal-message{font-size:1.3rem;margin-bottom:25px;line-height:1.6}.modal-close-btn{position:absolute;top:25px;right:25px;width:40px;height:40px;padding:0;font-size:2rem;background:linear-gradient(135deg,#ff6b9d,#fec163);border:2px solid rgba(255,255,255,.8);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;line-height:1}.modal-close-btn:hover{background:linear-gradient(135deg,#fec163,#ff6b9d);transform:scale(1.15) rotate(90deg);box-shadow:0 4px 15px #ff6b9d99}.modal-close-btn:active{transform:scale(1.05)}#modal-close-btn{background:linear-gradient(135deg,#4bc0c8,#68d8d6);min-width:120px}.join-name-row{display:block;width:100%;margin-bottom:8px}.join-name-row input{width:100%;max-width:400px;display:block;margin-left:auto;margin-right:auto}.join-code-row{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}.join-code-row input{flex:1;min-width:200px;max-width:400px}.join-code-row button{flex-shrink:0}#not-present-letters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:20px;padding:15px;background:#0003;border-radius:12px;min-height:50px;border:2px solid rgba(255,255,255,.15)}.not-present-box{width:35px;height:35px;border:2px solid rgba(96,125,139,.6);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;background:linear-gradient(135deg,#607d8b,#455a64);color:#ffffffb3;box-shadow:0 2px 6px #0000004d;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.not-present-box.highlighted{background:linear-gradient(135deg,#f44,#c00);border-color:#f44;animation:highlightPulse .5s ease-out;box-shadow:0 0 20px #f44c}@keyframes highlightPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.back-button{position:fixed;top:20px;right:20px;z-index:500;padding:10px 20px;font-size:1rem}#on-screen-keyboard{display:none;margin-top:20px;padding:8px;background:#0000004d;border-radius:12px;max-width:100%;width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.keyboard-row{display:flex;gap:4px;justify-content:center;margin-bottom:6px;width:100%}.keyboard-row:last-child{margin-bottom:0}.key-btn{flex:1;max-width:45px;min-width:32px;height:56px;padding:4px 2px;font-size:1rem;font-weight:700;border-radius:8px;background:linear-gradient(135deg,#ffffff40,#ffffff26);border:2px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;box-shadow:0 2px 8px #0003;margin:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;position:relative}.key-btn:active{transform:scale(.95);background:linear-gradient(135deg,#ffffff59,#ffffff40)}.key-btn.not-present{background:linear-gradient(135deg,#607d8b,#455a64);border-color:#607d8b;opacity:.6}.key-btn.correct{background:linear-gradient(135deg,#4caf50,#45a049);border-color:#4caf50;box-shadow:0 0 15px #4caf5099}.key-btn.present{background:linear-gradient(135deg,#ffc107,#ffb300);border-color:#ffc107;box-shadow:0 0 15px #ffc10799}.key-enter,.key-backspace{flex:1.5;max-width:68px;min-width:48px;font-size:.85rem}.key-backspace{font-size:1.3rem}.waiting-spinner{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1500;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s ease-out}.waiting-spinner.visible{opacity:1;pointer-events:auto}.spinner-content{text-align:center;animation:spinnerBounce 1s ease-in-out infinite}.spinner{width:60px;height:60px;margin:0 auto 20px;border:5px solid rgba(255,255,255,.3);border-top:5px solid #FEC163;border-right:5px solid #FF6B9D;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinnerBounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.spinner-content p{font-size:1.2rem;color:#fff;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);letter-spacing:1px}@media (max-width: 768px){body{padding:0;min-height:100vh;min-height:-webkit-fill-available}#app{padding:10px;max-width:100%}h1{font-size:2rem;margin-bottom:1rem}.game-description{font-size:1.1rem;margin-bottom:1rem;padding:0 10px}h2{font-size:1.5rem;margin-bottom:1rem}button{padding:10px 16px;font-size:.95rem;margin:5px}#countdown-number{font-size:5rem}#target-word-display{padding:12px;margin-bottom:12px}.word-label{font-size:.9rem;margin-bottom:10px}.target-letter{width:40px;height:40px;font-size:1.4rem;border-width:2px}#target-word-letters{gap:6px}.main-game-area{flex-direction:column;gap:12px;margin:12px 0}#player-board{padding:15px;min-width:auto;width:100%;max-width:100%}.player-score{font-size:1.2rem;margin-bottom:15px;padding:10px}#attempts-container{min-height:150px;gap:6px}.letter-box{width:45px;height:45px;font-size:1.4rem;border-width:2px}.attempt-row,#current-input{gap:5px}#other-players-left,#other-players-right{flex-direction:row;flex-wrap:wrap;justify-content:center}.other-player-card{min-width:150px;padding:10px}.other-player-card h3{font-size:.85rem}.mini-letter{width:20px;height:20px;font-size:.7rem}#not-present-letters{display:none}.not-present-box{width:28px;height:28px;font-size:.85rem}#round-result{padding:25px;width:90%;max-width:350px}#modal{padding:80px 20px 20px;max-width:90%}#modal-message{font-size:1.1rem}.back-button{top:10px;right:10px;padding:8px 14px;font-size:.9rem}input{font-size:1rem;padding:10px}.code-display{padding:15px;max-width:95%;gap:10px}.code-display input{font-size:.9rem;padding:10px}.code-display>div{gap:8px}.code-display button{flex:1;min-width:100px;font-size:.9rem;padding:8px 12px}#game-code{font-size:1rem}.score-item{font-size:1.2rem;padding:12px}.player-name-label{font-size:.9rem}#on-screen-keyboard{display:block;margin-top:12px;padding:6px;max-width:100%;width:calc(100vw - 20px);margin-left:auto;margin-right:auto}.key-btn{height:54px;font-size:1.05rem}.key-enter,.key-backspace{font-size:.8rem}.key-backspace{font-size:1.3rem}}@media (max-width: 480px){h1{font-size:1.6rem}.letter-box{width:38px;height:38px;font-size:1.2rem}.target-letter{width:35px;height:35px;font-size:1.2rem}#player-board{padding:12px}button:not(.key-btn){font-size:.9rem;padding:8px 14px}#on-screen-keyboard{width:calc(100vw - 16px);padding:5px;margin-top:10px}.key-btn{height:50px;font-size:.95rem;max-width:38px;min-width:28px}.keyboard-row{gap:3px;margin-bottom:5px}.key-enter,.key-backspace{max-width:58px;min-width:42px;font-size:.75rem}.key-backspace{font-size:1.15rem}}#round-result{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1e1e3cf2,#321450f2);padding:40px;border-radius:20px;border:2px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #00000080;text-align:center;z-index:1000;min-width:300px;max-width:500px;display:none}#round-result:not(.hidden){display:block!important}#round-result h2{font-size:2.5rem;margin-bottom:30px;color:#fff}#round-result #ready-btn{font-size:1.1rem;padding:12px 30px;margin:20px auto}@media (max-height: 500px) and (orientation: landscape){#on-screen-keyboard{display:block}#attempts-container{min-height:100px}#target-word-display{padding:8px;margin-bottom:8px}.main-game-area{margin:8px 0}}