html,
body {
  width: 100%;
  height: 100%;
  background-color: var(--light-colour);
  overflow: hidden;
}

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

/* -------------------------------------------------------------------------- */
/*                              ARRANGE CONTAINER                             */
/* -------------------------------------------------------------------------- */

.arrange-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  height: 100svh;
}

/* -------------------------------------------------------------------------- */
/*                                TILES AREA                                  */
/* -------------------------------------------------------------------------- */

.arrange-tiles {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.75vmin;
  width: 100%;
  height: 90%;
  padding: 2vmin;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/*                                 TOOLBAR                                    */
/* -------------------------------------------------------------------------- */

.arrange-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  width: 100%;
  height: 10%;
  background-color: var(--light-colour);
}

/* -------------------------------------------------------------------------- */
/*                               INDIVIDUAL TILE                              */
/* -------------------------------------------------------------------------- */

.arrange-tile {
  font-size: 3.5vmin;
  font-weight: 400;
  color: var(--dark-colour);
  text-align: center;
  padding: 1.5vmin 2.5vmin;
  background-color: var(--white-colour);
  border-radius: 1vmin;
  white-space: nowrap;
  border: 0.1vmin dashed rgba(0, 0, 0, 0.3);
  box-shadow: none;
  user-select: none;
  cursor: grab;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.2s ease,
    padding 0.4s ease-out,
    font-size 0.4s ease-out,
    width 0.4s ease-out,
    height 0.4s ease-out;
}

.arrange-tile:hover {
  box-shadow:
    rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.arrange-tile:active {
  cursor: grabbing;
}

/* -------------------------------------------------------------------------- */
/*                          LETTER MODE (DYNAMIC SIZE)                        */
/* -------------------------------------------------------------------------- */

.arrange-tiles.letter-mode {
  flex-wrap: nowrap;
}

.arrange-tiles.letter-mode .arrange-tile {
  font-size: var(--tile-size, 5vw);
  padding: 0;
  width: calc(var(--tile-size, 5vw) * 2);
  height: calc(var(--tile-size, 5vw) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom drag states */
.arrange-tile.dragging {
  transform: scale(1.25);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1vmin 2vmin;
  cursor: grabbing;
  border: 0.1vmin solid rgba(0, 0, 0, 0.3);
}

.arrange-tile-placeholder {
  border: 0.1vmin dashed rgba(0, 0, 0, 0.3);
  border-radius: 1vmin;
  background: transparent;
}

/* -------------------------------------------------------------------------- */
/*                           CORRECT / INCORRECT                              */
/* -------------------------------------------------------------------------- */

.arrange-tile.correct {
  background-color: transparent;
  color: var(--grey-colour);
  border: none;
  box-shadow: none;
  pointer-events: none;
  cursor: default;
}

/* Sentence mode success - tighten spacing */
.arrange-tiles.all-correct:not(.letter-mode) {
  gap: 0.5vmin;
}

.arrange-tiles.all-correct:not(.letter-mode) .arrange-tile {
  padding: 0.25vmin 0.5vmin;
  font-size: 4.5vmin;
}

/* Letter mode success animation - collapse tiles together */
.arrange-tiles.letter-mode.all-correct {
  gap: 0.25vmin !important;
  transition: gap 0.4s ease-out;
}

.arrange-tiles.letter-mode.all-correct .arrange-tile {
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: calc(var(--tile-size, 5vw) * 1.8) !important;
}

.arrange-tile.incorrect {
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-0.5vmin);
  }
  40% {
    transform: translateX(0.5vmin);
  }
  60% {
    transform: translateX(-0.5vmin);
  }
  80% {
    transform: translateX(0.5vmin);
  }
}

/* -------------------------------------------------------------------------- */
/*                               CHECK BUTTON                                 */
/* -------------------------------------------------------------------------- */

.arrange-check-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vmin;
  padding: 1.5vmin 4vmin;
  font-size: 2.5vmin;
  font-weight: 600;
  font-family: var(--chosen-font, 'Outfit', sans-serif);
  color: var(--light-colour);
  background-color: var(--dark-colour);
  border: none;
  border-radius: 1vmin;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0.5vmin 1vmin;
}

