*,
*::before,
*::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bgColor: #0a1730;
  --bgColor2: #1e3c72;
  --accentColor: #fff;
  --font: 'Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: none;
  background-color: var(--bgColor2);
  background-image:
    radial-gradient(34rem 26rem at 76% 8%, rgba(255, 255, 255, .07), transparent 62%),
    linear-gradient(to bottom,
      var(--bgColor) 0%,
      #142a52 46%,
      var(--bgColor2) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: #fff;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  padding:
    max(2rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
}

body::after {
  content: "";
  position: fixed;
  top: -28vmax;
  left: -14vmax;
  width: 96vmax;
  height: 96vmax;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96, 150, 255, .27), rgba(96, 150, 255, 0) 72%);
  animation: orbA 85s ease-in-out infinite alternate;
  pointer-events: none;
}

html::before {
  content: "";
  position: fixed;
  bottom: -26vmax;
  right: -12vmax;
  width: 84vmax;
  height: 84vmax;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(132, 202, 255, .19), rgba(132, 202, 255, 0) 72%);
  animation: orbB 105s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes orbA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 7vmax, 0) scale(1.12); }
}
@keyframes orbB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-8vmax, -6vmax, 0) scale(1.15); }
}

img, svg, a { -webkit-user-drag: none; -webkit-touch-callout: none; }
::selection { background: transparent; color: inherit; }

.container {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  margin: auto;
  text-align: center;
}

.profile { padding-top: 1.75rem; }

.rounded-avatar {
  display: block;
  margin: 0 auto;
  width: clamp(104px, 30vw, 128px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  background-color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .30),
    0 0 0 8px rgba(255, 255, 255, .05),
    0 18px 44px rgba(3, 9, 24, .50);
  pointer-events: none;
}

h1 {
  margin: 1.15rem 0 0;
  font-size: clamp(1.4rem, 5.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  color: #fff;
}

.verified { display: inline-block; }
.badge { height: .6em; margin: 5px; display: inline-block; vertical-align: middle; }

.links { list-style: none; margin: 2.375rem 0 0; padding: 0; }

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 56px;
  margin: 0 0 .8rem;
  padding: .8rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 16px;
  background: linear-gradient(120deg,
              rgba(255, 255, 255, .10),
              rgba(255, 255, 255, .045));
  box-shadow:
    0 10px 30px rgba(4, 10, 26, .30),
    0 1px 3px rgba(4, 10, 26, .22);
  color: var(--accentColor);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s cubic-bezier(.2, .7, .3, 1);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .button {
    border-color: transparent;
    background:
      linear-gradient(120deg,
        rgba(255, 255, 255, .10),
        rgba(255, 255, 255, .045)) padding-box,
      linear-gradient(135deg,
        rgba(255, 255, 255, .17),
        rgba(255, 255, 255, .05) 42%,
        rgba(255, 255, 255, .05) 58%,
        rgba(255, 255, 255, .11)) border-box;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background:
      linear-gradient(120deg,
        rgba(255, 255, 255, .16),
        rgba(255, 255, 255, .085)) padding-box,
      linear-gradient(135deg,
        rgba(255, 255, 255, .24),
        rgba(255, 255, 255, .08) 42%,
        rgba(255, 255, 255, .08) 58%,
        rgba(255, 255, 255, .15)) border-box;
    transform: translateY(-2px);
    box-shadow:
      0 16px 36px rgba(4, 10, 26, .38),
      0 2px 6px rgba(4, 10, 26, .20);
    color: #fff;
  }
}

.button:active {
  background:
    linear-gradient(120deg,
      rgba(255, 255, 255, .19),
      rgba(255, 255, 255, .12)) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, .24),
      rgba(255, 255, 255, .09) 42%,
      rgba(255, 255, 255, .09) 58%,
      rgba(255, 255, 255, .16)) border-box;
  transform: scale(.985);
}

.button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9);
  outline-offset: 3px;
}

.icon {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .button { background: rgba(26, 48, 90, .92); border-color: rgba(255, 255, 255, .16); }
}

@media (prefers-reduced-transparency: reduce) {
  .button {
    background: #1d3a6b;
    border-color: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 360px) {
  body {
    padding-left: max(.9rem, env(safe-area-inset-left));
    padding-right: max(.9rem, env(safe-area-inset-right));
  }
  .button { font-size: 1rem; padding: .75rem 1rem; min-height: 52px; border-radius: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .rounded-avatar { animation: avatarIn .7s ease-out backwards; }
  h1 { animation: riseIn .65s ease-out .08s backwards; }
  .button-entrance {
    animation-name: chipIn;
    animation-duration: .55s;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
    animation-fill-mode: backwards;
    animation-delay: 0s;
  }
}
@keyframes avatarIn { from { opacity: 0; transform: translateY(-10px); } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(12px); } }
@keyframes chipIn   { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  body::after, html::before { animation: none; }
  .rounded-avatar, h1, .button-entrance { animation: none; }
}