/* ===== Cash Worms · multilink page ===== */

:root {
  /* Бренд-палитра */
  --coral:      #FB4C2F;
  --coral-2:    #FF7A45;
  --green:      #2CB642;
  --green-2:    #4FD46A;
  --tg:         #2AABEE;
  --tg-2:       #229ED9;

  /* Фон / текст */
  --bg:         #0E1512;   /* графитово-зелёный тёмный */
  --bg-2:       #131E19;
  --surface:    rgba(255, 255, 255, 0.06);
  --surface-br: rgba(255, 255, 255, 0.10);
  --text:       #F3F6F4;
  --text-dim:   #9FB0A8;

  /* Метрики */
  --maxw:       440px;
  --radius:     18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-2) 0%, var(--bg) 55%) fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Основной контейнер ---- */
.page {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* центрируем блок «шапка + кнопки» по вертикали */
  text-align: center;
  gap: 32px;
  padding: calc(env(safe-area-inset-top) + 40px) 22px calc(env(safe-area-inset-bottom) + 72px);
}

/* ---- Шапка с фоном ---- */
.hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;   /* воздух сверху, чтобы фон проступал над аватаркой */
}

/* hero-арт: привязан к шапке, растворяется в темноту сверху и к кнопкам снизу */
.hero__bg {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 440px;
  z-index: -1;
  background: url("../assets/bg.webp") no-repeat center 34%;
  background-size: cover;
  opacity: 0.32;
  filter: saturate(0.92) brightness(0.9);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 58%, transparent 100%);
}

/* ---- Аватар ---- */
.avatar {
  width: 112px; height: 112px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--coral), var(--green));
  box-shadow: 0 10px 30px rgba(251, 76, 47, 0.28);
}
.avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--bg-2);
}

/* ---- Описание ---- */
.intro { margin-top: 20px; }
.intro__title {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.intro__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* ---- Кнопки-ссылки ---- */
.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--surface-br);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.link:active { transform: scale(0.98); }

.link__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
}
.link__icon svg { width: 100%; height: 100%; }
.link__icon--emoji { font-size: 22px; line-height: 1; }

.link__label {
  flex: 1 1 auto;
  text-align: center;
  /* компенсируем ширину иконки, чтобы текст был по центру кнопки */
  margin-right: 26px;
}

/* Акцентные варианты */
.link--game {
  background: linear-gradient(135deg, var(--coral), var(--coral-2));
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(251, 76, 47, 0.30);
}
.link--tg {
  background: linear-gradient(135deg, var(--tg), var(--tg-2));
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(42, 171, 238, 0.26);
}
.link--light {
  background: #F3F6F4;
  color: #14201B;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

@media (hover: hover) {
  .link:hover { transform: translateY(-2px); filter: brightness(1.05); }
}

/* ---- Подвал ---- */
.foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
}
.foot p {
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.7;
}