/* ==========================
   Algemene Body Styling
   ========================== */
   body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;  /* Voorkom scrollen */
    position: relative;
    background: #000; /* fallback kleur */
    touch-action: none; /* voorkomt swipen/zoomen */
    -webkit-user-select: none; /* voorkomt tekstselectie op iOS */
    user-select: none; /* voorkomt tekstselectie overal */
    -ms-user-select: none;
    -webkit-touch-callout: none;
    padding-top: env(safe-area-inset-top); /* ondersteunt notch devices */
  }
  
  * {
  -webkit-tap-highlight-color: transparent; /* Geen highlight op mobile tap */
  touch-action: manipulation;
}

  /* ==========================
     Achtergrond met Blur
     ========================== */
  body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background 0.3s ease-in-out;
    background: url('images/wierie-geel.jpg') no-repeat center center/cover;
    filter: blur(6px) brightness(0.8);
    z-index: -1;
  }
  

  /* ==========================
     Algemene Schermstijl
     ========================== */
  .screen {
    display: none;
    background: rgba(0, 0, 0, 0.17);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 40px 30px;
    max-width: 600px;
    max-height: 90vh;   /* Voorkom dat het scherm uit beeld gaat */
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeIn 0.5s ease forwards; /* Fade-in animatie */
    overflow: none;  /* Standaard geen scroll */
  }
  
  /* ==========================
     Fade-in Animatie
     ========================== */
  @keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
  
  .active {
    display: block;
  }
  
  /* ==========================
     Koppeling Styling voor Koppen
     ========================== */
     h2, h3 {
      color: #ffffff;
      font-size: 2rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 12px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
      font-family: 'Segoe UI', sans-serif;
    }
    

    @keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.heartbeat {
  animation: heartbeat 0.8s infinite;  /* De animatie duurt 0.8 seconden en herhaalt zich oneindig */
}
  
  /* ==========================
     Paragrafen Styling
     ========================== */
  p {
    color: #f0f0f0;
    font-size: 18px;
    margin: 10px 0 20px 0;
  }
  
  /* ==========================
     Knoppen Styling
     ========================== */
     button {
      padding: 14px 28px;
      margin: 10px 0;
      font-size: 20px;
      font-weight: bold;
      font-family: 'Press Start 2P', cursive;
      color: #fff;
      background: rgb(56, 93, 255);
      box-shadow: inset -4px -4px 0px 0px rgb(39, 66, 182);
      display: inline-block;
      position: relative;
      text-align: center;
      text-decoration: none;
      border: none;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.2s ease;
    }
    
    /* Retro rand */
    button::before,
    button::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      box-sizing: content-box;
      z-index: 1;
      pointer-events: none;
    }
    
    button::before {
      top: -6px;
      left: 0;
      border-top: 6px solid black;
      border-bottom: 6px solid black;
    }
    
    button::after {
      top: 0;
      left: -6px;
      border-left: 6px solid black;
      border-right: 6px solid black;
    }
    
    /* --- Unieke stijlen per knop --- */
    
    /* Start Game: Paars */
    .btn-start {
      background: #c123de;
      box-shadow: inset -4px -4px 0px 0px #8b0fa5;
    }
    .btn-start:hover,
    .btn-start:focus {
      background: #a20dbd;
      box-shadow: inset -6px -6px 0px 0px #8b0fa5;
    }
    .btn-start:active {
      box-shadow: inset 4px 4px 0px 0px #8b0fa5;
    }
    
    /* Uitleg: Geel */
    .btn-rules {
      background: #F7D51D;
      box-shadow: inset -4px -4px 0px 0px #E59400;
    }
    .btn-rules:hover,
    .btn-rules:focus {
      background: #F2C409;
      box-shadow: inset -6px -6px 0px 0px #E59400;
    }
    .btn-rules:active {
      box-shadow: inset 4px 4px 0px 0px #E59400;
    }
    
    /* Instellingen: Groen */
    .btn-settings {
      background: #92CD41;
      box-shadow: inset -4px -4px 0px 0px #4AA52E;
    }
    .btn-settings:hover,
    .btn-settings:focus {
      background: #76c442;
      box-shadow: inset -6px -6px 0px 0px #4AA52E;
    }
    .btn-settings:active {
      box-shadow: inset 4px 4px 0px 0px #4AA52E;
    }
    
    /* Admin Panel: Rood */
    .btn-admin {
      background: #E76E55;
      box-shadow: inset -4px -4px 0px 0px #8C2022;
    }
    .btn-admin:hover,
    .btn-admin:focus {
      background: #CE372B;
      box-shadow: inset -6px -6px 0px 0px #8C2022;
    }
    .btn-admin:active {
      box-shadow: inset 4px 4px 0px 0px #8C2022;
    }

  /* ==========================
     Scherm-specifieke Knoppen
     ========================== */
  #home-screen button {
    width: 90%;
  }
  
  
  /* ==========================
     Slider & Select Styling
     ========================== */
  input[type=range], select {
    width: 80%;  
    margin-top: 10px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #ccc;
  }
  
  /* ==========================
     Timer & Letter Styling
     ========================== */
  #letter-timer, #answer-timer {
    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    margin: 10px 0;
  }
  
  #random-letter {
    font-size: 80px;
    color: #ff0000;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    margin: 20px 0;
  }
  
  /* Verborgen Elementen */
  .hidden {
    display: none;
  }
  
  /* ==========================
     Gevangenis Fase Styling
     ========================== */
  #jail-phase h2 {
    font-size: 40px;
    text-align: center;     /* Centreer de tekst horizontaal */
    color: #ff4444;
  }
  
  #jail-phase p {
    font-size: 20px;
  }
  
  /* ==========================
     Logo Styling
     ========================== */
  #logo {
    width: 350px;
    max-width: 90%;
    margin-bottom: -10px;
  }
  
