#screen-friends {
  display: none;
  align-items: center;
  padding: 0 0 calc(80px + var(--sa-bottom)) !important;
  
  background: url('assets/cloud-play/friends-sky-v288.webp') center center / cover no-repeat, #52b3f8;
}
#screen-friends.active { display: flex; }
#screen-friends.join-input-focused {
  padding-bottom: calc(80px + var(--sa-bottom) + var(--join-keyboard-space, 260px)) !important;
}
#screen-friends #shared-topbar {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 13px 8px;
  background: linear-gradient(180deg, #66b7f2 0%, #60b6f5 70%, #58b5f7 100%);
}
.friends-proto-stage {
  position: relative;
  flex: 0 0 auto;
  width: 94%;
  margin-top: 7px;
  
  aspect-ratio: 852 / 1486;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.friends-proto-stage::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(#58b5f7, #58b5f700);
  pointer-events: none;
}
.friends-proto-stage::after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: linear-gradient(transparent, #6cbdf88c);
  pointer-events: none;
}
.friends-proto-plate {
  position: absolute;
  z-index: -1;
  top: -6.4935%;
  left: 0;
  display: block;
  width: 100%;
  height: 119.74%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.friends-proto-create,
.friends-proto-random,
.friends-proto-submit {
  position: absolute;
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.friends-proto-create { left: 8.5%; top: 84%; width: 83%; height: 14%; }
.friends-proto-random { left: 8.5%; top: 55%; width: 83%; height: 13.7%; }
.friends-proto-label {
  position: absolute;
  top: 50%;
  left: 44%;
  width: 52%;
  transform: translateY(-50%);
  color: #194d32;
  font: 700 clamp(14px, 4.5vw, 24px)/1.15 var(--font-bangla);
  text-align: center;
  text-shadow: 0 2px 1px #f6ffe9, 0 1px 4px #f6ffe9;
  pointer-events: none;
}
.friends-proto-random .friends-proto-label {
  color: #774018;
  font-size: clamp(12px, 3.9vw, 21px);
  text-shadow: 0 2px 1px #fff2cf, 0 1px 4px #fff2cf;
}
.friends-proto-join { position: absolute; z-index: 2; left: 8%; top: 69%; width: 84%; height: 15%; }
.friends-proto-code {
  position: absolute;
  left: 30%;
  top: 44%;
  width: 51%;
  height: 37%;
  border: 2px solid #4ca7d8;
  border-radius: 9px;
  outline: 0;
  padding: 0 8px;
  background: linear-gradient(180deg, #fffaf0, #f9f2df);
  box-shadow: inset 0 2px 4px #326c891f, 0 2px 2px #1c60943b;
  color: #163f65;
  font: 800 clamp(15px, 4.4vw, 19px)/1 var(--font-english);
  letter-spacing: .12em;
  text-align: center;
  caret-color: #1279c0;
  text-shadow: 0 1px 0 #fff;
  font-variant-numeric: tabular-nums;
}
.friends-proto-code:focus { border-color: #097ab8; box-shadow: 0 0 0 3px #58dcffab, inset 0 2px 4px #326c891f; }
.friends-proto-submit { left: 83%; top: 42%; width: 16%; height: 43%; }
.friends-proto-create:focus-visible,
.friends-proto-random:focus-visible,
.friends-proto-submit:focus-visible { outline: 3px solid #036da4; outline-offset: -4px; border-radius: 24px; }
.friends-proto-create:active,
.friends-proto-random:active,
.friends-proto-submit:active { filter: brightness(1.1); }

#screen-friends .fee-emboss {
  right: 3%;
  bottom: 6%;
  width: auto;
  padding: 2px 6px;
  transform: none;
  border: 1px solid #fff8;
  border-radius: 20px;
  background: #215976a8;
  font-size: clamp(7px, 2.2vw, 9px);
  letter-spacing: 0;
  text-shadow: 0 1px 1px #18475e;
}
#screen-friends .friends-proto-join .fee-emboss { right: 2%; bottom: 3%; }
#screen-friends .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-height: 720px) {
  #screen-friends { padding-bottom: calc(90px + var(--sa-bottom)) !important; }
}