* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
}
:root {
  /* Neutral Colors */
  --neutral-green: hsl(140, 63%, 57%);
  --neutral-red: hsl(354, 63%, 57%);
  --neutral-900: hsl(0, 0%, 7%);
  --neutral-800: hsl(0, 0%, 15%);
  --neutral-700: hsl(240, 2%, 25%);
  --neutral-500: hsl(240, 3%, 46%);
  --neutral-400: hsl(240, 1%, 59%);
  --neutral-300: hsl(240, 2%, 70%);
  --neutral-200: hsl(240, 2%, 80%);
  --neutral-100: hsl(0, 0%, 100%);
  --neutral-0: hsl(0, 0%, 100%);

  /* Blue Colors */
  --blue-600: hwb(214 10% 0%);
  --blue-400: hsl(210, 100%, 65%);

  /* Red Color */
  --red-500: hsl(354, 63%, 57%);

  /* Green Color */
  --green-500: hsl(140, 63%, 57%);

  /* Yellow Color */
  --yellow-400: hsl(49, 85%, 70%);

  /* Typography */
  --font-family: "Sora", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-body: 16px;
}

body {
  background-color: var(--neutral-900);
  color: var(--neutral-0);
  font-size: var(--font-size-body);
  line-height: 1.6;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  /* padding: 20px; */
  margin-top: 20px;
  /* border: 2px solid red; */
}

.logo {
  height: 40px;
  width: auto;
}
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trophy-icon {
  height: 24px;
  width: auto;
}
.theme-toggle h1 {
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-500);
}

main {
  padding: 20px 0;
  position: relative;
}

section#intro-area {
  /* border: 2px solid red; */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.time-measurements {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.time-measurements p.time-button {
  font-weight: var(--font-weight-bold);
  /* font-size: clamp(2.5rem, 10vw, 11.2rem); */
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-400);
}

.time-measurements p.time-button span {
  font-size: clamp(0.5rem, 2vw, 5.2rem);
  margin-left: 9px;
  /* font-weight: var(--font-weight-bold); */
  color: var(--neutral-0);
}

hr {
  border: 1px solid var(--neutral-500);
  font-weight: var(--font-weight-regular);
}

p.border {
  border-left: 1px solid var(--neutral-500);
  height: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
  /* padding: 12px; */
}

.difficulty-settings p.border {
  padding-top: 10px;
  height: 30px;
  margin-left: 20px;
}

.settings-wrapper {
  /* border: 2px solid blue; */
  display: flex;
  gap: 20px;
}

.difficulty-settings {
  display: flex;
  gap: 5px;
}
.difficulty-settings p {
  margin-right: 5px;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-400);
}

/* . {
  border: 1px solid var(--blue-600);
  color: 1px solid var(--blue-600);
} */

.difficulty-settings button {
  background-color: var(--neutral-800);
  color: var(--neutral-0);
  border: 1px solid var(--neutral-500);
  text-align: center;
  padding: 0 10px;
  width: auto;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
}

/* .difficulty-settings button:default(.easy-button) {


} */

/* .difficulty-settings button:hover {
  border: 1px solid var(--blue-600);
  color: var(--blue-600);
} */
.difficulty-settings button.active {
  border: 1px solid var(--blue-600);
  color: var(--blue-600);
}

.mode-settings button.active {
  border: 1px solid var(--blue-600);
  color: var(--blue-600);
}

.mode-settings {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.mode-settings p {
  margin-right: 5px;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-400);
}

.mode-settings button {
  background-color: var(--neutral-800);
  color: var(--neutral-0);
  border: 1px solid var(--neutral-500);
  text-align: center;
  padding: 0 10px;
  width: auto;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
}

.mode-settings button:hover {
  border: 1px solid var(--blue-600);
  color: var(--blue-600);
}
.mode-settings button:active {
  border: 1px solid var(--blue-600);
}

.horizontal-line {
  border: 0.2px solid var(--neutral-500);
  width: 100%;
  opacity: 0.2;
  height: 1px;
  margin-bottom: 20px;
}

section.text-area {
  display: grid;
}
textarea {
  width: 100%;
  height: auto;
  min-height: 100px;
  border: none;
  border-radius: 5px;
  padding: 10px;
  line-height: 1.6;
  font-family: monospace;
  background-color: var(--neutral-900);
  color: var(--neutral-0);
  font-size: var(--font-size-body);
  resize: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
textarea:focus {
  outline: none;
}

section#passage-area {
  /* position: absolute; */
  display: grid;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 210%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 860px);
  /* width: 100%;
  height: 100%; */
  /* overflow: hidden; */
}

