/*Bodyn perusasetukset*/
body {
    background-color: black;
    height: 100%; /* ELMERI: aiemmin oli 290vh, eli jatkoi myös footerin jälkeen kokonaisen ikkunan jälkeen */
    margin: 0;
    color: white;
    min-height: 100vh; /* vähintään koko näytön korkeus */
    display: flex;
    flex-direction: column;
}
/*Body loppuu*/


/*Pääotsikko alkaa*/
.h1 {
  font-family: "Orbitron", sans-serif;
  font-size: 2rem;
  text-align: center;
  margin-top: 7rem;
  margin-bottom: 40px;
  color: #fff;
  position: relative;
  display: inline-block; /* estetään leviäminen koko riville */
}

.shine-text {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap; /* estää rivinvaihdon */
}

.shine-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 2.5s infinite;
  pointer-events: none;
}

@keyframes shine {
  0% {
    left: -60%;
  }
  100% {
    left: 120%;
  }
}
/*Pääotsikko loppuu*/

/* Koko sisältöalue */
.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
    flex: 1; /* vie kaiken jäljelle jäävän tilan footerin alapuolelle */
}

/* --- KOKO SITAATTIKONEEN ASETTELU --- */
.quote-machine {
  display: flex;              /* Asetellaan pyörä ja robotti vierekkäin */
  justify-content: center;    /* Keskitetään vaakasuunnassa */
  align-items: center;        /* Keskitetään pystysuunnassa */
  gap: 3rem;                  /* Väli pyörän ja robotin välillä */
  margin-top: 3rem;  
  margin-bottom: 1rem;         
  flex-wrap: wrap;            /* Allekkain pienemmillä näytöillä */
}

/* --- PYÖRÄ + NAPPI --- */
.wheel-container {
  text-align: center;         /* Keskittää pyörän ja napin */
}

/* Onnenpyörä itse */
#wheel {
  width: 200px;
  height: 200px;
  border: 10px solid #fff;    /* Valkoinen reuna */
  border-radius: 50%;         /* Pyöreä muoto */
  /* Värilliset sektorit (kuin pizzaviipaleet) */
  background: conic-gradient(
    #ff4d4d 0deg 60deg,
    #4dff4d 60deg 120deg,
    #4d4dff 120deg 180deg,
    #ffff4d 180deg 240deg,
    #ff4dff 240deg 300deg,
    #4dffff 300deg 360deg
  );
  transition: transform 4s cubic-bezier(0.25, 1, 0.5, 1); 
  margin: 0 auto 1rem;        /* Vähän väliä napin yläpuolella */
}

/* Pyöräytysnapin ulkoasu */
#spinButton {
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background: #333;
  color: #fff;
  transition: background 0.3s;
}
#spinButton:hover {
  background: #555;           /* Hover-väri */
}

/* --- ROBOTTI + PUHEKUPLA --- */
.robot {
  position: relative;
  text-align: center;
}

/* Robotin pää kokonaan CSS:llä */
.robot-head {
  width: 150px;
  height: 150px;
  background: #666;              /* Harmaa pää */
  border: 5px solid #333;        /* Tumma reuna */
  border-radius: 20px;           /* Pyöristetyt kulmat */
  position: relative;
  margin: 0 auto;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.4);
}

/* Silmät */
.robot-head::before,
.robot-head::after {
  content: "";
  position: absolute;
  top: 40px;
  width: 25px;
  height: 25px;
  background: #0ff;              /* Sininen valo */
  border-radius: 50%;
  box-shadow: 0 0 10px #0ff;
}
.robot-head::before { left: 30px; }
.robot-head::after { right: 30px; }

/* Suu */
.robot-mouth {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 15px;
  background: #222;              /* Tumma suu */
  border-radius: 5px;
}

/* Suun animaatio */
@keyframes mouthMoveRealistic {
  0%, 100% { height: 15px; transform: translateX(-50%) scaleX(1); }   /* normaali suu */
  25% { height: 25px; transform: translateX(-50%) scaleX(1.1); }      /* vähän venytys */
  50% { height: 35px; transform: translateX(-50%) scaleX(1.2); }      /* suu auki isosti */
  75% { height: 20px; transform: translateX(-50%) scaleX(0.9); }      /* kevyt supistus */
}

.robot-mouth.talking {
  animation: mouthMoveRealistic 0.8s ease-in-out infinite;
}


