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

html, body {
  height: 100%;
  font-family: 'Segoe UI', 'Noto Sans Bengali', Arial, sans-serif;
  overflow: hidden;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 20% 10%, #10173a 0%, #060a1f 45%, #01030d 100%);
  background-size: 140% 140%;
  animation: bgDrift 22s ease-in-out infinite;
}

@keyframes bgDrift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 60% 40%; }
  100% { background-position: 0% 0%; }
}

/* drifting nebula clouds */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}

.nebula-1 {
  width: 55vw; height: 55vw;
  top: -10%; left: -12%;
  background: radial-gradient(circle, rgba(92,60,200,0.55) 0%, rgba(92,60,200,0) 70%);
  animation: driftA 26s ease-in-out infinite;
}

.nebula-2 {
  width: 45vw; height: 45vw;
  top: 5%; right: -10%;
  background: radial-gradient(circle, rgba(30,110,220,0.5) 0%, rgba(30,110,220,0) 70%);
  animation: driftB 32s ease-in-out infinite;
}

.nebula-3 {
  width: 40vw; height: 40vw;
  bottom: -15%; left: 30%;
  background: radial-gradient(circle, rgba(220,80,140,0.35) 0%, rgba(220,80,140,0) 70%);
  animation: driftC 38s ease-in-out infinite;
}

@keyframes driftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.15); }
}
@keyframes driftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8%, 6%) scale(1.1); }
}
@keyframes driftC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5%, -10%) scale(1.2); }
}

/* starfield */
#stars {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

/* floating feature text */
#dust {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.float-text {
  position: absolute;
  bottom: -40px;
  white-space: nowrap;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 8px rgba(140,180,255,0.9),
    0 0 18px rgba(120,160,255,0.7),
    0 0 32px rgba(100,140,255,0.5);
  animation-name: floatUp, textGlow;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes floatUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: 0.9; }
  85% { opacity: 0.65; }
  100% { transform: translateY(-115vh) translateX(25px); opacity: 0; }
}

@keyframes textGlow {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(140,180,255,0.9),
      0 0 18px rgba(120,160,255,0.7),
      0 0 32px rgba(100,140,255,0.5);
  }
  50% {
    text-shadow:
      0 0 14px rgba(180,210,255,1),
      0 0 30px rgba(150,190,255,0.9),
      0 0 50px rgba(120,160,255,0.7);
  }
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: linear-gradient(-45deg, rgba(255,255,255,1), rgba(255,255,255,0));
  filter: drop-shadow(0 0 6px white);
  animation: shoot 6s linear infinite;
  opacity: 0;
}

@keyframes shoot {
  0% { transform: translate(0,0) rotate(215deg); opacity: 1; width: 2px; }
  5% { opacity: 1; }
  15% { transform: translate(-280px, 200px) rotate(215deg); opacity: 0; width: 120px; }
  100% { opacity: 0; }
}



@keyframes planetPulse {
  0%, 100% {
    box-shadow: 0 0 120px 30px rgba(255,140,60,0.25), inset -40px -40px 120px rgba(0,0,0,0.6);
  }
  50% {
    box-shadow: 0 0 160px 45px rgba(255,150,70,0.4), inset -40px -40px 120px rgba(0,0,0,0.6);
  }
}

.planet-wrap::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 70%, rgba(20,30,70,0.85) 0%, rgba(10,15,40,0.6) 30%, transparent 55%);
  animation: cloudDrift 40s linear infinite;
}
.planet-wrap::before{
  content:"";
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background: radial-gradient(circle at 66% 28%, rgba(255,255,255,0.9) 0%, rgba(255,220,150,0.5) 4%, transparent 12%);
  filter: blur(2px);
  animation: flarePulse 5s ease-in-out infinite;
}

@keyframes cloudDrift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes flarePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.planet-glow-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 108%; height: 108%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255,170,90,0.15);
  animation: ringPulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.15; }
}

.content {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.35), 0 0 0 3px rgba(255,255,255,0.08);
  margin-bottom: 22px;
  animation: floatLogo 4s ease-in-out infinite;
}
.logo-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

h1.brand {
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-shadow: 0 0 25px rgba(255,255,255,0.35);
  margin-bottom: 10px;
  animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 25px rgba(255,255,255,0.35); }
  50% { text-shadow: 0 0 40px rgba(255,210,150,0.6); }
}

p.subtitle {
  color: #dfe3f0;
  font-size: 1.15rem;
  margin-bottom: 34px;
  text-shadow: 0 0 12px rgba(0,0,0,0.5);
}

.btn-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 34px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 10px;
  color: #fff;
  letter-spacing: 0.5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}
.btn:active {
  transform: translateY(0);
}

.btn-admin {
  background: linear-gradient(180deg, #e64545, #c31c1c);
  box-shadow: 0 6px 18px rgba(198,30,30,0.45);
}

.btn-member {
  background: linear-gradient(180deg, #3fbf5f, #1f9d3d);
  box-shadow: 0 6px 18px rgba(31,157,61,0.45);
}

.footer-note {
  position: absolute;
  bottom: 18px;
  right: 24px;
  color: #b9c0d6;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 6;
}
.footer-note svg { width: 14px; height: 14px; fill: #b9c0d6; }

/* Modal */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(3px);
}
.overlay.active { display: flex; }

.modal {
  background: #0f1530;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 30px;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: popIn 0.25s ease;
  position: relative;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.modal h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 6px;
  font-size: 1.4rem;
}
.modal .modal-sub {
  color: #9aa2c0;
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: 22px;
}

.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  color: #c7cce0;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  transition: border 0.2s ease;
}
.field input:focus {
  border-color: #6b8bff;
}

.modal-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 6px;
  transition: filter 0.2s ease;
}
.modal-submit.admin { background: linear-gradient(180deg, #e64545, #c31c1c); }
.modal-submit.member { background: linear-gradient(180deg, #3fbf5f, #1f9d3d); }
.modal-submit:hover { filter: brightness(1.1); }

.close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #9aa2c0;
  font-size: 1.3rem;
  cursor: pointer;
}
.close-btn:hover { color: #fff; }

.error-msg {
  color: #ff6b6b;
  font-size: 0.8rem;
  text-align: center;
  min-height: 18px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  h1.brand { font-size: 2.3rem; }
  p.subtitle { font-size: 0.95rem; padding: 0 10px; }
  .btn { padding: 12px 24px; font-size: 0.95rem; }
  .float-text { font-size: 0.75rem !important; }
}