/* ---------- フォニックス ブレンディング画面 ---------- */

.blend-tiles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 3vw, 22px);
  flex: 0 0 auto;
  padding: 6px 0;
}

.blend-tile {
  display: grid;
  place-items: center;
  width: clamp(84px, 22vw, 150px);
  height: clamp(84px, 22vw, 150px);
  border: 5px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)),
    var(--sun);
  box-shadow: 0 12px 28px rgba(39, 50, 72, 0.12);
  cursor: pointer;
  transition: transform 140ms ease, outline-color 140ms ease;
}

.blend-tile strong {
  font-family: Arial, "Helvetica Neue", "Segoe UI", sans-serif;
  font-size: clamp(3rem, 12vw, 5.6rem);
  line-height: 1;
}

.blend-tile-wide strong {
  font-size: clamp(1.9rem, 8vw, 3.8rem);
}

.blend-tile.speaking {
  outline: 6px solid var(--accent);
  transform: scale(1.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.88)),
    var(--mint);
}

#blendScreen .choices {
  flex: 1 1 auto;
}

@media (orientation: landscape) and (max-height: 540px) {
  .blend-tile {
    width: clamp(64px, 16vh, 96px);
    height: clamp(64px, 16vh, 96px);
  }

  .blend-tile strong {
    font-size: clamp(2.2rem, 9vh, 3.6rem);
  }
}