/* ===== Figma Variables ===== */
/*:root {
  --font-family-inter: 'Inter', sans-serif;
  --ahra: 325;
  --chura: 10;
  --hamarik: 95;
  --lete: 45;
  --santamasa: 20;
  --tahay: 35;
  --veles: 215;
}*/

/* ===== CSS Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*-------------------*/
body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== Images ===== */
img {
  max-width: 100%;
  height: auto;
}

/* ===== Figma Frame & Union ===== */
.frame-64-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background-color: rgba(255, 255, 255, 1);
  padding: 0 24px;
}

.union-2 {
  flex-grow: 0;
  flex-shrink: 10;
  flex-basis: auto;
  fill: rgba(255, 255, 255, 1);
  border: none;
  outline: none;
}


/* ===== BACKGROUND ===== */
body {
  margin: 0;
  overflow: hidden;
  background-color: hsl(218, 12%, 45%);
  background-image: url('images/fonto.png');
  background-size: cover;  /* Ensure the image covers the entire viewport */
  background-position: center center;  /* Center the image in the viewport */
  background-attachment: fixed;
  height: 100vh;
}



/* ===== CONTAINER ===== */
/*=========i-need-some-spaceeeeeeee=======*/

/* Scroll + zoom support */
.space-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* enables scrollbars when needed */
  touch-action: none;
  /* allows touch zoom */
  cursor: grab;
}

.space-container:active {
  cursor: grabbing;
}

.space {
  position: absolute;
  top: 40%;
  left: 59%;
  width: 1600px;
  /* make the solar system wide enough to scroll */
  height: 1600px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  transition: transform 0.3s ease-out;
  overflow: visible;
  /* clip content outside the viewport i mipos visible??????????*/
  /*display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center; den ta xreiazomai pleon */
}

/* === Prevent accidental selection or dragging === */
.space-container,
.space,
.space * {
  user-select: none;
  /* disable text/image selection */
  -webkit-user-drag: none;
  /* disable dragging of images in WebKit browsers */
  -webkit-tap-highlight-color: transparent;
  /* remove tap highlight on mobile */
}

/* === Fix star visibility when zooming/panning === */
.space-container .stars-wrapper {
  transform: translate(-50%, -50%) scale(var(--star-scale, 1));
  top: 50%;
  left: 50%;
  width: 200vw;
  height: 200vh;
  pointer-events: none;
}





/* ====== STARFIELD SYSTEM ====== */
/*============nomizw edw ta astarta me px douleuoun kalitera*=======*/
.space .stars-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 4000px;
  /* Fixed large size instead of vw/vh */
  height: 4000px;
  /*transform: translate(-50%, -50%);*/
  transform-origin: center center;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Individual star layers */
.stars-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*Layer 1: Large bright stars */
/*
.stars-layer:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 51% 56%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 55% 63%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 58% 60%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 62% 80%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 64% 90%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 69% 70%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 72% 80%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 74% 90%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 75% 85%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 77% 53%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 80% 65%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 83% 57%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 88% 85%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 95% 66%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px),
    radial-gradient(circle at 98% 75%, rgba(255, 255, 255, 0.9) 1px, transparent 0.5px);
  animation: twinkle1 7s ease-in-out infinite alternate;
  animation-delay: 1s;
}*/

/* Layer 2: Medium blue stars */
/*
.stars-layer:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 52% 52%, rgba(0, 255, 255, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 60% 60%, rgba(247, 0, 255, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 65% 75%, rgba(115, 255, 0, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 70% 80%, rgba(0, 255, 255, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 75% 60%, rgba(255, 17, 0, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 80% 60%, rgba(229, 255, 0, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 85% 70%, rgba(0, 255, 255, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 85% 85%, rgba(255, 115, 0, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 90% 70%, rgba(238, 255, 0, 0.7) 0.5px, transparent 0.3px),
    radial-gradient(circle at 95% 90%, rgba(255, 0, 179, 0.7) 0.5px, transparent 0.3px);

  animation: twinkle2 5s ease-in-out infinite alternate;
  animation-delay: 3s;
}*/

/* Layer 3: Small yellow stars */
/*
.stars-layer:nth-child(3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 55% 57%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 65% 53%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 65% 90%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 67% 64%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 70% 62%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 75% 85%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 77% 84%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 82% 57%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 85% 74%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px),
    radial-gradient(circle at 87% 68%, rgba(255, 255, 200, 0.8) 0.5px, transparent 0.3px);

  animation: twinkle3 4s ease-in-out infinite alternate;
  animation-delay: 2s;
}*/

