/* Botão flutuante — compartilhar / redes */

.kingdom-fab-stack {

  pointer-events: none;

}



.kingdom-share-fab,

.kingdom-share-panel {

  pointer-events: auto;

}



.kingdom-share-fab {

  position: relative;

  display: inline-flex;

  width: 3.85rem;

  height: 3.85rem;

  flex-shrink: 0;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.16);

  border-radius: 999px;

  background: rgba(12, 16, 24, 0.96);

  color: var(--platform-steam-solid, #45d1ff);

  box-shadow:

    0 12px 32px rgba(0, 0, 0, 0.45),

    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  cursor: pointer;

  transition:

    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),

    background-color 0.22s ease,

    border-color 0.22s ease,

    color 0.22s ease,

    box-shadow 0.28s ease;

}



@media (min-width: 640px) {

  .kingdom-share-fab {

    width: 4.25rem;

    height: 4.25rem;

  }

}



.kingdom-share-fab:hover {

  transform: scale(1.05);

  border-color: rgba(69, 209, 255, 0.35);

  background: rgba(18, 24, 36, 0.98);

}



.kingdom-share-fab[aria-expanded='true'] {

  color: #fff;

  border-color: rgba(69, 209, 255, 0.42);

  background: rgba(69, 209, 255, 0.14);

  box-shadow:

    0 14px 36px rgba(69, 209, 255, 0.18),

    inset 0 1px 0 rgba(255, 255, 255, 0.1);

}



.kingdom-share-fab__icon {

  position: absolute;

  transition:

    opacity 0.26s ease,

    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);

}



.kingdom-share-fab__icon--share {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: rotate(0deg) scale(1);

}



.kingdom-share-fab__icon--close {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: rotate(-90deg) scale(0.6);

}



.kingdom-share-fab[aria-expanded='true'] .kingdom-share-fab__icon--share {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: rotate(90deg) scale(0.6);

}



.kingdom-share-fab[aria-expanded='true'] .kingdom-share-fab__icon--close {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: rotate(0deg) scale(1);

}



.kingdom-share-panel {

  width: min(18.5rem, calc(100vw - 2rem));

  max-height: min(22rem, calc(100vh - 10rem));

  overflow: hidden;

  border: 1px solid rgba(69, 209, 255, 0.2);

  border-radius: 1.1rem;

  background: rgba(10, 14, 22, 0.97);

  box-shadow:

    0 20px 48px rgba(0, 0, 0, 0.5),

    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  transform-origin: bottom right;

  opacity: 0;

  visibility: hidden;

  transform: translateY(18px) scale(0.9);

  filter: blur(4px);

  transition:

    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),

    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),

    filter 0.38s cubic-bezier(0.22, 1, 0.36, 1),

    visibility 0.38s;

  pointer-events: none;

}



.kingdom-share-panel[data-state='open'] {

  opacity: 1;

  visibility: visible;

  transform: translateY(0) scale(1);

  filter: blur(0);

  pointer-events: auto;

}



.kingdom-share-panel[data-state='closing'] {

  opacity: 0;

  visibility: hidden;

  transform: translateY(14px) scale(0.94);

  filter: blur(2px);

  pointer-events: none;

  transition-duration: 0.26s;

}



.kingdom-share-panel__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  padding: 0.85rem 0.95rem 0.75rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  opacity: 0;

  transform: translateY(-6px);

}



.kingdom-share-panel[data-state='open'] .kingdom-share-panel__header {

  opacity: 1;

  transform: translateY(0);

  animation: kingdom-share-header-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;

}



.kingdom-share-panel__heading {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  font-size: 0.88rem;

  font-weight: 700;

  color: #fff;

}



.kingdom-share-panel__close {

  display: inline-flex;

  width: 2rem;

  height: 2rem;

  align-items: center;

  justify-content: center;

  border: none;

  border-radius: 0.55rem;

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.72);

  cursor: pointer;

  transition: background-color 0.18s ease, color 0.18s ease;

}



.kingdom-share-panel__close:hover {

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

}



.kingdom-share-panel__list {

  display: flex;

  max-height: min(18rem, calc(100vh - 14rem));

  flex-direction: column;

  gap: 0.35rem;

  padding: 0.65rem;

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;

}



.kingdom-share-panel__list::-webkit-scrollbar {

  width: 4px;

}



.kingdom-share-panel__list::-webkit-scrollbar-thumb {

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.12);

}



.kingdom-share-panel__link {

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 0.7rem;

  padding: 0.72rem 0.75rem;

  border: 1px solid transparent;

  border-radius: 0.85rem;

  background: rgba(255, 255, 255, 0.03);

  color: #fff;

  text-decoration: none;

  opacity: 0;

  transform: translateY(10px) scale(0.97);

  transition:

    background-color 0.18s ease,

    border-color 0.18s ease,

    transform 0.18s ease;

}



