@import url("../../english/shared/zh-english-module.css?v=8");

.level-speech-bubble {
  top: -8%;
  right: -12%;
  width: clamp(124px, 12vw, 168px);
  max-width: min(190px, 48vw);
  padding: 0 18%;
  font-family: "Baloo 2", "Hiragino Sans", "Yu Gothic", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: normal;
  text-orientation: mixed;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
  transform: rotate(3deg);
}

.level-speech-bubble .bubble-local {
  display: block;
  text-align: center;
  line-height: 1.08;
  overflow-wrap: normal;
  text-orientation: mixed;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}

.japanese-prompt {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 15px;
  box-shadow: none;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  flex-wrap: wrap;
  font-family: "Nunito", "Hiragino Sans", "Yu Gothic", "Microsoft YaHei", "PingFang SC", sans-serif;
  gap: .1rem .75rem;
  justify-content: center;
  margin: 2px auto 0;
  max-width: 100%;
  min-height: 0;
  padding: 4px 14px;
  text-align: center;
  width: auto;
}

.japanese-prompt:hover,
.japanese-prompt:focus-visible {
  background: #f0eeff;
  outline: none;
}

.japanese-word-prompt {
  display: block;
  font-size: clamp(3rem, 10vw, 5.8rem);
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.question-kana {
  color: #5b50d6;
  display: block;
  flex: 0 0 100%;
  font-size: clamp(1.1rem, 3.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
}

.japanese-prompt .listen-icon {
  align-self: center;
  color: #5b50d6;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1;
}

.japanese-prompt + .flag-question-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto 0;
}

@media (max-width: 640px) {
  .level-speech-bubble {
    top: -2%;
    right: -3%;
    width: clamp(126px, 38vw, 148px);
    max-width: min(148px, 48vw);
    font-size: 14px;
  }

  .japanese-prompt {
    padding-inline: 8px;
  }

  .japanese-word-prompt {
    font-size: clamp(2.65rem, 14vw, 4.35rem);
  }
}