/* Twinkle animations */
/*
@keyframes twinkle1 {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.8;
  }
}

@keyframes twinkle2 {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.9;
  }
}

@keyframes twinkle3 {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.5;
  }
}*/


/* ----------------------------asterakia svg layer----------------*/
/*=============den kserw an gineai na einai true infinite=======*/

/* === SVG STAR BACKGROUND - FIXED === */
.space .stars-svg {
  position: absolute;
  /* Cover the entire zoomable space with repeating pattern */
  top: -5000px;
  left: -5000px;
  width: 10000px;
  height: 10000px;
  background: url("images/stars.svg") repeat;
  background-size: 800px 800px;
  z-index: -1;
  opacity: 0.8;
  pointer-events: none;
  /* Remove the transform since we're positioning manually */
  transform: none;
}

/*----------------------------------------------------------------*/
/*===========kommmmmitisssssssssssssssss===========*/
.comet-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2000px;
  height: 2000px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  /* behind planets & orbits */
}

.comet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform-origin: center center;
  opacity: 0.9;
  pointer-events: none;
}

.comet img {
  width: 100%;
  height: 100%;
  transform: rotate(120deg);/* tail direction */
  /*filter: drop-shadow(0 0 10px rgba(0, 200, 255, 0.75));*/ /*skia feggei*/
}
.orbit-c1, .orbit-c2, .orbit-c3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: spin linear infinite;
}

/* Different orbit sizes and durations */
.orbit-c1 { width: 1200px; height: 300px; animation-duration: 100s; }
.orbit-c2 { width: 1000px; height: 250px; animation-duration: 315s; }
.orbit-c3 { width: 1400px; height: 350px; animation-duration: 160s; }

/* Each comet initial position along the orbit */
.c1a { transform: rotate(0deg) translateX(400px); }
.c1b { transform: rotate(140deg) translateX(400px); }
.c2a { transform: rotate(20deg) translateX(500px); }
.c2b { transform: rotate(100deg) translateX(350px); }
.c2c { transform: rotate(200deg) translateX(570px); }
.c2d { transform: rotate(300deg) translateX(500px); }
.c3a { transform: rotate(50deg) translateX(550px); }
.c3b { transform: rotate(210deg) translateX(550px); }

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* A new independent layer just for straight comets */
/* MAIN WRAPPER — centered inside the solar system */
.ellipse-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* TRUE CENTER */
  pointer-events: none;
  z-index: 2;
}

/* Only rotation is animated */
.ellipse-rotator {
  width: 0;
  height: 0;
  animation: ellipseSpin 120s linear infinite;
  transform-origin: center center;
}

/* The elliptical shape — 2500 × 400 */
.ellipse-path {
  position: absolute;
  width: 2500px;
  height: 400px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(10deg); /* tilt ellipse */
  pointer-events: none;
}

/* Comets placed on ellipse radius */
.fly1 { transform: rotate(0deg) translateX(1250px); }
.fly2 { transform: rotate(100deg) translateX(1250px); }

@keyframes ellipseSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/*
.orbit-new {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-580%, -80%);
  animation: spin 10s linear infinite; 
}

.new1 { transform: rotate(0deg) translateX(200px)  }
.new2 { transform: rotate(190deg) translateX(100px); }*/

/* ==================================================== SUN ===== */
/* Position the Figma SVG behind the Sun Z=0*/
.frame-64-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* behind the sun */
  background: none;
  /* remove Figma white background */
  animation: rotateSVG 100s linear infinite;
  /* rotation speed */
}

@keyframes rotateSVG {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-180deg);
  }

}

.union-2 {
  display: block;
  width: 80px;
  /* adjust size around the sun Z=1*/
  height: 80px;
  fill: white;
  stroke: rgb(109, 109, 105);
  z-index: 0;
  pointer-events: none;
  /* avoid blocking clicks */
}

/* keep the sun above the svg */

