/* Free profile cosmetics, all drawn with CSS: avatar frames and profile effects. */

/* ===================== avatar decorations (frames) ===================== */

.avatar.deco {
  overflow: visible;
}

.deco-layer {
  --ring: calc(var(--avatar-size, 32px) * 0.09);
  position: absolute;
  inset: calc(var(--avatar-size, 32px) * -0.11);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* A gradient ring around the avatar (mask keeps only the border). */
.deco-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: var(--ring);
  background: var(--deco-bg, transparent);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.avatar .status {
  z-index: 2;
}

@keyframes deco-spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes deco-flicker {
  0%,
  100% {
    filter: drop-shadow(0 0 3px #ff6a00) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 7px #ffb300) brightness(1.25);
  }
}
@keyframes deco-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px var(--glow));
  }
  50% {
    filter: drop-shadow(0 0 6px var(--glow));
  }
}
@keyframes deco-float {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -8%);
  }
}
@keyframes deco-twinkle {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Neon */
.deco-neon .deco-layer {
  --glow: #00e5ff;
  animation: deco-glow 2s ease-in-out infinite;
}
.deco-neon .deco-layer::before {
  --deco-bg: conic-gradient(#00e5ff, #b14bff, #ff2bd6, #00e5ff);
  animation: deco-spin 3s linear infinite;
}

/* Fogo */
.deco-fogo .deco-layer {
  animation: deco-flicker 0.9s ease-in-out infinite;
}
.deco-fogo .deco-layer::before {
  --deco-bg: conic-gradient(from 180deg, #ff2d00, #ff8a00, #ffd000, #ff8a00, #ff2d00);
  animation: deco-spin 2.2s linear infinite reverse;
}

/* Gelo */
.deco-gelo .deco-layer {
  --glow: #a8e6ff;
  animation: deco-glow 2.6s ease-in-out infinite;
}
.deco-gelo .deco-layer::before {
  --deco-bg: conic-gradient(#e8fbff, #7fd3ff, #ffffff, #4aa8ff, #e8fbff);
}
.deco-gelo .deco-layer::after {
  content: '❄';
  position: absolute;
  right: -2%;
  top: -6%;
  font-size: calc(var(--avatar-size, 32px) * 0.32);
  color: #dff6ff;
  text-shadow: 0 0 6px #7fd3ff;
}

/* Arco-íris */
.deco-arcoiris .deco-layer::before {
  --deco-bg: conic-gradient(#ff3b3b, #ff9f1a, #ffe14d, #3ddc84, #3bb0ff, #8f5bff, #ff3b3b);
  animation: deco-spin 4s linear infinite;
}

/* Ouro */
.deco-ouro .deco-layer {
  --glow: #ffcf4d;
  animation: deco-glow 2.4s ease-in-out infinite;
}
.deco-ouro .deco-layer::before {
  --deco-bg: conic-gradient(#8a5a00, #ffd76a, #fff3c4, #ffbf2e, #8a5a00, #ffd76a, #8a5a00);
  animation: deco-spin 6s linear infinite;
}

/* Galáxia */
.deco-galaxia .deco-layer {
  --glow: #8f5bff;
  animation: deco-glow 3s ease-in-out infinite;
}
.deco-galaxia .deco-layer::before {
  --deco-bg: conic-gradient(#1b0b3a, #5b2bd6, #ff4fd8, #2b7bff, #1b0b3a);
  animation: deco-spin 8s linear infinite;
}
.deco-galaxia .deco-layer::after {
  content: '✦';
  position: absolute;
  left: 4%;
  top: 2%;
  font-size: calc(var(--avatar-size, 32px) * 0.22);
  color: #fff;
  animation: deco-twinkle 1.8s ease-in-out infinite;
}

/* Corações (orbiting hearts) */
.deco-coracoes .deco-layer::before {
  --deco-bg: linear-gradient(135deg, #ff7eb3, #ff3d77);
}
.deco-coracoes .deco-orbit {
  position: absolute;
  inset: 0;
  animation: deco-spin 5s linear infinite;
}
.deco-coracoes .deco-orbit span {
  position: absolute;
  font-size: calc(var(--avatar-size, 32px) * 0.24);
  color: #ff4d8d;
  text-shadow: 0 0 4px rgba(255, 77, 141, 0.7);
}
.deco-coracoes .deco-orbit span:nth-child(1) {
  left: 50%;
  top: -10%;
}
.deco-coracoes .deco-orbit span:nth-child(2) {
  left: 88%;
  top: 62%;
}
.deco-coracoes .deco-orbit span:nth-child(3) {
  left: 2%;
  top: 62%;
}

/* Estrelas (twinkling) */
.deco-estrelas .deco-layer::before {
  --deco-bg: linear-gradient(135deg, #ffe680, #ffb84d);
}
.deco-estrelas .deco-orbit span {
  position: absolute;
  font-size: calc(var(--avatar-size, 32px) * 0.22);
  color: #fff6b0;
  text-shadow: 0 0 5px #ffd84d;
  animation: deco-twinkle 1.6s ease-in-out infinite;
}
.deco-estrelas .deco-orbit span:nth-child(1) {
  left: 78%;
  top: -8%;
}
.deco-estrelas .deco-orbit span:nth-child(2) {
  left: -6%;
  top: 30%;
  animation-delay: 0.5s;
}
.deco-estrelas .deco-orbit span:nth-child(3) {
  left: 70%;
  top: 80%;
  animation-delay: 1s;
}

/* Gatinho (cat ears) */
.deco-gatinho .deco-layer::before,
.deco-gatinho .deco-layer::after {
  content: '';
  position: absolute;
  top: -8%;
  width: 34%;
  height: 34%;
  padding: 0;
  -webkit-mask: none;
  mask: none;
  background: linear-gradient(135deg, #2b2b33 55%, #ff9fc6 56%);
  border-radius: 12% 70% 0 0;
}
.deco-gatinho .deco-layer::before {
  left: 6%;
  transform: rotate(-28deg);
}
.deco-gatinho .deco-layer::after {
  right: 6%;
  transform: rotate(28deg) scaleX(-1);
}

/* Coroa */
.deco-coroa .deco-layer::after {
  content: '👑';
  position: absolute;
  left: 50%;
  top: -24%;
  transform: translateX(-50%) rotate(-14deg);
  font-size: calc(var(--avatar-size, 32px) * 0.46);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}

/* Auréola */
.deco-aureola .deco-layer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -16%;
  width: 70%;
  height: 20%;
  border-radius: 50%;
  border: calc(var(--avatar-size, 32px) * 0.06) solid #ffe27a;
  box-shadow:
    0 0 8px #ffe27a,
    inset 0 0 6px #fff4c2;
  transform: translate(-50%, 0);
  animation: deco-float 2.4s ease-in-out infinite;
}

/* Chifres */
.deco-chifres .deco-layer::before,
.deco-chifres .deco-layer::after {
  content: '';
  position: absolute;
  top: -10%;
  width: 22%;
  height: 34%;
  padding: 0;
  -webkit-mask: none;
  mask: none;
  background: linear-gradient(180deg, #ff3b3b, #8b0000);
  border-radius: 80% 20% 0 0 / 100% 20% 0 0;
  filter: drop-shadow(0 0 3px rgba(255, 40, 40, 0.6));
}
.deco-chifres .deco-layer::before {
  left: 10%;
  transform: rotate(-22deg);
}
.deco-chifres .deco-layer::after {
  right: 10%;
  transform: rotate(22deg) scaleX(-1);
}

/* ============================ profile effects ============================ */

.fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}

.fx-p {
  position: absolute;
  left: var(--x);
  top: -10%;
  font-size: calc(18px * var(--size));
  line-height: 1;
  will-change: transform, opacity;
}

@keyframes fx-fall {
  0% {
    transform: translate(0, -10%) rotate(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--drift), 640px) rotate(540deg);
    opacity: 0.9;
  }
}
@keyframes fx-rise {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--drift), -560px) scale(1.1);
    opacity: 0;
  }
}
@keyframes fx-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.4) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}
@keyframes fx-sway {
  0% {
    transform: translate(0, -10%) rotate(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(calc(var(--drift) * -1), 300px) rotate(120deg);
  }
  100% {
    transform: translate(var(--drift), 640px) rotate(260deg);
    opacity: 0.8;
  }
}
@keyframes fx-aurora {
  0%,
  100% {
    transform: translateX(-20%) skewX(-12deg);
    opacity: 0.45;
  }
  50% {
    transform: translateX(20%) skewX(12deg);
    opacity: 0.8;
  }
}

/* Confete */
.fx-confete .fx-p {
  width: calc(8px * var(--size));
  height: calc(14px * var(--size));
  border-radius: 2px;
  background: var(--color);
  animation: fx-fall var(--dur) linear var(--delay) infinite;
}

/* Neve */
.fx-neve .fx-p {
  width: calc(7px * var(--size));
  height: calc(7px * var(--size));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  animation: fx-sway calc(var(--dur) * 1.6) linear var(--delay) infinite;
}

/* Corações */
.fx-coracoes .fx-p {
  top: auto;
  bottom: -10%;
  color: #ff4d8d;
  text-shadow: 0 0 8px rgba(255, 77, 141, 0.7);
  animation: fx-rise var(--dur) ease-in var(--delay) infinite;
}

/* Estrelas */
.fx-estrelas .fx-p {
  top: var(--y);
  color: #fff4b0;
  text-shadow: 0 0 8px #ffd84d;
  animation: fx-twinkle calc(var(--dur) * 0.5) ease-in-out var(--delay) infinite;
}

/* Chamas */
.fx-chamas .fx-p {
  top: auto;
  bottom: -12%;
  width: calc(26px * var(--size));
  height: calc(34px * var(--size));
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff3a0, #ffb300 35%, #ff4d00 70%, transparent 72%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: fx-rise calc(var(--dur) * 0.45) ease-out var(--delay) infinite;
}

/* Bolhas */
.fx-bolhas .fx-p {
  top: auto;
  bottom: -10%;
  width: calc(16px * var(--size));
  height: calc(16px * var(--size));
  border-radius: 50%;
  border: 1.5px solid rgba(180, 230, 255, 0.85);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(120, 200, 255, 0.12) 60%);
  animation: fx-rise calc(var(--dur) * 1.2) ease-in var(--delay) infinite;
}

/* Pétalas */
.fx-petalas .fx-p {
  width: calc(12px * var(--size));
  height: calc(9px * var(--size));
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #ffd1e3, #ff8fb8);
  animation: fx-sway calc(var(--dur) * 1.4) linear var(--delay) infinite;
}

/* Aurora */
.fx-aurora .fx-p {
  top: calc(var(--y) * 0.4);
  left: -30%;
  width: 160%;
  height: 40%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(61, 220, 132, 0.55), rgba(59, 176, 255, 0.5), rgba(143, 91, 255, 0.5), transparent);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: fx-aurora calc(var(--dur) * 1.5) ease-in-out var(--delay) infinite;
}

/* ======================= profile card with themes ======================= */

.profile-card.themed {
  background: linear-gradient(180deg, var(--theme-1), var(--theme-2));
}

.profile-card.themed .profile-section {
  background: rgba(0, 0, 0, 0.32);
}

.profile-card.themed .profile-avatar {
  background: var(--theme-1);
}

.profile-banner.image {
  background-size: cover;
  background-position: center;
}

.profile-activity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 12px;
  border-radius: 8px;
  background: rgba(47, 191, 113, 0.12);
  border: 1px solid rgba(47, 191, 113, 0.35);
}

.game-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2fbf71, #1d7a49);
  font-size: 20px;
}

