#screen-home {
  background:
    repeating-linear-gradient(135deg, rgba(243, 189, 202, 0.48) 0 54px, rgba(189, 232, 207, 0.48) 54px 108px, rgba(200, 188, 229, 0.46) 108px 162px, rgba(255, 247, 199, 0.5) 162px 216px),
    linear-gradient(180deg, #fff8ec 0%, #f8dce5 48%, #def3ea 100%);
  position: relative;
  overflow: hidden;
}

#screen-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, 0.34) 8% 10%, transparent 10% 90%, rgba(255, 255, 255, 0.34) 90% 92%, transparent 92%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, 0.18) 34px 35px);
  pointer-events: none;
}

#screen-home::after {
  content: '';
  position: absolute;
  left: 9%;
  right: 9%;
  top: 74px;
  height: 58px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 240, 215, 0.78), rgba(255, 180, 156, 0.5)),
    linear-gradient(90deg, rgba(19, 242, 208, 0.22), rgba(157, 53, 255, 0.2));
  box-shadow: 0 0 24px rgba(255, 140, 171, 0.35), 0 10px 20px rgba(0, 0, 0, 0.22);
  opacity: 0.35;
  pointer-events: none;
}

.home-header {
  display: flex;
  gap: 12px;
  padding: 16px;
  min-height: var(--header-height);
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.home-header .btn {
  flex: 1;
  max-width: 160px;
}

.home-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.carousel {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: visible;
  position: relative;
}

.carousel__viewport {
  flex: 0 0 100%;
  width: 100%;
  overflow: visible;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.carousel__viewport.is-touching .carousel__slide {
  transform: scale(0.985);
}

.carousel__track {
  display: flex;
  transition: transform 0.35s var(--ease-smooth);
  will-change: transform;
  overflow: visible;
}

.carousel__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 20px;
  position: relative;
  transition: transform 0.16s var(--ease-bounce);
  overflow: visible;
}

.carousel__slide::before {
  content: '';
  position: absolute;
  width: min(72%, 260px);
  height: 62px;
  bottom: 36px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(19, 242, 208, 0.22), rgba(157, 53, 255, 0.08) 55%, transparent 72%);
  filter: blur(2px);
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #ffffff, var(--mint-green));
  color: #5c3b7a;
  border: 2px solid rgba(157, 53, 255, 0.22);
  box-shadow: 0 6px 16px rgba(111, 73, 93, 0.18), 0 0 0 4px rgba(255, 255, 255, 0.38);
  font-size: 1.35rem;
  font-weight: 900;
}

.carousel__arrow--left {
  left: 2px;
}

.carousel__arrow--right {
  right: 2px;
}

.carousel__arrow:active {
  background: linear-gradient(180deg, var(--sakura-pink), #ffffff);
}

.carousel__arrow.is-touching {
  background: linear-gradient(180deg, var(--sakura-pink), #ffffff);
  box-shadow: 0 4px 12px rgba(111, 73, 93, 0.16), 0 0 0 5px rgba(255, 107, 157, 0.18);
}

.carousel__label {
  margin-top: 18px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--paper-ink);
  text-align: center;
  background: rgba(255, 250, 240, 0.76);
  border: 2px solid rgba(255, 107, 157, 0.2);
  box-shadow: 0 8px 18px rgba(111, 73, 93, 0.12);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}

.home-footer {
  padding: 20px 24px 32px;
  position: relative;
  z-index: 1;
}

.home-progress {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
  color: var(--paper-ink);
  display: inline-block;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 250, 240, 0.78);
  border: 1px solid rgba(154, 100, 61, 0.16);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.home-footer .progress-bar__fill {
  transition: width 0.4s var(--ease-smooth);
}

@media (max-width: 640px) {
  .home-header {
    padding-top: calc(10vh + env(safe-area-inset-top, 0px));
    padding-bottom: 12px;
  }

  .home-header .btn {
    min-height: 52px;
  }
}