/* AnomicFlip — header profile button + dropdown */
.um, .um * { box-sizing: border-box; }
.um { position: relative; font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; }

.um-btn {
  display: flex; align-items: center; gap: 14px;
  height: 62px; padding: 0 16px 0 9px; min-width: 260px;
  background: #2a2d33; border: 0; border-radius: 8px; color: #fff;
  font: inherit; cursor: pointer; text-align: left;
  transition: background .15s;
}
.um-btn:hover, .um.open .um-btn { background: #30343b; }
.um-btn:focus-visible { outline: 2px solid #3fd68f; outline-offset: 2px; }

.um-av {
  flex: none; width: 44px; height: 44px; border-radius: 6px;
  background: #3a3f46 center / cover no-repeat;
  display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #3fd68f;
  user-select: none; -webkit-user-drag: none;
}
.um-mid { flex: 1; min-width: 0; display: grid; gap: 9px; }
.um-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.um-name { font-weight: 800; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-rank { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #a7abb2; }
.um-bar { height: 5px; border-radius: 99px; background: #17191c; overflow: hidden; }
.um-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #c9ccd1; transition: width .4s; }
.um-chev { flex: none; color: #8b8f97; transition: transform .2s; }
.um.open .um-chev { transform: rotate(180deg); }

/* dropdown */
.um-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 900;
  width: max(100%, 340px); padding: 8px;
  background: #2a2d33; border: 1px solid #3a3f46; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  display: grid; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.um.open .um-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }

.um-head { display: flex; align-items: center; gap: 14px; padding: 14px 14px 10px; }
.um-head .um-name { font-size: 17px; }
.um-head .um-tier { color: #3fd68f; font-weight: 600; font-size: 16px; margin-top: 3px; }

.um-item {
  display: flex; align-items: center; gap: 16px;
  height: 58px; padding: 0 20px;
  background: #1f2226; border: 0; border-radius: 8px;
  color: #a7abb2; font: inherit; font-size: 18px; font-weight: 600; text-decoration: none;
  cursor: pointer; width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.um-item svg { flex: none; width: 24px; height: 24px; }
.um-item:hover, .um-item:focus-visible { background: #24272c; color: #fff; outline: none; }
.um-item.danger { color: #ff5c6c; }
.um-item.admin { color: #f5c84a; }
.um-item.danger:hover, .um-item.danger:focus-visible { color: #ff7d8a; }
.um-sep { height: 1px; background: #3a3f46; margin: 2px 10px; }

@media (max-width: 600px) {
  .um-btn { min-width: 0; height: 52px; padding-right: 10px; }
  .um-mid { display: none; }
  .um-av { width: 38px; height: 38px; }
  .um-menu { left: auto; right: 0; width: min(340px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) { .um-menu, .um-chev, .um-bar i { transition: none; } }

/* logged out: Sign In button (top right) */
.um-signin { height: 50px; padding: 0 28px; border: 0; border-radius: 8px; background: #3fbf7f; color: #0d1f16; font: 800 17px 'Archivo', system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s; }
.um-signin:hover { background: #46cc8a; }
.um-signin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) { .um-signin { height: 42px; padding: 0 16px; font-size: 15px; } }