/* Puhekupla robotin vieressä */
.speech-bubble {
  position: absolute;
  top: -40px;                  /* Yläpuolelle hieman */
  left: 100%;                  /* Robotin oikealle puolelle */
  width: 180px;
  padding: 10px;
  background: white;           /* Valkoinen kupla */
  color: black;                /* Musta teksti */
  border-radius: 10px;
  text-align: left;
  font-size: 0.9rem;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

/* -------------------------- */
/* -------------------------- */
/* PELOTTAVA ROBOTTI (overlay) */
/* -------------------------- */
#scaryRobot {
    display: none; /* oletuksena piilotettu */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.95); /* tummempi overlay */
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    animation: scaryRobotShake 0.6s ease-in-out infinite alternate;
}

/* Robottipään nytkähtely */
@keyframes scaryRobotShake {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-10px) rotate(-2deg); }
    50% { transform: translateX(10px) rotate(2deg); }
    75% { transform: translateX(-10px) rotate(-1deg); }
    100% { transform: translateX(10px) rotate(1deg); }
}

/* Iso pelottava pää */
.scary-head {
    position: relative;
    width: 450px; /* suurempi kuin aiemmin */
    height: 450px;
    background: #111;
    border-radius: 50%;
    border: 5px solid #000;
    box-shadow: 0 0 80px red inset, 0 0 80px red;
    margin-bottom: 2rem;
    animation: headPulse 1.2s ease-in-out infinite;
}

/* Pulssiva pää */
@keyframes headPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Silmät vilkkuvat ja punaiset */
.scary-eye {
    position: absolute;
    top: 140px;
    width: 60px;
    height: 60px;
    background: red;
    border-radius: 50%;
    box-shadow: 0 0 30px red, 0 0 60px red inset;
    animation: eyesBlink 1s infinite alternate;
}
.scary-eye.left { left: 110px; }
.scary-eye.right { right: 110px; }

/* Silmien vilkkuminen */
@keyframes eyesBlink {
    0%, 100% { background: red; box-shadow: 0 0 30px red, 0 0 60px red inset; }
    50% { background: #550000; box-shadow: 0 0 10px #550000, 0 0 20px #550000 inset; }
}

/* Sarvet liikkuvat hieman */
.scary-horn {
    position: absolute;
    top: -60px;
    width: 60px;
    height: 150px;
    background: #111;
    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
    animation: hornsWiggle 1s ease-in-out infinite alternate;
}
.scary-horn.left { left: 50px; transform: rotate(-20deg); }
.scary-horn.right { right: 50px; transform: rotate(20deg); }

@keyframes hornsWiggle {
    0% { transform: rotate(-20deg); }
    50% { transform: rotate(-25deg); }
    100% { transform: rotate(-20deg); }
}
.scary-horn.right { animation-name: hornsWiggleRight; }
@keyframes hornsWiggleRight {
    0% { transform: rotate(20deg); }
    50% { transform: rotate(25deg); }
    100% { transform: rotate(20deg); }
}

/* Suu ja liike säilyy kuten ennen */
#scaryRobot .robot-mouth {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 30px;
    background: #222;
    border-radius: 10px;
}
@keyframes scaryMouthMove {
    0%, 100% { height: 30px; }
    50% { height: 80px; }
}
#scaryRobot .robot-mouth.talking {
    animation: scaryMouthMove 0.6s ease-in-out infinite;
}

/* Puhekupla pelottavalle robotille */
#scaryQuote {
    color: red;
    font-size: 2.2rem;
    font-family: "Orbitron", sans-serif;
    text-shadow: 0 0 20px red, 0 0 50px black;
    animation: quotePulse 1.2s ease-in-out infinite alternate;
    margin-bottom: 1rem;
}
@keyframes quotePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/*Media Queries*/
@media (max-width: 600px) {
  .quote-machine {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    width: 100%;
  }

  .robot {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: static;
  }

  .speech-bubble {
    position: static;
    margin-bottom: 1rem;
    margin-top: 0;
    left: unset;
    top: unset;
    width: 90vw;
    max-width: 320px;
    text-align: center;
  }

  .robot-head {
    margin-bottom: 1rem;
  }

  #wheel {
    margin-bottom:0.5rem;
    width: 170px;
    height: 170px;
    margin-bottom: 1rem;
  }
  #spinButton {
    margin-bottom: 0.5rem;
  }
  
  /* Pelottava robotin fontti pienempiin näyttöihin */
  #scaryQuote {
    font-size: 1.2rem;
  }
}

@media (max-width: 740px) and (orientation: landscape) {


  #wheel {
    width: 130px;
    height: 130px;
  }
  
  /* Pelottava robotin fontti pienempiin näyttöihin */
  #scaryQuote {
    font-size: 1.5rem;
  }
}

@media (max-width: 740px) and (orientation: landscape) {


  #wheel {
    width: 130px;
    height: 130px;
  }
  
  .speech-bubble {
    width: 70vw;
    max-width: 150px;
  }
  
  
}