/* Import the custom font */
@font-face {
  font-family: "League Spartan";
  src: url("../assets/fonts/LeagueSpartan-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

/* Reset & full-viewport sizing */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Dynamically set the root font size so that 1rem scales to fit a 16:10 layout */
html {
font-size: 16px;
font-size: calc(min(100vw / 80, 100vh / 50));
overflow: hidden;
}

/* Center container in viewport */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  font-family: "League Spartan", sans-serif;
  font-weight: 400;
  overflow: hidden;
}

.container {
  width: 80rem;
  height: 50rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}

/* HEADER */
header {
  width: 100%;
  height: 5.5rem;
  display: flex;
  align-items: center;
  padding-left: 2rem;
}
.number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  font-size: 2.4rem;
  color: white;
  background: url("../assets/images/stevilka_bg.svg") center/cover no-repeat;
}
.title {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  color: #00699F;
}
.title h2 {
  font-size: 2rem;
  margin: 0;
  font-weight: bold;
}
.title h3 {
  font-size: 1.2rem;
  margin: 0;
  font-weight: normal;
}
.difficulty {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 1rem;
  font-weight: bold;
  color: #333;
  width: 14rem;
  height: 4rem;
}
.difficulty a {
  margin-right: 0.3rem;
}

/* MAIN CONTENT */
main {
  height: 42rem;
  font-size: 1.2rem;
  /*padding-top: 2rem;*/
}

/* FOOTER */
footer {
  width: 100%;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#check_button {
  display: inline-block;
  width: 8rem;
  height: 4rem;
  background: url("../assets/images/checkBtn.svg") center/contain no-repeat;
  text-decoration: none;
}
#check_button:hover {
  background-image: url("../assets/images/checkBtnHover.svg");
}

/* FEEDBACK OVERLAY */
.feedback {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 10rem;
  background-color: #EBEEF5;
  border-radius: 0.5rem;
  border: 1px solid #0C6AA0;
  display: none;
  z-index: 1000;
}
.feedback a {
  padding: 1rem;
  margin: 0 1rem;
  width: 2rem;
  height: 2rem;
  
  font-size: 0;
}
.feedback a img {
  width: 2rem;
  height: 2rem;
}
.feedback .smajli {
  position: absolute;
  width: 6rem;
  height: 6rem;
  top: -3rem;
  display: none;
  
}
.feedback.wrong .smajli.sad {
  display: inline-block;
}
.feedback.right .smajli.bravo {
  display: inline-block;
}

/* ELEMENTS */
.bullet {
  display: inline-block;
  width:2rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.bullet.blue{
 background-color: #0c6aa0;
}
.bullet.yellow{
 background-color: #f9b000;
}
.bullet.green{
  background-color: #248174;
 }
 .bullet.cyan{
  background-color: #00a2c9;
 }

.drop_element {
border-radius: 1.25rem;
border: 2px solid #F9B002;

}

.drag_element {
border-radius: 1.25rem;
border: 2px solid #00699F;
}

.drag_element.correct {
  border: 2px solid #258174; /* Change border color for correct answers */
/*  background-color: rgba(37, 129, 116, 0.1); /* Optional background color */
}

.drag_element.incorrect {
  border: 2px solid #FF0000; /* Change border color for incorrect answers */
 /* background-color: rgba(255, 0, 0, 0.1); /* Optional background color */
}

.dropdown-container {
  position: relative;
  display: inline-block;
  width: 16rem;
}

/* Options Container */
.options-container {
  display: flex;
  gap: 1rem;
}

/* Option Buttons - Updated to match screenshot exactly */
.option-button {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  border: 0.2rem solid #00699F;
  background-color: white;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

/* Button text */
.option-button::before {
  content: 'R';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: #999;
  z-index: 1;
}

.option-button.falsch::before {
  content: 'F';
}

/* Selected state */
.option-button.selected {
  background-color: #00699F;
}

.option-button.selected::before {
  color: white;
}

/* Correct state */
.option-button.correct {
  border-color: #258174;
  border-width: 0.25rem;
}

/* Incorrect state */
.option-button.incorrect {
  border-color: #FF0000;
  border-width: 0.25rem;
}

/* Selected and correct */
.option-button.selected.correct {
  background-color: #00699F;
}

/* Selected and incorrect */
.option-button.selected.incorrect {
  background-color: #00699F;
}


.audio-player {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
}
.audio-container .audio-player{
  position: relative;
}
.audio-player button {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.audio-player button:hover {
  background: transparent;
  transform: scale(1.1);
}

/* Add image styling */
.audio-player .icon {
  width: 4rem;
  height: 4rem;
  pointer-events: none; /* Make images non-interactive */
}

.audio-player .hidden {
  display: none;
}


.audio_recorder {
  position: absolute;
  display: flex;
  gap: 1rem;
  background: transparent;
  
}

.audio_recorder button, .audio_recorder a {
  border: none;
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  background: transparent;
  transition: all 0.3s ease;
  
}
.audio_recorder button:hover, .audio_recorder a:hover {
  background: transparent;
  transform: scale(1.1);
}

.audio_recorder button img, .audio_recorder a img{
  width: 4rem;
  height: 4rem;
}
/*
.audio_recorder .record-btn { background: #transparent; color: white; }
.audio_recorder .stop-btn { background: #555555; color: white; }
.audio_recorder .play-btn { background: #4CAF50; color: white; }
.audio_recorder .pause-btn { background: #ff9800; color: white; }
.audio_recorder .download-btn { background: #2196F3; color: white; text-decoration: none; }
*/
.hidden { display: none; }
.umlaut-helper {
  position: absolute;
  bottom: 0.1rem;
  
  right: 6rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 0;
  
}

.umlaut-button {
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  transition: transform 0.1s ease;
  border: none;
  background: transparent;
  padding: 0;
}

.umlaut-button:hover {
  transform: scale(1.1);
}

.umlaut-button:active {
  transform: scale(0.95);
}

.umlaut-button img {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
}

/* Visually hide SVGs used for pressed state */
.onpress-img {
  display: none;
}

/* Caps Lock Button Styles */
.caps-lock-button {
  background-color: #f0f0f0;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}
input[type="text"] {
  background-image: url('../assets/images/pen.svg');
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.4rem;
}
input.has-content {
  background-image:none;
}