.moon-routine,
.moon-routine * {
  box-sizing: border-box;
}

.moon-routine {
  --routine-cream: #fff5de;
  --routine-gold: #d8ae6a;
  --routine-gold-soft: #f7dda2;
  --routine-navy: #050a26;
  --routine-panel: rgba(15, 18, 57, .55);
  --routine-text: #fff8ed;
  --routine-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "Times New Roman", serif;
  --routine-sans: "Yu Gothic", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  position: relative;
  width: min(100%, 720px);
  min-height: 1280px;
  margin: 0 auto;
  overflow: hidden;
  padding: 24px 38px 28px;
  color: var(--routine-text);
  font-family: var(--routine-sans);
  background:
    linear-gradient(180deg, rgba(4, 7, 25, .16) 0%, rgba(4, 7, 25, .08) 31%, rgba(4, 7, 25, .2) 58%, rgba(4, 7, 25, .05) 100%),
    url("../images/routine-flow/routine-bg.png") center top / cover no-repeat,
    var(--routine-navy);
}

.moon-routine::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.96) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(236,193,116,.9) 0 1px, transparent 1.4px);
  background-position: 40px 72px, 126px 38px;
  background-size: 146px 184px, 230px 210px;
  opacity: .3;
}

.moon-routine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 78%, rgba(5, 8, 31, .12) 100%);
}

.moon-routine > * {
  position: relative;
  z-index: 1;
}

.moon-routine a {
  color: inherit;
  text-decoration: none;
}

.moon-routine__header {
  display: grid;
  grid-template-columns: 38px 1fr 58px;
  align-items: start;
  gap: 12px;
  min-height: 58px;
}

.moon-routine__back {
  display: inline-flex;
  width: 34px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: #fff9ef;
  font-family: Arial, sans-serif;
  font-size: 66px;
  font-weight: 200;
  line-height: .72;
  transform: scaleX(.58);
  text-shadow: 0 0 14px rgba(255,255,255,.2);
}

.moon-routine__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding-top: 5px;
  font-family: var(--routine-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.58);
}

.moon-routine__brand span:first-child {
  color: var(--routine-gold-soft);
  font-size: 28px;
  line-height: 1;
}

.moon-routine__menu {
  display: grid;
  width: 52px;
  min-height: 58px;
  justify-items: center;
  padding: 0;
  border: 0;
  color: #fff8ed;
  background: transparent;
  font-family: var(--routine-sans);
}

.moon-routine__menu span {
  display: block;
  width: 35px;
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: #fff8ed;
}

.moon-routine__menu small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.moon-routine__hero {
  padding: 47px 10px 30px;
  text-align: center;
}

.moon-routine__ornament {
  display: flex;
  width: 258px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0 auto 11px;
  color: var(--routine-gold-soft);
  font-size: 28px;
}

.moon-routine__ornament::before,
.moon-routine__ornament::after,
.moon-routine__mood h2 span,
.moon-routine__note::before,
.moon-routine__note::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,188,118,.82), transparent);
}

.moon-routine__ornament::before,
.moon-routine__ornament::after {
  width: 104px;
}

.moon-routine h1,
.moon-routine h2 {
  margin: 0;
  font-family: var(--routine-serif);
  font-weight: 500;
  letter-spacing: .05em;
}

.moon-routine h1 {
  font-size: 45px;
  line-height: 1.18;
  text-shadow: 0 0 20px rgba(245,220,210,.48), 0 4px 28px rgba(0,0,0,.66);
}

.moon-routine__hero p {
  margin: 22px 0 0;
  font-family: var(--routine-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .055em;
  text-shadow: 0 2px 16px rgba(0,0,0,.72);
}

.moon-routine__mood h2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 6px auto 15px;
  max-width: 610px;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,.58);
}

.moon-routine__mood h2 span {
  width: 100%;
}

.moon-routine__options {
  display: grid;
  gap: 11px;
  width: 516px;
  max-width: 100%;
  margin: 0 auto;
}

