:root{
  --bg1:#050713;
  --bg2:#0b1130;
  --gold:#d8b15a;
  --gold2:#f3d389;
  --ink:#eaf0ff;
  --card: rgba(10,18,45,.55);
  --blur: 14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Amiri", serif;
  color:var(--ink);
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(800px 500px at 80% 20%, rgba(216,177,90,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Stars */
.stars, .stars::before, .stars::after{
  position:absolute; inset:-10%;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 55% 30%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(2px 2px at 75% 60%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 90% 25%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,.45), transparent 55%);
  background-repeat: repeat;
  background-size: 420px 420px;
  animation: twinkle 6s ease-in-out infinite;
  opacity:.55;
  filter: blur(.2px);
  pointer-events:none;
}

.stars::before{ content:""; opacity:.35; transform:translate3d(30px,-10px,0) scale(1.1); animation-duration:8s; }
.stars::after{ content:""; opacity:.25; transform:translate3d(-40px,20px,0) scale(1.2); animation-duration:10s; }

@keyframes twinkle{
  0%,100%{ opacity:.35; }
  50%{ opacity:.65; }
}

/* Moon sky */
.moon-sky{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.9;
}

.moon-wrap{
  position:absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, 95vw);
  height: 360px;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
  opacity:.75;
}

/* Screens */
.screen{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  z-index:1;
}

.panel{
  width:min(820px, 94vw);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  border-radius: 24px;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  overflow:hidden;
  position:relative;
}

.panel-inner{
  padding: 34px 28px 28px;
  text-align:center;
  position:relative;
  z-index:2;
}

.headline{
  font-family:"Aref Ruqaa Ink", serif;
  font-weight:700;
  font-size: clamp(28px, 4.5vw, 54px);
  line-height:1.2;
  margin: 0 0 14px;
  color: var(--gold2);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.sub{
  margin:0 0 22px;
  font-size: clamp(16px, 2.2vw, 20px);
  opacity:.9;
}

.form{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 14px;
}

input{
  width:min(360px, 90vw);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  outline:none;
  background: rgba(0,0,0,.20);
  color: var(--ink);
  font-size: 18px;
  transition: transform .15s ease, border-color .15s ease;
}

input::placeholder{ color: rgba(234,240,255,.60); }

button{
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(216,177,90,.35);
  background: linear-gradient(180deg, rgba(216,177,90,.24), rgba(216,177,90,.10));
  color: var(--gold2);
  font-family:"Amiri", serif;
  font-size: 18px;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}

button:hover{ transform: translateY(-1px); filter: brightness(1.05); }
button:active{ transform: translateY(0px) scale(.99); }

.hint{
  margin: 14px 0 0;
  font-size: 14px;
  opacity:.75;
}

/* Error */
.error{
  margin: 12px 0 0;
  font-size: 15px;
  color: rgba(255,170,170,.95);
  display:none;
}

.error.show{ display:block; }

.shake{
  animation: shake .28s ease-in-out 0s 2;
  border-color: rgba(243,120,120,.65) !important;
}

@keyframes shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(6px); }
  50%{ transform: translateX(-6px); }
  75%{ transform: translateX(4px); }
  100%{ transform: translateX(0); }
}

/* Main view */
.main-wrap{
  min-height: min(680px, 82vh);
  display:grid;
  place-items:center;
  position:relative;
}

.greet{
  font-family:"Aref Ruqaa Ink", serif;
  font-weight:700;
  font-size: clamp(26px, 4.2vw, 50px);
  margin: 0 0 10px;
  color: var(--gold2);
}

.name-line{
  font-size: clamp(18px, 2.8vw, 26px);
  margin: 0 0 12px;
  opacity:.95;
}

.status-line{
  margin: 0 0 18px;
  font-size: 16px;
  opacity: .85;
}

.countdown{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 10px;
}

.unit{
  min-width: 120px;
  padding: 12px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.num{
  font-size: 34px;
  font-weight:700;
  color: var(--gold2);
  line-height:1;
}

.lbl{
  margin-top:6px;
  font-size: 15px;
  opacity:.85;
}

.note{
  margin-top: 12px;
  font-size: 13px;
  opacity:.75;
}

.footer{
  margin-top: 22px;
  font-size: 16px;
  opacity:.9;
}

.sig{
  margin-top: 6px;
  font-size: 18px;
  color: var(--gold2);
  font-weight:700;
}

/* Ornaments */
.ornaments{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}

.garland{
  position:absolute;
  left:-10%;
  right:-10%;
  top: 0;
  height: 180px;
  opacity: .95;
  animation: sway 6.5s ease-in-out infinite;
  transform-origin: 50% 0%;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
}

.side{
  position:absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  opacity:.65;
  animation: sway 7.2s ease-in-out infinite;
  transform-origin: 50% 10%;
}

.side.left{ left:-30px; }
.side.right{ right:-30px; transform: scaleX(-1); }

@keyframes sway{
  0%,100%{ transform: rotate(-1.2deg) translateY(0); }
  50%{ transform: rotate(1.2deg) translateY(4px); }
}

/* Audio control */
.audio-btn{
  position:absolute;
  top: 18px;
  left: 18px;
  z-index:5;
  pointer-events:auto;
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink);
  font-size: 14px;
  cursor:pointer;
  user-select:none;
}

.dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(216,177,90,.95);
  box-shadow: 0 0 16px rgba(216,177,90,.65);
}

.muted .dot{
  background: rgba(255,255,255,.35);
  box-shadow:none;
}

/* Transitions */
.fade-in{ animation: fadeIn .5s ease both; }
.fade-out{ animation: fadeOut .35s ease both; }

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

@keyframes fadeOut{
  from{ opacity:1; }
  to{ opacity:0; }
}