/* عام */

body {

  font-family: 'Tajawal', sans-serif;

  margin: 0;

  padding: 0;

  text-align: center;

}

/* شاشة القفل */

#lockScreen {

  background: url("https://i.postimg.cc/W3Cqnvp0/img-1756975468413.jpg") no-repeat center center fixed;

  background-size: cover;

  width: 100vw;

  height: 100vh;

}

.lock-container {

  text-align: center;

  padding-top: 1px;

}

/* خانة الرمز السري */

.code-display {

  margin-bottom: 330px;

  display: flex;

  justify-content: center;

  gap: 8px;

}

.code-display span {

  width: 40px;

  height: 48px;

  line-height: 48px;

  border-radius: 8px;

  background: #fff;

  border: 2px solid #ddd;

  font-size: 20px;

  text-align: center;

}

/* لوحة الأرقام */

.keypad {

  width: 180px;

  margin: -120px auto 10px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 6px;

}

.keypad button {

  padding: 8px 0;

  font-size: 16px;

  border-radius: 8px;

  border: none;

  background: #222;

  color: #fff;

  cursor: pointer;

}

/* أزرار تأكيد ومسح */

.actions {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 60px;

}

.actions .ghost {

  background: #fff;

  color: #222;

  border: 2px solid #ddd;

  padding: 6px 10px;

  border-radius: 8px;

}

.actions .confirm {

  background: #16a34a;

  color: #fff;

  border: none;

  padding: 6px 12px;

  border-radius: 8px;

}

.error { color: red; }

/* البالونات */

#balloonScreen {

  background: url("https://i.postimg.cc/zDTNYz7L/7522f8d3c1388ed1e59fc6749856cbcb.jpg") no-repeat center center/cover;

  min-height: 100vh;

  color: #fff;

  position: relative;

  padding-top: 10px;

}

#balloonContainer {

  margin-top: 200px;

  display: flex;

  justify-content: center;

  align-items: flex-start;

}

.balloon {

  width: 80px;

  height: 100px;

  background: red;

  border-radius: 50%;

  margin: 0 10px;

  position: relative;

  cursor: pointer;

  animation: floatUp 0.5s ease forwards;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  color: #fff;

}

.balloon::after {

  content: '';

  width: 2px;

  height: 40px;

  background: #333;

  position: absolute;

  top: 100%;

  left: 50%;

}

@keyframes floatUp {

  from { transform: translateY(30px); opacity: 0; }

  to { transform: translateY(0); opacity: 1; }

}

@keyframes pop {

  to { transform: scale(1.4); opacity: 0; }

}

.balloon.pop { animation: pop 0.3s forwards; }

.balloon-msg {

  position: absolute;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

  max-width: 220px;

  display: block;

}

/* الصور النهائية فول سكرين */

.end-image {

  width: 100vw;

  height: 100vh;

  object-fit: cover;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 10;

}

/* الصورة الصغيرة داخل صورة1 */

.image1-container {

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: 20;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-direction: column;

}

.image1-btn {

  width: 140px; /* كبر الصورة قليلاً */

  margin-top: 20px;

  cursor: pointer;

  z-index: 30;

  transition: transform 0.3s;

}

/* القلوب */

.hearts {

  position: fixed;

  inset: 0;

  pointer-events: none;

}

.heart {

  position: absolute;

  color: red;

  font-size: 24px;

  animation: fall 3s linear forwards;

}

@keyframes fall {

  from { transform: translateY(-10%); opacity: 1; }

  to { transform: translateY(100vh); opacity: 0; }

}