src/styles/globals.css - main - Kitamoru/Moraleon

src/styles/globals.css
1 854 строки36 KB
Vadim Ivanov
Update globals.css
18 июл 2025, 13:38
18 июл 2025, 13:3861430b6
:root {
  --vh: 1vh;
  --vw: 1vw;
  --tg-bg: var(--tg-theme-bg-color, #18222d);
  --tg-text: var(--tg-theme-text-color, #ffffff);
  --tg-secondary: var(--tg-theme-secondary-bg-color, #2a3a4d);
  --tg-accent: var(--tg-theme-link-color, #5b8cff);
  --tg-danger: #e74c3c;
  --tg-success: #2ecc71;
  --tg-border: var(--tg-theme-hint-color, rgba(255,255,255,0.1));
  --tg-hint: var(--tg-theme-hint-color, rgba(255,255,255,0.5));
}

* {
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

:root {
  --tg-bg: #0f0f0f;
  --tg-text: #ffffff;
  --tg-hint: #aaaaaa;
  --tg-accent: #3390ec;
  --tg-success: #2ecc71;
  --tg-error: #e74c3c;
  --tg-secondary: #1a1a1a;
  --tg-border: #333333;
}

body {
  margin: 0;
  padding: 0;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow-x: hidden;
  position: relative;
  overscroll-behavior: none;
}

/* Main Container */
.container {
  display: flex;
  flex-direction: column;
  height: calc(var(--vh, 1vh) * 100);
  padding: 16px 20px;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

.new-header {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px;
}

.header-content {
  border-radius: 160px;
  background: rgba(33, 33, 33, 0.01);
  box-shadow: 
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset, 
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset, 
    1px 1px 2px 0px rgba(194, 179, 255, 0.20) inset, 
    0px 0.15px 0px 0px #C2B3FF inset;
  backdrop-filter: blur(30px);
  display: inline-block; /* Лучше для подстраивания под ширину содержимого */
  width: auto; /* Ширина подстраивается под содержимое */
  padding: 0 10px; /* Отступы 5px слева и справа */
  height: 36px;
  line-height: 36px; /* Центрирование текста по вертикали */
  color: #0FEE9E;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.sprite-container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 8px;
  margin-bottom: 8px;
}

.sprite-background {
  width: 251px;
  height: 251px;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden; /* Ключевое свойство для обрезки тумана */
  cursor: pointer;
}

.circle-background {
  background: #161616;
}

.sprite {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  transition: opacity 0.5s ease-in-out;
}

.sprite-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Новый контейнер для выгорания и кнопки */
.burnout-and-button-container {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  border-radius: 24px;
  background: #161616;
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* Обновленный блок выгорания */
.burnout-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.level-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.level-label {
  color: #FFF;
/* MRLN/body_xs-regular */
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: -0.5px;
opacity: 0.5;
}

.level-value {
  color:  #FFF;
text-align: center;
/* MRLN/body_xs-regular */
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: -0.5px;
opacity: 0.5;
}

.progress-wrapper {
  width: 100%;
}

.burnout-bar {
  background: var(--tg-secondary);
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--tg-border);
}

.burnout-progress {
  height: 100%;
  background: linear-gradient(270deg, rgba(6, 96, 64, 0.16) 0%, #066040 100%), #0FEE9E;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.burnout-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 70%, rgba(255,255,255,0.3));
}

/* Octagram content area */
.octagram-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* Уменьшаем отступ */
  border-radius: 24px 24px 34px 34px;
  background: #161616;
  box-sizing: border-box;
  width: 100%;
  padding: 24px; /* Уменьшаем боковые отступы */
  margin-top: 24px; /* Добавляем отступ сверху */
}

/* Растягиваем контейнер по высоте */
.octagram-wrapper {
  width: 100%;
  min-height: 280px; /* Минимальная высота */
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Обеспечиваем растягивание содержимого */
.octagram-wrapper > div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.octalysis-info-button {
  width: calc(100% - 48px);
  height: 42px;
  background-color: #ffffff;
  color: #2A2A2A;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.5px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 24px 24px 24px; 
}

.questions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.question-card {
  background: var(--tg-secondary);
  border-radius: 16px;
  padding: 18px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.question-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s;
}

.question-card:hover::before {
  left: 100%;
}

.question-card:hover {
  transform: translateY(-2px);
  border-color: var(--tg-accent);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.question-card.answered {
  border-color: var(--tg-success);
  background: linear-gradient(135deg, var(--tg-secondary), rgba(46, 204, 113, 0.1));
}

.question-text {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.answer-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.answer-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
  position: relative;
  overflow: hidden;
}

.answer-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.answer-btn:active::before {
  width: 300px;
  height: 300px;
}

.answer-btn.positive {
  background: linear-gradient(135deg, var(--tg-accent), #4a7bc8);
  color: white;
  box-shadow: 0 4px 15px rgba(91, 140, 255, 0.4));
}

.answer-btn.negative {
  background: linear-gradient(135deg, var(--tg-secondary), #374151);
  color: var(--tg-text);
  border: 1px solid var(--tg-border);
}

.answer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.answer-btn.positive:hover {
  box-shadow: 0 6px 20px rgba(91, 140, 255, 0.6));
}

.answer-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Messages */
.time-message {
  text-align: center;
}

.info-message {
  border-radius: 24px;
  background: #161616;
  font-size: 16px;
  font-weight: 600;
  color: var(--tg-text);
}

.content {
  flex-grow: 1;
  scroll-behavior: smooth;
  width: 100%;
  box-sizing: border-box;
}

.accept-button {
color: #FFF;
text-align: center;
/* MRLN/tbody_xs-semibold */
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
letter-spacing: -0.5px;
width: 100%;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
align-self: center; /* Центрируем вместо stretch */
border-radius: 12px;
background: linear-gradient(180deg, rgba(6, 96, 64, 0.20) 0%, rgba(6, 96, 64, 0.80) 100%), #0FEE9E;
border: none; /* Сброс границы */
outline: none; /* Убираем контур при фокусе */
}

.error-message {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  margin: 16px 0;
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.modal-open {
  overflow: hidden;
}

/* меню */
.bottom-menu {
  display: flex;
  width: calc(100% - 40px);
  max-width: 500px;
  height: 68px;
  padding: 12px;
  align-items: center;
  gap: 28px;
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  border-radius: 160px;
  box-shadow:
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset,
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset,
    1px 1px 2px 0px rgba(194, 179, 255, 0.20) inset,
    0px 0.15px 0px 0px #C2B3FF inset;
  backdrop-filter: blur(10px);
  background: rgba(22, 22, 22, 0.2);
  z-index: 100;
}

.menu-btn {
  flex: 1 1 auto;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 140px;
  background-color: #161616;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.menu-icon {
  width: 28px;
  height: 28px;
  color: #FFFFFF;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.menu-btn.active .menu-icon {
  color: #0FEE9E;
}

.menu-btn.active::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  background: #0FEE9E;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(26px);
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Friends page */
.friends-header {
  display: flex;
  padding: 16px;
  align-items: center;
  border-radius: 16px;
  background: #161616;
  max-height: 56px;
  width: 100%;
  box-sizing: border-box;
}

.friends-header h2 {
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.5px;
  margin: 0 auto;
}

.scrollable-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  overflow-y: auto;
  padding-bottom: 120px;
  scrollbar-width: none;
}

.friends-list {
  width: 100%;
}

.friends-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-card {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 16px;
  background: #161616;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 78px;
}
  
.friend-card.expanded {
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Стили для блока с классом персонажа */
.friend-class-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.friend-class-badge {
  border-radius: 160px;
  background: rgba(33, 33, 33, 0.01);
  box-shadow: 
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset, 
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset, 
    1px 1px 2px 0px rgba(194, 179, 255, 0.20) inset, 
    0px 0.15px 0px 0px #C2B3FF inset;
  backdrop-filter: blur(30px);
  padding: 0 15px;
  height: 36px;
  line-height: 36px;
  color: #0FEE9E;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.5px;
}


.friend-content {
  display: flex;
  align-items: center;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.friend-sprite {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 12px;
}

.friend-sprite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.friend-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.friend-name {
  color: var(--main-text-primary, #FFF);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Контейнер прогресс-бара */
.friend-progress-container {
  position: relative;
  overflow: hidden;
  height: 8px;
  width: 100%;
  background: #000;
  border-radius: 4.5px;
  box-shadow: 
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset, 
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset, 
    1px 1px 2px 0px rgba(194, 179, 255, 0.20) inset, 
    0px 0.15px 0px 0px #C2B3FF inset;
}

/* Основной прогресс-бар */
.friend-progress-bar {
  height: 100%;
  background: linear-gradient(270deg, rgba(6, 96, 64, 0.16) 0%, #066040 100%), #0FEE9E;
  border-radius: 4.5px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Эффект сияния поверх прогресс-бара */
.friend-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4.5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  box-shadow: 
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset,
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset,
    1px 1px 2px 0px rgba(194, 179, 255, 0.20) inset,
    0px 0.15px 0px 0px #C2B3FF inset;
}

.expand-btn {
  transition: transform 0.3s ease;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 12px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.expand-btn.expanded {
  transform: rotate(90deg);
}

.expandable-content {
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  will-change: height;
  height: 0;
  width: 100%
}

.expandable-content-inner {
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрирование по горизонтали */
  justify-content: center; /* Добавляем центрирование по вертикали */
  align-items: center; /* Центрирование по горизонтали */
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 16px;
  background: #161616;
  margin: 0 auto
}

/* Стили для октаграммы друга */
.friend-octagram-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.octagram-loader, 
.octagram-error {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty {
  text-align: center;
  padding: 20px;
  color: var(--tg-hint);
  font-size: 16px;
}

.error {
  color: var(--tg-danger);
  text-align: center;
  padding: 15px;
  background: rgba(192, 57, 43, 0.1);
  border-radius: 8px;
  margin: 10px 0;
}

.add-friend-section {
  margin-top: 30px;
  text-align: center;
  padding: 0 16px;
  width: 100%;
}

.add-friend-btn {
  display: flex;
  height: 42px;
  width: 100%;
  padding: 0px 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6, 96, 64, 0.20) 0%, rgba(6, 96, 64, 0.80) 100%), #0FEE9E;
  box-shadow: 
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.1) inset, 
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset, 
    1px 1px 2px 0px rgba(194, 179, 255, 0.2) inset, 
    0px 0.15px 0px 0px #C2B3FF inset;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.add-friend-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.add-friend-hint {
  margin-top: 10px;
  font-size: 14px;
  color: var(--tg-hint);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-card {
  background: var(--tg-secondary);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  max-width: 500px;
  width: 90%;
  margin: 0 auto;
}

.custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.custom-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--tg-text);
}

.custom-modal-body {
  margin-bottom: 15px;
}

.custom-modal-body p {
  margin: 0 0 15px 0;
  text-align: center;
  color: #fff;
}

.referral-link-container {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

.custom-input {
  background: var(--tg-secondary);
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  padding: 12px;
  color: var(--tg-text);
  font-size: 14px;
  flex: 1;
  outline: none;
}

.custom-input:focus {
  border-color: var(--tg-accent);
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--tg-text);
  opacity: 0.7;
  transition: opacity 0.3s;
}

.close-btn:hover {
  opacity: 1;
}

.copy-btn {
  background: #161616;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 15px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s;
  min-width: 100px;
  font-size: 14px;
}

.copy-btn.copied {
  background: #0FEE9E;
  color: #000;
}

.share-btn {
  background: linear-gradient(180deg, rgba(6, 96, 64, 0.20) 0%, rgba(6, 96, 64, 0.80) 100%), #0FEE9E;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  font-size: 16px;
  outline: none;
}

.delete-btn {
  display: flex;
  height: 32px;
  width: 100%;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(211, 52, 54, 0.20) 0%, rgba(211, 52, 54, 0.80) 100%), #F07072;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  box-sizing: border-box;
}

.confirmation-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.keep-btn {
  display: flex;
  height: 42px;
  padding: 0px 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: #2D2D2D;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 16px;
  border: none;
  cursor: pointer;
  flex: 1;
}

.keep-btn:hover {
  background: #3D3D3D;
}

.delete-btn-modal {
  display: flex;
  height: 42px;
  padding: 0px 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: linear-gradient(
    180deg, 
    rgba(211, 52, 54, 0.20) 0%, 
    rgba(211, 52, 54, 0.80) 100%
  ), #F07072;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 16px;
  border: none;
  cursor: pointer;
  flex: 1;
}

.delete-btn-modal:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Стили для магазина */
.shop-header {
  display: flex;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.5px;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  background: #161616;
  max-height: 56px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.shop-title {
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.5px;
  margin: 0;
}

.coins-display {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #2A2A2A;
}

.coins-text {
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.5px;
}

/*иконка монет*/
.coin-icon {
  display: flex;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  filter: brightness(0) invert(1);
}

.sprites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.sprite-card {
  display: flex;
  padding: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  background: #161616;
  border-radius: 16px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 380px) {
  .sprites-grid {
    grid-template-columns: 1fr;
  }
}

.sprite-image {
  width: 100%;
  height: 170.5px;
  object-fit: contain;
  background: #2a2a2a;
  border-radius: 8px;
}

.sprite-info {
  color: #FFFFFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.5px;
  width: 100%;
}

.sprite-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
}

.sprite-price {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 8px;
}

.price-text {
  color: #FFFFFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.5px;
}

.sprite-actions {
  display: flex;
  height: 32px;
  padding: 0px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* 1. Состояние "Купить" */
.buy-btn {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(6, 96, 64, 0.20) 0%, rgba(6, 96, 64, 0.80) 100%), #0FEE9E;
  box-shadow: 
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset, 
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset, 
    1px 1px 2px 0px rgba(194, 179, 255, 0.20) inset, 
    0px 0.15px 0px 0px #C2B3FF inset;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.5px;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;
  min-width: 146.5px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. Состояние "Применить" */
.equip-btn {
  border-radius: 8px;
  background: #FFF;
  box-shadow: 
    0px -0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset, 
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset, 
    0px -0.5px 10px 0px rgba(255, 255, 255, 0.05) inset, 
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset, 
    1px 1px 2px 0px rgba(194, 179, 255, 0.20) inset, 
    0px 0.15px 0px 0px #C2B3FF inset;
  color: #2A2A2A;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.5px;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  min-width: 146.5px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. Состояние "Применен" */
.equip-btn.equipped {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  box-shadow: none;
  cursor: default;
}

/* 4. Состояние "Недостаточно" */
.buy-btn.disabled {
  opacity: 0.35;
  background: linear-gradient(180deg, rgba(6, 96, 64, 0.20) 0%, rgba(6, 96, 64, 0.80) 100%), #0FEE9E;
  box-shadow: 
    0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.10) inset, 
    0px 0.5px 10px 0px rgba(255, 255, 255, 0.05) inset, 
    1px 1px 2px 0px rgba(194, 179, 255, 0.20) inset, 
    0px 0.15px 0px 0px #C2B3FF inset;
  cursor: not-allowed;
}

@media (max-width: 380px) {
  .sprites-grid {
    grid-template-columns: 1fr;
  }
}

/* Reference Page Styles */
/* Блок заголовка "Где я?" */
.header-block {
  display: flex;
  padding: 16px;
  justify-content: center; /* Центрирование содержимого */
  align-items: center;
  align-self: stretch;
  border-radius: 16px;
  background: #161616;
  margin-bottom: 8px;
}

.page-title {
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.5px;
  width: 100%;
}

/* Блок описания приложения */
.description-block {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  border-radius: 16px;
  background: #161616;
}

.page-description {
  color: #FFF;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.23px;
  width: 100%;
  text-align: justify;
}

/* Блоки с информацией */
.reference-section {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 16px;
  background: #161616;
}

.section-title {
  display: flex;
  gap: 8px;
  align-items: center;
  align-self: stretch;
  color: #FFF;
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.23px;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

/* Исправление вертикального выравнивания для SVG */
.icon-wrapper svg {
  vertical-align: middle;
}

/* Гарантируем одинаковую высоту строки */
.section-title > span:last-child {
  line-height: 24px;
}

.reference-card {
  align-self: stretch;
  color: #FFF;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.23px;
}

/* Улучшенные автоматические переносы */
.reference-section * {
  word-break: break-word;
  hyphens: auto;
}

/* Стили для списков */
.feature-list {
  padding-left: 20px;
  margin: 8px 0 0 0;
}

.feature-list li {
  margin-bottom: 8px;
}

.feature-list li:last-child {
  margin-bottom: 0;
}
 

   /* Классы для управления анимацией покупки */

 .button-loader {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.buy-btn.processing,
.equip-btn.processing {
  opacity: 0.7;
  cursor: not-allowed;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.3s ease-in forwards;
}

.fade-out {
  opacity: 1;
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
  /* Классы для управления анимацией */
.sprite-hidden {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.sprite-fade-in {
  opacity: 1;
  z-index: 2;
  animation: spriteFadeIn 0.5s ease-in-out;
}

.sprite-fade-out {
  opacity: 0;
  z-index: 1;
  animation: spriteFadeOut 0.5s ease-in-out;
}

/* Анимация появления */
@keyframes spriteFadeIn {
  from { 
    opacity: 0;
    transform: scale(0.95);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Анимация исчезновения */
@keyframes spriteFadeOut {
  from { 
    opacity: 1;
    transform: scale(1);
  }
  to { 
    opacity: 0;
    transform: scale(1.05);
  }
  }

  /* Обновленные стили для Onboarding */
.onboarding-container {
  min-height: 100vh;
  background: var(--tg-bg);
  color: var(--tg-text);
  padding: 0 16px;
  display: flex;
  flex-direction: column;
}

/* Общие стили для всех шагов */
.onboarding-header {
  text-align: center;
  padding: 20px 0 30px;
}

.onboarding-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--tg-text);
}

.onboarding-header p {
  font-size: 1rem;
  color: var(--tg-hint);
}

/* Стили для шага выбора роли */
.role-step {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 20%; /* Отступ сверху для лучшего позиционирования */
}

.role-selector-container {
  position: relative;
  margin-top: 40px; /* Больше отступ сверху */
}

.role-selector {
  width: 100%;
  padding: 16px;
  background: var(--tg-secondary);
  border-radius: 12px;
  color: var(--tg-text);
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.role-selector:hover {
  border-color: var(--tg-accent);
}

.placeholder {
  color: var(--tg-hint);
}

.dropdown-icon {
  transition: transform 0.3s ease;
}

.dropdown-icon.open {
  transform: rotate(180deg);
}

.dropdown-icon svg {
  width: 16px;
  height: 16px;
}

.role-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--tg-secondary);
  border-radius: 12px;
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: dropdownAppear 0.3s ease-out forwards;
  transform-origin: top center;
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
}

@keyframes dropdownAppear {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.role-option {
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--tg-border);
}

.role-option:last-child {
  border-bottom: none;
}

.role-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.role-option.selected {
  background: rgba(91, 140, 255, 0.2);
  font-weight: 500;
}

/* Стили для шага теста */
.test-step {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

.progress-container {
  padding: 20px 0 15px;
}

.progress-text {
  font-size: 0.9rem;
  color: var(--tg-hint);
  margin-bottom: 8px;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--tg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(270deg, rgba(6, 96, 64, 0.16) 0%, #066040 100%), #0FEE9E;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.test-container {
  height: 250px; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px 0;
  border-radius: 12px;
}

.test-text {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--tg-text);
}

.answers-container {
  margin-top: 20px;
  padding-bottom: 30px;
  margin-bottom: 70px;
  align-items: center;
  justify-content: center;
}

.answer-button {
  width: 100%;
  padding: 16px;
  background: var(--tg-secondary);
  border-radius: 12px;
  border: 1px solid var(--tg-border);
  color: var(--tg-text);
  font-size: 1rem;
  text-align: left;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

/* Стили для шага результата */
.result-step {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 20px;
}

.result-header {
  text-align: center;
  margin-bottom: 20px;
}

.result-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.result-card {
  background: var(--tg-secondary);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

.class-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0FEE9E;
  text-align: center;
  margin-bottom: 16px;
}

.class-description {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 16px;
  color: var(--tg-text);
}

.class-footer {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--tg-hint);
  text-align: center;
}

  /* Стили для контейнера октаграммы */
/* Адаптивность */
@media (max-width: 768px) {
  .octagram-container {
    padding: 0.5rem;
    margin: 1rem 0;
  }
}

/* SurveyModal.css */
.survey-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
}

.survey-modal-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 90vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  background-color: #000; /* Полностью черный фон */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.survey-modal-header {
  padding: 25px 25px 15px;
  background-color: #000; /* Черный фон для хедера */
  z-index: 10;
}

.survey-progress-text {
  text-align: center;
  color: #e0e0e0;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
}

.survey-progress-track {
  width: 100%;
  height: 6px;
  background: var(--tg-secondary);
  border-radius: 10px;
  overflow: hidden;
}

.survey-progress-bar {
  height: 100%;
  background: linear-gradient(270deg, rgba(6, 96, 64, 0.16) 0%, #066040 100%), #0FEE9E;
  transition: width 0.3s ease;
}

.survey-question-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  background-color: #000; /* Черный фон области вопроса */
}

.swipe-card-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swipe-card {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.survey-card {
  width: 90%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111; /* Темный фон карточки, чуть светлее фона */
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  padding: 30px;
  transition: 
    transform 0.3s cubic-bezier(0.18, 0.67, 0.6, 0.83),
    opacity 0.2s ease;
  border: 1px solid #222; /* Тонкая граница для выделения */
}

.survey-card:active {
  transform: scale(0.98);
}

.survey-card-text {
  font-size: 24px;
  font-weight: 500;
  color: white;
  line-height: 1.6;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
  padding: 0 10px;
}

.survey-buttons-container {
  padding: 25px 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000; /* Черный фон для кнопок */
  position: relative;
}

/* Возвращаем оригинальные стили кнопок */
.survey-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px; /* Оригинальный размер */
  height: 70px; /* Оригинальный размер */
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.3); /* Оригинальная граница */
  transition: all 0.2s ease;
  position: relative;
  top: -15px; /* Сохраняем приподнятость */
}

.survey-button:active {
  transform: scale(0.92);
}

/* Возвращаем оригинальные цвета кнопок */
.survey-button-no {
  background-color: #fee2e2; /* Оригинальный цвет */
  color: #dc2626; /* Оригинальный цвет */
}

.survey-button-skip {
  background-color: #f3f4f6; /* Оригинальный цвет */
  color: #4b5563; /* Оригинальный цвет */
}

.survey-button-yes {
  background-color: #d1fae5; /* Оригинальный цвет */
  color: #059669; /* Оригинальный цвет */
}

.button-icon {
  font-size: 24px; /* Оригинальный размер */
  font-weight: bold;
}

/* Анимации */
@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.survey-card {
  animation: cardAppear 0.4s ease-out;
}

@media (max-width: 500px) {
  .survey-modal-container {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .survey-card {
    height: 250px;
    padding: 20px;
  }
  
  .survey-card-text {
    font-size: 22px;
  }
}