.activity-line {
  color: var(--ok);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member .member-names,
.friend-text {
  min-width: 0;
}

.member-names {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

/* ============================ settings: profile ============================ */

.profile-editor {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.profile-preview {
  position: sticky;
  top: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-main);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}

.cosmetic-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 6px 8px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--bg-sidebar);
  font-size: 12px;
  overflow: hidden;
}

.cosmetic-option:hover {
  border-color: var(--bg-input);
}

.cosmetic-option.selected {
  border-color: var(--accent);
}

.cosmetic-option .fx-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: #121317;
}

.color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.color-row input[type='color'] {
  width: 44px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
}

.game-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-sidebar);
}

.game-row .side-label {
  flex: 1;
}

.game-now {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--bg-sidebar);
}

.window-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.window-list button {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-sidebar);
  text-align: left;
}

.window-list button:hover {
  background: var(--bg-elevated);
}

/* ============================ update banner ============================ */

.update-pill {
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: 10px;
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.update-pill .progress {
  width: 120px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-rail);
  overflow: hidden;
}

.update-pill .progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--ok));
}

/* ===================== settings window scrolling ===================== */

/* The settings area has a fixed height so its right side scrolls (before,
   long tabs like "Perfil" grew past the window and could not be reached). */
.settings-layout {
  height: min(760px, calc(100vh - 120px));
  max-height: none;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.settings-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.settings-nav {
  overflow-y: auto;
}

/* ===================== unsaved changes bar (settings) ===================== */

/* Sticks to the bottom of the scrolling settings area, always in view. */
.save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px 10px 16px;
  border-radius: 8px;
  background: #111214;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
  animation: save-bar-in 0.18s ease-out;
}