/* ==========================
   Difficulty Select Styling
   ========================== */
   #difficulty-select {
    width: 300px; /* Kleinere breedte */
    padding: 0.4rem 0.8rem;
    margin: 1rem auto; /* Centreert horizontaal */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    backdrop-filter: blur(6px);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
  }
  
  /* Hover- en Focus-effecten voor Select-element */
  #difficulty-select:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.65);
  }
  
  #difficulty-select:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    outline: none;
    background-color: rgba(0, 0, 0, 0.7);
  }
  

  
/* ==========================
   Slider Styling - Dark Transparent
   ========================== */
   #time-slider {
    -webkit-appearance: none;
    width: 100%;
    max-width: 300px;
    height: 10px;
    margin: 1rem auto;
    display: block;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    outline: none;
    transition: background 0.3s ease;
  }
  
  #time-slider:hover {
    background: rgba(255, 255, 255, 0.15);
  }
  
  #time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  
  #time-slider::-webkit-slider-thumb:hover {
    background-color: #ffffff;
    transform: scale(1.1);
  }
  
  #time-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  
  #time-slider::-moz-range-thumb:hover {
    background-color: #ffffff;
    transform: scale(1.1);
  }
  
  #slider-value {
    font-size: 1rem;
    font-weight: bold;
    color: rgb(255, 0, 0);
    margin-left: 10px;

  }
  
  #time-label {
    color: white;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: block;
    text-align: center;
  }
  
  /* ==========================
     Taalselectie
     ========================== */
  #language-select {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }
  
  .language-flag {
    width: 30px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: transform 0.2s;
    cursor: pointer;
  }
  
  .language-flag:hover {
    transform: scale(1.2);
  }
  
  /* ==========================
     Timer Progress Styling
     ========================== */
  #timer-progress {
    width: 100%;
    height: 20px;
    margin-top: 10px;
    border-radius: 10px;
  }
  
  #timer-progress::-webkit-progress-bar {
    background-color: #f3f3f3;
    border-radius: 10px;
  }
  
  #timer-progress::-webkit-progress-value {
    background-color: #4caf50;
    border-radius: 10px;
  }
  
  #timer-progress::-moz-progress-bar {
    background-color: #4caf50;
    border-radius: 10px;
  }

  /* ==========================
     Meldingen
     ========================== */
     .toast {
      position: fixed;
      top: -100px; /* Start buiten beeld */
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.75); /* Zwart met transparantie */
      color: #d4fcd3; /* Zacht groenig wit voor betere leesbaarheid */
      padding: 16px 28px;
      border-radius: 12px;
      font-size: 16px;
      z-index: 9999;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(0, 255, 100, 0.4); /* Lichtgroene rand */
      backdrop-filter: blur(6px); /* Voor glasachtig effect */
      transition: top 0.5s ease, opacity 0.3s ease;
      pointer-events: none;
      opacity: 0;
    }
    
    .toast.show {
      top: 20px; /* Positie als zichtbaar */
      opacity: 1;
    }
    
  .retro-container {
    width: 100%;
    height: 24px;
    background-color: #000;
    border: 4px solid #fff;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 20px;
    image-rendering: pixelated;
  }
  
  .retro-bar {
    height: 100%;
    width: 100%;
    background-image: repeating-linear-gradient(
      -45deg,
      #00ff00,
      #00ff00 8px,
      #007700 8px,
      #007700 16px
    );
    transition: width 1s steps(10);
    box-shadow: inset -2px -2px 0 #003300, inset 2px 2px 0 #00ff00;
    image-rendering: pixelated;
  }
  
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}


