/* ========================================
   ROOT VARIABLES
   ======================================== */
   :root {
    /* Värit */
    --oppiminen-green: #8efea6;
    --oppiminen-darkgreen: #5eab6f;
    --oppiminen-yellow: #ffb53d;
    --oppiminen-lilac: #b569e2;
    --oppiminen-darklilac: #582f70;
    --oppiminen-red: #fa6a60;
    --primary-font: "Yle Next", Arial, sans-serif;
    
    /* Fonttikoot */
    --font-size-base: 1.2em;
    --font-size-tiny: 0.6em;
    --font-size-small: 0.8em;
    --font-size-medium: 1em;
    --font-size-large: 2em;
    --font-size-xlarge: 3em;
    
    /* Nappien koot */
    --button-font-size: 0.8em;
    --button-padding: 0.6em 1em;
    --button-border-radius: 999px;
    
    /* Ikonit */
    --icon-size: 26px;
    --icon-padding: 1px;
    
    /* Välit */
    --spacing-small: 4px;
    --spacing-medium: 8px;
    --spacing-large: 12px;
    
    /* Muut */
    --progress-height: 12px;
    --shadow-light: 0 0 6px rgb(0 0 0 / 20%);
    --shadow-medium: 0 0 10px rgba(0, 0, 0, 0.2);
    --shadow-heavy: 0 3px 3px rgb(0 0 0 / 50%);
  }
  
  /* ========================================
     BASE STYLES
     ======================================== */
  body {
    display: block;
    margin: 0;
    background: linear-gradient(0deg, rgba(246, 245, 241, 1) 0%, rgba(156, 222, 231, 1) 100%);
    min-height: 100vh;
  }
  
  /* ========================================
     ANIMATIONS
     ======================================== */
  .heart-anim .animate__animated {
    animation-duration: 0.5s;
  }
  
  .hint-anim .animate__animated {
    animation-duration: 1.2s;
  }
  
  .flying-point {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    color: var(--oppiminen-darklilac);
    pointer-events: none;
    animation: flyPoint 800ms ease-in-out forwards;
  }
  
  @keyframes flyPoint {
    0% {
      opacity: 0;
      left: 50%;
      top: 50%;
      font-size: 10px;
    }
    10% {
      opacity: 0;
      left: 50%;
      top: 50%;
      font-size: 10px;
    }
    20% {
      opacity: 1;
      left: 50%;
      top: 50%;
      font-size: 50px;
    }
    35% {
      opacity: 1;
      left: 50%;
      top: 50%;
    }
    90% {
      opacity: 1;
      font-size: 50px;
    }
    100% {
      opacity: 0;
      left: 40px;
      top: 0px;
      font-size: 6px;
    }
  }

 
  
  #points.hue-change {
    /* Tämä on itse värinvaihto, joka aktivoituu kun luokka lisätään */
    filter: hue-rotate(-0.45turn);
  }
  /* ========================================
     PARENT WRAPPER
     ======================================== */
  #parentWrapper {
    font-family: var(--primary-font);
    font-weight: 300;
    position: relative;
    line-height: 1;
    font-size: var(--font-size-base);
    height: calc(100dvh - 72px);
    max-width: 2000px;
    margin: 0 auto;
    overflow: hidden;
    color: #210439;
    display: flex;
    flex-direction: column;
  }
  
  #parentWrapper p {
    margin-block-end: 0.6em;
    margin-block-start: 0.6em;
    line-height: 1.2;
  }
  
  #parentWrapper h3,
  #parentWrapper h2 {
    margin-block-start: 0em;
    margin-block-end: 0.5em;
  }
  
  #parentWrapper h3 {
    text-transform: uppercase;
    font-size: 1.8em;
    line-height: 1;
    font-weight: 800;
  }

  #parentWrapper h2 {
    font-size: var(--font-size-base);
    line-height: 1;
    font-weight: 800;
  }
  
  #parentWrapper #results .level h3 {
    margin-block-end: 1em;
    font-size: larger;
  }
  
  #parentWrapper .brightness40 {
    filter: brightness(0%);
  }
  
  #parentWrapper .mapcontainer {
    position: relative;
    width: 100%;
    height: 80dvh;
    overflow: hidden;
    flex: 1 1 90%;
  }
  
  /* ========================================
     BUTTONS - Yhtenäinen tyyli
     ======================================== */
  #parentWrapper .button {
    font-size: var(--button-font-size);
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    margin: var(--spacing-small);
    text-align: center;
    background: var(--oppiminen-yellow);
    color: black;
    cursor: pointer;
    text-transform: uppercase;
    width: fit-content;
    line-height: 1;
    font-weight: 600;
  }
  
  #parentWrapper #levelButton {
    margin: var(--spacing-medium) auto;
    z-index: 1000;
    /* font-size: var(--font-size-medium); */
    /* padding: 0.6em 2em; */
  }
  
  #parentWrapper #kohdeButtonWrapper #vihjeButton {
    /* margin-top: 0; */
    background: var(--oppiminen-green);
    
  }

  
  #parentWrapper #kohdeButtonWrapper #vihjeButton.hint-revealed {
    cursor: default;
    pointer-events: none;
    background: transparent;
  }

  
  #cta_linkki.button {
    background-color: var(--oppiminen-lilac);
    color: white;
    margin: auto;
  }
  
  /* ========================================
     INFO CONTAINER
     ======================================== */
  #parentWrapper #infoContainer {
    position: relative;
    width: 100%;
    z-index: 10;
    background: rgb(255 255 255 / 90%);
    box-shadow: var(--shadow-light);
    flex: 0 0 auto;
  }
  
  #parentWrapper #infoContainer::after {
    background-image: url("../images/taustavari.png");
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: -1;
  }
  
  #parentWrapper #infoWrapper {
    display: flex;
  }
  
  #parentWrapper #infoContainer #wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-direction: row;
  }
  
  #wrapper > div {
    flex: 1 1 auto;
    min-height: 0;
  }
  
  #progressContainer {
    height: var(--progress-height);
    width: 100%;
    overflow: hidden;
    background: #a1bec1;
  }
  
  #progressContainer .progress {
    height: 100%;
    width: 0%;
    background: var(--oppiminen-yellow);
  }
  
  /* ========================================
     ICONS - Yhtenäinen tyyli
     ======================================== */
  #heartContainer,
  #hintContainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 0;
    place-items: center;
    height: 100%;
    z-index: 100;
  }
  
  #hintContainer {
    color: var(--oppiminen-darkgreen);
  }
  
  #heartContainer img,
  #hintContainer img {
    height: var(--icon-size);
    padding: var(--icon-padding);
    box-sizing: content-box;
  }
  
  #heartContainer img {
    /* padding: var(--spacing-small); */
  }
  
  #hints {
    margin-top: 4px;
  }
  
  #parentWrapper #heartContainer div,
  #parentWrapper #hintContainer div {
    display: flex;
  }
  
  /* ========================================
     MAP & GAME ELEMENTS
     ======================================== */
  #kaupunkimap {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  #nextButton {
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translate(-50%, 0);
    display: none;
    z-index: 500;
  }
  
  #parentWrapper #text {
    position: relative;
    width: 96%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    text-align: left;
    font-size: var(--font-size-large);
    font-weight: 600;
    line-height: 1;
    align-items: center;
    min-height: 60px;
    background: #c5e8ec;
    padding: 1% 2%;
  }
  
  #imageContainer {
    display: flex;
    justify-content: center;
    min-width: 80px;
  }
  
  #kuva {
    width: 100%;
    max-width: 160px;
    height: auto;
    display: contents;
    cursor: pointer;
  }
  
  #kuva img {
    width: 100%;
    height: auto;
    max-height: 58px;
    margin: 2px;
    object-fit: contain;
  }
  
  #parentWrapper #points {
    font-size: var(--font-size-large);
    display: flex;
    flex-direction: column;
    justify-content: center;
    letter-spacing: -2px;
    padding: var(--spacing-medium);
    background: linear-gradient(90deg, rgba(221, 177, 250, 1) 0%, rgba(250, 245, 236, 1) 100%);
    font-weight: 900;
    min-width: 2em;
    text-align: center;
    transition: filter 0.3s ease-in-out;
  }
  
  #parentWrapper #controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-end;
    align-items: center;
  }
  
  /* ========================================
   KOHDE (TARGET) CONTAINER
   ======================================== */