.moon-routine__option {
  display: grid;
  grid-template-columns: 88px 1fr 38px;
  min-height: 86px;
  align-items: center;
  padding: 8px 25px 8px 15px;
  border: 1px solid rgba(236, 205, 154, .86);
  border-radius: 18px;
  color: var(--routine-text);
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.13), transparent 20%),
    rgba(14, 18, 61, .58);
  box-shadow: inset 0 0 25px rgba(255,255,255,.035), 0 12px 24px rgba(0,0,0,.19);
  font-family: var(--routine-serif);
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: .05em;
  text-align: left;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  cursor: pointer;
}

.moon-routine__option:hover,
.moon-routine__option:focus-visible,
.moon-routine__option.is-selected {
  border-color: rgba(255, 231, 181, .98);
  background:
    radial-gradient(circle at 78% 8%, rgba(255,255,255,.16), transparent 22%),
    rgba(24, 26, 74, .67);
  outline: 0;
}

.moon-routine__option > span:nth-child(3) {
  justify-self: end;
  color: #fff8ed;
  font-family: Arial, sans-serif;
  font-size: 49px;
  font-weight: 200;
  line-height: 1;
}

.moon-routine__option-icon {
  width: 64px;
  height: 64px;
  justify-self: center;
  border-radius: 50%;
  background-image: url("../images/routine-flow/routine-mood-icons.png");
  background-size: 420px 140px;
  background-repeat: no-repeat;
  box-shadow: 0 0 18px rgba(245, 221, 169, .18);
}

.moon-routine__option-icon--tired { background-position: -22px -38px; }
.moon-routine__option-icon--calm { background-position: -101px -38px; }
.moon-routine__option-icon--positive { background-position: -179px -38px; }
.moon-routine__option-icon--love { background-position: -256px -38px; }
.moon-routine__option-icon--anxious { background-position: -333px -38px; }

.moon-routine__note {
  display: grid;
  grid-template-columns: 100px 1fr;
  width: 492px;
  max-width: 100%;
  min-height: 119px;
  align-items: center;
  margin: 25px auto 0;
  padding: 16px 28px 15px 18px;
  border: 1px solid rgba(236, 205, 154, .74);
  color: rgba(255,248,237,.92);
  background: rgba(9, 12, 45, .72);
  font-family: var(--routine-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .05em;
  text-align: left;
  box-shadow: inset 0 0 30px rgba(255,255,255,.02);
}

.moon-routine__note::before,
.moon-routine__note::after {
  position: absolute;
  top: -1px;
  width: 130px;
}

.moon-routine__note::before {
  left: 0;
}

.moon-routine__note::after {
  right: 0;
}

.moon-routine__note-icon {
  width: 76px;
  height: 76px;
  justify-self: center;
  border-radius: 50%;
  background-image: url("../images/routine-flow/routine-mood-icons.png");
  background-position: -24px -39px;
  background-size: 438px 146px;
  background-repeat: no-repeat;
  filter: saturate(.9) brightness(1.08);
}

.moon-routine__note p {
  margin: 0;
}

.moon-routine__cta {
  display: flex;
  width: 498px;
  max-width: calc(100% - 92px);
  min-height: 75px;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 148px auto 0;
  border-radius: 999px;
  color: #2f2538;
  background: linear-gradient(180deg, #fff4cd 0%, #d5aa60 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.62), 0 15px 28px rgba(0,0,0,.34);
  font-family: var(--routine-serif);
  font-size: 28px;
  letter-spacing: .05em;
}

.moon-routine__cta span {
  font-family: var(--routine-sans);
  font-size: 32px;
}

@media (max-width: 560px) {
  .moon-routine {
    width: 100%;
    min-height: 100vh;
    padding: 20px 22px 26px;
  }

  .moon-routine__brand {
    font-size: 19px;
  }

  .moon-routine h1 {
    font-size: 39px;
  }

  .moon-routine__option {
    grid-template-columns: 74px 1fr 34px;
    font-size: 24px;
  }

  .moon-routine__cta {
    max-width: 100%;
  }
}