:root{
  --bg:#050508;
  --bg-2:#0b0a10;
  --ink:#eee7da;
  --muted:#a99a84;
  --gold:#c9a227;
  --gold-light:#e0bd52;
  --gold-soft:rgba(201,162,39,.18);
  --card:rgba(10,10,14,.72);
  --border:rgba(201,162,39,.26);
  --shadow:0 20px 60px rgba(0,0,0,.6);
  --font-serif:Cinzel, Georgia, "Times New Roman", serif;
  --font-sans:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  min-height:100%;
}

body{
  font:16px/1.6 var(--font-sans);
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(201,162,39,.07), transparent 60%),
    radial-gradient(700px 420px at 10% 20%, rgba(88,60,120,.18), transparent 60%),
    radial-gradient(700px 420px at 90% 80%, rgba(120,70,30,.10), transparent 60%),
    linear-gradient(180deg, #040406 0%, #09080d 100%);
  overflow:hidden;
}

#stars{
  position:fixed;
  inset:0;
  z-index:-2;
  background:transparent;
}

#nebula{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(500px 300px at 20% 30%, rgba(88,60,120,.18), transparent 60%),
    radial-gradient(600px 320px at 80% 18%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(450px 280px at 50% 78%, rgba(90,30,60,.12), transparent 60%);
  filter:blur(8px);
  animation: nebulaPulse 10s ease-in-out infinite;
}

.coming-page{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.coming-card{
  width:min(760px, 100%);
  padding:44px 30px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.coming-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(201,162,39,.08), transparent 22%, transparent 78%, rgba(201,162,39,.06)),
    radial-gradient(circle at top, rgba(255,255,255,.05), transparent 45%);
  pointer-events:none;
}

.symbol-wrap{
  position:relative;
  width:140px;
  height:140px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.coming-logo{
  width:72px;
  height:72px;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(201,162,39,.3));
  z-index:2;
}

.symbol-ring{
  position:absolute;
  border:1px solid rgba(201,162,39,.28);
  border-radius:50%;
}

.ring-1{
  width:110px;
  height:110px;
  animation:spinSlow 18s linear infinite;
}

.ring-2{
  width:140px;
  height:140px;
  border-style:dashed;
  opacity:.8;
  animation:spinReverse 24s linear infinite;
}

.coming-tag{
  color:var(--gold-light);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.78rem;
  margin-bottom:14px;
}

.coming-title{
  font-family:var(--font-serif);
  font-size:clamp(2rem, 5vw, 4rem);
  line-height:1.1;
  color:var(--gold-light);
  text-shadow:0 0 22px rgba(201,162,39,.16);
  margin-bottom:12px;
}

.coming-title span{
  display:block;
  font-size:clamp(1rem, 2.5vw, 1.55rem);
  color:var(--muted);
  margin-top:10px;
  letter-spacing:.08em;
}

.coming-author{
  color:var(--gold);
  font-weight:600;
  margin-bottom:24px;
  letter-spacing:.08em;
}

.coming-text{
  max-width:560px;
  margin:0 auto 14px;
  color:var(--ink);
  font-size:1.02rem;
}

.coming-text.soft{
  color:var(--muted);
}

.coming-seal{
  margin:28px auto 22px;
  width:max-content;
  padding:10px 18px;
  border:1px solid rgba(201,162,39,.35);
  border-radius:999px;
  color:var(--gold-light);
  background:rgba(201,162,39,.08);
  box-shadow:0 0 24px rgba(201,162,39,.08);
}

.coming-footer{
  margin-top:10px;
  color:var(--muted);
  font-style:italic;
}

@keyframes nebulaPulse{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.04);opacity:1}
}

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

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

@media (max-width: 640px){
  .coming-card{
    padding:34px 22px;
    border-radius:22px;
  }

  .coming-text{
    font-size:.97rem;
  }

  .symbol-wrap{
    width:120px;
    height:120px;
  }

  .ring-1{
    width:92px;
    height:92px;
  }

  .ring-2{
    width:120px;
    height:120px;
  }

  .coming-logo{
    width:60px;
    height:60px;
  }
}