@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&display=swap";:root{--primary: #f0f0f0;--accent: 57, 255, 20;--bg-dark: #050a05;--bg-panel: rgba(20, 30, 20, .6);--text-main: #ffffff;--text-dim: #aaddaa}body{margin:0;font-family:Outfit,sans-serif;background-color:var(--bg-dark);height:100dvh;width:100vw;overflow:hidden;position:fixed}#root{height:100dvh;width:100vw;color:var(--text-main);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}button{font-family:Outfit,sans-serif;transition:all .2s ease}button:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px rgba(var(--accent),.5);color:#000;background:rgb(var(--accent))}button:active:not(:disabled){transform:translateY(0) scale(.98)}input{font-family:Outfit,sans-serif;transition:all .2s ease;border-color:rgba(var(--accent),.3)}input:focus{outline:none;border-color:rgb(var(--accent));box-shadow:0 0 0 4px rgba(var(--accent),.5)}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:.8}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.game-container{position:relative;width:100%;height:100%;flex:1;overflow:hidden;background:var(--bg-dark)}.canvas{display:block;width:100%;height:100%}.session-info{position:absolute;top:0;left:0;padding-top:max(20px,env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));color:#ffffff80;font-size:14px;pointer-events:none;z-index:10;text-shadow:0 1px 2px rgba(0,0,0,.8)}.session-id{color:#fff;font-weight:700}@property --wipe-in{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@property --wipe-out{syntax: "<percentage>"; inherits: false; initial-value: 0%;}.boost-container{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:300px;z-index:20;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:5px}.boost-label{font-size:14px;font-weight:700;color:#4db8ff;letter-spacing:2px;text-shadow:0 0 10px rgba(77,184,255,.5)}.boost-bar-bg{width:100%;height:10px;background:#001428cc;border:2px solid #4db8ff;border-radius:6px;padding:2px;box-shadow:0 0 15px #4db8ff33}.boost-bar-fill{height:100%;background:linear-gradient(90deg,#4db8ff,#0ff);border-radius:4px;box-shadow:0 0 10px #4db8ff80;transition:width .1s linear}.ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:20;background:linear-gradient(25deg,transparent var(--wipe-out),rgba(255,255,255,.5) var(--wipe-out),rgba(255,255,255,.5) calc(var(--wipe-out) + 1%),rgba(var(--accent),.2) calc(var(--wipe-out) + 1%),rgba(var(--accent),.2) calc(var(--wipe-in) - 1%),rgba(255,255,255,.5) calc(var(--wipe-in) - 1%),rgba(255,255,255,.5) var(--wipe-in),transparent var(--wipe-in));--wipe-in: 0%;--wipe-out: 0%}.ui-overlay.backdrop{background-color:transparent;backdrop-filter:blur(12px) contrast(120%);-webkit-backdrop-filter:blur(12px) contrast(120%)}.ui-overlay.hidden{--wipe-in: -1%;--wipe-out: -1%;transition:none;pointer-events:none}.ui-overlay.entering{--wipe-in: 101%;--wipe-out: -1%;pointer-events:auto;transition:--wipe-in 3s ease-out}.ui-overlay.full{--wipe-in: 101%;--wipe-out: -1%;pointer-events:auto;transition:none}.ui-overlay.leaving{--wipe-in: 101%;--wipe-out: 101%;pointer-events:none;transition:--wipe-out 3s ease-in 2s}.waiting-title{font-size:clamp(24px,5vw,42px);margin-bottom:1rem;text-transform:uppercase;letter-spacing:2px;animation:slideDown .5s cubic-bezier(.34,1.56,.64,1)}.waiting-count{font-size:clamp(16px,4vw,24px);color:rgb(var(--accent));font-weight:500;animation:slideUp .6s cubic-bezier(.34,1.56,.64,1)}.countdown-number{font-size:clamp(100px,30vw,220px);font-weight:900;color:#fff;text-shadow:0 0 50px var(--accent-glow),0 0 100px var(--accent-glow);line-height:1;animation:zoomPulse .4s cubic-bezier(.175,.885,.32,1.275)}.countdown-label{font-size:clamp(18px,4vw,32px);letter-spacing:12px;margin-top:1rem;opacity:.9;text-transform:uppercase;animation:fadeIn 1s ease-in}.winner-label{font-size:clamp(14px,3vw,24px);letter-spacing:12px;font-weight:500;color:rgb(var(--accent));margin-bottom:-1rem;text-shadow:0 0 10px var(--accent-glow);animation:fadeIn 1s ease-out;z-index:2}.game-over-title{margin-bottom:2rem}.winner-name{font-size:clamp(60px,15vw,120px);color:#fff;line-height:1.1;text-shadow:0 0 20px rgba(57,255,20,.4),0 0 40px rgba(0,255,249,.3);animation:slideDown .6s cubic-bezier(.34,1.56,.64,1);padding:0 2rem}.winner-draw{font-size:clamp(60px,15vw,120px);color:#fff;text-shadow:0 0 30px rgba(255,255,255,.2);animation:whitePulse 3s ease-in-out infinite}.restart-timer{font-size:clamp(12px,3vw,14px);color:var(--text-dim);margin-top:2.5rem;letter-spacing:4px;text-transform:uppercase;opacity:1;animation:slideUp .5s ease-out .5s backwards;border:1px solid rgba(57,255,20,.3);background:#00140066;padding:12px 24px;border-radius:99px;box-shadow:0 0 15px #39ff141a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.eliminated-notification{position:absolute;top:30%;width:100%;text-align:center;pointer-events:none;z-index:15}.eliminated-text{font-size:clamp(32px,8vw,64px);color:#f44;font-weight:900;text-transform:uppercase;text-shadow:0 0 30px rgba(255,0,0,.8);animation:elasticScale .6s cubic-bezier(.175,.885,.32,1.275)}.touch-controls{position:absolute;bottom:2rem;left:0;width:100%;height:25vh;max-height:200px;min-height:120px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-end;box-sizing:border-box;z-index:30;pointer-events:none;opacity:1;transition:opacity .5s ease}.touch-controls.dimmed{opacity:.15}.touch-controls.hidden{opacity:0;pointer-events:none}.touch-btn{width:160px;height:100%;max-width:45vw;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:20px;display:flex;align-items:center;justify-content:center;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:all .1s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:Outfit,sans-serif;font-weight:700;letter-spacing:2px;font-size:24px;color:#fff;opacity:.6}.touch-btn:active,.touch-btn.active{background:#39ff1426;border-color:rgb(var(--accent));transform:scale(.96);box-shadow:0 0 20px #39ff144d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes zoomPulse{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes elasticScale{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes whitePulse{0%,to{opacity:1;text-shadow:0 0 20px rgba(255,255,255,.2)}50%{opacity:.8;text-shadow:0 0 40px rgba(255,255,255,.4)}}