.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link {

  opacity: 1;

  transform: translateY(0) scale(1);

  animation: kingdom-share-item-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;

}



.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(1) { animation-delay: 0.1s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(2) { animation-delay: 0.16s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(3) { animation-delay: 0.22s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(4) { animation-delay: 0.28s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(5) { animation-delay: 0.34s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(6) { animation-delay: 0.4s; }



.kingdom-share-panel__link:hover {

  border-color: rgba(69, 209, 255, 0.22);

  background: rgba(69, 209, 255, 0.08);

  transform: translateX(2px) scale(1.01);

}



.kingdom-share-panel__icon {

  display: inline-flex;

  width: 2.15rem;

  height: 2.15rem;

  align-items: center;

  justify-content: center;

  border-radius: 0.62rem;

  background: rgba(255, 255, 255, 0.06);

  transform: scale(0.72);

  opacity: 0;

}



.kingdom-share-panel[data-state='open'] .kingdom-share-panel__icon {

  opacity: 1;

  transform: scale(1);

  animation: kingdom-share-icon-pop 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;

}



.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(1) .kingdom-share-panel__icon { animation-delay: 0.14s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(2) .kingdom-share-panel__icon { animation-delay: 0.2s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(3) .kingdom-share-panel__icon { animation-delay: 0.26s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(4) .kingdom-share-panel__icon { animation-delay: 0.32s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(5) .kingdom-share-panel__icon { animation-delay: 0.38s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(6) .kingdom-share-panel__icon { animation-delay: 0.44s; }



.kingdom-share-panel__icon--mail {

  color: var(--platform-steam-solid, #45d1ff);

}



.kingdom-share-panel__brand {

  width: 1.2rem;

  height: 1.2rem;

  background: #fff;

  mask-position: center;

  mask-repeat: no-repeat;

  mask-size: contain;

  -webkit-mask-position: center;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-size: contain;

}



.kingdom-share-panel__label {

  font-size: 0.88rem;

  font-weight: 600;

  line-height: 1.2;

  text-align: left;

}



.kingdom-share-panel__arrow {

  color: rgba(255, 255, 255, 0.38);

  opacity: 0;

  transform: translate(-4px, 4px);

}



.kingdom-share-panel[data-state='open'] .kingdom-share-panel__arrow {

  opacity: 1;

  transform: translate(0, 0);

  animation: kingdom-share-arrow-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;

}



.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(1) .kingdom-share-panel__arrow { animation-delay: 0.2s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(2) .kingdom-share-panel__arrow { animation-delay: 0.26s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(3) .kingdom-share-panel__arrow { animation-delay: 0.32s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(4) .kingdom-share-panel__arrow { animation-delay: 0.38s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(5) .kingdom-share-panel__arrow { animation-delay: 0.44s; }

.kingdom-share-panel[data-state='open'] .kingdom-share-panel__link:nth-child(6) .kingdom-share-panel__arrow { animation-delay: 0.5s; }



@keyframes kingdom-share-header-in {

  from {

    opacity: 0;

    transform: translateY(-8px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes kingdom-share-item-in {

  from {

    opacity: 0;

    transform: translateY(12px) scale(0.96);

  }



  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



@keyframes kingdom-share-icon-pop {

  0% {

    opacity: 0;

    transform: scale(0.55);

  }



  70% {

    transform: scale(1.08);

  }



  100% {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes kingdom-share-arrow-in {

  from {

    opacity: 0;

    transform: translate(-6px, 6px);

  }



  to {

    opacity: 1;

    transform: translate(0, 0);

  }

}



@media (prefers-reduced-motion: reduce) {

  .kingdom-share-fab,

  .kingdom-share-panel,

  .kingdom-share-panel__header,

  .kingdom-share-panel__link,

  .kingdom-share-panel__icon,

  .kingdom-share-panel__arrow {

    transition: none;

    animation: none !important;

    filter: none !important;

    transform: none !important;

  }

  .kingdom-share-fab__icon {

    transition: none;

    animation: none !important;

    filter: none !important;

    transform: none !important;

  }

  .kingdom-share-fab__icon--share {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

  }

  .kingdom-share-fab__icon--close {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

  }

  .kingdom-share-fab[aria-expanded='true'] .kingdom-share-fab__icon--share {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

  }

  .kingdom-share-fab[aria-expanded='true'] .kingdom-share-fab__icon--close {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

  }

  .kingdom-share-panel[data-state='open'] .kingdom-share-panel__header,

  .kingdom-share-panel[data-state='open'] .kingdom-share-panel__link,

  .kingdom-share-panel[data-state='open'] .kingdom-share-panel__icon,

  .kingdom-share-panel[data-state='open'] .kingdom-share-panel__arrow {

    opacity: 1 !important;

    transform: none !important;

  }

}