.passage-preview-wrapper {
  width: 100%;
}

.passage-preview {
  /* margin: 10px auto; */
  min-height: 250px;
  height: auto;
  width: 1200px;
  padding: 20px;
  border: 1px solid var(--neutral-700);
  border-radius: 10px;
  background-color: var(--neutral-800);
  color: var(--neutral-0);
  font-family: monospace;
  font-size: 1.1rem;
  line-height: 1.7;
  /* pointer-events: none; */
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

.passage-preview.is-blurred {
  filter: blur(3px);
  opacity: 0.75;
}

.start-button {
  position: absolute;
  top: 20%;
  left: 40%;
  z-index: 2;
  margin: 0 auto;
  padding: 6px 15px;
  border: none;
  background-color: var(--blue-600);
  color: var(--neutral-0);
  font-size: 1.29rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  line-height: 1.6;
  border-radius: 6px;
}

p.click-text {
  position: absolute;
  top: 40%;
  left: 33.4%;
  text-align: center;
  justify-content: center;
  display: flex;
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: bold;
  /* max-width: ; */
}

.start-button:hover {
  background-color: var(--blue-400);
}

/* section.result-area {
  border: 2px solid red;
  display: grid;
  gap: 10px;
  margin: 50px auto;
  place-items: center;
  padding: 20px;
} */

button.try-again-button {
  background-color: var(--neutral-800);
  /* margin: 20px auto 0 auto; */
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-100);
  border: none;
  padding: 10px 20px;
  gap: 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

button.try-again-button:hover {
  background-color: var(--neutral-700);
}

.test-complete {
  text-align: center;
  padding: 10px;
}

.test-complete img {
  /* border: 2px solid var(--green-500); */
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 16px 5px var(--neutral-900),
    0 0 0 7px var(--green-500),
    0 0 10px 12px var(--neutral-900),
    0 0 10px 19px var(--green-500),
    0 0 10px var(--green-500);
}

.test-complete h2 {
  color: var(--neutral-0);
  font-size: 2rem;
  margin-top: 20px;
}

.test-complete p {
  color: var(--neutral-400);
}

.test-result {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  /* margin: 0 auto; */
}
:is(.result-WPM, .result-Accuracy, .result-Errors) {
  padding: 10px;
  height: 70px;
  width: 120px;
  border: 0.1px solid var(--neutral-700);
  border-radius: 8px;
  /* text-align: center; */
}
:where(.result-WPM h1, .result-Accuracy h1, .result-Errors h1) {
  color: var(--neutral-400);
  font-size: var(--font-size-body);
}

.chars-correct {
  color: var(--neutral-green);
  font-weight: bold;
}

.chars-incorrect {
  color: var(--neutral-red);
  font-weight: bold;
}

button.reset-button {
  background-color: var(--neutral-0);
  /* margin: 20px auto 0 auto; */
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-900);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

button.reset-button:hover {
  background-color: var(--neutral-400);
}

button.reset-button:active {
  background-color: var(--neutral-500);
}

button.reset-button:focus {
  outline: 2px solid var(--blue-600);
}

button.reset-button img {
  height: 16px;
  width: auto;
  margin-left: 8px;
  vertical-align: middle;
}

button.reset-button img:hover {
  filter: brightness(0.8);
}
.test-state {
  display: none;
}

.test-state.active {
  display: block;
}

.test-state.active [data-state="test-setup"] {
  display: block;
}
.typing-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 350px;
}

.passage-display {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Passage behind */
  background-color: transparent;
  color: transparent;
  border: none;
  padding: 10px;
  font-family: monospace;
  font-size: 33px;
  width: 100%;
  height: 350px;
  resize: none;
  /* pointer-events: none; Allow clicks to pass through to input below */
  line-height: 1.6;
  box-sizing: border-box;
  display: none; /* Initially hidden, shown when test starts */
}

.visual-feedback {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1.5;
  width: 100%;
  height: 350px;
  padding: 10px;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 33px;
  line-height: 1.6;
  word-wrap: break-word; /* Ensure text wraps the same way as the passage display */
  white-space: pre-wrap; /* Match user input wrapping */
  overflow-y: auto; /* Show vertical scrollbar if content overflows */
  overflow-x: hidden;
  pointer-events: auto;
  color: var(--neutral-100);
  background-color: transparent;
}

