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

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #000; /* fallback */
}
/* Fullscreen background video */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;        /* تحت كل حاجة */
}

.screen-wrapper {
  width: 100vw;
  height: 100vh;
  /* background: radial-gradient(...);  ← احذف أو علق السطر ده */
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen{
  width:1080px;
  max-width:100%;
  height:1920px;
  max-height:100vh;
  position:relative;
  display:none;
  color:#fff;
}
      .welogo{
          width:70%;
      }

.screen.active{display:block}

/* LOGO */
.logo-circle{
  position:absolute;
  top:40px;
  left:20%;
  transform:translateX(-50%);
  width:130px;height:130px;border-radius:50%;
  background:#fff;color:#7c2c92;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:700;
}

/* START SCREEN */
.start-center{
  position:absolute;
  top:55%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}

.start-text{
  font-size:35px;
  margin-bottom:40px;
  line-height:1.3;
}

.camera-icon svg{
  width:120px;height:120px;
}

.start-overlay-click{
  position:absolute;inset:0;
  cursor:pointer;
}

/* CAPTURE */
.capture-center{
  position:absolute;
  top:55%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;
  gap:26px;
  align-items:center;
}

.capture-frame{
  width:320px;height:520px;
  background:#fff;border-radius:14px;
  position:relative;overflow:hidden;
}

#camera,#canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
#canvas{display:none;}

.capture-overlay-click{
  position:absolute;inset:0;
  cursor:pointer;
  z-index:999;
}

/* COUNTER */
.counter-wrapper{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}

.counter-circle{
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#c03da5 0%,#98288d 40%,#6a1d75 100%);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.arc{
  width:180px;
  height:180px;
  border-radius:50%;
  position:absolute;
  top:10px;
  left:10px;

  /* يبدأ من أعلى مركز الدائرة */
  background: conic-gradient(
      #5C2F8F 0deg,
      #5C2F8F var(--arc-angle,0deg),
      rgba(0,0,0,0) var(--arc-angle,0deg)
  );
  transform:rotate(0deg);
}

.counter-number{
  font-size:78px;
  font-weight:700;
  z-index:3;
}

/* BUTTONS */
.bottom-buttons{text-align:center}

.btn{
  padding:12px 32px;
  font-size:20px;
  background:linear-gradient(90deg,#a22c96,#7b2cda);
  border:none;border-radius:999px;
  color:#fff;cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  margin:0 8px;
}

.small-btn{font-size:17px;padding:10px 24px;margin-top:20px}

/* SHARE */
.share-center{
  position:absolute;top:55%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}

.share-frame{
  width:320px;height:520px;
  background:#fff;border-radius:14px;
  overflow:hidden;margin:0 auto 26px;
}
.share-frame img{width:100%;height:100%;object-fit:cover;}

.share-text{font-size:28px;margin-bottom:20px;}

.share-icons{display:flex;justify-content:center;gap:26px;}

.share-icon{
  width:70px;height:70px;border-radius:16px;
  background:transparent !important;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  border:0px !important;
}
.svgicon{
    height:70px;
    filter:invert(1) !important;
}
.icon-symbol{font-size:28px;}
.share-icon.wa{color:#25D366}

/* INPUT SCREENS */
.input-center{
  position:absolute;top:55%;left:50%;
  transform:translate(-50%,-50%);
  width:70%;max-width:600px;text-align:center;
}

.input-icon{
  width:70px;height:70px;border-radius:16px;
  background:rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;font-size:32px;
}
.input-icon.wa{color:#25D366}

.input-field{
  width:100%;padding:16px 22px;
  border:none;border-radius:999px;
  font-size:20px;outline:none;
}

/* THANK YOU */
.thank-center{
  position:absolute;top:55%;left:50%;
  transform:translate(-50%,-50%);
}
.thank-text{font-size:58px;font-weight:600;}