/* ---------- Layout comum das telas ---------- */

.screen {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* ---------- Tela inicial ---------- */

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background: radial-gradient(circle at 50% 30%, var(--color-sky), var(--color-bg));
  position: relative;
}

.home__character-preview {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

.home__title {
  color: var(--color-text-inverse);
  font-size: clamp(28px, 4vw, 44px);
  margin: 0;
  text-align: center;
}

.home__play-button {
  min-width: 220px;
  min-height: calc(var(--touch-target-min) * 1.4);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--color-text-inverse);
  background: var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 0 rgb(0 0 0 / 0.2);
  transition: transform var(--transition-fast);
}

.home__play-button:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.2);
}

.home__corner-actions {
  position: absolute;
  top: calc(var(--safe-top) + 16px);
  right: calc(var(--safe-right) + 16px);
  display: flex;
  gap: 12px;
}

.home__settings-gear,
.home__admin-link {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.25);
  color: var(--color-text-inverse);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------- Tela de configurações ---------- */

.settings {
  flex: 1;
  overflow-y: auto;
  padding: 24px calc(24px + var(--safe-right)) 24px calc(24px + var(--safe-left));
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings__title {
  margin: 0;
  font-size: 28px;
}

.settings__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings__group-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.settings__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--touch-gap);
}

.settings__option {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 12px 20px;
  font-size: 20px;
  font-weight: 700;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 3px solid transparent;
}

.settings__option[aria-pressed='true'] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.settings__character-option {
  min-width: 112px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.settings__character-image {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.settings__volume {
  width: 100%;
  height: var(--touch-target-min);
  accent-color: var(--color-accent);
}

.settings__back-button {
  align-self: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 12px 32px;
  font-size: 22px;
  font-weight: 700;
  border-radius: var(--radius-md);
  background: var(--color-success);
  color: var(--color-text-inverse);
}

/* ---------- Tela do jogo ---------- */

.game {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-sky);
  position: relative;
}

.game__exit-button {
  position: absolute;
  top: calc(var(--safe-top) + 12px);
  left: calc(var(--safe-left) + 12px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  color: var(--color-text-inverse);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.game__challenge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 8px;
}

.game__challenge-vowel {
  font-size: clamp(48px, 8vw, 88px);
  font-weight: 800;
  color: var(--color-text);
  background: var(--color-surface);
  padding: 4px 32px;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.15);
}

.game__challenge-vowel.is-hidden {
  visibility: hidden;
}

.game__speaker-button {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: 50%;
  background: var(--color-accent-2);
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.15);
}

.game__speaker-button[hidden] {
  display: none;
}

.game__track {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--color-track);
}

.lane {
  position: relative;
  height: 50%;
  border-bottom: 6px dashed var(--color-track-line);
  background-image: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 0.06) 0 40px,
    transparent 40px 80px
  );
  background-size: 160px 100%;
  animation: lane-scroll 1.4s linear infinite;
}

.lane:last-child {
  border-bottom: none;
}

.game.speed-slow .lane {
  animation-duration: 2.6s;
}

/* Modificadores independentes da velocidade base, aplicados durante o ciclo
   do desafio (seção 11.2): desacelera ao aguardar resposta, pausa na ajuda. */
.game.is-decelerated .lane {
  animation-duration: 3.4s;
}

.game.is-paused .lane {
  animation-play-state: paused;
}

@keyframes lane-scroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -160px 0;
  }
}

.character {
  position: absolute;
  left: var(--char-x, 10%);
  top: var(--lane-position, 25%);
  width: 72px;
  height: 72px;
  transform: translateY(-50%);
  transition: top var(--transition-medium), left var(--approach-duration) linear;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 28px;
  color: var(--color-text-inverse);
  background: var(--char-primary, var(--color-accent));
  border: 4px solid var(--char-secondary, var(--color-accent-2));
  box-shadow: 0 6px 12px rgb(0 0 0 / 0.3);
  animation: character-run 0.5s ease-in-out infinite alternate;
}

.character--snap {
  transition: none;
}

.character--sprite {
  color: transparent;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--char-sprite-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
}

.home__character-preview.character--sprite {
  animation: character-preview-float 0.5s ease-in-out infinite alternate;
}

.home__character-preview.character--sprite-sheet {
  background-size: 300% 200%;
  animation:
    character-preview-float 0.5s ease-in-out infinite alternate,
    character-sprite-sheet 0.6s step-end infinite;
}

.character.character--sprite {
  width: 176px;
  height: 176px;
  animation: character-run 0.5s ease-in-out infinite alternate;
}

.character.character--sprite-sheet {
  background-size: 300% 200%;
  animation:
    character-run 0.5s ease-in-out infinite alternate,
    character-sprite-sheet 0.6s step-end infinite;
}

@keyframes character-preview-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}

@keyframes character-sprite-sheet {
  0% {
    background-position: 0% 0%;
  }
  16.667% {
    background-position: 50% 0%;
  }
  33.333% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
  66.667% {
    background-position: 50% 100%;
  }
  83.333%,
  100% {
    background-position: 100% 100%;
  }
}

@keyframes character-run {
  from {
    transform: translateY(-50%) translateY(0) scaleY(1);
  }
  to {
    transform: translateY(-50%) translateY(-4px) scaleY(1.04);
  }
}

.obstacle {
  position: absolute;
  top: var(--obstacle-lane-position, 25%);
  right: -96px;
  width: 96px;
  height: 96px;
  transform: translateY(-50%);
  background-image: url('/assets/obstacles/crate.png');
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.3));
}

.obstacle[hidden] {
  display: none;
}

.obstacle--approaching {
  transition: right var(--approach-duration) linear;
  right: 30%;
}

.obstacle--pass {
  transition: right 0.5s ease-in;
  right: calc(100% + 100px);
}

/* ---------- Botões de vogal ---------- */

.game__vowel-buttons {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--touch-gap);
  padding: 16px calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
  background: var(--color-surface);
}

.vowel-button {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 40px;
  font-weight: 800;
  color: var(--color-text);
  border: 4px solid rgb(0 0 0 / 0.1);
  transition: transform var(--transition-fast);
}

.vowel-button:active {
  transform: scale(0.94);
}

.vowel-button.is-correct {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-text-inverse);
  transform: scale(1.08);
}

.vowel-button.is-help-pulse {
  border-color: var(--color-accent-2);
  animation: help-pulse 0.7s ease-in-out infinite;
}

@keyframes help-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.vowel-button.is-disabled {
  pointer-events: none;
  opacity: 0.85;
}

/* ---------- Retrato ---------- */

@media (orientation: portrait) {
  .game__track {
    flex: 0.8;
  }

  .character,
  .obstacle {
    width: 72px;
    height: 72px;
  }

  .character.character--sprite {
    width: 132px;
    height: 132px;
  }

  .game__vowel-buttons {
    gap: 12px;
  }

  .vowel-button {
    width: calc(var(--touch-target-min) * 0.9);
    height: calc(var(--touch-target-min) * 0.9);
    min-width: calc(var(--touch-target-min) * 0.9);
    min-height: calc(var(--touch-target-min) * 0.9);
    font-size: 32px;
  }
}