@font-face {
  font-family: 'Scoreboard';
  src: url(fonts/scoreboard.ttf);
}
@font-face {
  font-family: 'LilitaOne';
  src: url(fonts/LilitaOne-Regular.ttf);
}

body {
  font-size: 30px;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 1;
  user-select: none;
  
}

.title {
  position: relative;
  text-align: center;
  margin: auto;
  margin-top: -20px;
  color: black;
  opacity: 100%;
}

.header {
  width: 100%;
  height: 20px;
  position: absolute;
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(74, 74, 74, 0.304);
  background-color: #ffffff;
  left: 0;
}

.statustext {
  position: absolute;
  margin: auto;
  margin-top: 30px;
  transform: translate(-50%, 0);
  text-align: center;
  background-color: rgb(80, 80, 80);
  border-radius: 10px;
  opacity: 0;
  padding: 10px;
  left: 50%;
  color: white;
  font-size: 1.2rem;
}

.statustext.fade {
  opacity: 0;
}

.bubble {
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 35px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-flex;
  user-select: none;
}

.placeholder {
    margin-left: -8px;
    color: gold;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-flex;
    user-select: none;
}

.wordsfound, .wordsfoundam {
  font-size: 1.25rem;
  font-weight: 100;
  text-decoration: underline;
  color: black;
  margin: auto;
  margin-top: 5px;
}

.wordwrap {
  margin: auto;
  width: 30rem;
  height: 15rem;
  border: 1px solid black;
  color: white;
  overflow: auto;
}

@media (max-width: 600px) {
  .wordwrap {
    width: 90vw;          /* 90% of the phone’s viewport width */
    max-width: 30rem;     /* still never exceed your 30 rem if viewport is wider */
    height: 40vh;         /* let it occupy up to 40% of the phone’s height */
    margin: 1rem auto;    /* small vertical margin + auto‐center horizontally */
    padding: 0.5rem;      /* (optional) give inner breathing room on small screens */
  }
}

.enteredbubble {
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  position: relative;
  display: inline-flex;
  margin: auto;
  margin-top: 5px;
  color: black;
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  user-select: none;
}

.enteredbubble {
  height: 22px;          /* slightly smaller in modal */
  width: 22px;
  font-size: 1.2rem;
  margin-top: 4px;
  background-color: #bbbbbb; 
}

.results-wordwrap {
  width: 95%;           /* fill the modal’s content width (max 360px) */
  max-width: none;       /* ignore the 30rem cap here—modal controls max width */
  height: 12rem;         /* shorter inside the modal */
  max-height: 30vh;      /* at most 30% of viewport height */
  border: 1px solid #ccc;
  margin: 1rem auto;
  padding: 0.75rem;      /* give inner breathing room */
  background: #fafafa;   /* light background so bubbles stand out */
  overflow-y: auto;      /* scroll vertically if too many bubbles */
}

.results-wordwrap .wordsfound,
.results-wordwrap .wordsfoundam {
  color: #333;           /* darker text inside white box */
}

.btn {
  background: gold;
  color: black;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin: 1rem;
  transition: 0.3s;
}

.btn:hover {
  background: orange;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 3) (Optionally: responsive tweaks within modal – adjust as needed)        */
/* ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .results-wordwrap {
    height: 14rem;       /* a little taller on tablets/desktops */
    max-height: 40vh;
  }
  .results-wordwrap .enteredbubble {
    height: 24px;
    width: 24px;
    font-size: 1.3rem;
  }
}

.points {
  margin-top: 2vh;
  font-family: sans-serif;
  color: rgb(80, 80, 80);
}

#singleGameContainer {
  margin-top: 2rem;
  cursor: text;
  padding: 2rem;          /* give it extra clickable area */
  background: rgba(255,255,255,0.05); /* (optional) slight tint so you know it’s there */
}

/* So the entered bubbles are on different rows */
.break {
  flex-basis: 100%;
  height: 0;
}
.break1 {
  margin-top: 5px;
}

/* Multiplayer Add-on */
.timer {
  margin-top: 20vh;
  margin-bottom: -2vh;;
  font-size: 2rem;
  color: red;
}
.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* optional, if you ever need absolute‐position tweaks: */
  position: relative;
}



/* ---------------------------------------------- */
/* 1) Hide the modal by default; show it with JS */
/* ---------------------------------------------- */
#resultsModal {
  display: none;           /* keep hidden until .active is added */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 2000;
  overflow: hidden;
}

/* ------------------------------------------------ */
/* NEW: when the wrapper has .active, make it show */
/* ------------------------------------------------ */
#resultsModal.active {
  display: flex;           /* now the wrapper itself becomes visible */
  justify-content: center; /* center overlay/box if you’d like */
  align-items: center;
}

/* ---------------------------------------------- */
/* 2) Dark, slightly blurred overlay behind modal */
/* ---------------------------------------------- */
.results-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ---------------------------------------------- */
/* 3) Central container (white box) styling       */
/* ---------------------------------------------- */
.results-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 360px;
  max-height: 90dvh;       /* prevents the white box from being taller than screen */
  overflow-y: auto;       /* allows scroll inside if content exceeds screen */
  padding: 1.5rem 1.5rem 2rem;
  text-align: center;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ---------------------------------------------- */
/* 4) Show overlay & scale up the container       */
/* ---------------------------------------------- */
#resultsModal.active .results-overlay {
  opacity: 1;
}
#resultsModal.active .results-container {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* …the rest of your CSS stays unchanged … */

/* ---------------------------------------------- */
/* 6) Title styling                              */
/* ---------------------------------------------- */
.results-title {
  margin: 0;
  padding-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #333;
  border-bottom: 1px solid #eee;
}

/* ---------------------------------------------- */
/* 7) Results body & rows                        */
/* ---------------------------------------------- */
.results-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;   /* vertical space between rows */
  margin-top: 1rem;
}

.results-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: #555;
}

/* Label (e.g. “Points:”) */
.results-label {
  flex: 0 0 auto;
  text-align: left;
}

/* Value (e.g. “15”) */
.results-value {
  flex: 0 0 auto;
  font-weight: 600;
  color: #111;
}

/* ---------------------------------------------- */
/* 8) Responsive tweaks (optional)                */
/* ---------------------------------------------- */
@media (min-width: 480px) {
  .results-wordwrap {
    max-height: 25vh !important;  /* ensure it doesn't push the page too tall */
    padding: 0.5rem;
    font-size: 0.9rem;
  }

  .enteredbubble {
    height: 20px;
    width: 20px;
    font-size: 1rem;
  }

  .results-container {
    padding: 1rem;
  }

  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  .results-title {
    font-size: 1.75rem;
  }
  .results-row {
    font-size: 1.1rem;
  }
  .results-close-button {
    font-size: 1.5rem;
  }
}