/* ==========================
     Wheel
     ========================== */

    #wrapper {
      margin: 40px auto 0;
      width: 266px;
      position: relative;
    }

    #txt {
      margin-top: 20px;
      color: #ffffff;
      font-size: 24px;
      text-align: center;
      min-height: 40px;
      user-select: none;
    }

    #wheel {
      width: 250px;
      height: 250px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      border: 8px solid #fff;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px,
                  rgba(0, 0, 0, 0.05) 0px 3px 0px;
      transform: rotate(0deg);
    }
    
    #inner-wheel {
      width: 100%;
      height: 100%;
      transition: all 6s cubic-bezier(0, .99, .44, .99);
    }

    #wheel .sec {
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 130px 75px 0;
      border-color: #19c transparent;
      transform-origin: 75px 129px;
      left: 50px;
      top: -4px;
      opacity: 1;
    }

#wheel .sec:nth-child(1) {
  transform: rotate(60deg);
  border-color: #b22222 transparent;

}
#wheel .sec:nth-child(2) {
  transform: rotate(120deg);
  border-color: #daa520 transparent;
}
#wheel .sec:nth-child(3) {
  transform: rotate(180deg);
  border-color: #b22222 transparent;

}
#wheel .sec:nth-child(4) {
  transform: rotate(240deg);
  border-color: #daa520 transparent;

}
#wheel .sec:nth-child(5) {
  transform: rotate(300deg);
  border-color: #b22222 transparent;

}
#wheel .sec:nth-child(6) {
  transform: rotate(360deg);
  border-color: #daa520 transparent;

}




    .emoji {
      margin-top: -100px;
      color: rgb(0, 0, 0);
      position: relative;
      z-index: 1000000;
      display: block;
      text-align: center;
      font-size: 36px;
      margin-left: -25px;
      text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px,
                   rgba(0, 0, 0, 0.404) 0px 1px 0px;
    }

    #spin {
      width: 68px;
      height: 68px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -34px 0 0 -34px;
      border-radius: 50%;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 0px;
      z-index: 1000;
      background: #fff;
      cursor: pointer;
      font-family: "Exo 2", sans-serif;
      user-select: none;
    }

    #spin:after {
      content: 'SPIN';
      text-align: center;
      line-height: 68px;
      color: #ccc;
      text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0, 0, 0, 0.3);
      position: relative;
      z-index: 100000;
      width: 68px;
      height: 68px;
      display: block;
    }

    #spin:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 20px 28px 20px;
      border-color: transparent transparent #fff transparent;
      top: -12px;
      left: 14px;
    }

    #inner-spin {
      width: 54px;
      height: 54px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -27px 0 0 -27px;
      border-radius: 50%;
      z-index: 999;
      box-shadow: rgba(255, 255, 255, 1) 0px -2px 0px inset,
                  rgba(255, 255, 255, 1) 0px 2px 0px inset,
                  rgba(0, 0, 0, 0.4) 0px 0px 5px;
      background: radial-gradient(ellipse at center, #ffffff 0%, #eaeaea 100%);
    }

    #spin:active #inner-spin {
      box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px inset;
    }

    #spin:active:after {
      font-size: 15px;
    }

    #shine {
      width: 250px;
      height: 250px;
      position: absolute;
      top: 0;
      left: 0;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
      opacity: 0.1;
    }

    @keyframes hh {
      0%, 100% {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(7deg);
      }
    }

    .spin {
      animation: hh 0.1s;
    }