.visual-feedback span.correct {
  color: rgb(0, 255, 0); /* Green for correct */
}

.visual-feedback span.incorrect {
  color: rgb(255, 0, 0); /* Red for incorrect */
  text-decoration: underline; /* Optional: Add a wavy underline for incorrect characters */
  text-decoration-color: rgb(255, 0, 0); /* Set underline color to red */
}

.visual-feedback span.untyped {
  color: var(--neutral-100); /* Gray for untyped characters */
  opacity: 0.5; /* Optional: Make untyped characters semi-transparent */
}

.visual-feedback span.extra {
  color: rgb(255, 0, 0); /* Red for extra characters */
  text-decoration: underline; /* Optional: Add a wavy underline for extra characters */
  text-decoration-color: rgb(255, 0, 0); /* Set underline color to red */
  /* font-weight: bold; Optional: Make extra characters bold */
}
.visual-feedback span.current {
  background-color: var(--neutral-400); /* Light blue background for cursor */
  border-left: 2px solid var(--neutral-100); /* Darker blue border to indicate cursor position */
  animation: blink 1s step-start infinite; /* Blinking animation */
  animation-timing-function: steps(
    1
  ); /* Ensure the blink happens in discrete steps */
  opacity: 2.5; /* Slightly transparent for better visibility */
}

@keyframes blink {
  50% {
    background-color: transparent;
    border-left-color: transparent;
  }
}

.visual-feedback span.cursor-end {
  display: inline-block;
  min-width: 2px;
  height: 1.2em;
  vertical-align: bottom;
}

/* .visual-feedback {
  white-space: pre-wrap;
}

.visual-feedback span {
  white-space: pre-wrap;
} */

#passage-display {
  white-space: pre-wrap; /* Match user input wrapping */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* pointer-events: none; */
  resize: none;
  box-sizing: border-box;
  /* user-select: none; Prevent text selection */
}
#user-input {
  box-sizing: border-box;
  white-space: pre-wrap; /* Allow natural wrapping */
  word-wrap: break-word;
  overflow-wrap: break-word;
  resize: none; /* prevent resize */
  /* pointer-events: none; */
  /* user-select: none; Prevent text selection */
}
#visual-feedback {
  box-sizing: border-box;
  white-space: pre-wrap; /* Match user input wrapping */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* pointer-events: none; */
  resize: none;
  display: block;
  /* user-select: none;s Prevent text selection */
}
.user-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 350px;
  background-color: transparent;
  color: transparent; /* Hide the text being typed */
  /* caret-color: blue; Show cursor */
  border: none;
  padding: 10px;
  font-family: monospace;
  font-size: 33px;
  resize: none;
  outline: none;
  line-height: 1.6;
  /* pointer-events: auto; Allow user interaction */
}

.user-input::selection {
  background-color: var(--neutral-100);
}

#img_star-2 {
  position: absolute;
  top: 60px;
  left: 0;
}
#img_star-1 {
  position: absolute;
  /* bottom: 60px; */
  right: 0;
  bottom: 60px;
}

.visual-feedback,
.user-input {
  box-sizing: border-box;
  max-height: 350px; /* or another value you prefer */
  overflow-y: auto;
}
.custom-dropdwon {
  gap: 10px;
  display: flex;
}
.dropdown-wrapper {
  display: flex;
  gap: 5px;
}

.img,
#Arraow_Icon_diifuclty {
  display: none;
}

.diffculty-dropdown-match {
  display: flex;
  gap: 10px;
}

ul.diffculty-dropdown-match li {
  display: flex;
  list-style: none;
}

.difficulty {
  display: none;
}

.img,
#Arraow_Icon {
  display: none;
}

.mode-dropdown {
  display: flex;
  gap: 10px;
}

ul.mode-dropdown li {
  display: flex;
  list-style: none;
}

.select {
  display: none;
}

.wrapper {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
  width: 100%; /* Respect parent width */
  max-width: 100%; /* Don't exceed parent */
}

