*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;--sat:env(safe-area-inset-top, 0px);}
body{font-family:Inter,system-ui,Arial;color:#e6ebff;background:radial-gradient(circle at 1px 1px, rgba(120,140,255,.15) 1px, transparent 0) 0 0/22px 22px,#05070f;min-height:100vh;min-height:100dvh;}
.wrapper{max-width:1400px;margin:0 auto;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));}
.main{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px);padding:8px 0;}
.form-box{width:100%;max-width:440px;background:rgba(10,13,28,.9);border:1px solid rgba(120,130,255,.15);border-radius:20px;padding:24px;backdrop-filter:blur(12px);box-shadow:0 0 40px rgba(120,130,255,.15);}
.logo-wrap{text-align:center;margin-bottom:14px;}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;}
.logo-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#6c7cff,#8b6cff);color:#fff;box-shadow:0 0 15px rgba(120,130,255,.5);animation:logoFloat 2.2s ease-in-out infinite;will-change:transform;}
.logo-text{font-size:22px;font-weight:700;color:#6c7cff;}
.form-slogan{font-size:13px;opacity:.7;margin-top:6px;}
.label{font-size:12px;opacity:.7;margin-bottom:4px;display:block;}
.input{width:100%;padding:12px;margin-bottom:10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.4);color:white;}
.btn{width:100%;padding:12px;border-radius:10px;border:none;cursor:pointer;font-weight:600;margin-top:8px;transition:.25s;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.btn svg{transition:.25s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(120,130,255,.3);}
.btn:hover svg{transform:translateX(4px) scale(1.1);}
.btn:active{transform:scale(.97);}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);opacity:0;transition:.4s;}
.btn:hover::after{opacity:1;animation:shine 1s linear;}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.btn-create{background:linear-gradient(90deg,#6c7cff,#8b6cff);color:white;}
.btn-join{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:white;}
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 25px 0;
  opacity: .6;
  font-size: 12px;
  position: relative;
}
.divider .line {
  flex: 1;
  height: 1px;
  border: none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.divider span {
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  background: rgba(10,13,28,.9);
  padding: 0 8px;
  font-weight: 600;
}
.social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:10px;margin-top:8px;cursor:pointer;transition:.25s;}
.social-btn:hover{transform:translateY(-2px);}
.steam{background:#171a21;border:1px solid #2a475e;}
.kick{background:#0b0f0c;border:1px solid #00ff88;}
.social-btn img{width:18px}
.avatar-section{border:1px solid rgba(255,255,255,.1);padding:10px;border-radius:12px;margin-bottom:10px;}
.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px;}
.avatar-grid img{width:100%;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:.2s;}
.avatar-grid img:hover{transform:scale(1.05);border-color:#6c7cff;}
.avatar-grid img.active{border-color:#8b6cff;box-shadow:0 0 10px rgba(120,130,255,.6);}
.profile{display:none;align-items:center;justify-content:space-between;background:rgba(0,0,0,.4);padding:10px;border-radius:12px;margin-bottom:12px;border:1px solid rgba(255,255,255,.08)}
.profile-left{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:#333;background-size:cover;background-position:center;}
.logout{padding:8px 12px;border-radius:8px;background:rgba(255,70,70,.2);border:1px solid rgba(255,70,70,.4);color:#ff8080;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:4px;justify-content:center;min-height:44px;min-width:44px;-webkit-tap-highlight-color:transparent;}
.toast{
  position:fixed;
  z-index:200;
  left:var(--toast-left, 12px);
  width:var(--toast-width, min(calc(100vw - 24px), 440px));
  max-width:100vw;
  top:var(--toast-anchor-y, max(calc(16px + var(--sat)), var(--sat)));
  transform:translateY(calc(-100% - 18px)) scale(.94);
  transform-origin:50% 100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 44px 17px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(12,14,28,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 1px rgba(120,130,255,.08) inset;
  opacity:0;
  pointer-events:none;
  filter:blur(4px);
  overflow:hidden;
}
.toast:not([hidden]){pointer-events:auto;}
.toast.toast--in{
  animation:toastIn .52s cubic-bezier(.34,1.25,.52,1) forwards;
}
.toast.toast--out{
  animation:toastOut .4s cubic-bezier(.55,0,.85,.36) forwards;
}
@keyframes toastIn{
  0%{opacity:0;transform:translateY(calc(-100% - 36px)) scale(.88) rotate(-1deg);filter:blur(6px);}
  70%{opacity:1;transform:translateY(calc(-100% + 6px)) scale(1.02) rotate(0deg);filter:blur(0);}
  100%{opacity:1;transform:translateY(-100%) scale(1) rotate(0deg);filter:blur(0);}
}
@keyframes toastOut{
  0%{opacity:1;transform:translateY(-100%) scale(1);filter:blur(0);}
  100%{opacity:0;transform:translateY(calc(-100% - 28px)) scale(.92) rotate(1deg);filter:blur(4px);}
}
.toast-icon{
  flex-shrink:0;
  width:36px;height:36px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  align-self:center;
}
.toast.success .toast-icon{background:rgba(0,230,140,.15);color:#3ef5a8;}
.toast.warning .toast-icon{background:rgba(255,180,50,.15);color:#ffc14d;}
.toast.error .toast-icon{background:rgba(255,80,90,.15);color:#ff7b85;}
.toast-body{flex:1;min-width:0;display:flex;align-items:center;min-height:36px;}
.toast-message{font-size:14px;line-height:1.45;font-weight:500;color:#e8ecff;display:block;}
.toast.success .toast-message{color:#c8ffe8;}
.toast.warning .toast-message{color:#ffe8c8;}
.toast.error .toast-message{color:#ffd6d8;}
.toast-close{
  position:absolute;
  top:10px;right:10px;
  width:32px;height:32px;
  border:none;border-radius:8px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.65);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  transition:background .2s,color .2s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.toast-close:hover{background:rgba(255,255,255,.12);color:#fff;}
.toast-close:active{transform:scale(.92);}
.toast-progress{
  position:absolute;
  left:0;bottom:0;height:3px;
  width:100%;
  transform-origin:left;
  transform:scaleX(0);
  border-radius:0 0 20px 20px;
}
.toast.success .toast-progress{background:linear-gradient(90deg,#00c978,#3ef5a8);}
.toast.warning .toast-progress{background:linear-gradient(90deg,#e6a020,#ffc14d);}
.toast.error .toast-progress{background:linear-gradient(90deg,#e04050,#ff7b85);}
.toast.toast--in .toast-progress{animation:toastProgress var(--toast-dur, 3s) linear forwards;}
@keyframes toastProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast-icon i{font-size:15px;}
.refresh-avatar{margin-bottom:10px;text-align:right;cursor:pointer;color:#6c7cff;font-size:12px;}
.refresh-avatar:hover{opacity:.8;}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.stats-box {
  margin-top: 16px;
  background: rgba(0,0,0,.3);
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  opacity: .8;
}
.stats-box span {
  font-weight: 600;
  color: #6c7cff;
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(6px);
}
.modal.active { display:flex }
.modal-box {
  background: rgba(10,13,28,.95);
  border: 1px solid rgba(120,130,255,.18);
  border-radius: 16px;
  padding: 18px;
  width: 320px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal-title {
  font-size: 14px;
  margin-bottom: 12px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.m-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: white;
  cursor: pointer;
  font-size: 12px;
}
.m-btn:hover { transform:translateY(-2px); }
.m-btn:active { transform:scale(.97); }
.m-btn.danger {
  background: rgba(255,70,70,.2);
  border: 1px solid rgba(255,70,70,.4);
  color: #ff8080;
}
@media (max-width:480px){
  .wrapper{padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));}
  .form-box{padding:20px 16px;border-radius:16px;}
  .logo-text{font-size:20px;}
  .form-slogan{font-size:12px;}
  .input{padding:14px 12px;font-size:16px;}
  .btn{padding:14px 12px;min-height:48px;font-size:15px;}
  .avatar-grid{grid-template-columns:repeat(5, minmax(0, 1fr));gap:8px;}
  .avatar-grid img{min-height:44px;aspect-ratio:1;}
  .profile{flex-wrap:wrap;gap:10px;}
  .profile-left{flex:1;min-width:0;}
  .stats-box{font-size:12px;padding:10px;}
  .modal-box{width:min(calc(100vw - 32px), 320px);margin:0 16px;}
  .modal-actions{flex-direction:column-reverse;}
  .m-btn{width:100%;padding:12px;font-size:14px;min-height:44px;}
  .social-btn{padding:14px 12px;min-height:48px;}
  .refresh-avatar{text-align:left;margin-bottom:8px;}
  .toast{border-radius:16px;}
  .toast-progress{border-radius:0 0 16px 16px;}
}
@media (prefers-reduced-motion:reduce){
  .btn::after,.toast-progress{animation:none!important;}
  .toast.toast--in,.toast.toast--out{animation:none!important;}
  .toast.toast--in{opacity:1;transform:translateY(-100%) scale(1);filter:none!important;}
  .toast.toast--out{opacity:0;transform:translateY(calc(-100% - 10px)) scale(.98);filter:none!important;}
  .logo-icon{animation-duration:3.5s;}
  .btn:hover{transform:none;}
}