.save-bar-text {
  flex: 1;
  font-weight: 600;
}

.save-bar .link-btn {
  background: none;
}

.save-bar .link-btn:hover {
  text-decoration: underline;
  background: none;
}

@keyframes save-bar-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}

/* ============================ app logo ============================ */

.login-logo {
  width: 72px;
  height: 72px;
  justify-self: center;
  filter: drop-shadow(0 8px 18px rgba(106, 92, 255, 0.45));
}

.rail-btn.home .home-logo {
  width: 30px;
  height: 30px;
}

.rail-item:hover .rail-btn.home,
.rail-item.active .rail-btn.home {
  background: var(--bg-elevated);
}

/* ============ room for avatar frames (they extend past the photo) ============ */

/* The user panel used to clip everything outside its box, cutting frames and
   crowns. Only the name text is clipped now. */
.user-panel .user-chip {
  overflow: visible;
  padding: 4px 4px 4px 6px;
}

.user-panel .user-chip-names {
  overflow: hidden;
}

.user-panel .icon-btn {
  width: 28px;
  flex: none;
}

.user-panel {
  gap: 0;
  padding: 10px 6px 8px 8px;
}

/* Frame previews in the profile editor: space for crowns above the avatar. */
.cosmetic-option {
  padding-top: 22px;
}