/* Improved Media Queries for Responsiveness */
@media screen and (max-width: 1200px) {
  body {
    max-width: 100%;
    width: 95%;
    margin: 0 auto;
    padding: 0 1rem;
    /* Remove debug border */
  }

  .time-measurements p.time-button span,
  p.time-button,
  span.wpm,
  .difficulty-settings p,
  .mode-settings p {
    font-size: 1.25rem;
  }

  .difficulty-settings button,
  .mode-settings button {
    font-size: 1rem;
  }

  .typing-container {
    height: 28rem;
    /* Remove debug border */
  }

  section#intro-area {
    display: block;
    /* Remove debug border */
  }

  section#passage-area {
    position: static;
    transform: none;
    width: min(90%, 900px);
    margin: 2.5rem auto;
  }

  .passage-preview-wrapper {
    max-width: 100%;
    width: 100%;
  }

  .passage-preview {
    max-width: 62rem;
    height: 28rem;
  }

  .start-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  p.click-text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
}

@media screen and (max-width: 1044px) {
  .passage-preview {
    max-width: 57.6rem;
  }
  .visual-feedback,
  .user-input {
    height: auto;
    max-height: 21rem; /* or another value you prefer */
    overflow-y: auto;
    user-select: auto;
  }

  .typing-container {
    height: 16rem;
  }
  .wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  button.try-again-button {
    margin: 135px auto;
    font-size: var(--font-size-body);
  }
}
@media screen and (max-width: 910px) {
  .passage-preview {
    max-width: 50rem;
    height: 30vh;
  }
  .wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
}

@media screen and (max-width: 884px) {
  .passage-preview {
    max-width: 43rem;
    height: 20 vh;
  }

  .wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  /* .user-input {
    height: 14rem;
  }
  .typing-container {
    height: 14rem;
  } */
}

@media screen and (max-width: 768px) {
  body {
    padding: 0 0.34rem;
    max-width: 100%;
    width: 89%;
  }
  .passage-preview {
    max-width: 40rem;
    height: 10vh;
  }
  .wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  /* button.try-again-button {
    margin: 160px auto;
    font-size: var(--font-size-body);
  } */

  /* .user-input {
    height: 18rem;
  }
  .typing-container {
    height: 15rem;
  } */
}