.sun {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 43px;
  height: 43px;
  background: white;
  border: 1px solid rgb(109, 109, 105);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ===== ORBITS ===== */
.orbit {
  position: absolute;
  /* top: 50%;
  left: 50%;*/
  border: 2px solid rgb(52, 52, 53);
  border-radius: 50%;
  /*transform: translate(-50%, -50%);*/
  animation: rotate 60s linear infinite;
  /**/
  transform-origin: center center;
  /**/
  pointer-events: none;
}

/* different orbit radii & speeds */
.orbit1 {
  width: 220px;
  height: 220px;
  top: calc(50% + 15px);
  left: calc(50% - 10px);
  animation-duration: 32s;
}

.orbit2 {
  width: 300px;
  height: 300px;
  top: calc(50% + 35px);
  left: calc(50% - 18px);
  animation-duration: 50s;

}

.orbit3 {
  width: 420px;
  height: 420px;
  top: calc(50% + 80px);
  left: calc(50% - 34px);
  animation-duration: 30s;

}

.orbit4 {
  width: 550px;
  height: 550px;
  /**/
  top: calc(50% + 85px);
  left: calc(50% - 45px);
  /**/
  animation-duration: 40s;
}

.orbit5 {
  width: 580px;
  height: 580px;
  top: calc(50% + 35px);
  left: calc(50% - 30px);
  animation-duration: 58s;
}

.orbit6 {
  width: 670px;
  height: 670px;
  /**/
  top: calc(50% + 90px);
  left: calc(50% - 90px);
  /**/
  animation-duration: 70s;
}

.orbit7 {
  width: 880px;
  height: 880px;
  /**/
  top: calc(50% + 90px);
  left: calc(50% - 90px);
  /**/
  animation-duration: 90s;
}


/* Keep planets centered within their orbit */
.orbit>.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;

}

/* ===== PLANETS ===== */
.planet {
  position: absolute;
  border: 1px solid black;
  border-radius: 50%;
  z-index: 5;
  cursor: pointer;
  /* makes it obviously hoverable */
  pointer-events: auto;
}

.planet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 125%;
  height: 125%;
  border-radius: 50%;
  border: 2px solid rgba(60, 206, 250, 0.7);
  box-shadow:
    0 0 10px 4px rgba(59, 162, 247, 0.3),
    0 0 25px 8px rgba(14, 126, 255, 0.2);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: all 0.35s ease-out;
  pointer-events: none;
  z-index: 1;
  /* visible above orbit */
}

.planet:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ============================================= PLANET INFO PANEL ===== */
.planet-info {
  position: absolute;
  top: 10%;
  right: 15px;
  width: 280px;
  padding: 16px 20px;
  background: rgba(10, 10, 30, 0.85);
  border: 1px solid #008cff66;
  border-radius: 10px;
  color: white;
  font-family: var(--font-family-inter);
  box-shadow: 0 0 20px #008cff4d;
  display: none;
  /* hidden by default */
  z-index: 100;
  user-select: none;
  /*de mporei na klikarei to keimeno*/
}

.planet-info.active {
  display: block;
  /* show when active */
}

.planet-info h2 {
  margin-bottom: 8px;
  color: rgb(95, 216, 253);
  font-size: 22px;
}

.planet-info p {
  font-size: 18px;
  line-height: 1.4;
}

.planet-info .info-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: #cdeeff;
  /*font-size: 16px;*/
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}


/* Planet sizes */
.planet1 {
  width: 16px;
  height: 16px;
  transform: rotate(0deg) translateX(102px);
  background: url("images/1.svg") center/cover no-repeat;
}

.planet2 {
  width: 30px;
  height: 30px;
  transform: rotate(40deg) translateX(126px);
  /*kanonika 135*/
  background: url("images/2.svg") center/cover no-repeat;
}

.planet3 {
  width: 36px;
  height: 36px;
  transform: rotate(120deg) translateX(198px);
  /*kanonika188 alla i peristrofi to xala*/
  background: url("images/3.svg") center/cover no-repeat;
}

.planet4 {
  width: 46px;
  height: 46px;
  transform: translateX(252px);
  background: url("images/4.svg") center/cover no-repeat;
}

.planet5 {
  width: 44px;
  height: 44px;
  transform: rotate(-20deg) translateX(268px);
  /*kanonika 268*/
  background: url("images/5.svg") center/cover no-repeat;
}

.planet6 {
  width: 52px;
  height: 52px;
  transform: rotate(120deg) translateX(320px);
  /*kanonika310*/
  background: url("images/6.svg") center/cover no-repeat;
}

.planet7 {
  width: 44px;
  height: 44px;
  transform: translateX(418px);
  background: url("images/7.svg") center/cover no-repeat;
}

/* ===== ANIMATIONS ===== */
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.user-id-display {
  position: absolute;
  bottom: 10px;
  left: 15px;
  background: rgba(10, 10, 30, 0.7);
  color: #cdeeff;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  z-index: 8000;
  user-select: none;
}