.arrange-check-btn svg {
  width: 2.5vmin;
  height: 2.5vmin;
  fill: currentColor;
}

.arrange-check-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-0.25vmin);
}

.arrange-check-btn:active {
  transform: translateY(0);
}

.arrange-check-btn.checked {
  opacity: 0.7;
}

.arrange-check-btn.all-correct {
  background-color: var(--dark-colour);
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/*                               NAVIGATION                                   */
/* -------------------------------------------------------------------------- */

.arrange-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
}

.arrange-counter {
  font-size: 2vmin;
  font-weight: 300;
  color: var(--dark-colour);
  min-width: 8vmin;
  text-align: center;
  opacity: 0.75;
}

#check-btn,
#speak-btn {
  padding: 1.5vmin 4vmin;
  min-width: 20vmin;
  font-size: 2vmin;
}

#next-btn,
#prev-btn {
  background-color: var(--dark-colour);
}

#next-btn svg,
#prev-btn svg {
  fill: var(--light-colour);
}

.dialog-note {
  position: absolute;
  top: 50%;
  line-height: 1.2;
  font-size: 1.5vmin !important;
}

.inactive {
  background-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: none !important;
  border-top: 2px solid rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid white !important;
  color: rgba(0, 0, 0, 0.3) !important;
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/*                               SPEAK BUTTON                                 */
/* -------------------------------------------------------------------------- */

#speak-btn {
  display: none; /* Hidden by default - shown when TTS enabled */
  background-color: var(--dark-colour);
}

#speak-btn svg {
  fill: var(--light-colour);
}

#speak-btn.speaking {
  opacity: 0.5;
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/*                              VOICE OVERLAY                                 */
/* -------------------------------------------------------------------------- */

.voice-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--dark-colour);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.voice-overlay.hidden {
  display: none;
}

.voice-list-container {
  background: var(--light-colour);
  border-radius: 1vmin;
  max-width: 420px;
  width: 94vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 0.2vmin 0.4vmin,
    rgba(0, 0, 0, 0.3) 0px 0.7vmin 1.3vmin -0.3vmin,
    rgba(0, 0, 0, 0.2) 0px -0.3vmin 0px inset;
  padding: 2vmin 2vmin;
}

#voice-list {
  flex: 1 1 auto;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0 0 1em 0;
}

#voice-list li {
  font-size: 1.2em;
  padding: 1.2em 1.5em;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
}

#voice-list li.selected,
#voice-list li:hover {
  background: #f44936;
  color: #fff;
  font-weight: 600;
}

.voice-list-container h2 {
  padding: 2vmin 2vmin 3vmin 2vmin;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/*                            LANGUAGE INDICATOR                              */
/* -------------------------------------------------------------------------- */

#change-voice-main {
  display: none; /* Hidden by default - shown when TTS enabled */
  width: max-content;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 3.5vmin;
  bottom: 2.5vmin;
  column-gap: 1vmin;
  user-select: none;
  cursor: pointer;
  background-color: var(--white-colour);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1vmin 2vmin;
  border-radius: 1vmin;
}

#change-voice-main p {
  font-size: 1.75vmin !important;
  font-weight: 300;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: max-content;
}

#change-voice-main svg {
  height: 1.75vmin;
  width: auto;
  aspect-ratio: 1/1;
  fill: #999;
}

/* -------------------------------------------------------------------------- */
/*                         VOICE MENU BUTTON (SIDE MENU)                       */
/* -------------------------------------------------------------------------- */

#change-voice {
  display: none; /* Hidden by default - shown when TTS enabled (uses grid) */
}

/* -------------------------------------------------------------------------- */
/*                           RESPONSIVE ADJUSTMENTS                           */
/* -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .arrange-tile {
    font-size: 5vmin;
    padding: 2vmin 3vmin;
  }

  .arrange-check-btn {
    font-size: 4vmin;
    padding: 2vmin 5vmin;
  }

  .arrange-check-btn svg {
    width: 4vmin;
    height: 4vmin;
  }

  .arrange-nav-btn {
    width: 8vmin;
    height: 8vmin;
  }

  .arrange-nav-btn svg {
    width: 4vmin;
    height: 4vmin;
  }

  .arrange-counter {
    font-size: 3.5vmin;
  }
}