@media screen and (max-width: 690px) {
  body {
    padding: 0 0.34rem;
    max-width: 100%;
    width: 80%;
  }
  .passage-preview {
    max-width: 36rem;
    height: 10vh;
  }
  .difficulty-settings p {
    display: none;
  }

  .mode-settings {
    border: 1px solid var(--neutral-500);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-direction: column;
    border-radius: 8px;
  }

  .mode-settings p {
    display: none;
  }

  .img,
  #Arraow_Icon {
    position: absolute;
    left: 70%;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 160px; */
    height: 8px;
  }

  .dropdown-wrapper {
    position: relative;
    padding: 10px;
    height: 40px;
    width: 280px;
    background-color: var(--neutral-900);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* border: 2px solid red; */
  }

  .select {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mode-dropdown {
    position: absolute;
    top: 25%;
    bottom: auto;
    background-color: var(--neutral-800);
    padding: 5px;
    width: 280px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    opacity: 1;
  }

  .mode-dropdown li {
    /* border: 2px solid red; */
    margin: 5px 0;
    display: flex;
  }

  .settings-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .custom-dropdwon {
    gap: 10px;
    border: 1px solid var(--neutral-500);
    flex-direction: column;
  }

  .custom-dropdwon {
    position: relative;
    padding: 10px;
    height: 40px;
    width: 280px;
    background-color: var(--neutral-900);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .difficulty {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .img,
  #Arraow_Icon_diifuclty {
    position: absolute;
    left: 63%;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 160px; */
    height: 8px;
  }

  .diffculty-dropdown-match {
    position: absolute;
    top: 25%;
    bottom: auto;
    background-color: var(--neutral-800);
    padding: 5px;
    width: 280px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    opacity: 1;
  }
  .diffculty-dropdown-match li:not(:last-child) {
    border-bottom: 1px solid var(--neutral-500);
    margin: 5px 0;
    padding-bottom: 5px;
    display: flex;
  }

  .diffculty-dropdown-match li button {
    background-color: transparent;
    color: var(--neutral-0);
    border: none;
    text-align: center;
    padding: 0 10px;
    width: auto;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
  }

  .difficulty-settings button.active {
    border: none;
    color: white;
  }

  .mode-dropdown li:not(:last-child) {
    border-bottom: 1px solid var(--neutral-500);
    margin: 5px 0;
    padding-bottom: 5px;
    display: flex;
  }

  .mode-dropdown li button {
    background-color: transparent;
    color: var(--neutral-0);
    border: none;
    text-align: center;
    padding: 0 10px;
    width: auto;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
  }

  .mode-settings button.active {
    border: none;
    color: white;
  }

  p.click-text {
    top: 60%;
    left: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    max-width: 430px;
    width: 100%;
    /* padding: 10px; */
  }
}

@media screen and (max-width: 627px) {
  .passage-preview {
    max-width: 33rem;
    height: 10vh;
  }
  .custom-dropdwon,
  .dropdown-wrapper {
    width: 245px;
    max-width: 100%;
    height: auto;
    padding: 5px;
  }

  img,
  #Arraow_Icon,
  #Arraow_Icon_diifuclty {
    top: 40%;
  }
  .mode-dropdown {
    /* left: 44%; */
    width: 245px;
  }
  /* button.try-again-button {
    margin: 150px auto;
    font-size: var(--font-size-body);
  } */
}
@media screen and (max-width: 572px) {
  body {
    max-width: 100%;
    width: 99%;
    height: 90%;
  }
  .passage-preview {
    max-width: 29rem;
    height: 10vh;
  }
  .custom-dropdwon,
  .dropdown-wrapper {
    width: 200px;
    max-width: 100%;
    height: auto;
    padding: 5px;
  }
  img,
  #Arraow_Icon,
  #Arraow_Icon_diifuclty {
    top: 40%;
  }
  .mode-dropdown {
    /* left: 50%; */
    width: 215px;
  }
}
@media screen and (max-width: 494px) {
  body {
    padding: 0 0.34rem;
    max-width: 100%;
    width: 98%;
  }

  .time-measurements {
    gap: 7px;
  }
  .time-measurements p {
    padding: 7px;
  }

  p.border {
    height: 50px;
  }

  .passage-preview {
    max-width: 23rem;
    height: 10vh;
  }

  .custom-dropdwon,
  .dropdown-wrapper {
    width: 160px;
    max-width: 100%;
    height: auto;
    padding: 5px;
  }
  .start-button {
    max-width: 100%;
    width: 65%;
    padding: 13px 14px;
  }

  p.click-text {
    font-size: 1.1rem;
  }

  .wrapper {
    justify-content: center;
  }

  .diffculty-dropdown-match {
    /* left: 50%; */
    width: 215px;
  }
  .start-button {
    padding: 4px 10px;
    font-size: 1.12rem;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    width: 50%;
  }
}
/* Fix 1: Flatten the media queries structure */
/* Remove nesting - move all queries to top level */

/* Add NEW phone breakpoint */
@media screen and (max-width: 480px) {
  body {
    padding: 0 0.4rem;
    max-width: 100%;
    width: 95%;
  }

  #passage-display,
  #visual-feedback,
  #user-input {
    font-size: 35px;
  }

  .passage-preview {
    max-width: 25rem;
    height: 10vh;
  }

  .time-measurements {
    justify-content: center;
    align-items: center;
  }

  .time-measurements p {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  .time-measurements p.time-button span {
    font-size: clamp(0.5rem, 6vw, 3.5rem);
    font-weight: bold;
  }

  .typing-container {
    height: 200px;
  }

  .visual-feedback,
  .user-input {
    font-size: 18px;
    /* max-height: 200px; */
  }

  .img,
  #Arraow_Icon {
    left: 80%;
  }

  .img,
  #Arraow_Icon_diifuclty {
    left: 70%;
  }

  .custom-dropdwon,
  .dropdown-wrapper {
    width: 180px;
    max-width: 100%;
    height: auto;
    padding: 5px;
  }
  .mode-dropdown {
    top: 32%;
    /* left: 52%; */
    width: 180px;
    max-width: 100%;
    height: auto;
  }

  .start-button {
    padding: 4px 10px;
    font-size: 1.12rem;
    font-weight: bold;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    width: 60%;
  }

  p.click-text {
    top: 70%;
    left: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    max-width: 430px;
    width: 100%;

    /* padding: 10px; */
  }

  .diffculty-dropdown-match {
    top: 32%;
    width: 215px;
    max-width: 100%;
    height: auto;
  }

  .settings-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .passage-preview {
    font-size: 0.9rem;
    height: 150px;
  }
}