.planet-name-display { 
  position: fixed;
  top: 10px;
  right: 15px;

 background: rgba(10, 10, 30, 0.7);
  color: #cdeeff;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);


  z-index: 19000;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.planet-name-display.visible {
  opacity: 1;
}

/* === GDPR PANEL === */


/* === Permission Warning (Camera/Mic) === */
.permission-warning {
  position: absolute;
  bottom: 80px;
  left: 20px;
  background: rgba(82, 49, 77, 0.9);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
  z-index: 10000;
  pointer-events: none;
}

.permission-warning.show {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================ Re-center Button === */
.recenter-btn {
  position: fixed;
  bottom: 10px;
  right: 15px;
  background: rgba(10, 10, 30, 0.6);
  color: #cdeeff;
  /* border: 1px solid rgba(100,150,255,0.3);*/
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  font-family: 'Helvetica';
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: all 0.3s ease;
  z-index: 8001;
  user-select: none;
  /*de mporei na klikarei to keimeno*/
  /*pointer-events: none;*/
}

.recenter-btn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================ pause Button === */
.pause-hint {
  position: fixed;
  bottom: 46px;
  right: 15px;
  background: rgba(10, 10, 30, 0.6);
  color: #cdeeff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  font-family: 'Helvetica';
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: all 0.3s ease;
  z-index: 8001;
  user-select: none;
}

.pause-hint.show {
  opacity: 1;
  transform: translateY(0);
}
/* ========================================================= credits === */

#credits-panel {
  position: fixed;
  bottom: 81px;   /* sits above recenter-btn */
  right: 16px;
  top: auto;      /* override user-id-display top positioning */
  left: auto;
  text-align: left;
  line-height: 1.8;
}

/* ========================================================= START BUTTON === */
.start-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 10, 30, 0.7);
  border: 2px solid #00ccff;
  color: #00eaff;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  padding: 16px 40px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
  transition: all 0.3s ease;
  z-index: 9999;
}

.start-btn:hover {
  background: rgba(10, 10, 30, 0.85);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(1.05);
}

.start-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}


/* === STORY OVERLAY === */
.story-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 199001;
}

.story-text {
  position: absolute;
  bottom: 70px;
  /* slightly above nav arrows */
  /*width: calc(100% - 200px);*/
  /* 150px each side */
  left: 70px;
  right: 70px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  /* thin font */
  font-size: clamp(18px, 2vw, 26px);   /* scales down on smaller windows */
  color: #fff;
  text-shadow:
    4px 4px 6px rgba(0, 0, 0, 0.8),
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 2px 0 #000,
    2px 2px 0 #000;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 199001;
}

.story-text.show {
  opacity: 1;
}

#prompt-text {
   /* position: fixed;------relative to viewpoint
  top: 0;
  left: 0;
  width: 100vw;-----100% tou viewport
  padding: 14px 20px;*/
  position: fixed;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 30px);   /* scales down on smaller windows */
  color: #6ddefa;
  /*text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);*/
   text-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.6),
    -1px -1px 0 #005885,
    1px -1px 0 #005885,
    -1px 1px 0 #005885,
    1px 1px 0 #005885;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 10000;
  pointer-events: none;
   user-select: none;
}

#prompt-text.visible {
  opacity: 1;
}

/* ======================================== NAVIGATION ARROWS === */
.story-nav {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;/* space between arrows */
  
  z-index: 199001;
}

.story-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  padding: 0;
  opacity: 0.6;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
  transition: opacity 0.2s ease, transform 0.2s ease;
   z-index: 199001;
}

.story-btn:hover {
  opacity: 0.9;
  transform: scale(1.1);
filter: drop-shadow( 0 0 15px rgba(0, 200, 255, 0.8));
}

.story-btn img {
  width: 100%;
  height: 100%;
}
/* =========================================== lang TOGGLE === */
.lang-toggle {
  position: fixed;
  bottom: 110px; /* above sound-toggle which is at 40px */
  left: 15px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 9000;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
  padding: 0;
  user-select: none;
}
.lang-toggle:hover {
  transform: scale(1.2);
  opacity: 1;
  filter: drop-shadow( 0 0 15px rgba(0, 200, 255, 0.8));
}
.lang-toggle img {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 5px rgba(150, 230, 225, 0.7));
}

.lang-tooltip {
  position: fixed;
  bottom: 110px;
  left: 40px;
  background: rgba(10, 10, 30, 0.85);
  color: #cdeeff;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 204, 255, 0.4);
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9001;
  white-space: nowrap;
}
.lang-tooltip.visible {
  opacity: 1;
}

