/* ============================================================
   ONE VERSE 〜どんないろ？〜 近日公開ページ
   Palette: 深い黒 / 上品なゴールド
============================================================ */

:root{
  --night-deep: #06050c;
  --night: #100a1e;
  --night-2: #1a1030;
  --gold: #f3c869;
  --gold-deep: #d9a53b;
  --gold-light: #ffe4a3;
  --white: #f6f1e6;
  --font-display: 'Cinzel', 'Zen Maru Gothic', serif;
  --font-body: 'Zen Maru Gothic', sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  background: var(--night-deep);
  color: var(--white);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

img{ max-width: 100%; display: block; }

/* ---------------- Starfield background ---------------- */
#starfield{
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 5%, rgba(243,200,105,0.12), transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(255,93,162,0.08), transparent 50%),
    linear-gradient(180deg, var(--night-deep), var(--night) 45%, var(--night-2) 100%);
  pointer-events: none;
}
.star{
  position: absolute;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: .8;
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity: .12; transform: scale(0.8); }
  50%{ opacity: 1; transform: scale(1.2); }
}

/* ---------------- Coming Soon Hero ---------------- */
.coming-soon-page{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 40px;
}
.coming-soon-hero{
  max-width: 620px;
  width: 100%;
  text-align: center;
}
.poster-frame{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 3px rgba(243,200,105,0.35);
  margin-bottom: 36px;
  animation: floatPoster 6s ease-in-out infinite;
}
@keyframes floatPoster{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.coming-soon-label{
  font-family: var(--font-display);
  letter-spacing: .25em;
  font-size: .95rem;
  color: var(--gold);
  margin: 0 0 12px;
}
.coming-soon-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 0 0 18px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-deep) 70%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.coming-soon-sub{
  font-size: 1.05rem;
  color: rgba(246,241,230,0.85);
  margin: 0;
  line-height: 1.9;
}

/* ---------------- Footer ---------------- */
.coming-soon-footer{
  text-align: center;
  padding: 24px 20px;
  border-top: 1px solid rgba(243,200,105,0.15);
}
.coming-soon-footer p{
  font-size: .78rem;
  color: rgba(246,241,230,0.35);
  margin: 0;
}

@media (max-width: 480px){
  .coming-soon-page{ padding: 40px 16px 30px; }
}