/* Smallest devices (320px) */
@media screen and (max-width: 375px) {
  body {
    padding: 0 0.2rem;
    max-width: 100%;
    width: 90%;
  }

  .passage-preview {
    max-width: 20rem;
    height: 10vh;
  }

  .custom-dropdwon,
  .dropdown-wrapper {
    width: 140px;
    max-width: 100%;
    height: auto;
    padding: 5px;
  }

  .mode-dropdown {
    top: 30%;
    width: 140px;
    max-width: 100%;
    height: auto;
  }

  .diffculty-dropdown-match {
    top: 30%;
    width: 140px;
    max-width: 100%;
    height: auto;
  }

  .difficulty-settings button,
  .mode-settings button {
    padding: 0 5px;
    font-size: 0.9rem;
  }

  .test-result {
    gap: 5px;
  }

  :is(.result-WPM, .result-Accuracy, .result-Errors) {
    width: 90px;
    height: 60px;
  }

  .start-button {
    max-width: 100%;
    width: 65%;
    padding: 13px 10px;
  }
  p.click-text {
    font-size: 1rem;
  }
}

@media screen and (max-width: 320px) {
  body {
    padding: 0 0.1rem;
    max-width: 100%;
    width: 85%;
  }

  .passage-preview {
    max-width: 18rem;
    height: 10vh;
  }

  .time-measurements {
    gap: var(--neutral-500);
  }
  .time-measurements p {
    padding: 4px;
  }

  p.click-text {
    font-size: 1rem;
  }

  .difficulty-settings button,
  .mode-settings button {
    padding: 0 5px;
    font-size: 0.8rem;
  }

  .test-result {
    gap: 5px;
  }

  :is(.result-WPM, .result-Accuracy, .result-Errors) {
    width: 80px;
    height: 50px;
    font-size: 0.8rem;
  }
  .start-button {
    max-width: 100%;
    width: 90%;
  }
}

@media screen and (max-width: 280px) {
  body {
    padding: 0 0.91rem;
    max-width: 100%;
    width: 70%;
  }
  .passage-preview {
    max-width: 16rem;
    height: 10vh;
  }

  .difficulty-settings button,
  .mode-settings button {
    padding: 0 5px;
    font-size: 0.7rem;
  }

  .test-result {
    gap: 5px;
  }

  :is(.result-WPM, .result-Accuracy, .result-Errors) {
    width: 70px;
    height: 40px;
    font-size: 0.7rem;
  }
  .start-button {
    max-width: 100%;
    width: 95%;
    padding: 10px 4px;
  }
}
@media screen and (max-width: 260px) {
  body {
    padding: 0 0.91rem;
    max-width: 100%;
    width: 60%;
  }
  /* Header adjustments */
  header {
    margin-top: 10px;
    gap: 5px;
  }

  .logo {
    height: 30px;
  }

  .theme-toggle h1 {
    font-size: 0.75rem;
  }

  .trophy-icon {
    height: 18px;
  }

  /* Main content */
  body {
    padding: 0 0.3rem;
    max-width: 100%;
    width: 60%;
  }

  /* Time measurements */
  .time-measurements {
    gap: 2px;
    margin-bottom: 10px;
  }

  .time-measurements p.time-button span {
    /* font-size: clamp(0.3rem, 4vw, 2rem); */
    margin-left: 4px;
  }

  /* Passage preview */
  .passage-preview {
    max-width: 12rem;
    height: 6vh;
    padding: 8px;
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* Buttons */
  .difficulty-settings button,
  .mode-settings button {
    padding: 0 2px;
    /* font-size: 0.5rem; */
    height: 24px;
  }

  .start-button {
    padding: 3px 19px;
    font-size: 0.68rem;
    max-width: 100%;
    width: 90%;
  }

  /* Test results */
  .test-result {
    gap: 2px;
  }

  :is(.result-WPM, .result-Accuracy, .result-Errors) {
    width: 50px;
    height: 32px;
    font-size: 0.5rem;
    padding: 5px;
  }

  /* Typing container */
  .typing-container {
    height: 120px;
  }

  .visual-feedback,
  .user-input {
    font-size: 12px;
    max-height: 120px;
  }

  /* Dropdowns */
  .custom-dropdwon,
  .dropdown-wrapper,
  .mode-dropdown,
  .diffculty-dropdown-match {
    width: 120px;
    padding: 3px;
  }

  /* Click text */
  p.click-text {
    font-size: 0.9rem;
    max-width: 100%;
  }
}

/* button:disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
} */