#parentWrapper #kohdeWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#parentWrapper #kohdeContainer {
  position: relative;
  z-index: 100;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background: rgba(240, 248, 255, 1);
  border-radius: 8px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
}

#parentWrapper #kohdeButtonWrapper {
  display: grid;
  justify-content: center;
  align-items: center;
  justify-items: center;
  font-size: var(--font-size-medium);
  position: relative;
  min-height: 3em;
}

#parentWrapper #kohdeButtonWrapper div {
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  font-weight: 600;
  width: auto;
}

#parentWrapper #kohdeButtonWrapper #vihjeButton {
  /* margin-top: 0; */
  background: var(--oppiminen-green);
}

#parentWrapper #kohdeButtonWrapper #vihjeButton.hidden {
  opacity: 0; /* UUSI: Piilota nappi */
  transform: scale(0.8);
  pointer-events: none;
}

#parentWrapper #kohdeName {
  /* Piilotettu oletuksena */
  display: none;
  padding: 0.3em 0.5em;
  margin: 0;
}

#parentWrapper #kohdeName.active {
  display: block;
}

#parentWrapper #kohdeImage {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: var(--spacing-medium);
}

#parentWrapper #kohdeWrapper img {
  display: block;
  max-width: 280px;
  max-height: 45vh;
  height: auto;
  width: auto;
  border-radius: 6px;
  margin: auto;
  box-shadow: var(--shadow-medium);
}
  
  /* ========================================
     RESULTS
     ======================================== */
  #results {
    position: absolute;
    background-image: url(../images/taustavari_blur.png);
    width: 100%;
    height: 100%;
    z-index: 200;
    top: 0;
    left: 0;
    right: 0; 
    line-height: 1;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    
  }
  
  #resultsContent {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: fit-content;
    width: 100%;
    max-width: 100%; /* LISÄÄ TÄMÄ */
    margin: 0 auto; /* LISÄÄ TÄMÄ */
  }
  
  #results img {
    height: auto;
    margin: var(--spacing-large);
    width: 40%;
    max-width: 400px;
  }
  
  #results .level {
    margin: 14px 5%;
    text-align: center;
  }
  
  #results .level.eka {
    max-width: 600px;
  }
  #results .level.eka p img {
  height: 1em;
    width: auto;
    padding: 0;
    margin: 0;
  }
  
  #results .level.loppu {
    margin-bottom: 0;
  }
  
  #parentWrapper #results > div {
    margin-top: 1em;
  }
  
  #parentWrapper #results.relative {
    position: absolute;
    overflow: auto;
    /* padding-bottom: 0.2em; */
  }
  
  #parentWrapper #kreditit,  #parentWrapper #lahteet {
    font-size: var(--font-size-small);
    line-height: 1.1;
    text-align: center;
    padding: 0 10%;
  }
  
  /* ========================================
     UTILITY CLASSES
     ======================================== */
  #parentWrapper .opacity0 {
    opacity: 0 !important;
  }
  
  #parentWrapper .hide {
    display: none !important;
  }
  
  #parentWrapper .highlight {
    color: var(--oppiminen-red);
    font-weight: 600;
  }
  
  /* ========================================
     FUNFACT
     ======================================== */
  #parentWrapper .funfact {
    max-width: 580px;
    font-size: var(--font-size-small);
    text-align: left;
    border-radius: 8px;
    background: #fefdfb;
    position: relative;
    overflow: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    margin: 0 auto 2em;
    text-align: center;
    box-shadow: var(--shadow-heavy);
    font-weight: 400;
  }
  
  #parentWrapper .funfact p {
    line-height: 1.1;
    margin: 2em 1em;
  }
  
  #parentWrapper .funfact .highlight {
    color: black;
    font-weight: bold;
    background-color: var(--oppiminen-green);
    width: 100%;
    padding: 1em 0;
    background: linear-gradient(0deg, rgba(142, 254, 166, 1) 0%, rgba(237, 254, 241, 1) 100%);
    position: relative;
  }
  
  #parentWrapper .funfact .highlight::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--oppiminen-green);
  }
  
  /* ========================================
     SHARE BUTTONS
     ======================================== */
  #parentWrapper #results #shareButtons {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: var(--spacing-small);
  }
  
  #shareButtons a {
    text-decoration: none;
  }
  
  #shareButtons div {
    border: none;
    border-radius: var(--button-border-radius);
    background-color: #315b7d;
    outline: none;
    font-size: 24px;
    height: 48px;
    width: 48px;
    text-decoration: none;
    margin: 2px var(--spacing-small);
    color: #fff;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: -webkit-center;
  }
  
  #results #shareButtons img {
    height: auto;
    width: 20px;
    margin: auto;
    filter: brightness(0) invert(1);
  }
  
  #shareButtons #fbShare {
    background: #1877f2;
  }
  
  #shareButtons #waShare {
    background: #25d366;
  }
  
  #shareButtons #twShare {
    background: #000;
  }
  
  #shareText {
    text-align: center;
    margin: 0 10% 0;
    font-size: var(--font-size-small);
  }
  
  #results #cta_linkki a {
    text-decoration: none;
    color: white;
  }
  
  #cta_wrapper {
    padding: 0px 1vh;
  }
  
  /* ========================================
     MAPBOX CONTROLS
     ======================================== */
  .mapboxgl-ctrl-logo {
    pointer-events: none;
  }
  
  .mapboxgl-ctrl-attrib-button {
    display: none;
  }
  
  /* ========================================
     MEDIA QUERIES
     ======================================== */
  @media only screen and (max-width: 600px) {
    :root {
      /* Ylikirjoita muuttujat mobiilille */
      /* --font-size-base: 1em;
      --button-font-size: 0.5em;
      --icon-size: 26px;
      --progress-height: 10px; */
    }
  
    #parentWrapper {
      height: calc(100dvh - 56px);
     
    }
  
    #parentWrapper #results > div {
      margin: var(--spacing-medium);
    }
  
    #parentWrapper #kohdeWrapper {
      /* font-size: var(--font-size-medium); */
    }
  
    #parentWrapper #kohdeWrapper img {
      max-width: 100%;
    }
  
    /* #parentWrapper #text {
      font-size: 1.6em;
    } */
  
    #parentWrapper #kreditit {
      font-size: var(--font-size-small);
    }
  
    /* #results .level h2 {
      font-size: 1.2em;
    }
  
    #parentWrapper h3 {
      font-size: 1.5em;
    } */
  
    #parentWrapper #results .level h3 {
      /* font-size: var(--font-size-medium); */
    }
  
    /* #parentWrapper .funfact {
      font-size: 0.5em;
    } */
  
    #results .level {
      /* font-size: 1em; */
      margin: var(--spacing-small) 3%;
      line-height: 1.1;
    }
  
    #results .level.eka {
      margin-bottom: 0;
      margin-top: 0;
      font-size: 0.9em;
      
    }
  
    #results img {
      width: 50%;
      height: auto;
    }
  
    #results .level.loppu {
      /* font-size: 0.55em; */
    }
  
    #shareButtons div {
      font-size: 20px;
      height: 40px;
      width: 40px;
    }
  }
  
  @media only screen and (max-width: 400px) {
    #results .level.loppu img {
      margin-bottom: var(--spacing-small);
      width: 50%;
      height: auto;
    }
  
    /* .mapboxgl-ctrl-group {
      display: none;
    } */
  
    #parentWrapper #points {
      font-size: var(--font-size-large);
      padding: var(--spacing-small);
    }
  }