/* R72 compatibility: retain the old lobby skin only on legacy-owned surfaces.
   R22/R71 mounts its modern hub inside #pack326aOnlinePanel:not(.r25r22-online-host) for input routing.
   The old :not(.good):not(.warn):not(.gold) rule otherwise wins specificity
   over the entire new hub and paints tabs, close and back buttons blue.
   Network/input ownership remains unchanged. Original: PACK333R56. */
body.sk-online-panel-allowed #pack326aOnlinePanel:not(.r25r22-online-host).open,
body.sk-online-panel-allowed #pack333r12RoomPanel.open{
  background:
    radial-gradient(circle at 18% 12%, rgba(56,189,248,.16), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(250,204,21,.10), transparent 32%),
    rgba(2,6,23,.88)!important;
  backdrop-filter: blur(10px) saturate(1.08);
}

#pack326aOnlinePanel:not(.r25r22-online-host).open .p326awin,
#pack333r12RoomPanel.open .roomWin{
  border-color:var(--sk-panel-border)!important;
  background:
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(3,7,18,.99)),
    linear-gradient(90deg, rgba(56,189,248,.10), rgba(250,204,21,.06))!important;
  box-shadow:var(--sk-panel-shadow)!important;
  color:var(--sk-text)!important;
  font-family:var(--sk-font-ui)!important;
}

#pack326aOnlinePanel:not(.r25r22-online-host).open h2,
#pack333r12RoomPanel.open h2{
  letter-spacing:.02em;
  text-shadow:0 0 18px rgba(56,189,248,.22);
}

#pack326aOnlinePanel:not(.r25r22-online-host).open h3,
#pack333r12RoomPanel.open h3{
  color:var(--sk-gold)!important;
  text-shadow:0 0 16px rgba(250,204,21,.18);
}

#pack326aOnlinePanel:not(.r25r22-online-host).open .box,
#pack333r12RoomPanel.open .box,
#pack326aOnlinePanel:not(.r25r22-online-host).open .status,
#pack333r12RoomPanel.open .status{
  background:linear-gradient(180deg, rgba(15,23,42,.84), rgba(2,6,23,.92))!important;
  border-color:rgba(148,163,184,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

#pack326aOnlinePanel:not(.r25r22-online-host).open textarea,
#pack333r12RoomPanel.open textarea,
#pack326aOnlinePanel:not(.r25r22-online-host).open input,
#pack333r12RoomPanel.open input,
#pack326aOnlinePanel:not(.r25r22-online-host).open select,
#pack333r12RoomPanel.open select{
  background:#020617!important;
  border-color:rgba(96,165,250,.36)!important;
  color:#e0f2fe!important;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(2,6,23,.65);
}

#pack326aOnlinePanel:not(.r25r22-online-host).open textarea:focus,
#pack333r12RoomPanel.open textarea:focus,
#pack326aOnlinePanel:not(.r25r22-online-host).open input:focus,
#pack333r12RoomPanel.open input:focus,
#pack326aOnlinePanel:not(.r25r22-online-host).open select:focus,
#pack333r12RoomPanel.open select:focus{
  border-color:rgba(56,189,248,.78)!important;
  box-shadow:0 0 0 3px rgba(56,189,248,.16), inset 0 0 0 1px rgba(2,6,23,.65);
}

#pack326aOnlinePanel:not(.r25r22-online-host).open button,
#pack333r12RoomPanel.open button{
  border-radius:13px!important;
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .12s ease, border-color .12s ease, filter .12s ease;
}
#pack326aOnlinePanel:not(.r25r22-online-host).open button:hover,
#pack333r12RoomPanel.open button:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}
#pack326aOnlinePanel:not(.r25r22-online-host).open button:active,
#pack333r12RoomPanel.open button:active{
  transform:translateY(0) scale(.99);
}

#pack326aOnlinePanel:not(.r25r22-online-host).open button.good,
#pack333r12RoomPanel.open button.good{
  background:linear-gradient(180deg,#166534,#14532d)!important;
  border-color:rgba(134,239,172,.58)!important;
}
#pack326aOnlinePanel:not(.r25r22-online-host).open button.warn,
#pack333r12RoomPanel.open button.warn{
  background:linear-gradient(180deg,#9a3412,#7c2d12)!important;
  border-color:rgba(253,186,116,.62)!important;
}
#pack326aOnlinePanel:not(.r25r22-online-host).open button.gold,
#pack333r12RoomPanel.open button.gold,
#pack333r12RoomPanel.open button:not(.good):not(.warn):not(.blue){
  background:linear-gradient(180deg,#92400e,#713f12)!important;
  border-color:rgba(250,204,21,.58)!important;
}
#pack326aOnlinePanel:not(.r25r22-online-host).open button.blue,
#pack333r12RoomPanel.open button.blue,
#pack326aOnlinePanel:not(.r25r22-online-host).open button:not(.good):not(.warn):not(.gold){
  background:linear-gradient(180deg,#1e3a8a,#172554)!important;
  border-color:rgba(125,211,252,.58)!important;
}

@media (max-width: 760px){
  #pack326aOnlinePanel:not(.r25r22-online-host).open .p326awin,
  #pack333r12RoomPanel.open .roomWin{
    border-radius:18px!important;
    padding:14px!important;
  }
}