@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@700;800&family=Rubik:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;background-color:#05050a;font-family:Inter,system-ui,-apple-system,sans-serif;color:#ffffffde}.login-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100%;position:relative;overflow:hidden;background-size:cover;background-position:center center;background-repeat:no-repeat}.background-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0f0f1466,#05050a99);z-index:1}.login-card{position:relative;z-index:2;background:#ffffff0d;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:3rem 4rem;border-radius:20px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006;text-align:center;max-width:400px;width:90%;animation:fadeIn 1s ease-out}@media(max-width:480px){.login-card{padding:2rem 1.5rem}.login-header h1{font-size:2rem!important}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-header h1{font-family:Outfit,Inter,sans-serif;color:#fff;font-size:2.8rem;margin:0;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px rgba(255,0,0,.5)}.login-header p{color:#ccc;font-size:1rem;margin-bottom:2rem;font-family:Inter,sans-serif}.oauth-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px 24px;border-radius:12px;border:none;background:#ffffffe6;color:#333;font-size:1.05rem;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);box-shadow:0 4px 6px #0003}.oauth-btn:hover{background:#fff;transform:translateY(-3px);box-shadow:0 6px 15px #fff3}.oauth-btn:active{transform:translateY(1px);box-shadow:0 2px 4px #ffffff1a}.game-room-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100%;position:relative;overflow:hidden;transition:background-image .8s ease-in-out}.main-bg{background-image:url(/sala-juego.gif);background-size:cover;background-position:center}.character-selection-bg{background-image:url(/seleccion-personajes.jpeg);background-size:cover;background-position:center}.game-room-container:before{content:"";position:absolute;inset:0;background:#0a0f14b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1}.game-room-box{position:relative;z-index:2;display:flex;flex-direction:column;width:90%;max-width:850px;min-height:550px;background:#141619d9;border-radius:20px;box-shadow:0 25px 50px #000c,inset 0 0 0 1px #ffffff0d;padding:40px;border-top:1px solid rgba(50,205,50,.3);color:#fff;transition:all .4s cubic-bezier(.2,.8,.2,1)}.progress-indicator{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:40px}.step{font-family:Rubik,sans-serif;font-size:.85rem;color:#666;text-transform:uppercase;letter-spacing:1px;font-weight:600;transition:color .3s}.step.active{color:#32cd32;text-shadow:0 0 8px rgba(50,205,50,.4)}.step-line{height:2px;width:40px;background:#333}.step.active+.step-line{background:#32cd32}.view-content{flex-grow:1;display:flex;flex-direction:column;position:relative}.step-view{display:flex;flex-direction:column;align-items:center;flex-grow:1;width:100%}.title-glow{font-family:Rubik,sans-serif;font-size:2.4rem;margin:0 0 10px;text-transform:uppercase;letter-spacing:2px;text-align:center;text-shadow:0 4px 15px rgba(50,205,50,.5)}.subtitle{font-size:1.1rem;color:#aaa;margin-bottom:40px;text-align:center}.game-btn{width:100%;max-width:300px;padding:16px 24px;font-size:18px;font-weight:700;font-family:Rubik,sans-serif;text-transform:uppercase;letter-spacing:2px;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#fff;display:flex;justify-content:center;align-items:center}.primary-btn{background:#228b22;border:2px solid #32CD32;box-shadow:0 8px 20px #228b224d}.primary-btn:hover:not(:disabled){background:#2ea82e;transform:translateY(-3px);box-shadow:0 12px 25px #228b2280}.primary-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(1);box-shadow:none}.secondary-btn{background:transparent;border:2px solid #555;color:#ddd}.secondary-btn:hover{border-color:#888;color:#fff;background:#ffffff0d;transform:translateY(-3px)}.accept-btn{background:#005a9c;border:2px solid #1E90FF;box-shadow:0 8px 20px #1e90ff4d}.accept-btn:hover:not(:disabled){background:#0073c7;transform:translateY(-3px);box-shadow:0 12px 25px #1e90ff80}.accept-btn:disabled{opacity:.4;cursor:not-allowed}.text-btn{background:none;border:none;color:#aaa;font-family:Rubik,sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:14px;cursor:pointer;transition:color .2s;padding:10px}.text-btn:hover{color:#fff}.text-danger:hover{color:#ff4500;text-shadow:0 0 10px rgba(255,69,0,.5)}.menu-options{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.mode-selector{display:flex;gap:10px;background:#0006;padding:5px;border-radius:12px;border:1px solid #444;margin-bottom:10px}.mode-btn{padding:10px 20px;border:none;background:transparent;color:#777;font-family:Rubik,sans-serif;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;border-radius:8px;cursor:pointer;transition:all .3s}.mode-btn.active{background:#32cd32;color:#000;box-shadow:0 0 15px #32cd3266}.mode-btn:hover:not(.active){color:#fff;background:#ffffff0d}.divider{color:#555;font-weight:700;font-family:Rubik;letter-spacing:2px}.ux-form{display:flex;flex-direction:column;align-items:center;gap:30px;width:100%;max-width:320px}.input-group{position:relative;width:100%}.input-group input{width:100%;padding:20px 20px 10px;font-size:28px;text-align:center;font-weight:700;letter-spacing:6px;color:#32cd32;background:#0006;border:1px solid #444;border-radius:8px;outline:none;transition:all .3s}.input-group input:focus{border-color:#32cd32;box-shadow:0 0 15px #32cd3233;background:#0009}.input-group label{position:absolute;top:22px;left:50%;transform:translate(-50%);color:#777;font-size:16px;transition:all .3s;pointer-events:none;font-family:Rubik,sans-serif;text-transform:uppercase;letter-spacing:2px}.input-group input:focus~label,.input-group input:not(:placeholder-shown)~label{top:6px;font-size:10px;color:#32cd32;font-weight:700}.input-group input::placeholder{color:transparent}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1}.spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.1);border-left-color:#32cd32;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}.code-reveal{text-align:center;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.code-box{font-size:4rem;font-weight:700;letter-spacing:12px;color:#fff;background:#32cd3226;border:2px dashed #32CD32;padding:20px 30px;border-radius:12px;margin:20px 0;text-shadow:0 0 20px rgba(50,205,50,.6);box-shadow:inset 0 0 30px #32cd3233}.success-text{color:#32cd32;font-weight:700;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.character-step{width:100%;max-width:100%}.selection-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:30px}.selection-header h2{margin:0;text-align:left}.active-room-badge{background:#0009;border:1px solid #444;padding:8px 15px;border-radius:6px;font-size:.9rem;color:#aaa;letter-spacing:1px}.active-room-badge span{color:#32cd32;font-weight:700;font-size:1.1rem;margin-left:5px;letter-spacing:2px}.characters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%;margin-bottom:30px}.char-card{position:relative;background:#0000004d;border:1px solid #333;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0}.char-card:hover{border-color:#666;transform:translateY(-5px);background:#ffffff05}.char-card.selected{border-color:#1e90ff;background:#1e90ff1a;transform:translateY(-8px);box-shadow:0 10px 20px #1e90ff33}.char-image-wrapper{height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;transition:transform .3s}.char-card:hover .char-image-wrapper{transform:scale(1.05)}.char-card.selected .char-image-wrapper{transform:scale(1.1);filter:drop-shadow(0 0 15px rgba(30,144,255,.5))}.char-image-wrapper img{max-height:100%;max-width:100%;object-fit:contain}.char-name{font-family:Rubik,sans-serif;font-size:1.2rem;color:#888;text-transform:capitalize;transition:color .3s;margin:0}.char-card.selected .char-name{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5);font-weight:700}.action-row{display:flex;justify-content:space-between;align-items:center;width:100%}.fade-in{animation:fadeIn .4s ease-out forwards}.pop-in{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.mt-auto{margin-top:auto}@media(max-width:768px){.game-room-box{padding:25px;width:95%;min-height:400px}.characters-grid{grid-template-columns:repeat(2,1fr);gap:15px}.char-image-wrapper{height:120px}.selection-header{flex-direction:column;gap:10px;align-items:flex-start}.action-row{flex-direction:column-reverse;gap:20px}.title-glow{font-size:1.8rem}.progress-indicator{margin-bottom:25px}.step{font-size:.7rem}.step-line{width:20px}}.char-card.taken{opacity:.85;cursor:not-allowed;pointer-events:none;border:2px solid #ff3333;background:#ff333326;box-shadow:inset 0 0 20px #f333}.char-card.taken .char-image-wrapper{filter:grayscale(1) sepia(1) hue-rotate(-50deg) saturate(6) contrast(1.1)}.char-card.taken .char-name{color:#f33;font-weight:700;text-shadow:0 0 10px rgba(255,51,51,.8);font-size:1.15rem}.room-full-alert{width:100%;background:#f333;border:2px solid #ff3333;padding:15px;border-radius:8px;text-align:center;color:#fcc;margin-bottom:20px;animation:pulse-red 2s infinite}.room-full-alert h3{margin:0 0 5px;color:#f33;font-family:Rubik;letter-spacing:2px;text-transform:uppercase}.room-full-alert p{margin:0;font-size:.95rem}@keyframes pulse-red{0%,to{box-shadow:0 0 10px #f333}50%{box-shadow:0 0 20px #f339}}:root{--tile-size: 95px;--sprite-size: 114px;--sprite-offset: -19px}@media(max-width:768px){:root{--tile-size: 60px;--sprite-size: 72px;--sprite-offset: -12px}}@media(max-width:480px){:root{--tile-size: 40px;--sprite-size: 48px;--sprite-offset: -8px}}.game-viewport{width:100%;height:100%;max-width:100vw;max-height:100vh;overflow:hidden;position:relative;background-color:#050505;margin:0;border:none;box-shadow:none;border-radius:0;z-index:5;touch-action:none}.game-map-container{position:relative;transition:transform .1s ease-out;will-change:transform}.tile,.ground-tile,.entity-tile{width:var(--tile-size);height:var(--tile-size);position:relative;display:flex;align-items:center;justify-content:center}.ground-tile{background-color:#2a1f1a;border:1px solid rgba(255,255,255,.05)}.entity-tile{overflow:visible!important}.tile-image{width:100%;height:100%;object-fit:cover;display:block}.bush-prop{transform:scale(1.8);transform-origin:center center;z-index:6;pointer-events:none}.tree-prop{transform:scale(2.2);transform-origin:bottom center;z-index:8;pointer-events:none}.bunker-prop{transform:scale(1.3);transform-origin:center center;z-index:7;pointer-events:none}.forest-prop{transform:scale(1.5);transform-origin:bottom center;z-index:7;pointer-events:none}.city-building{width:400%!important;height:auto!important;object-fit:contain!important;bottom:0!important;top:auto!important;left:-150%!important;transform:none!important;z-index:9;pointer-events:none}.urban-prop{transform:scale(1.5);transform-origin:center center;z-index:7;pointer-events:none}.street-light-prop{height:350%!important;width:auto!important;object-fit:contain!important;bottom:0!important;top:auto!important;left:50%!important;transform:translate(-50%)!important;z-index:8;pointer-events:none}.barricade-prop{transform:scale(1.5);transform-origin:bottom center;z-index:6;pointer-events:none}.item-pickup-prop{transform:scale(.5);transform-origin:center center;z-index:6;pointer-events:none}.bush-prop,.tree-prop,.bunker-prop,.forest-prop,.urban-prop,.barricade-prop{object-fit:contain!important}.player-sprite{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none}.sprite-image{width:var(--sprite-size);height:var(--sprite-size);object-fit:contain;margin-top:var(--sprite-offset)}.vision-vignette{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;box-shadow:inset 0 0 40px #000000b3;z-index:20}.player-indicator{display:none}.health-bar-container{position:absolute;top:-10px;left:50%;transform:translate(-50%);width:50px;height:6px;background-color:#0009;border:1px solid rgba(255,255,255,.3);border-radius:3px;overflow:hidden;z-index:16}.health-bar-fill{height:100%;transition:width .3s ease-out,background-color .3s ease}@media(max-width:768px){.player-indicator{top:-12px;border-left-width:6px;border-right-width:6px;border-top-width:8px;margin-left:-6px}}.game-map-container.is-dead{transition:filter 1s ease-in-out}.death-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#00000080;z-index:100;animation:fade-in-red 2s forwards}.other-player-dead .health-bar-container{display:none}.death-message{font-family:Courier New,Courier,monospace;font-size:4rem;color:red;font-weight:700;text-shadow:0 0 20px #900,0 0 40px #000;letter-spacing:15px;margin-bottom:20px;animation:pulse-death 2s infinite}.death-subtext{font-size:1.2rem;color:#ccc;text-transform:uppercase;letter-spacing:2px;margin-bottom:30px}@media(max-width:768px){.death-message{font-size:2.5rem;letter-spacing:8px}.death-subtext{font-size:.9rem}}.lobby-restart-btn{padding:15px 40px;min-width:280px;background:linear-gradient(135deg,#32cd32,#1a8b1a);color:#fff;border:3px solid #50ff50;border-radius:12px;text-transform:uppercase;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 30px #000c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;animation:pulse-border 2s infinite}.lobby-restart-btn:hover{transform:scale(1.05);box-shadow:0 0 40px #32cd3266}.lobby-restart-btn:active{transform:scale(.95)}.countdown-timer-red{color:red;font-family:Courier New,Courier,monospace;font-weight:900;text-shadow:0 0 10px rgba(255,0,0,.5)}.lobby-restart-btn.is-active:hover{transform:scale(1.05);box-shadow:0 0 30px #32cd3280}@keyframes pulse-border{0%{box-shadow:0 0 #32cd3266}50%{box-shadow:0 0 20px #32cd32b3}to{box-shadow:0 0 #32cd3266}}@keyframes fade-in-red{0%{background-color:#0000}to{background-color:#3c000066}}@keyframes pulse-death{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:.8}}.zombie-hit-flash{animation:hit-flash-red .3s ease-out}@keyframes hit-flash-red{0%{filter:brightness(1)}20%{filter:brightness(2) sepia(1) saturate(10000%) hue-rotate(0deg)}to{filter:brightness(1)}}.bullet-overlay-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:500}.muzzle-flash{position:absolute;width:25px;height:25px;background:radial-gradient(circle,#fff,#ffcc00,transparent);border-radius:50%;pointer-events:none;z-index:2000;animation:flash-grow .1s ease-out forwards}@keyframes flash-grow{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.weapon-aim-indicator,.weapon-aim-indicator-player{position:absolute;width:var(--tile-size);height:var(--tile-size);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:50;filter:drop-shadow(0 0 8px rgba(50,205,50,.4))}.weapon-aim-indicator-player{top:0;left:0}.weapon-aim-image{width:80%;height:80%;object-fit:contain;opacity:.9}.ammo-hud{position:absolute;top:80px;left:20px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#000000d9,#1e1e1eb3);padding:10px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 15px #00000080;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease}.ammo-hud img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(255,255,255,.3))}.ammo-hud span{font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5)}.ammo-low{color:#f44!important;animation:ammo-alert .5s infinite alternate}@keyframes ammo-alert{0%{opacity:1;transform:scale(1)}to{opacity:.7;transform:scale(1.1)}}.tournament-hud{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1000;pointer-events:none}.timer-box{background:#000c;border:2px solid #ff0000;padding:10px 30px;border-radius:12px;display:flex;flex-direction:column;align-items:center;box-shadow:0 0 20px #f006}.timer-label{font-size:.7rem;color:#f44;font-weight:700;letter-spacing:2px}.timer-value{font-size:2.2rem;font-weight:900;color:#fff;font-family:Rubik,sans-serif;text-shadow:0 0 10px #ff0000}.zone-status{font-size:.9rem;font-weight:700;color:red;text-transform:uppercase;background:#0009;padding:4px 12px;border-radius:20px;animation:pulse-alert 1s infinite alternate}.eliminated-box{text-align:center;background:#000c;padding:30px;border-radius:15px;border:2px solid #ff0000;box-shadow:0 0 30px #f009;animation:pop-in .5s forwards}.eliminated-box h2{font-size:3rem;margin:0;text-shadow:0 0 20px #ff0000}.eliminated-box p{color:#ccc;margin:10px 0}.victory-box{text-align:center;background:#000000e6;padding:50px;border-radius:20px;border:4px solid #32CD32;box-shadow:0 0 50px #32cd32cc,inset 0 0 20px #32cd324d;animation:victory-pop .6s cubic-bezier(.175,.885,.32,1.275) forwards}.victory-title{font-size:4rem;color:#32cd32;text-transform:uppercase;letter-spacing:5px;margin-bottom:10px;text-shadow:0 0 20px rgba(50,205,50,1)}@keyframes victory-pop{0%{transform:scale(.5) rotate(-5deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.mt-4{margin-top:30px}@keyframes pulse-alert{0%{opacity:1;transform:scale(1)}to{opacity:.6;transform:scale(1.05)}}@keyframes pop-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.pop-in{animation:pop-in .4s cubic-bezier(.175,.885,.32,1.275) forwards}.sprite-player-container{position:relative;width:var(--tile-size);height:var(--tile-size);overflow:visible;display:flex;align-items:center;justify-content:center}.sprite-layer{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transform:translateY(-8px);pointer-events:none}.sprite-layer.active{z-index:5}.other-player-dead{transition:all .5s ease-in-out}.weapon-layer{position:absolute;width:35%;height:35%;z-index:10;pointer-events:none;transform-origin:20% 50%;left:30%;top:35%;transition:transform .05s linear}.bullet-projectile{position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;box-shadow:0 0 15px #fc0,0 0 25px #fc0c;z-index:1000;pointer-events:none;animation:bullet-travel .2s linear forwards}@keyframes bullet-travel{0%{transform:translate(-50%,-50%);opacity:1}to{transform:translate(calc(var(--tx) * var(--tile-size) - 50%),calc(var(--ty) * var(--tile-size) - 50%));opacity:.8}}.muzzle-flash{position:absolute;width:15px;height:15px;background:radial-gradient(circle,#fff,#ffcc00,transparent);border-radius:50%;z-index:1001;pointer-events:none;animation:flash-fade .1s ease-out forwards}@keyframes flash-fade{0%{scale:.5;opacity:1}to{scale:1.5;opacity:0}}.touch-controls-container{position:fixed;bottom:0;left:0;width:100vw;height:240px;pointer-events:none;display:none;z-index:2000;padding:0 20px 20px;touch-action:none}@media(max-width:1024px){.touch-controls-container{display:flex;justify-content:space-between;align-items:flex-end}}.control-group{display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto;-webkit-user-select:none;user-select:none}.control-label{font-family:Outfit,Inter,sans-serif;font-size:.7rem;color:#32cd32;text-transform:uppercase;letter-spacing:2px;font-weight:700;opacity:.9;background:#000000b3;padding:4px 12px;border-radius:20px;border:1px solid rgba(50,205,50,.3);box-shadow:0 4px 15px #00000080}.d-pad{padding:12px;background:#0f0f0f99;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:30px;border:1px solid rgba(50,205,50,.2);display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 10px 30px #00000080}.d-pad-horizontal{display:flex;gap:6px}.d-btn,.s-btn{width:58px;height:58px;background:linear-gradient(145deg,#2a2a2a,#151515);border:1px solid rgba(255,255,255,.05);border-radius:16px;color:#32cd32;font-size:22px;display:flex;align-items:center;justify-content:center;transition:all .1s ease;box-shadow:4px 4px 10px #0006,inset 1px 1px 1px #ffffff1a;touch-action:none}.d-btn:active,.d-btn.active{background:#32cd32;color:#000;transform:scale(.95);box-shadow:0 0 20px #32cd3266}.d-pad-center{width:58px;height:58px;display:flex;align-items:center;justify-content:center;opacity:.2}.shoot-grid{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:6px;padding:12px;background:#140a0a99;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:30px;border:1px solid rgba(255,50,50,.2);box-shadow:0 10px 30px #00000080}.s-btn{color:#f44;background:linear-gradient(145deg,#2a0a0a,#150505)}.s-btn:active,.s-btn.active{background:#f44;color:#fff;transform:scale(.95);box-shadow:0 0 20px #f446}.center-fire{background:radial-gradient(circle,#f11,#400)!important;font-size:1.8rem!important;border:2px solid #ff4444!important;box-shadow:0 0 25px #f009!important}.center-fire:active{transform:scale(.9)!important;box-shadow:0 0 40px #f00c!important}@media(max-width:480px){.touch-controls-container{height:220px;padding:0 10px 15px}.d-btn,.s-btn{width:50px;height:50px;font-size:18px}.shoot-grid{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px)}.d-pad-center{width:50px;height:50px}}#root{width:100%;height:100%;margin:0;padding:0;text-align:center}.user-overlay{position:absolute;top:20px;right:20px;z-index:1100;background:#000c;padding:10px 20px;border-radius:12px;border:1px solid #32CD32;display:flex;align-items:center;gap:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.user-photo{width:40px;height:40px;border-radius:50%;object-fit:cover}.user-info{color:#fff;font-size:.9rem;text-align:left}.logout-btn{background:#8b0000;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-weight:700}@media(max-width:768px){#root{padding-top:60px}.user-overlay{position:fixed!important;top:0!important;right:0!important;left:auto!important;width:auto!important;height:60px!important;background:#0a0a0a!important;border:none!important;border-bottom:2px solid #32CD32!important;border-radius:0!important;padding:0 15px!important;margin:0!important;z-index:2100!important;scale:.8!important;transform-origin:right center!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;display:flex!important;align-items:center!important}.room-code-badge{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:60px!important;background:#0a0a0a!important;border:none!important;border-bottom:2px solid #32CD32!important;border-radius:0!important;padding:0 0 0 15px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;z-index:2000!important;transform:none!important;font-size:.75rem!important;letter-spacing:1px!important;box-shadow:0 4px 15px #000c!important}.room-code-badge span{font-size:.85rem!important;color:#fff!important;margin-left:5px!important}.user-info{display:none!important}.user-overlay{gap:10px!important;padding:0 10px!important;background:transparent!important;border-bottom:none!important}.user-photo{width:32px!important;height:32px!important;border:1px solid #32CD32!important}.logout-btn{padding:4px 8px!important;font-size:.7rem!important}.pause-content{padding:30px 40px;width:90%}.pause-title{font-size:2.5rem;letter-spacing:10px;margin-bottom:30px}}.pause-overlay-premium{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;-webkit-backdrop-filter:blur(12px) brightness(.6);backdrop-filter:blur(12px) brightness(.6);display:flex;align-items:center;justify-content:center;z-index:5000;animation:fadeIn .3s ease-out}.pause-content{background:linear-gradient(145deg,#1a1a1a,#0a0a0a);padding:50px 80px;border-radius:24px;border:1px solid rgba(50,205,50,.3);box-shadow:0 0 100px #000000e6,0 0 30px #32cd321a;text-align:center;transform:translateY(0);animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275)}.pause-title{font-family:Courier New,Courier,monospace;font-size:5rem;color:#32cd32;font-weight:900;margin:0 0 40px;letter-spacing:20px;text-shadow:0 0 20px rgba(50,205,50,.5);animation:pulse-slow 3s infinite}.pause-buttons{display:flex;flex-direction:column;gap:20px;align-items:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse-slow{0%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}to{opacity:.8;transform:scale(1)}}.btn-resume{background:linear-gradient(135deg,#32cd32,#1a8b1a)!important;border:3px solid #50ff50!important;box-shadow:0 0 20px #32cd3266!important}.btn-exit{background:linear-gradient(135deg,red,#8b0000)!important;border:3px solid #ff4b4b!important;box-shadow:0 0 20px #ff00004d!important}.btn-resume:hover,.btn-exit:hover{transform:scale(1.05);filter:brightness(1.2)}.room-code-badge{position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:1000;background:#0a0a0fd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 25px;border-radius:0 0 15px 15px;border-bottom:2px solid #32CD32;border-left:2px solid #32CD32;border-right:2px solid #32CD32;color:#32cd32;font-family:Courier New,Courier,monospace;font-weight:700;letter-spacing:2px;box-shadow:0 5px 15px #00000080}.room-code-badge span{color:#fff;margin-left:8px}