:root{
  --logo-top: 5.2%;
  --logo-w: 35.7%;      /* كان 42%  => -15% */

  --title-top: 12.5%;
  --title-w: 66.3%;     /* كان 78%  => -15% */

  --upload-top: 34.2%;
  --upload-w: 61.2%;    /* كان 72%  => -15% */
  --upload-h: 10.7%;    /* كان 12.6% => -15% */

  --name-label-top: 49.1%;
  --input-top: 52.0%;
  --input-w: 66%;
  --input-h: 2.55rem;

  --button-top: 59.8%;
  --button-w: 28%;
  --button-h: 2.25rem;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#000;
  overflow:hidden;
}

/* Fullscreen stage */
.stage{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  isolation:isolate;
}

/* Backgrounds (mobile default) */
.stage::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("bg-mobile.png");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  z-index:0;
}

/* Desktop background override */
@media (min-width: 768px){
  body{ overflow:auto; }
  .stage{
    min-height:100vh;
    height:100vh;
  }
  .stage::before{
    background-image:url("bg-desktop.png");
    background-position:center center;
  }
}

/* Safe-area padding */
.safe{
  position:absolute;
  inset:0;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  z-index:1;
}

.ui{
  position:absolute;
  inset:0;
}

/* Logo */
.logo{
  position:absolute;
  top:var(--logo-top);
  left:50%;
  transform:translateX(-50%);
  width:var(--logo-w);
  max-width: 240px;
  min-width: 150px;
  height:auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Title image */
.title-img{
  position:absolute;
  top:var(--title-top);
  left:50%;
  transform:translateX(-50%);
  width:var(--title-w);
  max-width: 520px;
  min-width: 260px;
  height:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

/* ========= MEDIA UPLOAD (exact look) ========= */
.media-upload{
  position:absolute;
  top:var(--upload-top);
  left:50%;
  transform:translateX(-50%);
  width:var(--upload-w);
  height:var(--upload-h);

  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 18px 35px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;

  cursor:pointer;
  user-select:none;
}

.plus-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  line-height:1;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.upload-text{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #ffffff;
  opacity: 0.9;
  text-transform: uppercase;

  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:center;
}

/* Full name label */
.name-label{
  position:absolute;
  top:var(--name-label-top);
  left:50%;
  transform:translateX(-50%);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  letter-spacing:.4px;
  text-shadow: 0 6px 16px rgba(0,0,0,.45);
}

/* Input */
.name-input{
  position:absolute;
  top:var(--input-top);
  left:50%;
  transform:translateX(-50%);
  width:var(--input-w);
  height:var(--input-h);
  border-radius: 8px;
  border: 0;
  outline: none;
  padding: 0 14px;
  font-size: 15px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}

/* Submit */
.submit{
  position:absolute;
  top:var(--button-top);
  left:50%;
  transform:translateX(-50%);
  width:var(--button-w);
  height:var(--button-h);
  border-radius: 10px;
  border:0;
  background: linear-gradient(180deg, #f0c75f, #c79628);
  color: #fff;
  font-weight:900;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow: 0 16px 30px rgba(0,0,0,.45);

  opacity:.65;
  pointer-events:none;
}
.submit.enabled{
  opacity:1;
  pointer-events:auto;
}
.submit:active{ transform:translateX(-50%) scale(.99); }

/* only one hidden file input */
#videoInput{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

/* ========= MODAL ========= */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
}
.modal-backdrop.show{ display:flex; }

.modal{
  width: min(680px, 96vw);
  border-radius:18px;
  background: rgba(20,20,20,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.10);
  padding: 18px 16px 14px;
  color:#fff;
}

.modal.centered{
  text-align:center;
  padding: 22px 18px 18px;
}

.modal h3{ margin:0 0 10px; font-size:16px; letter-spacing:.3px; }
.modal p{ margin:0 0 12px; font-size:13px; opacity:.9; }

.bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.bar > div{
  height:100%;
  width:0%;
  background: linear-gradient(180deg, #f0c75f, #c79628);
  transition: width .15s linear;
}

.modal-row{
  display:flex;
  align-items:center;
  justify-content:center;  /* ✅ في النص */
  margin-top:12px;
  gap:10px;
  flex-wrap: wrap;
}

.pct{
  flex-basis: 100%;
  text-align:center;       /* ✅ النسبة في النص */
  font-weight:800;
  letter-spacing:.5px;
}


.modal-btn{
  border:0;
  background: rgba(255,255,255,.12);
  color:#fff;
  border-radius:12px;
  padding:12px 18px;
  cursor:pointer;
  min-width: 220px;        /* ✅ عرض أكبر */
  text-align:center;
}

.modal-btn.primary{
  background: linear-gradient(180deg, #f0c75f, #c79628);
  font-weight:900;
  letter-spacing:.8px;
  min-width: 260px;        /* ✅ OK أكبر */
}
.modal-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* success animation */
.success-check{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  margin: 6px auto 14px;
  display:grid;
  place-items:center;
  background: rgba(240,199,95,0.16);
  border: 1px solid rgba(240,199,95,0.35);
  box-shadow: 0 18px 45px rgba(0,0,0,0.55);
  transform: scale(.85);
  opacity: 0;
}
.success-check svg{
  width: 34px;
  height: 34px;
}
.pop-in{
  animation: popIn .55s cubic-bezier(.2,.9,.2,1) forwards;
}
.fade-in{
  animation: fadeIn .45s ease forwards;
}
@keyframes popIn{
  to { transform: scale(1); opacity: 1; }
}
@keyframes fadeIn{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}