*{margin:0;padding:0;box-sizing:border-box}html{height:100%;touch-action:manipulation;-webkit-overflow-scrolling:touch}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;overflow:hidden}.screen{display:flex;flex-direction:column;align-items:center;padding:20px}.hidden{display:none!important}#lobby{text-align:center}#lobby h1{font-size:2.5rem;margin-bottom:10px;text-shadow:0 0 20px rgba(255,200,100,.5)}#character-showcase{width:320px;height:80px;margin-bottom:20px;border-radius:12px;background:#2a2a4a80;box-shadow:0 4px 15px #0000004d}.menu{display:flex;flex-direction:column;gap:15px;min-width:300px}.join-section{display:flex;flex-direction:column;gap:12px;margin-top:10px}.or-divider{color:#666;font-size:.9rem;text-align:center}.quick-join{display:flex;gap:10px}.quick-join input{flex:1;text-transform:uppercase;text-align:center;font-weight:700;letter-spacing:2px}.quick-join button{flex-shrink:0}input[type=text]{padding:12px 16px;font-size:1rem;border:2px solid #4a4a6a;border-radius:8px;background:#2a2a4a;color:#fff;outline:none;transition:border-color .3s}input[type=text]:focus{border-color:#6c6cff}button{padding:12px 24px;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:transform .2s,background-color .3s;font-weight:700}button:hover{transform:translateY(-2px)}button:active{transform:translateY(0)}#btn-create,.start-btn,#btn-play-again{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}#btn-join,#btn-join-room{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff}.join-random-btn{background:linear-gradient(135deg,#ff6b35,#e55100);color:#fff;margin-top:8px;position:relative;overflow:hidden}.join-random-btn:hover{background:linear-gradient(135deg,#ff5722,#d84315);box-shadow:0 4px 15px #ff6b3566}.join-random-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.join-random-btn:hover:before{width:300px;height:300px}.play-btn{background:linear-gradient(135deg,#9c27b0,#7b1fa2);color:#fff}#btn-spectate{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff}#btn-copy{padding:8px 12px;font-size:.9rem}#room-info{display:flex;flex-direction:column;gap:20px;min-width:350px}.room-code-display{background:#2a2a4a;padding:15px;border-radius:8px;display:flex;align-items:center;gap:10px;justify-content:center}.room-code-display strong{font-size:1.5rem;color:#6c6cff;letter-spacing:2px}.invite-link{display:flex;flex-direction:column;gap:5px}.invite-link>div{display:flex;gap:8px}.invite-link input{font-size:.85rem;padding:8px;flex:1;min-width:0}.invite-link button{padding:8px 12px;font-size:.85rem;flex-shrink:0}#players-list{background:#2a2a4a;padding:15px;border-radius:8px}#players-list h3{margin-bottom:10px;color:#aaa}#players{list-style:none;display:flex;flex-direction:column;gap:8px}#players li{display:flex;align-items:center;gap:10px;padding:8px;background:#1a1a3a;border-radius:4px}.player-color{width:20px;height:20px;border-radius:4px}.player-host{font-size:.8rem;color:gold}.player-spectator{font-size:.8rem;color:#888}.room-actions{display:flex;gap:10px;justify-content:center}#game-container{position:relative;display:flex;flex-direction:column;height:100vh;padding:20px 20px 60px}#game-layout{display:flex;gap:20px;align-items:stretch;flex:1;min-height:0}#game-center{position:relative;display:flex;flex-direction:column}#game-ui{position:absolute;top:10px;left:10px;z-index:100;display:flex;gap:20px;font-size:1.2rem;text-shadow:2px 2px 4px rgba(0,0,0,.8);align-items:flex-start}#game-code-badge{background:linear-gradient(135deg,#6c6cff,#55d);padding:12px 15px;border-radius:10px;margin-bottom:15px;text-align:center;box-shadow:0 4px 15px #6c6cff4d;border:2px solid rgba(255,255,255,.15);flex-shrink:0}#game-code-badge .code-label{font-size:.7rem;color:#ffffffb3;text-transform:uppercase;letter-spacing:2px;display:block;margin-bottom:6px}#game-code-badge .code-row{display:flex;align-items:center;justify-content:center;gap:10px}#game-code-display{font-size:1.6rem;font-weight:700;color:#fff;letter-spacing:4px;text-shadow:0 2px 4px rgba(0,0,0,.3)}#btn-copy-code{background:#fff3;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:1rem;transition:background .2s,transform .2s}#btn-copy-code:hover{background:#ffffff4d;transform:scale(1.1)}#game-canvas{border:4px solid #4a4a6a;border-radius:8px;box-shadow:0 0 30px #6464ff4d;height:100%;width:auto;image-rendering:crisp-edges;image-rendering:pixelated}#leaderboard-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000f2;padding:30px;border-radius:16px;text-align:center;z-index:200;border:2px solid rgba(108,108,255,.5);max-height:85vh;max-width:90vw;overflow-y:auto;min-width:350px}#leaderboard-panel h2{margin-bottom:20px;font-size:2.5rem;color:#6c6cff;text-shadow:0 0 10px rgba(108,108,255,.5)}#leaderboard-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.leaderboard-entry{display:flex;align-items:center;padding:12px;background:linear-gradient(90deg,#6c6cff1a,#6c6cff0d);border-radius:8px;border-left:4px solid;font-size:1rem}.leaderboard-entry.first{border-left-color:gold;background:linear-gradient(90deg,#ffd70026,#ffd7000d)}.leaderboard-entry.second{border-left-color:silver;background:linear-gradient(90deg,#c0c0c026,#c0c0c00d)}.leaderboard-entry.third{border-left-color:#cd7f32;background:linear-gradient(90deg,#cd7f3226,#cd7f320d)}.leaderboard-rank{font-weight:700;font-size:1.2rem;min-width:35px;color:#aaa}.leaderboard-entry.first .leaderboard-rank{color:gold}.leaderboard-entry.second .leaderboard-rank{color:silver}.leaderboard-entry.third .leaderboard-rank{color:#cd7f32}.leaderboard-color{width:22px;height:22px;border-radius:4px;margin:0 12px;flex-shrink:0}.leaderboard-name{flex:1;text-align:left;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-score{font-size:.95rem;color:#4ecdc4;font-weight:700;min-width:90px;text-align:right}#leaderboard-buttons{display:flex;gap:10px;justify-content:center;margin-top:20px}#leaderboard-buttons.hidden{display:none}#auto-start-countdown{margin:20px 0;padding:15px;background:linear-gradient(135deg,#6c6cff33,#6c6cff1a);border:2px solid rgba(108,108,255,.5);border-radius:8px;font-size:1.1rem}#auto-start-countdown p{margin:0;color:#6c6cff;font-weight:700;animation:pulse-countdown 1s infinite}#countdown-number{font-size:1.4rem;font-weight:700;color:#4ecdc4;display:inline-block;min-width:30px;text-align:center}@keyframes pulse-countdown{0%,to{opacity:1}50%{opacity:.6}}#auto-start-countdown.hidden{display:none}#leaderboard-buttons .settings-btn{background:linear-gradient(135deg,#6b7b8a,#5a6978);color:#fff;padding:12px 24px;font-size:1rem;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .2s,box-shadow .2s}#leaderboard-buttons .settings-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #6b7b8a66}#btn-play-again{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:12px 40px;font-size:1.1rem;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .2s,box-shadow .2s}#btn-play-again:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}#host-controls{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#000000b3;z-index:150}#host-controls.hidden{display:none}.host-panel{background:linear-gradient(135deg,#2a2a4a,#1a1a3a);padding:30px 40px;border-radius:16px;text-align:center;box-shadow:0 10px 40px #00000080,0 0 30px #6c6cff33;border:2px solid #4a4a6a;animation:hostPanelPulse 2s ease-in-out infinite}@keyframes hostPanelPulse{0%,to{box-shadow:0 10px 40px #00000080,0 0 30px #6c6cff33}50%{box-shadow:0 10px 40px #00000080,0 0 50px #6c6cff66}}.host-panel h3{margin:0 0 15px;font-size:1.5rem;color:#fff}.host-panel p{margin:0 0 20px;color:#aaa;font-size:1rem;white-space:pre-line}.host-panel .start-btn{font-size:1.2rem;padding:15px 40px;animation:startBtnPulse 1.5s ease-in-out infinite}@keyframes startBtnPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}#spectator-banner{position:absolute;top:60px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#ff9800e6,#f57c00e6);padding:10px 20px;border-radius:20px;font-size:.9rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 15px #0000004d;z-index:100;animation:spectatorBannerBounce 2s ease-in-out infinite}#spectator-banner.hidden{display:none}@keyframes spectatorBannerBounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.side-panel{width:250px;background:#2a2a4a;border-radius:8px;padding:15px;display:flex;flex-direction:column;min-height:0}.side-panel h3{margin-bottom:10px;color:#aaa;font-size:1rem;border-bottom:1px solid #4a4a6a;padding-bottom:8px;flex-shrink:0}#scoreboard-panel{overflow:hidden}#scoreboard{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto;min-height:0}#scoreboard li{display:flex;align-items:center;gap:10px;padding:8px;background:#1a1a3a;border-radius:4px}#scoreboard .player-color{width:16px;height:16px;border-radius:3px;flex-shrink:0}#scoreboard .player-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scoreboard .player-stats{display:flex;gap:8px;font-size:.85rem;flex-shrink:0}#scoreboard .player-score{color:#4ecdc4}#scoreboard .player-wins{color:gold}#scoreboard .player-dead{opacity:.5}#scoreboard .player-spectating{font-style:italic;color:#888}#chat-panel{overflow:hidden}#chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding-right:5px;min-height:0}.chat-message{padding:6px 8px;background:#1a1a3a;border-radius:4px;font-size:.85rem;word-wrap:break-word}.chat-message .chat-name{font-weight:700;margin-right:6px}.chat-message.system{background:#3a3a5a;color:#aaa;font-style:italic;text-align:center}#chat-input-area{display:flex;gap:8px;flex-shrink:0}#chat-input{flex:1;padding:8px;font-size:.9rem;min-width:0}#btn-send-chat{padding:8px 12px;font-size:.9rem;background:linear-gradient(135deg,#6c6cff,#55d);color:#fff;flex-shrink:0}@media (max-width: 500px){#lobby h1{font-size:1.8rem}.menu,#room-info{min-width:280px}}#touch-controls{display:none;position:fixed;bottom:30px;left:0;right:0;flex-direction:row;justify-content:space-between;align-items:center;padding:0 20px;user-select:none;-webkit-user-select:none;z-index:1000;pointer-events:none}.touch-btn{font-size:2rem;padding:25px 35px;border:none;border-radius:16px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;pointer-events:auto;opacity:.25}.touch-jump{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.touch-move{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff}.touch-btn:active{transform:scale(.95);opacity:.5}.touch-move-group{display:flex;gap:10px;pointer-events:auto}@media (max-width: 900px){body{overflow-y:auto;height:auto;min-height:100%}#game-container{height:auto;min-height:auto;padding:10px}#game-layout{flex-direction:column;align-items:center}#game-center{order:0;width:100%;display:flex;justify-content:center}#game-canvas{height:auto;width:100%;max-width:384px}.side-panel{width:100%;max-width:384px}#chat-panel{order:1;height:auto;max-height:180px}#scoreboard-panel{order:2;height:auto;max-height:none;overflow:visible}#scoreboard{max-height:none;flex-direction:row;flex-wrap:wrap;gap:5px;overflow:visible}#scoreboard li{flex:0 0 auto;padding:4px 8px;font-size:.8rem}#chat-messages{max-height:100px}#game-container:not(.hidden)~footer,body:has(#game-container:not(.hidden)) footer{display:none}#game-code-badge{padding:8px 12px;margin-bottom:10px}#game-code-badge .code-label{font-size:.65rem;margin-bottom:4px}#game-code-display{font-size:1.2rem;letter-spacing:3px}#btn-copy-code{padding:4px 8px;font-size:.9rem}.host-panel{padding:20px;margin:10px}.host-panel h3{font-size:1.2rem}#spectator-banner{top:50px;font-size:.8rem;padding:8px 15px}}@media (max-width: 900px) and (pointer: coarse){#touch-controls.touch-active{display:flex}}@media (max-width: 420px){#game-canvas{max-width:100%;width:100%;height:auto}#game-ui{font-size:.9rem;gap:10px}.touch-btn{font-size:1.5rem;padding:20px 25px}}footer{position:fixed;bottom:20px;left:0;right:0;text-align:center;color:#666;font-size:.9rem;z-index:10}#toast-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}#countdown-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:100}#countdown-overlay.hidden{display:none}#countdown-text{font-size:120px;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5),0 4px 10px rgba(0,0,0,.5);animation:countdownPulse 1s ease-in-out infinite}#countdown-text.start{font-size:80px;color:#4ecdc4}@keyframes countdownPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.toast{background:#2a2a4a;color:#fff;padding:16px 24px;border-radius:8px;box-shadow:0 4px 20px #0006;animation:slideIn .3s ease,fadeOut .3s ease 3.7s;pointer-events:auto;max-width:400px;text-align:center}.toast.error{background:linear-gradient(135deg,#e74c3c,#c0392b);border:1px solid #ff6b6b}.toast.success{background:linear-gradient(135deg,#27ae60,#1e8449);border:1px solid #4ECDC4}.toast.info{background:linear-gradient(135deg,#3498db,#2980b9);border:1px solid #45B7D1}.toast h4{margin:0 0 8px;font-size:1.1rem}.toast p{margin:0;font-size:.9rem;opacity:.9}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.settings-section{display:none;flex-direction:column;gap:8px}.settings-section label{font-size:.9rem;color:#aaa}select{padding:12px 36px 12px 16px;font-size:1rem;border:2px solid #4a4a6a;border-radius:8px;background:#2a2a4a;color:#fff;outline:none;transition:border-color .3s;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}select:focus{border-color:#6c6cff}@media (pointer: coarse){.settings-section{display:flex}}#joystick-controls{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;pointer-events:none}#joystick-controls.hidden{display:none}#joystick-container{position:absolute;pointer-events:none;display:none}#joystick-container.active{display:block}#joystick-base{width:120px;height:120px;border-radius:50%;background:#ffffff26;border:3px solid rgba(255,255,255,.3);position:relative;display:flex;align-items:center;justify-content:center}#joystick-stick{width:50px;height:50px;border-radius:50%;background:#ffffff80;border:2px solid rgba(255,255,255,.7);position:absolute;transform:translate(-50%,-50%);left:50%;top:50%;transition:none}#joystick-jump-zone{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:auto;z-index:-1}@media (pointer: fine),(min-width: 901px){#joystick-controls{display:none!important}}.host-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.host-panel .settings-btn{font-size:1rem;padding:12px 24px;background:linear-gradient(135deg,#6b7b8a,#5a6978);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}.host-panel .settings-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #6b7b8a66;background:linear-gradient(135deg,#7b8b9a,#6a7988)}.modal{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#000c;z-index:200;animation:modalFadeIn .2s ease-out}.modal.hidden{display:none}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(135deg,#2a2a4a,#1a1a3a);border-radius:16px;min-width:320px;max-width:400px;box-shadow:0 10px 40px #00000080,0 0 30px #6c6cff33;border:2px solid #4a4a6a;animation:modalSlideIn .2s ease-out;overflow:hidden}@keyframes modalSlideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #4a4a6a}.modal-header h3{margin:0;font-size:1.3rem;color:#fff}.close-btn{background:none;border:none;color:#aaa;font-size:1.8rem;cursor:pointer;line-height:1;padding:0;transition:color .2s}.close-btn:hover{color:#fff}.modal-body{padding:20px;display:flex;flex-direction:column;gap:24px}.setting-group{display:flex;flex-direction:column;gap:8px}.setting-group label{display:flex;flex-direction:column;gap:2px}.setting-label{font-size:1rem;font-weight:700;color:#fff}.setting-description{font-size:.85rem;color:#888}.setting-control{display:flex;align-items:center;gap:12px}.setting-control input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:#4a4a6a;border-radius:4px;outline:none;cursor:pointer}.setting-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,#6c63ff,#4834d4);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:transform .2s}.setting-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.setting-control input[type=range]::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,#6c63ff,#4834d4);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.setting-value{min-width:45px;text-align:right;font-weight:700;color:#6c63ff;font-size:1rem}.modal-footer{display:flex;justify-content:space-between;padding:16px 20px;border-top:1px solid #4a4a6a;gap:10px}.reset-btn{background:transparent;border:2px solid #666;color:#aaa;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s}.reset-btn:hover{border-color:#888;color:#fff}.apply-btn{background:linear-gradient(135deg,#4caf50,#45a049);border:none;color:#fff;padding:10px 24px;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .2s,box-shadow .2s}.apply-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}.bots-section{margin-top:10px;padding-top:15px;border-top:1px solid #4a4a6a}.bots-header{display:flex;flex-direction:column;margin-bottom:12px}.bot-add-controls{display:flex;gap:10px;margin-bottom:12px}.add-bot-btn{flex:1;background:linear-gradient(135deg,#6c63ff,#4834d4);border:none;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .2s,opacity .2s;white-space:nowrap}.add-bot-btn:hover:not(:disabled){transform:translateY(-2px)}.add-bot-btn:disabled{opacity:.5;cursor:not-allowed}.bot-list{list-style:none;max-height:150px;overflow-y:auto;margin-bottom:10px}.bot-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#2a2a4a80;border-radius:8px;margin-bottom:6px}.bot-color{width:20px;height:20px;border-radius:50%;flex-shrink:0}.bot-name{flex:1;font-size:.95rem}.bot-remove-btn{background:#ff646433;border:none;color:#ff6464;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:.8rem;transition:background .2s;display:flex;align-items:center;justify-content:center}.bot-remove-btn:hover{background:#ff646466}.remove-all-bots-btn{width:100%;background:transparent;border:2px solid #ff6464;color:#ff6464;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s}.remove-all-bots-btn:hover{background:#ff646433}.player-bot{border-left:3px solid #6c63ff}