@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Poppins:wght@400;500;700&display=swap');

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

body {
  background: #000;
  color: #fff;
  font-family: "Orbitron", sans-serif;
  text-align: center;
}

/* --------- Header --------- */
.logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  letter-spacing: 4px;
  color: #fff;
  margin-top: 5vh;
  animation: glowPulse 3s ease-in-out infinite;
}

.subtitle { font-size: 1.2rem; color: #ccc; margin-top: 1rem; }

.btn {
  display: inline-block;
  margin-top: 2rem;
  background: #fff;
  color: #000;
  padding: 0.8rem 1.6rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
}
.btn:hover { background: #00bfff; color: #000; }

.videos h2 {
  margin-top: 60px;
}

/* --------- Videos grid --------- */
.videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem auto 0;
  max-width: 360px;
}
.video-card {
  position: relative; display: block; width: 100%;
  aspect-ratio: 9/16;
  border-radius: 12px; overflow: hidden;
  background: #111; border: 1px solid #222; text-decoration: none;
}
.video-thumb { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); transition: transform .25s, filter .25s; }
.video-badge { position: absolute; left: 8px; top: 8px; font-size: .75rem; background: #fff; color: #000; padding: 4px 8px; border-radius: 999px; font-weight: 700; }
.video-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; letter-spacing: 1px; opacity: 0; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55) 60%); transition: opacity .25s; }
.video-card:hover .video-thumb { transform: scale(1.03); filter: brightness(.95); }
.video-card:hover .video-overlay { opacity: 1; }

@media (min-width: 768px) {
  .videos-grid { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
}

/* --------- Neon logo animation --------- */
@keyframes glowPulse {
  0% { text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 40px #00bfff; }
  50% { text-shadow: 0 0 15px #00ffff, 0 0 30px #00ffff, 0 0 50px #00ffff, 0 0 80px #00ffff; }
  100% { text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 40px #00bfff; }
}

/* ===========================================================
   NEXT ROOM (μικρός τίτλος, κόκκινο δωμάτιο, key + 114 χωρίς glow)
   =========================================================== */
/* Βάλε ΚΑΘΕΤΗ στοίχιση στην ενότητα */
#next-room {
  position: relative;
  margin-top: 60px;
  padding: 80px 0 60px;
  text-align: center;
  color: #fff;
  display: flex;              /* 👈 */
  flex-direction: column;     /* 👈 κάθετα */
  align-items: center;        /* κεντράρισμα */
  gap: 8px;                   /* απόσταση μεταξύ γραμμών */
}

/* Το μικρό subtitle επάνω */
#next-room h2 {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: none;
  color: #ddd;
  opacity: .85;
  margin: 0 0 6px 0;
}

/* ΔΩΜΑΤΙΟ: δική του γραμμή */
#room-name {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .06em;
  display: block;             /* 👈 σε πλήρη γραμμή */
  width: 100%;
  text-align: center;
  margin: 0;                  /* καθάρισε margins */
}

/* HELL HOLE κόκκινο pulse όπως πριν */
.room-highlight {
  color: #ff2b2b;
  text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
  animation: redPulse 1.8s infinite ease-in-out;
}

/* διαχωριστικό ανάμεσα στο hell και room number*/ 
.divider {
  width: 120px; /* πλάτος γραμμής */
  height: 2px; /* πάχος */
  background: linear-gradient(90deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0.8) 50%, rgba(255,0,0,0) 100%);
  margin: 14px auto; /* απόσταση πάνω-κάτω & κεντράρισμα */
  border-radius: 3px;
  filter: blur(0.5px);
  
/* Κλειδί + 114: ΜΙΑ οριζόντια σειρά, ΚΑΤΩ από το δωμάτιο */
#total-rooms {
  margin-top: 6px;
  display: flex;              /* 👈 οριζόντια μόνο εδώ */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Χωρίς glow */
#room-count { font-size: 2rem; font-weight: 700; text-shadow: none; }

/* Ετικέτα κάτω-κάτω, σε δική της γραμμή */
.rooms-label {
  font-size: .8rem;
  color: #ccc;
  letter-spacing: 1px;
  margin-top: 6px;
  display: block;             /* 👈 νέα γραμμή */
}

/* Οι λεπτές γραμμές επάνω/κάτω της ενότητας */
#next-room::before,
#next-room::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(0,191,255,0) 0%, rgba(0,191,255,0.35) 50%, rgba(0,191,255,0) 100%);
  opacity: .6;
  filter: blur(2px);
}
#next-room::before { top: 20px; }
#next-room::after  { bottom: 10px; }

/* Responsive tweak για κινητά: κρατάει κάθετα τα πάντα, κλειδί+114 παραμένουν οριζόντια */
@media (max-width:520px){
  #total-rooms { gap: 8px; }
}

/* --------- Nun background (προαιρετικό) --------- */
.nun-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.6) 100%),
    url('./images/silhouette.png') center 40% / clamp(800px, 28vw, 460px) auto no-repeat;
  pointer-events: none;
}
main, section, footer { position: relative; z-index: 1; }