:root{--body-bg:#121214;--mesh-col:#282830;--mesh-bg:linear-gradient(var(--mesh-col) 1px, transparent 1px), linear-gradient(90deg, var(--mesh-col) 1px, transparent 1px);--glow-col:#95a0ff;--app-bg:radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--glow-col) 5%, transparent) 0%, transparent 60%), radial-gradient(circle at 50% 60%, transparent 10%, #121214 100%);--panel-bg:#1a1a1e;--panel-brd:#2a2a30;--tab-active-bg:#ebf2ff;--btn-bg:#ebf2ff;--btn-text:#000;--toggle-on-bg:#ebf2ff;--info-bg:#131316;--info-brd:#25252b;--map-bg:#16161a;--ntf-s-bg:#143820;--ntf-s-col:#4ade80;--ntf-f-bg:#3b1719;--ntf-f-col:#f87171;--plr:#22c55e;--plr-enemy:#ff4757;--plr-local:#3b82f6;--accent:#292930;--accent-text:#b5b5c4;--text:#ebf2ff;--darker-text:#9ca3af;--text-on-white:#000}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--mesh-bg);background-repeat:repeat;background-size:50px 50px;background-color:var(--body-bg);font-family:Plus Jakarta Sans,monospace}h1,h2{font-weight:600}p{color:var(--desc);font-weight:400}a{color:var(--link);font-weight:400}button,input,select,img,span{font-family:Plus Jakarta Sans,monospace}.header{background:color-mix(in srgb, var(--panel-bg) 65%, transparent);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--panel-brd);z-index:99;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;padding:8px 1rem;transition:all .25s;display:flex;box-shadow:0 0 14px #0000004d}.logo{align-items:center;gap:10px;display:flex}.logo img{width:28px;height:28px}.logo h1{letter-spacing:1px;color:var(--text);font-size:20px;transform:translateY(-2.1px)}.header nav{gap:0;display:flex}.header nav a{border-radius:6px;align-items:center;gap:2px;padding:5px 12px;font-weight:400;text-decoration:none;transition:all .3s;display:flex}.header nav a p{opacity:0;white-space:nowrap;max-width:0;font-weight:500;transition:max-width .25s,opacity .25s;overflow:hidden}.header nav a svg{color:var(--darker-text)}.header nav a.active{background-color:var(--tab-active-bg)}.header nav a.active svg{color:var(--text-on-white)}.header nav a.active p{color:var(--text-on-white);opacity:1;max-width:200px}.header-wrap{align-items:center;gap:5px;display:flex}.login-btn p{text-overflow:ellipsis;max-width:80px;font-size:14px;overflow:hidden}@media screen and (width<=810px){.header{border-bottom:#0000;border-top:1px solid var(--panel-brd);justify-content:center;position:absolute;bottom:0}.logo{display:none}.header nav{gap:1px}.header nav a{justify-content:center;width:100px;padding:8px 0}.header nav a p{display:none}.header nav a svg{color:var(--darker-text);display:flex}.header nav a.active svg{color:var(--text-on-white)}}.main-btn{background:var(--panel-bg);border:1px solid var(--panel-brd);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:center;align-items:center;gap:5px;height:35px;padding:8px 18px;transition:all .1s;display:flex}.main-btn p{color:var(--text);letter-spacing:.5px;transition:all .3s;transform:translateY(-.5px)}.main-btn svg{color:var(--text)}.main-btn:hover{opacity:.8}.main-btn.primary{background-color:var(--btn-bg);border:none}.main-btn.primary p{color:var(--btn-text);font-weight:550}.main-btn.primary svg{color:var(--btn-text)}.map-container{flex-direction:column;flex-grow:1;justify-content:center;align-items:center;gap:10px;display:flex}.hrz-container{flex-direction:row;align-items:center;gap:5px;display:flex}.map-row{grid-template-columns:1fr auto 1fr;align-items:center;width:100%;display:grid}.map-row>.players-column:first-child{justify-self:end}.map-row>.players-column:last-child{justify-self:start}.players-column{flex-direction:column;gap:5px;padding:1rem;display:flex}.room-input{text-align:center;max-width:85px;height:100%}.room-panel{align-items:center;height:40px;padding:5px 8px;display:flex}.room-panel p{color:var(--darker-text);font-size:14px}@media screen and (width<=1240px){.map-row{flex-direction:column;justify-content:center;display:flex}.players-column{display:none}}@media screen and (width<=450px){.create-room-btn{display:none}}.map{background-color:var(--map-bg);border:1px solid var(--panel-brd);border-radius:10px;width:70vmin;height:70vmin;display:flex;position:relative;overflow:hidden;box-shadow:0 0 30px #0006}.bomb{fill:red;z-index:2;border-radius:3px;width:20px;height:20px;animation:.5s infinite bombAnim;position:absolute;transform:translate(-50%)translateY(-50%)}@keyframes bombAnim{0%{box-shadow:0 0 red}50%{box-shadow:0 0 18px red}to{box-shadow:0 0 30px #f000}}.map img{-webkit-user-select:none;user-select:none}.map-dropdown{position:absolute;top:5px;right:5px}@media screen and (width<=730px){.map{width:90vmin;height:90vmin}.bomb{width:16px;height:16px}}.player{filter:drop-shadow(0 0 5.5px #000);z-index:2;width:16px;height:16px;fill:var(--plr);pointer-events:none;justify-content:center;align-items:start;transition:all .3s;display:flex;position:absolute;transform:translate(-50%)translateY(-50%)}.player p{-webkit-user-select:none;user-select:none;color:var(--text);font-size:14px;position:absolute;bottom:12px}.player.enemy{fill:var(--plr-enemy)}.player.local{fill:var(--plr-local)}.player.name-hidden p{display:none}@media screen and (width<=730px){.player{width:12px;height:12px}.player p{font-size:12px}}.dropdown{background-color:var(--panel-bg);border:1px solid var(--panel-brd);color:var(--text);border-radius:8px;padding:8px 10px;font-size:14px;font-weight:500}.notificator{color:var(--ntf-f-col);border-radius:8px;align-items:center;height:100%;padding:5px 8px;display:flex}.notificator p{font-size:14px}.notificator.success{background-color:var(--ntf-s-bg);border:1px solid var(--ntf-s-col);color:var(--ntf-s-col)}.notificator.success p{color:var(--ntf-s-col)}.notificator.failed{background-color:var(--ntf-f-bg);border:1px solid var(--ntf-f-col);color:var(--ntf-f-col)}.notificator.failed p{color:var(--ntf-f-col)}.main-input{background-color:var(--panel-bg);border:1px solid var(--panel-brd);color:var(--darker-text);border-radius:8px;outline:none;padding:5px 10px}.panel{background-color:var(--panel-bg);border:1px solid var(--panel-brd);border-radius:14px}.player-card{background-color:var(--panel-bg);border:1px solid var(--panel-brd);border-radius:10px;align-items:center;gap:10px;min-width:278px;min-height:80px;padding:5px 10px;display:flex;box-shadow:0 0 20px #0000004d}.player-card p{color:var(--darker-text);text-overflow:ellipsis;max-width:95px;font-size:14px;overflow:hidden}.player-card h3{color:var(--text);margin-left:2.5px;font-size:14px}.player-card svg{color:var(--text);width:16px;height:16px}.player-hp-bar{background-color:var(--panel-bg);border:1px solid var(--panel-brd);border-radius:5px;width:60px;height:5px;position:relative}.player-hp-bar:before{content:"";height:5px;width:var(--hp,0%);background-color:#fff;border-radius:5px;position:absolute}.player-avatar{background-color:var(--panel-bg);border:1px solid var(--panel-brd);width:48px;height:48px;color:var(--darker-text);border-radius:8px;justify-content:center;align-items:center;display:flex}.player-card-wrap{flex-direction:column;gap:2px;display:flex}.player-header-wrap{align-items:center;gap:2px;display:flex}.player-weapons-wrap{gap:3px;display:flex}.players-granades-wrap{gap:5px;display:flex}.player-weapons-wrap img{height:24px}.players-granades-wrap img{height:18px}.player-card.dead{border:1px dashed var(--panel-brd)}@media screen and (width<=900px){.player-card{flex-direction:column;justify-content:center;align-items:center;width:64px;height:64px;display:flex}.player-card p{text-wrap:nowrap;text-overflow:ellipsis;max-width:60px;font-size:14px;overflow:hidden}}.download-container{justify-content:center;align-items:center;height:100%;display:flex}.download-panel{flex-direction:column;gap:24px;width:100%;max-width:350px;padding:2rem 1rem;display:flex;box-shadow:0 0 24px #0006}.download-header{justify-content:space-between;align-items:center;display:flex}.download-name-wrap{flex-direction:column;display:flex}.download-name-wrap h2{color:var(--text);font-size:20px}.download-name-wrap p{color:var(--darker-text);font-size:14px}.download-version{background-color:var(--accent);border-radius:25px;justify-content:center;align-items:center;padding:2px 10px;display:flex}.download-version p{color:var(--accent-text);font-size:12px;font-weight:600}.download-info{background-color:var(--info-bg);border:1px solid var(--info-brd);border-radius:12px;flex-direction:column;display:flex}.download-info .row:last-child{border-bottom:none}.download-info .row{border-bottom:1px solid var(--info-brd);justify-content:space-between;display:flex}.download-info span{color:var(--darker-text);margin:10px;font-size:14px}.download-info .row span:last-child{color:var(--text)}.download-btn{min-height:40px}.download-btn p{font-size:16px}.download-btn svg{height:20px}.login-container{justify-content:center;align-items:center;height:100%;display:flex}.login-form{padding:2rem 1rem;box-shadow:0 0 20px #0000004d}.login-form form{flex-direction:column;align-items:center;gap:12px;display:flex}.login-form h2{color:var(--text);text-align:center;margin-bottom:1rem}.login-form p{color:var(--darker-text);font-size:14px;transform:translate(2px)}.login-wrap{flex-direction:column;gap:3px;width:100%;display:flex}.login-wrap input{height:35px}.login-form button{justify-content:center;align-items:center;width:100%;display:flex}.login-switch{color:var(--darker-text);cursor:pointer;text-align:end;margin-top:10px;font-size:14px;text-decoration:underline}.login-output{text-wrap:wrap}.login-form .login-hint{opacity:.8;text-wrap:wrap;width:0;min-width:100%;font-size:12px;line-height:1.3}.settings-container{justify-content:center;width:100%;height:100%;padding:1rem;display:flex}.settings-panel{flex-direction:column;gap:8px;padding:1rem;display:flex;box-shadow:0 0 15px #0000004d}.settings-layout{flex-direction:column;gap:10px;width:100%;max-width:850px;display:flex}.settings-item{justify-content:space-between;align-items:center;gap:10px;margin-top:10px;display:flex}.settings-wrap{flex-direction:column;display:flex}.settings-layout h1,h2,h3{color:var(--text)}.settings-layout p{color:var(--darker-text);text-wrap:wrap;max-width:680px}.settings-input{width:100%;height:100%}.toggle{background-color:var(--panel-bg);border:1px solid var(--panel-brd);border-radius:16px;width:65px;height:32px;transition:all .3s;position:relative}.toggle:before{content:"";background-color:var(--toggle-on-bg);border-radius:50%;width:20px;height:20px;transition:all .3s;position:absolute;top:5px;left:6px}.toggle.checked:before{background-color:var(--panel-bg);transform:translate(30px)}.toggle.checked{background-color:var(--toggle-on-bg);border:1px solid #0000}.navbar{background:var(--panel-bg);border:1px solid var(--panel-brd);border-radius:16px;align-self:center;margin:10px;padding:6px;position:fixed;box-shadow:0 0 14px #0006}.navbar nav{gap:10px;display:flex}.navbar nav a{color:var(--darker-text);border-radius:8px;padding:5px;text-decoration:none;transition:all .25s}.navbar nav a.active{background-color:var(--tab-active-bg);color:var(--text-on-white)}.app{background:var(--app-bg);flex-direction:column;height:100vh;display:flex}