/* ======================= "Rei do Konvo" (owner only) ======================= */

.king-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.king-crown {
  flex: none;
  font-size: 0.95em;
  filter: drop-shadow(0 0 3px rgba(255, 200, 60, 0.75));
}

.name-king {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  background: linear-gradient(90deg, #ffcf4d, #fff3c4, #ffb300, #ffe680, #ffcf4d);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: king-shimmer 3.5s linear infinite;
}

@keyframes king-shimmer {
  to {
    background-position: -250% 0;
  }
}

.king-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ffcf4d, #ff9f1a);
  color: #3a2400;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  vertical-align: 2px;
  box-shadow: 0 0 8px rgba(255, 191, 46, 0.45);
}

.king-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 191, 46, 0.22), rgba(255, 191, 46, 0.04));
  border: 1px solid rgba(255, 207, 77, 0.45);
  color: #ffe08a;
}

/* Royal frame: thick animated gold ring, crown on top, twinkling sparkles. */
.deco-rei .deco-layer {
  --glow: #ffcf4d;
  --ring: calc(var(--avatar-size, 32px) * 0.11);
  animation: deco-glow 2s ease-in-out infinite;
}
.deco-rei .deco-layer::before {
  --deco-bg: conic-gradient(#7a4a00, #ffd76a, #fff6cf, #ffb300, #7a4a00, #ffe27a, #fff6cf, #ffb300, #7a4a00);
  animation: deco-spin 4s linear infinite;
}
.deco-rei .deco-crown {
  position: absolute;
  left: 50%;
  top: -30%;
  transform: translateX(-50%);
  font-size: calc(var(--avatar-size, 32px) * 0.5);
  filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.9));
  animation: deco-float 2.4s ease-in-out infinite;
}
.deco-rei .deco-orbit span {
  position: absolute;
  font-size: calc(var(--avatar-size, 32px) * 0.2);
  color: #fff3b0;
  text-shadow: 0 0 6px #ffcf4d;
  animation: deco-twinkle 1.6s ease-in-out infinite;
}
.deco-rei .deco-orbit span:nth-child(1) {
  left: -8%;
  top: 30%;
}
.deco-rei .deco-orbit span:nth-child(2) {
  left: 92%;
  top: 40%;
  animation-delay: 0.6s;
}
.deco-rei .deco-orbit span:nth-child(3) {
  left: 70%;
  top: 86%;
  animation-delay: 1.1s;
}

/* Royal effect: golden crowns and sparkles drifting down. */
.fx-realeza .fx-p {
  color: #ffd76a;
  text-shadow: 0 0 10px rgba(255, 191, 46, 0.8);
  animation: fx-sway calc(var(--dur) * 1.3) linear var(--delay) infinite;
}
.fx-realeza::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 207, 77, 0.22), transparent 60%);
}