/* 同じ月 — 1枚の静かな画面 */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 20%, #141a33 0%, #0b0e1d 60%, #070912 100%);
  color: #d9d7cf;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  display: grid;
  place-items: center;
  text-align: center;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
}
#city {
  font-size: 14px;
  letter-spacing: .3em;
  color: #8b8fa8;
}
#moon {
  width: min(56vw, 300px);
  height: auto;
  margin: 8px 0;
}
.moon-dark { fill: #1c2138; }
.moon-lit {
  fill: #f2eedd;
  filter: drop-shadow(0 0 18px rgba(242, 238, 221, .25));
}
h1#phase-name {
  font-size: 26px;
  font-weight: normal;
  letter-spacing: .15em;
}
#age { font-size: 14px; color: #8b8fa8; }
.times { font-size: 15px; }
#phase-text {
  margin-top: 10px;
  font-size: 14px;
  color: #a7a494;
  max-width: 30em;
  line-height: 1.9;
}