/* SWITCH BUTTON STIJL */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4CAF50;
}

input:checked + .slider:before {
  transform: translateX(22px);
}


#suggestion-screen {
  max-width: 480px;
  margin: 40px auto;
  padding: 30px 40px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(100, 100, 200, 0.2);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #2c3e50;
}

#suggestion-screen h2 {
  text-align: center;
  margin-bottom: 25px;
  font-weight: 700;
  font-size: 1.8rem;

}

#suggestion-screen label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 1rem;

}

#suggestion-screen select,
#suggestion-screen textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #a3bffa;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f4f7ff;
  resize: none;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

/* Vastzetten van tekstvakken zodat ze niet aangepast kunnen worden */
#suggestion-input-nl,
#suggestion-input-en {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #495057;
  cursor: text;
}


/* Select blijft wel interactief */
#suggestion-difficulty {
  cursor: pointer;
}

#suggestion-screen select:focus,
#suggestion-screen textarea:focus {
  outline: none;
  background-color: #ffffff;
}

/* Knoppen */
#suggestion-screen button {
  cursor: pointer;
  background: #4a69bd;
  border: none;
  padding: 12px 22px;
  margin-right: 12px;
  margin-top: 15px;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(74, 105, 189, 0.4);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}



  /* ==========================
     Media Queries (Responsief)
     ========================== */
  @media (max-width: 600px) {

    body {
      overflow: hidden;
      padding: 10px;
    }

    h2, h3 {
      font-size: 24px
    }
  
    #logo {
      width: 350px;
      max-width: 90%;
      margin-bottom: -10px;
      display: block;  /* Zorgt ervoor dat het logo als block-element wordt behandeld */
      margin-left: auto;  /* Zet de linker marge automatisch */
      margin-right: auto; /* Zet de rechter marge automatisch */
    }
  
    .screen {
      width: 80%;
      max-width: 500px;
      padding: 20px;
      border-radius: 20px;
    }
  
    #rules-screen {
      width: 90%;
      max-width: 340px;
      padding: 20px 16px;
      font-size: 16px;
      margin: 30px auto 60px auto;
      max-height: calc(100vh - 180px);
      overflow-y: auto;
    }
  
    #random-letter {
      font-size: 60px;
    }
  
    #letter-timer, #answer-timer {
      font-size: 24px;
    }
  
    button {
      font-size: 18px;
      padding: 12px 24px;
    }

    #time-slider {
      display: block;
      margin: 0 auto;
      width: 90%; /* of 100% met max-width zoals je al had */
    }

    #slider-value {
      display: block;
      text-align: center;
      margin: 10px auto;
    }

  .toast {
    max-width: 90vw;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  }