/* =========================================== music TOGGLE === */
.music-toggle {
  position: fixed;
  bottom: 80px; /* above sound-toggle which is at 40px */
  left: 15px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 9000;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
  padding: 0;
  user-select: none;
}
.music-toggle:hover {
  transform: scale(1.2);
  opacity: 1;
  filter: drop-shadow( 0 0 15px rgba(0, 200, 255, 0.8));
}
.music-toggle img {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 5px rgba(150, 230, 225, 0.7));
}

.music-tooltip {
  position: fixed;
  bottom: 80px;
  left: 40px;
  background: rgba(10, 10, 30, 0.85);
  color: #cdeeff;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 204, 255, 0.4);
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9001;
  white-space: nowrap;
}
.music-tooltip.visible {
  opacity: 1;
}

/* =========================================== SOUND TOGGLE === */
.sound-toggle {
  position: fixed;
  bottom: 50px;
  left: 17px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 9000;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
  padding: 0;
  user-select: none;
}
.sound-toggle:hover {
  transform: scale(1.2);
  opacity: 1;
  filter: drop-shadow( 0 0 15px rgba(0, 200, 255, 0.8));
}
.sound-toggle img {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 5px rgba(150, 230, 225, 0.7));
}

.sound-tooltip {
  position: fixed;
  bottom: 50px;
  left: 40px;
  background: rgba(10, 10, 30, 0.85);
  color: #cdeeff;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 204, 255, 0.4);
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9001;
  white-space: nowrap;
}
.sound-tooltip.visible {
  opacity: 1;
}

/*===================================EPILOGH PLANHTH=====*/
.choose-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 10, 30, 0.9);
  color: white;
  padding: 30px 40px;
  border: 2px solid #00ccff;
  border-radius: 12px;
  text-align: center;
  z-index: 10000;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
}

.choose-window p {
  font-size: 20px;
  font-family: Arial;
  margin-bottom: 10px;
   user-select: none;
}

.choose-window button {
  margin-top: 10px;
  background: #00ccff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  color: #000;
  font-weight: bold;
  color: black;
  cursor: pointer;
   user-select: none;
  transition: background 0.3s;
}

.choose-window button:hover {
  background: #00eaff;
}

.planet.temp-blue::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  border: 3px solid rgba(0, 180, 255, 0.9);
  box-shadow: 0 0 20px 8px rgba(0, 180, 255, 0.6);
}
.planet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background 0.3s ease;
    border-radius: 50%;
}
.planet.temp-blue::after {/*40%*/
  background: hsla(var(--planet-hue), 70%, 50%, 0.3);
}

.planet.chosen-permanent::before {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 1;
  border: 3px solid rgba(0, 200, 255, 1);
  box-shadow: 0 0 30px 10px rgba(0, 200, 255, 0.8);
}

.planet.chosen-permanent::after {/*60%*/
  background: hsla(var(--planet-hue), 70%, 50%, 0.7);
}

.planet.used-planet::after {/*krata to xroma alla diwxnei daxtulidi*/
  background: hsla(var(--planet-hue), 70%, 50%, 0.7);
}

.planet.used-planet::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  border: none;
  box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 1440px) {
  .frame-64-1 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 768px) {
  .frame-64-1 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .story-nav {
    gap: 20px;
  }
}

.minigame-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  /*fonto piso*/
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.minigame-content iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
  display: block;
}

.minigame-content {
  background: #111;
  width: 70%;
  /*tis othonis*/
  height: 70%;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/*pramata*/
.minigame-buttons {
  padding: 10px;
  background: #111;
  display: flex;
  gap: 10px;
  justify-content: center;
  border-top: 2px solid #00ccff;
  flex-shrink: 0;
}

.minigame-buttons button {
  background: #00ccff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  color: black;
  font-weight: bold;
  cursor: pointer;
   user-select: none;
  transition: background 0.3s;
}

.minigame-buttons button:hover {
  background: #00eaff;
}



/* Confirmation window */
.confirm-submit {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 10, 30, 0.95);
  padding: 25px 40px;
  border: 2px solid #00ccff;
  border-radius: 12px;
  color: white;
  text-align: center;
  z-index: 10000;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
}

.confirm-submit button {
  margin: 10px;
  background: #00ccff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  color: black;
  cursor: pointer;
   user-select: none;
  font-weight: bold;
  font-size: 20px;
}

.confirm-submit button:hover {
  background: #00eaff;
}